Разрабатываем шаблон 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. Теперь осталось упорядочить слои во всем документе, и удалить все ненужное. После этого шаблон готов к передаче верстальщикам и разработчикам.