CodeX Articles Login

Роль отступов в визуальном восприятии дизайна

Polina Shneider
7 min read

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

Давайте представим следующую ситуацию. Посетитель зашел на сайт и попал на целевую страницу. Наивно полагать, что если контент будет выглядеть неопрятно, он никуда не уйдет и терпеливо дочитает все до конца. Нет, он просто закроет вкладку браузера, так и не узнав о преимуществах нашего товара и будет прав, по большому счету. Мы же хотим, чтобы он в комфортной для себя обстановке смог ознакомиться с описанием товара, обдумать и совершить покупку. Какими же средствами мы можем этого достичь? Итак, один из главных инструментов дизайнера — грамотное использование свободного пространства на сайте.

Свободное пространство на сайте

Нужно особым образом разместить заголовок, логотип компании, блоки текста, отзывы клиентов, кнопки социальных сетей и другие элементы. К сожалению, многие новички считают, что чем меньше незаполненного пространства они оставляют, тем лучше, ибо «пустое место — потерянное место». К чему лишние слова? Давайте посмотрим на примерах, что автор сайта ничуть не выиграет, если уместит на страницу больше контента, пожертвовав отступами.

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

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

Междустрочный интервал

Теперь посмотрим, какую роль междустрочный интервал может играть в восприятии текста.

Когда строки наезжают одна на другую, пропадает всякое желание узнать содержание текста. Мы же хотим, чтобы наш текст прочитали — давайте учиться задавать правильные междустрочные интервалы.

Поговорим о, так называемых, правилах хорошего тона, которые следует соблюдать каждому веб-дизайнеру. Высота строк должна быть больше размера используемого шрифта. А именно составлять 1.1-1.2em или 110-120%. Так, например, если вы используете шрифт 14px, line-height должна быть около 16–17px.

Ваш CSS код может выглядеть примерно так.

body { font-size: 14px; line-height: 16px; }

А теперь давайте вернемся к фотографии, демонстрирующей междустрочный интервал.

У меня в первом случае оба font-size и line-height имеют одинаковые значения. Согласитесь, не смотрится. Во втором варианте задан font-size: 16px, и line-height: 19px. Вот это уже другое дело.

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

Личный опыт

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

Сравните с вариантом справа. Так уже лучше, хотя тоже есть над чем работать

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

Примеры

На мой взгляд, стартовая страница Google является воплощением грамотного использования свободного пространства. Белый фон страницы помогает мигом акцентировать внимание на самом главном: на поисковой строке и ярком логотипе Google.

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

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

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

Дизайнерами не рождаются — дизайнерами становятся. Только что для этого нужно делать? Практика, практика и ещё раз практика, а также изучение профессиональных примеров. Путешествуя по просторам интернет-сети, обращайте внимание на то, как сделаны сайты, какой интерфейс вам приятен, а какой — нет. Если вы научитесь отличать хороший дизайн от плохого, поверьте — это уже половина успеха. Когда у вас появится четкое представление того, что вы хотите воспроизвести в своей работе, результат не заставит себя долго ждать.

Что можно почитать

Также хочу приложить ссылки на полезные ресурсы, посвященные грамотному использованию пространства в дизайне: