Создание шаблонов сайта студии «Уолл-стрит»

На старте проекта компания называлась fotooboi21, сайт представлял собой шаблонный интернет-магазин, а инструкции по оклейке были сложными и запутанными.

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

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

Есть два варианта покупки. Главный — на заказ. Посетителю сайта нужно выбрать одну из нескольких тысяч картинок; определиться с размером будущих обоев (размер не сильно зависит от картинки, недостающие фрагменты дизайнеры компании дорисуют сами); выбрать один из двадцати материалов. Также можно заказать цветокоррекцию, рекомендуется еще cделать цветопробу. Цена формируется в зависимости от выбранных параметров. Второй вариант — готовые фотообои. С ними все ясно: картинка, материал, размер, цена. Нужно только подобрать подходящие.

Выделяем главные функциональные части сайта и прорабатываем сценарии.

Приступаем к дизайн-концепции.

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

Выбираем минимализм.

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

Клиенту нравится. Начинаем прорабатывать ключевые экраны по карте сайта и запускаем разработку.

На странице 404-й ошибки сперва шутим про «Твин Пикс» и красную комнату. Но отказываемся от шутки в пользу легковесного и понятного варианта с фишечкой.

Прорабатываем конфигуратор фотообоев на заказ.

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

Отрисовываем техническую графику.

Проводим фотосессию мебели, ловим кота, собираем интерьерные композиции.

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

Прорабатываем анимации и переходы.

Клиент подвозит инструментарий, необходимый для оклейки. Устраиваем фотосессию, обрабатываем картинки, переписываем тексты и сценарий, верстаем.

Шлифуем анимации и переходы, ловим баги и оптимизируем.

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