UXPUB 🇺🇦 Дизайн-спільнота

Cover image for Типографика в Sketch: Связанные стили текста
Редакція
Редакція

Опубліковано • Оновлено

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

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

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

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

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

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

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

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

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

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

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

Чтобы изучить основы стилизации текста, я познакомлю вас с недавним экспериментом на одном проекте по веб-дизайну: Для начала, я открываю Sketch 3 и загружаю заготовку шаблона “Web Design”. Image description
Добавление этих шаблонных заготовок в Sketch 3 экономит невероятное количество времени! В Sketch 3 уже есть артборд базового типографического руководства (“Typography Guide”). Затем я перехожу на страничку заготовок файла и выбираю предварительно составленный артборд “Typography” (Типографика). Теперь я могу увидеть текстовые слои в артборде и настроить стили текстов под свой вкус. Также я могу добавить несколько новых стилей. В итоге у меня получился артборд с типографикой вида: Image description
Мой артборд типографического руководства (“Typography Guide”) в Sketch 3 с разными текстовыми стилями для веб и мобильных разрешений. Так просто редактировать и экспортировать! Идея здесь состоит в настройке текстовых стилей перед началом самой работы над дизайном. По моим убеждениям, есть две веские причины именно для такого подхода: Это позволяет сформировать фундамент и определить базовые элементы дизайна. При составлении каркаса, архитектура контента и структура страницы – ключевые элементы, как и связи между элементами, иерархия данных. Реализуя подобное руководство, я минимизирую временные затраты на форматирование текста и избегаю ошибок, которые часто случаются при форматировании текстовых слоев вручную. Я не пытаюсь добиться совершенства и конкретики при задании начальных стилей… типографика течет и меняется в процессе. Это значительно облегчает форматирование текста в ходе работы над проектом. Например, когда нужно настроить текст под определенное разрешение экрана. Если я создаю адаптивный дизайн, я должен учитывать разрешения мобильных телефонов и планшетов. Позже, когда я разработаю одну или две страницы контента в артбордах, у меня появится страничка руководства по стилям статей (“Article Styles”), которая будет выглядеть примерно так: Image description
Артборды, разбитые по разрешению: компьютер, планшет (iOS), и мобильный (iOS). Страничка разработана для поста статьи. Типографика готова, вы уже знаете, как создать свое руководство по стилям и настроить сами стили. Давайте рассмотрим некоторые изменения Я думаю, настало время отзывов, поэтому я просматриваю свою работу вместе с коллегами. Благодаря руководству по рабочим стилям, которое я заранее разработал, я могу быстро пройтись по основам с командой разработчиков, чтобы они поняли суть структурных компонентов проекта. Допустим, я получил критический отзыв по поводу слишком мелкого размера шрифта основного текста (стиль “Text: Paragraph”)… Измените форматирование любого слоя текста в нужном вам стиле, чтобы проверить, применились ли изменения глобально. Быстрое решение: все, что мне нужно сделать, - выделить слой текста “paragraph”, которому я задал стиль “Text: Paragraph” и изменить в нем размер шрифта на больший. “Помните, стили текста синхронизированы, так что изменения в каком-то одном слое текста применяется на все остальные слои, оформленные в этом стиле”. – такое сообщение выводится в заготовке шаблона Sketch: “iOS UI design”.

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

Стили текста можно переименовать или удалить в окошке управления стилями. Это окно доступно на панели инструментов, пункт “Styled Text”. Image description
Текстовые слои при копировании и вставке в новый файл Sketch сохраняют свои параметры стиля.

Топ коментарі (0)