צבעים וגופנים לאתר עסקי: איך בוחרים נכון

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

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

למה צבעים וגופנים לאתר עסקי חשובים?

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

האם זה עניין של טעם?

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

מה קודם, לוגו או צבעים?

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

כמה צבעים צריך באתר עסקי?

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

מה התפקיד של הצבע המשני?

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

איזה צבע לבחור לכפתור?

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

איך בוחרים צבעים וגופנים לאתר שיתאימו לתחום?

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

האם יש צבעים שאסור להשתמש בהם?

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

כמה זה קשור למיתוג?

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

מה זה ניגודיות ולמה היא חשובה?

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

איך בודקים ניגודיות?

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

מה הבעיה בטקסט על תמונה?

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

האם מספיק להשתמש בצבע כדי לסמן משהו?

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

איפה זה קורה הכי הרבה?

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

האם זה קשור לנגישות?

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

איך בוחרים גופן לאתר בעברית?

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

איפה מוצאים גופנים עם עברית?

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

מה עם גופן בעיצוב מיוחד?

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

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

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

מה זה משקל גופן?

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

ומה עם גופן משתנה?

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

באיזה גודל לכתוב את הטקסט באתר?

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

מה אורך שורה נוח?

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

איך זה נראה בנייד?

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

האם גופנים משפיעים על מהירות האתר?

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

איך מצמצמים את ההשפעה?

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

מה זה font-display?

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

איך שומרים על אחידות בכל העמודים?

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

מה זה מדריך סגנון?

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

איך זה מתחבר לתמונות?

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

אילו טעויות נפוצות בצבעים ובגופנים?

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

למה טקסט אפור כל כך נפוץ?

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

ומה עם מצב כהה?

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

איך אנחנו בוחרים צבעים וגופנים כשאנחנו בונים אתר?

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

מה אם כבר יש לי מיתוג?

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

מה כדאי להכין?

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

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

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

שאלות נפוצות על צבעים וגופנים לאתר