Design Все статьи

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

Альона Боса
Алёна Боса Дизайнер
25.12.2019
395
0

Этап 1. Клиент

Этап 2. Задание

Этап 3. Архитектура сайта

Этап 4. Прототипирование

Этап 5. Дизайн

 

Этап 1. Клиент

Autoglass Group — компания по продаже, установке и ремонту автостекла. На сегодняшний день Autoglass Group занимает лидирующие позиции среди крупных дилеров на рынке Украины. Каталог продукции компании насчитывает более 18 млн. Деталей.

 

Этап 2. Задание

  • Разработка прототипа и концепта будущего сайта
  • Создание уникального дизайна сайта на основе прототипа.
  • Разработка мобильной версии сайта.
  • Проектирование интуитивно понятного фильтра подбора автостекла по маркам автомобилей.

 

Этап 3. Архитектура сайта

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

  • личный кабинет;
  • «заказать быстрый звонок»;
  • форма обратной связи;

 

Проектирование и дизайн сайта автостекла фото 1

 

Также, для удобства использования сайта, были созданы специальные инструменты (фильтр / сортировка) товаров по разным параметрам:

Для удобного поиска нужной запчасти реализована строка быстрого поиска по ключевому слову и форма поиска по конкретной марке автомобиля. В свою очередь, форма поиска по конкретной марке автомобиля включает в себя:

  • наличие товара на складе
  • быстрый просмотр фотографии товара
  • скрытая цена для отслеживания наиболее просматривающих товаров

Этап 4. Прототипирование

На этапе создания прототипа, мы продумали логику пути пользователя. Этап прототипирования важен для понимания клиентом и команды разработки включительно, сценария пути пользователя к целевому действию. На данном этапе комментарии со стороны клиента внести легче, чем на этапе дизайна.

 

Проектирование и дизайн сайта автостекла фото 2

 

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

 

Этап 5. Дизайн

После утверждения макета с заказчиком начинается этап прорисовки дизайна. Взяв за основу принцип KISS (keep it short and simple) интерфейс сделали простой и понятный, а все действия очевидны.

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

Главная страница имеет современный гармоничный стиль.

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

Несколько примеров страниц сайта:

 

Проектирование и дизайн сайта автостекла фото 3

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

 

Проектирование и дизайн сайта автостекла фото 4

Выбор стекла

 

Проектирование и дизайн сайта автостекла фото 5

Блог

Боса Алена

Дизайнер

Summary
Проектирование и дизайн сайта автостекла
Article Name
Проектирование и дизайн сайта автостекла
Author
Publisher Name
Svitsoft
Publisher Logo
Design
Приложение для жителей ЖК (Файна Таун, Tetris Hall, Respublika) застройщика KAN development
Design
Приложение для жителей ЖК (Файна Таун, Tetris Hall, Respublika) застройщика KAN development
Вам будет интересно
Комментарии
0 записей

Выскажите свое мнение

Это поле должно быть заполнено!
Это поле должно быть заполнено!
Это поле должно быть заполнено!
Это поле должно быть заполнено!