בקצרה: לרוב עסקי השירות, אתר בהיר עם כמה מקטעים כהים הוא הבחירה הבטוחה והטובה ביותר: הטקסט הארוך נשאר קריא על הרקע הבהיר, והמקטעים הכהים יוצרים מקצב ומדגישים רגעים חשובים. אתר כהה לגמרי מתאים בעיקר לעסקים ויזואליים עם מעט טקסט, כמו צילום, אופנה, מוזיקה או אוכל, ובתנאי שהניגודיות נבדקת בכל טקסט.
למה זו אחת ההחלטות הראשונות בעיצוב
עיצוב אתר כהה או בהיר משפיע על כל השאר: על הצבעים, על התמונות, על הגופנים ואפילו על כמה טקסט אפשר לשים בעמוד. צבע מותג שנראה מצוין על לבן יכול להיעלם על שחור, ולהפך. צילום שנראה מושלם על רקע בהיר יכול להיראות כמו חור בעמוד כהה. לכן ההחלטה הזאת מתקבלת מוקדם, לפני שמעצבים מקטעים, ולא בסוף כ"שינוי צבע רקע".
אין תשובה אחת נכונה לכל עסק. אבל יש כמה שאלות ברורות שעוזרות להחליט, ויש כמה טעויות שכדאי להכיר מראש. על עקרונות העיצוב הכלליים כתבתי במאמר על עיצוב אתרים מקצועי, וכאן נתמקד רק בשאלת הרקע.
מה רקע כהה עושה
- משדר דרמה, יוקרה, טכנולוגיה או לילה.
- גורם לתמונות ולצבעים חזקים לבלוט מאוד, כמעט כמו על מסך קולנוע.
- מתאים לתוכן ויזואלי: צילום, אוכל, אופנה, מוזיקה, רכב, אירועים.
- מרגיש שונה, כי רוב אתרי העסקים בהירים.
החיסרון: רקע כהה פחות סלחני. כל טעות בניגודיות, כל טקסט אפור מדי וכל תמונה שלא מתאימה בולטים יותר. וכשהאתר כולו כהה, הוא יכול להרגיש כבד וקודר, במיוחד בעסק שאמור לשדר חום וביטחון.
מה רקע בהיר עושה
- משדר ניקיון, פתיחות, סדר ונגישות.
- נוח לקריאה של טקסט ארוך, כמו עמודי שירות, מאמרים ושאלות נפוצות.
- מתאים לרוב עסקי השירות: עורכי דין, רפואה, חינוך, ייעוץ, שיפוצים, טיפול.
- מוכר לגולשים, ולכן מרגיש בטוח.
החיסרון: אתר בהיר לגמרי, בלי שום מקטע שונה, יכול להרגיש שטוח ודומה לכל אתר אחר. כאן נכנס השילוב, שנדבר עליו בהמשך.
קריאות ונגישות
טקסט כהה על רקע בהיר הוא בדרך כלל הקל ביותר לקריאה של פסקאות ארוכות. טקסט בהיר על רקע כהה עובד מצוין לכותרות ולמשפטים קצרים, אבל בפסקאות ארוכות הוא יכול לעייף, במיוחד אנשים עם אסטיגמטיזם, שאצלם טקסט לבן על שחור נראה לפעמים מטושטש או "זוהר".
בשני המקרים יש דרישה ברורה: יחס ניגודיות מספיק בין הטקסט לרקע. ההנחיות הבינלאומיות WCAG, שעליהן מבוסס התקן הישראלי ת"י 5568, מגדירות יחסי ניגודיות מינימליים לטקסט רגיל ולטקסט גדול. אתר שבנוי לרמה AA, כמו כל אתר שאני בונה, נבדק בכל טקסט ובכל כפתור, בשני סוגי הרקע. על הדרישות עצמן יש מאמר על נגישות אתרים בישראל.
אם בוחרים ברקע כהה
- לא שחור מוחלט, אלא אפור כהה מאוד או כחול-שחור. זה רך יותר לעין.
- טקסט לא לבן לגמרי, אלא לבן מעט רך, שמפחית את אפקט הזוהר.
- גופן קצת יותר גדול ועם יותר ריווח בין השורות.
- ניגודיות מספקת גם לטקסט המשני, שנוטה להיות אפור מדי על רקע כהה.
- משקל גופן לא דק מדי. גופנים דקים נבלעים על רקע כהה מהר יותר.
איך זה משתלב עם צבעי המותג והתמונות
צבעי מותג מתנהגים אחרת על כל רקע. צהוב בוהק נראה מדהים על שחור, וכמעט לא קריא על לבן. כחול כהה נבלע על רקע כהה. ירוק עמוק יכול להיות רקע בפני עצמו. לפני שמחליטים, שימו את הלוגו, הכפתור והכותרת על שני הרקעים, ובדקו מה עובד ומה נעלם. ההסבר המלא על בחירת צבעים במאמר על צבעים לאתר.
גם התמונות משתנות. צילום בהיר ואוורירי על רקע שחור יכול להיראות כמו חלון שנפתח בקיר, וצילום כהה על רקע לבן יכול להיראות כמו חור בעמוד. כשהתמונות והרקע באותה משפחת גוונים, העמוד מרגיש שלם. זו עוד סיבה לצלם את העסק בסגנון שמתאים לעיצוב, כמו שמוסבר במאמר על תמונות לאתר.
והלוגו: לוגו כהה צריך גרסה בהירה, ולוגו צבעוני צריך לפעמים גרסה בצבע אחד. כדאי להכין את שתיהן מראש, ולא לגלות את הבעיה כשהפוטר הכהה כבר מעוצב.
למה רוב האתרים הטובים משלבים
הרבה אתרים מצליחים לא בוחרים צד. רוב המקטעים בהירים, ומדי פעם מגיע מקטע כהה: ההמלצות, קריאה לפעולה, תהליך העבודה או הפוטר. זה יוצר מקצב, מדגיש את החשוב, ומונע מהאתר להרגיש שטוח. וזה גם פותר את בעיית הקריאות: הטקסט הארוך נמצא על הרקע הבהיר, והרגעים הדרמטיים על הכהה.
כך בניתי גם את האתר שלי: רוב המקטעים בהירים, וכמה מקטעים בשחור ובירוק עמוק נותנים מקצב, בלי שהאתר ירגיש קודר. אפשר לראות את זה בדף הבית ובעמוד תהליך העבודה.
כדי שהשילוב יעבוד, כדאי לשמור על כמה כללים:
- לא יותר ממקטע כהה אחד ברצף, ולא לקפוץ בין כהה לבהיר בכל מקטע.
- להשתמש באותם צבעים בשני המצבים, כדי שירגיש כמו אתר אחד.
- לתת למקטעים הכהים תפקיד: הם המקומות שבהם רוצים שהגולש יעצור.
- לבדוק שהלוגו, הכפתורים והאייקונים נראים טוב על שני הרקעים.
דוגמה: אתר של משרד לראיית חשבון
נניח שאתם בונים אתר למשרד לראיית חשבון. אתר כהה לגמרי ירגיש זר לקהל שמחפש סדר ושקט. אתר לבן לגמרי ירגיש כמו טופס של רשות המסים. השילוב: דף הבית בהיר, עם רקע לבן-שמנת וטקסט כהה. מקטע "איך אנחנו עובדים" בכחול כהה, עם שלושה שלבים קצרים בטקסט בהיר. ההמלצות שוב על רקע בהיר. ובסוף, קריאה לפעולה על הכחול הכהה, עם כפתור בצבע המותג. הגולש קורא בנוחות, והעין נעצרת בדיוק בשני המקומות שבהם המשרד רוצה שתיעצר.
מצב כהה אוטומטי
טלפונים ומחשבים מאפשרים לבחור מצב כהה, ואתרים יכולים להגיב לזה ולהחליף צבעים לבד. זה נחמד, אבל דורש לעצב ולבדוק כל עמוד פעמיים, כולל כל תמונה, אייקון ולוגו. לרוב אתרי העסקים זה לא הכרחי.
מה שכן חשוב: לוודא שהאתר לא נשבר אצל מי שהפעיל מצב כהה בדפדפן. יש דפדפנים, במיוחד בטלפון, שמנסים "להכהות" אתרים בעצמם, והתוצאה יכולה להיות טקסט כהה שנעלם על רקע שהפך לכהה, או לוגו שקוף שפתאום לא רואים. אתר שמגדיר במפורש את צבע הרקע ואת צבע הטקסט בכל מקטע נשאר יציב. כדאי לבדוק את האתר פעם אחת בטלפון עם מצב כהה מופעל, כחלק מהבדיקות לפני השקה.
איך מחליטים: שאלות לבחירה
- מה הלקוחות שלכם צריכים לקרוא? הרבה טקסט מעדיף רקע בהיר.
- מה התחושה שהעסק צריך לשדר? דרמה ויוקרה, או שקט ואמון?
- כמה מהתוכן ויזואלי? אם האתר הוא בעיקר תמונות, רקע כהה יכול להבליט אותן.
- מה עושים המתחרים? אם כולם בהירים, מקטעים כהים יכולים לעזור לכם להיזכר.
- איך נראים הלוגו וצבעי המותג על כל רקע?
- מי הקהל? קהל מבוגר יותר נהנה בדרך כלל מרקע בהיר וטקסט גדול.
טעויות נפוצות
- טקסט אפור על רקע כהה, שנראה אלגנטי בעיצוב ולא קריא בטלפון בשמש.
- כפתור בצבע המותג שנבלע ברקע הכהה.
- תמונות עם רקע לבן מובנה, שנראות כמו מלבנים מודבקים על עמוד כהה.
- מעבר בין כהה לבהיר בכל מקטע, שמרגיש כמו הבהוב.
- פוטר כהה עם לוגו כהה שאי אפשר לראות.
לסיכום
אתר כהה או בהיר היא החלטה שנגזרת מהעסק, מהתוכן ומהקהל, לא רק מטעם אישי. לרוב העסקים, בסיס בהיר עם כמה מקטעים כהים במקומות הנכונים נותן גם קריאות וגם אופי. כשאני מתכנן אתר תדמית, ההחלטה הזאת מתקבלת בשלב הראשון של העיצוב ונבדקת בכל טקסט, במחשב ובטלפון. אפשר לראות איך היא יוצאת באתרים שונים בתיק העבודות.
רוצים אתר שעובד בשביל העסק?
ספרו לי מה אתם צריכים, ותקבלו כיוון ברור והצעת מחיר מסודרת.