Свободное пространство и модульная сетка

Поговорим о том, как лучше располагать элементы дизайна на странице.

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

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

Основная стратегия композиции вашего дизайна должна начаться с разметки. Если вы не хотите, чтобы ваша работа выглядела хаотично, то вам нужно систематизировать всю визуальную информацию. Здесь нам на помощь приходит модульная сетка или, говоря иначе, разметка для расположения элементов на странице. В веб-дизайне роль модульной сетки выполняет таблица <table>.

Вот несколько примеров модульных сеток.
Обратите внимание, насколько разнообразными и уникальными они могут быть.

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

Пример 1

Пример 2

Пример 3

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

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

Отличие второго варианта лишь в том, что линии расположены наклонно. Все элементы композиции привязаны к этим наклонным линиям.

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

Мой вам совет : всегда используйте модульную сетку для построения красивой и грамотной композиции (ну, конечно, если вы не занимаетесь искусством в чистом виде, где, как известно, нет никаких правил)!

Предвкушаю ваш вопрос: Неужели ты, Боб, каждый раз выстраиваешь модульную сетку, прежде чем приступить к работе. И не лень тебе?

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

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

Итак, какие преимущества дает нам модульная сетка?

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

2. Модульная сетка помогает соблюдать равномерные интервалы между элементами.

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

Теперь пример из практики.

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

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

Попробуйте объяснить заказчику, что страницы, плотно заполненные содержанием, малопривлекательны и трудны для восприятия, и вряд ли аудитория захочет тратить время на их чтение.

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

В завершение дам вам совет.

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

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

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

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