Как красиво разместить заголовки
Сегодня я вам расскажу как красиво размещать заголовки, контент на сайте и покажу несколько схем для этого.
Прежде всего рассмотрим плохие примеры расположения заголовков:
Это все очень утрировано, но согласитесь, достаточно часто на сайтах сначала заголовки прибиты к левому краю, потом по середине. По итогу никакой структуры не прослеживается. Как это можно исправить? Можно ввести направляющие, вокруг которых будут крутиться заголовки. Направляющие — это по сути сетка, колонки, называйте как хотите. И их может быть сколько угодно на странице, но вот предпочтение лучше отдать одной единственной. Что я имею в виду?
Давайте зададим 3 направляющих, чтобы у нас получились 2 одинаковые колонки:
Давайте попробуем выбрать главной — среднюю направляющую. Тогда заголовки и контент нужно располагать около нее. Например, можно выравнять по центру:
Или разместить справа от направляющей:
Можно применить менее стандартное решение, где пользователю нужно будет проходить зрительно меньший путь от конца заголовка до начала контента за счет выравнивания контента справа от центральной направляющей.
С направляющей посередине(или недалеко) все просто — пользователю не приходится прыгать глазом с места на место, его глаза идут по одной линии — средней направляющей + мы создаем определенный паттерн сканирования на сайте, задаем определенный правила, которые из раза в раз повторяем. Таким образом пользователю не нужно тратить время на осознавание 10 разных блоков, ведь он уже понял как все устроено.
А если взять направляющую сбоку? Например левую?
Тут можно сделать самое очевидное:
Но гораздо выигрышнее и интереснее смотрелся бы такой вариант:
Тут пользователь всегда идет по левой направляющей, ходит по заголовкам и, если его заинтересовал заголовок, он направляется вправо — смотреть контент.
По правой направляющей я выравнивать ничего не советую, это непривычно для юзера и не соответствует нашим паттернам считывания информации.
Напутствие — делайте дизайн удобным и предсказуемым для пользователя!
Мой Telegram: @G_sh2403
Мой Behance: https://www.behance.net/kate_designer
