Плиссе декор

Дизайн корпоративного сайта. Шторы-гофре и москитные сетки-плиссе
Год разработки: 2025
Перейти на сайт
Цель: создать новый дизайн сайта для последующей верстки на CMS Wordpress в сотрудничестве с командой агентства SKAT.DESIGN

Задачи проекта

Предыдущий сайт клиента https://azbukadoma.ru/, был создан на платформе ucoz, и со временем перестал отвечать потребностям владельца компании. Кроме того, планировался ребрендинг.
Мои задач в этом проекты были следущие:
  1. Проанализировать ЦА клиента. Провести исследование сайтов конкурентов в этой нише. Выделить сильные и слабые стороны, чем схожи, чем выделяются на фоне конкурентов.
  2. Обобщить рекомендации, создать мудборд и подобрать референсы ( что подходит, что не подходит).
  3. Создать прототипы (с текстовым контентом) Главной страницы, разделов, страниц товара с учетом рекомендаций - порядок блоков, структура.
  4. Создать 2-3 варианта дизайн-концепции (с подбором шрифтов и цветовой палитры.
  5. На основе выбранной и утвержденной дизайн-концепции создать дизайн оставшихся блоков Главной страницы, разделов, страницы товара, страницы 404, квиза в десктопной версии
  6. Создать адаптивы готового дизайна для планшетов и мобильных устройств.
  7. Подготовить для верстальщика ui-kit по основным элементам.

Использованные инструменты

КАК БЫЛИ РЕШЕНЫ ЗАДАЧИ ПРОЕКТА:

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

    Проведено отдельное сравнительное исследование дизайна и юзабилити 10 сайтов конкурентов, в ходе которого удалось определить лучшие решения и типичные ошибки в нише, чтобы:
    • выделиться на фоне конкурентов;
    • предложить пользователям более удобный, информативный и доверительный сайт;
    • повысить конверсию в заявки за счёт грамотной структуры, визуальной иерархии и чётких путей взаимодействия;
    • избежать распространённых UX- и UI-упущений (например, скрытые контакты, отсутствие цен, слабая адаптация под мобильные устройства).
  • (02)
    Проведенный анализ конкурентной среды и ЦА позволил собрать «портрет идеального сайта» в нише:
    • информативный, но не перегруженный;
    • визуально современный, по возможности - с темной или светлой темой по выбору;
    • мобильный и быстрый;
    • с открытыми контактами и понятной ценой;
    • с акцентом на уникальные преимущества (антипыльца, моторизация и т.д.).
    Эта информация сможет послужить основой для проектирования нового сайта, который будет сильнее, удобнее и убедительнее, чем большинство конкурентов.

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

    Поскольку ранее проведенные исследования содержали множество рекомендаций, то в короткие сроки удалось структурировать текстовый контент Главной и всех необходимых страниц и создать прототипы в нужном размере фрейма и 12-колоночной сетке.
  • (04)
    На этапе создания дизайн-концепции (с подбором шрифтов и цветовой палитры) были созданы 3 концепции в разных стилях:
    1. Сдержанная премиальность. Использован белый фон, главным выбран глубокий приглушенный синий, акцент - градиенты золотых оттенков. Карточки преимуществ разной высоты, зигзагообразные паттерны - дают отсылку к продукту. Карточки и кнопки - без скруглений. Много воздуха.
    2. Приглушенный теплый. Использован мягкий бенто-стиль: небольшие скругления карточек, серо-бежево-золотистая гамма создает ощущение уюта, при этом вниманием пользователя легко управлять с помощью цвета. На первом экране использованы плашки с эффектом satin glass - трендовым эффектом в дизайне второй половины 2025 года - которые помогают сделать текст более читаемым, при этом не перекрыть фон - фотографию выполненного проекта.
    3. Этот вариант был создан после ознакомления заказчика с первыми двумя вариантами - необходим был еще один вариант, с другими цветами, сочетающий преимущества 1 и 2 варианта. Поэтому был выбраны другие цвета - приглушенный темно-зеленый, и более контрастный приглушенный бронзовый. В дополнение к ним - песочный и темный бежевый цвета.
Концепция 1
Концепция 1
Концепция 2
Концепция 2
Концепция 3
Концепция 3
Концепция 4
Концепция 4
  • (05)
    На основе выбранной и утвержденной дизайн-концепции создать дизайн оставшихся блоков Главной страницы, разделов, страницы товара, страницы 404, квиза в десктопной версии
  • (06)
    Создать адаптивы готового дизайна для планшетов и мобильных устройств.
  • (07)
    Подготовить для верстальщика ui-kit по основным элементам дизайна.
Photo by Oliver
Photo by Kolya
Photo by Jacob
Photo by Jacob
Photo by Leio
Особенности проекта

  • Корпоративный сайт создан преимущественно на zero-блоках.
  • Добавлены доработки кодом — модификации от Annex — плавный скролл, наложение блоков.
  • Лэндинги созданы преимущественно с использованием стандартных блоков, поскольку это облегчает создание новых страниц, редактирование существующих, снижает скорость загрузки на мобильных устройствах, ведь главное различие ЦА основного сайта и лэндингов в том, что на корпоративный сайт заходят чаще телефона, а на лэндинги — с мобильных устройств, а значит, и воспринимают контент по-разному.