В рамках проекта разработан сайт для бренда уходовой косметики Asante по африканским рецептурам
Созданы макеты всех ключевых экранов: главная, карточки товаров, каталог и блог. Проработана структура для удобного выбора и покупки, создан UI-kit, настроены адаптивные версии для всех устройств. Проект реализован в Figma и передан в разработку
Кейс Asante
Создание сайта-каталога для косметического бренда с концепцией Африки и натуральными ингредиентами. Здесь важно было не продавать напрямую, а рассказать историю бренда, подчеркнуть уникальные ингредиенты и визуально выделить коллекции. Покупка осуществляется через маркетплейсы, а сам сайт работает на узнаваемость и доверие
Цель проекта
Что было сделано:
Дизайн
Разработан визуальный стиль сайта, проработана типографика, цветовые решения, карточки товаров и UI Kit. Внедрены адаптивные версии и лёгкая анимация для акцентов
4
Прототипы
Созданы пользовательские сценарии и прототипы страниц: главная, коллекции, страница продукта, раздел «О компании», новости и контакты
3
Анализ рынка
Проведён анализ рынка косметики и ЦА. Выявлены сильные стороны конкурентов и сформулированы ключевые инсайты для позиционирования бренда
2
Анализ вводных
Изучены исходные данные бренда и его концепция. Определены задачи сайта как имиджевого каталога без функции прямых продаж
1
Прототипирование
Созданы интерактивные прототипы, на которых отработана будущая структура сайта. Были спроектированы ключевые пользовательские сценарии: просмотр каталога и коллекций, карточка товара, фильтры и раздел «О компании»
Этап позволил протестировать навигацию, убрать лишние шаги и убедиться, что интерфейс будет интуитивным и удобным для целевой аудитории ещё до перехода к дизайну.
Этап позволил протестировать навигацию, убрать лишние шаги и убедиться, что интерфейс будет интуитивным и удобным для целевой аудитории ещё до перехода к дизайну.
Материалы из брендбука и фотосессий стали главным источником вдохновения. На сайте использованы контрастные цвета, антиква в заголовках и выразительные фото, подчёркивающие африканскую концепцию
Концепция Африки
Главная страница
На главной странице представлена информация о компании, её ценностях и коллекциях с возможностью перехода на отдельные страницы
Дизайн строится на крупной типографике, выразительных фотографиях и лёгких анимациях, которые создают динамику и усиливают вовлечённость пользователя
Дизайн строится на крупной типографике, выразительных фотографиях и лёгких анимациях, которые создают динамику и усиливают вовлечённость пользователя
Каждая коллекция представлена на отдельной странице со своим цветовым акцентом и визуальной атмосферой, что подчёркивает её уникальность и усиливает восприятие бренда
Страница коллекций
Страница «О компании»
На странице собрана ключевая информация о бренде, его ценностях и философии. Используются крупные фото, выразительная типографика и анимации, чтобы передать атмосферу и подчеркнуть уникальность концепции
Здесь пользователь знакомится с историей компании и получает общее представление о её продуктах
Здесь пользователь знакомится с историей компании и получает общее представление о её продуктах
Мобильная версия разработана так, чтобы бренд выглядел одинаково ярко и выразительно на любом устройстве. Упор сделан на удобство: акцент на визуал, простая структура, лёгкая анимация при скролле. Всё это создаёт вовлекающий опыт и удерживает внимание пользователя
Мобильная версия сайта
Мобильная версия сайта
Страница товара
На странице товара собрана вся необходимая информация: от фото и видео до описания и состава. Для покупки реализован переход на маркетплейс
Другие страницы
Помимо основных разделов, в проект вошли страницы новостей и статей для регулярного обновления контента, а также блок «Контакты» с картой и удобными способами связи
