emo - современный интернет, веб-разработка и графический дизайн глазами профессионала

26
04/2006

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

перейти к комментариям (9)

Обычно, приступая к верстке макета и графической визуализации, мы уже имеем достаточно четкий план по представлению информационной архитектуры (ИА) будущего сайта, страницы или конкретных контентных блоков. С одной стороны – это во многом упрощает работу по дизайну, избавляя от придумывания общей концепции. С другой стороны абстрактная схематичность ИА-документа оставляет за графическим дизайнером большие возможности для построения гармоничной композиции.

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

Всякий дизайн начинается с чистого листа. Доступная нам, дизайнерам, рабочая область не бесконечна: она продиктована носителем, ограничениями устройств вывода, задачами и требованиями к макету. Также она продиктована здравым смыслом. Что же значит разумно использовать пространство?

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

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

Неудачный вариант.

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

Удачный вариант.

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

Поля и отступы правят содержанием

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

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

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

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

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

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

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

Резюме

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

Пресс-форма от компании ООО "Саунд Пласт"|Prilosec online