UX/UI DESIGN 2026

Интернет-магазин бытовой техники

Задача и контекст

О проекте

BuyTech — интернет-магазин бытовой техники. Выполнен полный цикл UX/UI-дизайна с нуля: главная страница, каталог с фильтрацией, карточки товаров, корзина, оформление заказа и личный кабинет пользователя.

Решение

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

Проблема

Исходный сайт обладал устаревшим визуальным исполнением, нелогичной структурой навигации и перегруженными карточками товаров. Пользователи испытывали трудности при поиске техники, сравнении характеристик (например, загрузка белья, уровень шума, тип сушки) и оформлении заказа. В результате — высокий показатель отказов и низкая конверсия в целевые действия.

Типографика и Цветовая схема

#F5F5F0 — Основной фон

Светлый нейтральный оттенок, создаёт воздушность, чистоту и не отвлекает от контента. Обеспечивает высокую контрастность с текстом и карточками.

#B2EEFA — Фон для карточек

Мягкий голубоватый оттенок, визуально отделяет карточки товаров от основного фона. Добавляет лёгкость и свежесть интерфейсу, не перегружая восприятие.

#3B82F6 — Акцентный цвет

Яркий синий для кнопок, ссылок и активных элементов. Привлекает внимание к ключевым действиям (купить, сравнить, добавить в корзину), повышает кликабельность.

#1A1A1A — Текст

Насыщенный тёмно-серый, близкий к чёрному. Используется для основного содержания — заголовков, описаний, цен. Обеспечивает максимальную читаемость.

#787878 — Подписи и обводка

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

Перечень страниц по User Flow

Главная страница

Новости

СТРАНИЦА НОВОСТИ

ЛЕНДИНГ ДЛЯ ИНВЕСТИЦИЙ

ЛЕНДИНГ ДЛЯ ПАРТЕНРСКОЙ ПРОГРАММЫ

КАТАЛОГ

карточка товара

ИЗБРАННОЕ

КОРЗИНА

уточнение деталей

доставка

оплата

ОПЛАТА - УСПЕШНОЕ ОКНО

ВХОД в личный кабинет

регистрация

ЛИЧНЫЙ КАБИНЕТ/ОБЩАЯ ИНФОРМАЦИЯ

ЛИЧНЫЙ КАБИНЕТ/БОНУСЫ И АКЦИИ

ЛИЧНЫЙ КАБИНЕТ/ИСТОРИЯ ПОКУПОК

ПРЕДЫДУЩАЯ СТРАНИЦА
СЛЕДУЮЩАЯ СТРАНИЦА

Не вошедшие страницы

Дизайн следующих страниц также выполнен, но не включён в основную навигацию кейса для сохранения лаконичности:
  • Лендинги (подписная модель, B2B)
Made on
Tilda