Привет! Сейчас покажу, как сделала интернет-магазин для чайного магазина — тепло, понятно и с фокусом на удобную покупку.
О проекте
Разработала уютный и минималистичный сайт для интернет-магазина чая. Сделала акцент на атмосферности, чистом визуале и простой навигации — чтобы покупать чай было так же приятно, как заваривать.
Оплата
Аналитика и метрики
Корзина и оформление заказа
Корзина и оформление заказа
SEO и фавикон
Формы и сбор заявок
Чаты и виджеты
Путь от идеи до результата
01
02
04
03
Формат и задачи сайта
Цели бизнеса
Портрет аудитории
Погружение
Исследование
Концепция
Дизайн и запуск
Анализ конкурентов
Боли клиентов
Референсы
Структура сайта
Мудборд
Архитектура сайта
Прототипирование
Первичный UI
Дизайн всех блоков
Адаптив всех устройств
Анимации/интерактив
Верстка на Tilda
Поддержка после запуска
После запуска я остаюсь на связи — для меня важно, чтобы клиент чувствовал себя спокойно и уверенно с новым сайтом.
Погружение (5 дней)
Структура и прототип (7 дней)
Дизайн (10 дней)
Сборка и запуск (14 дней)
Обсудили философию бренда, сделала портрет аудитории и определила предпочтения покупателей. Подобрала вдохновляющие референсы и определили ключевые задачи для сайта.
Сделала анализ конкурентов, продумала логику интернет-магазина, собрала карту сайта и спроектировала блоки: от карточек чая до гида по выбору.
Собрала сайт на Tilda, настроила корзину, формы, подключила оплату и протестировала всё до мелочей. Сайт готов к тёплым продажам ☕️
Оформила все страницы в единой эстетике бренда, сделала адаптив, настроила визуальные акценты и проработала анимации.
Решения: UX/UI-дизайн
Загляните в макет главного экрана — здесь можно увидеть, как я выстроила структуру, расставила акценты и оформила дизайн так, чтобы сайт был и красивым, и удобным. Всё продумано: от первого экрана до кнопки. Покажу, какие решения я применяла в UX и UI, чтобы покупателям было легко ориентироваться и приятно выбирать чай.
UI-решения
Я собрала чистую, воздушную систему с понятной типографикой и визуальными акцентами. Всё на своём месте: легко ориентироваться, приятно смотреть, хочется остаться.
Tеплая палитра, мягкие шрифты, много «воздуха» — создают атмосферу уюта, доверия и вкуса, важную для чайного бренда.
Нежная эстетика с акцентом на визуал
Фото высокого качества
Маркировки «Хит» и мини-карточки
Единая визуальная система
Крупные изображения с паром, текстурами и деталями усиливают эмоциональное восприятие и вкус продукта «на глаз»
Выделяют популярные продукты и направляют внимание клиента на выгодные позиции.
Карточки, кнопки, акценты и отступы — всё выдержано в одном стиле, что делает интерфейс цельным и приятным.
UX-решения
UX построен на заботе: минимум усилий, максимум удовольствия от навигации. Всё работает просто, понятно и с уважением к времени пользователя.
Навигация и фильтры
Грамотная иерархия блоков
Кнопки и призывы к действию в каждом блоке
Фокус на миссию бренда
Меню наверху простое и понятное — сразу видно, где искать категории, бестселлеры и гайд
Информация выстроена по логике поведения пользователя: сначала предложение → товары → доверие → подписка.
Почти всегда есть «Перейти в каталог» или «Подобрать чай» — упрощает путь к покупке.
В середине страницы аккуратно встроен блок с ценностями компании — повышает лояльность и усиливает storytelling.
Каталог товаров
Каталог, в котором легко найти «свой» чай я сделала структуру простой и логичной — можно листать по категориям, фильтровать по вкусу, настроению или типу. Карточки с фото и коротким описанием помогают выбрать не глядя в инструкции. Всё быстро, чисто и без перегруза — как должно быть в онлайн-магазине, где хочется просто выбрать, заказать и ждать ароматную посылку.
Карточка товара
Карточка товара, которая не утомляет — а помогает выбрать
Фото, цена и короткое описание — на первом экране. Дальше можно легко пролистать состав, свойства и преимущества.Информацию разнесла по вкладкам, чтобы не перегружать, а сопутствующие товары разместила ниже — для тех, кто в поиске вдохновения или просто хочет попробовать что-то новое.
UX/UI-решения в карточке товара
01 Четкая иерархия информации
02 Удобная структура характеристик
03 Добавить в корзину (Button)
04 Подробный блок описания
05 Блок с рекомендациями
06 Минималистичныая типографика
Название, цена и описание — на первом экране. Ничего лишнего, всё понятно с первого взгляда.
Фильтры по типу трав, воздействию, назначению — оформлены в виде меток, чтобы клиент легко ориентировался и находил нужное.
Выделена визуально, но не нарушает общего ритма — она на своём месте и вызывает действие.
Разделён на вкладки — описание, свойства, состав. Это сокращает перегруз экрана и помогает сфокусироваться.
Продуманная точка вовлечения. Он визуально лёгкий и логично продолжает путь пользователя.
Делают чтение комфортным, усиливая ощущение спокойствия и доверия.
Оформление заказа
Оформление — в один вдох
Я сделала корзину лёгкой и прозрачной: всё по делу — фото, состав, тип и количество. Можно сразу изменить число баночек или удалить чай. Финальная сумма видна сразу, а кнопка «Оформление» — не затерялась и зовёт к действию.
Быстрое оформление — без лишних шагов
Я сделала форму простой и понятной: только нужные поля, разбитые на блоки «Контакты» и «Доставка», чтобы не теряться. Удобно выбрать способ доставки, сразу ввести промокод, а финальная сумма всегда на виду. Визуально легко, логично и не вызывает вопросов — клиент просто заполняет, нажимает «Оформить» и ждёт свою посылку.
Мобильная версия
Больше 80% заказов — с мобильных. Поэтому я сделала адаптив не просто удобным, а по-настоящему комфортным для пользователя: листать, выбирать чай, читать состав и сразу добавлять в корзину — всё в пару касаний, без перегруза и лишних кликов.
