Дизайн целевой страницы в Фотошоп

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

Р’ этом СѓСЂРѕРєРµ РІС‹ узнаете, как создать дизайн элегантного лендинга для вымышленного сервиса «РґРЅРµРІРЅРёРє благодарности».

Мы начнем с разметки, очень быстро разработав макет при помощи Adobe Photoshop. Мы будем использовать некоторые базовые и средние по сложности техники, чтобы создать этот дизайн, а затем иметь возможность переделать его. Давайте начнем!

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

Чтобы следовать шагам урока вам потребуются некоторые (бесплатные) материалы:

• РђСЂС…РёРІ СЃ исходными материалами

Готовим документ

Шаг 1

РњС‹ начнем СЃ создания РЅРѕРІРѕРіРѕ документа Photoshop. Для этого перейдите РІ меню Файл > Создать (File > New). Р?спользуйте настройки, указанные ниже. Р’С‹ можете создать документ любых предпочитаемых размеров, РІ интернете нет фиксированной ширины.

Шаг 2

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

Заметка: Направляющие, используемые в этом уроке: вертикальные на 200px, 500px, 700px, 900px и 1200px.

Совет: Вы также можете использовать Photoshop плагин GuideGuide , чтобы ускорить процесс.

Шаг 3

Согласно с Этикетом Photoshop, мы аккуратно все организуем, чтобы было легко управлять документом и редактировать его. Давайте создадим три группы слоев и назовем их Заголовок, Контент,Подвал. Чтобы создать группу, перейдите в меню Слои > Новый > Группа (Layer > New > Group) и назовите каждый, как было указано выше. Для быстрого создания групп, кликните по иконке папки в панели слоев.

Работаем над зоной заголовка

Заголовок или Р·РѕРЅР° «РЅР°Рґ СЃРіРёР±РѕРј» (что Р±С‹ это РЅРµ значило РІ современном РјРёСЂРµ) играет очень важную роль для взаимодействия СЃ пользователем Рё обеспечения уверенности РІ том, что посетитель останется РЅР° сайте. Для шаблона этой посадочной страницы СЏ использую фотографию РґРІСѓС… людей, сидящих РЅР° скамейке; РѕРґРёРЅ РёР· РЅРёС… держит СЂСѓРєРё РІ РІРѕР·РґСѓС…Рµ, демонстрируя позитивные эмоции Рё счастье.

Шаг 1

Для начала давайте создадим фон блога. Р’ РіСЂСѓРїРїРµ «Р—аголовок» нарисуйте прямоугольник черного #000000 цвета, используя инструмент Прямоугольник (Rectangle Tool). Р’ моем случае СЏ нарисовал фигуру размером 1400x728px Рё поместил ее РІ верхней части документа.

Теперь загрузите фотографию Chillin’ in the sun, перетяните ее в документ Photoshop и разместите над слоем с прямоугольником. Переименуйте слой с изображением во что-нибудь понятное, например я использовал IMG. Нажмите и удерживайте кнопку Alt и переведите указатель мыши на слой с фото, пока не увидите маленькую стрелку, указывающую вниз, после чего кликните левой кнопкой мыши и отпустите ее. Вы только что создали обтравочную маску (Clipping Mask). Для завершения, уменьшите Непрозрачность (Opacity) слоя IMG до 70%, чтобы текст, который мы поместим наверх, был читаемым.

Теперь нажмите Ctrl + T, чтобы изменить размер фото под ваши нужды.

Совет: Удерживайте кнопку Shift и вы сможете трансформировать фото пропорционально.

Шаг 2

Теперь давайте создадим глобальную навигацию для нашего лендинга, чтобы люди могли перемещаться по сайту.

Создайте РЅРѕРІСѓСЋ РіСЂСѓРїРїСѓ СЃ названием «РќР°РІРёРіР°С†РёСЏ», поместите ее РїРѕРґ РіСЂСѓРїРїРѕР№ «Р—аголовок». После этого, выберите инструмент Прямоугольник (Rectangle Tool) Рё нарисуйте белый прямоугольник между первой Рё последней вертикальной направляющей. Установите высоту РЅР° 60px, чтобы элементы навигации могли «РґС‹С€Р°С‚СЊ» Рё выглядели опрятно. Наконец, передвиньте блок навигации РЅР° 30px РІРЅРёР·, чтобы получить эффект невесомости, который отлично смотрится СЃ нашим изображением.

Шаг 3

Теперь давайте нарисуем логотип Рё добавим несколько ссылок, чтобы придать нашей панели пригодный для использования РІРёРґ. Для логотипа СЏ просто написал «Grttd», используя шрифт Playfair Display (Bold Italic) размером 26px Рё темно-серым цветом #0e0e0e.

Для ссылок навигации СЏ использовал шрифт Source Sans Pro 14px СЃ увеличенным расстоянием между буквами. Для главного призыва Рє действию «Sign up» СЏ использовал Жирный (Black) зеленый#96c218 цвет. РњС‹ закончили СЃ РіСЂСѓРїРїРѕР№ «РќР°РІРёРіР°С†РёСЏ», поэтому сверните ее, кликнув РЅР° маленькую РёРєРѕРЅРєСѓ треугольника СЂСЏРґРѕРј СЃ именем РіСЂСѓРїРїС‹.

Шаг 4

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

Так как у нас довольно темный фон, для верхней части более логично использовать бледный текст, чтобы создать высокий контраст и обеспечить читабельность. Я использовал белый #FFFFFF текст, набранный шрифтом Source Sans Pro (Black) 80px с высотой строки 86px. Поместите его примерно на 120px ниже от панели навигации, чтобы у текста было достаточно места, и он воспринимался как важный.

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

Для более вдохновляющих комбинаций оцените: Google Web Fonts Typographic Project  и статью A Beginner’s Guide to Pairing Fonts.

Для этого урока я использовал белый #FFFFFF шрифт Playfair Display (Italic) размером 26px и переместил его на 40px ниже от основного заголовка.

Шаг 5

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

Создайте РЅРѕРІСѓСЋ РіСЂСѓРїРїСѓ, назовите ее «РџСЂРёРјРµСЂ», затем выберите инструмент Эллипс (Ellipse Tool) Рё, удерживая нажатой клавишу Shift, нарисуйте РєСЂСѓРі. Р’ моем случае его размер 60x60px. После этого поместите чье-либо лицо над кружком Рё, удерживая клавишу Alt, наведите указатель мыши РЅР° слой СЃ РєСЂСѓРіРѕРј, РїРѕРєР° РЅРµ увидите маленькую стрелку, указывающую РІРЅРёР·, после чего кликните левой РєРЅРѕРїРєРѕР№ мыши Рё отпустите ее, чтобы создать Обтравочную маску. Теперь РІС‹ можете изменить размер изображения, нажав Ctrl + T.

Для этого урока я использовал случайное лицо с User Inter Faces.

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

Теперь нам нужно поместить индикатор беспрерывных заметок. Давайте создадим другой круг, на этот раз меньший и разместим в нем число. Просто, но понятно и отлично справляется со своей работой. Для цвета круга я заново использовал прежний зеленый #96c218 цвет. В моем случае, размер круга 30x30px, текст внутри него белый #FFFFFF Source Sans Pro (Bold) 14px.

Теперь давайте назовем нашего пользователя Рё РѕР±СЉСЏСЃРЅРёРј, что означает цифра. Выберите инструмент Горизонтальный текст (Horizontal Type Tool), введите РёРјСЏ Рё длину беспрерывного пользования сервисом. Р’ моем случае СЏ использовал шрифт PT Serif (Bold Italic) 16px для имени Рё Source Sans Pro (Regular) 13px для объяснения. Убедитесь, что высота строки достаточная, чтобы элементы могли «РґС‹С€Р°С‚СЊ».

Отлично, последнее, что РјС‹ сделаем перед переходом РІ РіСЂСѓРїРїСѓ «РљРѕРЅС‚ент». Нам нужен элемент Призыва Рє Действию (Call To Action — CTA), чтобы пользователь РјРѕРі сделать что-РЅРёР±СѓРґСЊ после того, как увидел изображения Рё прочитал заголовки. Создайте РЅРѕРІСѓСЋ РіСЂСѓРїРїСѓ «CTA», установите РѕСЃРЅРѕРІРЅРѕР№ цвет РЅР° белый #FFFFFF Рё выберите инструмент Прямоугольник (Rectangle Tool). После этого нарисуйте прямоугольник, РІ моем случае его размер 280x60px. Обратите внимание РЅР° согласованность высоты РєРЅРѕРїРєРё Рё навигационной панели.

После этого, напишите убедительное описание для РєРЅРѕРїРєРё. РЇ использовал «START LIVING в†’», цвет — тот же темно-серый #0e0e0e, шрифт Source Sans Pro (Semibold) 16px СЃ трекингом (Tracking) 140.

Шаг 6

Теперь РјС‹ закончили СЃ РіСЂСѓРїРїРѕР№ «Р—аголовок». Давайте откроем РіСЂСѓРїРїСѓ «РљРѕРЅС‚ент» Рё создадим еще РѕРґРЅСѓ — «РћРїРёСЃР°РЅРёРµ». РњС‹ поместим заметный заголовок СЃ более детализированным описанием всего сайта. Важно повторить CTA-элемент, поэтому пользователю РЅРµ нужно будет РјРЅРѕРіРѕ раздумывать, Рё РѕРЅ сможет произвести действие, РєРѕРіРґР° будет готов.

Выберите инструмент Горизонтальный текст (Horizontal Type Tool) Рё поищите «СЃРёР»СЊРЅС‹Р№» шрифт для вашего заголовка. Р’ моем случае, СЏ использовал красивый Рё элегантный, РЅРѕ авторитетно выглядящий Playfair Display (Black) 60px. Убедитесь, что Сѓ этого заголовка достаточно СЃРІРѕР±РѕРґРЅРѕРіРѕ места, СЏ сместил его РЅР° 100px РІРЅРёР· РѕС‚ изображения РІ заголовке.

Выберите инструмент Горизонтальный текст ( Horizontal Type Tool), затем создайте прямоугольник, кликнув и перетянув указатель мыши. В моем случае это блок размером 600x140px, в котором я поместил убедительный текст, чтобы заставить пользователя кликнуть на кнопку. Для чистой визуальной иерархии, текст описания должен быть меньшим и не таким тяжелым. В нашем примере использовался серый #666666 шрифт PT Serif (Regular) 18px, высота линии 28px. Весь элемент нужно сместить на 50px вниз от заголовка, чтобы получился чистый и профессиональный макет.

После прочтения текста пользователь может захотеть попробовать сервис, поэтому будет разумно повторить РєРЅРѕРїРєСѓ CTA-элемента. Откройте РіСЂСѓРїРїСѓ «Р—аголовок», найдите РіСЂСѓРїРїСѓ «CTA» Рё дублируйте ее, нажав Ctrl+J. После этого, переместите ее РІ «РћРїРёСЃР°РЅРёРµ» Рё измените цвет РєРЅРѕРїРєРё РЅР° прежде использованный зеленый #96c218, для текста РјС‹ используем белый #FFFFFF цвет. Сместите РєРЅРѕРїРєСѓ РЅР° 50pxРІРЅРёР· для последовательного расстояния между элементами.

Пока выглядит хорошо. Давайте поместим простую линию, визуально разделяющую блок описания от текста. Выберите инструмент Линия (Line Tool), установите Толщину (Weight) на 1px и нарисуйте горизонтальную линию от первой до последней вертикальной направляющей. В уроке я использовал светло-серый цвет #e6e6e6, который не слишком заметен, но при этом отлично выполняет свою работу.

Совет профи: удерживайте нажатой клавишу Shift, чтобы нарисовать идеально прямую линию.

Шаг 7

Теперь РјС‹ закончили СЃ блоком «РћРїРёСЃР°РЅРёРµ», поэтому РїРѕСЂР° перейти дальше. Создайте РЅРѕРІСѓСЋ РіСЂСѓРїРїСѓ СЃ названием «Р’дохновение». После этого дублируйте слои заголовка Рё описания РёР· РіСЂСѓРїРїС‹ «РћРїРёСЃР°РЅРёРµ» Рё переместите РёС… РІ созданную РіСЂСѓРїРїСѓ. РќР° картинке ниже РјРѕР№ пример:

Перейдите РІ РіСЂСѓРїРїСѓ «Р—аголовок», найдите РІ ней папку «РџСЂРёРјРµСЂ». Дублируйте РІСЃСЋ РіСЂСѓРїРїСѓ, нажав Ctrl + J, затем переходите Рє РіСЂСѓРїРїРµ «Р’дохновение». РњС‹ будем повторно использовать наш пример СЃ верхней части Рё покажем некоторые истории пользователей, чтобы вдохновить посетителя Рє действию.

Переименуйте РіСЂСѓРїРїСѓ РІ «Р?стории» Рё избавьтесь РѕС‚ зеленого индикатора. Также нам понадобится изменить цвет текста РЅР° темно-серый #0e0e0e, чтобы РѕРЅ был читаемым РЅР° белом фоне. Р?спользуйте РґСЂСѓРіРѕРµ изображение для аватара Рё напишите мнение человека Рё его местоположение более светлым серым #666666, чтобы больше влиять РЅР° посетителя.

После этого создайте текстовый блок с размером примерно 300x160px, используя инструмент Горизонтальный текст (Horizontal Type Tool) и напишите пример сообщения в дневнике благодарности. Я использовал шрифт PT Serif (Italic) 16px темно-серого цвета #666666, использованного ранее.

Теперь дважды дублируйте РіСЂСѓРїРїСѓ «Р?стории», измените аватары, имена Рё описания. Разместите РґРІРµ РіСЂСѓРїРїС‹ РІ горизонтальном РїРѕСЂСЏРґРєРµ, оставляя достаточные пробелы между РЅРёРјРё, Рё поместите ранее использованную линию РїРѕРґ РЅРёРјРё.

Шаг 8

Теперь, РєРѕРіРґР° РјС‹ закончили СЃ РіСЂСѓРїРїРѕР№ «Р’дохновление», давайте перейдем Рє последней секции нашего лендинга. Финальный CTA-элемент (СЃ некоторыми дополнительными деталями) поощрит пользователей зарегистрироваться, введя email адрес.

Создайте РіСЂСѓРїРїСѓ СЃ названием «Email», перейдите Рє предыдущей папке, чтобы найти слой СЃ заголовком, после чего дублируйте его, нажав Ctrl + J, Рё переместите РІ новосозданную РіСЂСѓРїРїСѓ. Р?змените заголовок РЅР° что-РЅРёР±СѓРґСЊ побуждающее Рє действию Рё переместите его примерно РЅР° 100px РІРЅРёР· РѕС‚ линии, сохраняя РїСЂРё этом согласованность.

Отлично! Теперь установите РѕСЃРЅРѕРІРЅРѕР№ цвет РЅР° светло-серый #f5f5f5, выберите инструмент Прямоугольник (Rectangle Tool) Рё нарисуйте блок для поля email. РћРЅ должен быть такой же высоты, как Рё главная CTA РєРЅРѕРїРєР°, Р° ширина РЅРµ так важна. Р’ моем случае его размер 430x60px. Затем выберите инструмент Горизонтальный текст (Horizontal Type Tool) Рё напишите «Р’ведите ваш email» или что-РЅРёР±СѓРґСЊ РІ этом СЂРѕРґРµ. Убедитесь, что используете достаточно темный текст, который будет легко читаем.

Теперь переходите Рє РіСЂСѓРїРїРµ «РћРїРёСЃР°РЅРёРµ» РЅР° панели слоев Рё найдите РіСЂСѓРїРїСѓ «CTA». Дублируйте ее, нажав Ctrl + J, затем переместите РІ РіСЂСѓРїРїСѓ «Email». Поставьте РєРЅРѕРїРєСѓ справа РѕС‚ поля email Рё отцентрируйте весь элемент.

Шаг 9

РњС‹ почти закончили! Давайте свернем РІСЃРµ РіСЂСѓРїРїС‹ Рё откроем папку «РџРѕРґРІР°Р»». Установите РѕСЃРЅРѕРІРЅРѕР№ цвет РЅР° темно-серый #2d2d2d Рё, используя инструмент Прямоугольник (Rectangle Tool), нарисуйте прямоугольную фигуру полной ширины СЃ высотой около 230px. Это будет фон для подвала, который поможет контрастно выделить Р·РѕРЅСѓ контента.

Перейдите РІ папку «РќР°РІРёРіР°С†РёСЏ» Рё слой СЃ логотипом, дублируйте РёС…, нажав Ctrl + J, затем перейдите РІ РіСЂСѓРїРїСѓ «РџРѕРґРІР°Р»». Р?змените цвет РЅР° белый #FFFFFF, после чего переместите навигацию примерно РЅР°50px ниже РѕС‚ края прямоугольника.

Наконец-то, возьмите инструмент Горизонтальный текст (Horizontal Type Tool) и поместите несколько ссылок, которые могут пригодиться пользователям. Убедитесь, что сгруппировали ссылки для легкости в навигации. Для урока я взял шрифт Source Sans Pro (Semibold) 16px для заголовков групп и PT Serif (Regular) 14px для самих ссылок.

Поздравляем!

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

Я буду рад услышать ваши отзывы и увидеть результаты этого урока!

Автор: Tomas Laurinavicius

Переводчик: Шаповал Алексей