Логотип и интернет-магазин «Kosmetik-Hit»

О проекте

Kosmetik-Hit — интернет-магазин профессиональной косметики для женщин. В каталоге представлены средства известных брендов для ухода за лицом, телом и волосами по доступным ценам.

Ассортимент магазина включает большое количество товаров, которые отличаются назначением, составом, брендом, типом кожи и другими характеристиками. Поэтому одной из ключевых задач проекта было создать удобную структуру каталога и помочь пользователям быстро находить подходящие средства.

Задача

Перед командой Iris Digital стояли следующие задачи:

• разработать интернет-магазин профессиональной косметики;
• создать понятную структуру каталога;
• обеспечить удобный поиск товаров по характеристикам;
• разработать современный адаптивный дизайн;
• сформировать визуальный стиль бренда;
• подготовить логотип и рекламные материалы;
• реализовать сайт на платформе UMI.CMS;
• обеспечить корректную работу магазина на компьютерах, планшетах и смартфонах.

Концепция проекта

При разработке сайта важно было совместить несколько составляющих:

• широкий ассортимент косметики;
• большое количество характеристик товаров;
• визуальную привлекательность;
• удобство выбора;
• понятную навигацию;
• возможность дальнейшего расширения каталога.

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

Разработка фирменного стиля

В рамках проекта была разработана базовая визуальная система Kosmetik-Hit.

Логотип

Команда создала логотип интернет-магазина и подготовила несколько вариантов его использования. Это позволило подобрать оптимальное решение для различных форматов — от сайта и социальных сетей до печатных материалов.

При разработке учитывались:

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

Фирменные и рекламные материалы

Помимо логотипа, были разработаны дополнительные элементы коммуникации:

• фирменные визитки;

• листовки;

• баннеры для сайта;

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

Проектирование интернет-магазина

На этапе проектирования была продумана структура основных страниц и пользовательские сценарии.

Пользователь должен был иметь возможность:

1. перейти в нужную категорию косметики;
2. выбрать подходящие параметры товара;
3. быстро отфильтровать ассортимент;
4. открыть карточку продукта;
5. изучить характеристики и описание;
6. добавить товар в корзину;
7. оформить заказ.

Особое внимание уделили размещению каталога, навигации и блоков с товарами. Интерфейс проектировался таким образом, чтобы пользователь мог быстро перейти от общего ассортимента к конкретному продукту.

Структура сайта

В рамках проекта были разработаны макеты основных типов страниц.

Главная страница знакомит посетителя с магазином и помогает перейти к ключевым разделам каталога.

Также были разработаны внутренние страницы сайта, включая:

• страницы категорий;
• карточки товаров;
• информационные разделы;
• страницы брендов;
• корзину;
• оформление заказа;
• служебные и контактные страницы.

Все шаблоны создавались с учётом единого визуального стиля интернет-магазина.

Умный фильтр товаров

Одной из ключевых функциональных задач проекта стала реализация расширенного фильтра каталога.

Для этого был разработан «умный фильтр» — фасетный поиск в UMI.CMS на базе Sphinx.

Фильтрация позволяет пользователю подбирать товары по заданным характеристикам. В зависимости от структуры каталога это могут быть:

• бренд;
• категория;
• тип продукта;
• назначение;
• тип кожи или волос;
• состав;
• объём;
• ценовой диапазон;
• другие параметры товара.

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

Использование Sphinx позволило создать более производительный механизм поиска и фильтрации, адаптированный под работу с каталогом интернет-магазина.

Адаптивный дизайн и верстка

Сайт разрабатывался с учётом использования на разных устройствах. Были подготовлены:

• дизайн главной страницы;
• макеты внутренних страниц;
• шаблоны каталога;
• страницы карточек товаров;
• адаптивная версия интерфейса;
• мобильные состояния основных элементов.

Адаптивная верстка обеспечивает корректное отображение сайта на:

• персональных компьютерах;
• ноутбуках;
• планшетах;
• смартфонах.

При адаптации учитывались особенности мобильного взаимодействия:

• перестройка блоков на небольших экранах;
• удобное открытие категорий и фильтров;
• корректное отображение карточек товаров;
• упрощённая навигация;
• удобное взаимодействие с кнопками и формами;
• сохранение читаемости описаний и характеристик.

Интеграция с UMI.CMS

После проектирования и подготовки дизайна команда выполнила монтаж дизайна с платформой UMI.CMS.

На этапе интеграции были реализованы:

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

Использование UMI.CMS позволяет владельцам магазина самостоятельно управлять содержимым сайта: добавлять товары, редактировать описания, обновлять цены, публиковать баннеры и изменять информацию в каталоге.

Результат

В результате был создан интернет-магазин профессиональной косметики Kosmetik-Hit, включающий:

• современный адаптивный дизайн;
• разработанный логотип;
• варианты фирменного оформления;
• визитки, листовки и баннеры;
• главную страницу и внутренние разделы;
• структуру каталога косметики;
• карточки товаров;
• удобную систему фильтрации;
• фасетный поиск на базе Sphinx;
• интеграцию с UMI.CMS;
• адаптивную верстку для разных устройств.

Проект объединил визуальную составляющую бренда, функциональность интернет-магазина и удобную навигацию по большому ассортименту косметических средств.