Кейс · сайт
Одностраничник для производителя сыродавленных масел, микрозелени и соков прямого отжима. Шесть продуктовых линеек, шесть рецептов и заказ через Телеграм-бот. Порядок блоков и тексты согласованы на вайрфрейме, дизайн собран уже по готовой структуре.
Green Power делает шесть разных линеек: сыродавленные масла, микрозелень, соки прямого отжима, соки WheatGrass, ореховую пасту и муку без глютена. Половину из них покупателю сначала надо объяснить: что такое микрозелень и витграсс, знают не все.
Продавать шесть линеек через многостраничный каталог смысла не было — ассортимент помещается на одну страницу, а заказ идет в Телеграм-бот и в точки выдачи, а не в корзину.
Рассказ о незнакомом продукте держится на тексте, а не на картинке. Формулировки и порядок блоков надо было согласовать до того, как в макет попадут фотографии.
Фирменный стиль у компании уже был — логотип, палитра и гайдбук сделаны до сайта. Страница должна была продолжать этот стиль, а не начинать новый.
Вайрфрейм нарисован в том же фрейме, что дизайн, и тексты в нем уже финальные — не «Lorem ipsum», а те же формулировки, что ушли в верстку. Поэтому спорные места правились на схеме, где переставить абзац стоит минуту, а не в готовом макете с фотографиями продукта.
Шесть карточек в два ряда, у каждой одинаковый набор: фотография продукта, плашка с ассортиментом («10 видов», «30 вкусов»), два-три предложения о том, что это и чем полезно, и кнопка заказа. Линейки сравниваются в одном экране, а не в переходах между разделами каталога.
Шесть рецептов — детокс-бустер с витграссом, шарики «Сила ореха», смузи-боул, салат с киноа, ореховое молоко, чай «Иммунный щит». Каждый показывает, что с продуктом делать на кухне. Для микрозелени и витграсса это работает лучше описания состава: покупатель видит готовое блюдо, а не незнакомое сырье.
Заказ идет в Телеграм-бот, и в блоке заказа он показан скриншотами: каталог, карточка товара, история заказов. Покупатель видит, что будет после кнопки, и не решает вслепую, придется ли ему регистрироваться.
Похожая задача? Напишите в Telegram, отвечу за пару часов.
Вайрфрейм нарисован в том же фрейме, что дизайн, и тексты в нем уже финальные, поэтому пары сходятся блок в блок. Слева вайрфрейм, справа готовый макет.
На схеме проверяли последовательность: название, обещание, подзаголовок и одна кнопка слева, картинка справа. В дизайне место под картинку заняла композиция из масел, соков и фруктов, а фон стал салатовым — порядок не поменялся.
Два ряда по три карточки, в каждой одно и то же: место под фотографию, плашка с ассортиментом, описание и кнопка заказа. Тексты про микрозелень и витграсс написаны еще на схеме — в дизайне к ним добавились только фотографии продукта.
Преимущества и технологии производства на схеме стоят двумя отдельными блоками. В дизайне они остались на своих местах, но их прошила желтая лента, а под технологии ушла салатовая подложка — два блока читаются как один рассказ о качестве.
На схеме на месте картинки стоит серый прямоугольник: сначала договорились, что в блоке будет одно изображение и одна кнопка. В дизайне его занял коллаж экранов бота — каталог, карточка товара, корзина с итогом и история заказов.
Green Power делает шесть линеек, и половину покупателю сначала нужно объяснить: что такое микрозелень и витграсс, знают не все. Заказ идет в Телеграм-бот и в точки выдачи, поэтому каталог с корзиной ассортименту не нужен.
Шесть линеек стоят на одной странице одинаковыми карточками — покупатель сравнивает их, не переходя между разделами.
Тексты и порядок блоков были согласованы до дизайна, поэтому правки шли по схемам, а не по готовым макетам с фотографиями.
Незнакомые продукты объяснены дважды: карточка отвечает, что это, а блок рецептов — что с этим делать.
Страница продолжает фирменный стиль: темно-зеленый подвала и салатовый первого экрана — те же Pantone 5605 C и 2301 C из гайдбука, а знак «Произведено в Приморье» стоит в блоке «О нас». Желтый добавлен на сайте как акцент для кнопок и ленты.
Двенадцать блоков в порядке прокрутки: от первого экрана до подвала.
Нажмите на изображение, чтобы открыть его во весь экран. Работают стрелки, клавиши ← → и миниатюры.
Расскажите, что продаете и чего покупатель про это не знает. Соберу структуру и тексты на вайрфрейме, а дизайн нарисую уже по согласованной схеме.
