Привет, Хабр! Пролистывая страницы, совершая покупки в интернете, читая блоги — чем бы вы ни занимались, вы будете встречать написанные слова.
Значение этих слов — один из важнейших компонентов, но, конечно, не единственный. Вы когда-нибудь задумывались о взаимосвязи между значением и общим видом и ощущением от текста?
Каким бы ни был ваш ответ, продолжайте читать, потому что вы узнаете, что такое типографика, её основные элементы и важность типографики в UX/UI-дизайне.
Типографика — это искусство расположения букв и текста таким образом, чтобы сделать текст читаемым, легко воспринимаемым и визуально привлекательным для читателя.
В любом продукте, который вы используете (особенно в цифровом), дизайнер (или целая команда дизайнеров) тщательно и стратегически продумывает стиль, размер и структуру шрифта, чтобы усилить и передать смысл текста.
Несмотря на то, что важность типографики возрастает с каждым днём, и вы, скорее всего, связываете её с цифровыми продуктами, типографика появилась ещё в XI веке! Первым примером типографики стала Библия Гутенберга, которая вдохновила и повлияла на западные цивилизации.
Благодаря Всемирной паутине, особенно в последние два десятилетия, дизайнеры могут находить и использовать обширную коллекцию новых привлекательных шрифтов. Типографика в UX/UI-дизайне — один из важнейших элементов, поскольку она связывает общий дизайн с посланием бренда.
Шрифт может помочь передать сообщение одним своим видом. Обратите внимание на разные настроения: современное, игривое, тёплое, дружелюбное, чистое и т. д.
Есть несколько аспектов типографики, о которых вам нужно знать: гарнитуры и шрифты, пробелы, интерлиньяж, кернинг, единообразие, иерархия, выравнивание, цвет и контраст.
Если вы новичок в дизайне, то, вероятно, запутались и пытаетесь понять разницу между гарнитурами и шрифтами.
Шрифт — это графическое представление текстовых символов. Шрифт — это стиль оформления, состоящий из нескольких символов, которые различаются по начертанию и размеру. Это как «семейство» шрифтов, которые отличаются начертанием, шириной и стилем.
Ещё одним аспектом типографики в UX/UI-дизайне является пустое пространство. Пустое пространство — это пустое место, окружающее текст, изображения или другую графику в интерфейсах. В основном это цвет фона. Дизайнеры изменяют пустое пространство вокруг текста, регулируя поля, межстрочный интервал или отступы.
Несмотря на то, что свободное пространство может показаться чем-то незначительным, его правильное использование может существенно повлиять на общую читабельность, плавность и восприятие текста. Например, дизайнеры увеличивают свободное пространство, когда хотят выделить важный раздел текста.
Выравнивание — это процесс настройки интервала между группами символов, которые образуют слово и текстовый блок. Дизайнеры стараются определить подходящий интервал для всех букв, чтобы текст выглядел чище и был легче для чтения. Выравнивание эффективно, когда пользователи могут легко прочитать буквы в слове. Выравнивание также известно как межбуквенный интервал.
Кернинг — это ещё один способ организации типографики в UX/UI-дизайне. Он похож на трекинг, но это не одно и то же. Как упоминалось выше, трекинг — это расстояние между всеми символами шрифта, а кернинг — это расстояние между двумя символами.
Дизайнеры прибегают к кернингу, когда хотят изменить расстояние между двумя конкретными буквами, чтобы оно выглядело более естественно.
Хороший дизайнер всегда следит за единообразием типографики в своём проекте. Если в разных шрифтах и начертаниях нет единообразия, ваш продукт будет выглядеть беспорядочно, сбивать с толку, выглядеть непривлекательно и будет сложен для восприятия будущих пользователей. Единообразие означает создание иерархии, которая определяет использование шрифтов, их размеры и форматирование.
Установление и соблюдение такого порядка поможет читателям легко ориентироваться в тексте, подсознательно замечая и принимая во внимание иерархию, и поможет им с лёгкостью читать текст (и достигать своей конечной цели), что является одной из основных целей типографики в UX/UI-дизайне.
Как мы уже упоминали, ещё одним аспектом типографики является её иерархия. Дизайнеры организуют текст в своих цифровых продуктах, определяя использование шрифтов и их стили, размеры и начертания. Иерархия и единообразие являются важнейшими элементами типографики.
Например, если вы посмотрите на статью в нашем блоге, то заметите, что заголовок блога, подзаголовки и цитаты набраны более крупным или жирным шрифтом. Такое структурирование помогает вам, читателю, легче ориентироваться в тексте и просматривать его. Хорошо структурированная иерархия типографики в UX/UI-дизайне означает, что половина работы по передаче сообщения выполнена.
Выравнивание означает установку одинакового и достаточного расстояния между элементами — текстом или графикой.
Большинство дизайнеров пользовательских интерфейсов используют поля, чтобы всё было выровнено по центру: логотип, заголовок и основной текст. Однако есть небольшое пространство, где вы можете создать своё «решение», но при этом важно, чтобы оно было чистым, читаемым и единообразным. При разработке интерфейса всегда полезно ознакомиться с отраслевым стандартом.
Цвет — один из самых практичных способов сделать типографику в UX/UI более эффектной. Как дизайнер, вы должны выбирать цвета, которые подходят к фону вашего цифрового продукта и другой графике. При настройке типографики продукта не стоит экспериментировать с контрастными цветами или использовать их в избытке.
Такое смешивание цветов приведет только к неблагоприятным результатам, таким как снижение читаемости и усвояемости, а также более высокие шансы помешать пользователям читать и достигать своей цели. Хороший дизайнер пользовательского интерфейса постарается сбалансировать цвет текста, его нюансы, оттенки и насыщенность с другими элементами для достижения чистого внешнего вида и бесшовного взаимодействия.
Дизайнеры прибегают к контрастам, когда хотят создать различие или подчеркнуть элементы типографики, например, используя разные цвета, размеры или даже другой шрифт.
Создавая контрасты, вы можете привлечь внимание к определённому сообщению или области страницы, улучшить читаемость или разделить страницу на части. Правильное использование контрастов повышает общий уровень качества типографики в UX/UI-дизайне и облегчает пользователям навигацию.
Давно прошли те времена, когда для передачи важной информации использовали Comic Sans или Monotype Corsiva!
В наши дни пользователи ежедневно просматривают огромное количество контента, поэтому выбор устаревшего и неаккуратного шрифта может вызвать у них негативные эмоции и оттолкнуть их от вашего продукта ещё до того, как они с ним взаимодействуют. Поэтому не стоит недооценивать важность эстетики цифровых продуктов. Но эстетика — не самая важная часть. Если вы позаботитесь о том, чтобы использовать понятную, аккуратную типографику с чистой и систематизированной иерархией, вероятность того, что ваш текст не будет эстетически привлекательным, снизится.
Типографика в UX/UI-дизайне должна только повышать читаемость сообщения, увеличивать вовлечённость, дополнять текст и повышать общий уровень пользовательского опыта.
Хорошая типографика привлечёт внимание и побудит пользователей начать чтение. В отличие от неё, хаотичная типографика приведёт к резкому увеличению показателя отказов! Вот почему UX- и UI-дизайнеры, UX-редакторы, копирайтеры и другие специалисты по маркетингу часто работают вместе, чтобы создавать привлекательный и захватывающий контент, который будет выглядеть так же хорошо, как и звучать.
Хорошие шрифты, правильное расстояние между элементами и продуманный выбор цветов и контрастов заставят пользователей больше взаимодействовать с текстом вашего цифрового продукта. Кроме того, внимание к типографике в UX/UI-дизайне также формирует имидж вашей компании. Когда общая типографика соответствует фирменному стилю, создается впечатление, что у компании все в порядке. Такое впечатление сразу повышает уровень доверия пользователей и способствует узнаваемости.
Заключительные советы и размышления
Теперь, когда вы прочитали наше руководство по типографике в UX/UI-дизайне, мы надеемся, что развеяли некоторые ваши сомнения и недоумения.
Но у нас есть пара полезных хитростей — считайте их наградой за вашу увлечённость и готовность учиться! 😉
Изучите гарнитуры и шрифты и подумайте, как их можно использовать в вашей отрасли. Не все гарнитуры подходят для всего; например, если вашими пользователями являются дети, вам следует выбрать более крупные шрифты, которые выглядят игриво, но при этом легко читаются.
Смешивайте и сочетайте, (но не слишком много.) В вашем цифровом продукте следует использовать не более двух шрифтов. Если их будет больше, это создаст помехи и ухудшит читаемость.
Масштабируйте его. Этот совет особенно актуален при разработке веб-приложения, с которым пользователи будут взаимодействовать на компьютерах и мобильных устройствах. Масштабируйте все шрифты и гарнитуры для всех платформ — iOS, Android и Web.
Кратко. Если в вашей команде нет копирайтера или UX-копирайтера, всегда старайтесь сделать текст простым и понятным.
Создайте прототип и протестируйте его. В конце концов, вы же UX/UI-дизайнер! Протестируйте масштабирование, анимацию, если она у вас есть, цвета и пробелы; посмотрите, что лучше всего подходит вашим пользователям.