Задача: сделать стильный, современный, но предельно понятный дизайн сайта по продаже маркиз, пергол и штор плиссе. Одна из задач — продвинуться по seo.
Решение: созданы макеты сайта, на котором пользователи узнают о компании и подберут подходящие маркизы или перголы. Вся структура разработана и согласована seo–специалистами.
Каталог имеет несколько уровней вложенности. В первом уровне показываем и рассказываем про категории плиссе и маркиз.
Третий и четвертый уровни вложенности: подкатегории категории и виды подкатегорий с каталогом, например:
На странице товара содержится описание, полный перечень характеристик и слайдер изображений.
С выгодными предложениями покупатели знакомятся в разделе «Акции».
У компании многолетний опыт работы, поэтому страница разделена на короткие разделы: истории, полученные международные сертификаты и дипломы, клиенты и условия сотрудничества.
Раздел «Статьи» собран в простую плитку из карточек.
В статье предусматриваем все сценарии, которые могут быть использованы при наполнении страницы: заголовки, подзаголовки, фотографии и подписи к ним.
Типовые текстовые страницы собраны в нескучную плитку с короткими описаниями предоставляемых услуг
Отказываемся от кастомной страницы 404, делаем уникальный и лаконичный дизайн.
Согласовываем макеты, отдаем на верстку и быстренько допиливаем мобильную версию.
По пожеланию заказчика акцент на сайте должен быть на маркизы, с небольшим отрывом на плиссе. Составляем структуру, учитывая пожелания клиента и seo-специалистов.
Согласовываем структуру. Приступаем к прототипированию и дизайну главной страницы.
Проект менеджер комментирует первый прототип: «Можно двигаться в таком направлении, стилистика ок. Давай добавим больше визуалов, выглядит пресновато, хочется быстрее показать товары. На первых экранах слишком много информации о компании».
ПМ говорит ок, скинь посмотреть артдиру и допили футер, сейчас он смотрится шумно. Советуемся с сеошниками, решаем что можно часть разделов свернуть оставив основные.
Артдир по скайпу выдает свои комментарии. Дизайнер в онлайн режиме быстро правит.
Варианты первого экрана:
Артдир выбирает пятый вариант с маленьки комментом:
Дизайнер быстро перерисовывает фоновую плашку и согласовывает главный баннер с арт-директором.
Проект менеджер просит поискать еще варианты фактоида во втором этаже. Выкидываем варианты.
Дизайнер получает комментарий от арт-директора:
У дизайнера приходит понимание: «Что-то не то». Выдает еще вариант:
Получает комментарий от артдира:
Делает последнюю правку
Фактоид согласован, переходим к плитке подкатегорий. Успокаиваем верстку цветом, яркие кнопки, заменяем на полупрозрачные плашки.
Переверстываем блок «Наши клиенты». Информацию оставляем на плашке, центрируем и добавляем паттерн с имитацией ткани.
Меняем стиль иконок к блоку «Как мы работаем»
Собираем главную страницу. В итоге она выглядит так.
Согласовываем главную страницу с заказчиком. Попали в точку, правок нет. Доделываем страницы каталога согласно сеошной структуре. Выделяем основные параметры, которые могут дублироваться в различных категориях, используем принцип от общего к частному.
ПМ и артдир довольны, правок нет. Собираем динамичный прототип и записываем видео, отправляем на согласование клиенту.
Клиенту все нравится. Макеты согласованы без правок. Дизайнер ликует, ловит волну и бомбит оставшиеся макеты.
Отправляем на согласование. Опять принимаем положительный ответ — все согласовано, правок и дополнений нет. Готовим макеты на верстку, отдаем в разработку верстальщикам и программистам.
