Сегодня поговорим о дизайне. Конечно, если Вы не дизайнер, то самостоятельно нарисовать в Фотошоп макет с нуля, потом сверстать и натянуть на движок, даже если мы Вам пошаговое руководство выдадим, не сможете. Зачем тогда эта статья?
Затем, что Вы просто обязаны понимать основы дизайна. Для чего? Чтобы адекватно оценить работу художника-дизайнера, верстальщика и программиста, котором заплатили. Ну или чтобы сейчас окинуть взором свой ресурс и понять, а что, собственно, в его дизайне можете улучшить.
Вообще дизайн вторичный параметр для сайта, сначала контент, его полезность, значимость, интересность для пользователей.
Почему дизайн – это важно?
1 Дизайн сайта – своего рода визуальный «язык общения» между Вами и Вашими клиентами. Не стоит скидывать со счетов тот факт, что визуальное оформление подталкивает клиента к покупке (хотя если сделано некорректно, то отпугивает).
Например, синие тарелки. Доказано, что из них люди съедают меньше. В том числе и по этой причине для оформления сайтов с едой синий цвет не выбирают. В общем, дизайн – архиважно. Поэтому проверяем!
Чек-лист: что учесть в дизайне, чтобы сократить отказы и повысить конверсию
1 В веб-дизайне есть ряд правил, сегодня расскажем о 5 основных, которые стоит соблюдать. Проверяйте на своем сайте:
Модульная сетка – правило №1
Сетка – основа сайта, его единый каркас. Сетка отражает расположение всех основных блоков и элементов сайта, проходит через все страницы. Если не придерживаться сетки и направляющих, то сайт превратится в набор хаотично раскиданных элементов, расположенных как попало (выше-ниже, больше-меньше). Итог один: кто в лес, кто по дрова.
Цветовая схема – правило №2
Выбор цветов для сайта должен быть обоснован, а число цветов не превышать 3–4: цвет фона, цвет шрифта, цвет элементов + дополнительный цвет. Изначально для сайта выбирается цветовая схема и далее в дизайне ее придерживаются. Не нужно для каждой новой страницы сайта изобретать новую цветовую схему.
Цвета подбираются на цветовом круге. В подборе нужно учитывать цели и особенности бизнеса, колористику (сочетаемость цветов), а также особенности восприятия цвета (некоторые цвета более агрессивные, некоторые менее), в том числе культурные (например, черный цвет в Японии обозначает радость, а белый в Китае – цвет траура).
Шрифты – правило №3
В дизайне сайта допустимо не более 2 разных шрифтов, которые легко и удобно читать (без засечек – такие шрифты для печатной литературы). Рекомендуем для примера посмотреть модные варианты: Helvetica, Roboto. А также не такие востребованные, но не менее подходящие: Lato, Ubuntu, Exo, Railway, Helios. Типовой размер шрифта – 14 pt и выше. Шрифт заголовков должен быть крупнее, чем обычный текст.
Выравнивать основной текст на сайте лучше всего по левому краю, заголовки допустимо выравнивать по центру. Никакого «газетного» выравнивания по ширине на сайте использовать недопустимо!
Еще один важный момент оформления текста – длина строки не должна превышать 70–80 символов, чтобы легко было читать с экранов.
Чтобы получить идеальное межстрочное расстояние (интерлиньяж) для комфортного чтения, используйте размер шрифта * 1,5.
Дизайн-шаблоны / UIKit – правило №4
Все элементы на сайте должны быть оформлены единообразно, у всех схожих по смыслу элементов (ссылки, кнопки «В корзину», кнопки «Оставить заявку», галереи фотографий, меню, формы и т. д.) – должен быть свой единый шаблон оформления, использующий цветовую схему сайта и шрифты.
То есть, например, все кнопки «Оставить заявку» должны выглядеть одинаково на всех страницах. Так посетителю Вашего сайта будет проще его использовать, он быстро научится работать с сайтом. Как результат – повысится лояльность.
UIKit – это документ, в котором описываются стили оформления для каждого элемента сайта. Все стили лучше формализовать на этапе создания сайта.
Тренды правило №5 дань текущей моде на современные сайты, не обязательный элимент
Дизайн не стоит на месте, он постоянно развивается, появляются новые тренды. Сейчас ценится минимализм – простота, точность, много пустого пространства (воздух между элементами). Если у Вас на сайте все еще тенюшечки, градиенты, дикие параллаксы и мигающие яркими цветами баннеры – Вы безнадежно устарели.