Графическая сетка
Сетка и визуальная иерархия
“Сетка – это разметка колонок, полей, областей текста и иллюстраций. Сетка – это инструмент, который вносит в дизайнерской решение порядок и жесткую структуру.” Дэвид Дэбнер Школа графического дизайна.
Веб-страница, которая имеет четкую визуальную иерархию (пример иерархии: заголовок страницы -> блок с главной новостью -> блок с другими новостями и т.д.), ускоряет работу пользователя, делает ее более комфортной, приятной и спокойной (порядок – синоним спокойствия – “все в порядке” :).
Сетка – это кости визуальной иерархии, а цвета, размер, контраст (см. статью 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.
Сетка – наиболее наглядное проявление порядка в графическом дизайне.
Сетка нужна в первую очередь для того, чтобы создать порядок на странице и сформировать основу для построения визуальной иерархии, которая позволит пользователю “считывать” дизайн так же ясно и быстро, как мы почти инстинктивно считываем буквы в словах – слева-направо.
Выводы
Даже если вы – не графический дизайнер, а проектировщик интерфейсов и в ваши обязанности входит разработка прототипов, сетка поможет вам в создании не только более гармоничных, но и более упорядоченных прототипов.
Порядок на странице – это основа для создания четкой визуальной иерархии, которая позволяет управлять вниманием пользователя и “вести” его по странице и сайту. Такое ненавязчивое содействие не только ускоряет работу пользователя, но и делает ее более комофортной и приятной.
См. также:

О статье
- Автор статьи:
- Александр Сергеев.
- Статья была опубликована
- 9.9.2007
- в рубрике:
- Дизайн.
- Cтатью открыли 8,355 раз.
- Юзабилити - актуально. Поэтому
- Блог Guicci регулярно читают:
- [?]
- Axure. Урок 1: создаем глобальное меню сайта на закладках
- HTMLayout: Web 2.0 пришел на десктоп!
- Ищем php-программиста в Минске
- Google Analytics. Часть 6: Откровение для шареварщика
- Убеждающий дизайн или как из посетителя сделать покупателя
- Юзабилити как гормон роста социальной сети
- Как понять пользователя. Часть 1.1 Почему он молчит?
- GUI.RU - Хроники Юзабилити
- Juras Vetrau. Блог о веб-разработках
- О юзабилити веб интерфейсов
- Блог студии Turbomilk - графика для UI
- Микромаркетинг
- Записки шареварного маркетолога
- Блог о web-разработке и юзабилити
- Сообщество специалистов по юзабилити и user experience Беларуси
- ICQ: 368-980-583
- E-mail:
- Форма обратной связи


Самые популярные статьи
Реклама
Стоит также почитать
Контактная информация
Заказ
-
17.9.2007
Очень интересная статья
Добавьте ваш комментарий
XHTML: Вы можете использовать следующие тэги: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>
О Проекте
Проектирование интерфейсов и юзабилити-тестирование в рамках компании HumanoIT Group очень увлекательное занятие, но иногда “забываешься” и уходишь с головой в работу… А тем временем в лабораториях известных университетов и компаний инженерные психологи, проектировщики взаимодействия, дизайнеры придумывают новые интерфейсы и формы взаимодействия человека и компьютера.
Читайте в этом блоге о новых тенденциях в красоте, удобстве и функциональности пользовательских интерфейсов.
С Уважением,
Александр Сергеев
Последние статьи
- 15.6 Sharepoint – a freakin’ glorified file server
- 10.6 Лучшие интранет-решения 2009 года (по версии Якоба Нильсена и co)
- 7.6 10 гуру нового мира по версии журнала Fortune
- 18.5 Количественная оценка качества e-commerce сайтов
- 4.3 Web 2.0 для е-commerce
- 3.3 Юзабилити как гормон роста социальной сети
- 2.3 Итоги конференции “Usability и дизайн интерфейсов” в Минске
- 22.9 Работа в HumanoIT Group. Вакансия дизайнера интерфейсов в Минске
- 11.7 Ищем php-программиста в Минске
- 6.4 Axure. Урок 1: создаем глобальное меню сайта на закладках
Рубрики
- Дизайн (9)
- Инновации (18)
- Инструменты (16)
- Интранет-решения (2)
- Новости (4)
- Психология (13)
- Разное (9)
- Юмор (6)
Комментариев: 1
Добавить комментарий | комментарии по RSS | trackback URL