UX-аналитик Noveo Дарья рассказывает о применении принципов типографики в проектировании интерфейса.
Дизайн-бюро Горбунова
Почти два года назад в нашем отделе проходил митап по следам оффлайн-курса «Пользовательский интерфейс и представление информации» от дизайн-бюро Горбунова в Москве. Кроме курсов, у бюро есть отличные книги на различные темы: от управления проектами до правил написания пресс-релиза или текста письма. Эти книги особенно хороши тем, что в них можно найти огромное количество примеров с подробными объяснениями ошибок. Кроме того, все книги существуют в онлайн-формате и постоянно дорабатываются командой.
Книга «Типографика и вёрстка»
Всем известно, что типографика является одной из важных основ дизайна. Но прочитав книгу Ивана Горбунова «Типографика и вёрстка», я поняла, что типографические правила будут полезны не только дизайнерам, но и UX-специалистам при создании макетов. Отсюда и идея проведения митапа.
Швейцарский стиль
В наше время золотым стандартом типографики признан швейцарский стиль, или, как его еще называют, интернациональный. Он сформировался в Швейцарии в середине 20 века. Главная идея стиля — это преобладание функции над формой. А его основная задача — донести информацию так, чтобы она легко воспринималась читателем. Красота оформления и композиция листа здесь уходят на второй план.
Сегодня швейцарский стиль используется везде: от периодических печатных изданий и плакатов до презентаций и веб-интерфейсов, которые, собственно, нас и интересуют.
Текст, шрифт и его параметры
В первую очередь типографика — это работа с текстом. Текст в буквальном смысле рассказывает пользователю очень многое. Но зная параметры текста и шрифта и верно с ними работая, можно еще передать настроение «продукта», настроить на нужный лад аудиторию или рассказать о ценностях компании. Например, гротескные шрифты больше подходят для веб-интерфейсов, потому что их форма чище, они меньше влияют на компоновку листа и выглядят современнее. А вот текст и экраны, оформленные без учета правил типографики, будут восприниматься хуже и оставят плохое впечатление, как от неграмотно написанного письма.
Базовые элементы
Типографическое лего состоит из следующих элементов:
- Заголовок — крупная надпись, называющая страницу или её блок.
- Текст — основное сообщение.
- Иллюстрация — картинка, сопровождающая сообщение.
- Элементы управления — функциональная часть пользовательского интерфейса, например, поле ввода или кнопка.
- Подпись — пояснение к иллюстрации или элементу управления.
- Ссылка — цветная подчеркнутая надпись, ссылающаяся на другую страницу или элемент.
И задачи верстки в типографике сводятся к размещению этих элементов на странице аккуратно: так, чтобы они были отделены друг от друга и занимали каждый своё место.
Во время митапа мы подробно поговорили о каждом элементе, но особое внимание было уделено двум из них: иллюстрации и заголовку.
Заголовок
Это один из двух самых ярких элементов вёрстки в типографике. Именно заголовок помогает пользователю сориентироваться, где он находится, показывает смысловую иерархию и таким образом задает направление движения на странице. Заголовок должен быть написан строчными буквами с прописной в начале и без точки в конце. А если заголовок занимает несколько строк, нужно избегать висячих союзов, предлогов и нелогичных переносов.
«Хороший» заголовок должен «накрывать» текст, к которому относится, и принимать его форму. А если длины заголовка не хватает, чтобы «накрыть» модуль, то следует дополнительно отделить модули, например, линиями, чтобы порядок чтения не был нарушен.
Иллюстрация
Второй очень важный элемент вёрстки в типографике — это иллюстрация. Все мы, и дети, и взрослые, обожаем книги и журналы с картинками. Без них читать сплошной текст просто скучно. Иллюстрация, точно так же, как и заголовок, привлекает внимание читателя и направляет движение глаз, но только делает это в разы быстрее. Это не линейный текст, на чтение которого нужно сначала потратить время. Мозг мгновенно идентифицирует лица и образы, строит связи между участниками и вызывает эмоцию.
Иллюстрация — самый яркий и самый заметный для пользователя элемент на странице.
А где же должна располагаться иллюстрация на странице? Лучше всего она чувствует себя наверху текстового блока, то есть над текстом и заголовком. А вот если расположить иллюстрацию под заголовком, то она будет отделять текст от заголовка и прерывать чтение. В итоге читателю придётся «прыгать» взглядом вверх‑вниз от заголовка к тексту через фотографию.
Иллюстрация внизу блока делает его тяжеловесным, так как теперь два ярких объекта, заголовок и иллюстрация, находятся в противоположных местах и тянут страницу в разные стороны. Такая конструкция достаточно опасна в высоконагруженном интерфейсе, но может сработать в спокойном дизайне.
Но лучше всего придерживаться так называемой «канонической конструкции», так как она соответствует естественному порядку чтения пользователя: заметил иллюстрацию, прочитал заголовок, заинтересовался текстом, перешел по ссылкам.
Вывод
Конечно, в статье мы достаточно поверхностно пробежались по основным моментам митапа и такой теме, как типографика. Но главная идея, которую нам хотелось бы передать, это важность типографики и для UX-специалистов. Зная и используя типографические правила в своей работе, можно организовать прототип так, чтобы информация легче воспринималась пользователем, а будущее приложение, соответственно, стало понятнее и приятнее в использовании.
Источники и полезная литература
- Илья Горбунов. «Типографика и вёрстка».
- Курс «Пользовательский интерфейс и представление информации» от дизайн-бюро Горбунова.
- Артемий Лебедев. Ководство. §62 «Экранная типографика».
- Medium «Швейцарская типографика».
- Netology «Разбираемся в основах типографики за 10 минут».
- Ян Чихольд. Новая типографика.
- Йозеф Мюллер-Брокманн. Модульные системы в графическом дизайне.
- Джеймс Феличи. Типографика: шрифт, верстка, дизайн.
- Электронный журнал «Шрифт».
- Видео на Youtube «Основы типографики и вёрстки». Кафедра Градостроительства СФУ ИАиД.
Абстракция: Искусство дизайна. Netflix. Серия о Пауле Шер.
Сообщить об опечатке
Текст, который будет отправлен нашим редакторам: