Дизайн первого экрана сайта для бренда дронов MDR

Заказчику — бренду дронов MDR — требовался дизайн первого экрана сайта, который позиционировал бы продукт как премиальное high-tech решение и выгодно отличал бы бренд от типовых интернет-магазинов техники.

Ключевые задачи:

— создать ощущение технологичности и премиальности через визуальный стиль;

— сделать сам продукт (дрон) главным «героем» экрана, не отвлекая внимание второстепенными элементами;

— показать линейку моделей (Heavy, Ultra Light, Superfast), не перегружая первый экран;

— выстроить понятную навигацию для дальнейшего перехода в каталог;

— выделить два целевых действия — предзаказ и ознакомление с продуктом — без конфликта между ними.

Первый экран построен на глубоком чёрном фоне с драматичным светом, направленным на сам дрон — приём, характерный для презентаций премиальной техники (Apple, DJI): продукт словно парит в темноте, свет подчёркивает его силуэт и детали.

Структура блока:
— лаконичная навигация "Каталог / О компании / Контакты" в шапке — минимализм не отвлекает от заголовка;
— крупный заголовок MDR ULTRA LIGHT с контрастом плотности (белый + серый) — акцентирует название модели, при этом слово LIGHT визуально «облегчено» тоном под смысл;
— две CTA-кнопки разного веса — заполненная белая "Оформить предзаказ" (основное действие) и контурная "Подробнее" (второстепенное) — классическая иерархия для сценария и покупки, и ознакомления;
— единственный цветной акцент — синяя кнопка "Приобрести" в шапке, выделяющаяся на чёрно-белой палитре и работающая как постоянно видимый CTA при скролле;
— нижний блок с миниатюрами моделей (MDR Heavy / Ultra Light / Superfast) и счётчиком "+53" — намекает на широкий каталог, стимулируя пролистать дальше;
— тонкая эллиптическая тень/подсветка под дроном создаёт ощущение "подиума", усиливая премиальность подачи.

Разработан завершённый дизайн первого экрана сайта MDR — макет готов к передаче в разработку.

Что получилось:
— Продукт как «звезда» экрана. Тёмный фон и точечный свет полностью фокусируют внимание на дроне — за 2–3 секунды пользователь считывает премиальность бренда без единого слова;
— Понятная иерархия действий. Две кнопки разной визуальной силы избавляют пользователя от когнитивной перегрузки — сразу ясно, какое действие основное;
— Заметный акцент без перегрузки палитры. Единственный синий элемент (кнопка "Приобрести") эффективно работает как постоянный CTA, не нарушая строгий чёрно-белый стиль;
— Намёк на глубину каталога. Блок с миниатюрами моделей и счётчиком мотивирует пользователя изучить линейку продукции дальше, не покидая первый экран;
— Целостный премиальный стиль. Композиция считывается как часть узнаваемого визуального языка топовых tech-брендов, что укрепляет доверие к продукту.

Макет полностью подготовлен в Figma и может быть напрямую передан фронтенд-разработчику для вёрстки.