Помощь по сайту

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

Шаг 1: настраиваем цветовую гамму сайта

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


Итак, форма с редактированием цветов палитры сайта выглядит примерно следующий образом:


режим редактирования цветовой гаммы
режим редактирования цветовой гаммы

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


Как видно с картинки, поля с данными отображаются именно тем цветом, код которого в них задан. Но вам совсем не обязательно разбираться в этих кодах (к слову, записываются они в шестнадцатеричной системе по модели RGB (от англ. Red, Green, Blue: Красный, Зеленый, Синий), вероятно вы слышали что точки изображения в цветных телевизорах и мониторах формируется путем смешивания данных трех цветов) - цвета можно выбирать просто кликнув мышкой по форме для ввода кода:


палитра для выбора цвета
палитра для выбора цвета

Обратите внимание, что большое окно с цветами - это палитра. А справа еще есть "столбик", задающий яркость. Итоговый цвет будет зависеть от этих двух параметров! Так, если вы выберите в палитре зеленый, примерно вот так:


пример выбора цвета
пример выбора цвета

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


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


указываем цвет
указываем цвет

И по перетаскивайте ползунок яркости вверх-вниз, наблюдая за тем, как меняется цвет формы:


изменения цвета, в зависимости от выбранной яркости
изменения цвета, в зависимости от выбранной яркости

Как правильно подбирать цветовую гамму для сайта?


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


Совет первый: не спешите. Прежде всего, представьте в общем, в каких тонах вы хотите видеть свой сайт. Начинайте с наиболее глобальных частей: фона сайта, базового цвета текстов, фона блоков и т.д.


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


Совет третий: черным по белому. В качестве фона сайта, фона различных больших блоков и т.д., предпочтительней использовать светлые тона. Черное на белом (темное на светлом) воспринимается гораздо комфортней, чем наоборот.


Совет четвертый: пользуйтесь утилитами для подбора цветов. Подобрать вручную цвета так, чтоб они хорошо сочетались, может далеко не каждый человек. И не беда! Ведь есть масса замечательных инструментов для подбора отлично сочетающихся цветовых схем. Смело можем порекомендовать такие замечательные инструменты, как Adobe Kuler или Сolor Hunter. Посмотрите и тот и другой, там можно как создавать свои схемы, так и выбирать из готовых. Мы постараемся позже написать описания к данным инструментам, пока можете поэкспериментировать самостоятельно.


Совет пятый: не делайте новогодних елок. Вообще считается, что в хорошем дизайне не должно присутствовать более 3-4 разных цветов. Это, конечно, не всегда просто, и далеко не всегда оправдано. Тем не менее, старайтесь не использовать более 5 цветов в своих стилях. Естественно, речь идет о заметных и важных элементах, которые всегда на виду. Для выделения каких-то более мелких деталей можно применить пару дополнительных цветов. Но если вам кажется, что каждый элемент сайта разным цветом - это круто, то вы ошибаетесь. По крайней мере, если вы делаете интернет-магазин, а не развлекательный сайт.


Кнопка "проверить корректность всех настроек".


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


результаты проверки совместимости настроек: есть проблемы, которые лучше сразу исправить
результаты проверки совместимости настроек: есть проблемы, которые лучше сразу исправить

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


Но пока оценка ведется исключительно по контрастности, на какие значения следует ориентироваться? Консорциум W3C по развитию технологий Сети рекомендует ориентироваться на минимальную контрастность 4.5:1 (АА), но рекомендуемая (ААА) - 7:1. Чтоб вам было понятней, белый текст на белом фоне имеет контрастность 1:1, а черный на белом - максимальную, 21:1.


На первое время, пока вы будете осваиваться, мы установили следующие, лояльные значения для проверки контрастности:


- ! информирование (ниже 3:1);
- !! предупреждение (ниже 2,5:1);
- !!! запрет (ниже 1,4:1).


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


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


контраст на сайте - это хорошо!
контраст на сайте - это хорошо!

Что дальше?


На данный момент, пока что это все. Но и это уже немало: все вы знаете как выглядят у нас магазины по умолчанию, а вот можете взглянуть на наш пример, который мама одного из наших сотрудников (человек, далекий от дизайна, и компьютеров вообще) настроила минут за 15 своих экспериментов:


освежите внешний вид своего интернет-магазина
освежите внешний вид своего интернет-магазина

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


Какие советы по настройке отображения своего сайта почитать?


- Общие сведения о возможностях настройки внешнего вида.

- Шаг 0: как управлять стилями интернет-магазина.

- Иконка для вашего интернет-магазина.

 

Создать свой сайт с интернет-магазином прямо сейчас!