На главную

Библиотека Интернет Индустрии I2R.ru

Rambler's Top100

Малобюджетные сайты...

Продвижение веб-сайта...

Контент и авторское право...

Забобрить эту страницу! Забобрить! Блог Библиотека Сайтостроительства на toodoo
  Поиск:   
Рассылки для занятых...»
I2R » Сайтостроительство » Web-дизайн

Алтернатива шаблонам (схематичным страницам)

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

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

Он имел ввиду шаблоны, которые мы через некоторое время стали называть схематичными страницами. Мы спорили слишком часто, и это привело к разладу между мной и визуальными дизайнерами. Шаблон, как вы знаете, описывает содержание веб-страницы, показывая месторасположение функциональных элементов и контент-блоков. Обычно шаблоны делают в специальных программах, например, Visio, но иногда и в HTML или даже bitmap.

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

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

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

  1. Я мог попытаться смягчить главные риски, изучить, как формировать правильное ожидание клиента и работать с дизайнерами, чтобы добиться компромисса с их креативом.
  2. Я мог разработать новый способ документирования информационной архитектуры и избежать рисков полностью. Новый способ не должен определять расположение элементов на странице, но должен позволять обсуждать с клиентами и дизайнерами контент, функциональность и приоритеты — это нам необходимо на ранней стадии разработки.

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

Мы делали редизайн сайта USAirways.com в 1999 году. Вот тогда я и решился испытать новый подход к отображению информационной архитектуры сайта. После построения карты сайта, на которой отображались связи между страницами, я сделал первую «диаграмму описания страницы» — это и был пирог побольше.

Диаграммы описания страниц

диаграмма описания страницы сайта USAirways.comНа диаграмме описания страницы контент-блоки описываются простым текстом. Описания блоков расположены на странице в порядке убывания приоритета. Обычно я беру за шкалу приоритетов горизонтальную ось. Поэтому блоки расположенные слева на странице имеют больший приоритет, чем расположенные справа.

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

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

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

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

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

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

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

Перевод: Михаил Дубаков
Web-анатомия

Источник: Dan Brown (boxesandarrows)

Рассылки Subscribe.ru:

Библиотека сайтостроительства - новости, статьи, обзоры
Дискуссионный лист для web-разработчиков
Подписка на MailList.Ru
Автор: NunDesign
Другие разделы
Оптимизация сайтов
Web-студии
» Новое в разделе
Web-дизайн
Web-программирование
Интернет-реклама
Раскрутка сайта
Web-графика
Flash
Adobe Photoshop
Рассылка
Инструменты вебмастера
Контент для сайта
HTML/DHTML
Управление web-проектами
CSS
I2R-Журналы
I2R Business
I2R Web Creation
I2R Computer
рассылки библиотеки +
И2Р Программы
Всё о Windows
Программирование
Софт
Мир Linux
Галерея Попова
Каталог I2R
Партнеры
Amicus Studio
NunDesign
Горящие путевки, идеи путешествийMegaTIS.Ru

2000-2008 г.   
Все авторские права соблюдены.
Rambler's Top100