צבע עיצוב אתרים: איך לגרום הרגש רצוי המשתמש
טיפים / / December 19, 2019
לאורך ההיסטוריה האנושית, את שאמנים מהשורה הראשונה שקיבלה הכרה אוניברסלית בשל היכולת לעבוד עם צבע. בעולם של היום אינו מקבל מומחי הכרה פחות, המסוגלים לשלב צבעים למטרות המסחריות ועסקים - בעיצוב פרסום באינטרנט.
יכולת צבעים לשימוש ניתן לשאוב עד אינסוף. זהו עומק אמיתי של הזדמנויות לחשיפה אנושית.
נספר לכם על יסודות תורת הצבע ואת הצבעים, ולאחר מכן לדבר על ההשפעה הרגשית של צבעים מסוימים.
תורת הצבע
נושא צבע, אתה יכול להקדיש ספר שלם, אז אנחנו לא ניקח את זה לגמרי, וגם להגביל את עצם למידע שימושי, אשר יכול לשמש בפיתוח של עיצוב ממשק.
זה יכול להיות מחולק תורת הצבע לשלושה חלקים:
בניגוד
בצל כל זה ההפך, אם אפשר לומר כך, של "האויב המושבע" שלה, המהווה את הניגוד הגדול עם הצבע הזה. כדי למצוא צבע, אתה יכול להשתמש בגלגל הצבעים. כל שעליך לעשות הוא לבחור את הצבע בצד הנגדי של המעגל.
בנוסף
צבעים אלה תמיד אינם מתנגשים זו בזו. צבעים משלימים אחד את השני להדגיש, שבניגוד הניגוד. בגלגל צבע, צבעים כאלה הם זה לזה, כגון צבעים משלימים של סגול - כחול וורוד.
תהודה
כל צבע הוא מצב רוח מסוימת. צבעים חמים בהיר (אדום, כתום, צהוב) מתמלא אנרגיה אנושית, לעורר אותו, צבעים כהים קרים (ירוקים, כחולים, סגולים), להיפך, להירגע ולהרגיע.
לדוגמה, חדשות ה- BBC השתמש בסרגל הניווט האדום, כדי לעורר את הקורא, כדי לחזק מתרגשת המדינה שלה. בהתחשב הספציפי של האתר - חדשות מרעישות - אדום הוא פתרון הגיוני.
תאוריה של צבע לעיצוב אתרים - היא יותר מקישוט פשוט. צבע יכול לשנות את התפיסה של האתר שלך, ולשחק תפקיד מכריע העסק שלך.
תפיסה רגשית של צבע
אף אחד לא מכחיש את האינטראקציה הקרובה של צבע ורגש. וגם, כמובן, כל מעצב אינטרנט רוצה להשתמש באפקט הזה כדי ליצור אווירה מסוימת עבור כל אתר.
על בסיס מחקרים אחדים - ניתוח, שפורסם באתר עיצוב Vandelayופוסט על הצבעים מגזין Smash - נסביר כיצד צבעים משפיעים הרגשות ועזרו ליצור עיצוב UX.
חשוב לזכור כי תרבויות שונות ברחבי העולם יש תפיסות שונות של צבע. נתאר את האסוציאציות הרגשיות ייחודיות לתרבות המערבית.
אדום
אמוציות ואסוציאציות: הכוח, חשיבות, נוער.
צבע המגרה ביותר, שיוטל כך אנרגטי, זה אפילו עלול להעלות את לחץ דם. האדום מייצג תשוקה ועצמה, זה יותר צבעים אחרים למשוך תשומת לב, ולכן לעתים קרובות משמש אזהרות והודעות חשובות.
לדוגמא, אדום הוא אתר מאוד מתאים No Way NSAשייעד ראשון - כדי למנוע איומים לכאורה.
השתמש הרבה אדום בחלק העליון של הדף - זו היא פתרון נהדר כי זה מסב את תשומת לב המידע חשוב בהודעה. במקביל, אנשים נוטים לעזוב את "אזור סכנה" במהירות של צבע אדום לגלול למטה. זה, בתורו, מאפשר למשתמש להציג תוכן יותר.
אבל צבע זה יכול לעבוד נגדך, כי זה יכול לגרום תוקפנות או גירוי יתר. אם אתה רוצה ליצור אווירה נינוחה יותר, לנסות להשתמש באדום בינוני ולבחור גוונים קלים של האדומים.
תפוז
אמוציות ואסוציאציות: ידידותי, אנרגיה וייחודו.
כמו השקט של גוונים חמים, כתום יכול לגרום ספקטרום שלם של רגשות מגוונים. כצבע הבסיסי, זה עשוי להיות עניין וחגורות התומכות, וכתוצאה משני - לשמר תכונות אלה, אך באופן בלתי-פולשניות.
בנוסף, אורנג 'עוזר ליצור תחושה של תנועה ואנרגיה. לדוגמא, זה נראה נהדר על אתר הקריקטורה פאנטהמצביע ות הנוער והתנועה. צבע קשור יצירתיות, תוך שמירה על תחושה של המותג המוכר.
צהוב
אמוציות ואסוציאציות: אושר, התלהבות, ארכאי (צבעים כהים).
זהו אחד המגוונים ביותר צבעים ואת רגש שהיא גורמת, תלוי הבצל במידה רבה יותר.
צבע צהוב בהיר מוסיף אנרגיה, אבל בלי חומרת הקשיחות, אשר שוהה אדום. גוונים בינוניים של צבע צהוב לעורר תחושה של נוחות, אם כי עדיין נמרץ. גוונים כהים (כולל זהב) לספק תחושה של קדם, למלא את החלל זמני, החוכמה וסקרנות.
לדוגמה, בעמוד הראשי של סוכנות עיצוב אתרים מדיה פלאש וחשוך אנרגיה התנהלה לו בכבדות טון צהובה, סקרנות וסמכות. צבע זה מושלם עבור חברות שמקבלות ההתייעצויות שלהם והם רוצים להדגיש המקצועיות שלהם.
ירוק
אמוציות ואסוציאציות: צמיחה, יציבות, נושאי האוצר סביב נושא איכות הסביבה.
גרין - גשר בין חם גוונים מגניבים, אבל נוטה יותר הקר. ירוק זה אומר כי יש צבע כחול אפקט מרגיע, אבל יש גם קצת מרץ מצהוב.
כתוצאה מכך, זה יוצר אווירה מאוד מאוזנת ויציבה. גוונים כהים יותר של ירוק ליצור את הרושם של עושר ושפע, הוא באינטרנט Ameritrade.
כחול
אמוציות ואסוציאציות: שקט נפשי, ביטחון, פתיחות (גוונים קלים), אמינות (גוונים כהים).
כמו במקרה של הצבע הצהוב, ההשפעה תלויה מאוד את הגוון הכחולה. כל גווני הכחולה הן מגוון מבחינת רגיעה וביטחון, אבל הצבעים הבהירים הקשורים ידידותי, וחושך - עם עצב.
רשתות חברתיות כמו טוויטר ופייסבוק משמשות יותר גוונים קלים ובינוניים של כחול, ואתר ארגוני מעדיפים גוונים כהים של חוזק ואמינות.
הצלה נפלאה למשל - סוכנות עיצוב אירועים ואן Vliet & מלכודת. שימוש בצבע כחול כרקע, הם רמזו חזותיים בבית הידע והכישורים שלהם בעיצוב פרחוני, אלא גם יצרו תחושה של אמינות ואמון.
זו היא בעלת חשיבות רבה, כפי שהם עובדים עם האירועים, שהנו חשוב חלק חזותי, למשל עם חתונות.
סגול
אמוציות ואסוציאציות: יוקרה, רומנטיקה (גווני אור), מיסטיקה ומסתורין (צבעים כהים).
צבע סגול נקשר בעבר עם הפאר המלכותי, רמזים על יוקרה. גוונים סגולים לשקף את הנדיבות ועושר כמכלול, מה שהופך אותם בחירה מצוינת עבור סחורות אופנה ומותרות (שוקולד אפילו, למשל, קדבורימי שבחר צבע המותג שלו).
גוונים בהירים כגון לבנדר (ורוד וסגול עם תוספת) מעוררי מחשבות על רומנטיקה, ואילו הגוונים הכהים מופיעים יותר אלגנטיים ומסתוריים.
שחור
אמוציות ואסוציאציות: כוח, תחכום, עצבנות.
החזק ביותר של צבעים ניטרליים - שחור - מופיע כמעט בכל אתר אינטרנט. זה יכול לגרום עמותות שונות בהתאם לצבע המלווה או לשלוט בהם, אם בשימוש מוגזם.
כוחו וניטרליות של שחור שהופך אותו לבחירה מצוינת עבור בלוקים גדולים של טקסט, אבל את הצבע העיקרי הוא יכול ליצור תחושה של עצבנות או אפילו קשור הרע.
עבור רוב האתרים, השחור משמש כדי ליצור תחושה של אלגנטיות. השילוב של העיצוב המינימליסטי בשחור לבן נותן את הרושם של אלגנטיות וסגנון, הן באתר Dream ו- Reach חברת BOSE.
לבן
אמוציות ואסוציאציות: טוהר, פשטות, טוב.
בתרבות המערבית, לבן קשור טוהרת, טוב ותמימות. צבע זה משמש לעתים קרובות על רקע של אתרי מינימליסטי ופשוט.
בנוסף, אף אחד הצבעים לא יאפשר לצייר כל כך הרבה תשומת לב לצבעים האחרים כמו לבן. לדוגמה, ב אתר זוכת Awwwards Kloina Toshev כל יצירותיו פרושה על רקע לבן, אשר רק מקצה איורים, ויוצרת את הרושם של גלריה אלגנטית.
אפור
אמוציות ואסוציאציות: ניטראלי, פורמלי, מלנכוליה.
למרות העובדה כי במצבים מסוימים האפור יכול ליצור אווירה קודרת ונוגה, זה עדיין נמצא בשימוש שכיח ידי מעצבים מקצועיים.
הדבר בגוונים: לסירוגין אותם, אתה יכול לקבל את כל הרגשות נגרמים הוא בשחור לבן. באופן כללי, אפור - הוא כלי רב עוצמה בידיים הנכונות.
אבל בשילוב עם צבעים עזים יותר בעיצוב רקע אפור נראה מודרני אבל לא קודר, כגון Awwwards.
בז '
אמוציות ואסוציאציות: הם מסבירים את אופיו של צבעים אחרים.
כשלעצמו, בז 'די משעמם הבעה, אך יש לו תכונה יוצאת דופן: בז' לוקח על אופיו של צבעים המקיפים אותו. לכן, אם היא נועדה לא להביע בז איפוק משמש כרקע או הצבע השני.
גוונים כהים יותר של הבז ליצור תחושה של מסורת חולין, לתת תחושה של המרקם של נייר גוונים קלים נראה ועדכניות יותר מודרני.
לדוגמה, באתר המסעדה Dishoom צבע בז 'בהיר סביב השמות וקצוות כהים לתת את הרושם כי המסעדה הזו - נקודת מבט רענן על מאכלים מסורתיים.
אייבורי
אמוציות ואסוציאציות: נוחות, אלגנטיות, פשטות.
אייבורי ושמנת לייצר כמעט את אותם רגשות כמו לבן. עם זאת חם שנהב (או פחות סטרילי) מאשר לבנים, אשר יוצר תחושה יותר של נוחות, תוך שמירה על מינימליזם.
ניתן להשתמש שנהב במקום לבן כדי לרכך את הניגוד בינה לבין בצבעים הכהים. לדוגמה, באתר אמנות שלי קפה אלמנטים חומים-כתומים מונחים על רקע שנהב (שנראה אפרפר) אשר שומר תחושה של חמימות.
ספקטרום הצבעים
לכל אתר יש מגוון של צבעים, שבו צבעי היסוד המשמשים למילוי שטח גדול יותר. כפי שציינו קודם לכן, השימוש בצבעים אלה משפיע על המוח ועל מצב רוח בעיקר בתת מודע. אז לבחור אותם בקפידה.
למרות העובדה כי ישנן דרכים רבות לשלב את הצבעים, אנו נתמקד בשימוש השלוש המוצלחים ביותר הנפוצה.
שלישייה (משולש הרמוניה משולש)
שלישייה - המערכת העיקרית והמאוזנת ביותר של שלושה צבעים. היא משתמשת בתהודה והוספה של צבעים, אבל יש ניגוד מורכב, בגלל מה השלישייה היא המגוון ביותר האמין.
על גלגל צבע של 12 צבעים, לבחור כל שלוש, הממוקם 120 מעלות זה מזה: צבע אחד עבור הרקע העיקרי ושני עבור תוכן בסרגל הניווט.
מערכת זוגי משלימה
מגוון זה יותר קשה ליישם, אבל זה עשוי להיות פתרון יעיל וחסכוני. היא השתמשה בארבעה צבעים: שני מנוגדים ושתי נוספים.
ראה איך הדף נראה להפליא פלורידה ולשגשג על תוכנית כזו. בניגוד צבע אדום וירוק בצמחים ובבעלי בלוקים של טקסט, ורקע כחול מדבר כתום ביעילות להשלים את התמונה.
אנלוגים (מערכת רציפים)
גמא צבעים דומים בעיקר משתמשים בצבעי משלימים. זה מאפשר בצורה הברורה ביותר להדגיש כמה איכויות ולגרום רגשות מסוימים.
לדוגמה, שילוב של אדום, כתום גוונים צהובים המרץ והחיוניות. שימוש בקנה המידה כזה הוא פשוט מאוד, אבל קשה לבחור איזה צבע ייכלל שילוב. השפעתם תהיה מוגזמת, אז זה לא יכול להיות רע.
לדוגמא, השימוש כחול, טורקיז וצבע ירוק בעיצוב של האתר Blinksale זה יצר אווירה של שקט ושלווה. שים לב איך הצבע הצהוב המשמש להדגיש נקודות חשובות.
זוהי רק את היסודות של תורת הצבע, אשר יכול לעזור כדי ליצור עיצוב מותאם אישית מרשימה, ואין גבול כמה רחוק אתה יכול ללכת מבחינת הצבעים באתר שלך.
כלים כמסייעים כדי לבחור צבע
למרבה המזל, ישנם מספר כלים המסייעים להביא תורת הצבע לפועל. נסה תבניות אלה לא צריכים להתחיל מאפס ביצירה שלו:
- Adobe Color CC, המוכר בשם Adobe Kuler. זהו אחד הכלים הכי האמינים בצבעי בחירה.
- Paletton. אם אתה צריך כלי פשוט עבור בחירת צבע מהירה, Paletton מושלם.
- פיקר שטוח UI צבע. הכלי המושלם כדי לבחור את הצבעים של ממשק המשתמש.
ואם המכשירים האלה לא מתאימים לך, הנה עוד 28 אתרים עם תבניות וכלים שונים לבחירת צבע.
קשר ישיר בין צבע ורגשות
זכור, משתמש לעתים רחוקות הודעה ולהעריך את צבע הרקע, סרגל ניווט, החלקים בודדים, אבל זה לא אומר כי הצבע אינו מושפע מהם. בדיוק זה קורה באופן לא מודע.
משתמש לחוות כל רגש, הוא הקשר לאתר או המותג, זה עושה פעולות מסוימות: לגלול למטה כדי ללחוץ על כפתורים כי הנחיה לפעולה, או, לחלופין, לא לא שם לב אליהם. ובכל צבע משחק בכל תפקיד עצום זה.
אם אתה צריך את עצתך על השימוש בצבע לעיצוב אתרים, נתח בקר על דבריו.