Демо-сайт марки ухода «Состав»

Описание

Собственный проект, не клиентский заказ: концепция сайта для вымышленной марки ухода за кожей.

Задача, которую я себе поставила: сделать бьюти-сайт, который не похож ни на один бьюти-сайт. В категории продают обещание — «инновационный комплекс», «сияние», «активы». Покупатель при этом не может проверить ничего: проценты не публикуются, «отдушка» одним словом прячет до тридцати веществ, «натуральный» вообще не регулируется.

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

Это меняет всё устройство сайта. Если главный товар — прозрачность, то центральный экран не рекламный кадр, а таблица формулы. И тогда каждое дизайнерское решение проверяется одним вопросом: помогает оно человеку проверить нас или мешает.

Решение

Ядро страницы — таблица формулы №4 сыворотки «Будни». Восемь строк с долями до сотых: вода 76,2%, сквалан 8,0%, глицерин 6,0%, ниацинамид 5,0%, пантенол 3,0%, бета-глюкан 1,0%, аллантоин 0,5%, токоферол 0,3%. Сумма всегда сходится в 100. Рядом с каждой строкой — что вещество делает и откуда взялось, обычным человеческим языком.

Сразу под таблицей — алый блок «Чего здесь нет и почему»: отдушка, эфирные масла, денатурированный спирт, красители, SLS/SLES, микропластик, каждый пункт с причиной отказа. Это редкий для категории ход: обычно сайт перечисляет достоинства, а здесь отдельная площадь отдана отсутствиям.

Каталог построен на номерах вместо названий: №1 гель «Вода», №4 сыворотка «Будни», №7 крем «Плотно», №9 кислоты «Ночь», №12 SPF «День». Название — вкусовщина, номер — место в схеме ухода, и по нему видно, что с чем сочетается.

Диагностика подана не как «определите свой тип раз и навсегда», а как пять состояний на сегодня: сухая, жирная, комбинированная, чувствительная, обезвоженная — с пометкой, что состояние меняется от воды, отопления, сна и возраста. Подбор — анкета на двенадцать вопросов, на выходе схема с временем нанесения и честной пометкой, если какой-то шаг человеку не нужен. Отдельно проговорено: если по ответам видно, что нужен врач, анкета так и скажет и не предложит ничего купить.

Отзывы устроены так же прямо: фото публикуются как есть — свет, поры, без фильтра, с отметкой срока от нуля до ста пятидесяти дней, и в выборке оставлены критичные («минус балл за срок доставки»). Замыкает страницу словарь из шести слов, из-за которых обычно переплачивают, включая разбор, почему надпись «без парабенов» ничего не говорит о качестве.

Типографика и палитра работают на ту же мысль: электрический синий
#1A24E8, алый
#FF3B21, жёлтый
#FDC300 на бумажном
#E6E7E1 — цвет лабораторной этикетки, а не спа-салона. Проценты и служебные подписи набраны моноширинным, чтобы колонки читались как документ. Шрифты Geologica, Commissioner и Martian Mono вшиты в файл.

Честно про ограничение: это статический макет, JS в нём нет. Анкета и фильтры отзывов нарисованы в одном состоянии, а не работают. Показываю дизайн-решение, а не прототип.

Результат

Получилась связная концепция бренда, а не набор экранов: одна позиция — «продаём таблицу» — прошла через структуру, каталог, диагностику, отзывы и словарь, и в каждом блоке видно, какое решение она диктует.

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

Подход переносится на любую категорию, где покупатель не может проверить продавца: БАДы, корма, стройматериалы, бытовая химия, медицинские услуги.