Руководство UX-дизайнера по типографике

Типография может обеспечить или разрушить успех сайта или приложения. Его краеугольный камень UX-дизайн; более 90% онлайн-информации представлено в текстовой форме. Но дизайнерская дисциплина типографики — это гораздо больше, чем просто выбор привлекательного шрифта для вашего веб-сайта или приложения. При практике типографики следует учитывать ряд элементов. Вот список терминов и набор принципов типографики, которые помогут вам стать более опытными в этой дисциплине и создавать удобные для пользователя проекты.

Но сначала, что такое типографика?

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

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

Термины типографики

Гарнитура: слово «гарнитура», также известное как семейство шрифтов, происходит от физического отпечатка и относится к граням физических буквенных блоков. Гарнитура состоит из шрифтов — так же, как альбом состоит из треков, а книга — из глав. Гарнитура включает в себя несколько начертаний шрифта, и его стиль является общим для всех символов, цифр и символов. Arial, Times New Roman и даже Comic Sans — все это шрифты.

Шрифты Helvetica, Futura, Garamond, Bodoni, Univers, Gotham, Century, Caslon, Source Sans, Optima, Baskerville и Minion.

© Дэниел Скрок и Интерактивный дизайн Фонд, CC BY-SA 3.0

Шрифт: Шрифты имеют определенный вес в гарнитуре. Вы выбираете шрифт; вы используете шрифт. Если бы вы выбрали Georgia в качестве шрифта, то вашими шрифтами были бы жирный, курсив и обычный шрифт Georgia. Другими словами, шрифт — это отдельные стилизованные характеристики, присущие гарнитуре. Скорее всего, вы будете использовать 2–3 шрифта для каждого проекта, и они станут основой вашей типографики и ключевым элементом вашего общего дизайна.

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

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

x-высота: расстояние между базовой линией и высотой строчной буквы «x». Если вы работаете со шрифтом, имеющим необычно большую (или маленькую) высоту по оси X, это может повлиять на весь интерфейс, а иногда даже нарушить макет.

Гладить: прямая или изогнутая линия, образующая основную часть буквы.

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

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

Сравнение шрифтов с засечками и без засечек.

© Дэниел Скрок и Фонд интерактивного дизайна, CC BY-SA 3.0

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

Подниматься и спускаться: вертикальная черта, простирающаяся вверх за пределы высоты x и вниз за пределы базовой линии соответственно.

Расстояние между буквами (или трекинг): расстояние между самой широкой точкой каждого символа. Отслеживание конкретно относится к равномерному увеличению или уменьшению горизонтального пространства между символами.

Белое пространство: также известный как негативное пространство— это площадь между элементами в композиции дизайна. Если пробелы не сбалансированы, текст будет трудно читать.

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

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

Иерархия в типографике.

© Дэниел Скрок и Фонд интерактивного дизайна, CC BY-SA 3.0

Принципы типографики

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

1. Слишком много шрифтов мешают хорошему пользовательскому опыту.

Будьте проще! Слишком большое количество шрифтов может выглядеть неряшливо и привести к путанице. В дизайне лучше всего придерживаться двух-трех шрифтов. Использование нескольких шрифтов также увеличивает размер и время загрузки приложений. Для оптимизации работы используйте шрифты, которые, скорее всего, будут доступны/установлены у пользователей.

2. Выбирайте шрифты, которые дополняют и контрастируют друг с другом.

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

Примеры плохого и хорошего сочетания в типографике.

© Дэниел Скрок и Фонд интерактивного дизайна, CC BY-SA 3.0

3. Учитывайте читаемость, разборчивость и доступность

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

Распространенность «темный режим» — хороший пример, иллюстрирующий важность доступности: она уменьшает дискомфорт при взгляде на яркий экран и улучшает общую разборчивость (символы и слова вашего текста узнаваемы и легко понятны) и читабельность (за вашим текстом легко следить, избегайте чрезмерно сложных слов и перегруженных структур предложений). Некоторые исследования показывают, что шрифт с засечками не так доступен, как шрифт без засечек, особенно для пользователей с дислексией. Однако исследование не дает окончательных результатов. Чтобы убедиться, что ваши проекты доступны, всегда проверяйте их на реальных пользователях.

4. Отличная визуальная иерархия улучшает UX

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

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

Создайте визуальную иерархию с помощью типографики. © Chaosamran_Studio, Добросовестное использование

5. Сделайте свою типографику масштабируемой

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

6. Обогатите UX с помощью типографики

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

Нью-Йорк Таймс использует каллиграфию для своего логотипа и шрифт с засечками для заголовков, напоминающий классическую печатную газету. © New York Times

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

Успешная типографика может заявить о себе и создать настроение. © Netflix, добросовестное использование

7. Тестируйте и учитесь

Как и на любом этапе процесса проектирования, очень важно тестировать и учиться. Попробуйте разные шрифты и шрифты, посмотрите, как они работают друг с другом, и масштабируйтесь с одной платформы на другую. Отличный трюк для проверки шрифта — фраза «быстрая бурая лиса перепрыгивает через ленивую собаку“, так как оно содержит все буквы английского алфавита. Вполне возможно, что ваше приложение или веб-сайт могут быть переведены на другой язык, поэтому важно проверить этот результат. Вы хотите убедиться, что ваш типографский дизайн по-прежнему работает с диакритическими знаками (ударения или знаки выше, ниже или рядом с буквами, которые указывают на определенное произношение или ударение) или различными сценариями. Путем тестирования и обучения вы можете сделать этот опыт удобным для всех!

Вывод

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

Рекомендации и где узнать больше

Узнайте больше о типографике и других элементах визуального дизайна из нашего курса. Визуальный дизайн: полное руководство.

Узнайте больше о типографской терминологии и узнайте о анатомия типа.

Углубитесь в типографику в дизайне пользовательского интерфейса с помощью бесплатных онлайн-ресурсов от Adobe XD, Shopifyи Протойпр.

Узнайте больше о лучших практиках типографики с помощью Мокплюс.

Изображение героя

© Мика Баумайстер, UnSplash, добросовестное использование