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

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

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

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

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-магазина, теперь проверьте слои, уберите весь РјСѓСЃРѕСЂ, Р° затем отдайте этот макет своему разработчику. Р?ли даже лучше — сами его сверстайте!