Здесь я расскажу, как использую одну из лучших возможностей Sketch для создания и редактирования типографики! Дизайн очень динамичен, и адаптируемость играет в нем ключевую роль. Типографика очень важный момент дизайна.

Бесспорно, последняя версия Sketch получилась очень удачной. Быстродействие, гибкость и простота адаптации – все это ключевые атрибуты Sketch 3. Среди последних новшеств невероятной популярностью пользуется функция “Symbols” (символы). Но на этом магия Sketch 3 не заканчивается – связанные стили для фигур и текста не менее волшебны. Назначение и глобальное применение параметров форматирования текста еще никогда не было столь простым.

Типографика и глобальные стили

По аналогии со «сгруппированными символами», стили ваших текстов можно глобально связывать между слоями и артбордами. Можно создавать их с нуля и управлять ими в окне стилей, а затем применять к слоям текста, где это необходимо, — об этом я расскажу подробнее ниже.

Систематические и фундаментальные стили

В Sketch гениально продумана возможность иметь «живую» (рабочую), предварительно настроенную версию стиля, которую можно легко изменять в процессе разработки. Типографика у вас всегда под рукой. Используя предопределенное форматирование в типографики, мы можем быстро создавать различные каркасы и макеты. Опция текстовых стилей вырабатывает очень полезную привычку: создавать хорошо структурированное, гибкое руководство по стилю контента.

Простые, быстрые и эффективные

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

Руководство по стилю

Составление руководства по стилю – не самое любимое занятие для большинства дизайнеров, но любому из нас критически важно соблюдать единый стиль в форматировании текста. Руководство по стилю создавать сложно, если отделить этот процесс от самого дизайна и отложить на потом. Хотя его наличие является обязательным при разработке сайта или приложения. Типографика в Sketch — это совсем новый уровень взаимодействия дизайнера и руководства по стилю.

“Разрабатывая набор интеллектуальных критериев, дизайнер имеет возможность принимать ‘креативные решения’, которые основываются на систематическом подходе вместо инстинктивных импульсов”. – Карл Герстнер.

Типографика!

Чтобы изучить основы стилизации текста, я познакомлю вас с недавним экспериментом на одном проекте по веб-дизайну:

Для начала, я открываю Sketch 3 и загружаю заготовку шаблона “Web Design”.

я открываю Sketch 3 и загружаю заготовку шаблона “Web Design”

Добавление этих шаблонных заготовок в Sketch 3 экономит невероятное количество времени!

В Sketch 3 уже есть артборд базового типографического руководства (“Typography Guide”).

Затем я перехожу на страничку заготовок файла и выбираю предварительно составленный артборд “Typography” (Типографика). Теперь я могу увидеть текстовые слои в артборде и настроить стили текстов под свой вкус. Также я могу добавить несколько новых стилей.

артборд базового типографического руководства (“Typography Guide”)

В итоге у меня получился артборд с типографикой вида:

Типография Sketch 3: Связанные стили текста

Мой артборд типографического руководства (“Typography Guide”) в Sketch 3 с разными текстовыми стилями для веб и мобильных разрешений. Так просто редактировать и экспортировать!

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

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

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

Позже, когда я разработаю одну или две страницы контента в артбордах, у меня появится страничка руководства по стилям статей (“Article Styles”), которая будет выглядеть примерно так:

у меня появится страничка руководства по стилям статей (“Article Styles”)

Артборды, разбитые по разрешению: компьютер, планшет (iOS), и мобильный (iOS). Страничка разработана для поста статьи.

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

Я думаю, настало время отзывов, поэтому я просматриваю свою работу вместе с коллегами. Благодаря руководству по рабочим стилям, которое я заранее разработал, я могу быстро пройтись по основам с командой разработчиков, чтобы они поняли суть структурных компонентов проекта. Допустим, я получил критический отзыв по поводу слишком мелкого размера шрифта основного текста (стиль “Text: Paragraph”)…

Быстрое изменение типографики в ходе работы на проектом в Sketch

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

Быстрое решение: все, что мне нужно сделать, — выделить слой текста “paragraph”, которому я задал стиль “Text: Paragraph” и изменить в нем размер шрифта на больший.

“Помните, стили текста синхронизированы, так что изменения в каком-то одном слое текста применяется на все остальные слои, оформленные в этом стиле”. – такое сообщение выводится в заготовке шаблона Sketch: “iOS UI design”.

Парочка подсказок:

Стили текста можно переименовать или удалить в окошке управления стилями. Это окно доступно на панели инструментов, пункт “Styled Text”.

пункт “Styled Text”

Текстовые слои при копировании и вставке в новый файл Sketch сохраняют свои параметры стиля.