Дизайн интернет-магазина колёсных дисков «SLIK shop»

09.01.2014

Задача:

Разработать дизайн интернет-магазина колёсных дисков для легковых автомобилей «SLIK shop». Дизайн должен быть в фирменном стиле владельца магазина компании «Slik». Интерфейс необходимо спроектировать максимально просто и удобно для быстрого доступа на любую страницу сайта. Так же на сайте должен присутствовать личный кабинет покупателя с информацией о заказе и личных данных с возможностью редактирования.

Процесс:

После изучения технического задания и беседы с представителем заказчика мною были спроектированы прототипы всех требуемых макетов:

После согласования всех деталей макетов, я сделал первый вариант главной страницы магазина:

Главная страница. Вариант 1

Главная страница. Вариант 1

Далее заказчик внёс желаемые поправки и был утверждён окончательный вариант страницы:

Главная страница. Вариант 2

Главная страница. Вариант 2

В «шапке» располагается логотип, контактные данные и форма входа в личный кабинет. Ниже ссылки на разделы каталога оформленные в виде колёсных дисков с логотипом производителя. При наведении курсора под ними появляется подсветка.

Затем страница делится на три вертикальные части. В центральной части располагается фильтр для быстрого подбора дисков по характеристикам автомобиля, который доступен с любой страницы. При желании его можно свернуть.  Под ним краткая информация о компании «Слик». Ниже алфавитный фильтр по каталогу.

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

В правой колонке, оформленный в стиле основного  фильтра, блок с быстрым поиском по диаметру колеса. Под ним раздел со ссылками на информационные разделы сайта.

В «подвале» copyright с подробной контактной информацией и рекламным банером.

Далее я сделал макет страницы с выбором категории товара внутри определённой группы:

Выбор категории

Выбор категории

Затем страницу выбранной категории со списком товаров:

Страница выбранной категории

Страница выбранной категории

Далее сделал страницу отобранных позиций с помощью фильтра:

Отобранные позиции с помощью фильтра

Отобранные позиции с помощью фильтра

Затем страницу описания товара с крупной фотографией, характеристиками и кнопкой «купить» напротив каждой позиции:

Страница описания товара

Страница описания товара

Также мною сделан макет страницы «корзина». На этой страницы покупатель может просмотреть все характеристики и количество заказанного товара с возможностью редактирования количества или удаления товара из корзины. И перейти к оформлению товара:

Страница "Корзина"

Страница «Корзина»

Если покупатель не авторизирован он попадает на страницу регистрации:

Регистрация покупателя

Регистрация покупателя

После процедуры авторизации покупатель попадает на страницу «Личный кабинет». Здесь он может отслеживать все свои заказы и редактировать свои личные данные:

Главная страница личного кабинета

Главная страница личного кабинета

Закончил проект я макетом информационной страницы со всеми возможными элементами страниц:

Информационная страница

Информационная страница

Спасибо за внимание!

Метки: ,

Комментировать работу

Яндекс.Метрика