Создание набора пользовательского интерфейса для веб-приложений в Adobe Photoshop

Разработка, с применением руководства по стилю, это чрезвычайно гибкий подход к современному веб-дизайну. В этом уроке я расскажу вам о разработке пользовательского интерфейса (User Interface), в то же время объясняя решения, которые позволят нашему интерфейсу быть максимально совместимым и универсальным.

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

Для того, чтобы продолжить, вам понадобятся следующие (бесплатные) материалы:

• Шрифт Open Sans из Font Squirrel или Google Fonts
• Стоковое фото с Unsplash
• Faces из UI Faces
• Значок стрелки из Iconfinder

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

Шаг 1

Откройте Photoshop и создайте новый документ (File > New…) используя настройки, показанные ниже. Вы можете использовать холст любых размеров, которые вы предпочитаете - в конце концов, интернет не имеет размеров.

Шаг 2

Давайте зададим несколько правил, чтобы наш интерфейс был организован и красив. Я не всегда использую сетку, но установка некоторых ограничений обеспечит аккуратность и согласованность. Перейдите в меню View > New Guide…  и определите некоторые правила. Обычно я выбираю размер 1000px как начальную ширину веб-сайта, поэтому давайте сохраним наш набор с этими размерами.

Примечание: Наводящие линии, используемые в нашем уроке: по вертикали 100 пикселей, 600 пикселей и 1100 пикселей.

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

Шаг 3

Придерживаясь правил для Photoshop, мы будем организовывать материалы для того, чтобы легко ориентироваться и редактировать. В рабочей среде нам понадобится этот набор UI, который будет использоваться много раз в качестве ориентира и ресурса для разработки, поэтому вам нужно его организовать (разработчики будут вам за это благодарны). Давайте создадим шесть групп слоев с именем Typography, Buttons, Forms, Avatars, Images и Colors.

Чтобы создать группы, перейдите в Layer > New > Group… и укажите для каждой из них название. Для быстрого создания группы просто щелкните на значок.

Определение типографии

Как сказал Оливер Райхенштейн, «веб-дизайн - это 95% типографии», это нужно запомнить. Прежде всего, нам нужно создать идеальную среду для нашей типографии; фон, который является нейтральным и легким для восприятия. Фон и типография должны иметь приемлимый уровень контрастности для чтения. Для этого урока давайте использовать тонкий светло-серый – это нейтральный цвет, но достаточно сильный, чтобы придать вашему приложению индивидуальность. Я установил цвет переднего плана на #e9eeef и нажал Alt+Backspace для установки фона.

Шаг 1

Откройте группу Typography, выберите инструмент Horizontal Type Tool (T) и выберите шрифт Open Sans. Open Sans - это современный шрифт, который имеет множество разных вариантов толщины и имеет профессиональный, но приветливый вид. Он достаточно стильный для заголовков, но и также достаточно практичен в качестве основного текста в Интернете.

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

Я установил цвет переднего плана на черный #000000, затем с помощью инструмента Horizontal Type Tool (T) и ранее упомянутого шрифта Open Sans с параметром Light и размером 55px вписал заголовок раздела. Мы будем использовать тот же размер и стиль для будущих заголовков, чтобы сохранить согласованность.

Шаг 2

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

HTML (HyperText Markup Language) имеет множество разных тегов, которые помогают браузерам интерпретировать содержимое страницы. Многие из этих тегов специально используются для веб-типографии, таких как <h1>, <h2>, <h3> и т. д. Они описывают заголовки, <h1> являются наиболее важными. После этого используется тег <p>, используемый для абзацев. Не вдаваясь в подробности о HTML, мы определим внешний вид этих элементов.

Используя инструмент Horizontal Type Tool (T), введите три заголовка. Я использовал Open Sans (Light) 55px для h1, 44px для h2 и 32px для h3, оставляя промежуток в 30px между ними. Промежуток между символами - еще одна важная вещь, о которой нужно помнить. Оставляйте достаточно места, чтобы ваш шрифт был легко читаемым и выглядел сбалансированным.

Примечание: Я использовал толщину Regular для h3. По мере уменьшения шрифта вариант Light может стать менее разборчивым.

Шаг 3

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

Для основного цвета я выбрал серый #838383, для заголовка - черный #000000 и синий #006ee3 для цвета ссылок.

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

Примечание: Установите шрифт заголовка и ссылки на  толщину Semibold, чтобы они выглядели больше и значимее.

Создаём кнопки

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

Шаг 1

Сверните группу Typography, щелкнув маленькую стрелку рядом с названием группы и откройте группу Buttons. После этого создайте несколько новых вертикальных наводящих линий, чтобы разделить нашу область содержимого на три равные области с промежутками 35 пикселей. Перейдите в меню View > New Guide... и установите следующие вертикальные линии: 410px, 445px, 755px и 790px. Здесь мы будем размещать наши кнопки так, чтобы все они были одинаковыми.

Шаг 2

Перейдите обратно в группу Typography, найдите слой заголовка раздела и продублируйте его, нажав CMD+J, затем переместите его в группу Buttons и измените его имя на «Buttons». 

После этого введите три названия состояний кнопок: Normal, Hover и Active. Разместите их слева от наших трех равных секций, сохраняя промежуток 35px между первой, второй и третьей областями.

Шаг 3

Теперь установите цвет переднего плана на ранее используемый синий #006ee3 и создайте новую группу под названием Primary Normal. Затем возьмите Rounded Rectangle Tool (U), установите Radius на 3px и нарисуйте прямоугольную форму прямоугольника размером 310x44 пикселей. Поместите его между первыми двумя направляющими в заголовке «Normal». Завершая создание кнопки, напишите на ней текст белым цветом #ffffff, чтобы он был легко читаемым.

Шаг 4

Теперь продублируйте группу Primary Button, нажав CMD+J и переименуйте эти группы в Primary Hover и Primary Active. После этого разместите их под двумя разделами, которые мы создали раньше.

Вы можете спросить, что значит hover и active? Hover описывает состояние кнопки, как только вы наводите на неё курсор мыши, поэтому нам нужно проиллюстрировать реакцию кнопки. Когда вы нажмете на него, активируется ссылка.

Для стилизации состояний наведения и нажатия на кнопку мы их просто затемним. Создайте новый слой над формой кнопки и заполните его черным #000000. После этого удерживая нажатой клавишу Alt и перемещайте мышку над слоем, пока не увидите значок со стрелкой вниз. Отпустите его, чтобы создать обтравочную маску. Наконец уменьшите прозрачность слоя до 10%.

Примечание: для активного состояния кнопки увеличьте прозрачность черного слоя до 20%.

Шаг 5

Теперь продублируйте все предыдущие группы кнопок и измените их заголовки и цвет на вторичный. В этом уроке мы будем определять цвета набора пользовательских интерфейсов, а теперь просто выберите один цвет и замените предыдущий синий цвет. Я использовал зеленый #36c265.

Оформляем формы

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

Шаг 1

Сверните группу Buttons и откройте группу Forms. Снова продублируйте заголовок раздела из предыдущей группы и переименуйте его в «Формы». Мы создадим некоторые поля ввода, включая текстовое поле, поле пароля, раскрывающийся список или поле выбора и поле отправки (простая кнопка).

При разработке форм ясность и узнаваемость являются ключевыми факторами. Не пытайтесь изобретать велосипед.  Создайте новую группу и назовите ее Name. Затем выберите Horizontal Type Tool (T) и введите метку для поля ввода, в моем случае это «Имя», используя тот же черный шрифт 18px черного цвета #000000 Open Sans (Regular).

Теперь продублируйте один из слоев формы кнопки и переместите это в группу Name. После этого измените цвет фона на белый #ffffff и добавьте 1px серую #d5d5d5 внутреннюю обводку. Наконец, поместите пример текста внутри белого закругленного прямоугольника. Для моего примера я использовал 16px Open Sans (Regular) и цвет серый #838383, который ранее использовался для основного текста.

Шаг 2

Создайте ещё поля с названиями, просто дублируя первое поле ввода. Традиционно для поля пароля используются точки • или звездочки *. Пример дополнительных полей показан ниже.

Продублируйте нажатием CMD+J одну из групп кнопок, переместите ее в группу Forms и поместите ее под недавно созданные поля. Еще раз напомню, что важно оставаться последовательным и повторно использовать ранее созданные элементы.

Шаг 3

В этом уроке мы придерживаемся очень простого пользовательского интерфейса, который может использоваться для очень простого веб-приложения. Теперь создадим еще один тип поля ввода; <select>.

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

Шаг 4

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

Продублируйте недавно созданную группу с выпадающим списком. Используя Direct Selection Tool (A), нажмите на угол фигуры, чтобы увидеть граничные точки, затем, удерживая Shift, выберите четыре нижних точки и несколько раз нажмите вниз их, чтобы расширить форму. Этот способ сохранит вектор вашей формы и удержит углы нетронутыми.

После этого продублируйте возможные варианты и поместите остальные ниже первого. Используйте Line Tool (U) 1px в высоту для создания простых разделителей и, наконец, измените цвет стрелки на тот, который используется для кнопок. Это поможет показать, что поле активно.

Шаг 5

Вы создадите простой сценарий сообщений об ошибках, например, если кто-то ввел слишком слабый пароль.

Продублируйте нажав CMD+J ранее созданное поле пароля и поместите его ниже выпадающие поля. После этого измените границу поля на тонкий красный (я использовал #eb8686) и фон до серого красного #e9dde3. Наконец, выберите более сильный красный #b63131 и введите простое сообщение об ошибке.

Это вся работа с нашими формами! Я рассказал основы, но этого достаточно, чтобы приступить к разработке более сложных форм.

Аватары

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

Шаг 1

Сверните ненужные группы и откройте группу Avatars. Выберите инструмент Ellipse Tool(U) и, удерживая Shift, нарисуйте круг 80x80px. Перейдите на сайт uifaces.com и выберите изображение. Скопируйте его и вставьте в недавно созданный круг. Удерживайте Alt и наведите указатель мыши на миниатюру изображения, пока не увидите небольшую стрелку, затем отпустите мышь, чтобы создать обтравочную маску.

Изображения

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

Шаг 1

Выберите Rounded Rectangle Tool(U) и нарисуйте прямоугольную форму между вертикальными направляющими линиями ниже группы Avatars. После этого выберите изображение, я использовал одно из сайта unsplash.com, измените размер, если нужно, с помощью сочетания клавиш CMD+T и создайте обтравочную маску.

Определяем цвета

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

Шаг 1

Откройте группу Colors и выберите один из цветов, который вы использовали для лицевой стороны кнопок. После этого, используя Rounded Rectangle Tool (U), нарисуйте прямоугольник. Затем выберите инструмент Horizontal Type Tool (T) и запишите название цвета, или то, для чего он будет использоваться, например. Primary Color и укажите цветовые коды в HEX, RGB или любом другом формате. Создайте новую группу, дайте ей имя и поместите в него все слои.

Шаг 2

Теперь продублируйте с помощью CMD+J группу цветов и сделайте столько образцов, сколько вам нужно. Обычно лучше ограничиться четырьмя или пятью цветами, так как больше цветов может быть слишком наляписто. Посмотрите на сайт Kuler и COLOURlovers есть потрясающие палитры.

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

Поздравляем! Вы это сделали!

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

Если у вас есть какие-либо вопросы или возникают трудности, пожалуйста, не стесняйтесь задавать вопросы в разделе комментариев!