Контраст и его значение
27.04.07 дизайн, alistapart
Если вы дизайнер, ваша работа—это сказать и передать смысл. Потому важно, чтобы вы понимали механизм, при помощи которого вещи и идеи приобретают значение; более, чем любые другие факторы, понимание вами этих правил определяет вашу способность общаться эффективно. Без знания основ вы будете барахтаться в сложных задачах дизайна.
Сегодня, как и всегда, вопросы стиля и условности занимают умы большинства из нас и могут отвлекать от главной сути нашего ремесла. Особенно это актуально для людей без художественного образования и тех, кто пришел в веб дизайн НЕ из формального дизайна, потому я и хочу воспользоваться этой возможностью и проверить свою идею, что является основным инструментом для передачи значения.
Перед тем, как мы перейдем к специфике, давайте подробно рассмотрим весь набор этих фундаментальных основ. Основы креативной коммуникации проходят последовательно через все художественные формы: картина, танец, выступление, поэзия, дизайн и др. Я разделяю их на две категории, лексика и грамматика.
Фундаментальные основы
Художественная лексика: Лексика искусства хорошо просматривается в фундаментальных основах линии, формы, цвета и текстуры. Эти элементы создают наш коммуникационный контент. Различные формы этих элементов имеют в широком понимании скрытый смысл, порой универсальный, порой культурный. Например, заостренные линии и формы обычно являются признаком силы, скорости, мужественности, в то время как закругленные края и формы ассоциируются с мягкостью, медленным темпом и женственностью.
Художественная грамматика: Коммуникативная грамматика обычно определяется контрастом, балансом, гармонией и распределением. Она являются компоновочными блоками композиции, и помогает передать контекст и манипулировать отношениями между содержащимися в ней элементами.
Вопреки значимости этих фундаментальных основ, язык искусства и дизайна не отличается от любого другого языка, если правила лексики и грамматики полностью не определены в нем. Более того, большинство правил в языке имеют исключения, а некоторые креативные стили коммуникации либо вообще не имеют правил, либо очень слабо им подчиняются. Каждый язык—это приспособленные нюансы, стили и шрифт, которыми каждый пользуется по своему усмотрению и которые является исключениями для каждого грамматического правила.
Без структуры язык не может успешно существовать. Основы коммуникации всегда относительны и необходимы в качестве ориентиров. Без сущностей, устная, письменная, графическая, музыкальная или физическая коммуникация будет невозможна. Фактически, эти креативные стили коммуникации, упомянутые ранее, имеют значение только в том случае, если они контрастируют с очевидными и хорошо понятными ориентирами. Эти хорошо понятные ориентиры приобретают поддающийся интерпретации смысл посредством контраста, как и все остальное.
Контраст
Дизайн в широком смысле—это процесс создания контраста, который используется для определения иерархии, манипулирования определенными отношениями и раскрытия контента для расширения или переопределения этих отношений... и все это для успешной передачи смысла. Контраст важен потому, что значимая сущность любой вещи определяется ее ценностью, свойством или качеством в сравнении с чем-либо другим. И это правильно: ничего не имеет такого значения как то, что оценивается, что и определяет ценность и значимость дизайна как такового.
Если дать определение функции контраста, то она может быть выражена как сравнение фундаментальных противоположностей: черный — белый, жесткий — мягкий, быстрый — медленный. Подобный пример полезен, поскольку дает понимание подразумеваемых противоположностей, но пока они являются противоположностями, они не абсолютны. Эти значения являются лишь относительными.
Например, гепард как правило ассоциируется со скоростью (быстротой). Но гепарда сложно сравнить с реактивным самолетом. Следовательно, ассоциация «гепард—быстрый» имеет место в соответствующей предполагаемой контекстной связи. Также, утверждая, что «элемент Х имеет важное значение в макете страницы» имеет смысл по отношению к другим существующим элементам. Другими словами, каждый элемент дизайна вашей страницы должен иметь четкое расположение, стиль, размер, и должен быть безупречным, соответствуя своему значению и месту в общей коммуникативной цели. Пренебрежительное отношение хотя бы к одному компоненту может привести к разрушению всех предпринятых усилий.
В дополнение к определению значения и отношений, контраст очень близок человеческому восприятию и инстинктам самосохранения, о чем узнаем позже. Это делает контраст мощным и важным средством для дизайнеров. Просто запомните, контраст—это основа совершенного дизайна.
Существует несколько начальных форм контраста, используемых дизайнерами, включая следующие:
Начальные формы контраста включают размер, положение, цвет, текстуру, форму и ориентацию
В шаблоне сайта контраст помогает движению глаз читателя по данному макету. Каждый компонент страничной графики, текстового наполнения, интерактивный компонент выполняет свою работу, и каждая из этих выполняемых работ находится в пределах иерархии данного проекта. Более того, каждый компонент является лишь частью общего послания и смысла данного проекта. Используя креативный подход к использованию контраста, вы можете влиять на выбор пользователя и принуждать к определенным действиям.
Элементы страницы конечно не должны создаваться или быть организованы вразбивку. Контент должен составляться разумно и композиция определяться информационной иерархией, которая определяется вами, и вы уже догадались как: посредством контраста.
Например, скажем, вы создаете дизайн простой страницы, основное назначение которой 1) подробно описать, чем занимается компания и какие услуги предоставляет, 2) попросить пользователя создать аккаунт и начать пользоваться сервисами. Перед установкой визуальных отношений, давайте взглянем на предоставленный нами пример для каждого из информационных компонентов.
Страница About
Optimizr анализирует вашу страницу или содержимое сайта, затем трансформирует табличную структуру, облегчая контент и создавая блоки с CSS позизиционированием и структурной разметкой. Данный процесс целиком автоматизирован и не требует знаний html или css. It's 2.0-licious!
Страница Registration
Аккаунт Optimizr'а вкючает следующие типы: Individual Level, Pro Level и Enterprise Level. Вы можете создать акк, нажав здесь. Либо вы можете проследовать по ссылке и узнать более подробно о разных типах аккаунтов.
Можно сразу заметить, что между страницей регистрации и главной страницей нет стилевого контраста. Но для того, чтобы эта страница работала, должна существовать огромная разница между ними. Первая—это информационная страница (information copy) и вторая, если предположить должна быть страница совершения действия (action copy). Давайте попробуем и инспирируем некоторое действие, создав контраст между action copy по отношению к information copy.
Страница About
Optimizr analyzes your web page or entire website and then transforms convoluted table structures and tagless content into lightweight, CSS positioned div layouts and semantic markup. It's 2.0-licious!
One-click Optimizing! Optimizr's functions are automatic and require no knowledge of html or css.
Страница Registration
Create an account >>
Individual Level
For individual users with one static website.
Learn more >>Pro Level
For individual users with multiple static websites.
Learn more >>Enterprise Level
For users with CMS-driven websites.
Learn more >>
Итак, давайте воспользуемся графическим контрастом, обозначив информационную иерархию и элементы на странице
Здесь представлено немного больше, чем позиционное структурирование
В этом примере не слишком много контраста. Логотип контрастирует с контентом благодаря своему цвету и размеру, градиент заставляет взгляд двигаться вниз. Ссылки контрастируют с обычным текстом благодаря различию в цвете и декорации. Однако, по-прежнему сложно понять, какой информационный элемент на этой странице наиболее важен. Давайте немного это изменим.
Теперь информационный контент и контент, побуждающий к действию четче определены и ярче контрастируют.
Итак, у нас есть четкая иерархия значимости элементов на странице и более четко обозначена область, в которой нужно предпринять какое-то действие. Важная информация выделяется размером, цветом, декорацией, и элементы для совершения действия имеют общий цвет, сообщая, что они имеют общее назначение. Итак, мы увеличили контраст между элементами, посетителям не придется читать весь контент целиком, пытаясь понять, что тут самое важное. Сейчас они могут понять, какая информация на странице важная и что нужно сделать, чтобы воспользоваться сервисом.
Как мы увидим далее, эта возможность связать важную информацию и быстрый просмотр особенно важна, когда мы пытаемся использовать человеческую психологию.
Следование и управление человеческим поведением
Ни для кого не секрет, что дизайнерам приходится принимать во внимание вещи, которые большинством людей воспринимается как должное или воспринимается не осознанно. Как факт, неосознанное поведение является основной областью поиска для манипулирования человеческим сознанием посредством дизайна. Для того, чтобы использовать человеческую психологию и манипулировать человеческими сознанием, необходимо сначала разобраться в нем.
Дизайнеры должны знать, что люди обычно внимательно изучают и просматривают все, что их окружает. Мы можем сфокусироваться на небольшой области или предмете на некоторое время, но если мы меняем наше поле зрения, первым делом мы просто пробегаем предметы взглядом. Таким образом, мы бессознательно ищем элементы контраста—вещи, стоящие за пределами обыденности, как части бессознательной опасности—процесса определения.
Посетители сайта быстро просматривают блоки на странице и также быстро решают, где им следует остановиться и обратить внимание на содержание сайта. Если вы использовали контраст для создания визуальной информационной иерархии, вы можете заставить пользователей смотреть только на то, на что хотите вы. Если вы сделали свою работу действительно хорошо, с разумным контрастом, заставляя предпринять какое-либо действие, вы можете заставить пользователей следовать определенным путем по всему сайту.
Другие естественные склонности могут быть использованы для создания более понятного дизайна. Например, представители западных культур обычно начинают просматривать страницы с верхнего левого угла. Если на это место поставить бросающуюся в глаза информацию, в соответствии с контрастом данной области, вы можете быть уверены, что она как минимум не останется незамеченной. Это не означает, что другие области страницы никогда не будут эффективно в плане расположения важной информации; контраст может быть достаточно мощным для контроля над определенными человеческими склонностями. Контраст в сочетании с композицией, для использования человеческого поведения, всегда будет более эффективным, как мы можем видеть на этом примере:
Большие и заметные текстовые элементы в верхнем левом углу определенно являются наиболее значимыми элементами на странице
В следующем примере эффект по прежнему сильный, но не сильнее, чем в предыдущем:
С более крупными текстовыми элементами, помещенными ниже более мелких, становится менее понятным значимость элементов на странице.
Нет ничего хуже, чем человеческая непредсказуемость: каждый привносит свое объективное отношение и какие-то свои капризы, сталкиваясь с которыми в процессе вашей дизайнерской работы дизайн обретает форму. Таким образом, несмотря на все ваши усилия, невозможно предсказать, насколько успешно вы будете влиять на внимание пользователя. Конечно, ваша работа по-прежнему будет иметь значительное воздействие на пользователя при подобном подходе, однако все же лучше понять, какие механизмы работают в этой ситуации и почему.
Печатные издания являются показательным примером того, как создать эффективную информационную иерархию и определить порядок, в котором пользователь прочитает контент.
Этот обычный газетный макет иллюстрирует четкую информационную иерархию, в соответствии с контрастом.
На примере этого газетного макета контраст размера шрифта, изображений, цвета и положения создает предсказуемый порядок чтения или поглощения контента. Самое большое изображение и большой шрифт образуют пару, которая и определяет первое обращение внимания. (1). Цветовой контраст и наличие изображений вполне достаточно, чтобы заставить определить вторую точку остановки взгляда читателя (2). Обратите внимание, как эта область повторяет тяжелую горизонтальную линию, которая помогает привлечь внимание читателей. (3). Понимание механизма работы на этом примере поможет помочь вам применять другие хитрости по отношению к читателям.
Конечно, этот вид контраста может только приблизительно определить порядок следования взгляда читателя. Вот заставить его действительно прочитать контент зависит от многих факторов, например, насколько привлекателен заголовок, как он звучит или насколько интересен рассказ, потому и в этой области тоже существует большое поле для работы с контрастом.
В заключение
Представленные здесь информация и примеры, очень поверхностно охватывают эту область. Контраст окружает нас и является частью того, что мы видим, делаем, учимся и пытаемся понять. Попробуйте поискать его в своей работе и за ее пределами. Приучите себя искать контраст во всем, что вы видите и подсчете информационной иерархии предметов в вашей повседневной жизни. Проще говоря, всмотритесь глубже. Подобные привычки могут принести вполне здоровые дивиденды в вашей дизайнерской работе.
Контраст является лишь одним компонентом, лежащим в основе дизайна. Пользуйтесь всеми ими с комфортом в своей работе, применяйте контраст в самом начале своей работы до того как коснетесь чего-то нового и мало знакомого. Используя контраст, Ваша работа станет лучше.
by Andy Rutledge.
Источник alistapart.com
Перевод — Дмитрий Папуца
Оригинал статьи
Translated with the permission of A List Apart Magazine and the author[s].
