Разработка дизайна для сайта сумок Redmond

Сегодня мы рассмотрим результат разработки дизайна на основании разработанного прототипа.

В результате получилось 32 типовых страниц и 8 форм..

Дизайн сайта современный, свободный, строгий, так же не перегружен элементами.

Разработка дизайна интернет-магазина сумок Redmond

Дизайн интернет-магазина сумок

Макет рассмотрим один - это карточка товара, про которую я писал в кейсе “Разработка прототипа по сайту сумок Redmond”.

Дизайн карточки товара интернет-магазина Redmond

Рассмотрим более подробно каждый элемент карточки товара

Дизайн карточки товара интернет-магазина сумок 1

Из дизайна 1:

1. Хлебные крошки
2. Н1 - сделан над фотографией товара
3. Фотография основная - заставка если нет фото товара
4. Слайдер видов товара
5. Миниатюры дополнительных фотографий товара
6. Добавление в избранное
7. Плашка “Новинка”
8. Рейтинг товара по отзывам
9. Артикул товара
10. Наличие товара
11. Цена до скидки - выделена сероватым цветом и перечеркнута
12. Дополнительно показывается % скидки
13. Основная цена крупным шрифтом
14. Экономия при покупке данного товара
15. Кнопка “В корзину” - выделена красным, что дает ей акцент
16. Увеличение количество товаров для покупки
17. Написание вручную количество товара для покупки
18. Уменьшение количество товаров с помощью кнопки
19. Кнопка “Купить в 1 клик” - сделана на сером фоне
20. Функция для чемоданов - Размер колеса
21. Выбор из выпадающего списка размера колес
22. Основные характеристики товара
23. Всплывающее окно с пояснением характеристики
24. ВЫбор цвета товара
25. Информация о доставке товара
26. Возможность забора товара в магазине сегодня
27. Список магазинов, где данный товар присутствует

Дизайн карточки товара интернет-магазина сумок 2

Из дизайна 2:

1. Таб “Описание товара” - активная ситуация с подчеркиванием
2. Таб “Магазины” - неактивный серый цвет
3. Таб “Доставка и оплата” - неактивный серый цвет
4. Таб “Отзывы” - неактивный серый цвет
5. Таб “Гарантия” - неактивный серый цвет
6. Текстовое описание товара в ширину сайта
7. Характеристики товара в 2 столбика
8. Товар может относиться к нескольким разделам на сайте
9. Слайдер разделов
10. Табы разделов на сером фоне

Дизайн карточки товара интернет-магазина сумок 3

Из дизайна 3:

1. С этим товаром покупаю - дополнительные товары, которые могут понравится покупатлю
2. Фото товара
3. Добавление в избранное
4. Плашка “Хит” на красном фоне
5. Рейтинг товара по отзывам в виде 5 звездочек
6. Артикул товара
7. Количество отзывов к товару
8. Название товара выделенное шрифтом и толщиной
9. Цена товара крупным размером
10. Скидка на товар с акцентом на экономию при покупке
11. Выбор цвета товара
12. Кнопка “В корзину” - выделена красным цветом
13. Кнопка “Купить в 1 клик” - на сером фоне

Дизайн карточки товара интернет-магазина сумок 4

Дополнительное SEO описание товар

Дизайн карточки товара интернет-магазина сумок 5

Из дизайна 5:

1. Таб “Магазины” активный
2. Показ магазинов списком - выделено цветом
3. Показ магазинов на карте - не активный
4. Количество товаров в магазине
5. Название магазина
6. Адрес магазина
7. Кнопка “Забронировать” - выделена красным

Дизайн карточки товара интернет-магазина сумок 6

Из дизайна 6:

1. Таб “Магазины” - активный
2. Магазины на карте
3. На карте магазин с иконкой
4. Адрес магазина
5. Время работы
6. Телефон магазина
7. Наличие товара в магазине
8. Название магазина
9. Адрес магазина
10. Кнопка “Забронировать” - выделена красным

Дизайн карточки товара интернет-магазина сумок 7

Из дизайна 7:

1. Таб “Доставка и оплата” - активный
2. Доставка по городу
3. Предупреждение
4. Оплата для города
5. Доставка по России
6. Оплата по России

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

Дизайн карточки товара интернет-магазина сумок 8

Из дизайна 8:

1. Таб “Отзывы” - активный
2. Фото покупателя
3. ФИО покупателя
4. Рейтинг, который оставил покупатель для товара
5. Дата отзыва
6. Текст отзыва
7. Фото менеджера
8. ФИО менеджера
9. Ответ менеджера на отзыв
10. Фотографии товара, которые прикрепил покупатель
11. Форма для написания отзыва к товару
12. Поле для ввода отзыва
13. Поля для ввода ФИО
14. Поле для ввода возраста
15. Поле для ввода e-mail
16. Прикрепление фотографий
17. Установка рейтинга для товара
18. Соглашение на обработку персональных данных
19. Кнопка “Оставить отзыв” - выделена красным цветом

Дизайн карточки товара интернет-магазина сумок 10

Таб “Гарантия - активный”. Обычный текст с выделенными заголовками и пунктами.

Мы рассмотрели с вами дизайн страницы карточки товара для интернет-магазина сумок Redmond. Все просто и лаконично. Посмореть карточку товара можно перейдя на сайт https://redmond.ru/