1. Начните с фотографий, а не с галереи дизайнов
Дизайн витрины в BotLaunch определяет три вещи: палитру, шрифты и расположение элементов. Он не определяет, какие фотографии вы используете, а именно они занимают большую часть экрана магазина. Поэтому сначала посмотрите на свои снимки.
Они светлые, на белом фоне, или тёмные, с особым настроением? Лаконичные или с множеством деталей? Насыщенный цветной фон будет спорить с фотографиями товаров в обстановке, где и так много деталей. Для простых предметных снимков на белом фоне можно выбрать более смелый дизайн: он придаст странице характер, которого не хватает фотографиям.
Прежде чем открыть галерею, положите рядом шесть настоящих фотографий своих товаров. Вы сразу отсеете половину дизайнов и перестанете выбирать оформление только потому, что вам понравились товары в примере.
2. Сначала выберите нишу, затем настроение
В галерее более 100 готовых дизайнов для более чем 30 ниш: мода, кроссовки, косметика, украшения, цветы, выпечка, зоотовары, декор для дома, электроника и книги. Начните со своей ниши. Затем загляните в соседние: например, производителю свечей может лучше подойти дизайн из категории декора для дома или подарков.
Внутри ниши выбирайте по настроению. Сдержанное или яркое. Тёплое или холодное. Оставьте три варианта, не больше. Длинный список лишь откладывает решение.
Если вы начинаете с нуля, AI-конструктор магазина подберёт дизайн по описанию магазина в одном предложении. Считайте его выбор первым вариантом, который можно свободно менять.
3. Прежде всего настройте палитру
Цвет сильнее других настроек меняет впечатление от магазина и требует меньше всего усилий. На выбор есть 24 готовые палитры. Попробуйте несколько, прежде чем менять шрифты или расположение элементов.
- Возьмите акцентный цвет из того, что у вас уже есть: упаковки, логотипа или ленты на коробках.
- Текст должен легко читаться. Держите телефон на расстоянии вытянутой руки и проверьте, можете ли вы по-прежнему прочитать цену.
- Не подбирайте цвет страницы под цвет товара. Красные сумки на красном фоне потеряются.
- Одного акцента достаточно. Если выделено всё, не выделено ничего.
4. Проверяйте шрифты на настоящих названиях товаров
На выбор есть 24 шрифта. Не оценивайте их по тексту в образце. Посмотрите, как выглядят самое длинное название вашего товара и настоящая цена.
Не занимает ли длинное название три строки в сетке товаров? Хорошо ли выглядят буквы вашего языка? Можно ли с первого взгляда прочитать цену? Декоративный шрифт подойдёт для названия магазина и заголовков. Для описаний и цен нужен простой.
Сначала поменяйте шрифт заголовков и посмотрите на магазин. Затем поменяйте шрифт основного текста. Если заменить оба сразу и страница станет выглядеть хуже, вы не поймёте, какой из них стал причиной.
5. Оцените дизайн на телефоне, внутри Telegram
Магазин работает как Mini App, открывается прямо в чате, и покупатели пользуются им, держа телефон одной рукой. Дизайн, который при выборе казался просторным, на маленьком экране может выглядеть тесным. Откройте магазин в Telegram на своём телефоне и проверьте четыре вещи.
- Первый экран. Понятно ли без прокрутки, что вы продаёте?
- Сетка товаров. Сколько товаров видно одновременно и подходит ли это вашему каталогу?
- Кнопки. Можно ли нажать кнопку добавления в корзину большим пальцем, не задев ничего рядом?
- Освещение. Посмотрите на магазин на улице при дневном свете, а затем вечером, снизив яркость экрана.
Затем дайте телефон человеку, который ещё не видел магазин, и попросите найти конкретный товар. Наблюдайте, где он замешкается. Ничего не подсказывайте.
6. Меняйте по одному параметру и вовремя остановитесь
После применения дизайна всё по-прежнему можно редактировать. Но эта свобода несёт и риск. Измените палитру и посмотрите на результат. Измените шрифт и снова посмотрите. Записывайте, что меняли, чтобы можно было вернуться к прежнему варианту.
Научитесь отличать проблемы дизайна от проблем содержимого. Если товарам тесно или баннер занимает весь первый экран, дело в расположении элементов. Другая компоновка это исправит. Размытая фотография, непонятное название товара и отсутствующая цена относятся к содержимому. Никакой дизайн этого не исправит.
Установите себе срок: один вечер на выбор и настройку, затем запуск. Первые вопросы настоящих покупателей расскажут о вашем магазине больше, чем ещё один час просмотра вариантов. Если три человека спрашивают об одном и том же, значит, на странице не хватает пояснения. Добавить его полезнее, чем выбрать новую палитру.