Сетка и визуальная иерархия “Сетка - это разметка
колонок, полей, областей текста и иллюстраций. Сетка - это инструмент, который
вносит в дизайнерской решение порядок и жесткую структуру.” Дэвид Дэбнер Школа
графического дизайна.
Веб-страница, которая имеет четкую визуальную иерархию (пример иерархии:
заголовок страницы -> блок с главной новостью -> блок с другими новостями
и т.д.), ускоряет работу пользователя, делает ее более комфортной, приятной и
спокойной (порядок - синоним спокойствия - “все в порядке” :).
Сетка - это кости визуальной иерархии, а цвета, размер, контраст (см. статью
Pro контраст), форма
элементов и пр. - это ее плоть.
Далее я рассказываю о различных функциях сетки и делюсь с вами очень
познавательной презентацией, которую я раскопал в Сети пару дней назад.
Сетка для гармонии Я уже
рассказывал про презентацию Влада Головача Из грязи в князи: Три
правила дизайна элегантных интерфейсов, в которой он показывает как
выполнение всего-лишь трех простых правил может сделать из г… интерфейса
элегантную и аккуратную конфетку. Вот эти три правила:
Все размеры и все пропорции должны быть взаимосвязаны (благодаря сетке - см.
презентацию ниже).
Заголовок экрана/страницы должен быть: а) визуально значимым и разборчивым;
б) кратким и информативным.
Фон должен быть или белым или черным.
В презентации Влад Головач применяет эти три правила к десктопному приложению
и буквально на наших глазах интерфейс программы меняется в лучшую сторону,
становясь более гармоничным и целостным.
Сетка для порядка На днях я нашел очень интересную
презентацию 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.
Сетка - наиболее наглядное проявление порядка в графическом
дизайне.
Сетка нужна в первую очередь для того, чтобы создать порядок на странице и
сформировать основу для построения визуальной иерархии, которая позволит
пользователю “считывать” дизайн так же ясно и быстро, как мы почти инстинктивно
считываем буквы в словах - слева-направо.
Выводы Даже если вы - не графический дизайнер, а
проектировщик интерфейсов и в ваши обязанности входит разработка прототипов,
сетка поможет вам в создании не только более гармоничных, но и более
упорядоченных прототипов.
Порядок на странице - это основа для создания четкой визуальной иерархии,
которая позволяет управлять вниманием пользователя и “вести” его по странице и
сайту. Такое ненавязчивое содействие не только ускоряет работу пользователя, но
и делает ее более комофортной и приятной. с guicci.ru/2007/09/09/graficheskaya-setka/
