Смотреть

Смотреть на DProfile

Клиент:

DProfile:

Сайт:

ТехноГрааль

Веб-приложение

Разработать удобный интерфейс приложения и сверстать его на чистом коде с подключением необходимых сервисов

Задача:

Цели проекта:

Создать конкурентно способный аналог существующих сайтов по подбору ПК комплектующих

3 месяца / 2025

Сроки реализации / год выпуска:

Спроектировать удобный конфигуратор

Разработать современный UX/UI дизайн

по подбору комплектующих для сборки компьютеров

«ТехноГрааль» — веб-приложение

Наша команда провела анализ аудитории, конкурентов и выявила особенности рынка сборки ПК комплектующих. На основе полученных данных мы разработали прототип и проработали User Experience

За основу визуального стиля были взяты фирменные цвета компании — синий, белый, чёрный. Их мы использовали во всём интерфейсе

Весь дизайн выполнен в минималистичном стиле

Разработали функциональный прототип и сформировали единый визуальный стиль

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

Интерфейс конфигуратора одинаково удобно работает на десктопе, планшете и мобильных устройствах

Все изменения в конфигураторе происходят мгновенно, с пересчетом цены и показом итоговой спецификации

Спроектировали и сверстали конфигуратор сборки ПК

Мы полностью адаптировали интерфейс под тёмную тему — сохранив визуальную иерархию, контрастность и читаемость всех элементов.

При переключении темы интерфейс мгновенно адаптируется без перезагрузки страницы благодаря реализации через CSS-переменные и context-подход в React.

Тёмная версия сайта

Реализовали изменение элементов при наведении, чтобы пользователь видел визуальный отклик

Создали на сайте всплывающие окна с плавной анимацией

Кнопки и элементы управления имеют разные визуальные состояния: наведение, клик, активность, блокировка — интерфейс подсказывает, что можно сделать в данный момент

Интерактивный интерфейс

Запуск полноценного сайта в установленный срок и реализация всех функций

Результат:

Что дальше?

Масштабирование веб-приложения, добавление новых страниц по ходу развития проекта

Финал проекта

Смотреть на DProfile