פלטת צבעים באתר אינטרנט חדש – איך להעביר מסר באמצעות צבע

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

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

בתהליך בניה של אתר אינטרנט? בואו להכיר את הסטודיו שלנו.

מפשילים שרוולים

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

הפסיכולוגיה של פלטת הצבעים

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

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

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

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

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

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

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

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

שחור / לבן – לא מופיע בטבלה. איזה מסר ריגושי יש לדעתך לאתר שכולו שחור-לבן?

כלים לבחירת פלטת צבעים

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

דוגמא לאתר נהדר שעושה את העבודה בשבילנו הוא design seeds. זהו מגזין עיצוב אשר פעיל משנת 2009, והוא ידוע בזכות האיכות הגבוהה של התכנים שלו. מדור אחד במגזין נקרא Color Seeds, והוא מתמקד כולו בדבר אחד: צבעים והחיבור שלהם לעולם המוחשי. יש כאן המון תמונות מלאות השראה שאותי תמיד מעוררות ופותחות לי כיוונים יצירתיים חדשים.

ממש כמו Design Seeds, יש עוד אתרים שנועדו לעזור לנו לבחור פלטת צבעים. colors co – כלי חזק מאוד ליצירה של פלטות צבעים. פה לא תמצאו תמונות נוף והשראה, אלא גישה טכנית וישירה מאוד לצבע.

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

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

מתמקדים

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

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

אחרי שבחרנו שני צבעים עיקריים, דומיננטים, נרצה לעיתים להתאים להם צבע נוסף – בצבע הנוסף נשתמש במינון נמוך מאוד, אך הוא יעזור לנו למשוך את תשומת ליבו של הצופה. חוק ידוע המגיע מעולמות הסטיילינג הוא ה-60-30-10. החוק הזה חל בכל מה שקשור לאסתטיקה, הוא יוצר איזון ומשרה תחושת אמינות, ואנחנו משתשמים בו רבות גם בעיצוב אתרים, כך שב60% מהאתר נשתמש בצבע הבסיס העיקרי שבחרנו, ב30% בצבע הבסיס המשני ו10% נשתמש בצבע המשלים. לדוגמא, בנקודת הנעה לפעולה באתר: אנחנו רוצים להגיע לכמה שיותר המרות, אנחנו רוצים שהצופה ירכוש משהו, יזמין, ירשם או יפנה. בדיוק בנקודה הזאת הצבע יכול לעשות עבורינו שירות אדיר: הצבע המשלים, ה-10% ששמרנו במיוחד לנקודה הזאת ולא "ביזבזנו" אותו קודם, משמש אותנו עכשיו כדי ללכוד את כל תשומת ליבו של המשתמש שלנו. בהרבה אתרים הצבע הזה יהיה עז יותר, וניגודי לעומת צבע הבסיס, כדי לאותת למשתמש: "כאן אתה נוקט פעולה!"

תרגיל – פלטת צבעים ככלי להעברת מסר

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

א. מהו הנושא של האתר? איזה מסר יש לו?

ב. מהי ההנעה לפעולה באתר?

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

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

שמות של צבעים בעיצוב Web

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

ישנן צורות כתיבה נוספות. חלקן נפוצות יותר וחלקן פחות. הנה כמה מהן:

RGB – "מזיגה" של כמות מכל אחד מהצבעים אדום, ירוק וכחול מאפשרת לנו להציג לכל הצבעים. ככה זה נראה: rgb(240,12,36). המספר הראשון במערך הוא עבור הצבע האדום, השני עבור הירוק והשלישי עבור הכחול.

RGBA – כמו RGB, אך מוסיף גם אפשרות לשקיפות (שימושי ביותר!). השקיפות מתבטאת בשבר עשרוני שבין 0 (שקוף) ל 1 (אטום – ולמעשה מייתר את השימוש ב RGBA) דוגמה: rgba(34,122,56,0.5).

HSB (נקרא גם HSL) – באמצעות מזיגה של גוון, רוויה ובהירות (Hue, Saturation, Brightness) ניתן לייצג כל צבע. לדוגמה: hsl(40%, 100%, 50%).

צבעים עם שמות – יש צבעים רבים שיש להם שמות של ממש: aquamarine, cadetblue, darkorange, deeppink, lime, royalblue. כאן תוכלו לצפות ברשימה המלאה.

צבעים ונגישות

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

יש שני סוגים של משתמשים שזקוקים שנחשוב עליהם כאשר אנחנו בוחרים צבעים לאתר:

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

tanaguru contrast finder ו-contrastchecker יעזור לכם לוודא שהניגודיות שאתם בוחרים מספיקה.

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

סיכום

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

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

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