• Веб
  • Уолл-стрит
  • Сайт Логотип

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

    Описание Процесс Клон

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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