Магазин товаров ручной работы

31 августа 2015 · Глеб Х. · «Мир Фотошопа»

Конечный результат:

Ресурсы урока:

Цели

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

  • Что мы продаём?
  • Кого заинтересуют наши товары?
  • Почему они должны купить их именно у нас?
  • Какую ценность представляют наши товары?

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

Подготовка

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

Шаг 1

Во-первых, нужно подобрать изображения. Их можно собрать на мудбоарде (moodboard) или покопаться на сайте Pinterest.

Шаг 2

Далее определим цветовую схему дизайна. Можно воспользоваться генератором цветовой палитры Adobe Color CC. Загрузите на сайт одно из изображений, которые нашли ранее. Цвета будут сгенерированы автоматически. Подберите цвета и сохраните их для будущего использования.

Выбор шрифта

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

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

Шаг 1

Создайте новый документ в Фотошопе (Ctrl + N) размером 1400х3564 пикселя.

Шаг 2

Давайте сразу разграничим область холста, чтобы было легче работать. В этом нам помогут направляющие. Создайте их на отметках 200px, 500px, 550px, 700px, 850px, 900px и 1200px через меню View → New Guide. Ширина веб-страницы будет равна 1000 пикселям.

Приветствие для новых посетителей

Когда Вы работает над дизайном сайта, который что-то продаёт, очень важно уделить внимание верхней части. Она должно захватывать внимание посетителя и создавать понимание о тематике сайта.

Шаг 1

Создайте новую группу «Navigation». Отведите новую горизонтальную направляющую на отметке 130 пикселей. Она отделит навигацию и поиск по сайту от остальной части. Расположите логотип сайта у левого края. Если у Вас нет готового логотипа, просто нарисуйте прямоугольник и напишите на нём что-нибудь

Шаг 2

Инструментом Horizontal Type Tool (T) напишите названия разделов сайта.

Шаг 3

Поиск — очень важный элемент сайта. Расположите его справа от навигационных ссылок, чтобы пользователь имел к нему быстрый доступ. Текст поискового поля напишите текстовым инструментом, а кнопку создайте при помощи инструмента Rectangle Tool (U).

Шаг 4

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

Выберите инструмент Rectangle Tool (U) нарисуйте фигуру размером 1400х700 пикселей и расположите её прямо под навигационной панелью. Верхний край должен находиться на уровне направляющей (130 пикселей). Затем вставьте какое-нибудь изображение поверх прямоугольника и создайте обтравочную маску (Ctrl + Alt + G), чтобы обрезать его. Используйте режим Free Transform (Ctrl + T) для изменения размер и расположения изображения.

Шаг 5

Чтобы помочь посетителю сфокусироваться именно на горизонтальном центре изображения, мы добавим градиентную заливку. Создайте новый слой, выберите инструмент Gradient Tool (G): от чёрного к прозрачному. Удерживая Shift, протяните градиент от нижнего края изображения к середине. Создайте обтравочную маску (Ctrl + Alt + G) и уменьшите непрозрачность слоя до 50%. Назовите слой «Shadow».

Шаг 6

Шрифтом «Source Sans Pro (Black) » размером 70 пикселей напишите что-нибудь поверх изображения, что привлечёт внимание посетителей и подтолкнёт их на изучение информации о товарах. Установите Tracking между буквами — 160.

Шаг 7

Добавим ещё одну строчку текста и CTA кнопку. Текст напишите шрифтом «Source Serif Pro (Regular) ». Под ним такую же добавьте кнопку, которую мы создавали для поиска.

Основной интерес посетителя

После того, как мы привлекли внимание посетителей, нужно предоставить им товары, которые мы продаём.

Шаг 1

Так как верхняя часть сайта выполнена в минималистичном стиле, то и остальные секции будут таким же. Напишите заголовок и небольшое описание о товарах, которое заинтересует посетителей. Используйте шрифт «Source Sans Pro (Semibold) » размером 24 пикселя цветом #282723. Над заголовком нужно оставить достаточно места, чтобы новая секция отделялась от предыдущей.

Для описания используйте шрифт Source Serif Pro (Regular) размером 16 пикселей цветом #adadad.

Шаг 2

Один из приёмов вызвать интерес у посетителя — разместить на главной странице привлекательные фотографии товаров. Стоит уделить время на съёмку товаров и даже доверить эту работу профессиональному фотографу.

Инструментом Rectangle Tool (U) создайте квадрат и наложите на него фотографию.

Шаг 3

Шрифтом «Source Serif Pro» напишите название товара и цену. Цена товара должна отличаться от названия по цвету, так как имеет меньшую значимость. Также её лучше выровнять по центру.

Шаг 4

Объедините слои одного товара в группу. Создайте пару копий группы и переместите их вправо. Замените фотографии, названия и цены.

Шаг 5

Давайте отделим готовую секцию серой линией. Инструментом Line Tool (U) нарисуйте 1-пиксельную линию цветом #e6e6e6. Удерживайте Shift, чтобы линия была прямой.

Шаг 6

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

Для потенциальных покупателей

Шаг 1

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

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

Шаг 2

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

Обратите внимание на визуальную иерархию: заголовок имеет самый тёмный цвет, описание и дата — светлый. Это помогает направлять внимание при чтении.

Шаг 3

Создайте пару копий новости, измените текст и расположите их в три колонки.

Шаг 4

Внизу не помешает ещё одна секция CTA. Создайте полоску на всю ширину цветом #282723. Такой контраст сразу привлечёт внимание посетителя.

Шаг 5

Напишите немного о плюсах подписки на рассылку, создайте два поля и кнопку CTA.

Шаг 6

В самом низу пусть будет навигация и информация о правах.

Конечный результат:

Поделитесь уроком

Чириканье Мыло Вконтактик Рожи ЖэЖэ Яша

Правовая информация

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

Переведено с сайта webdesign.tutsplus.com, автор перевода указан в начале урока.