Создание дизайна лендинга в photoshop – Создание Landing Page в Adobe Photoshop — пошаговая инструкция — SkillsUp

Шаг 7: Кнопка призыва к действию (Call to action)

Итак, мы наконец-то добрались до call-to-action кнопки. Сделаем её с помощью инструмента Rounded Rectangle Tool. Выставьте радиус 3px + цвет #96c64f и нарисуйте элемент шириной 7px и высотой 35px, после чего добавьте к элементу Drop Shadow эффект:

Далее добавим Inner Shadow c Distance в 1px и Opacity на уровне 30%. Получим следующее:

И снова Bevel and Emboss для call to action кнопки. Этот эффект отлично справляется с задачей придания объёма элементам, именно поэтому мы его здесь и используем. Но с ним тоже не стоит особо перегибать, чтобы сделать эффект едва заметным, выставьте для опции Highlight Mode оставьте Opacity на уровне 0% а для Shadow Mode — на уровне 7%.

Далее добавляем к элементу эффект Gradient Overlay в режиме смешивания Soft Light с Opacity на уровне 60%:

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

• Создайте новый документ любого размера
• Создайте новый слой и удалите дефолтный бэкграунд
• Перейдите в меню Select > All
• Выберите Edit > Fill чтобы заполнить всё рабочее пространство
• Далее снимаем выделение Select > Deselect
• Добавляем достаточно заметный шум следующими действиями Filter > Noise > Add Noise
• Снова выделяем всё рабочее пространство: Select > All
• Переходим в меню Edit > Define Pattern

Поздравляем, вы создали собственный новый паттерн с шумом, который мы сейчас и добавим к кнопке. Добавляем Pattern Overlay и выбираем только что созданный паттерн.

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

Далее нам нужно создать небольшой элемент, который будет служить разделителем между иконкой и текстом на кнопке. Для этого создаём вертикальную линию высотой в 10px с помощью инструмента Line Tool. Добавляем к линии эффект Gradient Overlay со следующими параметрами:

Используем тот же шрифт, который мы использовали для заголовков и пишем призыв к действию, например надпись Download it Now. Придаём тексту тёмно зеленый цвет (#4d7500) и присваиваем эффект Drop Shadow с белым (#ffffff) цветом тени и Opacity на уровне 30%.

Далее добавляем любую понравившуюся вам иконку или рисуем свою. В нашем случае это будет иконка облака.

Шаг 8: Ленточка рядом с кнопкой

Используйте ту же технику, с помощью которой мы рисовали ленточку для логотипа и дополнительно уменьшите Opacity чтобы сквозь ленточку была видна фоновая картинка. Это важно также чтобы не отвлекать посетителя от главного call-to-action. После того как ленточка будет готова, напишите на ней что-нибудь, например «100% free».

Шаг 9: Секция основного контента

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

Используйте Rectangle Tool чтобы создать элемент шириной 220px и высотой 214px. Ниже полученного прямоугольника нарисуйте еще один маленький прямоугольник 5px высотой и светло-зеленым (#91c04c) цветом. Используйте подготовленные сэты иконок и расположите выбранную иконку в центре верхней трети прямоугольника. Далее используйте Horizontal Type Tool и Source Sans Pro выбранный вами шрифт серого цвета (#262626) для заголовка и более светлый оттенок серого цвета для остального текста (#9c9c9c). Дублируйте полученный элемент три раза чтобы в итоге у вас получилось 4 подобных элемента, замените иконки и заголовки на копиях. У вас должно получиться вот так:

Используйте Nevis или любой понравившийся вам шрифт в Bold размером 18pt и напишите какое-нибудь предложение. Цвет текста тот же самый, который мы использовали для Заголовков на предыдущем этапе, а зеленый цвет — это цвет зеленых прямоугольников, которые мы тоже делали на предыдущем этапе. Сделайте ударение на словосочетании «Contact Us» — оно будет ссылкой, поэтому сделайте его подчеркнутым.

Используя такой же серый цвет, напишите несколько строчек текста и расположите его под только что созданным заголовком. Возьмите выбранную вами иконку (в нашем случае — это иконка кошелька) и придайте ей тот же зеленый цвет, что мы использовали для других зеленых иконок. После чего присвойте Drop Shadow эффект с зеленым цветом и параметрами как это показано на рисунке ниже:

Шаг 10: Футер, подвал … или как там его?

Используем Rectangle Tool чтобы создать элемент 1200px в ширину и 280px в высоту. Покрасьте его в серый цвет (#d0d0d0) — это и будет наш бекграунд для футера.

Используем Horizontal Type Tool и тот же шрифт что и раньше чтобы написать очередной Заголовок как на следующей картинке. Мы разделим наш футер на 3 секции и каждая из них будет иметь собственный заголовок. Как вы можете видеть на картинке, заголовок первого блока гласит «More About Us«. Добавим к нему Drop Shadow эффект с параметром Opacity на уровне 50% и Distance в 1px.

Используйте тот же шрифт чтобы написать текст-рыбу и придайте ему более светлый оттенок (#7a7a7a).

Используйте Line Tool чтобы создать простую серую линию, которая и будет служить разделителем между секциями.

Следующая секция будет называть «Newsletter«. Создайте поле для ввода имейла с помощью Rounded Rectangle Tool с радиусом в 3px. Придайте бекграунде очень светлый серый цвет (#f5f5f5). Give it a subtle Drop Shadow effect. Give the shape a really subtle 1px Stroke layer effect. Use the Horizontal Type Tool (T) to input some text in the shape. Добавьте пару эффектов по вкусу: например Drop Shadow и 1px Stroke. Напишите текст-рыбу для поля ввода.

Последняя секция носит название «Contact Us«. Она простая как двери и вряд ли отнимет у вас многов времени. Все шаги похожи на предыдущие, за исключением разве что более тёмных цветов для поля e-mail, location и phone number. Поэтому не будем особо на ней останавливаться.

Шаг 11: Finita la comedia

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

Источник: designinstruct.com/

Получи доступ к мастер-классам топовых спикеров и базе полезных материалов

skillsup.ru

Целевая страница с помощью Photoshop

В этом уроке веб-дизайна мы будем создавать интересную целевую страницу (landing page) с помощью Adobe Photoshop. Здесь не будет ничего сложного, поэтому урок сможет подойти и для начинающих пользователей Photoshop. Эту страницу можно использовать для различных типов сайтов, немного изменив текст, навигацию, картинки, иконки в соответствии с потребностями. 

Вы можете нажать на изображение ниже, чтобы увидеть его в полном размере.

Ресурсы для урока

Шаг 1: Основные настройки документа

Для этой целевой страницы, мы будем использовать системы сеток. Это популярная 960 Grid System, которая поможет выравнять элементы страницы. 

С официального сайта  960 Grid System скачиваем  ZIP файл и открываем PSD файл с 12 колонками. Этот файл называется 960_grid_12_col.psd. Файл находится внутриemplates\photoshop. 

Давайте изменим ширину и высоту холстаPSD, чтобы получить немного больше места для работы. Переходим к  Image> Canvas Size и устанавливаем W idth — 1200 пикселей и  Height — 1330px

Leave about 245px from the top of the layout for our main header image.

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

Для остальной части макета зададим серый цвет ( # f0f0f0 ). Вы можете сделать это несколькими способами. В этом уроке мы использовали инструмент Прямоугольник. Выберите инструмент Прямоугольник на панели инструментов. На панели Options, убедитесь, что выбрана опция Shape Layers, и установите желаемый цвет: # f0f0f0 . Нарисуйте прямоугольник, который будет занимать весь холст , за исключением верхних 245px. Переименуйте слой на что-то вроде «base».

Шаг 2: Изображение header

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

Сделаем фото размытым. Сделать это можно несколькими способами, но мы будем придерживаться самого простого: Filter > Blur > Gaussian Filter. Установите  Radius — 4.0px .

Шаг 3: верхняя навигационная панель

Используйте Rectangle Tool (M), чтобы создать горизонтальную полосу прямоугольника вверху холста. Ее высота —  20 пикселей, а ширина занимает всю ширину холста.

Для слоя устанавливаем прозрачность Opacity — 2 5% . С помощью этого у нас получится полупрозрачная панель навигации. 

Переключитесь на инструмент Horizontal Type Tool (T).

Мы будем использовать  шрифт Sans Pro, который можно бесплатно загрузить на Google Web Fonts.

В панели Options настраиваем свой инструмент Horizontal Type Tool:

• font family: Source Sans Pro
• font style: Bold
• font size: 16px
• text color: #aed572 (a green color)

С помощью Horizontal Type Tool вводим номер телефона и вымышленный адрес электронной почты, или любой текст, который захотите. 

Также будем использовать несколько иконок с ресурса  Impressionist UI, либо другое бесплатные иконки. 

Цвет для иконок — белый (# FFFFFF). 

После того, как текст и иконки были размещены на нужном месте, применяем к ним тень Drop Shadow. 

Шаг 4: Логотип

Делаем видимыми направляющие, выбрав View> Show> Guides . Они помогут нам разместить ровно элементы будущего дизайна, в том числе логотип. 

Чтобы создать подобную форму, которую вы видите в левом верхнем углу нашего макета, пользуемся  инструментом Pen Tool (P). В создании ленты очень помогут направляющие. Для формы задаем светлый зеленый  цвет (# 79b02f).

Зададим для нашего логотипа некоторые стили. Начинаем с добавления светлого эффекта  Inner Shadow и прозрачностью 35%. 

Также добавим к логотипу некоторую глубину путем применения эффекта слоя Bevel and Emboss. Устанавливаем непрозрачность Opacity на 0% для Highlight Mode (потому что мы не нуждаемся в эффекте освещения) и устанавливаем непрозрачность для режима Shading Mode в на 15% 

Также добавим мягкий Gradient Overlay. Изменяем Blend Mode на Soft Light и Opacity ставим на 50% . 

Мы будет использовать эффект слоя Pattern Overlay для того, чтобы добавить некий узор к логотипу. Вы можете найти множество бесплатных узоров Photoshop на сайте subtlepatterns.com.

Устанавливаем непрозрачность в стилях слоя Pattern Overlay 5% .

Теперь с помощью инструмента Horizontal Type Tool вводим текст. Был использован шрифт Nevis, font style установлен Bold, font size — 36px.  Далее вводим буквы — «DM» .

После этого добавляем к текстовому слою тень Drop Shadow. 

Шаг 5: Заголовок

Используем шрифт Source Sans Pro, шрифт делаем жирным  Bold. Дальше пишем заголовки. Для верхней строки используем размер  24 pt, меньший заголовок под большим делаем размером 18 пт.

Добавляем для текста Drop Shadow.

Шаг 6: Круги

Далее под заголовками создадим рисунок, который будет состоять из кругов. Это будет два круга одинакового размера и один побольше в центре. Они будут соединяться линией в 5px.

Используйте Ellipse Tool, чтобы создать круги, а затем Line Tool с  Weight ​​в 5px , чтобы создать линию размером 5 пикселей, которая проходит через них.

Используя шрифт Bebas Neue, вводим случайный текст в центре каждого круга. Увеличиваем размер шрифта в среднем круге примерно на 10 пунктов.

Шаг 7: Кнопка

Дальше под заголовками будем создавать кнопку.

Ее будем создавать с помощью Rounded Rectangle Tool. На панели Options, нужно убедиться, что  выбрана опция Shape Layer, опция Radius установлена ​​на 3px и светлый зеленый  # 96c64f .

Затем создайте форму около 7 пикселей шириной и 35px высотой.

Добавляем эффект  Drop Shadow.

Также добавляем эффект Inner Shadow. Устанавливаем Distance 1px  и непрозрачность — 30%.

К кнопке нужно также добавить эффект Bevel and Emboss. Он должен быть едва заметен, поэтому устанавливаем Opacityдля режима Highlight Mode — 0%  и прозрачность Opacity для режима Shadow Mode —  7%. 

Давайте добавим к слою Gradient Overlay. Устанавливаем режим смешивания  Blend Mode на Soft Light и Opacity на 60%.

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

1. Создайте новый документ Photoshop (любого размера)
2. Создайте новый слой и удалите слой фона по умолчанию
3. Перейти к Select> All (который выделит область холста), чтобы выбрать весь холст
4. Выберите Edit> Fill , чтобы заполнить слой
5. Отмените выбор, перейдя в Select> Deselect
6. Добавьте большой шум, нажав Filter> Noise> Add Noise
7. Выделите весь холст снова ( Select> All )
8. Перейдите к  Edit> D efine Pattern и сохраните шаблон

Теперь вы создали свой шаблон Photoshop.

Затем вернитесь в основной документ Photoshop и добавьте к кнопке эффект Pattern Overlay, используя шаблон, который вы только-что создали.

Давайте добавим к кнопке обводку  Stroke. Для нее используем темный зеленый цвет. 

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

Используйте тот же шрифт, который мы использовали для заголовка текста ( Nevis ),  ввести текст для веб-кнопки. Вводим фразу «Download it Now». 

Делаем текст темно-зеленым цветом ( # 4d7500 ) и применяем эффект Drop Shadow, где цвет тени будет установлен белый  ( # FFFFFF ) и  Opacity на 30%.

Шаг 8

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

Во-первых, нужно использовать инструмент Elipse для создания от 4 до 5 кругов. Нужно удерживать нажатой клавишу Shift во время рисования кругов. 

Теперь, установите Fill для слоя с иконкой на 0% — это можно сделать в панели Layers.

После этого для слоя добавляем обводку  Stroke в  2px, темно-зеленый цвета.

Шаг 9: Лента рядом с кнопкой

Следуя шагам, которые мы выполняли для создания ленты логотипа, возле кнопки создаем светло-зеленую форму.

Уменьшите Opacity формы. 

Введите текст на ленте. В уроке был набран текст  «100% free».

Шаг 10: Раздел «Избранное»

Давайте работать с разделом «Избранное».

Используйте Rectangle Tool (U), чтобы создать прямоугольник шириной 220 пикселей и высотой 214 пикселей.

В нижней части прямоугольника добавляем зеленый прямоугольник ( # 91c04c ) высотой около 5 пикселей.

Помещаем любую иконку в верхний центр прямоугольника.

Используйте инструмент Horizontal Type Tool (T)  и шрифт Sans Pro, чтобы ввести название возле иконки — темно-серый цвет ( # 262626 ) и светло серый текст ( # 9c9c9c ).

Дублируйте группу  прямоугольника, иконки и текста 3 раза, чтобы в конечном итоге получилось 4 панели. Нам нужно изменить иконки и текст в этих прямоугольниках. 

Используйте шрифт  Nevis, font style —  Bold, font size — 18pt и введите текст. Используйте серый цвет такой же, как и для текста в предыдущих шагах. 

Акцентируйте внимание на последнем слое  («Контакты»), где будет размещена гиперссылка. В панели Character (если вы не можжете найти эту панель, перейдите к Window > Character), нажмите опцию underline, чтобы подчеркнуть текст. 

Добавляем Drop Shadow.

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

Шаг 11: футер

Используйте Rectangle Tool (U), чтобы создать форму шириной 1200px и шириной 280 px.  Сделайте его светло-серым цветом ( # d0d0d0 ). Это будет фоном для нашей колонтитула.

Используйте инструмент Horizontal Type Tool (T) и тот же шрифт, чтобы ввести текст заголовка, как на рисунке ниже. Мы будем делить наш футер на три части, и каждая из которых будет иметь заголовок. Как показано ниже, заголовок первого раздела «More About Us«. К заголовку применяем эффект Drop Shadow с непрозрачностью в 1%.

Используйте тот же шрифт, чтобы написать следующий  текст. Для текста выберите светлый цвет ( # 7a7a7a ).

С помощью Line Tool (U) создаем простую серую линию, которая будет разделять каждый раздел. 

Следующий раздел футера будет иметь название  «Newsletter«.  С помощью Rounded Rectangle Tool (U) и Radius в 3px создаем поле для ввода светло-серого цвета ( # f5f5f5 ).  Добавляем к тексту эффект  Drop Shadow. Добавляем к полю небольшую обводку Stroke в  1px.  Используйте инструмент Horizontal Type Tool (T), чтобы ввести в форму текст .

Наш последний раздел футера —  «Контакты «. В разделе размещаем иконки и текст. 

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

Исходный файл

Автор: STELIAN SUBOTIN 

Перевод — Дежурка

www.dejurka.ru

Создание дизайна Landing Page / Хабр

Landing Page – (далее по тексту Целевая страница) – одностраничный сайт, построенный таким образом, чтобы обеспечить сбор контактов максимального количества целевых посетителей и максимальную конверсию в контексте его использования.

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

Так научимся же создавать качественные и красивые целевые страницы. Разобьём урок на 3 части. Содержание, Оформление и Практика.

Хронология изложения материала будет идти ОТ НАЧАЛА ДО КОНЦА, так что вы можете смело брать эту статью на вооружение при разработке своего очередного продающего шедевра. Здесь я постараюсь собрать и учесть абсолютно все, что имеет отношение к опыту человечества в разработке целевых страниц и то, что действительно работает, пока такой формат продаж еще актуален.

После теории, в разделе «Практика», мы создадим дизайн, не побоюсь этого слова, «правильной» целевой страницы, с учетом всех рассмотренных правил и рекомендаций.

Часть 1. Содержание Landing Page

1.1 Текст – это всё

О тексте по порядку.

1.2 Заголовок целевой страницы

Понимаете, в чем ошибка? Если пользователь набрал в поисковой строке «Пылесосы iRobot Roomba в Москве», то ему глубоко фиолетово кто вы, какие вы крутые и сколько вы лет на рынке. Он хочет видеть пылесосы iRobot Roomba и иметь возможность купить их в Москве. Чем точнее заголовок соответствует поисковому запросу, тем лучше ваша целевая страница.

Можно усилить заголовок словами «Лучшие, быстрые, самые мощные» и т.д. В результате должно получиться что-то вроде «Умные роботы пылесосы iRobot Roomba в Москве». Не стесняйтесь, это реально работает.

1.3 Меньше воды в тексте

Как избавиться от воды? Подкрепляйте каждое утверждение ФАКТАМИ, ЦИФРАМИ и ГРАФИКАМИ. Не нужно писать «У нас много довольных клиентов», напишите, сколько довольных клиентов, детализируйте и сегментируйте клиентов. Столько-то женщин приобрело пылесос, столько-то холостяков остались довольны чудо девайсом, столько-то часов данный пылесос сэкономил времени, столько-то часов проработал. Подкрепляйте каждое утверждение цифрами или не делайте утверждения вовсе, чтобы избавить посетителя от желания приобнять белого друга.

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

1.4 Не обманывайте

1.5 Выгода/Преимущества

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

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

1.6 Указывайте на то, что товар или услуга являются новинкой

1.7 Обязательно размещайте отзывы

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

Каждый отзыв должен начинаться заголовком, которым может служить выдержка из текста самого отзыва с описанием преимущества для клиента, например, «Благодаря пылесосу iRobot Roomba я экономлю около 20 часов на уборке в месяц…». После заголовка идет текст отзыва. Затем, имя того, кто отзыв написал и кем он является – семьянин, ген. директор, бухгалтер, домохозяйка и т.д. Важно, чтобы отзыв был подкреплен не только хорошим заголовком, но и фотографией реального человека. Подчеркивайте важные достижения клиента (благодаря продукту или услуге, естественно) в тексте жирным выделением или цветом, соответственно и в дизайне при оформлении.

1.8 Гарантия возврата денег

Часть 2. Оформление Landing Page

2.1 Продукт в действии

Очень часто мне приходится наблюдать такой позор, как протухшая на вид пицца в шапке, черно-белая картинка автомобиля, летающий в воздухе непонятный девайс и прочие ошибки. Нужно сделать так, чтобы продукт или услугу захотелось приобрести. Если это пицца, пусть она будет такая аппетитная, с плавленым сырком, яркая, что ее захочется съесть немедля. Добавьте красок продукту, дымка, поджаристую корочку. В пределах разумного, конечно. Покажите продукт в действии. Если это приложение для мобильных устройств – сфотайте пользователя с телефоном и вашей софтиной на борту или, на худой конец, скачайте Mockup PSD с телефоном в руке и разместите скриншот приложения в рабочем состоянии. Еду отображайте яркой, горячей и готовой к употреблению. Это должно быть в шапке. Кроме того, было бы не плохо выложить видео с презентацией продукта. Лаконичный заголовок, кнопка и продукт в действии…

2.2 Кнопка призыва к действию на первом экране

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

2.3 Забудьте о попандерах

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

2.4 Не делайте много полей в формах

2.5 Не стесняйтесь показывать лица, адреса и телефоны

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

2.6 Размещайте логотипы известных брендов

Итак, мы рассмотрели ключевые моменты, которые необходимо учитывать при разработке Landing Page. Давайте объединим все вышесказанное в следующем разделе, напишем текст и создадим дизайн целевой страницы в Фотошопе.

Разрабатывать Landing Page, волею судьбы, будем для Пылесоса iRobot Roomba. Пример абсолютно рандомный и пришел в голову в процессе написания данного мануала.

Для прохождения урока нам понадобятся исходные данные, которые вы можете взять с GitHub.

Часть 3. Практика

3.1 Текст Landing Page

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

Текст.

• Шапка: лого, изображение пылесоса, заголовок: «Умные роботы пылесосы iRobot Roomba в Москве», телефон, адрес, кнопка.
• Секция с видео: «iRobot Roomba в работе». Под видео – кнопка.
• Секция Модельный ряд (Фото – Цена – Старая цена — Купить):
  
  • Roomba 630
  • Roomba 870
  • Roomba 880
  • Scooba 450
  
  
• Гарантия. Текст гарантии возврата денег под моделями.
• Секция преимущества:
  • Заголовок: «Преимущества перед обычным пылесосом»
  • Подзаголовок: «Это исключительно «умная» техника, которая самостоятельно производит уборку помещения и после завершения работы возвращается на станцию для подзарядки»
  • #1. Экономит время. Вы экономите свои силы и время, тратя его на более приятные занятия.
  • #2. Не нуждается в управлении. Пылесос сам составляет для себя оптимальный маршрут, благодаря интеллектуальной системе AWARE.
  • #3. Компактный. Техника не займет много места и работает без подключения к электросети.
  • #4. Самозаряжаемый. Зарядки аккумулятора хватает на 2 часа, после чего робот самостоятельно возвращается на платформу для подзарядки.
  
  
• Секция отзывы. Фото – Имя – Кто есть – Текст отзыва.
• Секция поддержки клиентов. Фото специалиста – имя – контакты (телефон, соц. сети).
• Секция Контакты. Адрес и карта с меткой.

3.2 Дизайн

Прежде, чем начнем делать дизайн, давайте определим, что нужно учитывать при создании дизайна (общие рекомендации):

• Всегда учитывайте бренд, стиль продукта, айдентику, если таковые имеются, старайтесь рисовать сайт в одном стиле;
• Старайтесь использовать не более 3-х цветов в дизайне и несколько производных оттенков;
• Выберите приятные сочетания шрифтов для дизайна;
• Не лепите элементы близко друг к другу – это признак дурного вкуса;
• Соблюдайте вертикальный ритм при расположении элементов, дайте воздуха дизайну;
• Не делайте слишком маленький интерлиньяж (line-height) между строками в текстовых блоках;
• Не используйте картинки плохого качества в дизайне;
• Сжимайте всю графику с помощью TinyPng или подобных инструментов.
• Перед ресайзом изображения обязательно конвертируйте его в смарт объект в Photoshop, на случай, если вдруг придется увеличить картинку без потери качества.
• В данном примере максимальная ширина контента равна 1170px (сетка Bootstrap, чистый файл в архиве references/bootstrap-1170.psd).

Теперь нарисуем дизайн по составленному в п 3.1 тексту. Углубляться в основы работы с Photoshop не будем, рассмотрим ключевые моменты при создании дизайна Landing Page. Все секции будут на всю ширину макета, а контент в пределах сетки Bootstrap. Установим шрифты Raleway из папки Fonts. Размеры и цвета вы можете посмотреть в готовом макете references/ready_design.psd.

Итак, по тексту.

• Шапка: лого, изображение пылесоса, заголовок: «Умные роботы пылесосы iRobot Roomba в Москве», телефон, адрес, кнопка.

• Секция с видео: «iRobot Roomba в работе». Под видео – кнопка.

• Секция Модельный ряд (Фото – Цена – Старая цена – Купить).

• Гарантия. Текст гарантии возврата денег под моделями. Данная секция крайне желательна, но, если у продавца нет такой опции в продажах, можно не выдумывать.

• Секция преимущества:

• Секция отзывы. Фото – Имя – Кто есть – Текст отзыва.

• Секция поддержки клиентов. Фото специалиста – имя – контакты (телефон, соц. сети).

• Секция Контакты. Адрес и карта с меткой.

Более подробную информацию об элементах дизайна, приемах работы, вы можете получить, скачав с GitHub исходник PSD с готовым дизайном.

Пост был подготовлен с целью сделать этот мир немножечко лучше.
Спасибо за внимание. Пока.

habr.com

Создание дизайна Landing Page для студии разработки сайтов (Урок 2)

В предыдущем уроке по созданию дизайна Landing Page для студии мы создали прототип сайта, сегодня приступим к его визуализации, то есть будем рисовать дизайн сайта.

Предыдущие уроки:

1. Создание дизайна Landing Page для студии разработки сайтов (Урок 1)
2. Создание дизайна Landing Page для студии разработки сайтов (Урок 2)

Для создания дизайна нам понадобится сетка 960 Grid System, немного модифицированная и расширенная для Bootstrap на 1140 пикселей. Это 12-ти колоночная сетка для Adobe Photoshop, так как рисовать дизайн сайта мы будем именно в этой программе. Скачать сетку.

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

Фон первого экрана

Итак, откроем нашу сетку в фотошопе и сразу обозначим первый экран Landing Page – нарисуем прямоугольник шириной в документ и высотой 640 пикс. Зададим ему цвет фона #663399:

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

Ластиком ровными штрихами удалим некоторые части белой маски, создавая эффект больших осветляющих пятен:

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

Далее нарисуем верхнюю полосу меню – это прямоугольник черного цвета, высотой 60 пикс, непрозрачность слоя – 85%:

Логотип

Напишем шрифтом Echoes Slab логотип – MyStudio, размером 24 пикс, белым цветом. Оставив справа от сетки немного место для графического элемента логотипа.

Графическим элементом логотипа я придумал бриллиант. Найдем изображение векторного простого бриллианта в гугл картинках, мне понравился этот:

Откроем его в Inkscape и векторизируем растр (Объект > Векторизировать растр):

У меня получился такой png патч, можете скачать его, минуя работу в Inkscape:

Экспортируем наш векторизированный бриллиант в png и вставим в наш макет в фотошопе.

Уменьшим до необходимых размеров и наложим красный цвет — #ff3838:

Можно бриллианту добавить красного внешнего свечения цветом #ff0000:

Заголовки

Наш несложный логотип готов, напишем заголовки у первого экрана, см. наш прототип из первого урока. Размер заголовка – 50 пикс, размер подзаголовка – 20 пикс. Цвет заголовка — #ffffff, цвет подзаголовка – возьмем пипеткой с фона и осветлим:

Отлично, но мы забыли меню и телефон из прототипа. Их мы напишем шрифтом Exo 2 Light, его также можно взять на сайте Fonts4Web.ru. Цвет – белый, подчеркивание активного пункта и пункта при наведении мышью сделам красным, взяв цвет из логотипа – простоя однопиксельный прямоугольник. Размер меню – 16 пикс. Меню делаем по сетке – 4, 5, 6, 7 ,8 и 9-я колонки:

И напишем телефон в последних трех колонках сетки, также белым цветом, шрифт Exo 2 Regular, размер 22 пикс. Под телефоном – более мелким шрифтом напишем «Заказать звонок»:

Далее по прототипу у нас слайдер с последними работами. Нарисуем по сетке 4 прямоугольника черного цвета с непрозрачностью 25%. Хоть в прототипе мы нарисовали 3, но в данной сетке можно разместить и 4:

Оставим по одной колонке сетки по краям для навигации по слайдеру.

Заполним элементы слайдера логотипами крутых компаний, я выбрал эти для примера:

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

Добавим навигацию слайдера. Для этого по крайним колонкам разместим стрелки. Их можно взять, например, из шрифта Ruslan Display. Размер стрелок 60 пикс, непрозрачность 25%.

В прототипе мы определили, что будем внизу каждой секции размещать стрелку вниз, которая будет свидетельствовать о том, что можно почитать что-нибудь ниже текущего экрана. Давайте создадим такую галочку на фигурном фоне. Нарисуем инструментом «Многоугольник» фигуру c пятью конечностями. Наложим легкий, с едва заметным переходом оранжевый градиент:

Отлично. Можно, конечно еще поработать, сделать что-нибудь интересное, наложить какой-нибудь паттерн на фон шапки, но этого, думаю, будет достаточно.

Результат выполнения урока:

Премиум уроки от WebDesign Master:

webdesign-master.ru