Дизайнер Ричард Чайлд поясняет, как создавать библиотеку паттернов в Sketch, чтобы сохранять постоянство вашего дизайн-проекта и использовать его в будущем.
Библиотека паттернов
Сталкивались ли вы с проблемой непостоянства в веб-дизайне? Это происходить сплошь и рядом, особенно при работе над масштабными проектами. К счастью для нас, существуют библиотеки паттернов! Библиотека паттернов – это коллекция элементов дизайна пользовательского интерфейса, которые могут быть повторно использованы для создания новых страниц. Примеры таких элементов включают – навигация, кнопки, заголовки и формы. Создавая дизайн отдельных элементов вместо страниц целиком, мы активно стимулируем возможность повторного использования, в результате очень легко сохранять постоянство стиля и графики в дизайне. Перед реализацией библиотеки паттернов важно убедиться, что используемые инструменты для дизайна поддерживают многократное использование элементов. Последние два года я использую Sketch: легковесный векторный инструмент, идеальный для разработки интерфейсов и библиотек паттернов. Почему он идеален? Я приведу пример. Скажем, у вас есть кнопка, которая используется по сайту много раз, а затем вы решаете что-то в ней изменить. Обычно вы идете и вручную изменяете каждую сущность этой кнопки. Но не в Sketch. Это ПО включает функционал символов: это особый вид группы слоев, если изменяется символ, изменения применяются автоматически ко всем его сущностям. Это идеальный подход в работе с повторяющимися элементами. Ну все, хватит описывать достоинства Sketch. Давайте погрузимся в этот урок! У вас еще нет копии Sketch? Просто скачайте бесплатный триал.
Шаг 01
Настройте артборд Перед тем, как начать, убедитесь, что у вас установлен бесплатный шрифт Google Source Sans Pro. Создайте новый документ, добавьте новый артборд через меню Insert > Artboard (или горячая клавиша:A). Артборд – это фиксированный холст, который мы будем использовать в качестве размера экрана. Вы заметите, что в список слоев слева добавился ‘Artboard 1'. В панели инспектора справа задайте ширину (Width) 1280 пикселей и высоту (Height) 2000 пикселей.
Шаг 02
Сделайте разметку Теперь добавьте решетку. При выделенном 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
Делаем кнопку Артборд готов, сетка настроена, настало время добавить контент. Для этого урока мы будем создавать несколько разных элементов библиотеки паттернов. Начнем с кнопок. Чтобы создать фон кнопки, перейдите в меню Insert > Shape > Rectangle (горячая клавиша: R). В Инспекторе установите ширину 280 пикселей и высоту 44 пикселя. Установите радиус 3 пикселя и цвет заливки #1A9DD3.
Шаг 04
Вставка и форматирования текста Теперь добавьте текст. Перейдите в меню 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
Использование символов Любое изменения символа, как и то, что мы только что сделали, будет применено ко всем сущностям этого символа. Единственная проблема – если мы меняем текст кнопки внутри символа, он изменится на всех остальных кнопках. Чтобы этого не происходило, выделите слой текста и отметьте галочкой пункт Exclude Text Value from Symbol в инспекторе. Теперь давайте создадим копию кнопки. Перейдите на Insert > Symbols > Button.
Шаг 06
Символы в деле Чтобы увидеть символы в действие, измените цвет фона одной кнопки. Убедитесь, что цвет обновится на обеих. Но если вы измените текст на одной кнопке, текст на остальных останется прежним. Синхронизируются только стили, а не строки текста. Это означает, что, например, мы можем создать кнопки для авторизации, покупки или контакта в едином стиле без отрисовки каждой кнопки по отдельности.
Шаг 07
Перед тем, как двигаться дальше, очень важно быть в курсе работы измерений в Sketch. Выделите кнопку, удерживайте Alt и наведите курсор на вторую кнопку, чтобы отразить расстояние между ними двумя. Эту опцию используют не только дизайнеры, она очень нужна и разработчикам, которым постоянно надо вычислять точное расстояние в пикселях между объектами макета.
Шаг 08
Приступим к заголовкам Так как заголовки – это текстовые элементы для многократного использования, очень важно использовать опцию Text Styles вместо символов. Вставьте текстовый слой и введите Heading Level 1. Измените тип шрифта (Typeface) на Source Sans Pro, задайте жирность Bold, цвет #3A4654 и размер 37pt. Перейдите в меню Layer > Create Shared Style. В Инспекторе вы заметите, что есть подсвеченный текст. Sketch таким образом подсказывает, что нужно назвать текстовый слой, поэтому введите H1.
Шаг 09
Размеры заголовка Повторите последний шаг, чтобы создать элементы от H1 до H6. Мои размеры шрифта такие: H1: 37pt, H2: 31pt, H3: 25pt, H4: 21pt, H5: 18pt и H6: 15pt. Так как каждый заголовок представляет собой текстовый стиль, любое изменение будет применено к любым его сущностям. Я использовал инструмент Type Scale от Jeremy Church, чтобы определить размер моих заголовков. Type Scale использует модульный масштаб для подбора пропорциональных размеров заголовков в зависимости от выбранного коэффициента.
Шаг 10
Организация текстовых стилей Чтобы организовать только что текстовые стили, перейдите Insert > Styled Text > Organise Text Styles. Здесь вы можете удалить и переименовать текстовые стили, но изменить их порядок нельзя. Так как текстовые стили упорядочены по алфавиту, я называю похожие элементы одинаковым первым словом. Например, List Unordered и List Ordered (список неупорядоченный и список упорядоченный). Следуйте той же логике и для организации символов. Окей, мы справились с кнопками и заголовками! А что с изображениями?
Шаг 11
Создание аватарки Для аватарки вставьте изображение и прямоугольник, для обоих объектов задайте высоту и ширину 130 пикселей. Задайте радиус прямоугольника в 65 пикселей. Сгруппируйте оба слоя и поместите прямоугольник позади изображения. Кликните правой кнопкой мышки на слое прямоугольника и выберите опцию Use as Mask. Теперь у нас круглый аватар. Мы использовали прямоугольник с большим радиусом закругления вместо собственно круга, потому что если вдруг вы захотите сделать аватарку квадратной, вам нужно будет просто изменить радиус вместа отрисовки новой фигуры.
Шаг 12
Но что, если я хочу заменить изображение, слышу я от вас вопрос? ОК, может, вы и не спрашивали, но это отличный повод поведать вам об опции Image Replace. Выделите аватарку и перейдите в меню Layer > Image > Replace. Выберите другое фото. Sketch автоматически изменит размер нового изображения и заменит им существующее. Вы будете использовать эту опцию чаще, чем вам кажется: это эффективно экономит время!
Шаг 13
Наполнение фотографиями пользователей с помощью Content Generator для Sketch Альтернативой для использования ваших собственных изображений – использование плагина Content Generator для Sketch от Тимура Карпеева. Просто создайте фигуру и перейдите в меню Plugins > Content Generator Sketch Plugin > Persona > Photos. Плагин берет фотографии пользователей из User Inter Faces, и вставляет их в качестве заливки выделенной фигуры. Что бы мы делали без этих расширений для Sketch!
Шаг 14
Набор цветов Настало время свотчей цветов! Очень важно документировать используемые цвета в библиотеку паттернов. Вставьте квадрат со сторонами 120 пикселей и залейте его цветом #1A9DD3. Повторите этот шаг и для цветов #3A4654, #475361, #8793A1 и #EFF0F1. Есть также плагин для создания свотчей цветов от Джоди Хевенера. Перейдите в Plugins > Swatches и введите пять 16-ричных значений, которые я привел выше.
Шаг 15
Построение библиотеки цветов Выделите свотч и кликните на цвете заливки в Инспекторе. Внизу селектора цветов вы заметите два раздела - Global Colors и Document Colors. Global colours будут сохранены для всех документов Sketch, а Document Colors уникальны для каждого документа в отдельности. Добавляя цвет в раздел Document Colors, вы создаете свою собственную библиотеку цветов.
Шаг 16
Часто используемые цвета. Помимо цветов документа, Sketch автоматически выбирает цвета в вашем документе и определяет, как часто они используются. Эта возможность скрыта из виду, но к ней можно добраться в селекторе цветов. Кликните на области справа от слайдеров hue и opacity. Вы увидите всплывающее окошко под названием Frequent Colours Used in.... Sketch не только скажет, как часто используются цвета, но и где.
Шаг 17
Работа по хозяйству Для последних шагов, пожалуйста, скачайте этот ресурс и убедитесь, что у вас установлен шрифт Source Code Pro. В этом ресурсе для каждого элемента добавлен HTML-код. Это сделано для того, чтобы убедиться в использовании правильных HTML-тегов и классов для разработки. Можно дополнить код комментариями. Отличный пример такой структуре – сеточный макет, в котором полезно иметь данные о классах колонок, отступах и т.д.
Шаг 18
Убедитесь, что люди могут легко добраться до нужного элемента без необходимости скроллить. В этом ресулсе вы также заметите, что в хедере есть селектор. Библиотеки паттернов могут быть очень большими, так что важно, чтобы члены команды имели быстрый доступ к элементам, которые им нужны, без необходимости скроллить по всей странице. Пример можно найти на A List Apart pattern library и Anna Debenham's pattern library. Вот и все! Теперь вы знаете, как работать с библиотеками паттернов: все, что вам нужно сделать сейчас – отыскать вдохновение для создания собственной такой библиотеки. Перевод статьи creativebloq.com.
Перевод статьи creativebloq.com
Топ коментарі (0)