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

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

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

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

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

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

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

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

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

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

Этап 1

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

Разрабатываем шаблон Shopify в Photoshop для продажи изделий ручной работы
gomoodboard.com – простой в использовании инструмент для составления досок настроения

Этап 2

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

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

Разрабатываем шаблон Shopify в Photoshop для продажи изделий ручной работы
Adobe Color CC может создавать цветовые палитры с помощью картинок

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

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

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

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

Этап 1

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

Этап 2

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

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

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

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

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

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

Этап 1

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

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

Этап 2

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

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

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

Этап 3

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

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

Этап 4

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

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

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

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

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

Этап 5

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

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

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

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

Этап 6

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

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

Этап 7

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

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

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

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

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

Этап 1

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

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

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

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

Этап 2

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

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

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

Этап 3

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

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

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

Этап 4

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

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

Этап 5

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

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

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

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

Этап 6

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

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

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

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

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

Этап 1

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

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

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

Этап 2

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

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

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

Этап 3

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

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

Этап 4

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

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

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

Этап 5

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

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

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

Этап 6

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

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

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

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

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *