Блог дизайнера · Дизайн

Реальный кейс: сайт цветочного магазина, который владелица собрала сама на готовых блоках. Показываю, какие ошибки дизайна я нашёл и как исправил их примерно за 15 часов: сетка, мобильная версия, меню, форма, каталог, футер и SEO.

Ко мне обратилась владелица цветочного магазина из Москвы. Сайт она собрала сама на готовых блоках Tilda, и формально он работал. Договорились так: контент я не меняю, а делаю аккуратно, понятно и удобно, плюс SEO-оптимизация и видеоинструкция по ведению сайта.

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

Винить человека без подготовки за такие ошибки не стоит — это типичный результат, когда сайт делают в спешке.

Первый экран до правок: разные значки, обрезанное фото, тяжёлые кнопки

В первом Zero Block элементы, включая тексты, были свёрстаны так, что на некоторых экранах уезжали за пределы блока и становились невидимыми.

Так как в интернет-магазине готовые блоки соседствуют с Zero Block, я перевёл всё в стандартную 12-колоночную сетку Tilda с шириной основной части 1160 px. Девушку с цветами оставил: она хорошо передаёт суть магазина. Значки заменил на простые современные из Flaticon, раздел Interface Icons.

Новая композиция первого экрана в сетке 1160 px

Для телефона я включил autoscale первого Zero Block до размеров экрана: так он ведёт себя похоже на готовые блоки Tilda. Если собирать мобильную вёрстку в ширину 300 px, Zero Block по ширине совпадёт с готовыми блоками сверху и снизу.

Внизу я добавил тёмно-серый шейп: девушка теперь выглядывает из-за него, а не торчит посреди блока с обрезанным низом. На шейп поставил кнопки.

С autoscale можно смело брать мелкий шрифт. Полотно в 320 px на обычном iPhone растягивается примерно до 1170 физических пикселей, на Pro Max — до 1300. Поэтому шрифты в 10–12 px выглядят отлично.

Мобильная вёрстка: шейп под фото и кнопки на нём

После публикации на телефоне меня ждало меню высотой минимум 100 px: нефункциональное и занимающее много места. Его я заменил на бургер из блока ME403 и аккуратно поставил в угол экрана. Этот блок я помню с первых лет работы в Tilda, и он ни разу не подвёл.

Десктопное меню оставил готовым блоком, но привёл в порядок. Фон под логотипом отличался по цвету от фона меню — я сделал фон меню таким же, как у логотипа. А чтобы светлое меню не сливалось со светлым сайтом, добавил лёгкую тень.

Меню в цвет логотипа и лёгкая тень, чтобы отделить его от контента

Блок с разделами каталога на главной я оставил готовым: скруглил края и удалил заголовок. Сам заголовок сделал отдельным Zero Block.

Такой подход даёт больше свободы на мобильных: расстояние от заголовка до контента в готовом блоке поменять нельзя, а в Zero Block вы рулите им как хотите.

Разделы каталога: готовый блок без заголовка + заголовок в Zero Block

Слишком простую форму люди просто пролистывают. Нужно было сделать просто и эффектно, поэтому я нашёл на стоках бесплатное видео с цветами и сжал его в DaVinci Resolve с ограничением битрейта до веса меньше 5 Мб. Такой файл можно загрузить прямо в Tilda и зациклить.

Сначала я хотел горизонтальную форму с затемнённым видео на фоне, но ролик оказался настолько хорошим, что его захотелось показать. Да и текст поверх видео читался бы тяжело. В итоге — вертикальная форма слева и видео сбоку. Блок ожил, на него приятно смотреть.

Вертикальная форма и зацикленное видео до 5 Мб

В футере был белый текст на розовом фоне — читать тяжело. Автоматическая проверка контрастности в Tilda такой футер не проходила. Я взял другой футер из готовых блоков и поменял цвета.

Попутно заметил: SSL-сертификат есть, а редиректа с HTTP на HTTPS нет. Включил в настройках за минуту.

Ссылки в футере, меню и плитке разделов поменял на ЧПУ с ключевыми словами и задал те же адреса самим страницам, чтобы сохранить ссылочную целостность. Все такие мелочи удобно сверять по чек-листу перед запуском сайта.

Автоматическая оценка контрастности в Tilda при выборе цвета

Каталог — одна из важнейших частей интернет-магазина, а здесь по клику на карточку товар сразу падал в корзину вместо того, чтобы открыть подробности. Назначения левой и правой кнопок были перепутаны.

Я поменял их местами: левая кнопка и клик по карточке теперь открывают подробную информацию о товаре. Кнопку «Купить» перенёс направо, выделил цветом и добавил значок корзины, чтобы её назначение было понятно без чтения. Всем кнопкам на сайте задал одинаковые скругления.

Настроив каталог, скопировал его во все разделы и в каждом указал свой раздел как источник товаров. Подробнее про возможности магазина — в статье о плюсах и минусах магазина на Tilda.

Слева — «Подробнее», справа — цветная кнопка покупки со значком корзины

У страницы контактов вообще не было заголовка. Я собрал для неё Zero Block: слева контактные данные, справа Яндекс Карта из конструктора карт. Сделал мобильную версию, и у страницы наконец появился H1.

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

Новый блок контактов: данные слева, карта справа

Я собрал небольшое семантическое ядро через Wordstat и поделил запросы на высоко-, средне- и низкочастотные. Затем открыл карту и посмотрел, что рядом с магазином: Москва огромная, и из Конькова в центр за букетом никто не поедет.

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

По таблице заполнил заголовки, описания и по 2–3 словосочетания в keywords: Яндекс в своих рекомендациях по-прежнему указывает этот метатег. Использованные ключи помечал жирным.

Предварительная таблица запросов: частотность и привязка к району

Заголовок, описание и ключевые слова в настройках страницы

Отдельные страницы товаров стали частью SEO-стратегии. Причин три:

1. Пустой sitemap. У Tilda два sitemap: для каталога и для страниц. Даже с галочкой «отдельная страница товара» sitemap каталога иногда оказывается пустым — и на этом сайте было именно так.
2. Чистый адрес. У своих страниц нет tproduct и числового мусора в URL.
3. Свобода наполнения. У разных цветов разный уход и разные подборки «С этим товаром покупают» — всё это можно настроить точечно.

Каждой странице я задал свой заголовок, описание и ссылку, добавил блок «Вместе с заказом вы получаете» и плитку «Вас также может заинтересовать». Для подборок создал скрытые из поиска разделы по 4–8 товаров. Дольше, но эффект заметно лучше.

Кастомная карточка товара, связанная с каталогом

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

В конце добавил виджет мессенджеров на десктопе и телефоне, чтобы можно было сразу написать или позвонить. На мобильных, где навигация сложнее, это особенно важно. И записал владелице инструкцию: как добавлять товары и самой размножать кастомные карточки.

Другие мои проекты можно посмотреть в портфолио.

Корзина в новых цветах со скруглёнными полями

Виджет с кнопками мессенджеров и звонка

Какие ошибки дизайна чаще всего встречаются на сайтах на Tilda?
Элементы вне сетки, значки из разных наборов, низкий контраст текста, громоздкое мобильное меню и нелогичные кнопки в каталоге.

Можно ли исправить дизайн, не меняя контент?
Да. В этом кейсе тексты и фото остались прежними — изменились сетка, цвета, кнопки и структура блоков.

Нужно ли заполнять keywords в Tilda?
Для Яндекса — да, он упоминает этот метатег в своих рекомендациях. Достаточно 2–3 словосочетаний на страницу.

Нужны ли длинные SEO-тексты?
Нет. Простыни текста с кучей ключей портят опыт пользователя, а Яндекс прямо пишет, что так делать нельзя. Лучше короткий SEO-подзаголовок вверху страницы.

Зачем делать отдельные страницы товаров?
Чистый URL, свои заголовки и описания, гарантированное попадание в sitemap и свобода в наполнении карточки.

Хотите научиться делать так же? Начните с инструкции по Потокам 2.0 или с моего курса по Tilda.

Хотите делать такие сайты сами?

Базу Tilda, Zero Block и автолейаут можно освоить на моём курсе. А если времени нет — сделаю сайт за вас.