Как да изберете цветовете на уебсайта си, без да объркате клиентите?

Изборът на цветове за уебсайт често започва с едно просто изречение:

„Харесвам бежово, черно и златно.“

На пръв поглед това изглежда като достатъчно ясна насока. Но бежовото може да бъде светло, топло, студено, розово, сиво, жълтеникаво или толкова тъмно, че да изглежда почти кафяво.

Същото важи за розовото, зеленото, синьото и почти всеки друг цвят.

Затова между идеята в главата на клиента и крайния резултат на екрана понякога има голяма разлика.

Добрата цветова палитра не трябва само да изглежда красиво. Тя трябва да представя правилно бизнеса, да прави текста лесен за четене и да насочва вниманието към важните действия в сайта.

Нормално е да искате сайтът ви да използва цветове, които харесвате.

Това обаче не трябва да бъде единственият критерий.

Сайтът не е личен профил. Той е част от начина, по който клиентите възприемат бизнеса.

Ако предлагате премиум козметични услуги, яркозеленото може да не създаде търсеното усещане за спокойствие и грижа.

Ако управлявате детски център, изцяло черен и строг сайт може да изглежда прекалено дистанциран.

Ако сте адвокатска кантора, прекалено много пастелни и декоративни елементи могат да намалят усещането за сериозност.

Това не означава, че определени цветове са забранени за дадена индустрия.

Означава, че всеки избор трябва да бъде направен спрямо хората, които искате да привлечете, и впечатлението, което искате да оставите.

Преди да избирате конкретен нюанс, опишете как трябва да се усеща сайтът.

Например:

• светъл и спокоен;
• премиум и изчистен;
• модерен и технологичен;
• приятелски и достъпен;
• смел и енергичен;
• естествен и земен;
• сериозен и надежден.

Тези думи дават по-добра посока от общото „искам бежов сайт“.

Светъл и спокоен бежов сайт може да използва почти бял фон, мек пясъчен нюанс и приглушено розово.

Премиум и тъмен бежов сайт може да включва кафяво, графитено и по-силно златно.

И в двата случая присъства бежово, но крайното усещане е напълно различно.

Колкото по-ясно можете да опишете атмосферата, толкова по-малък е рискът дизайнерът да избере правилния цвят в грешния нюанс.

Това е една от най-честите причини за разминаване между очакването и резултата.

Светлото бежово обикновено стои близо до кремаво, пясъчно или почти бяло. То отразява повече светлина и създава усещане за пространство.

Златистото бежово съдържа повече жълт или карамелен подтон. Ако бъде използвано в големи площи или в по-тъмен вариант, лесно може да изглежда кафяво.

Розовото бежово има лек топъл розов подтон. То може да стои много меко и премиум, но ако розовото стане прекалено наситено, сайтът вече няма да изглежда бежов.

Затова думи като „бежово“ или „пепел от рози“ не са достатъчни сами по себе си.

Полезно е да покажете конкретни примери или да дадете точни цветови кодове.

Например:

• светло топло бежово: #F3E9DD;
• меко кремаво: #F7F2EB;
• пепел от рози: #C9A3A8;
• наситено черно за текст: #171717;
• меко златно за акценти: #C6A15B.

Тези кодове не са универсално решение, но дават много по-ясна отправна точка.

Повечето бизнес сайтове нямат нужда от десет различни цвята.

Обикновено са достатъчни:

• един основен цвят;
• един вторичен цвят;
• един цвят за текст;
• един малък акцентен цвят;
• бяло или почти бяло за баланс.

Например:

Основен цвят: светло бежово.

Вторичен цвят: пепел от рози.

Цвят за текст: черно или много тъмносиво.

Акцент: меко златно.

Допълнителен неутрален цвят: бяло.

Това не означава, че всеки цвят трябва да присъства еднакво навсякъде.

Основният цвят трябва да заема най-голяма част от сайта. Вторичният може да се използва за отделни секции, карти и бутони. Акцентният трябва да остане ограничен.

Когато всички цветове се използват еднакво силно, сайтът губи визуална йерархия.

Често се използва правилото 60-30-10:

• около 60% основен цвят;
• около 30% вторичен цвят;
• около 10% акцент.

Това е полезна отправна точка, но не е закон.

При светъл уебсайт основното бежово може да заема дори повече от 60%, а златното да бъде много под 10%.

По-важното е посетителят да усеща ясна цветова йерархия.

За светъл премиум сайт една добра посока може да бъде:

• големи светлобежови фонове;
• няколко секции в пепел от рози;
• черен текст;
• златни линии, малки икони или фини рамки;
• бяло само когато е необходимо за повече въздух или контраст.

Златното не трябва да се превръща в голям фон. То работи по-добре като детайл.

Златното често се използва, когато бизнесът иска да изглежда премиум.

Проблемът е, че ако присъства в големи площи, тежки градиенти, ярки сенки и прекалено много декоративни елементи, резултатът може да изглежда обратното.

Премиум усещането обикновено идва от ограничението.

Тънка златна линия между две секции може да бъде по-ефективна от цял златен фон.

Малка златна икона може да изглежда по-елегантно от голям лъскав бутон.

Златното трябва да подкрепя дизайна, а не да се състезава с всичко останало.

Добри места за златен акцент са:

• тънки разделителни линии;
• малки икони;
• рамки;
• декоративни символи;
• отделни думи;
• фини детайли около заглавията;
• лек акцент при задържане върху бутон.

Пепел от рози е приглушен розов нюанс със сив или бежов подтон.

Той трябва да изглежда меко, спокойно и леко заглушено.

Когато в цвета има прекалено много синьо, той започва да изглежда лилав или виолетов.

Когато е прекалено наситен, започва да доминира над останалата палитра.

Ако целта е светъл бежов сайт с пепел от рози, розовият цвят трябва да бъде вторичен.

Той може да се използва за отделни карти, секции, малки фонове или бутони.

Не трябва целият сайт да бъде розов, само защото този нюанс присъства в палитрата.

Основният цвят трябва да остане светлото бежово.

Изборът зависи от фона.

Върху светло бежово и светло розово черният или много тъмносивият текст обикновено е по-четим.

Върху тъмен бутон, черен фон или наситен акцент бялото може да бъде по-подходящо.

Не е добра идея целият текст да бъде златен, светлобежов или бледорозов. Това може да изглежда красиво на голям екран, но да бъде трудно за четене на телефон.

Най-важното е да има достатъчен контраст между текста и фона.

Четливостта трябва да има предимство пред декоративния ефект.

Ако посетителят трябва да се напряга, за да прочете заглавие, ценова информация или бутон, цветът не изпълнява задачата си.

Не е необходимо да знаете професионалните имена на всички цветове.

Но е важно да бъдете конкретни.

Вместо:

„Искам нещо бежово и златно.“

По-полезно е да кажете:

„Искам светъл сайт. Основният фон трябва да бъде много светло топло бежово. Вторичният цвят може да бъде приглушено пепелнорозово. Черното да се използва основно за текст, а златното само за малки линии и детайли.“

Добавете и какво не искате:

„Не искам тъмнокафяво, карамелено, оранжево, жълто бежово, лилаво или виолетово.“

Отрицателните примери също са полезни.

Те показват не само какво харесвате, но и къде се намира границата между правилната и грешната посока.

Снимки на интериори, опаковки, дрехи и други сайтове могат да помогнат много.

Но когато изпращате пример, обяснете какво точно ви харесва.

Например:

• „Харесва ми колко светъл е фонът.“
• „Харесва ми комбинацията между бежово и розово.“
• „Харесва ми, че златното е само малък акцент.“
• „Харесва ми контрастът на черния текст.“
• „Не искам същото оформление, а само подобна цветова атмосфера.“

Без това уточнение дизайнерът може да приеме, че харесвате целия пример, включително структурата, шрифтовете и останалите елементи.

Примерите трябва да служат като посока, а не като модел за копиране.

Когато има риск от разминаване, не е разумно първо да се изработи целият сайт.

По-добре е началната страница да бъде показана в една или две цветови посоки.

Така можете да проверите:

• дали сайтът е достатъчно светъл;
• дали бежовото не изглежда кафяво;
• дали розовото не е прекалено лилаво;
• дали златното е достатъчно деликатно;
• дали черният текст се чете добре;
• дали цялостното усещане отговаря на бизнеса.

След като основната посока бъде одобрена, тя може да бъде приложена върху останалите страници.

Това спестява време и намалява риска от големи корекции в края.

Един и същ цвят може да изглежда различно на два телефона, лаптоп и външен монитор.

Яркостта на екрана, режимът за защита на очите и настройките на цветовете могат да променят възприятието.

Затова палитрата трябва да бъде проверена на повече от едно устройство.

Особено важно е сайтът да бъде разгледан на телефон.

Там секциите са по-тесни, цветовите блокове изглеждат по-големи, а контрастът на текста се усеща по-силно.

Цвят, който изглежда мек на голям монитор, може да изглежда прекалено наситен на мобилен екран.

Цветовете не служат само за украса.

Те показват кое е важно и къде посетителят трябва да натисне.

Основният бутон трябва да се отличава от фона.

Ако целият сайт е бежов и всички бутони са в почти същото бежово, действията могат да останат незабелязани.

Добър вариант е основният бутон да бъде черен с бял текст, а вторичният да бъде светъл с тъмна рамка.

Пепелнорозовото също може да се използва за бутон, ако има достатъчен контраст.

Златното обикновено е по-подходящо за малък декоративен детайл около бутона, а не за основен фон.

Всеки важен бутон трябва да се вижда ясно и да остава четим при задържане, натискане и на мобилен екран.

Различните фонове могат да отделят секциите една от друга.

Например:

• Началната секция може да бъде светлобежова.
• Следващата секция с услуги може да бъде почти бяла.
• Секцията с екипа може да използва много меко пепелнорозово.
• Призивът за контакт може да бъде черен с бял текст и малък златен детайл.

Така цветовете помагат на посетителя да усеща ритъма на страницата.

Когато всяка секция използва различен силен цвят, сайтът започва да изглежда разпокъсан.

Когато всички секции са напълно еднакви, страницата може да изглежда монотонна.

Целта е баланс, а не постоянна промяна.

Цветовете и типографията трябва да работят заедно.

Светла бежова палитра с пепел от рози и малки златни детайли често се съчетава добре с елегантен серифен шрифт за заглавия и чист безсерифен шрифт за основния текст.

Заглавният шрифт може да има повече характер, меки извивки и редакционно усещане.

Основният текст трябва да остане лесен за четене.

Не е добра идея всички текстове да бъдат с декоративен или ръкописен шрифт.

Това може да изглежда интересно в едно заглавие, но става изморително при по-дълги абзаци.

Когато клиентът каже, че не иска „нормален печатен шрифт“, това обикновено означава, че търси по-разпознаваем характер в заглавията.

Не означава, че целият сайт трябва да бъде труден за четене.

Една възможна посока е:

• Основен фон: #F3E9DD
• Допълнителен светъл фон: #F8F3ED
• Пепел от рози: #C9A3A8
• Основен текст: #171717
• Меко златно: #C6A15B
• Бяло: #FFFFFF

При тази палитра основният фон остава светлобежов.

Пепелнорозовото се използва за избрани секции и карти.

Черното се използва за текст и силни бутони.

Златното остава ограничено до линии, рамки, икони и малки декоративни елементи.

Това е само пример. Правилната палитра трябва да бъде съобразена със снимките, логото, услугите и цялостния характер на бизнеса.

При счетоводна, юридическа или консултантска услуга може да бъде подходяща по-строга посока:

• Основен фон: светлосиво или почти бяло.
• Основен цвят: тъмносиньо или тъмнозелено.
• Текст: графитено.
• Акцент: приглушено златно, синьо или зелено.

Тук целта е усещане за надеждност, спокойствие и яснота.

Прекалено много ярки цветове могат да разсеят вниманието от информацията.

За спорт, детски услуги, събития или по-младежки продукт може да се използва по-силен акцент.

Основният фон отново може да остане неутрален.

Един ярък цвят може да бъде използван за бутони, важни думи и графични елементи.

Не е необходимо целият сайт да бъде ярък, за да изглежда енергично.

Когато силният цвят се използва ограничено, той привлича повече внимание.

Сред най-честите грешки са:

• избор само по личен вкус;
• прекалено много основни цветове;
• използване на тъмни нюанси при желание за светъл сайт;
• смесване на топли и студени нюанси без ясна причина;
• прекалено много златно;
• недостатъчен контраст между текст и фон;
• използване на бледи цветове за важни бутони;
• липса на точни примери;
• одобряване на палитрата само на един екран;
• опит всеки елемент да бъде различен.

Добрата палитра обикновено изглежда по-проста, отколкото хората очакват.

Тя има ясна основа, един вторичен цвят и малко количество акцент.

Можете да подготвите кратка насока като тази:

„Искаме сайтът да бъде светъл, спокоен и премиум.

Основният цвят трябва да бъде много светло топло бежово.

Вторичният цвят трябва да бъде меко пепел от рози, без лилав или виолетов подтон.

Черното да се използва основно за текст и силни бутони.

Златното да бъде само малък акцент за линии, икони и рамки.

Не искаме тъмнокафяво, карамелено, оранжево, жълто бежово или прекалено розов сайт.

Предпочитаме елегантен шрифт с характер за заглавията и изчистен шрифт за основния текст.“

Това е много по-ясно от списък с четири имена на цветове.

Ако тепърва планирате нов сайт, прочетете и нашето ръководство за това какво трябва да подготвите, преди да поръчате уебсайт.

Цветовете на сайта не трябва просто да ви харесват.

Те трябва да представят правилно бизнеса, да правят съдържанието лесно за четене и да насочват вниманието към важните действия.

Започнете с усещането, което искате да създадете.

След това изберете един основен, един вторичен и един ограничен акцентен цвят.

Покажете конкретни примери, уточнете какво не искате и прегледайте палитрата на повече от едно устройство.

Най-добрият резултат обикновено не идва от повече цветове.

Идва от правилното им разпределение.