Разработка прототипа сайта
ПЕРВЫЙ ЭТАП | 1 ДЕНЬ
На основе предоставленных клиентом материалов и структуры, разработали прототип страницы, написали текст и заложили необходимый функционал. Продумали пользовательское взаимодействие и интерактивные элементы сайта.
Прототипы всплывающих окон
Поп-апп
Задача
Чтобы не нагружать пользователя сайта всеми характеристиками готовых систем, приняли решение разместить информацию в отдельное всплывающее окно, открывающееся по клику на конкретную карточку.
Информации по каждой системе много, но нужно было собрать ее воедино так, чтобы пользователь в ней
не запутался.
Решение
В первом варианте разделили информацию на отдельные логические блоки. Однако ссылки на дополнительные материалы рядом с кнопками целевых действий могли запутать пользователя.
Во втором варианте мы сильнее сегментировали функционал ссылок и кнопок друг от друга, а также облегчили таблицу, сделав ее более чистой и воздушной.
Дизайн-концепция
Второй этап | 3 дня
В нашем распоряжении были гайды, дизайн-код компании и пожелания по стилистике от заказчика. Есть, на что ориентироваться при разработке дизайна. Стиль, кстати, минимализм.
Шаг 1
Поиск референсов
Работу над дизайн-концепцией начали с изучения материалов заказчика. А, чтобы не ограничиваться только ими и подобрать наиболее удачные решения продающего визуала, отправились на поиски референсов.
Шаг 2
Первые наброски
Вооружившись набором хороших дизайн решений, пробовали применять их к нашему проекту. В процессе перебора решили остановится на двух вариантах и развивать их в полноценные дизайн-концепции.
Дизайн-концепт 1.0
Использовали плашечный стиль, простые фоновые изображения и иконки, фирменные цвета, шрифты и дизайн-код в виде скосов.
Дизайн-концепт 2.0
Использовали однотонные фоновые изображения, реалистичные объекты с инфографикой, фирменные цвета.
Шаг 3
Обсуждение внутри студии
Пришли к выводу, что первые 2 варианта не отображают основную направленность продукта на крупные промышленные, спортивные или развлекательные сооружения. Приняли решение доработать оба концепта по этому направлению.
Дизайн-концепт 1.1
Дизайн-концепт 2.1
Шаг 4
Финальные штрихи
Заказчик выбрал первую концепцию и попросил добавить масштабность и текстуру блокам, а также подобрать фоновые изображения с крышей в кадре, под определенным ракурсом.
Продолжение дизайна страницы
Третий этап | 3 дня
Разработали дизайн остальных блоков страницы, сделав акцент на масштабных изображениях, позиционировании и каталоге готовых кровельных систем. Сделали дизайн всплывающих окон для каждой системы.
Дизайн поп-апа Кровельных систем
Адаптивы и ТЗ для верстальщика
четвертый этап | 1 день
Адаптировали дизайн страницы под мобильные устройства. Написали подробное ТЗ по функционалу сайта, чтобы по итогу сайт корректно отображался на устройствах и был понятен, приятен для взаимодействия с пользователем. Передали все необходимые материалы на вёрстку.
Вёрстка. Разработка. Оптимизация
пятый этап | 4 дня
Сверстали сайт. Серверную часть проекта реализовали на 1С-Битрикс, т. к. большинство сайтов заказчика работают на этой CMS. Оптимизировали скорость загрузки страницы.
Тестирование. Проверка. Передача
Заключительный этап | 1 день
Тестирование сайта
Протестировали работу сайта на исправность. Проверили отображение в нескольких браузерах, и на мобильных устройствах Andriod и IOS.
Проверка дизайна
Проверили итоговую верстку на наличие визуальных ошибок, сравнив десктопную и мобильную версии сайта с дизайн-макетами.
Проверка текста
Вычитали текст на сайте, проверили на орфографические и пунктуационные ошибки.
Сдача проекта
Внесли финальные правки и завершили разработку сайта. Написали инструкцию по работе с CMS. Предоставили заказчику готовый рабочий инструмент для продающей рекламной кампании кровельных систем, с учетом всех требований по функционалу и пожеланий по дизайну.
