Alpha Industries

Редизайн интернет магазина

О проекте

Компания по производству одежды. Основана в 1959 году в городе Ноксвилл, Теннесси (США). Основное направление — пошив одежды в стиле милитари. За более чем полувековую историю Alpha Industries зарекомендовал себя как надежный производитель, которому доверяют миллионы людей по всему миру. Благодаря сочетанию богатого наследия, высочайших стандартов качества и постоянного стремления к инновациям, бренд занимает лидирующие позиции в индустрии моды и продолжает радовать своих клиентов новыми, уникальными изделиями. Будь то классические модели военной одежды или современные городские тренды, Alpha Industries всегда остается верным своему принципу — создавать продукцию, которая служит долго и выглядит стильно.

Минусы и недостатки старого дизайна сайта Alpha Industries

Это был достаточно шаблонный сайт с устаревшим дизайном. Дизайн скорее выделялся среди конкурентов в худшую сторону. И совершенно не отражал амбиции бренда. Использовалась абсолютно уродливая иконографика. Сайту не хватало воздуха. Верстка состояла из нагромождения функциональных блоков, трудно считываемых взглядом. Главная страница не несла в себе существенной информации для пользователя, очень скупо ознакамливая пользователя с новыми коллекциями, с брендом, его историей и социальной деятельностью. Также на сайте присутствовали мелкие технические ошибки. Битые картинки и иконки. Некоторые разделы сайта прогружались не полностью. Сайт казался громоздким и неопрятным.

Скриншоты старого сайта

Почему этим сайтом будет неудобно пользоваться?

  • Не получается просканировать страницу взглядом и быстро считать важную информацию
  • Слабая текстовая иерархия, из-за этого сложно ориентироваться в контенте страницы
  • Шаблонный дизайн
  • Не проработаны визуальные акценты и логика повествования

Задачи, которые должен выполнять новый сайт

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

Этапы работы над проектом

Составление брифа

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

Этот документ носит учебный характер и был заполнен дизайнером.

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

Референсы

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

Визуальная концепция

После согласования визуальной концепции я продолжил работу над дизайном остальных страниц сайта.
На этом этапе были спроектированы адаптивные версии для планшетов и мобильных устройств.

Адаптивные версии

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

Итоги

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

Были отрисованы декстопная версия (1920 px), планшетная версия (768 px) и мобильная (320 px) следующих страниц:

  1. Главная страница
  2. Каталог
  3. Карточка товара
  4. Корзина
  5. Оформление заказа
  6. Оплата
  7. Информация о доставке
  8. Лукбук

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