Блог дизайнера · Истории создания сайтов

Разбираю создание сайта на Tilda по шагам на реальном проекте: сайт-магазин для семейной мастерской посуды Zwonko, который я собрал за четыре прямых эфира. От логотипа и первого экрана до карточки товара, мобильной версии и передачи сайта клиенту.

Zwonko — семейная мастерская, которая делает полукерамические чашки и тарелки. Сайт я собирал в прямом эфире: четыре стрима по 4–5 часов, без заранее готового макета. Подписчики подсказывали в чате, и это оказался отличный буст: две головы и больше действительно лучше одной.

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

Что получилось в итоге: сайт Zwonko на ноутбуке и телефоне

Начните с айдентики, даже если она совсем простая: шрифт для логотипа и пара комплементарных цветов задают характер всему сайту. Для Zwonko мы сделали логотип-ребус: в нём зашифровано название, две кружки сталкиваются, а три полоски сверху показывают звон. Так появился и маскот — персонаж, который представляет бренд.

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

Работа над логотипом на первом стриме

Чтобы маскот ожил, я разобрал его на части и загрузил в Zero Block по отдельности: так каждой детали можно задать свою пошаговую анимацию. В блоке «О нас» получилась троица — двое ребят и маскот справа внизу.

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

Маскот по частям в редакторе Zero Block

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

Причина простая: это интернет-магазин, а значит, нужны стандартные блоки Tilda с каталогом и корзиной. Они рассчитаны на ширину 1200 px, и чтобы сайт выглядел цельно, все Zero-блоки я тоже собрал в 12 колонках. Пустоту снизу на больших мониторах заполнил чёрточками с волновой анимацией, которые исчезают при начале скролла. Подробнее о том, что умеет магазин на Tilda, я писал в статье про плюсы и минусы интернет-магазина на Tilda.

Первый экран: бегущая строка, кружки и волна из чёрточек внизу

Сразу после первого экрана — небольшая витрина из стандартного блока каталога Tilda. Чтобы поднять средний чек, я добавил комплекты: пара кружек, пара тарелок, набор на четверых. Фото для них пришлось отретушировать и собрать из одиночных снимков. Каталог клиент дозаполнит сам: товары в Tilda добавляются без дизайнера.

Витрина комплектов на стандартном блоке каталога

Люди покупают у людей, поэтому посетителю важно понять, кто стоит за мастерской. Нормальных фото у ребят не было, и я поставил временный снимок-референс: теперь им остаётся сфотографироваться похоже и просто заменить картинку. Такой приём сильно упрощает жизнь, когда контента ещё нет.

Блок «О нас» с временным фото, которое клиент заменит сам

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

Мелочи вроде фавикона делайте сразу, как только они пришли в голову, или записывайте в список: перед запуском они всегда вылетают из головы.

Отзывы-скриншоты в блоке, который сам раскладывает фото

Блок про оплату, доставку, гарантию и возврат нужен любому магазину: он снимает половину вопросов до звонка. Значки я нарисовал в стиле шрифта сайта, а справа поставил зацикленное видео с кружкой.

Видео можно загрузить прямо в Tilda: она принимает файлы MP4 до 5 Мб. Для коротких цикличных роликов это идеально, только заранее сожмите файл, я делал это в DaVinci Resolve.

Оплата и доставка: кастомные значки и цикличное видео справа

Мастерская делает кастомные надписи только на крупных партиях, поэтому для опта я сделал отдельную форму и поставил рядом второе видео — уже с тарелкой. Повторы в дизайне — это хорошо, они создают единство стиля, если похожие блоки стоят далеко друг от друга.

Вопросы и ответы я собрал с помощью DeepSeek — с такими текстами нейросети справляются отлично. А модели, которые умеют делать в Tilda целые блоки самостоятельно, я сравнил в большом тесте нейросетей. Блок контактов вышел маленьким, и я добавил в него волну из первого экрана.

Форма для оптовых заказов с видео рядом

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

• фото и описание, связанные с каталогом;
• вкладки с деталями о товаре;
• блок «С этим товаром покупают».

Схема привычная покупателю, а значит, не мешает ему купить.

Карточка товара на отдельной странице

Самая скучная, но одна из самых важных частей работы. Мастерская проводит распродажи в Telegram, а значит, большая часть покупателей придёт с телефона. Адаптив пришлось делать очень аккуратно, чтобы сохранить анимацию почти в каждом блоке.

Перед сдачей прогоните сайт по чек-листу тестирования перед запуском: вёрстка на разных экранах, формы, корзина, SEO.

Первый экран на телефоне и на ноутбуке: анимация сохранена

Сайт готов, но работа на этом не заканчивается. Что я отдал мастерской вместе со сайтом:

• видеоинструкцию по их сайту: как добавлять товары, менять тексты и фото. Я делаю такую каждому клиенту: уроки на YouTube хороши, но инструкция под конкретный сайт всегда лучше;
• архив исходников: логотип, маскот, обработанные фотографии;
• дизайн вкладыша в заказы — три варианта лицевой стороны и два оборотной.

Дальше клиент сам заполняет каталог, подключает кассу и доставку. Хотите посмотреть другие мои проекты — они в портфолио.

Можно ли сделать сайт на Tilda самостоятельно без опыта?
Да. Лендинг из готовых блоков можно собрать за вечер, а для уникального дизайна и анимации понадобится освоить Zero Block.

Сколько времени занимает сайт-магазин?
Сайт Zwonko я собрал за четыре стрима по 4–5 часов плюс мобильная версия и доработки вне эфира. Новичку стоит заложить в 2–3 раза больше.

Какую ширину выбрать для Zero Block на сайте-магазине?
Если вы используете стандартные блоки каталога, держите все блоки в одной сетке шириной 1200 px, чтобы сайт выглядел цельно.

Можно ли загрузить видео прямо в Tilda?
Да, файлы MP4 до 5 Мб. Для коротких цикличных роликов этого достаточно.

Как клиенту самому обновлять сайт?
Запишите для него видеоинструкцию именно по его сайту: как добавлять товары, менять тексты и фото.

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

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