להרוס עיצוב מוצלח בגלל תמונות

  • post

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

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

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

Photos in DesignPhoto and description

כמה אסונות נפוצים:

באתרים:

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

בממשקים:

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

בסקיצות ללקוח:

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

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

מה כן עושים?

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

טיפים על חשבון הבית!

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

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

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

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

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

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

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

Photos in Websites
Kyle Scollin – Dribbble

מילה לצלמי סטוק

על מנת שהתמונות שלכם יימכרו היטב, הקלו על המעצבים!

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

לסיכום

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

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

אשמח לראות תמונות שבחרתם לפרויקטים שלכם!

הילה יונתן.

Comments

comments

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.