10 הדיברות לעיצוב אייקון לאפליקציה

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

icons

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

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

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

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

אז למה כדאי לשים לב ומדוע?

רוצים לזכות בקורס עיצוב למתכנתים ויזמים? (פרטים בסוף הפוסט)

1. מחקר

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

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

pic1

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

Screen Shot 2014-10-05 at 2.07.12 PM

שלוש אפליקציות מזג אויר שונות – אולי הגיע הזמן לחשוב על משהו חדש?

והנה אחת שעושה את זה אחרת:

Screen Shot 2014-10-05 at 2.07.19 PM

2. גבשו רעיון

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

Screen Shot 2014-10-05 at 2.07.29 PM

איזה אייקון אומר יותר טוב טלויזיה?

 

3. ייחודיות

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

Screen Shot 2014-10-05 at 2.07.37 PM

איזו אייקון מעורר יותר תיאבון, ואיזו פיצה עושה שליחויות?

4. פשטות

אם הצלחתם ליצור לוגו שניתן לתאר אותו מילולית במשפט – הצלחתם.

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

Screen Shot 2014-10-05 at 2.11.51 PM

קופסא פתוחה על רקע כחול, האות M בצורת מעטפה

 

 

5. צבעוניות

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

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

Screen Shot 2014-10-05 at 2.08.12 PM

“זה כמו ואטסאפ אבל סגול”, צבעוניות מרובה עם סיבה

 

6. קומפוזיציה

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

קומפוזיציה מרכזית

קומפוזיציה מרכזית

כלומר תשב במרכז הפורמט ולא תציץ מהצד או מלמטה.

קומפוזיציה לא מרכזית

קומפוזיציה לא מרכזית

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

7. הפשטה

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

Screen Shot 2014-10-05 at 2.08.30 PM

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

מי משניהם אומר לי פרח בלי להיכנס לסוג הפרח?

מי משניהם אומר לי פרח בלי להיכנס לסוג הפרח?

8. קריאות

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

מי האמין ששני מותגים כל כך שונים ידגימו משהו משותף?

מי האמין ששני מותגים כל כך שונים ידגימו משהו משותף?

9. שימרו על עדכניות

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

Screen Shot 2014-10-05 at 2.08.48 PM

10. פידבק

פידבק הוא שלב הכרחי בתהליך העיצוב ועדיף לקבל אותו לפני שהוא יוצא לאור ולא אחר כך מהמשתמשים (מה שמדהים עוד יותר באייפון 6 “המתקפל” – מה לא נתנו אותו לשום קבוצת מיקוד לפני שהוא יצא?!)

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

לסיכום חשוב לזכור

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

רוצים לזכות בקורס עיצוב למתכנתים ויזמים?

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

בין התשובות שיוזנו לטופס הקצר שבהמשך יבחר צוות סטודיו 6B את התשובה הזוכה שתזכה את האדם שכתב אותה בקורס מתנה בשווי 6,000 ש״ח. התחרות נפתחת היום ותסתיים ביום ראשון, ה-12 באוקטובר בשעה 12:00 בצהריים.

לצפייה בתקנון התחרות

הכתבה בחסות סטודיו 6B

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

כתב אורח

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

הגב

2 תגובות על "10 הדיברות לעיצוב אייקון לאפליקציה"

avatar
Photo and Image Files
 
 
 
Audio and Video Files
 
 
 
Other File Types
 
 
 

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

סידור לפי:   חדש | ישן | הכי מדורגים
עיני
Guest

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

http://thenextweb.com/dd/2013/08/21/six-tips-from-apple-on-how-to-create-better-app-icons/

אלמוג
Guest

טופס השליחה להצעות לא עובד..

wpDiscuz

תגיות לכתבה: