Share on facebook
Share on linkedin
Share on whatsapp
Share on email

על טעם ועל צבע – בחירת פלטת צבעים בעיצוב האתר

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

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

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

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

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

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

צבעים, רגשות ומותגים. מה הצפייה בחלוקה הזאת מעוררת בך? מקור: visme.co.

 

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

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

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

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

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

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

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

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

זרעים של עיצוב

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

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

מתוך Design Seeds. צילום: @in_somnia_

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

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

Canva Color
Canva Color – העלה תמונה וקבל פלטה מוכנה.

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

מתמקדים

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

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

מתוך Design Seeds. צילום: @CORNFLOWERTINT
מתוך Design Seeds. צילום: @KYLAFERGUSON

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

תרגיל

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

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

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

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

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

OLÉ SOIREE
OLÉ SOIREE – olesoiree.de
Mah Ze Dahr
Mah Ze Dahr Bakery – mahzedahrbakery.com
Susa ventures
Susa Ventures – susaventures.com

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

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

צבעים הקסדצימלים

צורות הכתיבה האחרות הן פחות נפוצות:

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

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

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

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

סיכום

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

שיתוף

Share on facebook
Share on whatsapp
Share on linkedin

רוצה שנחזור אליך ונקבע פגישה?

נציג "האייל" יחזור אליך בשעות הקרובות וישמח לשוחח איתך.