Блог веб-разработчика и дизайнера Юрия Поспелова.
26
04/2006
Дизайн – это не только талант, чутье и развитое чувство прекрасного. Хороший дизайн всегда подчинен набору простых правил. Следуя этим правилам всегда возможно улучшить результат, даже если ваши навыки дизайна далеки от совершенства. Я хочу рассказать вам о некоторых из них.
Обычно, приступая к верстке макета и графической визуализации, мы уже имеем достаточно четкий план по представлению информационной архитектуры (ИА) будущего сайта, страницы или конкретных контентных блоков. С одной стороны – это во многом упрощает работу по дизайну, избавляя от придумывания общей концепции. С другой стороны абстрактная схематичность ИА-документа оставляет за графическим дизайнером большие возможности для построения гармоничной композиции.
Всякий дизайн начинается с чистого листа. Доступная нам, дизайнерам, рабочая область не бесконечна: она продиктована носителем, ограничениями устройств вывода, задачами и требованиями к макету. Также она продиктована здравым смыслом. Что же значит разумно использовать пространство?
Рекомендация первая: избегайте дыр в композиции, которые ловят пространство в западню, делают его использование неэффективным или нарушают естественное визуальное восприятие.
Для нашего примера мы возьмем один графический клипарт и два текстовых блока, а потом попробуем скомбинировать их эффективно.
Неудачный вариант.

На этом эскизе в макете можно обнаружить нежелательную дыру между первым и вторым текстовыми блоками. Она прерывает движение взгляда. Также, в этом эскизе комбинирование элементов создает 3 фокусных точки, что отяжеляет зрительное восприятие, заставляя взгляд прыгать между ними.
Удачный вариант.

Для того чтобы улучшить эскиз, мы перенесли клипарт вправо и расположили текстовые блоки один за другим с левой стороны. Во-первых, мы избавились от дыры между блоками – теперь они выглядят более гармонично; во-вторых, отцентрированные текстовые блоки с одинаковым отступом сверху и снизу позволили лучше заполнить пространство; в-третьих – мы устранили ненужные фокусные точки. Также мы избавились от белого поля после текста, из-за которого он будто провисал. Теперь взгляд движется ровно, сообщение воспринимается цельно.
Отступы – такое же сильное средство композиции, как, например, размер или цвет. Если до этого вы несерьезно относились к полям и отступам, самое время изменить точку зрениям и уделить им немного больше вашего внимания.
Поля и отступы должны быть соразмерны их содержимому. Пропорция – это классическое средство композиции, определяющая организованность формы. Это значит, что все отступы на страничном макете тоже должны быть пропорциональными между собой и зависеть друг от друга таким образом, чтобы с увеличением одной величины соответственно во столько же раз увеличивалась другая.
Комбинируя элементы композиции, регулируйте поля, для того чтобы избежать ощущения зажатости или, наоборот, излишней пустоты и транжирства области. В большинстве случаев, поля не должны быть слишком маленькими. Вы должны научиться выдерживать необходимый отступ, чтобы контент дышал и не вызывал дискомфорт скученностью и нагромождением элементов.
На иллюстрации, текст в левой колонке выглядит слишком густым, небольшие отступы создают ощущение, что он неумещается в свою рабочую область. В правой колонке мы подрегулировали поля и отступы, и блок заметно выиграл от этого.

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

На примере вы видите два объекта, в большей степени привлекающих внимание зрителя – сообщение между текстовыми блоками и картинка справа. Хоть и отцентрированный текст меньшего размера и менее контрастен по цвету, поля вокруг него вырывают его из общего течения формы и усиливают акцент. Картинка справа привлекает к себя взгляд не только потому что это единственный цветной объект, но и благодаря обширному белому морю, в котором она дрейфует.
Объектно-пространственная композиция должно быть гармоничной и объединенной четкой пропорциональной схемой, иначе тяжело добиться целостности формы. Экспериментируйте с пространством, используя его сильные и слабые стороны.
Живой поиск
другие записи по тематике
от Vladson (http://dkflbk.nm.ru/)
Не плохо, хотя помоему это прописные истины (я не художник, однако всегда знал всё что тут описано)
от Yuri "Emo" Pospelov (http://emo.com.ua)
То что одному прописные истины, другому тайна веков :)
от Катя ()
Понравилось. Доступно и просто. Спасибо автору.
от monITornge ()
«прописные истины»
для меня ново...
Спасибо!
от Марина ()
Юрий, очень понравились Ваши статьи. Хотелось бы с Вами посотрудничать в области графического дизайна. Если Вам это интересно, напишите мне на мой электронный адрес.
от Astap (http://astap-design.narod.ru/)
Да, очень просто и доступно, однако, в примерах делать ошибки – недопустимо. “ПроНстранство”. Если желаете – выступлю в роли редактора-корректора.
от Yuri "Emo" Pospelov (http://emo.com.ua)
Это вы что-то напутали, пространство можно писать без указанной вами “Н”. По-крайней мере словари об этом говорят ;)
от Stasie ()
>>>Это вы что-то напутали, пространство можно писать без указанной вами “Н”. По-крайней мере словари об этом говорят ;)
А как у вас в примерах написано? :-))) Вам очень верно указали ошибку...
от Влад (http://www.ut-ttora.com)
ЛиÑтал Ñтраницы и даже задержалÑÑ. УвлекаюÑÑŒ дизайном и первый пункт Ñтал очень поучительным примером, Ñ…Ð¾Ñ‚Ñ Ð¼Ð¾Ð¶Ð½Ð¾ Ñделать еще доÑтупнее.
от artem_dc (http://www.cyprus-invest.ru/)
Спасибо, приму к сведению.
от Алина (http://7text.ru/)
все вполне даже логично.
Комментарии к этой записи запрещены.