Разрабатываем шаблон Shopify в Photoshop для продажи изделий ручной работы

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

Материалы к руководству

• Фотографии с Unsplash;
• Фотографии с StockSnap.io;
• Шрифт Source Sans Pro;
• Шрифт Source Serif Pro.

Определяем цели бизнеса

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

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

Подготовительные работы

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

Этап 1

Начните с поиска картинок и составления цветовой палитры. Для этого дизайнеры часто используют Pinterest, но мы рекомендуем вам gomoodboard.com – ресурс, который разрабатывался специально для того, чтобы помочь людям создавать mood boards (доска настроения):

Этап 2

Теперь займемся составлением цветовой схемы, на которой будет основан наш дизайн. Цвета должны соответствовать вашему бренду и целевой аудитории. Можно воспользоваться генератором цветовой палитры наподобие Adobe Color CC (прежнее название Kuler).

Загрузите изображение из вашей доски настроения, и посмотрите, какие цвета вам предложит сервис. Подкорректируйте палитру и сохраните ее для дальнейшего использования:

Подбор шрифтов

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

Подготовка документа к работе

Создадим новый документ в Adobe Photoshop, и выставим необходимые направляющие (Guides).

Этап 1

Откройте Adobe Photoshop, и создайте новый документ (CTRL+N). Укажите размеры вашего проекта. Для нашего документа мы используем значение 1400 на 3564 пикселя.

Этап 2

Выставьте направляющие таким образом, чтобы в шаблоне было достаточно пространства, и он выглядел естественно. Направляющие гарантируют то, что все элементы в шаблоне будут четко расставлены.

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

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

Совет: специальный Photoshop-плагин GuideGuide поможет вам ускорить и облегчить эту процедуру.

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

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

Этап 1

Создайте новую группу слоев под названием «Navigation», и установите горизонтальную направляющую на 130px. Здесь будет располагаться наш логотип, навигационные ссылки и форма поиска. Поместите логотип в левой части. Если у вас пока его нет, то поместите туда простую прямоугольную фигуру:

Этап 2

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

С помощью инструмента «Горизонтальный текст» (Horizontal Type Tool – T) введите текст нужных ссылок рядом с логотипом, оставив немного свободного пространства:

Этап 3

Форма поиска – это обязательный атрибут любого интернет-магазина. Она должна быть заметной, и доступ к ней должен быть легким, поэтому мы помещаем ее в правом верхнем углу. Для ее создания нам понадобится инструмент «Прямоугольник» (Rectangle Tool – U) и «Горизонтальный текст». Обратите внимание на то, как используются цвета, взятые из Adobe Color CC:

Этап 4

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

Используя инструмент «Прямоугольник», нарисуйте фигуру (любого цвета) размером 1400 на 700px, и поместите ее прямо под навигационным меню (помните ту горизонтальную направляющую 130px?). Затем перетащите выбранное изображение на рабочую область, и поместите слой с этим изображением поверх слоя с только что созданным прямоугольником.

После этого зажмите клавишу Alt и наведите курсор на слой с изображением. Вы должны увидеть маленькую, указывающую вниз стрелку. Затем отпустите левую клавишу мыши, чтобы создать «Обтравочную маску» (Clipping Mask), при помощи которой изображение будет показываться только в границах созданного ранее прямоугольника.

Нажмите CTRL+T, чтобы масштабировать изображение. Не забудьте зажать Shift, чтобы изображение пропорционально изменялось в размерах:

Этап 5

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

Выберите инструмент «Градиент» (Gradient Tool – G), и настройте его цвет от черного (#000000) к прозрачному. После этого зажмите клавишу Shift и проведите курсором от низа изображения до его середины, чтобы получить необходимый результат.

Затем сделайте то же самое в обтравочной маске и уменьшите непрозрачность слоя до 50%, чтобы он был не таким выраженным. Переименуйте слой в «Shadow», чтобы его в дальнейшем было проще найти:

Этап 6

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

Этап 7

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

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

Входим в доверие

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

Этап 1

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

Разместите заголовок, который может заинтересовать ваших посетителей, а также небольшое описание. Мы использовали темно-серый (#282723) шрифт Source Sans Pro (Semibold) с размером 24px.

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

Этап 2

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

Активируйте инструмент «Прямоугольник» и создайте прямоугольную фигуру. После этого, перетащите фотографию вашей продукции в Photoshop, поместите ее поверх прямоугольной фигуры и создайте обтравочную маску. Для изменения размеров изображения воспользуйтесь сочетанием клавиш CTRL+T:

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

Этап 3

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

Выберите шрифт Source Serif Pro и впишите заголовок, используя все тот же темно-серый цвет. Более светлым оттенком укажите цену:

Этап 4

Разместите все слои с продукцией в одной группу и продублируйте их при помощи сочетания клавиш CTRL+J. Поместите их между ранее выставленными вертикальными направляющими, оставив достаточный промежуток:

Этап 5

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

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

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

Этап 6

Теперь займемся еще одним разделом, в котором будут размещаться «популярные» товары. Людям всегда нужно одобрение своего выбора, поэтому интернет-магазинам выгодно предлагать «популярные» товары, которые другие люди уже опробовали и могут рекомендовать.

Продублируйте (CTRL+J) и отредактируйте заголовки, описания и товары из раздела, над которым мы работали на прошлых этапах. Создайте еще несколько копий товаров и расставьте их в сетке 3 на 2:

Привлекаем лидов

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

Этап 1

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

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

Этап 2

Инструментом «Горизонтальный текст» введите соответствующий заголовок. Мы снова использовали шрифт Source Serif Pro для заголовка и описания, и шрифт Source Sans Pro для даты.

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

Этап 3

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

Этап 4

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

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

Этап 5

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

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

Этап 6

У каждого шаблона должен быть подвал со всеми нужными ссылками: поддержка, контактные данные, ссылки на социальные сети и многое другое.

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

Последний штрих: добавьте данные об авторском праве:

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

Перевод статьи “Design a Shopify Theme for Handcrafted Goods in Photoshop” был подготовлен дружной командой проекта Сайтостроение от А до Я.