המדריך המלא לעיצוב אינפוגרפיקה בעברית: איך מתחילים, טיפים ומקרה מבחן.

המדריך המלא לעיצוב אינפוגרפיקה בעברית: איך מתחילים, טיפים ומקרה מבחן.

במאמר זה אשתף על התהליך של יצירת אינפוגרפיקה בעברית – איך מתחילים, טיפים שימושיים כדי לגשת למשימה מסוג זה בצורה חלקה, אסקור את התהליך עצמו ולבסוף (לקינוח) אסיים עם השראות מגניבות.

שמי עדי, אני מעצבת בסטודיו richkid ולאחרונה הוטלה עלי משימה- יצירת אינפוגרפיקה.
בפוסט זה אשתף אתכם במסקנות, בתהליך, בטיפים והשראה  בתקווה שזה יעזור לאלו מכם אשר חושבים ליצור גם אחת.

הבריף

יצירת אינפוגרפיקה פירסומית עבור סטודיו העיצוב richkid.
על פי דרישות המדיום (והבוס) על האינפוגרפיקה להיות תמציתית וליצור גירוי אצל קהל היעד שימשיך להתעניין בסטודיו.

לפני שמתחילים…

1. קהל יעד

כמו בכל עיצוב שאנו יוצרים, צריך להבין מיהו קהל היעד שלנו.
האם אלו אנשים מעולם העיצוב? אינטראקטיב? אולי אינם קשורים לתחום אלא “עוברי אורח”? האם אלו גברים או נשים? האם יש רלוונטיות למגדר במקרה הזה? מה גילאי היעד? וכו’.

>> במקרה של richkid רצינו לפנות לקהל המעצבים, בעיקר בעלי סטודיו למיניהם,  העוסקים בתחום הפרינט וגם בתחומי האינטראקטיב והאינטרנט.לקוחות פרטיים נלקחו בחשבון אך בצורה מועטה יותר. מבחינה מגדרית, פנינו לנשים וגברים כאחד.

2. מסר

מה אנו מנסים לומר?
ניסיתי להתמקד בשלושה מסרים בלבד ולא יותר וממליצה את זה בחום גם לכם.
אינפוגרפיקה עשוייה להיות ארוכה (פיסית). לרוב מלאה באלמנטים ויזואליים וטקסטים. אנו לא רוצים לעייף את הקוראים / צופים בריבוי מסרים. זה יכול ליצור איבוד עניין וסביר שאינם יגללו/יקראו עד הסוף וחבל.  הרי משקיעים בזה כל כך הרבה…
אם אתם מתכננים אינפוגרפיקה עבת כרס וארוכה, השתמשו בזה כדי לחזק מסרים קיימים ולא בניסיון למלא חלל בעוד ועוד תוכן.

>> במקרה שלנו : תצוגת יכולות – הדגשת צורך – הבנה של מי הוא סטודיו richkid

איך מתחילים?

לפעמים לתמצת זה קשה.
כדי להקל על אלו שלא נולדו עם כישרון התמצות (ואני ביניהם) אשתף בדרך שעזרה לי לאורך כל התהליך.
אני מאמינה שלכל אינפוגרפיקה צריכים להיות התחלה, אמצע וסוף. ישנם ודאי את אלו שיחלקו ויאמרו שאין צורך במבנה מאוד מסודר שכזה, אך אני מאמינה שהוא חשוב.
מדוע?
כמעצבים אנו תמיד צריכים לשים את המשתמש (במקרה זה צופה/קורא) לפנינו.  חובתנו היא להקל עליהם כמה שיותר ולהימנע מיצירת עומס נושאי.

יותר קל לנו לעכל נרטיב, תהליך, המשכיות. ולכן מבנה בעל התחלה , אמצע וסוף, הוא חשוב.

1. סיפור

כתיבת הסיפור

כתיבת הסיפור. כן אצלי הוא לא מתחיל במחשב, אלא במה שיוצא מהראש אל העט.

מהי הדרך הטובה ביותר ליצירת נרטיב אם לא סיפור. המציאו וכתבו סיפור. סיפור אמיתי, המדבר על הנושאים בהם אתם רוצים לגעת.
סיפור עוזר ביצירת שלד לאינפוגרפיקה וכמו כן מלווה אותנו לאורך התהליך. אך אל תטעו, אינכם הולכים להשתמש בכל הסיפור ויותר מכך סביר שתשתמשו רק בחלק קטן ממנו.

לאחר שכתבתם סיפור, סמנו משפטי מפתח. נסו לזהות אילו מהמשפטים יהיו לכם קלים יותר לתרגם ויזואלית.
כשאתם בוחרים את משפטי המפתח מהסיפור, אל תשכחו להצליב אותם אל מול המסרים שאתם רוצים להעביר. מה שנחמד בתהליך מסוג זה, שכנראה החלקים שתבחרו מהסיפור כבר מסודרים בצורה כרונולוגית ותדעו כבר בשלב זה היכן למקם כל חלק בתוך האינפוגרפיקה.

כלל חשוב - אתם ודאי מכירים את המשפט המוכר למעצבים, “אל תתאהב בעיצוב שלך” כך גם לגבי הסיפור שאתם כותבים. אל תתאהבו בסיפור שלכם! ברוב המקרים אינכם יכולים להכיל את כולו באינפוגרפיקה אחת. כנראה שתצטרכו לוותר על הרבה מחלקי  הסיפור, גם כאלו שאתם ממש אוהבים.

2. דילול
איך תיפטרו מחלקי הסיפור שלכם שאתם ממש אוהבים בלי להרגיש רע? שימו מולכם תמיד את המסרים שאתם מעוניינים להעביר. אם חלקים בסיפור שלכם אינם  מתיישבים עם מסרים אלו, אתם בהחלט יכולים לוותר עליהם.
זכרו תמיד מהי המטרה.
מדוע כתבתם סיפור?
האינפוגרפיקה צריכה להיות פשוטה, בהירה ורלוונטית.

3. עובדות ונתונים
כעת צריך להחליט, אם אנו מעוניינים להציג עובדות ונתונים על מנת לחזק ולגבות  את סיפורנו. ברוב האינפוגרפיקות היום ישנם נתונים עובדתיים.
אם החלטתם שכן, ורצוי שכן- נתונים עובדתיים יוצרים אמינות ו”אובייקטיביות”. הם גורמים לצופה להרגיש ביטחון. זה יכול לעזור לו לרצות ולהמשיך לגלול הלאה. אך אל תגזימו! יותר מידי נתונים עלולים לבלבל וליצור קיטוע ברצף הסיפור. איפה מוצאים נתונים

>> במקרה שלי, חיפשתי במרכזי סקרים למיניהם כמו TNS טלסקר, בעיתונות,  אגודות ואיגודים שונים, פרסומים ומאמרים כלכליים והלישכה המרכזית לסטטיסטיקה.

4. סטורי בורד
אחרי דילול הטקסטים מהסיפור, עלינו לקחת את המשפטים הנותרים ולנסות לתרגם אותם לסצנות ויזואליות אך סצנות מתומצתות.
כדאי שבשלב זה כמות נכבדה מאוד של טקסט  תיהפך לויזאולית. מטרתו של הסטוריבורד היא לבדוק האם יצרנו רצף תקין לאורך האינפוגרפיקה טקסטואלי וגם ויזואלי.

סטורי בורד

תמונה ראשונה מתוך שתיים- יצירת דימוי בסטורי בורד שלי

סטוריבורד- דוגמא סופית גמורה

תמונה שניה- המציגה את אותו החלק שבסטוריבורד במצב גמור. (החלק השמאלי עם העוגה)

5. וויר פריימס
ישנו צורך ביצירת וויר פריים כללי, אשר יתן לנו אומדן של אורך האינפוגרפיקה,  של החלוקות הפנימיות של התוכן, ושיבוץ הסצנות מהסטוריבורד.

6. ביצוע
בשלב זה אני התחלתי בבחירת השפה הויזואלית. כמו במיתוג או אתר, גם כאן יש צורך בשמירה על אחידות השפה. כמובן שרצוי לבחור בשפה ויזואלית אשר תחזק את המסרים שלכם.

>> במקרה של richkid אנו מספרים על בית, משפחה. בחרתי בשפה שמעבירה חום, חומריות ותחושה פיזית. מעבר לכך, האלמנטים הויזואלים שבחרתי לייצג איתם  את הסיפור מאויירים מעט, לא חדשניים. רציתי לייצר תחושה מעט נוסטלגית  אך לא ישנה מידי.

שפה עיצובית

שפה עיצובית – בחירת שפה שמתאימה למסרים שלכם

7. צבעוניות וטקסטורה
בשלב זה עלינו לבחור את פלטת הצבעים שלנו.
רצוי לבחור מספר צבעים מועט אשר  לא יצור “רעש” אלא אם כן זהו המסר… אם יש לכם צורך ביותר מחמישה גוונים – זה אומר שני דברים: האחד- שאתם לא באמת צריכים כל כך הרבה, והשני – אם אתם  חשים בצורך בצבעים נוספים השתמשו בגוונים מאותה משפחה של אחד מהצבעים שכבר  בחרתם קודם או אפילו השתמשו באותו הצבע רק החליפו לו טקסטורה. כבר כך יפתחו בפניכם אפשרויות גיוון רבות.

שימו לב שבזמן בחירת הצבעים תבחרו בכאלו שמחזקים את המותג, מוצר, מסר שלכם.  חישבו האם יש צבעוניות מזוהה כבר עם אותו מותג?
אם קשה לכם במציאת צבעים הנה שני לינקים לאתרים שיעזרו לכם בבחירה:
kuler.adobe.com
colourlovers.com

>> במקרה שלנו, הטקסטורות שבחרתי הן מסיבה דומה לזאת של האלמנטים הויזואלים  שהזכרתי קודם. בחרתי צבעים שמזוהים עם richkid שהם אדום, שחור ומעט לבן, ומהצד השני הוספתי צבעים שיחזקו וישתלבו עם הסיפור והמסרים שלנו.

צבעוניות וטקסטורה

מעבר לצבעוניות שנבחרה ניתן לראות שהטקסטורות יוצרות תוספת צבעים מבלי להוסיף באמת צבע חדש לפלטה. יעזור לאלו מכם שחשים צורך בצבע נוסף אך לא רוצים לשבור את העקביות הצבעונית

8. הובלה
באינפוגרפיקה מעצם ריבוי אלמנטים ויזואלים, הצופה יכול לעתים להתבלבל ולא להבין  לאן עליו להמשיך.
איך נוביל אותו בדרך שאנו רוצים? ניתן לעשות זאת בכמה אמצעים.
האחד- יצירת אלמנטים ויזואלים בעלי כיוון שחורגים מן המסגרות שיצרנו וגורמים לעין להמשיך אחריהם עד למקום הבא שאליו נרצה שיגיעו. (אלמנטים אלו יכולים להיות מאוד קטנים ומינימליים אך אם מחשבים את מיקומם היטב, ועושים אותם בצורה הנכונה הם יכולים להשפיע על דרכו של הקורא במידה רבה.)
דרך נוספת היא כמובן יצירת תוכן ברור ונהיר, בעל סדר כרונולוגי. והדרך האחרונה  היא על ידי צבעוניות בולטת המושכת את העין, במקרה זה, שימו לב שלא ימשכו לזה מיד ואז ידלגו על שאר הדברים- יש להשתמש בדרך זאת בזהירות רבה…

>> במקרים המוצגים מטה, השתמשתי בדרך של יצירת אלמנטים.
בדוגמה מספר 1: השתמשתי בקו שחור- הצבע והתנועה של הקו מושכים את העין כלפי מטה, ושמאלה – עם כיוון הקו.
בדוגמא מספר 2: היד ורגל -אלו אלמנטים מרמזים, תשומת הלב אליהם נמשכת גם מעצם החריגה הפיזית מה"ריבוע שלהם" וגם מעצם זה שבמקום שבו הם נמצאים אין אלמנטים נוספים, יש מספיק חלל מסביבם שימשוך אליהם את העין. הם אינם כה חד משמעיים כמו הקו השחור בדוגמא הקודמת. מכאן אתם יכולים להסיק גם על חשיבות סדר הקריאה, בכל איזור תוכן.  למשל, בחלק שבו ישנו הקו השחור- חשוב היה לי מאוד שיגיעו לטקסט באיזור השמאלי. לעומת זאת כנראה שבאיזור היד והרגל בדוגמה השניה הצורך בקריאה אנליטית פחות חושב.

דוגמה 1: אלמנט מוביל

דוגמה 1: אלמנט מוביל – שימו לב לקו השחור שממש מוביל אותנו אל האיזור הבא בסדר הקריאה

דוגמה 2: אלמנט מוביל

דוגמה 2: אלמנט מוביל – שימו לב ליד ולרגל החורגות מגבול איזור התוכן שלהן ויוצרות תשומת לב באיזור הקריאה הבא.

9. הצגת נתונים ועובדות
ישנם מספר כללים שחשוב לזכור כשיוצרים דיאגרמה ודומיה.
א. בזמן תהליך יצירת דיאגרמה, עוגה וכו’, חישבו על הצופים בה. דמיינו כמה  דיאגרמות כבר ראו בעבר? נסו לשנות, לשבור את המוכר ולמצוא דרך חדשה להציג את המידע, אל תיכנעו למוכר והבטוח אלא אם הוא באמת הדרך המתאימה ביותר להציג את מה שרציתם (תמיד יש דרך טובה יותר…)

תצוגת מידע מוכרת אך קצת מרעננת ופשוטה מאוד להבנה

תצוגת מידע מוכרת אך קצת מרעננת ופשוטה מאוד להבנה – כבר אמרנו שאנחנו אוהבים פשוט!

ויזואליזציה של מידע בדרך מוכרת אך עדין שונה

ויזואליזציה של מידע בדרך מוכרת אך עדין שונה

ב. נסו לשלב את הדיאגרמות בשפה הויזואלית שיצרתם לכל האינפוגרפיקה. הפכו אותה לחלק אינטגרלי מהסיפור והעולם התוכני. חלק מהשלם ולא סתם דיאגרמה שמציגה מידע יבש.

המשכיות השפה הויזואלית

המשכיות השפה הויזואלית- לפעמים לא צריך ליצור שינוי דרסטח בדרך המוכרת של הצגת גרפים. לעתים החידוש הוא בהתאמה הויזואלית לעולם התוכן של אותה האינפוגרפיקה

ג. השתמשו באינטואיציה. לדוגמה נתון שמציג כמות גדולה או מספר גבוה צריך לקבל חשיבות ויזואלית ביחס לנתונים המציגים מספר נמוך. אז אם אתם מציגים שני עיגולים, הפכו עיגול אחד לשמן וגדול- ובו תציגו את המספר הגדול והשני קטן ורזה (כמובן על פי הנתונים שמצאתם).
זה יעזור ויקל בפירוש ותרגום הדיאגרמה  על ידי הצופה.

תצוגת "בלון"- גודל ויזואלי לפי הכמות.

תצוגת "בלון"- גודל ויזואלי לפי הכמות.

דוגמה נוספת לתצוגה על פי גודל מול כמות

דוגמה נוספת לתצוגה על פי גודל מול כמות

דוגמא נוספת לדרך הצגת מידע.

דוגמא נוספת לדרך הצגת מידע. פשוט יפה וברור…

דוגמאות לתצוגת מידע מתוך האינפוגרפיקה של richkid

תצוגת מידע שאני יצרתי על פי גודל. גדול = חשוב = כמות גדולה.

תצוגת מידע שאני יצרתי על פי גודל. גדול = חשוב = כמות גדולה.

עוד צורה של תצוגת נתונים

עוד צורה של תצוגת נתונים – פה ניתן לראות שגם לצבע יש חשיבות גם לצורה וגם לגודל. ישנו תהליך אשר מגיע לשיאו בחלק של ה"פרח" הימני ביותר

דוגמה נוספת לתצוגת מידע באינפוגרפיקה שלי

דוגמה נוספת לתצוגת מידע באינפוגרפיקה שלי, לקחתי את דגם הפאי הידוע, וניסיתי ליצור אותו באופן מעט שונה, קצת לחדש אך לא להרחיק לכת מהצורה המוכרת

10. הרוח במפרשים.
נסו לא לוותר לעצמכם, ולא להתעייף באמצע הדרך. ההתחלה חדורת מוטיבציה  ולעתים הכוח נגמר בדרך. רואים את זה. שמרו על עקביות לאורך כל האינפוגרפיקה.  נכון שהתהליך יכול לעייף, אך בסוף אתם יוצרים מוצר. מוצר אחד, שנמדד כולו  ולא חלקים ממנו. אל תיצרו ציפייה בהתחלה ותאכזבו בסוף.

11. התוצאה הסופית (-:

האינפוגרפיקה של ריצ'קיד

האינפוגרפיקה של ריצ'קיד

הלינק לאינפוגרפיקה זו http://www.richkid.co.il/us/infographic/richkidstory

 

זהו אתם מוכנים להתחיל! בהצלחה!

לקינוח – כמה אינפוגרפיקות להשראה

השראה - 1

השראה - 3

את זאת אני מכניסה עם הסתייגות. למרות שהיא נכנסת לקטגוריית ה"מגניבה" היא אינה מסודרת ומאורגנת כמו שצריך.

השראה - 4

השראה - 5

השראה - 6

השראה - 7

השראה - 8

השראה - 9

השראה - 10

כל ההשראות בפוסט הזה שאולות מאתר http://visual.ly/ אתר נהדר בכלל להשראות נוספות של אינפוגרפיקה וויזואליזציה של מידע

fold-left fold-right
אודות הכותב
שמי עדי. אני מעצבת בתחום המדיה והאינטרנט, לאורכו ולרוחבו, בוגרת שנקר. אני אוהבת וחיה את העבודה שלי, ובמיוחד אוהבת שהעולם הזה מלא באינסוף תגליות, קטנות וגדולות, בכל יום מחדש. בעיני עיצוב הוא לקחת משהו שאנחנו רואים כל יום, ולגרום לו להיראות כמשהו חדש.

קבלו חומר מקצועי, חינמיים ועדכונים מאתנו בניוזלטר השבועי

הרשמו לעדכונים באימייל
צריכים חיזוק?

22 תגובות ל- המדריך המלא לעיצוב אינפוגרפיקה בעברית: איך מתחילים, טיפים ומקרה מבחן.

  1. מאת פז אריכא:

    אחלה של פוסט, הייתי מצמצם קצת את כמות התמונות בפוסט, הגלילה פשוט לא נגמרה לי.

    VA:F [1.9.22_1171]
    Rating: -1 (from 1 vote)
  2. מאת אבי כהן:

    וואו עדי פוסט מדהים מושקע ומעורר השראה!

    נהנתי :)

    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
  3. מאת אדוה:

    פוסט מצוין, תודה!

    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
  4. מאת Orit.Sha:

    יופי של כתבה עדי ! תודה (:

    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
  5. מאת אלה:

    פוסט נהדר! יעיל לסטודנטים! תודה :)

    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
  6. מאת יעל:

    עדי – הרבה תודה!
    על השיתוף, המקצועיות והכיף. יופי של דרך להתחיל את השבוע.

    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
  7. מאת שנית:

    איזה יופי של פוסט! מקצועי ביותר! תודה רבה :)

    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
  8. מאת זה להיט:

    פוסט עשיר ואיזה השקעה.
    נהניתי לקרוא.

    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
  9. עדי, תודה רבה.
    פוסט מעשיר ומרתק.
    התוצאה נותנת חשק לרוץ לאפות דברים נוספים.. : )

    VA:F [1.9.22_1171]
    Rating: +1 (from 1 vote)
  10. מאת אורן:

    אחלה פוסט
    מאיפה לוקחת את הטקסטורות האלה?

    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
  11. מאת זולטק:

    עדי באמת תודה,
    בהחלט פוסט מעניין ששווה לקרוא. תודה רבה.

    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
  12. מאת פנינה:

    מקסים ביותר! תודה רבה, נהניתי והחכמתי מכל דוגמא והסבר……… עלי והצליחי!

    VA:F [1.9.22_1171]
    Rating: +1 (from 1 vote)
  13. המון תודה!!! פוסט מקצועי ומעניין!

    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
  14. אחלה פוסט. מושקע וברור. לצערי עדיין לא פגשתי אינפוגרפיקה שסיימתי לקרוא :)

    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
  15. מאת saga:

    מקסים, מעניין, מעורר השראה!

    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
  16. מאת עינת:

    היי עדי,
    כתבה מעולה! מאד מפורט ועוזר!
    רציתי לדעת באיזו תוכנה הכנת את האינפוגרפיקה. לי יש תמיד דילמה כי אילוסטרייטור יותר טובה לאיורים מדוייקים אבל פוטושופ יותר נוחה לטקסטורות. ואם אפשר לדעת איך יצרת את הטקסטורות (או אם מצאת אותן אז איפה).

    תודה רבה
    עינת

    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
    • מאת עדי:

      הי עינת, תודה רבה,
      את הרוב הכנתי בפוטושופ (אבל רק כי זה יותר נוח לי…) ושילבתי אלמנטים נוספים שיצרתי ב-illustrator
      את מוזמנת לייצר אינפוגרפיקה בכל תוכנה שנוח לך אם זה illustrator או in desgin או משהו אחר.
      העיקר שזאת תהיה תוכנה שאת חשה בה בנוח. אבל את צודקת בעינן הטקסטורות יותר נוח לייצר אותן ולהשתמש בהן בפוטושופ.
      בעיקרון נעזרתי בטקסטורה אחת שמצאתי בחיפושים אונליין וכל פעם יצרתי עליה שינויים בהתאם למה שרציתי ושיניתי אותה. להגיד לך היכן מצאתי אותה למען האמת זה כבר היה די מזמן ואני לא זוכרת לתת אתר או לינק מדוייק, אך אני בטוחה שאם תשוטטי באינטרנט ותחפשי טקסטורות תגיעי די בקלות לדברים הללו. ( ושוב זאת טקסטורה די פשוטה רק שכל פעם יצרתי מעליה שינויים בפוטושופ בעצמי.)

      בהצלחה רבה, אשמח לענות על שאלות נוספות אם יהיו לך.

      VA:F [1.9.22_1171]
      Rating: 0 (from 0 votes)
  17. מאת טל לוי:

    כתבה מרתקת ועשויה היטב!
    את בהחלט עוזרת להבין את נושא האינפוגרפיקה ונראה לי שאאמץ את השיטות שלך ליצירת אינפוגרפיקה מוצלחת :-)

    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
  18. מאת תמי (Tammy) גבעון דגן (Givon-Dagan):

    הי עדי,
    איפה אפשר ללמוד אינפוגרפיקה? באיזו מסגרת?

    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
  19. מאת רונית:

    בראוו – הסבר מצוין!! בלי לדלג על אף שלב יוצאת תוצאה מרשימה! תמונה שווה אלף מילים!

    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)

טרקבקים לפוסט

  1. סיכום שנת 2012 בפיקסל פרפקט מגזין - נתונים, פוסטים פופולארים ומה בהמשך הדרך | פיקסל פרפקט מגזין
  2. 5 האקים חינמיים ליזמים | סיפתח

תנו בתגובה