О проекте
Клиент — премиальный бренд молодёжной одежды из Москвы. Обратился к нам на этапе запуска. Мы получили подробный брендбук с визуальным стилем, ценностями и описанием портретов аудитории.
Задачи
- Передать философию бренда — донести через дизайн ощущение свободы и уникальности
- Сохранить фирменный стиль — использовать в веб-дизайне цвета, шрифты и другие графические элементы из брендбука
- Обеспечить удобство для пользователей — сделать интерфейс интернет-магазина простым, интуитивным и без лишних деталей
Результат
- Удобный выбор опций: покупатель может сразу выбрать нужный цвет и размер товара перед добавлением в корзину
- Подключена онлайн-оплата: картой любого банка и через сервис «Долями»
- Реализована интеграция с доставкой СДЭК
- Сдержанный и лаконичный дизайн — подчёркивает премиальный характер бренда и формирует нужное впечатление с первых секунд
Этапы дизайна
1. Изучение брендбука
- Мы начали с анализа брендбука, чтобы дизайн не просто выглядел красиво, а точно попадал в тональность бренда
- Цветовая палитра — нейтральные и пастельные оттенки
- Типографика — выразительная, с акцентными заголовками
2. Исследование и мудборд
Далее — конкурентный анализ и сбор референсов. Мы ориентировались на сайты брендов: Monochrome, ZNWR, 12storeez. Была задача — понять, какие визуальные приёмы уже работают на рынке и как их использовать в проекте клиента.
3. Прототипы
Разложили пользовательский путь на понятные шаги: просмотр каталога, выбор товара и нужного размера, добавление в корзину, оформление заказа. Затем на основе этих сценариев собрали прототипы, продумали структуру страниц и навигацию.
4. На основе прототипов сделали дизайн
У нас получилось соблюсти баланс между минимализмом и информативностью. Важно было не перегрузить интерфейс, но и не оставить его слишком пустым.
На мобильной версии сохранилась та же эстетика и функционал в более упрощенном виде, но без потери основной стилистики сайта.
Настроили плавные анимации: при наведении, при прокрутке и при переходе между разделами. Это усиливает вовлеченность и делает взаимодействие с сайтом удобным и приятным.
Этапы разработки
1. Выбор платформы
Сайт мы собрали на WordPress с использованием WooCommerce. Это решение соответствовало требованиям заказчика — удобное в управлении и легко масштабируемое.
2. Адаптивность
Мы сделали так, чтобы сайт выглядел аккуратно и удобно на любом устройстве — от смартфона до большого монитора. Контент подстраивается под ширину экрана: на компьютерах элементы растягиваются плавно, а на телефонах блоки перестраиваются.
3. Оптимизация и скорость
Подключили кеширование и оптимизировали изображения. В результате сайт стабильно работает на всех устройствах.
4. Интеграции
Подключили модуль доставки от СДЭК — он автоматически рассчитывает стоимость доставки в зависимости от адреса покупателя и добавляет её к общей сумме заказа. Также реализовали онлайн-оплату картой и через сервис «Долями».
Итог
Получился минималистичный и продуманный интернет-магазин, который не отвлекает, а помогает покупать. Сайт аккуратно вписал фирменный стиль бренда, работает быстро и удобно на всех устройствах.
