Типографика в UX/UI дизайне. Полный гайд для изучения

Краткое описание гайда

  • Два файла в формате PDF
  • 130+ страниц полезной информации
  • Основы работы с типографикой
  • 53 шрифта с бесплатной лицензией
  • 30 уникальных композиций
  • Правила работы с текстами
  • Таблица совместимости шрифтовых пар
  • Ссылки на ресурсы

Файлы

Типографика, pdf

Основной гайд, 123 страницы

Рекомендации по оформлению текстов, pdf

Дополнительный гайд, 8 страниц

Это промо-статья, посвященная руководству по типографике для UX/UI дизайнеров. Это первая часть большого комплекса руководств, которые помогут новичкам освоить новую для себя тему, а опытным дизайнерам - иметь под рукой выжимку знаний о типографике. Без воды и лирических отступлений.

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

Начните изучение UX/UI с типографики

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

Сейчас мы остановимся на втором шаге - UI дизайне и начнем с его первой темы.

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

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

Содержание гайдов

Вас ожидают два гайда. Первый – исчерпывающая информация о типографике для UX/UI дизайнеров. Гайд содержит 120+ страниц:

  • Основные понятия типографики;
  • Виды шрифтов и примеры их использования;
  • Настройка отображения шрифтов: дизайн-подход к работе с текстами. Зная эти правила, вы раскроете секрет, почему у опытных дизайнеров так красиво получается;
  • Работа с иерархией в макетах: как строить свою систему работы с текстами в проекте;
  • Подбор шрифтов для макетов;
  • Бесплатные шрифты для кириллицы: free-лицензия, примеры сочетания в одной композиции, поддержка украинского языка и возможность скачивания;
  • Бесплатные шрифты для латиницы: free-лицензия, примеры сочетания в одной композиции и возможность скачивания;
  • Таблица совместимости шрифтовых пар: идеально для новичков;
  • Ресурсы: где брать хорошие шрифты и что почитать, чтобы поднять свой уровень еще выше.

На изображениях ниже пример слайдов гайда.

Гайд з типографіки для UI дизайнерів
Гайд з типографіки для UI дизайнерів
Гайд з типографіки для UI дизайнерів
Гайд з типографіки для UI дизайнерів
Гайд з типографіки для UI дизайнерів
Гайд з типографіки для UI дизайнерів

Как вписать шрифты в свой дизайн?

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

Все, что вы видите на изображениях есть в гайде.

Композиции с использованием шрифтов гайда
Шрифты в гайдах

Что во втором гайде?


Второй гайд – рекомендации по оформлению текстов. Не знаете, как работать с кавычками? А как насчет тире, числовых значений или неразрывных пробелов? Написание дат, времени и номеров телефонов. Все это также здесь.

Рекомендації по оформленню текстів для UI дизайнерів
Рекомендації по оформленню текстів для UI дизайнерів
Рекомендації по оформленню текстів для UI дизайнерів

Это авторский контент?

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

Для кого созданы гайды?

Эти гайды будут полезны:

  • Новичкам, которые хотят начать изучение UX/UI дизайна;
  • Уже работающим дизайнерам, которые имеют пробелы в знаниях типографики;
  • Дизайнерам, которые хотят иметь под рукой готовую информацию на тему типографики без воды;
  • Всем дизайнерам, нуждающимся подбирать стильные шрифты с бесплатной лицензией для своих проектов за считанные минуты;
  • Людям других профессий, которые часто имеют дело с оформлением текстов для веба. Например, созданием презентаций, рекламных креативов и т.д.

Цена гайдов и как купить?

Гайды продаются комплектом. Итого имеют 130+ страниц качественной информации. Стоимость обоих гайдов – 399 грн. Купить гайды можно тремя способами:

  1. С помощью кнопки «Купить» . Вас перенаправит на страницу бесконтактной оплаты через безопасный LiqPay сервис. Для использования необходимы банковские карты Visa/Mastercard. Нажимая «Купить», вы согласны с условиями Публичной оферты.

  2. Перевод на безналичный счет по Украине. Чтобы получить реквизиты для перевода, напиши в Instagram @frusia.pro или Telegram @frusia.

  3. Перевод на счет PayPal. Для интернациональных платежей. Чтобы получить реквизиты для перевода, напиши нам в Instagram @frusia.pro или Telegram @frusia.

Типографика в UX/UI дизайне. Полный гайд для изучения