Проектирование системы. 
Разработка web-сайта для интернет-магазина фототоваров

Проектирование структуры сайта

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

Рисунок 2.1 — Структура сайта.

Проектирование навигации

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

Рисунок 2.2 — Прототип глобальной навигации.

Кликабельными элементами являются:

• 1. Поиск
• 2. Каталог товаров
• 3. Доставка и оплата
• 4. Отзывы
• 5. Корзина

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

Разработаем модульную сетку для нашего ресурса. Модульная сетка характеризуется наличием как вертикального членения, так и горизонтального. То, что образуется на пересечениях, есть модуль. С помощью сервиса modulargrid.org, исходя из приведенных ниже данных (таблица 2) была разработана модульная сетка, изображенная на рисунке 2.3.

Таблица 2 — Данные для модульной сетки.

Рисунок 2.3 — Модульная сетка

На основании всего вышеизложенного, приступим к созданию прототипов страниц трех уровней. Первый уровень собственно сама главная страница сайта, второй уровень — страница «Раздел в каталоге товаров» и третий уровень — страница «Информация о товаре».

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

Рисунок 2.4 — Прототип главной страницы.

На рисунке 2.5 представлен прототип главной страницы с модульной сеткой.

Рисунок 2.5 — Прототип главной страницы с модульной сеткой.

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

Рисунок 2.6 — Выпадающее меню.

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

Рисунок 2.7 — Прототип страницы «Раздел в каталоге товаров».

Так же данная страница представлена с модульной сеткой (рисунок 2.8).

Рисунок 2.8 — Прототип страницы «Раздел в каталоге товаров» с модульной сеткой.

После того как пользователь нажал подробная информация он попадает на страницу товара. Страница товара включает в себя путь (Категория 1->Товар 1), чтобы было понятно к какой категории принадлежит товар. Ниже располагается фотогалерея товара. Справа от галереи располагается название товара, краткое описание, цена. Имеется возможность купить товар и приобрести в кредит. Под кнопкой купить видно информацию о том, что товар сертифицирован. Если смотреть ниже, то пользователь увидит технические характеристики товара. Данная страница представлена на рисунке 2.9, а страница с модульной сеткой на рисунке 2.10.

Рисунок 2.9 — Прототип страницы «Информация о товаре».

Рисунок 2.10 — Прототип страницы «Информация о товаре» с модульной сеткой.