Создание сайта мебельной фабрики «Пуше»

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

Переходим к прототипированию.

Начинаем работу над дизайн-концепцией.

Рябит в глазах. Пытаемся найти более спокойное и простое решение.

Уже лучше, но дизайн пока еще где-то в облаках. Спускаемся на землю.

На старой версии сайта основным рекламным элементом были графические баннеры, за качеством которых было сложно уследить. А их постоянное обновление стоило денег и занимало время.

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

Попутно решаем украсить сайт эффектными анимациями.

Карточку товара предлагаем сделать в виде одной длинной простыни, на которой разместится вся информация о диване: описание, размеры, крупные фотки, видео, схемы комплектации и прочее — сразу в развернутом виде. Чтобы все это увидеть, достаточно будет промотать страницу вверх-вниз. Никаких кликов.

Собираем остальные страницы и отдаем на верстку.

Пока идет сборка сайта, задача успевает немного поменяться. Изначально предполагалось, что на сайте не будет корзины — мебель должна заказываться из раздела «Мне нравится». А заказ будет носить формальный характер — все детали уточняются по телефону. Однако клиент настаивает на корзине и подробном конфигураторе.

Заново продумываем процесс заказа.

Начинаем править уже собранный сайт. Снимаем много скриншотов, загружаем все в «Индизайн» и наводим порядок.

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

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

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

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

Работаем над мелочами. Отрисовываем в одном стиле все мелкие интерфейсные элементы.

Рисуем кнопки.

И другие мелочи.

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

Ненатурально. Отказываемся от мультиков в пользу более технологичных яваскрипт-эффектов. Монтируем для технологов подробные видео-инструкции.