Графическая сетка

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

grid.jpg

Веб-страница, которая имеет четкую визуальную иерархию (пример иерархии: заголовок страницы -> блок с главной новостью -> блок с другими новостями и т.д.), ускоряет работу пользователя, делает ее более комфортной, приятной и спокойной (порядок – синоним спокойствия – “все в порядке” :).

Сетка – это кости визуальной иерархии, а цвета, размер, контраст (см. статью Pro контраст), форма элементов и пр. – это ее плоть.

Далее я рассказываю о различных функциях сетки и делюсь с вами очень познавательной презентацией, которую я раскопал в Сети пару дней назад.

Сетка для гармонии
Я уже рассказывал про презентацию Влада Головача Из грязи в князи: Три правила дизайна элегантных интерфейсов, в которой он показывает как выполнение всего-лишь трех простых правил может сделать из г… интерфейса элегантную и аккуратную конфетку. Вот эти три правила:

  1. Все размеры и все пропорции должны быть взаимосвязаны (благодаря сетке – см. презентацию ниже).
  2. Заголовок экрана/страницы должен быть: а) визуально значимым и разборчивым; б) кратким и информативным.
  3. Фон должен быть или белым или черным.

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

Сетка для порядка
На днях я нашел очень интересную презентацию Khoi Vinh (Subtraction.com) & Mark Boulton (MarkBoulton.co.uk), которую они представляли на конференции SXSW Interactive’2007.

В презентации в популярной форме рассказывается об истории сетки, о ее целях и т.д. Но самая интересная фишка презентации – это пример работы с сеткой. Авторы взяли в качестве примера сайт (кстати, Yahoo.com) и разработали для него новую сетку. В процессе работы авторы изменили компоновку многих элементов главной страницы Yahoo.com. В результате получилась значительно более элегантная и стильная главная страница.

Также вы можете послушать аудио-подкаст доклада.

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

Khoi Vinh & Mark Boulton рассмотрели в своем докладе основную функцию сетки:

The grid is the most vivid manifestation of the will to order in graphic design.

Сетка – наиболее наглядное проявление порядка в графическом дизайне.

Сетка нужна в первую очередь для того, чтобы создать порядок на странице и сформировать основу для построения визуальной иерархии, которая позволит пользователю “считывать” дизайн так же ясно и быстро, как мы почти инстинктивно считываем буквы в словах – слева-направо.

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

Порядок на странице – это основа для создания четкой визуальной иерархии, которая позволяет управлять вниманием пользователя и “вести” его по странице и сайту. Такое ненавязчивое содействие не только ускоряет работу пользователя, но и делает ее более комофортной и приятной.

См. также:

  1. Pro контраст
  2. GUI, изящным можешь ты не б., но аккуратным б. обязан
  3. Подпороговое внимание
  • bobrdobr
  • memori
  • del.icio.us
  • Digg
 Понравилась заметка? Подписывайся на обновления блога!

О статье




Самые популярные статьи
[?]




Реклама



Стоит также почитать



Контактная информация



Заказ