Задача:
Разработать дизайн интернет-магазина колёсных дисков для легковых автомобилей “SLIK shop”. Дизайн должен быть в фирменном стиле владельца магазина компании “Slik”. Интерфейс необходимо спроектировать максимально просто и удобно для быстрого доступа на любую страницу сайта. Так же на сайте должен присутствовать личный кабинет покупателя с информацией о заказе и личных данных с возможностью редактирования.
Процесс:
После изучения технического задания и беседы с представителем заказчика мною были спроектированы прототипы всех требуемых макетов:
После согласования всех деталей макетов, я сделал первый вариант главной страницы магазина:
Главная страница. Вариант 1
Далее заказчик внёс желаемые поправки и был утверждён окончательный вариант страницы:
Главная страница. Вариант 2
В “шапке” располагается логотип, контактные данные и форма входа в личный кабинет. Ниже ссылки на разделы каталога оформленные в виде колёсных дисков с логотипом производителя. При наведении курсора под ними появляется подсветка.
Затем страница делится на три вертикальные части. В центральной части располагается фильтр для быстрого подбора дисков по характеристикам автомобиля, который доступен с любой страницы. При желании его можно свернуть. Под ним краткая информация о компании “Слик”. Ниже алфавитный фильтр по каталогу.
В левой колонке располагается блок с личной информацией покупателя, с возможностью перехода в личный кабинет. Под этим блоком отображаются три последних просмотренных товара.
В правой колонке, оформленный в стиле основного фильтра, блок с быстрым поиском по диаметру колеса. Под ним раздел со ссылками на информационные разделы сайта.
В “подвале” copyright с подробной контактной информацией и рекламным банером.
Далее я сделал макет страницы с выбором категории товара внутри определённой группы:
Выбор категории
Затем страницу выбранной категории со списком товаров:
Страница выбранной категории
Далее сделал страницу отобранных позиций с помощью фильтра:
Отобранные позиции с помощью фильтра
Затем страницу описания товара с крупной фотографией, характеристиками и кнопкой “купить” напротив каждой позиции:
Страница описания товара
Также мною сделан макет страницы “корзина”. На этой страницы покупатель может просмотреть все характеристики и количество заказанного товара с возможностью редактирования количества или удаления товара из корзины. И перейти к оформлению товара:
Страница “Корзина”
Если покупатель не авторизирован он попадает на страницу регистрации:
Регистрация покупателя
После процедуры авторизации покупатель попадает на страницу “Личный кабинет”. Здесь он может отслеживать все свои заказы и редактировать свои личные данные:
Главная страница личного кабинета
Закончил проект я макетом информационной страницы со всеми возможными элементами страниц:
Информационная страница
