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

Как создать библиотеку паттернов в Sketch

Библиотека паттернов

Сталкивались ли вы с проблемой непостоянства в веб-дизайне? Это происходить сплошь и рядом, особенно при работе над масштабными проектами. К счастью для нас, существуют библиотеки паттернов!

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

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

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

Ну все, хватит описывать достоинства Sketch. Давайте погрузимся в этот урок! У вас еще нет копии Sketch? Просто скачайте бесплатный триал.

Шаг 01

Настройка артборда - шаг 1

Настройте артборд

Перед тем, как начать, убедитесь, что у вас установлен бесплатный шрифт Google Source Sans Pro.
Создайте новый документ, добавьте новый артборд через меню Insert > Artboard (или горячая клавиша: A). Артборд — это фиксированный холст, который мы будем использовать в качестве размера экрана. Вы заметите, что в список слоев слева добавился ‘Artboard 1'. В панели инспектора справа задайте ширину (Width) 1280 пикселей и высоту (Height) 2000 пикселей.

Шаг 02

Создание разметки - шаг 2

Сделайте разметку

Теперь добавьте решетку. При выделенном Artboard 1 перейдите на View > Canvas > Show Layout (горячая клавиша Ctrl+L). Появится стандартная сетка. Теперь нужно немного ее подредактировать. При все еще выделенном Artboard 1 перейдите на View > Canvas > Layout Settings. Установите значение 1080px для Total Width (общая ширина), Number of Columns (число колонок) — 12, Gutter Width (ширина канавок) — 30px, Column Width (ширина колонки) — 60px. Убедитесь, что отмечена опция Gutter on outside. Кликните кнопку Center.

Шаг 03

Создание кнопки - шаг 3

Делаем кнопку

Артборд готов, сетка настроена, настало время добавить контент. Для этого урока мы будем создавать несколько разных элементов библиотеки паттернов. Начнем с кнопок. Чтобы создать фон кнопки, перейдите в меню Insert > Shape > Rectangle (горячая клавиша: R). В Инспекторе установите ширину 280 пикселей и высоту 44 пикселя. Установите радиус 3 пикселя и цвет заливки #1A9DD3.

Шаг 04

Вставка и форматирование текста - шаг 4

Вставка и форматирования текста

Теперь добавьте текст. Перейдите в меню Insert > Text (горячая клавиша: T). Измените Typeface на Source Sans Pro, Weight на Bold, Color на #FFFFFF, Size на 16pt и нажмите на иконку centre align (выровнять по центру).

Расположите текст так, чтобы он был по центру фона. Выделите оба слоя и перейдите в меню Arrange > Group Layers (горячая клавиша: Cmd+G). При выделенной группе перейдите на Layer > Create Symbol. Вы заметите, что Sketch подсказывает назвать символ, так что введите Button. Символы можно распознать по фиолетовой иконке возле имени слоя.

Шаг 05

Использование символов в sketch - шаг 5

Использование символов

Любое изменения символа, как и то, что мы только что сделали, будет применено ко всем сущностям этого символа. Единственная проблема — если мы меняем текст кнопки внутри символа, он изменится на всех остальных кнопках. Чтобы этого не происходило, выделите слой текста и отметьте галочкой пункт Exclude Text Value from Symbol в инспекторе. Теперь давайте создадим копию кнопки. Перейдите на Insert > Symbols > Button.

Шаг 06

Символы в деле - шаг 6

Символы в деле

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

Шаг 07

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

Шаг 08

Создание заголовков - шаг 8

Приступим к заголовкам

Так как заголовки — это текстовые элементы для многократного использования, очень важно использовать опцию Text Styles вместо символов. Вставьте текстовый слой и введите Heading Level 1. Измените тип шрифта (Typeface) на Source Sans Pro, задайте жирность Bold, цвет #3A4654 и размер 37pt. Перейдите в меню Layer > Create Shared Style. В Инспекторе вы заметите, что есть подсвеченный текст. Sketch таким образом подсказывает, что нужно назвать текстовый слой, поэтому введите H1.

Шаг 09

Размеры заголовка - шаг 9

Размеры заголовка

Повторите последний шаг, чтобы создать элементы от H1 до H6. Мои размеры шрифта такие: H1: 37pt, H2: 31pt, H3: 25pt, H4: 21pt, H5: 18pt и H6: 15pt. Так как каждый заголовок представляет собой текстовый стиль, любое изменение будет применено к любым его сущностям. Я использовал инструмент Type Scale от Jeremy Church, чтобы определить размер моих заголовков. Type Scale использует модульный масштаб для подбора пропорциональных размеров заголовков в зависимости от выбранного коэффициента.

Шаг 10

Организация текстовых стилей - шаг 10

Организация текстовых стилей

Чтобы организовать только что текстовые стили, перейдите Insert > Styled Text > Organise Text Styles. Здесь вы можете удалить и переименовать текстовые стили, но изменить их порядок нельзя. Так как текстовые стили упорядочены по алфавиту, я называю похожие элементы одинаковым первым словом. Например, List Unordered и List Ordered (список неупорядоченный и список упорядоченный). Следуйте той же логике и для организации символов. Окей, мы справились с кнопками и заголовками! А что с изображениями?

Шаг 11

Создание аватарки - шаг 11

Создание аватарки

Для аватарки вставьте изображение и прямоугольник, для обоих объектов задайте высоту и ширину 130 пикселей. Задайте радиус прямоугольника в 65 пикселей. Сгруппируйте оба слоя и поместите прямоугольник позади изображения. Кликните правой кнопкой мышки на слое прямоугольника и выберите опцию Use as Mask. Теперь у нас круглый аватар. Мы использовали прямоугольник с большим радиусом закругления вместо собственно круга, потому что если вдруг вы захотите сделать аватарку квадратной, вам нужно будет просто изменить радиус вместа отрисовки новой фигуры.

Шаг 12

Но что, если я хочу заменить изображение, слышу я от вас вопрос? ОК, может, вы и не спрашивали, но это отличный повод поведать вам об опции Image Replace. Выделите аватарку и перейдите в меню Layer > Image > Replace. Выберите другое фото. Sketch автоматически изменит размер нового изображения и заменит им существующее. Вы будете использовать эту опцию чаще, чем вам кажется: это эффективно экономит время!

Шаг 13

 Наполнение фотографиями пользователей с помощью Content Generator для Sketch - шаг 13

Наполнение фотографиями пользователей с помощью Content Generator для Sketch

Альтернативой для использования ваших собственных изображений — использование плагина Content Generator для Sketch от Тимура Карпеева. Просто создайте фигуру и перейдите в меню Plugins > Content Generator Sketch Plugin > Persona > Photos. Плагин берет фотографии пользователей из User Inter Faces, и вставляет их в качестве заливки выделенной фигуры. Что бы мы делали без этих расширений для Sketch!

Шаг 14

Набор цветов - шаг 14

Набор цветов

Настало время свотчей цветов! Очень важно документировать используемые цвета в библиотеку паттернов. Вставьте квадрат со сторонами 120 пикселей и залейте его цветом #1A9DD3. Повторите этот шаг и для цветов #3A4654, #475 361, #8793A1 и #EFF0F1. Есть также плагин для создания свотчей цветов от Джоди Хевенера. Перейдите в Plugins > Swatches и введите пять 16-ричных значений, которые я привел выше.

Шаг 15

Построение библиотеки цветов - шаг 15

Построение библиотеки цветов

Выделите свотч и кликните на цвете заливки в Инспекторе. Внизу селектора цветов вы заметите два раздела — Global Colors и Document Colors. Global colours будут сохранены для всех документов Sketch, а Document Colors уникальны для каждого документа в отдельности. Добавляя цвет в раздел Document Colors, вы создаете свою собственную библиотеку цветов.

Шаг 16

Часто используемые цвета - шаг 16

Часто используемые цвета.

Помимо цветов документа, Sketch автоматически выбирает цвета в вашем документе и определяет, как часто они используются. Эта возможность скрыта из виду, но к ней можно добраться в селекторе цветов. Кликните на области справа от слайдеров hue и opacity. Вы увидите всплывающее окошко под названием Frequent Colours Used in… Sketch не только скажет, как часто используются цвета, но и где.

Шаг 17

Работа по хозяйству - шаг 17

Работа по хозяйству

Для последних шагов, пожалуйста, скачайте этот ресурс и убедитесь, что у вас установлен шрифт Source Code Pro. В этом ресурсе для каждого элемента добавлен HTML-код. Это сделано для того, чтобы убедиться в использовании правильных HTML-тегов и классов для разработки. Можно дополнить код комментариями. Отличный пример такой структуре — сеточный макет, в котором полезно иметь данные о классах колонок, отступах и т. д.

Шаг 18

Убедитесь, что люди могут легко добраться до нужного элемента без необходимости скроллить - шаг 18

Убедитесь, что люди могут легко добраться до нужного элемента без необходимости скроллить.
В этом ресулсе вы также заметите, что в хедере есть селектор. Библиотеки паттернов могут быть очень большими, так что важно, чтобы члены команды имели быстрый доступ к элементам, которые им нужны, без необходимости скроллить по всей странице. Пример можно найти на A List Apart pattern library и Anna Debenham’s pattern library.

Вот и все! Теперь вы знаете, как работать с библиотеками паттернов: все, что вам нужно сделать сейчас — отыскать вдохновение для создания собственной такой библиотеки.

Перевод статьи creativebloq.com.