Создаем UI kit для презентации: что это и как с этим работать

Сегодня интернет настолько наполнен красивыми картинками, что мы автоматически думаем, что главный акцент необходимо сделать на качественном оформлении фонов и графики. Конечно, важность общего визуального ряда нельзя отрицать: люди все еще «встречают по одежке». И кто-то этим активно пользуется. Но существует маленький нюанс, который довольно часто не замечают. И это текст. Но не в привычном понимании «текст = смысл», а в другом — «текст = дизайн». Текст —  это такой же элемент дизайна, который также требует обработки с точки зрения визуальной эстетики. В большинстве случаев случается две ситуации:

1. Во всей презентации используется пресловутый Times New Roman, от которого в финале уже рябит в глазах.
2. Используется так много различных шрифтов, что читать подобный текст становится невозможно.

Чтобы ваш слайд не выглядел как-то так:

Предлагаю сегодня обратиться к такому инструменту, который я в своей практике использую на регулярной основе. И это UI kit для текста презентации.

В чем его суть?

UI-кит (от англ. User Interface — пользовательский интерфейс) — термин, пришедший из мира разработки и веб-дизайна. По сути, это систематизированный набор визуальных и функциональных элементов: кнопки, поля для ввода, переключатели, выпадающие меню и другие интерфейсные детали.

Как он применяется в презентациях?

Для удобства работы с типографикой в презентациях я взял этот принцип из сферы интерфейсов и начал использовать в контексте создания слайдов. И в данном случае под «UI-китом» я понимаю свод правил оформления текста: он включает в себя стилистические параметры шрифтов, а также общую визуальную структуру.

Создание UI-кита для презентации условно можно разбить на два ключевых этапа:

• Форматирование текста. На этом этапе определяется типографика: какой шрифт будет использоваться, его размеры, межстрочные и межбуквенные интервалы, отступы. Настраиваются параметры для всех текстовых элементов — заголовков, описаний, ключевых акцентов, sale point’ов и т. д.
• Визуальный декор. Здесь подбираются цветовые решения для текста, а также элементы оформления — иконки, геометрические формы, декоративные акценты.

Как выбрать стиль, который подойдет именно вашей презентации?

Лучше всего — через эксперимент и сравнение. Если есть время, используйте следующий подход:

1. Скопируйте исходный текст на слайд.
2. Создайте несколько вариантов оформления этого текстового блока. Подберите несколько вариантов шрифтов, иконок, интервалов и проч.
3. Выберите наиболее удачный из них и оформите финальный макет.

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

Параметры для каждого типа текстового блока

Первое, что мы делаем — это копируем все типы текстовых блоков на один слайд. А в презентации, как я уже говорил в предыдущей своей статье, используются: заголовки, описания, sale point-блоки и списки. Напомню, что собой представляет каждый из них:

1. Заголовки — короткая фраза, которая используется для обозначения страниц.
2. Описание — текстовый блок, используемый для раскрытия информации и для описания общих характеристик
3. Sale point — опорные заголовки с дополнительным описанием. Наиболее важная часть текста презентации.
4. Списки — перечень большого числа факторов, которые надо разместить на одном слайде.

Каждый из этих текстовых блоков имеет свои особенности, поэтому к их оформлению нужно подходить по-отдельности. Итак, давайте разбираться, каких параметров стоит придерживаться.

Заголовки

Основные требования:

1. Объем заголовка должен быть в 1–2 строки, чтобы не перегружать слайд.
2. Размер текста — примерно в два раза крупнее основного текста.

Допустимо использовать 1–2 цвета при оформлении заголовков. Конкретный стиль шрифта подбирается индивидуально, в зависимости от общей концепции вашей презентации (об этом мы еще отдельно поговорим ниже!).

Описание

Основные правила оформления:

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

Sale point

В данном случае важно, чтобы все sale point’ы были оформлены в едином стиле. Вы можете также применить иконки, инфографику для дополнительного декорирования текстового блока.
Например, форму треугольника можно использовать в качестве визуального маркера. Он также нередко заменяет стрелку, которая указывает на ключевые смыслы.

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

Списки                                                        

Списки (или «табы») нужны для равнозначного перечисления нескольких равноправных тезисов. Распространенные варианты оформления списков:

• нумерация;
• стандартные маркеры;
• графические элементы, созданные в PowerPoint (фигуры, значки и т.д.).

Обратите внимание также на длину тезисов, которая не должна превышать 7 слов в строке. При этом все тезисы в списке должны занимать примерно одинаковый объем, чтобы ваш текст визуально не казался разнородным. На рисунке ниже вы можете обратить внимание на хороший и плохой варианты оформления.

Как только вы скопировали и отредактировали содержательную и визуальную составляющую, обратите внимание на шрифты. И это может быть для вас не самой простой задачей, потому что понимание сочетаемости шрифтов — это специфический навык профессиональных дизайнеров. Но как обычному сотруднику, предпринимателю или начинающему дизайнеру подобрать шрифты для UI-kit’а?

Предлагаю 7 советов по подбору шрифтов

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

Какие существуют типы шрифтов?

Для удобства все шрифты можно разделить на четыре основные категории:

Антиква

Это шрифты с засечками — классическое решение, ассоциирующееся со стабильностью, надежностью и профессионализмом. В брендовых материалах они часто передают идею доверия и стабильности. Яркие примеры шрифтов — Times New Roman и Georgia.

Гротеск

Шрифты без засечек, отличающиеся простотой и современной эстетикой. Они воспринимаются как динамичные, креативные и легкие для восприятия — поэтому особенно популярны в цифровых продуктах для молодежи. Такие шрифты, как Calibri, Comic Sans и Monotype Corsiva, относятся именно к этому типу.

Рукописные

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

Акцидентные

Декоративные шрифты, используемые для ярких акцентов — логотипов, названий и отдельных заголовков. Например, TT Ricks или TT Globs. Их задача — привлекать внимание. Однако не все из них легко читаются, поэтому будьте осторожны с ними.

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

1. Не более двух шрифтов

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

Также допустимы контрастные сочетания, например Bebas Neue Bold и Calibri. Это помогает расставить визуальные акценты и избежать однообразия.

2. Используйте готовые шаблоны

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

Подобные шаблоны легко найти в поиске или на специализированных площадках — например, в Telegram-каналах или Pinterest по запросам «шрифтовая пара», «сочетание шрифтов».

3. Визуальная иерархия

Типографика — это инструмент, с помощью которого вы направляете взгляд зрителя. Хорошая структура позволяет расставить приоритеты: от заголовка к подзаголовку и далее — к вспомогательному тексту.

Важно: заголовок должен быть минимум вдвое крупнее остального текста.

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

4. Создайте контраст

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

5. Уместность

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

Рукописные и декоративные шрифты могут нарушить целостность визуального стиля или оказаться слишком сложными для восприятия, особенно в большом объеме.

Небольшое дополнение: вдохновляющие примеры типографики можно найти на Pinterest или Behance. А подходящие шрифты — на следующих ресурсах:

• fonts-online.ru
• fonts.google.com
• paratype.ru

6. Акцентирование текста

Помимо выбора шрифтовой пары обратите внимание на выделение самого шрифта. Хотите ли вы его сделать ярче? Стоит ли выделить жирным стилем?

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

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

7. Размер текста

Точно определите кегель шрифта для каждой категории текста: заголовков, подзаголовков, описаний, цитат, тезисов.

Отнеситесь к этапу подбора шрифтов и редактирования текста с долей креатива, и тогда этот этап не будет для вас слишком утомляющим. В целом этот совет относится ко всему процессу разработки UI-kit’а для презентации.

Напоследок продемонстрирую вам пример того, как на практике выглядит процесс разработки UI-Kita. 

Как применять на практике?

Для наглядности приведу пример разработки UI-kit’а для коммерческой презентации, так как это один из самых популярных типов презентаций, которые делаются на рынке.

Представьте, у вас презентация, которая в целом рассказывает о компании и в итоге презентует оффер для потенциальных клиентов.

Для начала подумайте: какие способы форматирования могут понадобиться для подобного варианта презентации?

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

Ниже я представил пример исходного текста в тех форматированиях, которые мне понадобятся в презентации для компании. И это:

• заголовок;
• подзаголовок;
• описание
• блок из sale point’ов;
• список;
• числовой sale point.

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

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

Определяемся с конкретным шрифтом: у меня это будет Muller. Который мы применяем для многих наших проектов. Далее вы можете пойти двумя путями:

1. Определиться с единым шрифтом для всех текстовых блоков и использовать просто различные степени жирности и форматирования.
2. Подобрать шрифтовую пару для описательных блоков.

Если вы выбрали второй вариант, то возвращайтесь к совету №2 по работе со шрифтами и ищите в поисковике уже подобранные дизайнерами шрифтовые пары. Так вы точно не ошибетесь. Например, к шрифту Muller хорошо подходят:  Inter, Roboto, Montserrat.

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

• Задаю размер заголовка.
• Определяю размер подзаголовка, который будет меньше заголовка примерно в 2 раза, чтобы оставить основной акцент именно на заголовке.
• Создаю «охранное поле» заголовка — это пустое пространство, интервал, который необходимо отступить прежде чем ставить какой-либо объект.
• Добавляю небольшой декор в форме цветной точки и обязательно группирую этот объект с текстом, чтобы сохранить объект на месте и предотвратить возможность изменения интервалов.
• Выделяю цветом второе слово заголовка, чтобы создать дополнительный акцент на теме слайда.

Для текстов в форме sale point, список я также определяю конкретный стиль и настраиваю:

• Размеры шрифтов;
• Выравнивание;
• Длину строки;
• Дополнительный декор;
• Цветовую палитру.

Обязательно группируйте сложносочиненные объекты, чтобы сохранить единую структуру, интервалы и пропорции объектов. Для этого выберите все составные части, нажмите правую кнопку мыши, а затем — «Группировать».

Если у вас sale point с числом, то сознательно выделите этот показатель. Это можно сделать размером, шрифтом, цветом, жирностью. Так вы сможете дополнительно обратить внимание зрителя на это значение.

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

Помните, что в вашем финальном варианте должны соблюдаться единство:

• цветовой палитры;
• шрифтовой пары;
• размера текста;
• интервалов.

И таким образом, текстовые блоки на слайде будут сочетаться друг с другом. Ваш UI-kit готов! Теперь вы сможете просто скопировать любой текстовый блок, который вам необходим, и перенести на другой слайд. И уже в эту готовую форму вставлять необходимое содержимое, применяя формат по образцу. Таким образом, вам не нужно будет редактировать каждый слайд по отдельности, нужно лишь взять шаблон из вашего UI kit’а.

Не такой уж и сложный принцип форматирования текста в 2, а иногда и в 3 раза сокращает вам процесс разработки презентации, уж поверьте мне. Здесь я придерживаюсь принципа: сначала подготовить почву, а потом сажать цветы. Если вы потратите несколько минут на проработку и унификацию текста в начале работы, после вы поблагодарите себя, потому что в итоге у вас получится аккуратная и приятная глазу типографика. А это точно оценит ваша целевая аудитория! Поэтому активно внедряйте в свою практику!