Система отступов на сайте. Сколько нужно и где.
Верстка любого веб-сайта предусматривает знание самых разных правил, включая особенности формирования отступов между блоками. Это имеет важное значение, поскольку влияет на общее восприятие электронной странички, а значит и на способность посетителя быстро найти нужную информацию. Ошибки в формирования уступов нередко приходят к скученности информации, неудобству восприятия, а также негативному восприятию даже визуальной части сайта в целом.
Что представляет собой система отступов и ее особенности
Отступы можно увидеть практически везде, однако лучшим примером является письменная речь. Наряду с абзацами, а также основными знаками препинания, отступы разделяют речь, формируя отдельные смысловые блоки, что позволяет человеку лучше воспринимать и запоминать контент.
Психологии отмечают, что отступы важны потому, что мозг воспринимает информацию в зависимости от расстояния между объектами. Если расстояние между элементами небольшое, то объекты воспринимаются вместе, зависимо друг на друга, образуя тем самым единый образ. Если же они находятся на значительном расстоянии друг от друга, то мозг воспринимает их отдельно, независимо друг от друга.
Опытный веб-разработчик всегда учитывает эти моменты, которые касаются не только текстовой информации, но также визуальных элементов. Таким образом, фундаментальный принцип зрительного восприятия заключается в близости и удаленности объектов друг от друга, где главным параметром становится расстояния.
Современная система отступов в веб дизайне позволяет использовать их правильно, итогом чего становится создание web-страницы, которая максимально гармонично воспринимается аудиторией. Практика показывает, что любой текстовый контент обязан делиться на множество объектов, каждый из которых должен нести определенную смысловую нагрузку. Так проявляется цель и субординация, причем отступы у объектов должны отличаться друг от друга.
Особенности внешних и внутренних отступов
Все отступы делят на 2 большие категории, которые также обозначаются и в html верстке: margin (внешние) и padding (внутренние). Здесь действуют важное правило, которое формулируется следующим образом: «Внешний отступ всегда больше, нежели внутренний».
Это называется правилом внешнего и внутреннего. Характерным примером этого являются книжные поля, где можно увидеть успешную реализацию внешних отступов. При создании любой веб-страницы важно понимать, что модуль представляет собой цельный блок, состоящий как из самого текстового контента, так и из внешнего отступа, который располагается в определенном пространстве.
Визуально такой модуль выделяется тем, что текстовый блок несколько смещен относительно основного контента, что дает возможность пользователю акцентировать на нем свое внимание. Что касается внутренних отступов, то они представляют собой межстрочный интервал блока, с помощью которого можно также выделять отдельные блоки.
Примечательно, что текстовый модуль страницы обычно состоит из нескольких абзацев, поэтому отступ между абзацами становится внутренним (padding), а поля всего текстового модуля – внешним (margin).
Если намеренно нарушить правило отступов, можно увидеть потерю блоками своей цельности и связности. В таком случае малые поля сравнивают текст с границами конструкции, вследствие чего смысловая нагрузка будет теряться на фоне возникающего «конфликта».
Смысловые блоки их связи между собой
Любой текстовый контент должен иметь четкую и грамотную логическую структуру, что позволяет посетителю быстрей и удобней выхватывать информацию, понимая, о чем идет речь на веб-странице. Несколько блоков образуют нередко новый объект, а отступы значительно помогают в этом деле. Если слова образуются в строки, то строки формируются в абзацы или текстовые блоки, которые, в свою очередь, создают цельный страничный модуль.
Как известно, все состоит из связей, поэтому web-дизайн не является исключением. Здесь объекты, которые связываются с другими объектами, называются смысловыми блоками. В дизайне при разработке веб-страничек действует одно из главных правил: «Любой смысловой блок включает в себя только одну связь разных элементов».
Для лучшего понимания связей смысловых блоков между собой, воспользуемся визуальным примером ниже.
На картинке мы видим фотографию специалиста, имя и фамилия, должность, а также предложение о помощи. Как можно отметить, наиболее широким блоком является фотография, поскольку это первое, на что обращает внимание каждый посетитель сетевого