Автор: Andy Rutledge. Опубликовано: 01.09.2010 Источник: alistapart.com
Translated with the permission of A List Apart Magazine and the author[s].
Translated with the permission of A List Apart Magazine and the author[s].
Работа дизайнера заключается в передаче смысла. Поэтому важно понимать механизмы, с помощью которых предметы и идеи обретают смысл. Владение дизайнером этими основами определяет его способность эффективно передавать сообщение. Без основ дизайнер непременно потерпит неудачу, столкнувшись со сложной задачей или строгими ограничениями.
В наше время, как и всегда, вопросы стиля и распространенных традиций владеют вниманием многих и могут отвлечь нас от основ нашего ремесла. Это в большей степени относится к тем из нас, кто пришел в веб-дизайн без дизайнерского образования, поэтому мы рассмотрим аспекты важнейшего средства передачи смысла.
Прежде чем перейти к деталям, давайте вкратце рассмотрим все важнейшие основы. Эти основы творческой коммуникации одинаковы в различных видах искусства: живописи, музыке, танце, актерском мастерстве, поэзии, дизайне и прочих творческих проявлениях. Их можно разделить на две категории: словарь и грамматика.
Основы
Художественный словарь: словарь изобразительного искусства в основном состоит из основ линии, формы, цвета и текстуры. Эти элементы формируют содержание нашей коммуникации. Различные формы этих элементов имеют разные значения. Одни из них универсальны, другие зависят от культуры. Например, угловые линии и формы традиционно воспринимаются как символы силы, скорости, мужественности, тогда как скругленные линии и формы ассоциируются с нежностью, медленным темпом и женственностью.
Художественная грамматика: коммуникативная грамматика определяется контрастом, балансом, гармонией и распределением элементов. Каждый из элементов является частью композиции и помогает передать контекст, манипулируя соотношениями между элементами содержания.
Вопреки важности этих основ, язык искусства и дизайна не отличается от любого другого языка в том, что словарные и грамматические правила не определяют его в полной мере. Более того, большая часть правил в языке имеет исключения, а некоторые творческие подходы к коммуникации ссылаются на правила очень мало или вообще их игнорируют. Каждый язык приобретает определенные оттенки, стиль и характер в зависимости от того, как носитель языка его использует, а для каждого грамматического правила существует исключение.
И все же ни один язык не может существовать без структуры. Основы коммуникации всегда уместны и необходимы в качестве точек отсчета. Без основ, коммуникация вербальная, письменная, графическая, музыкальная или физическая невозможна. В действительности, творческие виды коммуникации, рассмотренные ранее, имеют значение только в том случае, если они контрастны по общепринятым меркам. Эти общепринятые мерки приобретают свое значение точно так же, как и все остальное – посредством контраста.
Контраст
Дизайн – это в большой степени процесс создания контрастов или структур, подразумевающих контрасты, используемых для определения иерархии, управления определенными общепринятыми взаимосвязями, использования контекста для усиления или переопределения этих взаимосвязей… все для передачи смысла. Контраст важен, поскольку суть любого предмета определяется его ценностью, качественными или количественными соотношениями с другими предметами. Таким образом, ничто не имеет значения само по себе, и это одна из причин важности дизайна.
Контраст важен, потому что суть любого предмета определяется его ценностью, свойствами или качеством в сравнении с другими предметами. Ничто не имеет значения само по себе.
Функцию контраста в определении значения можно объяснить, сравнивая основные противоположности: темное/светлое, мягкое/жесткое, быстрое/медленное. Такие примеры полезны, потому что каждый понимает подразумеваемые этими характеристиками крайности, но при существовании крайностей, ничего абсолютного не существует. Все степени относительны.
Например, гепард считается быстрым животным. Однако гепард достаточно медленный в сравнении с реактивным самолетом. Значит, выражение “гепард быстр” имеет значение только при условии существования или предположения о существовании соответствующего контекста. Так же утверждение “элемент А важен в композиции страницы” имеет значение только если были установлены взаимосвязи с другими элементами. Другими словами каждый элемент на странице, дизайн которой вы разрабатываете, следует расположить, оформить, выбрать для него подходящий размер или выделить каким-либо другим способом в соответствии с его специфической важностью и месту в общей коммуникативной задаче. Если вы пренебрежете хоть одним компонентом, это может полностью разрушить достигнутый эффект.
Кроме определения значения и взаимосвязей контраст тесно связан с человеческим восприятием и инстинктами выживания, как мы выясним позже, и это делает контраст мощным основным инструментом для дизайнеров. Словом, контраст – это основа практически всего, чего вы добиваетесь в дизайне.
Существует несколько первичных форм контраста, обычно используемых дизайнерами, включающих следующие: (хотя вообще их гораздо больше)
Первичные формы контраста включают в себя размер, положение, цвет, форму и ориентацию.
В композиции контраст помогает вести взгляд читателя по материалу. Каждый компонент страницы – графический, текстовый или интерактивный – имеет свою задачу, и каждая из этих задач имеет свое место в иерархии, специфической для проекта. Кроме того, каждый компонент является фрагментом общего сообщения и задачи проекта. Благодаря творческому применению контраста можно влиять на выбор пользователя и склонять его к определенным действиям.
Элементы страницы, конечно, нельзя разрабатывать или организовывать бессистемно. Содержание следует располагать на странице продуманно, и композиция должна быть определена информационной иерархией, управляемой контрастом.
- Например, предположим, что вы разрабатываете простую веб-страницу, основные цели которой:
- 1) кратко описать, чем занимается предприятие
- 2) убедить посетителей зарегистрироваться и начать пользоваться услугами компании. Отложив в сторону заботу о визуальном аспекте дизайна, посмотрим на оригинальный текст, предоставленный для каждой из этих информационных составляющих.
Текст информационного блока о продукте
Поисковый оптимизатор анализирует веб-сайт, а затем выдает подробный отчет о позициях сайта в поисковой выдаче по найденным ключевым словам в основных поисковых системах и список рекомендаций по оптимизации каждой страницы сайта. Оптимизация с помощью этой программы не требует никаких специальных знаний. Весь процесс полностью автоматизирован. Чрезвычайно удобно!
Текст модуля регистрации
Возможности регистрации Поискового оптимизатора включают в себя индивидуальный, профессиональный и корпоративный уровни. Вы можете зарегистрироваться здесь. Вы также можете перейти по одной из ссылок, чтобы получить более подробную информацию о разных типах регистрации.
Сразу понятно, что между этими двумя блоками текста практически нет стилистического контраста. Однако для того, чтобы эта страница была эффективной, между ними должна быть большая разница! Один блок текста информационный, а другой – призыв к действию. Попробуем придать побуждающий эффект этому блоку, сделав его отличным от информационного.
Текст информационного блока о продукте
Поисковый оптимизатор анализирует веб-сайт, а затем выдает подробный отчет о позициях сайта в поисковой выдаче по найденным ключевым словам в основных поисковых системах, а также список рекомендаций по оптимизации каждой страницы сайта.
Оптимизация с помощью этой программы не требует никаких специальных знаний! Весь процесс полностью автоматизирован. Чрезвычайно удобно!
Получи подробный план поисковой оптимизации, один раз щелкнув мышью! Это раскрутка сайта, не требующая знаний!
Текст модуля регистрации
Корпоративный уровень
Для пользователей с сайтами, работающими на системах управления содержанием.
Подробнее >>
Для пользователей с сайтами, работающими на системах управления содержанием.
Подробнее >>
Теперь добавим графический контраст, чтобы еще сильнее выделить иерархию информации и элементов страницы.
Здесь (на картинке сверху), применена позиционная структура, но не более того.
В этом примере сильного контраста нет. Лого контрастирует с содержанием благодаря своему цвету и размеру, а перелив ведет взгляд вниз. Ссылки справа контрастируют с обычным текстом благодаря цвету и подчеркиванию. Однако помимо этого ничто не выделяет наиболее важную информацию. Давайте это исправим.
Теперь (картинка сверху), информационное содержание и призыв к действию более четко определены и контрастируют друг с другом.
Теперь у нас есть четкая иерархия степени важности элементов, и блок для призыва к действию выглядит интереснее. Важная информация выделена с помощью контраста по размеру, цвету и подчеркиванию, и элементы призыва к действию одного цвета, что подразумевает их взаимосвязь и общее назначение. После того, как мы усилили контраст между элементами, посетителям не придется читать все, чтобы понять, какой материал наиболее важен. Быстро просмотрев страницу, они поймут, какая информация важнее и как начать пользоваться услугой, когда они убеждены в ее необходимости.
Как мы увидим далее, эта способность передачи важнейшей информации при быстром просмотре особенно важна, когда мы пытаемся использовать естественные особенности человеческого поведения.
Отслеживание и управление человеческим поведением
Не секрет, что дизайнеры должны оценивать вещи, которые большинство людей воспринимают как что-то само собой разумеющееся или не осознают. В действительности подсознание – это то, чем нам нужно манипулировать посредством дизайна в первую очередь. Чтобы использовать естественные человеческие побуждения, нам сначала нужно их понять.
Дизайнеры должны знать, что мы, люди, постоянно осматриваем округу. Мы можем сосредоточиться только на одной небольшой зоне или предмете, но, когда мы изменяем поле зрения, то сначала оцениваем новый вид, производя быстрый осмотр. Делая это, мы подсознательно ищем элементы контраста – предметы, выделяющиеся в лесу из однообразных элементов. Это часть процесса обнаружения угрозы.
Этот инстинкт не ограничивается обнаружением хищника в зеленом лиственном лесу. Посетители сайта быстро осматривают страницу и решают, как и где начнут знакомиться с содержанием. Если вы использовали контраст для создания визуальной информационной иерархии, вы можете заставить зрителей смотреть, куда вы хотите. Если вы хорошо справились с работой, продумали контраст, призывы к действию и т.д., вы даже можете заставить их следовать по определенному пути по странице.
Другие естественные поведенческие особенности человека можно использовать, чтобы сделать дизайн еще более эффективным. Например, представители западной культуры обычно начинают ознакомление с содержанием страницы с верхнего левого угла. Если вы разместите очень заметную по контрасту информацию в этой зоне, можете быть уверены, что ее заметят и просмотрят первой, по крайней мере, западные пользователи. Это не означает, что другие части страницы не могут быть использованы для эффективного размещения важной информации. Контраст может быть достаточно сильным, чтобы преодолеть определенные естественные закономерности. Однако контраст в сочетании с композицией, использующей естественное поведение человека, всегда будет эффективнее, как мы видим в этом примере:
Самый большой и контрастный текстовый элемент в левой верхней части композиции совершенно очевидно является важнейшим элементом на странице.
В следующем примере эффект все еще сильный… но не на столько как в предыдущем примере:
При размещении самого большого текстового элемента под другими, меньшими текстовыми элементами уже не так очевидно, какой из элементов является важнейшим.
Следует заметить, что люди непредсказуемы и каждого отличают его собственные цели и капризы, которые формируют процесс восприятия вашего дизайна. Таким образом, вопреки всем усилиям степень успеха в управлении вниманием пользователей будет неизбежно варьироваться. Конечно нашей главной задачей все же остается оказание существенного влияния на этот опыт. Поэтому лучше знать, какие механизмы срабатывают и почему.
Газеты являются прекрасным примером эффективной организации информационной иерархии и определяют порядок ознакомления читателей с содержанием.
Эта типичная разметка газетной страницы является примером четкой иерархии информации, использующей контраст.
В этом примере газетной страницы контраст размеров текста, изображений, цвета и расположения на странице создает предсказуемый порядок восприятия информации. Самое большое изображение сгруппировано с самым крупных блоком текста, что определяет их как объект, который увидят первым (1). Контраст цвета и присутствие изображений достаточно интересны, чтобы определить этот блок как второй блок, на который обратят внимание читатели (2). Также заметим, что в этом блоке повторяется толстая горизонтальная линия над заголовком, помогающая завладеть вниманием читателя. Благодаря своему размеру заголовок справа, возможно, получит внимание читателя следующим (3). Понимание, как работают механизмы в этом примере, может помочь вам подготовиться к разработке других моделей взаимодействия с читателями.
Конечно, этот тип контраста может определить только приблизительный порядок, в котором читатели увидят материал. Получится ли заставить их прочесть текст, зависит от других факторов, таких как степень привлекательности заголовка, увлекательности повествования – и в этой области есть возможности для применения продуманного контраста.
Заключение
Представленные здесь информация и примеры лишь поверхностно затрагивают предмет. Контраст повсюду и является частью всего, что мы видим, делаем, ощущаем и понимаем. Ищите его в собственной работе и за ее пределами. Заведите себе привычку находить контраст во всем, что видите и определять информационную иерархию вещей из повседневной жизни. Другими словами, смотрите глубже. Такого рода привычка может оправдаться результатами ваших дизайнерских работ. Контраст – это всего лишь одна из составляющих основ дизайна. Как следует изучите их прежде чем двигаться к более сложным вещам. Ваша работа от этого только выиграет.
Комментариев нет:
Отправить комментарий