Вы когда-нибудь смотрели на дизайн и думали: “что-то не так”? Если вы не можете указать пальцем на то, что это, скорее всего, это проблема с вашей визуальной или типографской иерархией.
Когда вы втискиваете контент на страницу с мутной массой разрывов строк, полужирными буквами и курсивом-вы уверены в неприятном результате. Хорошо выглядящие страницы нуждаются в серьезной любви, и за эти годы я обнаружил шесть советов, которые особенно полезны для дизайна вещей, которые люди действительно хотят читать.
1. Знайте свой контент
—
Чтобы создать успешную типографскую иерархию, важно понимать как элементы, необходимые на странице—так и их относительную важность.
Традиционно книги делились на части, главы, разделы и параграфы—каждый со своими правилами верстки. В сегодняшнем веб-ориентированном мире мы все еще придерживаемся многих из этих руководящих принципов. Главы теперь живут на отдельных страницах, оглавления организованы в панели навигации, а абзацы и разделы остаются такими же, как и всегда.
Если вы посмотрите на типичную страницу с веб-сайта Apple Music выше, вы заметите, что они уделили особое внимание своей типографской иерархии. Существует четкое различие между заголовком страницы, ведущим абзацем и отдельными разделами контента, включая заголовки этих разделов.
Опыт чтения таких идеально обработанных страниц кажется гладким и легким, но требует от дизайнера напряженно думать о содержании, отдельных элементах и их относительной важности.
Поэтому, прежде чем вы скопируете/вставите кусок текста вашего клиента, потратьте некоторое время, чтобы действительно прочитать, о чем он. Вы быстро получите лучшее представление о том, как вам нужно его структурировать.
2. Отдельные разделы от пунктов
—
Давайте посмотрим на приведенный выше пример. Для нетренированного глаза эти две страницы выглядят похожими, но опыт чтения очень отличается. Почему? Потому что левая страница не делает различий между отдельными разделами и абзацами. Интервал между строками идентичен, что делает страницу похожей на бесконечный марафон для читателя. Это разбивка по типографской иерархии.
Однако на правой странице мы можем видеть, как небольшое пространство для дыхания между разделами (aka section breaks) дает столь необходимую структуру контента и более легкую читаемость. Расстояние между пунктами также было скорректировано таким образом, чтобы оно было менее навязчивым, но все же заметным. Все это приводит к более гармоничному дизайну страниц и лучшему опыту чтения.
Так что в следующий раз, не забудьте дать вашим секциям перерыв.
3. Экспериментируйте с различными комбинациями типов
—
Размер, цвет, положение, шрифт. Это лишь некоторые из атрибутов, с которыми можно экспериментировать для создания типографской иерархии. Правильная комбинация придаст вашему контенту совершенно новый вид, заставит заголовки разделов всплывать и поможет направить взгляд вашего читателя через страницу.
Как правило, всегда выбирайте свой стиль заголовка, прежде чем останавливаться на типе тела—в противном случае вы можете использовать более крупные или разные цветные версии одного и того же шрифта. Вместо этого, вы должны искать удивительные комбинации, чтобы принести правильный вкус в ваш проект. Иногда, это все, что вам нужно, чтобы сделать вашу работу выглядеть красиво.
4. Используйте больший тип для основного текста
—
Если вы ненавидите видеть большой шрифт на экране, вот что об этом говорит эксперт по юзабилити Оливер Райхштейн:
"16 пикселей-это не большой размер. Это размер текста, который браузеры отображают по умолчанию. Это размер текста браузеры были предназначены для отображения... он выглядит большим на первый взгляд, но как только вы используете его, вы быстро поймете, почему все производители браузеров выбрали этот размер текста по умолчанию”.
Если вы все еще не убеждены, попробуйте прочитать длинную статью с шрифтом 12px—вы, вероятно, не сделаете это до конца. Использование мелкого шрифта происходит из века, когда экраны компьютеров были смущающе малы, поэтому необходимо было показать как можно больше контента. Тогда еще никто не думал о дизайне или удобочитаемости.
Времена изменились, и Вы тоже должны это сделать. Используйте больший тип!
5. Поместите изображения над соответствующим контентом
—
Наше естественное направление чтения слева направо, сверху вниз. Но тут есть одна загвоздка. Наш мозг воспринимает и обрабатывает изображения гораздо быстрее, чем текст, что означает, что мы сначала видим изображения, а затем естественно переходим к чтению того, что мы находим под ними.
Когда вы помещаете описания над изображением, ваш мозг не может обрабатывать информацию без дополнительного тяжелого подъема, что приводит к плохому опыту чтения.
По этой причине содержимое, которое идет с изображением, всегда должно быть ниже изображения.
6. Макет текста для контент-богатых проектов
—
Для большинства проектов можно экспериментировать с типом при работе с другими элементами макета. Скорее всего, вам не понадобится больше, чем заголовок страницы, заголовки разделов и текст абзаца.
Но если ваш проект включает в себя более сложную типографскую иерархию (например, интернет-газету или журнал), лучше всего сначала сделать быстрый макет. Простой способ сделать это-создать файл, подобный приведенному выше, чтобы проверить куски типографского контента, чтобы увидеть, хорошо ли они выглядят вместе.
Это позволяет легко экспериментировать с комбинациями типов, не отвлекаясь на другие элементы дизайна. Как только вы найдете что-то, что вас устраивает, вы можете начать правильно настраивать свой дизайн.
Типографская иерархия более важна, чем когда-либо
—
Согласно исследованию, проведенному доктором Мартином Гильбертом из Университета Южной Калифорнии, средний человек сегодня получает ежедневную дозу информации, которая равна 174 газетам. И это не ошибка. Мы обрабатываем тысячи страниц информации каждый день, читая, слушая и наблюдая.
Как профессиональный дизайнер, вы никогда не получите шанс сыграть большую роль в этой истории, чем организуя визуальную информацию наиболее удобоваримым и всеобъемлющим образом.
Наведение порядка в хаосе-вот что такое типографская иерархия. С точки зрения дизайна, нет более крупной или более важной задачи, чем эта.