Концепция дизайна сайта

baza-holod.ru
Задача концепции — продемонстрировать наш подход к работе и дать представление о том с чего начнется проект и каким он может стать.
Михаил Гусев
Арт-директор
На концепции изображена страница услуги. Мы предлагаем оптимизировать структуру сайта, уменьшить количество уровней вложенности страницы и упростить доступ к основной информации.
В концепции мы сделали акцент на простом цветовом кодировании: для оформления сайта преимущественно используется фирменный синий цвет, а для акциденции важных информационных и «call to action» элементов введен дополнительный желтый цвет. В таком интерфейсе сразу формируется привычка смотреть на желтые элементы и ожидать от них важной информации. Мы используем это, чтобы выделить кнопки обратной связи, размещение заявки или отправку сообщения.
Главные впечатления: уверенность, информативность, ясность, доверие и деловой подход.
«Шапка» сайта разделена на логические слои, это позволяет управлять вниманием пользователя и выделять одни разделы сайта перед другими. Для повышения информативности, на видном месте размещены не только адрес и контактный телефон, но и время работы. Варианты обратной связи подразумевают текстовое сообщение и заказ обратного звонка: такой подход удовлетворяет потребностям большей аудитории и не создает ощущения перегруженности.


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

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

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

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

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


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



Страница целиком
Спасибо за внимание
Ждем ваших комментариев
Студия дизайна «Peach». г. Ярославль, 2016 год.
www.peachdesign.ru
Made on
Tilda