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

 

Серия уроков Sketch (часть 1 из 5): Настройка Sketch

Серия уроков Sketch (часть 2 из 5): Символы и стили

Серия уроков Sketch (часть 3 из 5): Дизайн десктоп версии

Серия уроков Sketch (часть 4 из 5): Дизайн мобильной версии

Серия уроков Sketch (часть 5 из 5): Передача дизайна разработчику

 

Завершение дизайна для десктопной версии

С возвращением.

Окей, давайте продвинемся вперед в части 3 из 5 этого курса. К этому времени вы уже приобрели определенные навыки работы в Sketch. В третьей части этой серии уроков мы закончим разработку дизайна десктопного шаблона.

 

Дизайн блога

Давайте займемся созданием раздела Blog.

Как мы ранее проделывали с разделом портфолио, вставьте 2 текстовых слоя из раздела Styled Text в панели инструментов (они по-другому отмечены). Измените текст на свое усмотрение и выровняйте ее по сетке.

 

Давайте займемся созданием раздела Blog

 

Теперь создадим несколько записей, входящих в наш блог, чтобы воспроизвести реальный вид наполненного постами блога:

 

реальный вид наполненного постами блога

 

Дизайн постов блога

Мы вставим 4 поста в этот раздел. Возьмем для этого плагин Unsplash It, который мы уже использовали ранее.

Нарисуйте прямоугольник (R), покрывающий все 12 колонок сетки, высота должна быть 300 пикселей.

И затем при нажатой кнопке Alt перетащите прямоугольник трижды, чтобы создать 3 копии. Выделите все 4 слоя с прямоугольниками, запустите плагин Unsplash через Plugins > Unsplash It или воспользуйтесь горячими клавишами Shift + Cmd + U

Получится вот такой результат на вашем артборде:

 

Возьмем для этого плагин Unsplash It, который мы уже использовали ранее

 

Теперь добавим заголовок и дату поста к каждому изображению. Сначала, для даты поста, используйте такие настройки с оттенком 95BB6C (он уже должен быть сохранен в вашу палитру Document Colors).

 

добавим заголовок и дату поста к каждому изображению

Для заголовка поста используйте такие настройки и цвет FFFFFF.

Для заголовка поста используйте такие настройки и цвет

 

Создадим текстовые стили для обоих этих слоев. Но мы будем делать 2 разных текстовых стиля (один для обычного состояния – Normal state, а один для наведения мышкой – Hover state). Я вам покажу, как это сделать…

Выделите ваш текстовый слой с датой поста, и затем в панели инспектора выберите опцию Create New Text Style в выпадающем списке.

Задайте стилю метку ‘Post Date (Hover)’. И затем проделайте то же самое со слоем заголовка, и задайте ему метку ‘Post Title (Hover) ’.

 

Задайте стилю метку (Hover)

 

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

 

ВЫравнивание заголовка

 

Если вы еще не сделали этого, сгруппируйте 2 текстовых слоя. Назовите группу вроде ‘Date + Post Title’.
Теперь продублируйте группу, используя Alt + перетаскивание, и разместите 3 копии на оставшиеся изображения блога.

 

Вот так выглядят наши заголовки в Sketch

 

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

Выделите слой с датой в одной из продублированных групп и выберите в выпадающем списке инспектора опцию ‘No Text Style’. Проделайте то же самое и для слоя с заголовком.

 

создадим новые Text Styles

 

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

Выделите слои с датой и заголовком (те, с которых вы только что убрали стили), и задайте им значение цвета A5A5A5.

 

Затем проделайте те же шаги, что я показал разнее. Создайте 2 новых текстовых стиля для этих 2 слоев

 

Затем проделайте те же шаги, что я показал разнее. Создайте 2 новых текстовых стиля для этих 2 слоев.

Для слоя с датой задайте метку ‘Post Date (Normal)’, а для слоя заголовка поста – ‘Post Title (Normal)’.

Затем добавьте эти 2 новых текстовых стиля на оставшиеся текстовые слои, которые вы ранее продублировали, чтобы получилось так:

 

Затем добавьте эти 2 новых текстовых стиля на оставшиеся текстовые слои, которые вы ранее продублировали

 

Удобочитаемость пока не на высоте, но тут на помощь приходят Layer Styles – стили слоя!

Помните оверлей, который мы создавали для элементов портфолио? Мы будем использовать то же самое внизу 3 постов блога. И в результате получится вот так:

 

Добавляем оверлей

 

Теперь все выглядит немного более презентабельно.

Нарисуйте прямоугольник (R) над каждым из нижних 3 постов. Выделите 3 слоя с нарисованными прямоугольниками, и выберите ваш Layer Style из выпадающего списка в инспекторе.

 

Выделите 3 слоя с нарисованными прямоугольниками, и выберите ваш Layer Style

 

Отличная работа!

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

Совет: Вы бы могли просто повторно использовать символ ‘View Project’, который мы создали в части 2, только снимите галочку с опции ‘Exclude Text Value from Symbol’. Я всего лишь хочу показать вам еще раз, как создавать графику.

Нарисуйте круг размером 70 x 70px, со значением цвета Hex (#) A2CB75, а затем текстовый слой (с текстом View Project, например), и задайте тексту цвет FFFFFF, размесив его поверх круга. Убедитесь, что элементы корректно выровнены. Если нужно, воспользуйтесь инструментами выравнивания в Инспекторе, затем выделите вашу фигуру, текстовый слой и превратите это все в символ (Symbol). Назовите его как-то вроде ‘Read Article Button’.

Теперь выделите группу (символ), который вы только что создали, а также свой слой с картинкой, и в панели инспектора воспользуйтесь инструментами Align Horizontally и Align Vertically.

 

Align Horizontally и Align Vertically

 

Мы почти закончили с этим разделом.

Помните, мы создавали символы ‘Section Button’ и ‘Section Divider’? Вставьте их в свой дизайн. Вот теперь мы точно закончили.

 

Помните, мы создавали символы ‘Section Button’ и ‘Section Divider’? Вставьте их в свой дизайн

 

Раздел контактов

Тут мы создадим красивую форму контактов. О да. Она будет выглядеть потрясающе.

Примерно так:

 

Раздел контактов sketch

 

Давайте добавим заголовок раздела. Как и с предыдущими разделами, вставьте 2 текстовых стиля из Styled Text в панели инструментов. Измените текст на свое усмотрение, и затем выровняйте его на своей сетке.

 

 вставьте 2 текстовых стиля из Styled Text в панели инструментов

 

Дизайн карты с меткой местоположения

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

Вы можете скачать изображение карты здесь.

После скачивания вставьте карту в артборд.

Окей, теперь перейдите в Iconjar и поищите иконку ‘Location Pin’, затем перетяните иконку на свой артборд.

 

перейдите в Iconjar и поищите иконку ‘Location Pin’

 

Увеличьте размер иконки и задайте ей оттенок 95BB6C из Document Colors.

 

Увеличьте размер иконки и задайте ей оттенок

 

Давайте зададим падающую тень для иконки. С помощью инструмента Овал (О), нарисуйте небольшой овал и примените следующие настройки размеров и цвета:

 

Давайте зададим падающую тень для иконки. С помощью инструмента Овал (О)

 

Затем примените такие настройки, используя гауссово размытие (Gaussian Blur) в инспекторе:

 

Затем примените такие настройки, используя гауссово размытие (Gaussian Blur

 

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

 

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

 

Поместите иконку на карту, оставив место под форму контактов. В качестве руководства используйте картинку:

 

Поместите иконку на карту, оставив место под форму контактов

 

Настало время создать красивую форму контактов, которую вы уже видели ранее. Мы будем использовать маски, как для раздела About (помните иконку с громкоговорителем?)
Сначала нарисуем контейнер для контактной информации и формы.

Нарисуйте прямоугольник (R), кот6орый бы покрывал 12 колонок сетки, затем введите такие параметры настроек:
(мы также добавим радиус границ и большую падающую тень на слой фигуры)

 

Фон формы контактов

 

При выделенном слое фигуры нажмите Ctrl + Cmd + M, чтобы конвертировать его в маску.

Затем создайте другой прямоугольник (R), с цветом 303030, и высотой 600px.

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

 

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

 

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

  • Ширина белого контейнера 1160px (мы это знаем). При выделенном темном слое идем в поле width в инспекторе, и введите в это поле 1160/2 и вуаля – у нас получается нужные 580px. Т.е. Sketch посчитает все за вас!

 

и введите в это поле 1160/2 и вуаля

 

  • Или же можно воспользоваться шириной в процентном выражении. Так что введите 50% в поле width, и оно автоматически конвертируется в правильное пиксельное значение на базе ширины родительского слоя (что в нашем случае – белый слой-маска шириной 1160px).

 

Так что введите 50% в поле width, и оно автоматически конвертируется в правильное пиксельное значение

 

Выбирайте любой способ на свое усмотрение. Оба метода экономят время.

 

Добавление логотипа и контактной информации

Вставим лого и контакты в левую секцию контейнера. Если вы еще не скачали лого, загрузите его отсюда.

 

Добавление логотипа и контактной информации

 

Знаете, что?

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

Уже? Тогда начнем работу над формой обратной связи…

 

Дизайн красивой формы обратной связи

 

Создание красивой формы обратной связи

 

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

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

 

Опять работаем с иконками

Для каждого текстового поля добавим иконки (имя, имейл, тема, поле сообщения).

Нарисуйте круг (О) размером 40 x 40px, цветом F1F1F1.

Нам нужны 4 круга по вертикали с расстоянием между ними в 20 пикселей.

Тут есть 2 варианта, и я покажу оба:

  • Вы можете (и мы это уже делали) воспользоваться Alt + Drag, и создать 3 дубликата, учитывая нужное расстояние между копиями.
  • Также можно воспользоваться опцией Make Grid. Выделите ваш круг и выберите в панели инструментов Make Grid. Введите следующие значения:

 

можно воспользоваться опцией Make Grid

 

У нас есть 4 круга, так что нам нужно 4 строки и между ними интервал в 20px, и нужна всего 1 колонка.

Я показал, как использовать инструмент Make Grid на довольно простом примере (в нашем случае, Alt + перетаскивание было бы вполне достаточно), но он невероятно полезен при работе со множеством слоев, которые нужно расположить на сеточном макете без необходимости все перетаскивать вручную, проверять расстояния между объектами и т.д.

Вернемся к работе. При выделенном первом круге задайте цвет 95BB6C.

Вставим иконки поверх кругов. Вернемся в Iconjar (используйте функцию поиска в приложении), найдем там следующие иконки, и перетащим их в дизайн:

  • User (для поля Name)
  • ail (для поля Email)
  • ews (для поля Subject)
  • Pencil (для поля ввода сообщения)

Когда эти иконки помещены в Sketch, измените их цвет и выровняйте их относительно друг друга. Получится следующее:

 

Когда эти иконки помещены в Sketch, измените их цвет и выровняйте их относительно друг друга

 

Теперь быстро создадим текстовые поля и поле ввода сообщения (text area).

Нарисуйте прямоугольник (R) шириной 370px и высотой 40px, затем продублируйте его 3 раза (используя описанные выше методы).

Затем добавьте следующие настройки:

  • Задайте Border Radius 2px для всех 4 фигур
  • Измените высоту для блока сообщения на 230 px
  • Для поля имени задайте цвет D5D5D5, и для других полей — F1F1F1
  • Измерьте расстоянии между текстовыми полями и иконками – оно должно быть 10px.

 

Затем добавьте следующие настройки

Отлично! Получится вот такой вид:

 

Отлично! Вот результат нашей работы

Теперь добавим какой-то текст в поля. Используйте такие настройки:

 

Теперь добавим какой-то текст в поля

 

Задайте цвет 666666 для текста в поле имени, и D5D5D5 для имейла, темы и сообщения.
Затем убедитесь, что тексты-заглушки корректно выровнены в самих полях:

 

Затем убедитесь, что тексты-заглушки корректно выровнены в самих полях

 

Осталось добавить только кнопку Submit, и все!

Нарисуйте прямоугольник (R) с такими настойками:

 

Нарисуйте прямоугольник (R) с такими настойками:

 

Добавьте текстовый слой (T) со следующими настройками:

 

Добавьте текстовый слой (T) со следующими настройками

 

Отличная работа! Мы закончили форму и раздел с контактами.

 

Отшлифуем дизайн футера

Нужно добавить парочку социальных иконок и немного текста в футер.

И вот над чем мы поработаем в последней части:

 

Нужно добавить парочку социальных иконок и немного текста в футер

 

Нарисуйте прямоугольник (R) на всю ширину артборда, 200px в высоту, и задайте цвет 303030.
Найдите в Iconjar иконку Twitter нам нужна та, что без кружочка, и перетяните ее в свой дизайн.

Мы немного увеличим размер социальных иконок, которые вставим в дизайн, обязательно соблюдайте пропорции (замочек должен быть закрыт), используйте следующие настройки (для каждой иконки, которую вы вставляете из Iconjar)…

 

Мы немного увеличим размер социальных иконок

 

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

Теперь добавим текст рядом с иконкой со следующими настройками:

 

Теперь добавим текст рядом с иконкой со следующими настройками

 

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

Повторите тот же процесс для других социальных иконок (например, Dribbble, Instagram, Medium, Vimeo).

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

 

Используйте также опцию Distribute Horizontally, чтобы равномерно распределить элементы в футере

 

Добавьте небольшой текст copyright под социальными иконками, и получится такая картина:

 

Добавьте небольшой текст copyright под социальными иконками

 

Вот и все! О, небольшой штрих:

Если у вас осталась пустая область артборда под футером, это можно отрезать:

 

Если у вас осталась пустая область артборда под футером, это можно отрезать

 

В моем случае было лишних 40px. При выделенном артборде в списке слоев:

 

В моем случае было лишних 40px. При выделенном артборде в списке слоев

 

Перейдите в панель инспектора, и в настройках высоты (Height) проведем небольшие вычисления (как мы уже делали раньше), и отнимем эти лишние пиксели:

 

в настройках высоты (Height) проведем небольшие вычисления (как мы уже делали раньше), и отнимем эти лишние пиксели:

 

Отличная работа! Теперь мы точно закончили.

 

Что вас ждет в части 4

В 4 части этой серии уроков мы подготовим версии дизайна для планшета и мобильных устройств. Скоро увидимся!

 

Серия уроков Sketch (часть 1 из 5): Настройка Sketch

Серия уроков Sketch (часть 2 из 5): Символы и стили

Серия уроков Sketch (часть 3 из 5): Дизайн десктоп версии

Серия уроков Sketch (часть 4 из 5): Дизайн мобильной версии

Серия уроков Sketch (часть 5 из 5): Передача дизайна разработчику

 

Перевод статьи medium.com от автора Marc Andrew.