אייקונים וסמלים – מאיפה באו ולאן הולכים?

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

ככה זה התחיל

ההיסטוריה של האייקונים הממוחשבים מתחילה בשנות ה-80. ב-1981 שוחררה מערכת ההפעלה הגרפית של Xerox  שנקראה Xerox Star. האייקונים שהופיעו באותה מערכת התבססו על אלמנטים משרדיים ושימשו השראה למערכת Apple Lisa שיצאה מאוחר יותר ב-1983.

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

במערכת הפעלה Macintosh 1.0 ששוחררה ב-1984, למשימת עיצוב האייקונים גויסה סוזן קר האגדית, שנחשבת למומחית עיצוב אייקונים של כל הזמנים. סוזן קר למדה אמנות ועבדה במוזיאון לאמנות מודרנית עד שקיבלה טלפון מחברה ללימודים, אנדי הרצפלד שהיה בצוות הפיתוח של אפל בשנות ה-80. סוזן הוזמנה לעצב עבור אפל את ממשק המשתמש והפונטים. על כרטיס הביקור שלה היה כתוב “Macintosh Artist”. במשך השנים, עיצבה אלמנטים גרפיים רבים עבור אפל ולאחר מכן גם עבור חברות אחרות.

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

*התמונות מתוך A brief history of computer icons

תהליך עיצוב אייקון

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

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

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

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

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

הנה אינפוגרפיקה שמציגה את תהליך עיצוב האייקון:

כאן אפשר לראות את האינפוגרפיקה המלאה.

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

בין עיצוב לאפיון

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

למי מעצבים?

האם זהו אתר מקומי או אפליקציה שאמורה להימכר בכל העולם?

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

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

טעויות נפוצות שכדאי להימנע מהן

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

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

• לאיזה גודל מעצבים- יש דעה רווחות שבגלל תכונות האימג'ים הוקטוריים, ניתן לעצב בכל גודל ואז פשוט להתאים לכל גודל אחר ללא איבוד באיכות. אז זהו, שזה לא נכון לגבי אייקונים. למה? כי המסך שלנו עדיין מראה פיקסלים, כלומר, התצוגה של האימג' היא בפיקסלים, גם אם הקובץ הוא וקטורי. לכן, אם יצרתי אייקון בגודל 24X24 פיקסלים והקטנתי אותו ל- 16X16, הפרופורציות היחסיות לא תואמות. הרי אין דבר כזה חצי פיקסל. המצב הזה גורם לאייקון וקטורי מוקטן להיות דווקא מטושטש ולא מדויק. הרבה בעיות נוצרות גם עם קו המיתאר שלא משתנה באופן מדויק ביחס לגודל החדש.כדאי לעצב את האייקון לרזולוזציה ולגודל שבהם רוצים להשתמש. אם מעצבים סדרת אייקונים במספר גדלים, אין ברירה, צריך לעשות אופטימיזציה לכל גודל בנפרד או אפילו לבנות את האייקון מחדש בגודל הרצוי. כאן תמצאו מאמר מפורט על שינויי גודל באייקונים.

קונטקסט ועיצוב

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

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

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

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

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

איפה מוצאים (בחינם)?

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

35 Free Icon Sets – כאן תמצאו כמה וכמה אוספים של אייקונים שונים. ביניהם גם פשוטים ומינימליסטיים וגם תלת-מימדיים ומושקעים במיוחד. בין הסטים: דגלים, כרטיסי אשראי, סטים למסחר אלקטרוני ועוד.

70 Free Icon Sets – גם כאן אייקונים שונים ומגוונים בכל מיני סגנונות ונושאים.

Ultimate Collection of Fresh Social Media Icon Sets – אוסף גדול של אייקונים של רשתות חברתיות.

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

הנה עוד כמה אתרים מומלצים בהם ניתן למצוא סטים טובים של אייקונים:

Vecteezy.com

dryicons.com

www.freeiconsweb.com

איפה מוצאים (בתשלום)?

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

והאמת היא, שזה גם לא בהכרח מאוד יקר:

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

אם אתם מחפשים פתרון יותר זול, האתר vectorstock מציע מגוון גדול של עיצובים ואיורים וקטוריים, ביניהם אייקונים, כאשר עבור רובם תצטרכו לשלם 1-3 קרדיטים. מחיר כל קרדיט הוא 1$. אחלה אתר ואחלה מחירים.

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

Bstudio

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

Worry Free Labs

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

Moredays

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

שתפו אותנו בדוגמאות מוצלחות נוספות וסטים טובים במיוחד של אייקונים!