UI/UX дизайн лендинга премиального ПК в Figma | Webplustudio

Продукт	Кастомный ПК ручной сборки (Custom Gaming & Workstation PC)
Целевая аудитория	Технические энтузиасты, геймеры, 3D-художники (тёплый трафик)
Формат работы	UI/UX дизайн + Адаптивы + UI-Kit + Анимации + Баннеры ВК
Инструменты	Figma, Adobe Photoshop
Типографика	Kelson Sans (геометрический технический гротеск)
Палитра	Циановый, фиалковый, берлинская лазурь, «морозный фиолетовый»
Интерактивная фича	Переключатель (тоггл) RGB-подсветки ПК прямо в макете
Сроки работы	2 рабочие недели (2021 г.)
Категории услуг	Создание лендингов, Редизайн и дизайн

Коммерческая промо-страница для эксклюзивного железа

В 2021 году команда Webplustudio.ru получила задачу разработать дизайн-макет посадочной страницы для кастомного компьютера ручной сборки.

Особенности товара и аудитории:

• Это не массовый офисный системный блок, а эксклюзивный кастомный ПК с продуманным кабель-менеджментом, жидким охлаждением и мощными комплектующими.
• Целевая аудитория — «тёплая» и технически подкованная. Посетители лендинга досконально разбираются в гигагерцах, таймингах оперативной памяти, архитектуре видеокарт и системах охлаждения.
• Задача сайта — продемонстрировать эстетику сборки, показать технические спецификации без «детских» маркетинговых лозунгов и мотивировать на оформление заявки.

Как создавался дизайн-макет за 2 рабочие недели

1. Формирование УТП и смысловой прототип

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

2. Ретушь и подготовка фотоматериалов в Photoshop

Кастомный ПК требует премиальной подачи. Мы провели обработку исходных снимков корпуса в Adobe Photoshop: убрали мелкие блики, подчеркнули текстуру метала и закалённого стекла, выставили глубокие тени и сочные акценты подсветки.

3. Отрисовка Figma-макета и адаптивных версий

Сайт спроектирован в Figma с полной проработкой под десктопные мониторы и смартфоны.

Особенности визуальной концепции:

• Гарнитура Kelson Sans: мы выбрали акцидентный геометрический шрифт, который отлично передаёт технологичный стиль инженерных продуктов.
• Цветовая палитра: сочетание цианового, фиалкового, светло-голубого и глубокого оттенка берлинской лазури.
• Фирменный «морозный фиолетовый» градиент: уникальный градиентный акцент, подчеркивающий холодную эстетику водяного охлаждения и ARGB-подсветки ПК.

4. UI-Kit, анимации и тоггл подсветки корпуса

Для передачи макета в вёрстку мы оформили аккуратный UI-Kit: описали состояния кнопок (default, hover, active), карточки компонентов, поля ввода и типографику.

Главная интерактивная фишка дизайна:
Мы разработали специальный скролл-прототип с анимацией и интерактивным переключателем (тогглом) ARGB-подсветки. Посетитель страницы может нажать на тумблер и визуально оценить, как выглядит компьютер в темноте с включенной ARGB подсветкой и со строгим выключенным светом.

5. Дополнительно: рекламные баннеры для ВКонтакте

Чтобы клиент мог сразу запустить промо-кампанию в соцсетях, мы отрисовали 3 рекламных баннера для VK в едином визуальном стиле лендинга:

Результаты работы Вебплюс Студио над дизайном сайта

За 12 рабочих дней мы полностью выполнили продуктовый дизайн-пакет:

• ✅ Разработан сочный UI/UX дизайн-макет лендинга в Figma с мобильной версией.
• ✅ Сформирован фирменный стиль (Kelson Sans + морозный фиолетовый градиент).
• ✅ Создан UI-Kit и анимационный видео-шоукейс для передач верстальщику.
• ✅ Отрисованы 3 рекламных баннера для ВКонтакте.

Галерея дизайн-макета

Нужен сочный UI/UX дизайн для вашего продукта?

Мы в Webplustudio создаем уникальный веб-дизайн и лендинги в Figma. Подготовим смысловой прототип, отрисуем адаптивы, соберем UI-Kit и передадим аккуратные макеты в разработку.