Главная Услуги Работы Персона Юзабилити анализы
IMG тел. +7(901) 370-1796
Графическая сетка




ПОИСК по сайту


    Полный список статей
/ Графическая сетка / Версия для печати / translit / абракадабра :-)


<-предыдущая следующая ->

 
  google.com bobrdobr.ru del.icio.us technorati.com linkstore.ru news2.ru rumarkz.ru memori.ru moemesto.ru smi2.ru twitter.com Яндекс закладки text20.ru RuSpace RuSpace toodoo

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

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.

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

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

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

Порядок на странице - это основа для создания четкой визуальной иерархии, которая позволяет управлять вниманием пользователя и “вести” его по странице и сайту. Такое ненавязчивое содействие не только ускоряет работу пользователя, но и делает ее более комофортной и приятной. с guicci.ru/2007/09/09/graficheskaya-setka/


Создание эксклюзивных сайтов, юзибилити анализ и бесплатный анализ под запросы основных поисковых машин
Контактная информация :
тел. +7(901) 370-1796

Написать письмо на e-mail
icq 415547094  romverрейтинг на mail.ru сайта romverinbox.ru
© 1997 - 2017 romver.ru

Полная карта сайта Display Pagerank  
CMS version 3.6.3 | PTG 0,032 s.