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

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

Розпочинай вивчення UX/UI з типографіки

Мій підхід до вивчення дизайну базується на тому, що спочатку учень має отримати базові знання графічного редактору, в нашому випадку це Figma. Наступний крок – освоєння теорії візуального дизайну UI. А тільки після цього – перехід до складніших тем по UX дизайну.

Зараз ми зупинемось на другому кроці – UI дизайні та розпочнемо із його першої теми.

Хоча це може здатися незначним елементом, типографіка – це основа будь-якого дизайну. Її використання може вирішити багато проблем з читабельністю, легкістю сприйняття та загальним враженням від вашого продукту.

У веб-просторі практично не існує сайтів, у яких би не використовувся текст. Тому для UX/UI дизайнера важливо розуміти, як правильно використовувати шрифти та як оформляти текстові блоки для максимального комфорту користувачів. Правильне застосування типографіки може робити дизайн більш доступним та зрозумілим, забезпечувати зручну навігацію та високий рівень взаємодії між користувачем та дизайном.

Зміст гайдів

На вас очікує два гайди. Перший – вичерпна інформація про типографіку для UX/UI дизайнерів. Гайд містить 52 сторінки. Його зміст:

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

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

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

Другий гайд – рекомендації по офомленню текстів. Не знаєте як працювати з лапками? А як щодо тире, числових значень або нерозривних пробілів? Написання дат, часу та номерів телефону. Все це також тут.

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

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

Так, гайди створила я, опираючись на свої знання, перевірені джерела та досвід, який я отримала в процесі менторства мої учнів. Тому маю розуміння як про потреби новачків у освоєнні матеріалу, так і у тому, яка саме інформація знадобиться в роботі дизайнеру.

Для кого створені гайди?

Ці гайди будуть корисні:

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

Ціна гайдів та як купити?

Гайди продаються комплектом. Разом мають 60+ сторінок якісної інформації. Вартість обох гайдів 25$ за курсом НБУ. Алгоритм покупки наступний:

  1. Написати мені у інстаграм @frusia.pro або телеграм @frusia «Хочу гайди з типографіки».

  2. Отримати від мене реквізити карток Моно, Приват або PayPal на вибір.

  3. Скинути скрін про проплату та отримати лінк на pdf-файли гайдів.