Разработка дизайна интернет-магазина косметики
Сегодня мы рассмотрим результат разработка дизайна на основании разработанного прототипа.
В результате получилось 18 типовых страниц.
Дизайн сайта современный, свободный, строгий, так же не перегружен элементами.
Дизайн интернет-магазина косметики
Макет рассмотрим один - это главная страница, про которую я писал в кейсе “Разработка прототипа по сайту косметики”.
Дизайн страницы категории
Рассмотрим более подробно каждый элемент страницы категории
Рисунок 1 - Шапка сайта
Из рисунка 1:
1) Гео модуль. При нажатии открывается окно, рисунок 1.1
Рисунок 1.1- Гео
Из рисунка 1.1:
1) Город, который должен определиться, выделяется с вопросов
2) Если город верный, жмем ДА
3) Выход с Гео
4) Кнопка поиска города
5) Ввода города для поиска
6) Список городов, по умолчанию 30
2) Ссылка на салоны
3) Ссылка на страницу “Доставки”
4) Ссылка на страницу “Оплата”
5) Ссылка на страницу “Отзывы”
6) Ссылка на страницу “Покупатели”
7) Ссылка на страницу с контактами
8) Режим работы компании
9) Адрес основного офиса компании
10) Слоган
11) Логотип компании по центру, сделан акцент на бренд косметики
12) Номер телефона - кликабельный
13) Кнопка “Заказать звонок” в виде ссылки, рисунок 1.2
Рисунок 1.2 - Заказать звонок
Из рисунка 1.2:
1) Выход
2) Заголовок формы
3) Ввод имени
4) Ввод телефона
5) Ввода комментария
6) Кнопка “Заказать звонок”
7) Согласие на обработку персональных данных
14) Поиск по сайту, при нажатии показывается длинный поиск, рисунок 1.3
Рисунок 1.3 - Поиск
Из рисунка 1.3:
1) Ввод текста
2) Кнопка “Найти”
15)Вход в личный кабинет, при нажатии выходит окно для входа, рисунок 1.4
Рисунок 1.4 - Вход в личный кабинет
Из рисунка 1.4:
1) Выход
2) Название окна
3) Если уже зарегистрирован, то выбираем
4) Если не зарегистрирован то жмем, чтобы зарегистрироваться
5) Ввод e-mail или телефона для входа
6) Текст пояснения
7) Ввод пароля
8) Кнопка “Войти”
9) Если забыли пароль
10) Вход через соц сети
11) Вход через Google +
12) Вход через FB
13) Вход через Вконтакте
16) Ссылка на переход на страницу с товарами, которые добавили в избранное
17) Ссылка на переход в корзину с товарами
18) Первый пункт меню. Рисунок 1.5 меню
Рисунок 1.5 - Выпадающее меню
Из рисунка 1.5:
1) Навигация категорий
2) Категории
3) Коллекции товаров
4) Акции на товара
5) Картинка к типу направления
19) Второй пункт меню
20) Третий пункт меню
21) Четвертый пункт меню
22) Пятый пункт меню
23) Ссылка на скидки
24) Ссылка на линии продуктов
Рисунок 2 - Листинг
Из рисунка 2:
1) Хлебные крошки по центру
2) Н1
3) Наведение на коллекцию
4) Коллекция
5) Бесконечный слайдер коллекций
6) Фото товара
7) Название продукта
8) Краткое описание продукта
9) Цена товара
10) Рейтинг товара
11) Кнопка “Посмотреть подробнее”
Рисунок 3 - Фильтр
Основная задача фильтр упростить поиск товара, поэтому его необходимо по максимуму наполнить характеристиками.
Из рисунка 3:
1) Кнопка “Помощь в выборе”, данная кнопка ведет на статью, где рассказывается в данном примере о Сыворотках
2) Фильтр по цене с вводом данных
3) Заголовок фильтра
4) Выбор через чекбокс
5) Открытый список значений фильтра
6) Закрытые фильтры со значениями
Рисунок 4 - Дополнительные элементы листинга
Из рисунка 4:
1) Картинка статьи
2) Название статьи
3) Переход
4) Баннер с акцией
5) Пагинация листинга
Рисунок 5 - Дополнительные блоки для сео продвижения
Из рисунок 5:
1) Н2
2) Фото товара
3) Название товара
4) Описание товара
5) Цена товара
6) Рейтинг
7) Бесконечный слайдер
В данный блок товары добавляются вручную, чтобы добавить отсутствующие ЛСИ слова. Название и описание редактируемые.
Рисунок 6 - Текст для категории
Из рисунка 6:
1) Баннер
2) Н3
3) Текст описания
Данный блок не всегда будет необходим, только на некоторых страницах категорий.
Рисунок 7 - Подписка
Из рисунка 7:
1) Иконка
2) Заголовок
3) Поле ввода email
4) Кнопка подписаться
5) Текст согласия на обработку персональных данных
Рисунок 8 - Подвал
Из рисунка 8:
1) Логотип
2) Копирайт
3) О компании
4) Страницы о компании
5) Категории
6) Страницы категорий
7) Покупателю
8) Страницы покупателю
9) Телефон
10) Кнопка “Заказать звонок”
11) Соц сети
12) Адрес
13) Режим работы
Мы рассмотрели с вами дизайн страницы каталог для интернет-магазина косметики. Все просто и лаконично. Конечно с точки зрения SEO может многого не хватить, но это будет компенсировать некоторыми блоками.
Сайт на данный момент дорабатывается.
P.S.
Дизайн разрабатывался на основании брендового представления, так как продукция узкая одного бренда, его необходимо красиво представить, но при этом постараться уследить за возможностью поискового продвижения.
