Структура и дизайн
Я подготовил структуру, тексты, изображения и шесть редактируемых экранов Figma. ИИ использован как инструмент подготовки и разработки.
Сайт-каталог / Tilda + Figma
КОНТУР — каталог офисной мебели
Помочь выбрать предмет по характеристикам или начать с задачи. Макет Figma, сборка на Tilda и заявка на подбор с уведомлением в Telegram.
Самостоятельный проект Льва для портфолио Virentora.
УвеличитьМесто, где работается.
Первый экран опубликованного каталога. Реальный снимок Tilda, 1 октября 2026.
- 9
- предметов в трёх категориях
- 2
- пути: от предмета или от задачи
- 6
- экранов Figma: компьютер и телефон
От ассортимента — к понятному запросу.
Каталог помогает сравнить мебель по назначению, размерам и материалам. Если предмет уже выбран, заявка сохраняет его название и артикул — не нужно заново объяснять, что заинтересовало.
Если готового решения ещё нет, посетитель начинает с задачи: отдельное рабочее место или комплектация офиса. Форма собирает количество мест, ориентир по бюджету и контакт для ответа.
Сборка и обращения
Первый экран — Zero Block. Каталог, товарные данные и формы — штатные возможности Tilda; Telegram получает уведомления. Дополнительный CSS уточняет оформление.
Адаптация и передача
Проверены основные действия и пять ширин браузера. Подготовлены инструкция обновления каталога, журнал исправлений и сценарий будущего видео.
Характер — в интерьере. Выбор — в деталях.
Тёплый фон, дуб и графит объединяют первый экран и предметные изображения. Синий выделяет действия. В карточках рядом с мебелью видны размеры, назначение и условная цена — ассортимент можно изучить до открытия товара.
УвеличитьТри стола — три формата рабочего места
Карточки работающего сайта: изображение, название, размеры и условная цена.
Два пути к заявке.
Ниже — разбор сохранённых экранов. Полный сценарий доступен на работающем сайте КОНТУРА.
А / С выбранным предметом
От характеристик к подбору
Категория → товар → характеристики → заявка с названием и артикулом. Выбранный предмет можно убрать или заменить, вернувшись к каталогу.
- Категория
- Предмет
- Характеристики
- Заявка
УвеличитьХарактеристики стола «Линия 160»
Размеры, материалы и назначение рядом с действием «Подобрать с этим предметом».
Б / Без готового выбора
Начать с задачи
Не обязательно разбираться в моделях заранее. Общая форма принимает задачу, количество рабочих мест, ориентир по бюджету и контакт для ответа — без привязки к товару.
- Задача
- Количество мест
- Бюджет
- Контакт
УвеличитьОбщий запрос на подбор
Настоящая форма Tilda. Бюджет и комментарий обозначены необязательными.
Тот же выбор. На узком экране.
Первый экран перестраивается в одну колонку. Характеристики остаются рядом с предметом, а название и артикул переходят в заявку. Каждый кадр можно увеличить до исходного размера.
От макета Figma к Tilda.
В Figma подготовлены каталог, товар и заявка для компьютера и телефона. Тексты, изображения и графические элементы редактируются отдельно. При сборке макет адаптирован к штатным блокам Tilda.
УвеличитьРедактор и отдельные слои
Реальный снимок Figma. Это макет, а не экран опубликованного сайта.
УвеличитьТовар · макет для компьютера
Настоящий экспорт Figma. Полный кадр 1440 × 850 доступен по нажатию.
УвеличитьЗаявка · макет для телефона
Настоящий экспорт Figma. Полный кадр 390 × 1270 доступен в увеличении.
Редактируемый файл — по запросу. Прототип показывает путь одного стола; на сайте доступны все девять предметов.
Проверено на конкретных действиях.
1 октября 2026 две явно помеченные тестовые заявки сохранились в Tilda и были фактически получены в официальном TildaFormsBot. Использовались искусственные данные. Новая страница кейса не отправляет заявки.
- Выбранный предметВ уведомлении по креслу «Фокус» название и KT-C002 пришли отдельной товарной строкой, а не только в комментарии.
- Общий запросОбращение без товара дошло до Telegram. Бюджет «Пока не определился» не помешал отправке.
- Ввод и выборПроверены обязательные поля, неверный email, удаление и замена предмета.
- Адаптивная раскладкаПолная страница просмотрена на 320, 390, 768, 1024 и 1440 px в браузере. Это не проверка пяти физических телефонов.
Что доработал после проверки
Размеры и переносы
В мобильном макете у части мебели не хватало размеров, а цена шкафа переносилась. Данные добавлены, ширина цены настроена; результат сверен по текстовым слоям и свежему полному экспорту.
Связи в прототипе
Копии карточек в Figma открывали чужой стол. Ошибочные связи убраны; отдельно проверен основной путь «каталог → товар → заявка → возврат».
Форма на прямой ссылке
Дополнительные стили действовали только на главной. CSS перенесён в стили проекта Tilda; после перезагрузки проверена заявка с прямой страницы товара и отсутствие итогов покупки.
Объём и ограничения
- Мебель не продаётся, оплата и CRM не подключены. Для доступности каталога нужен действующий тариф Tilda; макет обновляется отдельно.
- В прототипе Figma интерактивен один предмет. Перенос адаптирован к блокам платформы, без обещания совпадения каждого пикселя.
- Повторная отправка остановилась на SmartCaptcha. Защита от дублей, восстановление после принудительного сбоя сети и отправка с пустым комментарием отдельно не подтверждены.
- Проверялись пять ширин браузера. Физические телефоны, Safari и полный набор браузеров не проверены; у штатных категорий нет Tab-фокуса. Полное соответствие WCAG не заявляется.
КОНТУР — самостоятельный проект для портфолио Virentora. Ассортимент, характеристики и цены условные; изображения мебели и интерьера созданы с помощью ИИ. Мебель не продаётся, оплата не принимается. Тестовые обращения поступают автору проекта.
Нужен каталог на Tilda?
Расскажите об ассортименте и о том, как хотите получать обращения. Согласуем категории, товарные данные, поля подбора и получателя заявок.
Обсудить похожий проектЭто возможный состав будущего проекта. Фильтры по цене, сравнение, корзина, CRM, оплата и склад в текущий КОНТУР не входят.