Задача: сделать стильный, современный, но предельно понятный дизайн сайта по продаже маркиз, пергол и штор плиссе. Одна из задач — продвинуться по seo.

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

markizy-shtory.ru
На первом экране слайдер с акционными товарами. По клику пользователь сразу переходит на страницу товара
Для более быстрого перехода в каталог продукции выводим подкатегории на главную страницу сайта
Показываем преимущества компании, подтвеждаем многолетний опыт работы дипломами и сертификатами.
Аналогично с подкатегориями маркиз выводим плиссе. Чтобы разнообразить визуалы, делаем перебивки с полезной информацией.
Показываем акционные товары и предлагаем подписаться на акционную рассылку
Описываем способы работы с компанией в виде ее основных преимуществ перед конкурентами
Размещаем отзывы и рекоммендации с документальным подтверждением
На главной странице выводим форму обратной связи
Seo-текст для ботов, а не людей располагаем в самом низу страницы.

Каталог имеет несколько уровней вложенности. В первом уровне показываем и рассказываем про категории плиссе и маркиз.

markizy-shtory.ru
На странице используем неоднородную плитку с перебивками из промофактоидов, рассказывающих о качестве и преимуществах компании.

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

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

markizy-shtory.ru
Характеристики одинаковые для всех видов продукции выводятся на втором уровне каталога
Примеры работ помогают определиться с выбором
markizy-shtory.ru

На странице товара содержится описание, полный перечень характеристик и слайдер изображений.

markizy-shtory.ru
Карточка выбранной модели содержит необходимые технические параметры и позволяет соориентировать покупателя в цене
Завершаем страницу подборками с похожими товарами

С выгодными предложениями покупатели знакомятся в разделе «Акции».

markizy-shtory.ru
Постоянные акции выводим вверху страницы
Карточки акционых товаров содержат важную информацию о цене и процентном размере скидки

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

markizy-shtory.ru
Кратко рассказываем историю компании
Используем реальные фотографии сотрудников и производства. Блок верстаем простой газетной версткой
Краткими тезисами показывается как происходит работа с клиентами

Раздел «Статьи» собран в простую плитку из карточек.

markizy-shtory.ru
Каждая карточка содержит визуал по тематике статьи

В статье предусматриваем все сценарии, которые могут быть использованы при наполнении страницы: заголовки, подзаголовки, фотографии и подписи к ним.

markizy-shtory.ru
Блок с обратной связью скролится вместе со страницей и всегда остается на виду у пользователя

Типовые текстовые страницы собраны в нескучную плитку с короткими описаниями предоставляемых услуг

markizy-shtory.ru
Шаблонная верстка для текстовых страниц
Врезка с обратной связью разбавляет плитку из визуалов и помогает быстро задать интересующие вопросы

Отказываемся от кастомной страницы 404, делаем уникальный и лаконичный дизайн.

markizy-shtory.ru
Простая линейная иллюстрация напоминает, что покупатель находится на сайте маркиз, перголл и плиссе

Согласовываем макеты, отдаем на верстку и быстренько допиливаем мобильную версию.

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

Весь сайт проработан по страницам и уровням вложенности

Согласовываем структуру. Приступаем к прототипированию и дизайну главной страницы.

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

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

markizy-shtory.ru
В хедере выделяем пункты связанные с продажей продукции, второстепенные текстовые страницы выносим отдельными пунктами
Укорачиваем второй блок, оставлем акцент на гарантии, сокращаем текст описания преимуществ
Показываем визуал ткани, которую может предоставить, только наш клиент, это весомое преимущество, по сравнению с другими конкурентами
В предыдущем концепте, на товары был маленький акцент, этот блок сливался со всеми остальными, поэтому решаем выделить каждую подкатегорию, заверстав красивую плитку с визуалами
Блоки с товарами разделяем сертификатами и дипломами
Блок с товарами плиссе тоже верстаем в плитку, подкатегорий тут больше поэтому плитка получается уникальная на каждую категорию товаров
Решаем с клиентом, что акционных товаров будет немного, поэому размещаем их внизу страницы.
Краткая схема сотрудничетва проиллюстрирована тематическими иконками
«Наши клиенты» — блок нужный но проставатый, оставляем его на потом
В новостях выводим две последние
Прикрепляем внизу форму обратной связи

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

Артдир по скайпу выдает свои комментарии. Дизайнер в онлайн режиме быстро правит.

Варианты первого экрана:

Артдир выбирает пятый вариант с маленьки комментом:

Дизайнер быстро перерисовывает фоновую плашку и согласовывает главный баннер с арт-директором.

Проект менеджер просит поискать еще варианты фактоида во втором этаже. Выкидываем варианты.

Дизайнер получает комментарий от арт-директора:

У дизайнера приходит понимание: «Что-то не то». Выдает еще вариант:

Получает комментарий от артдира:

Делает последнюю правку

Фактоид согласован, переходим к плитке подкатегорий. Успокаиваем верстку цветом, яркие кнопки, заменяем на полупрозрачные плашки.

Переверстываем блок «Наши клиенты». Информацию оставляем на плашке, центрируем и добавляем паттерн с имитацией ткани.

Меняем стиль иконок к блоку «Как мы работаем»

Желтый круг на каждой иконке отсылает к логотипу компании

Собираем главную страницу. В итоге она выглядит так.

markizy-shtory.ru

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

ПМ и артдир довольны, правок нет. Собираем динамичный прототип и записываем видео, отправляем на согласование клиенту.

markizy-shtory.ru

Клиенту все нравится. Макеты согласованы без правок. Дизайнер ликует, ловит волну и бомбит оставшиеся макеты.

Отправляем на согласование. Опять принимаем положительный ответ — все согласовано, правок и дополнений нет. Готовим макеты на верстку, отдаем в разработку верстальщикам и программистам.