עיצוב אתר לעסק טוב כשהוא עוזר לגולש להבין מהר מה העסק עושה, לסמוך עליו, ולפעול — להתקשר, להשאיר פרטים או לקנות. יופי הוא חלק מזה, אבל לא המטרה. עיצוב שעובד נשען על כמה עקרונות קבועים: היררכיה ברורה, קריאה אחת לפעולה בולטת, ניגודיות שמאפשרת לקרוא, עקביות בין העמודים, סימני אמון גלויים, ותכנון לטלפון קודם. אתר יכול להיות מרשים מאוד ועדיין לא להביא פניות — כשהעיצוב מושך תשומת לב לעצמו במקום למסר.
מה עיצוב אתר צריך לעשות בשביל העסק
- להסביר בתוך שניות. מי שנכנס לדף הבית או לעמוד שירות צריך להבין מיד מה מציעים לו ולמי.
- לבנות אמון. פרטי עסק, עבודות אמיתיות ותמונות אמיתיות — לא תמונות סטוק של אנשים מחייכים מול מחשב.
- להוביל לפעולה אחת. בכל עמוד, ברור מה הצעד הבא.
- לא להפריע. אנימציות, סליידרים וחלונות קופצים שמאטים את הגולש בדרך למטרה הם עיצוב שעובד נגד העסק.
העקרונות, אחד אחד
היררכיה: מה רואים קודם
העין סורקת עמוד בסדר שהעיצוב קובע: הכותרת הגדולה, אחריה שורת ההסבר, ואחריה הכפתור. גודל, משקל, צבע ומרווח הם הכלים. כשהכול גדול ובצבעים חזקים — שום דבר לא בולט, והגולש לא יודע איפה להתחיל.
קריאה אחת לפעולה
כפתור ראשי אחד בצבע בולט, שחוזר באותו סגנון בכל העמודים — "דברו איתי", "לקבלת הצעה", "להזמנה". כפתורים משניים נראים אחרת וחלשים יותר. כשיש בעמוד שלושה כפתורים באותה בולטות, הגולש מתלבט — ולעיתים לא בוחר באף אחד.
ניגודיות שאפשר לקרוא
טקסט אפור בהיר על רקע לבן נראה "אלגנטי" במחשב חזק בחדר ממוזג, ובלתי קריא בטלפון בשמש. תקן הנגישות WCAG דורש ברמה AA יחס ניגודיות של לפחות 4.5:1 לטקסט רגיל ו-3:1 לטקסט גדול — ובישראל זו גם חובה לפי התקן. פירוט במאמר חוק נגישות אתרים.
עקביות
אותם צבעים, אותם גופנים, אותם כפתורים ואותם ריווחים בכל העמודים. עקביות היא מה שגורם לאתר להרגיש מקצועי, וגם מה שמאפשר להוסיף עמוד חדש בלי לעצב אותו מאפס. על הצד הזה של העיצוב כתבתי במאמר מה זה UI.
מרווח לבן
מרווח סביב טקסט וכפתורים הוא לא "מקום ריק" — הוא מה שמאפשר לעין להפריד בין חלקים ולהבין את המבנה. עמוד צפוף מרגיש מבולגן גם כשכל רכיב בו מעוצב היטב.
טלפון קודם
חלק גדול מהגולשים מגיעים מהטלפון, וגוגל בוחנת קודם כול את גרסת המובייל של האתר — ולכן מעצבים קודם למסך צר — ואז מרחיבים. עיצוב שנולד במסך רחב ו"נדחס" לטלפון כמעט תמיד מאבד משהו בדרך. ראו אתר רספונסיבי.
סימני אמון: מה שגורם לגולש לפנות
| סימן אמון | למה הוא עובד |
|---|---|
| שם העסק, כתובת או אזור שירות, טלפון | מראה שיש עסק אמיתי מאחורי האתר |
| עבודות ופרויקטים אמיתיים | הוכחה במקום הבטחה |
| תמונות אמיתיות של העסק או של מי שעומד מאחוריו | אנשים פונים לאנשים |
| עמוד אודות כן | מסביר מי אתם ולמה לעבוד איתכם |
| אתר מהיר, נגיש ומאובטח | אתר שבור או איטי משדר עסק מוזנח |
חשוב לא פחות מה לא לעשות: המלצות מומצאות, מונים מנופחים ולוגואים של לקוחות שלא באמת עבדתם איתם פוגעים באמון כשהם מתגלים — וגולשים מזהים אותם מהר.
עיצוב מתבנית או עיצוב ייעודי
תבנית מוכנה נותנת מראה סביר מהר, אבל לרוב גנרי — ועוד אלף אתרים נראים בדיוק כמוה. עיצוב ייעודי נבנה סביב התוכן, המותג והלקוחות שלכם. ההבדל הגדול הוא לא רק במראה אלא גם במשקל: תבניות מדף ובוני עמודים טוענים הרבה קוד שאף אחד לא ביקש — פירוט במאמר וורדפרס בלי בוני עמודים.
איך אני מגיע לעיצוב
אני לא מתחיל מצבעים. העיצוב מגיע אחרי האפיון: מי הלקוחות, מה הם מחפשים, אילו עמודים צריך ומה הגולש צריך לעשות בכל אחד. כשהתוכן והמבנה ברורים, העיצוב נבנה סביבם — ולא להפך. באתר הזה, למשל, פלטת הצבעים מצומצמת (ירוק ליים וסגול על רקע כהה), כל הצבעים מוגדרים במקום אחד בקוד, לכל הרכיבים פינות ישרות, וכל הטקסט בגופן עברי אחד — כדי שהעין תתמקד בתוכן.
טעויות עיצוב נפוצות באתרי עסקים
- וידאו או סליידר ענק בראש העמוד שדוחק את ההסבר למטה ומאט את הטעינה.
- יותר מדי צבעים וגופנים — והאתר נראה כמו כמה אתרים שונים.
- טקסט על תמונה בלי שכבה שמבטיחה קריאות.
- תמונות סטוק גנריות במקום תמונות של העסק.
- עיצוב שנבדק רק במחשב.
שאלות נפוצות
כמה חשוב עיצוב לעומת תוכן?
שניהם צריכים לעבוד יחד. עיצוב יפה לא מציל תוכן שלא עונה על השאלה של הגולש, ותוכן מצוין נבלע בעיצוב מבולגן. ראו גם כתיבת תוכן לאתר.
כל כמה זמן צריך לעצב אתר מחדש?
אין מספר קבוע. כדאי לחשוב על עיצוב מחדש כשהאתר כבר לא משקף את העסק, כשהוא איטי או לא נוח בטלפון, או כשקשה להוסיף בו תוכן.
שני פרטים קטנים שמשפיעים על הרושם: הפביקון שמופיע בלשונית ובתוצאות החיפוש, וההבנה של חוויית משתמש — מה הגולש צריך לעשות בכל עמוד.
מאמרים קשורים: אתר לעורך דין: מה צריך ומה מותר לפי כללי הלשכה, אתר תיק עבודות: איך מציגים עבודות שמביאות לקוחות, פיגמה בפרויקט אתר: עיצוב, אב-טיפוס והעברה לפיתוח ומבנה דף בית לאתר עסקי: מה שמים ובאיזה סדר.
רוצים אתר שהעיצוב שלו עובד בשביל העסק? ראו בניית אתר תדמית ובניית אתרים לעסקים, או ספרו לי על העסק.
אהבתם את המאמר?
