TechnoDynasty

Многостраничный сайт компьюетрной техники

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

Следюущий проект

Начало презентации

Заказчик

Задачи

Мои роли

Личный проект

Основаня задача — на основе проведённых исследований разработать сайт с возможностью купить уже готовые сборки ПК и реализовать возможность изменить конфигурацию сборки под предпочтения пользователя.

Конфигуратор должен быть понятен как опытному пользователю ПК, так и начинающему. В конфигураторе необходимо реализовать функцию, которая покажет насколько сильнее станет готовый ПК при выборе детали более новой модели. Функция основана на расчётах AI.

Необходимо адаптировать сайт под мобильные устройства. Ширина экрана мобильной версии — 375px.

Веб-дизайнер

Тимлид

Дедлайн

2 месяца

Обязанности

Опрос ЦА

Анализ ЦА

Разработка мудборда

Разработка варфрейма

Визуальный дизайн

Прототипирование

Анализ конкурентов

Основной выявленной проблемой у конкурентов стал очень сложный путь изменения деталей ПК в конфигураторе. Много модальных окон не соотвествующих выбранной категории, сложно найти кнопку оформления заказа ПК. В мобильных версиях путь до оформления заказа только усложнялся.

Пользовательский сценарий

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

Опрос целевой аудитории

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

Вайрфреймы

Цветовая палитра

Accent

Dark

Primary Light

Transparent White

Transparent Dark

Default/CTA/Active Elements/Shadow Color

#5B2DD5

PrimaryDark/Background

#181A18

Default/Text Color/Icon Color/Logo Color

#EFEAF5

Pressed/Pressed Elements

#DBD8DD

Hovered/Hovered Elements

#C9C7CC

Default/Text Color/Icon Color/Logo Color

#D9D9D9 40%

Transparent_White_15/
Hovered/Text Button Background

#D9D9D9 15%

Transparent_White_15/
Pressed/Text Button Background

#C9C7CC 15%

Transparent_Dark_40/Wiew on Dark/Hex code

#3B3B3B

Transparent_Dark_15/Wiew on Dark/Hex code

#3B3B3B

Transparent_Dark_15/
Pressed/Wiew on Dark/
Hex code

#3B3B3B

Pressed/Pressed Elements

#512AB9

Hovered/Hovered Elements

#3F218D

Gradient Color Step One

#633BDC

Gradient Color Step Two

#1C1335

EXO

H1 WEB

H2 WEB

Text regular

Text medium

Text SeliBold

Шрифты

EXO - является вариативным шрифтом и относится к категориям гротески. Шрифт отлично подчеркивает компьютерную тематику, обладает хорошей читаемостью во всех начертаниях.

Inter

H1 WEB

H2 WEB

Text regular

Text medium

Text SeliBold

Inter - семейство вариативных шрифтов, тщательно разработанное и предназначенное для экранов компьютеров. Обладает отличной читаемостю и хорошо подходит для текста.

UI-KIT

Margin — 24px

Gutter — 16px

Сетки

Margin — 80px

Gutter — 32px

Проект/Десктоп

Адаптивы/мобильная версия

Спасибо за просмотр!