О проекте
«DonnaShtora» — салон штор в Москве, который более 15 лет занимается текстильным оформлением окон и интерьеров. Компания предоставляет полный комплекс услуг: от разработки дизайна штор до их изготовления и установки.
Задача
Модернизировать сайт салона:
- обновить визуальный стиль компании;
- разработать новый логотип;
- создать современный адаптивный дизайн;
- улучшить структуру и навигацию;
- добавить необходимый функционал;
- перенести сайт с MODX на UMI.CMS.
Этапы работы
Разработка логотипа
Сначала мы подготовили несколько концепций логотипа с разными вариантами шрифтов, цветовых решений и графических элементов.
После обсуждения с заказчиком выбрали основной цвет и шрифт, а затем протестировали различные иконки и композиции. Дополнительно подготовили несколько вариантов начертания логотипа:
- основной цветной вариант;
- инвертированная версия;
- чёрно-белая версия.
В результате был утверждён финальный вариант логотипа, который стал основой для дальнейшего обновления фирменного стиля и дизайна сайта.
Анализ существующего сайта
На момент начала работы сайт работал на системе управления MODX и нуждался в визуальном и функциональном обновлении.
Мы проанализировали текущую структуру проекта и определили основные направления модернизации:
- переработка главной страницы;
- улучшение пользовательской навигации;
- обновление визуальной подачи услуг;
- адаптация сайта под мобильные устройства;
- добавление новых интерактивных элементов.
Создание прототипа
На первом этапе проектирования разработали прототип сайта с основными блоками будущего проекта:
- презентационный слайдер;
- разделы «Шторы», «Услуги» и «Карнизы»;
- блок с преимуществами компании;
- фотогалерея;
- внутреннее меню;
- формы обратной связи;
- всплывающее окно «Вызов дизайнера».
Прототип позволил согласовать структуру и расположение ключевых элементов до начала детальной разработки дизайна.
Разработка визуальной концепции
На основе утверждённого прототипа подготовили несколько вариантов дизайна с разными способами использования фирменных цветов.
По просьбе заказчика сделали оформление более контрастным и строгим:
- отказались от излишней «карамельности»;
- убрали декоративные волнообразные элементы;
- усилили контраст между фоном, текстом и акцентными блоками;
- сделали визуальный стиль более современным и сдержанным.
В итоге остановились на варианте с розовой шапкой сайта.
Подбор изображений и оформление разделов
Для главного слайдера протестировали более 20 изображений интерьеров: гостиных, кухонь и спален.
После выбора финальных вариантов:
- заменили изображения в тематических блоках;
- убрали декоративные рюши;
- подобрали более подходящие фотографии для разделов «Шторы», «Услуги» и «Карнизы»;
- разработали выпадающее подменю;
- подготовили варианты внутренних баннеров;
- проработали оформление внутренних страниц.
Для страницы с преимуществами компании разработали девять тематических иконок.
Проработка навигации и интерфейсных элементов
В процессе работы протестировали несколько вариантов левого внутреннего меню и выбрали наиболее удобный для пользователя.
Также разработали несколько концепций всплывающего окна «Вызов дизайнера». В финальную версию вошёл наиболее понятный и лаконичный вариант формы.
Адаптивная вёрстка и разработка
После утверждения дизайна выполнили:
- адаптивную вёрстку для различных разрешений экранов;
- HTML5/CSS3-анимацию;
- интеграцию свёрстанного дизайна с UMI.CMS;
- разработку дополнительного функционала;
- реализацию кнопки «Показать ещё» для модуля «Фотогалерея».
Тестирование
Проверили корректность отображения сайта на мобильных устройствах и оценили удобство его использования с помощью сервиса Google.
Результат
В результате модернизации для салона «DonnaShtora» был создан современный адаптивный сайт с обновлённым фирменным стилем и улучшенной структурой
Мы разработали новый логотип, переработали визуальную концепцию сайта, обновили навигацию, добавили интерактивные элементы и интегрировали проект с платформой UMI.CMS.
