Аналитика
Углубились в тему, подготовили более предметные вопросы заказчику
первый этап | 3 дня
Каждый проект мы начинаем с аналитики: изучаем нишу, рынок, продукт и основных конкурентов, чтобы глубоко понять контекст и задачи бизнеса. Без этого сайт может выглядеть эффектно, но не выполнять свою главную функцию — привлекать клиентов и работать на результат.
В процессе неизбежно возникают вопросы, и мы обязательно обсуждаем их с заказчиком, чтобы ещё глубже разобраться в специфике бизнеса и принять точные решения.
Изучили
- Все материалы, которые нам предоставил заказчик.
- Информацию от потенциальных клиентов — на форумах, в соц.сетях, на отзовиках, в тематических сообществах, у блогеров.
- Сайты конкурентов.
Выявили
Следующие конкурентные преимущества клиента:
- Собственное производство. Заказы любой сложности.
- Технология гиперпрессования, сохраняющая свойства натурального камня.
- Бесплатные замеры и расчет с выездом на объекты в Москве и Московской области.
- Гарантия на монтажные работы сроком на пять лет.
- Постгарантийное обслуживание за счет компании.
Разработка прототипа сайта
второй этап | 6 дня
Мы выстроили логичную структуру страницы, подготовили тексты и продумали функционал и сценарии взаимодействия с пользователем. Для нас важно, чтобы человек, заходя на сайт, сразу понимал, где он находится и какую пользу может получить.
Сайт структурировали так, чтобы информация о компании, услугах, видах камня и производимых изделиях раскрывалась последовательно и понятно. Отдельное внимание уделили описанию технологий производства и реализованных проектов, усиливая доверие и экспертность компании.
Дизайн-концепты
третий этап | 3 дня
«Просто, удобно, минималистично, без лишних наворотов» — такие пожелания мы слышим часто. И на первый взгляд кажется, что минимализм сильно ограничивает и загоняет в рамки.
Но для нас это не ограничение, а вызов. Мы ищем тонкие детали и приёмы, которые сохраняют чистоту дизайна, но добавляют ему характер и индивидуальность. Правда, чтобы прийти к точному решению, иногда приходится перебрать несколько вариантов — и это часть процесса.
Планёрка
После обсуждения первых набросков, решили остановиться на двух вариантах которые наиболее четко отражают суть деятельности компании и доработать их до полноценных дизайн-концептов.
Финальные варианты
В первом дизайн-концепте мы сосредоточили внимание на самом материале — камне, его текстурах, цветах и процессе производства. На главном экране разместили видео о создании изделий, чтобы сразу передать атмосферу производства и масштаб работы. Тёмный монохромный фон усилил выразительность текстур и продукции. На фоне преимущественно светлых решений конкурентов такой подход позволил нам визуально выделиться. В качестве альтернативы мы также подготовили светлую версию концепта.
Во втором концепте основной фокус сместили на готовые объекты, где камень представлен в реальных условиях. Это помогает пользователю увидеть продукцию в контексте и легче представить, как изделия будут смотреться в его собственном проекте.
Дизайн-концепт 1.1
Дизайн-концепт 1.2
Дизайн-концепт 2
Полный дизайн
четвертый этап | 4 дня
Продолжили дизайн остальных блоков лендинга, в стилистике выбранной заказчиком.
Адаптивы и подготовка к верстке
Пятый этап | 1 день
Написали подробное ТЗ по функционалу и анимации для верстальщика. Подготовили все материалы и адаптивную версию дизайна под мобильные устройства. Передали проект на верстку.
Верстка и оптимизация
шестой этап | 8 дней
Завершили верстку сайта, оптимизировали изображения для ускорения загрузки и провели SEO-оптимизацию для правильной индексации поисковыми сайтами. Реализовали задуманные анимаци и микро-анимации.
Добились идеальных показателей загрузки страниц и технической оптимизации, что положительно повлияет в дальнейшем на "оценку" сайта поисковыми системами.
Данные с pagespeed.web.dev:
Анимации
С помощью аккуратной анимации мы усилили акценты в блоках «Виды камня» и «Заказ образцов». Ненавязчивая динамика помогает привлечь внимание пользователя к ключевым действиям, направляет взгляд и делает взаимодействие с сайтом более живым. При этом анимация не перегружает интерфейс, а работает на удобство и вовлечённость.
Блок «Виды камня»
Компания предлагает сотни цветов и текстур камня из разных стран. Чтобы наглядно показать разнообразие ассортимента и не перегружать страницу, мы реализовали слайдер с самыми популярными видами гранита, мрамора и бетона. При этом в верхней части блока разместили сноску с общим количеством позиций в каталоге, чтобы пользователь понимал масштаб выбора.
Блок «Заказ образцов»
В этом блоке мы рассказываем о возможности заказать бесплатные образцы камня, чтобы пользователь мог спокойно определиться с выбором материала. С помощью анимации дополнительно подчёркиваем разнообразие ассортимента и привлекаем внимание к этому предложению.
Тестирование. Проверка. Передача
Завершающий этап | 1 день
Тестирование сайта
Протестировали работу сайта на исправность. Проверили отображение в нескольких браузерах, и на мобильных устройствах Andriod и IOS.
Проверка дизайна
Проверили итоговую верстку на наличие визуальных ошибок, сравнив десктопную и мобильную версии сайта с дизайн-макетами.
Проверка текста
Вычитали текст на сайте, проверили на орфографические и пунктуационные ошибки.
Итог
Передача заказчику
Полностью готовый сайт, выгрузили на хостинг заказчика, зарегистрировали и подключили необходимый домен и передали проект заказчику. На выходе заказчик получил сайт который представляет пользователю информацию о продукции и услугах компании. А также, возможность подачи заявок на консультацию, запрос каталога, прайс-листа и расчет стоимости.
