Когато някой отвори сайта ви за първи път – цветовете играят много важна роля в начина, по който той мисли. Между 62-90% от първото впечатление на потребителя е базирано само на цветовете, според едно проучване.
В тази публикация ще представим 25+ фантастични цветни схеми за лендинг страници, онлайн магазини и лични сайтове, за да изберете свои, без да губите време.
Как да изберете цветове за сайта си
Очите на възрастен човек могат да различат над 1 000 000 нюанса на цветовете. Как да изберете правилната схема бързо и ефикасно с толкова много опции? Това е предизвикателство, пред което се изправят всички уеб дизайнери, опитвайки се да създадат цветна схема или палитра за техния дизайн.
С такъв избор можете да използвате всички нюанси и тонове индивидуално и да изберете най-подходящите. Трябва да намалите броя на възможностите. Най-добрият начин да го направите е, като се спрете на основен цвят.
И може би най-лесно това ще се случи, когато разгледате най-популярните избори в индустрията ви. Може да ви помогне в избора и, ако научите нещо за психологията на цветовете и как основният цвят може да сработи с вашата компания или продукт.
Избор на цвят според индустрията
Различните компании и продукти избират различни цветове, за да идентифицират своя бранд. Но защо? Цветът не е само по-ефикасен начин за привличане вниманието на потребителя. Той е начин за комуникация с него, на емоционално и дори подсъзнателно ниво.
В известен смисъл е начин да започнете изграждане на бранда ви в съзнанието на потребителя без да използвате нито една дума. Цветовете не разказват една и съща история и най-популярните основни цветове за бранда зависят от индустрията.
Бранд цветове според индустрията (Източник: towergateinsurance.co.uk)
Каква емоция искате вашите клиенти да асоциират с вашия бранд, продукт или услуга?
Това е основния въпрос, който трябва да си задавате, за да определите основния цвят на вашата схема.
Синьото промотира:
Доверието.
В индустрии, в които доверието е най-важният фактор, и професионализмът и надеждността са ключови фактори за продажба – синьото често е използвано като основен цвят.
То не се свързва със спонтанност или емоция. Вместо това инициира спокоен и логически процес при взимането на решение.
Най-популярен е в следните индустрии:
- Банкиране
- Самолетни компании
- Комуникации
- Финанси
- Електрически комунални услуги
- Тежко оборудване
- Подобрение на дома
- Хотели
- Фармация
Червеното промотира:
Внимание и страст
Индустрии, които разчитат на емоциите и импулсивните решения (като ресторанти и заведения за бързо хранене) често използват червено като основен цвят. Счита се, че то стимулира глада, и е любим избор сред международни брандове.
Най-популярен е в следните индустрии:
- Ресторанти
- Напитки
- Търговия на дребно с храни
- Недвижими имоти
- Облекло
Зеленото промотира:
Усещане за жизненост.
Повечето хора асоциират зеления цвят с природата, растенията и жизнени среди. Индустриите, които разчитат на обещание за по-добро благосъстояние или продукти с натурални съставки използват зелено.
Най-популярен избор е в следните индустрии:
- храни и напитки
- универсални магазини
- недвижими имоти
- химикали
Черно: увереност, изтънченост
Докато някои компании се спират на черното, защото го чувстват като “сигурен” цвят, то всъщност е основен избор в индустрии, в които увереността на клиента и неговата изтънченост са ключов фактор.
Най-популярен е в следните индустрии:
- облекло
- аксесоари
- доставчици на интернет и мобилни услуги
- универсални магазини
- хотели
Не следвайте сляпо вкуса и инстинктите си, помислете за теорията на цветовете и психологията на цветовете, преди да вземете решение.
Колко цвята трябва да използвате в схемата на един сайт?
За един стандартен сайт можете да комбинирате от три до седем отделни цвята за схема.
Но колко различни схеми трябва да използвате за един сайт?
Това зависи от индивидуалните особености и целите на сайта ви. Ако той е фирмен сайт или блог, посветен само на един бранд/продукт или компания, тогава трябва да ползвате само една схема.
От друга страна, ако сайтът ви е онлайн магазин – с различни брандове, например, можете да използвате различни схеми за различните продукти, за да предизвикате различни емоционални реакции.
Проблемът при ползването на много палитри е в това, че ще усложните нещата за всеки създател на съдържание, ще увеличите шанса за грешки и усложнения.
Когато избирате цветова схема за вашия сайт – важно е да избягвате прекаленото обмисляне и прекарването на седмици над задачата. Със сигурност изборът е важен, но само изборът на цветовете няма да донесе повече трафик към сайта ви, или да е единственото нещо, което ще повлияе на конвертирането.
26 примера за страхотни цветови схеми
Претърсихме мрежата, за да намерим чудесни примери на цветови схеми и дори ги разделихме по категории, за да ви е по-лесно да намерите вдъхновение от подобни на вашия бизнес сайтове.
Супер схеми за онлайн магазини
По-долу ще намерите отлични примери за цветови схеми, които отговарят на бранда и индустрията.
1. Продукти за грижа за кожата: Ярко и игриво
Тук цветовете са ярки и игриви, перфектно акомпанират съобщението на компанията за вътрешно щастие.
2. Бранд за облекло: Ясно и кратко
Тази компания се фокусира над малко, но интензивни цветове, с блед бежов фон, за да отделят продуктите един от друг.
3. Сайт за облекло: простота
Този сайт използва прости цветове и бяло пространство, с което да подчертае самите дрехи.
Този подход (минималистичен) е чудесна алтернатива за онлайн магазини, които искат техните продукти да говорят сами за себе си, вместо да разчитат на дизайна да го направи.
4. Прибори за хранене: надеждност и професионализъм
Това е немски онлайн магазин за прибори за хранене и съдове по поръчка. Сайтът използва проста схема от съмно синьо, светло кафяво и сиво, за да промотира усещането за професионализъм и надеждност, с нотки на изтънченост.
5. Дъвка: естествено и импулсивно
Това е бранд за кофеинови дъвки и ментови бонбони, и целта на дизайна е да помогне на потребителя да се фокусира. Използва микс от по-меки цветове като тюркоазено, светло синьо и беж, за да загатне използването на естествени съставки.
Има и апел към емоциите и импулсивното вземане на решения с червено и оранжево, отличен избор на цвят-акцент.
6. Часовници: изтънченост и лукс
Шведска марка часовници с класен онлайн магазин, с дизайн, ориентирам към подчертаване на продуктите. Цветовите комбинации от златисто кафяво и тъмно сив фон с дървени акценти носят чувство за изтънченост и лукс.
Тези цветове са перфектни за промотирането на уникални продукти, но не биха били на място при сайт за продажба на ежедневни стоки.
7. Pants: Креативни и достъпни
Сайтът е креативен и игрив, с ярки цветове и комбинации, които приветстват потребителя и потенциалния клиент.
8. Плодови снаксове: Елегантни и подчертаващи цветове
Това са производители на замразени и изсушени плодови снаксове, които се целят към модно-ориентираните потребители, отколкото към масовата продажба на изсушени плодове.
Черният фон и жълтите акценти подчертават простотата в дизайна, наблягайки на елегантния продукт.
9. Поръчкови дънки: Живо е!
Те използват ярко червено и оранжево, за да донесат живот на сайта. Перфектен за комуникация с потребителя, който води активен и цветен стил на живот.
Схеми за лични сайтове
Ето селекция с примери от сайтове с лична цел, или за пътешествия.
10. Креативна простота
Фотограф от Ню Йорк, със страхотно усещане за уеб дизайн (и впечатляващо портфолио).
С изваждането на цветовете от уравнението, тя подчертава живите цветове на нейните снимки от избрани проекти. Тя използва липсата на цвят толкова, колкото и самия цвят във фотографиите.
11. Сива гама с плясък
Ali Rifai е креативен арт директор и го показва в концепцията на сайта си. С използването на сивата гама и само един цвят за акцент той привлича вниманието към правилните ключови думи и критични части от дизайна.
12. В едно с природата
iFly 50 е онлайн списание, реализирано от KLM, за да отпразнува 50-тата си годишнина.
С подчертаване на синьото в небето и водата, и зеленото в тревата и гората – дизайнът кара потребителя да се почувства в едно с природата – прекрасен подход към всеки сайт, ориентиран към природата.
13. Чисто и професионално
Сайтът на Benediktas Gylys е сред шедьоврите в изчистения дизайн. Няма хаос и това важи и в избора на цветове.
Основното лилаво подчертава професионализма, и въпреки, че има малко цветове – те подчертават критичните елементи и илюстрациите.
14. Прагматични цветове
BucketListly използва цветовете прагматично, като с жълто подчертава ключови думи, CTA и посетени до момента държави.
Можете да видите колко много стойност можете да получите само с един цвят, когато в дизайна е комбиниран с бели пространства и правилна концепция.
15. Елегантна простота
Заглавната снимка в сайта на Lars Franzen използва тъмен фон, за да изкара на преден план индивидуалността на хората от портрета.
16. Футуристично наслагване
Личният сайт на Dot Lung максимизира простата цветна палитра с наслагвания и чисти графики за фон. Лилавото от фона създава кохерентно изживяване от страница на страница.
17. Светло и тъмно
Love for Iceland е чудесен пример как цветовете в избраната снимка могат да създадат настроение. С яркото синьо на чистия лед, осветено от слънчевата светлина в горния ляв ъгъл до тъмнината от долния край се създава приключенско настроение на посетителя.
Цветни схеми за лендинг страници
По-долу сме избрали различни лендинг страници, заради уникални или ефективни цветови схеми.
18. Остри контрасти
Zenly използва силно контрастиращи цветове, за да почертае функционалността на приложението си.
19. Цвят за подчертаване
Slack използват изпробвана и доказана цветова схема, като цветовете са използвани за подчертаване на важни действия и други съществени елементи. При целевата страница не трябва да усложнявате дизайна, и това се прилага и в цветовете.
20. Живи цветове, които носят емоции
Spotify използват живи цветове, за да предизвикат емоции в потребителя на иначе опростената си целева страница. Цветовете разказват цяла история, и се набляга повече на тях, отколкото на текста над CTA бутона.
21. Цветовите контрасти създават ред сред хаоса
Autonomy използват цветове и контрасти, за да създадат ред в иначе хаотичния им, анимиран дизайн. Жълтото се откроява от фона и другите елементи.
22. Ансамбъл от футуристични цветове
Bugsnag използват колекция от футуристични цветове, които носят усещане са модерни технологии в иначе плоския дизайн. Комбинацията от цветове и форми кара потребителя да се усеща в 2020г и по този начин да усети компанията като авангардна.
23. Живи с цвят
Лендинг страницата на Connect Homes е с комбинация от живи и ярки цветове. Палитрата е страхотен баланс, който носи модерно усещане.
24. Консервативни цветове и модерен дизайн
Лендинг страницата на Plink е базирана на сравнително консервативни нюанси на тъмно синьо, но балансира с игрива и забавна анимация и дизайн като цяло.
25. Естествена жизненост
Travelshift разчитат силно на зеления цвят да придаде усещане за природа и жизненост. Вместо да подчертава ключово съдържание с ярък цвят като оранжево, например, зеленото функционира като обещание за подмладяване.
26. Ярки цветове за надежда
Swab the World използват цветна схема от ярки и контрастиращи цветове, за да придадат усещане за надежда. Това е перфектна комбинация за страница на неправителствена организация.
Генератори на цветови схеми
Ако не искате ръчно да избирате подходящи цветове, градиенти и схеми или палитри, можете да използвате онлайн инструменти. Има много генератори. Ето някои от най-добрите опции:
Colormind
Colormind е генератор, задвижван от искуствен интелект, с който можете да генерирате цветове за сайтове, темплейти и още какво ли не. Единственото неудобство е, че не можете да зададете основен цвят, а трябва всеки път произволно да генерирате палитри. Също така може да извади цветовете от всяко изображение, което поискате.
Coolors.co
Coolors.co е уеб и мобилно приложение, което ви помага да генерирате палитри от нулата. Има алтернативни нюанси за всеки цвят и други настройки, които да ви помогнат при взимането на решение.
Paletton
Вместо да генерира произволни схеми, Paletton ви дава пълен контрол над палитрата и кои цветове да изберете за основни. Можете да изберете и типа на палитрата – дали да са два, три цвята или повече.
ColorSpace
ColorSpace генерира палитри в зависимост от основния цвят, който въведете. Има голям набор от опции за стила.
Цветна слепота: Как да изберете палитра, която да е ориентирана към хора с цветна слепота
Важно е да помислите как различните хора виждат цветовете, когато избирате своята цветова схема.
Различни типове цветна слепота
Не всички виждаме цветовете :стандартно”. Има три различни вида цветна слепота: deuteranopia, protanopia, и tritanopia.
Червено-зелената цветна слепота (deuteranopia и protanopia) е най-често срещаната форма. Тя засяга средно 1 на 12 души в северна Европа. С такава честота е добре да се замислите, когато избирате своите цветове.
Синьо-жълтата слепота е по-рядка и засяга еднакво мъже и жени.
Как да изберете палитра, дори за хора с цветна слепота
Тъй, като по-често срещана е червено-зелената слепота, добре е първо да се съобразите с нея. Тъй, като тези хора не могат да различават червено, зелено и лилаво, но виждат различни нюанси на жълто и синьо, добре ще е да избягвате контрастни цветове, които изглеждат твърде еднакво:
- Не контрастирайте зелено с жълто и обратно.
- Не контрастирайте жълто с червено или оранжево.
- Не контрастирайте лилаво с подобни нюанси на синьо.
Когато избирате основни цветове за логото си или дизайна си – добре е да се замислите какво послание ще предадат тези цветове на хора с цветна слепота.
Обобщение
Човешкото око може да различи милиони различни нюанси на цветовете, но не трябва избирате сред всички опции, за да изберете цветова схема за сайта си.
Фокусирайки се над бранда си и вашите клиенти – можете да намалите избора на основни цветове. Веднъж, след като го направите – можете да разчитате на онлайн генератори, за да завършите палитрата, или да изберете подходящи цветове, в зависимост от предпочитанията си или дадените примери.
С правилния подход създаването на схема за сайта ви, която да се използва като отправна точка в процеса на дизайна може да бъде постигнато с лекота.
