UX-аналитик Noveo Дарья рассказывает о применении принципов типографики в проектировании интерфейса.

Дизайн-бюро Горбунова

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

Книга «Типографика и вёрстка»

Всем известно, что типографика является одной из важных основ дизайна. Но прочитав книгу Ивана Горбунова «Типографика и вёрстка», я поняла, что типографические правила будут полезны не только дизайнерам, но и UX-специалистам при создании макетов. Отсюда и идея проведения митапа.

Швейцарский стиль

В наше время золотым стандартом типографики признан швейцарский стиль, или, как его еще называют, интернациональный. Он сформировался в Швейцарии в середине 20 века. Главная идея стиля — это преобладание функции над формой. А его основная задача — донести информацию так, чтобы она легко воспринималась читателем. Красота оформления и композиция листа здесь уходят на второй план.

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

Текст, шрифт и его параметры

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

Базовые элементы

Типографическое лего состоит из следующих элементов:

• Заголовок — круп­ная над­пись, на­зы­ва­ю­щая стра­ни­цу или её блок.
• Текст — ос­нов­ное сообщение.
• Иллюстрация — кар­тин­ка, со­про­вож­да­ю­щая сообщение.
• Элементы управления — функ­цио­наль­ная часть поль­зо­ва­тель­ско­го ин­тер­фей­са, на­при­мер, по­ле вво­да или кнопка.
• Подпись — по­яс­не­ние к ил­лю­стра­ции или эле­мен­ту управления.
• Ссылка — цвет­ная подчеркнутая над­пись, ссы­ла­ю­ща­я­ся на дру­гую стра­ни­цу или элемент.

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

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

Заголовок

Это один из двух самых ярких элементов вёрстки в типографике. Именно заголовок помогает пользователю сориентироваться, где он находится, показывает смысловую иерархию и таким образом задает направление движения на странице. Заголовок должен быть написан строчными буквами с прописной в начале и без точки в конце. А если заго­ло­вок зани­ма­ет несколь­ко строк, нужно избе­гать вися­чих сою­зов, пред­ло­гов и нело­гич­ных переносов.

«Хороший» заголо­вок должен «накры­ва­ть» тек­ст, к кото­ро­му отно­сит­ся, и при­ни­ма­ть его фор­му. А если дли­ны заго­лов­ка не хва­та­ет, чтобы «накрыть» модуль, то следует допол­ни­тель­но отде­лить моду­ли, напри­мер, линиями, чтобы поря­док чтения не был нару­шен.

Иллюстрация

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

Иллюстрация — самый яркий и самый заметный для пользователя элемент на странице.

А где же должна располагаться иллюстрация на странице? Лучше всего она чув­ству­ет себя навер­ху тек­сто­во­го блока, то есть над текстом и заголовком. А вот если расположить иллюстра­цию под заго­лов­ком, то она будет отде­ля­ть текст от заго­лов­ка и пре­ры­ва­ть чте­ние. В итоге чита­те­лю при­дёт­ся «пры­гать» взгля­дом вверх‑вниз от заго­лов­ка к тексту через фотографию.

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

Но лучше всего придерживаться так называемой «кано­ни­че­ской кон­струк­ции», так как она соот­вет­ству­ет есте­ствен­но­му поряд­ку чте­ния пользователя: заме­ти­л иллю­стра­цию, про­чи­та­л заго­ло­вок, заин­те­ре­со­ва­лся тек­стом, перешел по ссылкам.

Вывод

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

Источники и полезная литература

1. Илья Горбунов. «Типографика и вёрстка».
2. Курс «Пользовательский интерфейс и представление информации» от дизайн-бюро Горбунова.
3. Артемий Лебедев. Ководство. §62 «Экранная типографика».
4. Medium «Швейцарская типографика».
5. Netology «Разбираемся в основах типографики за 10 минут».
6. Ян Чихольд. Новая типографика.
7. Йозеф Мюллер-Брокманн. Модульные системы в графическом дизайне.
8. Джеймс Феличи. Типографика: шрифт, верстка, дизайн.
9. Электронный журнал «Шрифт».
10. Видео на Youtube «Основы типографики и вёрстки». Кафедра Градостроительства СФУ ИАиД.

Абстракция: Искусство дизайна. Netflix. Серия о Пауле Шер.