Простой и эффективный дизайн страницы контактов

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

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

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

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

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

Материалы к статье

Иконки
Паттерны (Pattern)

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

Шаг 1

Откройте Photoshop и создайте новый файл (File>New или сочетание клавиш Ctrl + N) с шириной 1360px и высотой 1100px. Назовите файл и нажмите OK.

Шаг 2

Создайте новый слой для фона (Layer>New>Layer или кликните на пункт «New Layer» на панели слоев) и заполните фон цветом #333333.

Затем нам нужно добавить к фону паттерн, для чего нужно кликнуть на стиль слоя (Layer>Layer style или выбрать кнопку на панели слоев), чтобы добавить паттерн на фон.

Установите настройки паттерна, как показано на изображении ниже.

Шаг 3

Начнем с верхнего меню. Создайте новый слой и выберите инструмент «Rectangle Tool». Создайте тонкий горизонтальный прямоугольник в верхней части изображения и заполните его цветом #f85f30.

Шаг 4

Создайте новый слой и, выбрав инструмент «Line Tool» и задав толщину линии 13px, проведите тонкую горизонтальную полоску с цветом #db491c.

Шаг 5

С помощью того же инструмента создайте еще одну полосу ниже с таким же цветом, но на этот раз задав толщину в 2px.

Шаг 6

Создайте новый слой и выберите инструмент «Pen Tool», чтобы создать треугольную фигуру. Поместите её в левой части, там где мы собираемся расположить логотип и заполните цветом #db491c.

Шаг 7

Теперь добавьте логотип прямо над треугольником. Выберите инструмент «Type Tool» и добавьте текст логотипа, используя цвета #424141 и #fbe9c1.

Шаг 8

Вновь, используя инструмент «Type Tool», добавьте текст ссылок в правую часть навигационного меню, используя цвет #fbe9c2.

Шаг 9

Так как мы разрабатываем страницу «Контакты», то нужно показать активным этот пункт. Чтобы создать эффект выделенного пункта меню, выберите инструмент «Rectangle Tool» для того, чтобы нарисовать маленький прямоугольник.

Заполните его цветом #f7703e и добавьте текст (используя инструмент «Type Tool») цвета #fcf4e1.

Шаг 10

Наше навигационное меню готово, поэтому давайте начнем работать с областью контента. Выберите инструмент «Type Tool» и добавьте большой заголовок сбоку. Его цвет #fbe9c1.

Шаг 11

Создайте горизонтальный разделитель, используя инструмент «Line Tool» толщиной 2px и цветом #db491c. Разместите разделитель под заголовком, который был создан на предыдущем шаге.

Шаг 12

Повторите предыдущий шаг и создайте еще один разделитель с тем же цветом, но на этот раз сориентировав его вертикально.

Шаг 13

Выберите инструмент «Type Tool» и добавьте надпись «phone number» цветом #beb090. Затем разместите иконку «Phone icon» перед надписью и задайте ей цвет #fbe9c1.

Шаг 14

Повторите предыдущий шаг и добавьте строку с данными электронной почты, используя знакомый инструмент «Type Tool», и разместите рядом иконку письма.

Теперь выберите инструмент «Line Tool», установив толщину 2px, и создайте небольшой разделитель, с цветом #db491c, между строками.

Шаг 15

А сейчас займемся нашей формой и сперва добавим заголовок, используя инструмент «Type Tool» с цветом #beb090.

Выберите инструмент «Rectangle Tool» и создайте маленький прямоугольник для поля «Name». Заполните фигуру цветом #252525 и выберите пункт «Layer style», чтобы добавить несколько штрихов.

Настройте стиль «Stroke» так, как показано на рисунке ниже.

Шаг 16

Повторите предыдущий шаг и создайте еще два поля с помощью инструмента «Rectangle Tool» с тем же цветом - #252525.

Теперь скопируйте стиль слоя первого поля и примените его к новым фигурам. Для этого нужно нажать правой кнопкой на пункт «Duplicate the layer style» в контекстном меню слоя, а затем тем же способом вклеить его в две новые фигуры.

Шаг 17

Выберите инструмент «Type Tool» и добавьте в поля текст (Your Name, Your Email, Add your Message…) используя цвет #a3977c.

Шаг 18

Для кнопки «Submit button», выберите инструмент «Rectangle Tool» и начертите прямоугольник с цветом #f85f30. Теперь кликните на «Layer style», чтобы добавить штрих с теми же настройками, как и на предыдущем шаге.

Добавьте на кнопку текст, используя инструмент «Type tool» с цветом #fbe9c1.

Шаг 19

Наша форма контактов готова, так что теперь займемся областью карты. Для начала кликните на инструменте «Custom shapes Tool» и добавьте стрелку с цветом #beb090. Далее, выберите инструмент «Type Tool» и добавьте текст заголовка справа от стрелки, задав цвет #fbe9c1.

Шаг 20

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

Шаг 21

Для создания футера, вновь выберите инструмент «Rectangle Tool» и создайте внизу горизонтальную полосу с цветом #252525.

Шаг 22

Создайте новый слой и выберите инструмент «Line Tool». Установите толщину в 12px и создайте небольшую горизонтальную полосу.

Заполните её цветом #1e1e1e. Затем создайте еще один новый слой и, выбрав инструмент «Pen Tool», создайте треугольную фигуру с цветом #1e1e1e.

Шаг 23

Теперь откройте иконки социальных сетей, которые можно скачать по ссылкам, приведенным в начале статьи, и вставьте их в наш файл.

Расположите их друг относительно друга в левом нижнем углу. Сгруппируйте иконки вместе, выбрав все слои с иконками и кликнув на пункте меню «Layer> Group Layers», либо просто нажмите сочетание клавиш Ctrl/CMD + G.

Нажмите на пункт «Create New Fill or Adjustment Layer», либо воспользуйтесь меню «Layer> New Adjustment Layer> black & White». Установите настройки и нажмите «Layer> Create Clipping Mask», после чего настройки применятся только к иконкам.

Шаг 24

Теперь осталось добавить копирайт с помощью инструмента «Type tool» с цветом #535353 в нижний правый угол.

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