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