Как избежать 10 ошибок в работе с цветом на сайте

Posted on by riasevastopol

Работа с цветом — наиболее значимый навык любого веб-дизайнера. Грамотное владение им может принести сайту успех, а кроме того маленькая неточность в создании гаммы доставить большое количество хлопот в будущем. В данной статье эксперты сервиса AskUsers разберут 10 неточностей, каковые дизайнеры допускают при работе с цветом на сайте, и поведают вам, как их избежать.

Нежелание внедрять психотерапевтические приемы

Существует много иссследований, каковые обрисовывает эмоции и реакции пользователя на цветовую гамму сайтов. Это, непременно, поле для спора — цветовые предпочтения определяются национальной культурой, личным опытом, вторыми обстоятельствами, но не учитывать вовсе настроение, передающееся цветом, запрещено. И при создании сайтов совершенно верно так же стоит использовать то, что нам известно о восприятии цвета.

К примеру, оранжевый — замечательно мотивирующий к приобретениям цвет. Превосходно передает призывы к действию, подходит для интернет магазинов.

Зеленый цвет символизирует доверие, а что возможно серьёзнее доверия, в то время, когда речь идет о еде?

1. Слепое подражательство

Хорошая неточность клиента — проекция собственных представлений о дизайне. Ваш любимый форум сделан в теплых «карамельных» цветах, главные тексты темно-коричневые, а фон сообщений бледно-желтый?Как избежать 10 ошибок в работе с цветом на сайте Это не означает, что сайт, посвященный кондиционерам, обязан унаследовать такую гамму.

Кондиционеры должны создавать чувство свежести — не напрасно большая часть сайтов для того чтобы рода выдерживается в голубых и белых тонах.

Кроме того в случае если вам весьма нравится какой-то сайт, задумайтесь, перед тем как заказывать «совершенно верно такое же, но про мои товары».

2. Тусклый call-to-action

В случае если у вас на сайте имеется замечательный призыв к действию, он должен быть заметен пользователю — за него обязан зацепиться глаз пользователя. Бледный и не выделяющийся call-to-action, даже если он превосходно сформулирован, просто не будет трудиться. Не так уж хороша и противоположная обстановка, в то время, когда СТА практически кричит «НАДАВИ МЕНЯ».

Призыв к действию должен быть гармоничным и выделяться за счет выбора контрастных дизайна и цветов.

3. Избыточная цветовая палитра сайта

Значительно чаще для оформления сайта достаточно двух-трех цветов. Бывают, само собой разумеется, весьма успешные дизайнерские ответы и с громадным числом цветов, но это исключения. Случается, два цвета выглядят превосходно, а при добавлении третьего получается каша.

Рекомендуем применять при подборе цветовой палитры как минимум цветовой круг. При подборе с его помощью цветов необходимо не забывать, что прекрасно сочетаются между собой соседние цвета и те, что расположены наоборот.

Рекомендуем кроме этого применять специальные сайты. Тут возможно организовать собственную гамму либо применять одну из уже готовых.

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

4. Различный цвет у однотипных элементов

В случае если на вашей посадочной странице имеется три кнопки оформления заказа, все они должны быть одного цвета. По окончании того, как пользователь заметит первую, он будет принимать другие так же. В случае если кнопки различных цветов имеют однообразные функции, это может привести к некоторому замешательству.

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

5. Однообразные цвета у разнотипных элементов

Противоположная обстановка — в то время, когда вы используете «любимый» цвет везде, где вам думается, что нужно сделать красиво. Кнопки, предполагающие действия, и некликабельные элементы не должны быть похожи по цвету, это нарушает логику применения сайта. Сделав кликабельную кнопку определенного цвета и стиля, вы создаете паттерн поведения, и в случае если подобный элемент окажется неактивным, это нарушит привычное поведение пользователя.

6. Недочёт контраста

В погоне за необыкновенной и яркой цветовой гаммой дизайнеры обычно упускают цвет момент: фона и важный цвет текста должны быть достаточной контрастны, дабы текст было легко просматривать. Данный принцип наглядно демонстрируется на примерах ниже.

7. Нестандартный цвет ссылок

Пользователь должен иметь возможность отличить ссылку среди текста, не трогая мышку. Само собой разумеется, цвет тут — не единственный инструмент дизайнера, но, пожалуй, самый действенный. Три правила:

  • Ссылки должны быть видны без наведения на них курсора.
  • При наведении курсора ссылка обязана поменять цвет.
  • Посещенные ссылки нужно отмечать вторым цветом, это особенно критично, в случае если обращение об информационном сайте с множеством публикаций.

На примере дизайнер выбрал очень неудачный цвет оформления ссылок для навигации по портфолио.

8. Блеклый минимализм не для импульсивных продаж

Сейчас весьма модно создавать лендинги, нацеленные, в большинстве случаев, на импульсивные продажи. Такие страницы воздействуют на эмоции человека, на пробуждение в нем сиюминутного жажды приобрести товар. Второе актуальное направление в создании сайтов — минимализм, он в большинстве случаев, характеризуется одним либо двумя цветами, довольно часто строгими.

Два этих актуальных веяния значительно чаще несовместимы. Запрещено реализовывать в расчете на эмоции, в случае если ваш сайт не формирует этих самых чувств при просмотре.

строгий минимализм и Спокойные тона уместны, в то время, когда приобретение рациональна. Да, минимализм возможно и нескучным, многоцветным и весьма кроме того эмоциональным, но на данный момент многие дизайнеры склонны к воздуху и серым «тонам», что не очень-то сочетается с реализовывающими посадочными страницами.

Но это не свидетельствует, что реализовывающий эмоциональный лендинг обязан сиять всеми цветами радуги.

9. Неуместный тёмный

Маркетологи уже давно приучили потребителей в осязаемом мире к тому, что черный цвет упаковки практически в любое время означает высокую стоимость и премиальный уровень качества товара. Вот для примера элитная дорогие крупы и марка пельменей:


Отечественные привычки, как и способы маркетологов, перекочевывают из супермаркетов на просторы интернета, например, сайт ювелирной компании, выполненный в тёмном цвете, выглядит элегантно и дорого:

Не следует применять большое количество тёмного цвета на сайте в качестве фона, если вы оказываете услуги в низком ценовом сегменте либо реализовываете недорогие товары. Впечатления от сайта у визитёров не будут совпадать вашим торговым предложением.

10. Цветовые ограничения дизайнеру

Это правило не относится напрямую к дизайну сайта и подбору цветовой палитры. Обращение о постановке задач перед дизайнером при разработке сайта. В случае если у вас нет уже внедренного фирменного стиля либо узнаваемого логотипа (не смотря на то, что и в этом случае правило частично применимо), не следует задавать дизайнеру ограничения и строгие рамки по применяемым цветам.

Ваше видение возможно какое количество угодно красивым, но разрешите дизайнеру предложить собственный. В случае если по окончании нескольких попыток дизайнер так и не сможет продемонстрировать что-то, что вам понравится, лишь тогда стоит задавать ему твёрдые рамки в подборе цветовой гаммы.

Второе исключение: если вы уверены в том, что ваш вариант цветового оформления прекрасно продуман и вы имеете возможность сами себе аргументировать данный выбор. В большинстве случаев клиенты не учитывают того, что берет в расчет дизайнер — читаемость текста, достаточная оптимальное количество и яркость кнопок цветов.

Выводы

Цветовая гамма формирует первое чувство пользователя о сайте. Крайне важно, дабы оно было хорошим. Но нельзя просто так заострять внимание людей на цвете, подавайте с его помощью данные.

Если вы не уверены в правильности выбора, воспользуйтесь данными тепловых карт либо несложным приемом размытия готового интерфейсного ответа. Сущность приема весьма несложна: нужно посредством графических программ размыть всю станицу и взглянуть блоки и какие элементы завлекают внимание прежде всего. Первый, второй и третий блок, каковые завлекают внимание, должны быть самыми серьёзными элементами с позиций пользовательского сценария.

Для примера мы размыли первый экран Aviasales.ru — внимание завлекают блоки элементов 1, 2 и 3. По окончании прочтения заголовка, т.е. формирования у пользователя верных ожиданий, он (вспоминаем про правила контраста) будет наблюдать на необходимые элементы выбора параметров и call-to-action.

А посмотрите, как четко выделяется на размытом фоне главное воздействие на сайте ostrovok.ru.

В случае если ваши интерфейсы проходят подобные тесты на ура, то предстоящие улучшения сайта нужно проводить, основываясь на понимании пользовательской психологии, т.е. разбирая фидбек от настоящих пользователей. Посредством вопросов наподобие: “Куда вы посмотрели прежде всего: на какие конкретно 3 элемента сайта, и в каком порядке?

Куда вам хочется надавить прежде всего и из-за чего?” в AskUsers вы сможете осознать не только как распределяется внимание пользователей, но и из-за чего пользователи наблюдают на те либо иные элементы. Эта информация окажет помощь распознать множество неприятностей в текущем интерфейсе и отыскать оптимальные варианты их решения.

Не забывайте, что форма подчиняется содержанию. Цветовое оформление является инструментом, разрешающим сконцентрировать внимание пользователя на ответственной для владельца и пользователя сайта информации.

Случайные статьи:

10 ошибок при работе в Photoshop которых нужно избегать


Подборка похожих статей:

riasevastopol

More Posts