Многостраничный сайт бренда натуральной косметики. Задача — объединить яркую сказочную атмосферу со структурированным, удобным интерфейсом и полноценной адаптивностью под все устройства.
Источники вдохновения
Для визуальной концепции обратилась к славянскому фольклору — лес, травы, деревянная хижина и магические книги стали основой образа. Идея заключалась в том, чтобы пользователь не просто покупал косметику, а «проживал» короткое путешествие в мир лесной магии — начиная с первого экрана и заканчивая карточкой товара.
Структура и вайрфреймы
Построила структуру из 4 вайрфреймов: главная страница с тремя тематическими разделами (о хижине, здоровье, красота, молодость), каталог, карточка товара, корзина, оформление заказа. Уже на этапе вайрфрейма заложила связку «раздел → подкатегория → карточка → корзина», чтобы пользователь не терял ощущение целостного «путешествия» при переходе между страницами
Дизайн-система
Собрала палитру и типографику, которые работают на атмосферу: глубокие оттенки травы, болота и коры дерева — для основного фона, светлые акценты — блик на воде, капли росы, пятнышки мухомора — для деталей. В типографике сочетала антикву для читаемости крупных текстовых блоков с декоративным шрифтом для карточек товаров и акцентов, чтобы визуально считывалась сказочная тема без потери удобства чтения.
Отдельно с нуля отрисовала логотип бренда в Illustrator — он должен был считываться и как элемент сказочной айдентики, и как узнаваемый знак на фоне тёмной палитры сайта, поэтому проверяла его на контрастность сразу на разных фонах интерфейса, а не только на белом.
Адаптивные версии
Спроектировала 4 версии интерфейса под разные устройства — не просто «сжала» десктоп, а пересобрала навигацию под каждый формат: на планшете сохранила визуальную атмосферу в двух ориентациях (альбомная и портретная), в мобильной версии сделала акцент на упрощенную навигацию через бургер-меню и укрупненные карточки для удобного чтения с телефона.
Финальные экраны
Каждый из трех тематических разделов (лечебные травы, красота, молодость) оформлен как отдельная витрина с карточками товара которые содержат фото, название, короткое описание и цену, а также есть возможность добавить в корзину без перехода в карточку. Сама карточка товара при этом раскрывает больше деталей — дополнительные фото, состав, способ применения для тех, кто хочет подробнее изучить товар перед покупкой
Что получилось в итоге
Проект объединил визуальную атмосферу сказочного леса с современными UX/UI-решениями — понятной навигацией, структурированным каталогом и полной адаптивностью. Получился не просто красивый сайт, а последовательная система страниц, которая работает на узнаваемость бренда на каждом шаге пользователя.
Что бы сделала иначе: спроектировала визуальную концепцию и структуру, не проверив ее на реальном контенте. Например, длинные названия трав или описания составов могли не поместиться в карточки так аккуратно, как в макете с тестовым текстом. В следующий раз заложила бы проверку на пограничных случаях (самое длинное название, самое длинное описание) еще на этапе UI