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

Emo | Простые правила дизайна: как правильно использовать пространство

26
04/2006

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

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

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

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

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

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

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

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

Неудачный вариант макетирования

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

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

Удачный вариант макетирования

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

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

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

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

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

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

Пример текста и границ

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

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

Отступы создают контраст

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

Резюме

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

Написано 26/04/2006, 00:11. Автор: Юрий Поспелов.
Тэги: ,



бесплатные шаблоны сайтов по туризму | Прайс услуг раскрутки сайта в Санкт-Петербурге для небольших учреждений | оцифровка звука | размещение на видеоэкранах, наружная реклама агентство, реклама на щитах | разработка сайтов под ключ в интернет | Реализация систем жидкостного охлаждения компьютеров от главных мировых поставщиков в России | себе свойства камня газобетон купить также влагостойкости (так, | legrand купить, кабельные лотки, кабель кг, пнсв провод

Живой поиск

другие записи по тематике


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


  1. от Vladson (http://dkflbk.nm.ru/)

    Не плохо, хотя помоему это прописные истины (я не художник, однако всегда знал всё что тут описано)

  2. от Yuri "Emo" Pospelov (http://emo.com.ua)

    То что одному прописные истины, другому тайна веков :)

  3. от Катя ()

    Понравилось. Доступно и просто. Спасибо автору.

  4. от monITornge ()

    «прописные истины»
    для меня ново...
    Спасибо!

  5. от Марина ()

    Юрий, очень понравились Ваши статьи. Хотелось бы с Вами посотрудничать в области графического дизайна. Если Вам это интересно, напишите мне на мой электронный адрес.

  6. от Astap (http://astap-design.narod.ru/)

    Да, очень просто и доступно, однако, в примерах делать ошибки – недопустимо. “ПроНстранство”. Если желаете – выступлю в роли редактора-корректора.

  7. от Yuri "Emo" Pospelov (http://emo.com.ua)

    Это вы что-то напутали, пространство можно писать без указанной вами “Н”. По-крайней мере словари об этом говорят ;)

  8. от Stasie ()

    >>>Это вы что-то напутали, пространство можно писать без указанной вами “Н”. По-крайней мере словари об этом говорят ;)

    А как у вас в примерах написано? :-))) Вам очень верно указали ошибку...

  9. от Влад (http://www.ut-ttora.com)

    Листал страницы и даже задержался. Увлекаюсь дизайном и первый пункт стал очень поучительным примером, хотя можно сделать еще доступнее.

  10. от artem_dc (http://www.cyprus-invest.ru/)

    Спасибо, приму к сведению.

  11. от Алина (http://7text.ru/)

    все вполне даже логично.

Комментарии к этой записи запрещены.