Создавайте различные дизайны и зарабатывайте на них! Зарегистрироваться на стоке!

Разрабатываем дизайн окна быстрого просмотра карточки товаров. Урок #1 Прототип

/ Сергей Нуйкин / Веб-дизайн



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

Сегодня мы разработаем прототип такого окна карточки товара. Строить прототип я буду в фотошопе, мне так привычнее, если вам так неудобно можете подобрать для себя лучший выбор прототипирования. Также в работе буду использовать модульную сетку.

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

карточка быстрого просмотра товаров

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

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

Понравилась статья?
Подпишитесь на обновления сайта:


Информация о политике конфиденциальности
Поделитесь статьей с друзьями:

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

Добавить комментарий:

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!:

Нажимая на кнопку «Отправить комментарий», вы соглашаетесь с Политикой конфеденциальности.