Кейс · сайт
Дизайн сайта оптового поставщика китайской косметики из Владивостока и сборка на WordPress. Девять страниц по прототипам заказчика: главная из девяти блоков, пять страниц брендов на одном шаблоне, условия поставки и контакты. Сайт запущен.
Оптовику нужен не покупатель, а перепродавец. Человек на странице решает не «нравится ли мне крем», а «сколько я на этом заработаю». Ответ на этот вопрос должен стоять в макете так же крупно, как заголовок.
Китайская косметика продается с репутацией дешевого товара. Сертификаты, товаросопроводительные документы и русские стикеры на упаковке нужно показать раньше, чем цену, иначе цена читается как подтверждение опасений.
Пять брендов — BioAqua, Rorec, Laikou, One Spring, Images — устроены на сайте одинаково: описание производителя, хиты продаж, расчет выгоды. Рисовать каждому свой дизайн незачем, но и пятью одинаковыми серыми страницами они быть не должны.
Заказчик прислал десять страниц серых схем: порядок блоков, тексты, подписи к кнопкам. Структуру не пересобирали — дизайн лег на готовую последовательность. Поэтому работа шла сразу с подачей: чем показать блок и чем его отделить от соседнего.
В прототипе главной такого блока не было. В дизайне появился разбор на конкретном товаре: очищающая пузырьковая маска BioAqua стоит 446 рублей в рознице и 141 рубль по оптовому прайсу — выгода 216%. Рядом лежат скриншот карточки на Wildberries и строка из прайс-листа, чтобы цифру можно было проверить, а не поверить ей.
Страница бренда идет одной последовательностью: первый экран с продукцией, описание производителя, хиты продаж, расчет выгоды, документы, условия поставки и форма. От бренда к бренду меняются фотографии, текст о производителе и список хитов. У BioAqua добавлен блок «Кому подойдет», у остальных четырех набор блоков совпадает.
Сайт держится на белом, сером и одном красном. Собственный цвет появляется там, где речь идет о бренде: в блоке «Узнайте больше о брендах» каждая карточка залита фирменным цветом — синим у BioAqua, золотым у Rorec, розовым у Laikou, красным у One Spring, песочным у Images. В прототипе это были пять белых полос на сером фоне.
Похожая задача? Напишите в Telegram, отвечу за пару часов.
Порядок блоков и тексты пришли от заказчика, поэтому в дизайне менялась подача, а не структура. Слева прототип, справа готовый макет.
На схеме это серая плашка: заголовок, кнопка «Запросить прайс лист» и названия брендов строкой. В дизайне правую половину заняла фотография под диагональным срезом, названия брендов встали в рамку собственными логотипами, а четыре преимущества получили иконки.
В прототипе это пять белых прямоугольников с текстом. В дизайне под каждым лежит затемненная фотография, а карточка «Интернет магазины» залита красным — одна из пяти выделена, остальные приглушены.
Четыре условия стояли на сером фоне схемы в две строки. В дизайне они выстроились в один ряд с иконками в кругах, а отсылка к разделу «Доставка и оплата» из строки текста с кнопкой стала красной плашкой.
В схеме пять брендов идут пятью полосами в шахматном порядке. В дизайне это сетка два — два — один: каждая карточка залита фирменным цветом бренда, на ней логотип и фотография упаковки.
Посетитель у оптовика решает не то, нравится ли ему крем, а сколько он на нем заработает. При этом китайская косметика продается с репутацией дешевого товара, поэтому сертификаты и документы должны стоять раньше цены.
Девять страниц дизайна собраны по десяти страницам прототипа. Блога среди них нет: в прототипе на этой странице стояли только заголовок и пустое поле.
Страницу нового бренда собирают из готовых блоков — меняются фотографии продукции, описание производителя и список хитов продаж.
Вопрос «сколько я заработаю» закрыт и на главной, и на каждой странице бренда: расчетом на конкретном товаре, а не обещанием наценки в 100–300%.
Сертификаты, документы, русские стикеры и условия поставки стоят выше формы заявки. Проверять поставщика на стороне не нужно.
Девять блоков в порядке прокрутки: от первого экрана до подвала.
Нажмите на изображение, чтобы открыть его во весь экран. Работают стрелки, клавиши ← → и миниатюры.
Последовательность блоков одна: первый экран с продукцией, описание производителя, хиты продаж, расчет выгоды, документы и форма. У BioAqua добавлен блок «Кому подойдет», у остальных четырех набор блоков совпадает.
Нажмите на изображение, чтобы открыть его во весь экран. Работают стрелки, клавиши ← → и миниатюры.
Отдельная страница для организаторов совместных покупок, условия оплаты и доставки по России и короткая страница контактов с реквизитами.
Нажмите на изображение, чтобы открыть его во весь экран. Работают стрелки, клавиши ← → и миниатюры.
Десять серых схем с готовыми текстами и порядком блоков. Здесь девять: страница блога в прототипе пустая, кроме заголовка, и дизайна для нее нет.
Нажмите на изображение, чтобы открыть его во весь экран. Работают стрелки, клавиши ← → и миниатюры.
Расскажите, что продаете и кому перепродают дальше. Посмотрю, из каких блоков собрать страницу и чем закрыть вопрос о заработке покупателя.
