Плиссе декор

Для анализа ЦА и конкурентов и знакомства с нишей был проведен комплексный анализ конкурентной среды и веб-дизайна для рынка антимоскитных и солнцезащитных систем России с помощью Qwen AI. Дополнительно было проведено аналогичное исследование для этой же ниши на рынках Европы и США - с целью выявить тенденции и интересные решения.
Отмечу, что ЦА сайта - это потенциальные заказчики, дизайнеры интерьеров и дилеры в регионах, то есть Сайт должен быть удобен всем этим категориям.

Проведено отдельное сравнительное исследование дизайна и юзабилити 10 сайтов конкурентов, в ходе которого удалось определить лучшие решения и типичные ошибки в нише, чтобы:

• выделиться на фоне конкурентов;
• предложить пользователям более удобный, информативный и доверительный сайт;
• повысить конверсию в заявки за счёт грамотной структуры, визуальной иерархии и чётких путей взаимодействия;
• избежать распространённых UX- и UI-упущений (например, скрытые контакты, отсутствие цен, слабая адаптация под мобильные устройства).

Проведенный анализ конкурентной среды и ЦА позволил собрать «портрет идеального сайта» в нише:

• информативный, но не перегруженный;
• визуально современный, по возможности - с темной или светлой темой по выбору;
• мобильный и быстрый;
• с открытыми контактами и понятной ценой;
• с акцентом на уникальные преимущества (антипыльца, моторизация и т.д.).

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

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

Создание прототипа с готовым текстом можно сравнить с шитьем платья на заказ, когда дизайн гармонично "сидит" на контентной структуре сайта.

Поскольку ранее проведенные исследования содержали множество рекомендаций, то в короткие сроки удалось структурировать текстовый контент Главной и всех необходимых страниц и создать прототипы в нужном размере фрейма и 12-колоночной сетке.

На этапе создания дизайн-концепции (с подбором шрифтов и цветовой палитры) были созданы 3 концепции в разных стилях:

1. Сдержанная премиальность. Использован белый фон, главным выбран глубокий приглушенный синий, акцент - градиенты золотых оттенков. Карточки преимуществ разной высоты, зигзагообразные паттерны - дают отсылку к продукту. Карточки и кнопки - без скруглений. Много воздуха.
2. Приглушенный теплый. Использован мягкий бенто-стиль: небольшие скругления карточек, серо-бежево-золотистая гамма создает ощущение уюта, при этом вниманием пользователя легко управлять с помощью цвета. На первом экране использованы плашки с эффектом satin glass - трендовым эффектом в дизайне второй половины 2025 года - которые помогают сделать текст более читаемым, при этом не перекрыть фон - фотографию выполненного проекта.
3. Этот вариант был создан после ознакомления заказчика с первыми двумя вариантами - необходим был еще один вариант, с другими цветами, сочетающий преимущества 1 и 2 варианта. Поэтому был выбраны другие цвета - приглушенный темно-зеленый, и более контрастный приглушенный бронзовый. В дополнение к ним - песочный и темный бежевый цвета для карточек и подложек. Было изменено меню - контакты стали более заметными. Стиль бенто был сохранен, но добавлены привлекающие внимание необычные карточки с внутренним углом, делающие дизайн необычным.
4. Это дополнительный вариант в более "плоском" стиле, с рамочками для карточек, не похожий на остальные стили, более журнальный и более простой на первый взгляд. Основной фокус - только на контенте - текстах, фото, видео. Кнопки контрастные черные - легко заметны.

Заказчиком была выбрана 3 концепция - теплая, но структурированная, понятная и позволяющая с помощью цветовых акцентов управлять вниманием посетителей.
На основе выбранной и утвержденной дизайн-концепции был создан дизайн-макет оставшихся блоков Главной страницы, разделов, страницы товара, страницы 404, а так же квиза в десктопной версии.
Верстка макета сделана на автолейаутах, что в дальнейшем позволило сократить сроки создания адаптивов и полностью сохранить функционал десктопной версии для мобильных и планшетов, поскольку ЦА сайта посещает сайт с разных типов устройств (десктоп и мобильные примерно в равной мере).

После утверждения десктопной версии были созданы адаптивы для планшета (ширина экрана 800 px) и смартфонов (ширина экрана 320 px).

Перед передачей макета верстальщику был небольшой ui-kit с основными важными данными: размерами шрифтов на разных типах устройств, цветовой палитрой, компонентами кнопок и их размерами для адаптивов, разных состояний полей ввода, чекбоксов и галочек.