Уроки Веб и приложения Алексей Шаповал 30 сентября 2015

Как разработать макет для интернет-магазина в Фотошоп

Сложность урока: Средний

Финальный результат урока

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

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

  1. Фотографии с unsplash.com
  2. Фотографии с stocksnap.io
  3. Шрифт Source Sans Pro с Font Squirrel
  4. Шрифт Source Serif Pro с Font Squirrel

Скачать архив с материалами к уроку

Определяем цели

Перед началом работы над дизайном необходимо определиться с бизнес-целями нашего проекта. Ваша главная задача - сделать бренд известным? Или продавать товары новым покупателям? А может быть сначала показать ценность продукта, рассказать детали и продать позже? Необходимо подумать о маркетинге, бизнес-целях, а также потребностях посетителя, чтобы создать дизайн, соответствующий целевой аудитории.

Для начала задайте себе такие вопросы:

  1. Что мы будем продавать?
  2. Кто будет заинтересован в покупке наших продуктов?
  3. Почему они должны покупать именно наши продукты?
  4. Как мы собираемся доказать ценность своего продукта?

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

Подготовка

Перед тем, как переходить к Photoshop, давайте разберемся с некоторыми первичными данными, например, цветами, стилем и общим направлением.

Шаг 1

Начните собирать понравившиеся изображения для создания "доски настроения" и цветовой палитры. Обычно я использую Pinterest, но лучшим выбором станет gomoodboard.com. Этот сервис специально разработан для сбора вдохновляющих картинок в одном месте.

gomoodboard.com – простой способ собрать вдохновляющие материалы в одном месте

Шаг 2

Следующим шагом будет подбор цветовой палитры для нашего дизайна; она должна сочетаться с брендом, а также привлекать целевую аудиторию. Очень полезно использовать генераторы цветовой палитры, например, Adobe Color CC (бывший Kuler), которые помогут сэкономить время на подбор цветов.

Загрузите изображение с вашего мудборда (мудборд - доска настроения) и посмотрите на результат. Можете отредактировать палитру под свои нужды, после чего сохраните ее для будущей работы.

Выбираем шрифты

Получив достаточно вдохновения, мы будем работать с шрифтами Source Pro, включая sans и serif версии. Их использование придаст дизайну сбалансированный вид, а заголовки сделает заметнее.

Подготавливаем документ

Перед тем, как начинать креативную часть в Adobe Photoshop, давайте разберемся с основным вещами - созданием документа, а также настройкой направляющих.

Шаг 1

Создайте новый документ, нажав Ctrl + N. Выберите комфортный размер - в моем случае это 1400х3564px.

Шаг 2

Теперь нужно добавить направляющие, чтобы у макета было достаточно места, а сам он выглядел сбалансированным. Направляющие обеспечат аккуратность, а также позволят определить ширину нашего сайта. Перейдите в меню Просмотр > Новая направляющая (View > New Guide) и добавьте несколько направляющих. Я обычно выбираю 1000px в качестве точки отсчета, после чего добавляю несколько дополнительных линий по краям для создания чувства свободы..

Примечание: В этом уроке использовались такие направляющие: вертикальные на 200px, 500px, 550px, 700px, 850px, 900px, 1200px.

Совет: Также можете использовать Photoshop плагин GuideGuide. Это еще больше упростит процесс.

Приветствуем новых покупателей

Мы начнем наш дизайн с привлекательной верхней зоны, чтобы захватить внимание посетителя и сразу рассказать, о чем этот сайт.

Шаг 1

Создайте новую группу под названием "Navigation", добавьте новую горизонтальную направляющую на 130px. Здесь будет размещен наш логотип, меню навигации и поиск. Разместите логотип слева. Если у вас его нет, просто создайте прямоугольник, а на нем напишите название сайта.

Шаг 2

Теперь напишите названия ссылок меню. Еще на этапе планирования вы должны знать, что необходимо включить в навигацию для максимального удобства посетителя. Используйте инструмент Горизонтальный текст (Horizontal Type Tool), чтобы написать названия пунктов. Разместите их рядом с логотипом, оставив достаточно свободного места.

Шаг 3

Поиск - невероятно важная функция для интернет-магазина. Сделайте поле поиска заметным и доступным, разместив его в правой верхней части. Для его создания используйте инструмент Прямоугольник (Rectangle Tool), а затем Горизонтальный текст (Horizontal Type Tool). Обратите внимание на то, что цвета получены из изображения при помощи Adobe Color CC.

Шаг 4

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

При помощи инструмента Прямоугольник (Rectangle Tool) нарисуйте прямоугольник размером 1400x700px (цвет не имеет значения). Разместите его прямо под навигацией (помните горизонтальную направляющую на 130px? Она как раз для этой фигуры). Затем перетяните выбранное изображение, разместив его над слоем с прямоугольником.

После этого зажмите клавишу Alt и подведите курсор к линии между слоями на панели Слоев (Layers panel). Когда вы увидите небольшую стрелку, указывающую вниз, кликните мышкой. Это создаст Обтравочную маску (Clipping Mask). Таким образом, изображение будет видно только в зоне прямоугольника.

Нажмите Ctrl + T, чтобы изменить размер изображения. При этом удерживайте нажатой клавишу Shift. Так вы сохраните пропорции во время редактирования.

Шаг 5

Чтобы наше изображение привлекало больше внимания, давайте добавим градиент, переходящий от прозрачного вверху до черного внизу. Выберите инструмент Градиент (Gradient Tool), затем настройте его так, чтобы цвет переходил от черного #000000 до прозрачного. После этого, удерживая нажатой клавишу Shift, перетяните мышку от низа до середины изображения. Затем примените Обтравочную маску (Clipping Mask) и сократите Непрозрачность (Opacity) слоя до 50%. Переименуйте слой, назвав его "Shadow" для более простой идентификации в дальнейшем.

Шаг 6

Теперь пришло время для мощного заголовка, который привлечет внимание посетителя и заставит его узнать больше. Используйте крупный, жирный Source Sans Pro для короткого заголовка. Я выбрал Source Sans Pro (Black) размером 70px с трекингом (tracking) 160.

Шаг 7

Мы завладели вниманием посетителя, теперь нам нужно дополнительное сообщение и, что еще важнее, призыв к действию (часто называемый Call To Action - CTA). Я использовал Source Serif Pro (Regular) размером 28px для подзаголовка, а для CTA кнопки взял цвет блока поиска, чтобы сохранить общий стиль.

Обратите внимание на расстояние, которое я использую. Всегда оставляйте достаточно места вокруг элементов. Благодаря этому они воспринимаются быстрее и выглядят более организовано. Также можно заметить, что текстовые слои размещены ближе друг к другу. Это сделано согласно в соответствии с принципами гештальтпсихологии.

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

Создаем доверие

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

Шаг 1

Поскольку мы сделали верхнюю часть сайта довольно минималистичной, мы продолжим в том же духе для оставшейся части макета.

Разместите заголовок, который заинтересует посетителя и небольшое описание, которое привлечет его еще больше. Я использовал Source Sans Pro (Semibold) размером 24px темно-серого цвета #282723. Убедитесь, что вы оставили достаточно места над заголовком, чтобы он сочетался с верхней частью макета.

Для описания используйте что-нибудь более светлое. Тогда текст будет выглядеть визуально слабее и восприниматься как второстепенный. Для этого я использовал шрифт Source Serif Pro (Regular) размером 16px серого цвета #adadad.

Шаг 2

Эффективный способ создать доверие - использовать высококачественные фотографии, которые вызывают желание просмотреть или купить товар. Не пожалейте время на то, чтобы сделать качественные фото своих товаров или наймите профессионального фотографа. Для нашего урока я буду использовать фиктивные продукты, поэтому я не буду ничего фотографировать и просто возьму готовые рисунки с сайтов Unsplash или StockUp.

Выберите инструмент Прямоугольник (Rectangle Tool), нарисуйте прямоугольную фигуру. После этого перетяните фотографию своего продукта в документ, разместите ее над прямоугольником, а затем создайте Обравочную маску (Clipping Mask). Если требуется, измените размер изображения, нажав Ctrl + T.

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

Шаг 3

Для сохранения простоты шаблона мы предоставим только базовую информацию, включая название продукта и цену (это может заставить посетителя узнать больше).

Выберите тот же Source Serif Pro, затем введите название продукта, используя темно-серый цвет, который мы взяли для заголовка этой секции (Создаем доверие. Шаг 1 – прим. переводчика). После этого выберите чуть более светлый оттенок для цены, так как это второстепенная информация и она не должна визуально выделяться. Важно помнить, что все элементы (заголовки, кнопки и описания) должны быть отцентрированы.

Шаг 4

Теперь сгруппируйте все слои блока продукта и дублируйте их, нажав Ctrl + J. Затем разместите копии между вертикальными направляющими, не забывая о расстоянии между ними.

Шаг 5

Мы закончили с секцией "Trending", показывающей три продукта. Как было указано в одном из исследований, три варианта выбора лучше побуждают посетителя к действиям.

"Одна из таких техник - это так называемый "Goldilocks Effect" (так же известный как "Goldilocks Pricing"). Термин происходит от сказки "Три медведя", в которой Златовласка съела три миски каши; первая была слишком горячей; вторая - слишком холодной; третья - такой, как надо."

Теперь давайте добавим небольшую линию, которая разделит наш макет на две секции. Я использовал инструмент Линия (Line Tool) с толщиной 1px светло-серого цвета #e6e6e6, чтобы она получилась заметной, но не слишком выделялась.

Совет: удерживайте нажатой клавишу Shift, чтобы создать ровную линию.

Шаг 6

Теперь давайте создадим еще одну секцию, в которой покажем больше продуктов. Назовем ее "Popular". Люди всегда ищут подтверждение правильности своего выбора, поэтому блок с продуктами, которые понравились другим людям - отличное доказательство того, что вещь стоит потраченных на нее денег.

Дублируйте (Ctrl + J) продукты секции "Trending", но при этом измените их заголовки, названия и описания. Сделайте еще несколько копий, чтобы получилась сетка 3х2.

Генерируем продажи

После того, как мы использовали изображения для привлечения внимания, пора "зацепить" посетителя на случай, если он не собирается покупать прямо сейчас. Таким образом он сможет вернуться и все-таки купить товар.

Шаг 1

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

Выберите инструмент Прямоугольник (Rectangle Tool) и нарисуйте большой прямоугольник, который будет служить фоном нашей секции. Используйте очень светлый серый #fbfafa, чтобы визуально отделить новую секцию от предыдущих блоков. Теперь дублируйте заголовок и описание предыдущей секции, а затем разместите их над фоном.

Шаг 2

Выберите инструмент Горизонтальный текст (Horizontal Type Tool) и введите заголовок, дату, а также короткий текст поста. Я снова использую Source Serif Pro для заголовка и описания, а Source Sans Pro - для даты.

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

Шаг 3

Теперь поместите все слои с постом блога в одну группу, затем дважды дублируйте ее, нажав Ctrl + J. Разместите копии между вертикальными направляющими, так само оставляя достаточно места по бокам.

Шаг 4

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

Снова выберите инструмент Прямоугольник (Rectangle Tool), выберите более темный цвет, например, #282723, после чего нарисуйте фон для нашей секции. При помощи заметно более темного цвета вы создадите контраст, который привлечет внимание посетителя.

Шаг 5

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

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

Шаг 6

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

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

Последний штрих: добавьте строчку с информацией об авторских правах в самом низу.

Поздравляю!

Отличная работа! Мы закончили наш макет для Shopify-магазина, теперь проверьте слои, уберите весь мусор, а затем отдайте этот макет своему разработчику. Или даже лучше - сами его сверстайте!

Автор: Tomas Laurinavicius

Источник: design.tutsplus.com

Комментарии 104

Спасибо большое за урок, хоть и написано там 2015, рад был познакомиться с методикой дизайна сайта.

Благодарствую!

Спасибо за урок!

спасибо!было интересно

Спасибо за урок!

Интересный урок, благодарю )

Спасибо, хороший урок

Никогда прежде не пробовал ВЕБ дизайн.
Спасибо за урок!

Очень полезный урок!

отличный урок!

Большое спасибо, очень полезный туториал :)

Очень круто. Я делал по подобной структуре www.dlysenko.com/faina

Спасибо за урок

спасибо за урок

Немножко не так,но все же.

Спасибо за урок!

Спасибо за урок)

Очень нравится как подобраны цвета. Я использовал так же на своем Очень круто. Я делал по подобной структуре www.dlysenko.com/faina

классный урок)

Спасибо, хороший урок!

Еще 30
Добавить комментарий / работу

Новые работы пользователей

По заданным фильтрам работы не найдены

Попробуйте изменить критерий поиска или сбросить фильтры


Смотреть все работы

Предыдущая Следующая
Добавлена {{work.date}}
Не удалось загрузить работу. Возможно она была удалена.
GIF {{work.bite}} Мб Загрузить
Редактировать Удалить
18+
Работа имеет содержимое для 18+ лет
{{work.views}} {{work.comments}}
Жалоба

Комментарии {{work.childs.length || 0}}

Видео к работе
Популярные работы автора:
Работа получила награды:
Курсы автора:
Онлайн-курс

Жалоба

Опишите суть жалобы, при необходимости добавьте ссылки на скриншоты

Спасибо! Ваше обращение ушло на рассмотрение.

Название работы

Описание работы (необязательно)

Комментарий

Ваша миниатюра:

Название:
{{name}}
Описание:

Исходник:

{{source.name}} {{source.name}}

Тэги:
#{{tag.label}}

Есть ли у вас исходник к работе?

Исходник — это файл из исходных изображений, которые использовались для создания вашей работы. Исходник позовляет лучше понять вашу работу. Он не обязателен, но работы с исходниками получают больше лайков и имеют право на участие в еженедельных конкурсах.
jpg-файл, максимальный размер 1920x1080px

Пример исходника

Выберете тэги работы:

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

Не более десяти тэгов на одну работу

Комментарии к работе будут отключены, на их месте будет выведена реклама.

После добавления работы:


Запланировать публикацию

Отменить планирование
Запланировать

Используя данный сайт, вы даёте согласие на использование файлов cookie, данных об IP-адрес, помогающих нам сделать его удобнее для вас. Подробнее