Личный кабинет
2008-11-04 12:59
Я часто встречаю рассуждения, что дизайн - это оформление информации. Говорят о нем как об элементе, существующем отдельно от текста, имеющем свои правила и законы. Не забывают упомянуть о его важности общими фразами.
Стоп! А разве графика, цвет и вся композиция не составляют информационное содержание страницы? Основной процент получаемой человеком информации воспринимается зрением. По статистике, воспринимается 83% информации зрительно. И 40% из нее запоминается человеком (против 20% услышанного!). А изображение может нести в себе ничуть не меньше (а иногда и больше) информации, чем текст. Но как связать их воедино? Как заставить дизайн нести тему страницы? Вот это уже вопрос психологии.
Нет, оставим в покое Юнга и Фрейда с их фундаментальными теориями и обратимся к прикладной психологии. Любое изображение вызывает у человека ассоциации. Но проблема в том, что одни предметы, сюжеты или графические элементы вызывают у всех людей (вернее, у многих) одинаковые ассоциации, а другие - совершенно различные. И если Вы ошибочно строите ассоциативный ряд, то можно завести пользователя совсем не туда, куда бы Вам хотелось. Поэтому для построения устойчивых ассоциаций, настроения или образа часто нужно дополнять композицию элементами, укрепляя тематическую линию. Такими элементами может быть что угодно: изображение, слово (первичный источник информации) или целая фраза, линия, размывка, коллаж
Главное - стремиться не к слепому усложнению, а к созданию устойчивого ассоциативного ряда по конкретной теме. Вы, наверное, уже заметили, что на сложных, детализированных, иногда не понятных с первого взгляда изображениях хочется задержать взгляд и они надолго остаются в памяти. Но немногие из них действительно несут тему или настроение. Большинство похоже на простую мозаику, сборище не связанной между собой графической информации. Творчество дизайнера в индивидуальных работах может быть любым - это его личное дело. Здесь работает понятие "дизайн ради дизайна". Но в оформлении конкретного заказа, рассчитанного на большую и различную аудиторию, важно не перестараться
Пользователь, просматривая оформление, всегда стремится сделать вывод, ищет законченность в понимании представленной информации. И, сделав его, испытывает эстетическое удовлетворение. Задача дизайнера - помочь ему в этом. Построить твердый, конкретный ассоциативный ряд, раскрывая тему. Простой пример - когда используется перевернутый текст. Это простая преграда для его восприятия, и пользователь способен прочитать этот текст, но решение этой загадки приносит подсознательное удовольствие и заостряет внимание на этом слове или фразе. Другое дело - уместно ли такое действие в конкретной ситуации
Теперь о способах и инструментах. Первое, на чем хочется остановить внимание, это способы проведения пользователя по композиции, построение ассоциативного ряда в нужном направлении. Восприятие текстовой информации (в большинстве языков) происходит слева направо и сверху вниз. Это правило хорошо помогает в карикатурах, когда есть сюжетный текст (например, вопрос - ответ). Чтобы зритель правильно понял сюжет, нужно заставить его прочесть сначала вопрос, а потом ответ. Текст вопроса выносится вверх изображения, поближе к левому углу, а текст ответа - в низ изображения или справа от вопроса. Это первый принцип, но есть и другие способы заострить внимание на конкретных деталях.
Еще есть пространственное понятие восприятия информации. То, что находится ближе (на переднем плане), воспринимается раньше, чем-то, что на заднем. Эффект заднего плана можно получить достаточно сильной размывкой. Объект с нормальной резкостью будет выглядеть расположенным на переднем плане и восприниматься первым. Крупные и достаточно яркие (контрастирующие) элементы также воспринимаются раньше мелких, детализированных. Любой "выделенный" объект в композиции становится тематическим центром. Специалисты "строгановки" советуют использовать не более 3 тематических центров при 5-7 управляющих элементах (в рекламных материалах еще меньше). Я оставлю это без комментариев, но позволю себе не согласиться
Еще один способ заострить внимание на конкретной детали - это освещение. Любой источник света гарантированно заставляет обращать на себя внимание. Даже тень и затемнение некоторых деталей подразумевают существование источника света. И затемненные детали оттеняются более яркими. Но, используя эффект освещения (внося источник света), можно совершить грубую ошибку. Человеческий глаз легко различает неправильное (неестественное) наложение теней. Поэтому понятиям света и тени уделяется очень большое внимание в программе обучения художников. Вот один пример из моей практики. Долгие обсуждения световой схемы в дизайн-макете вызвали естественное стремление к творчеству у клиента (достаточно частая ситуация). Но его предложение повергло меня в шок. Он предложил сделать графический элемент темно-синего цвета, а тень от него - желтой! Убеждения, что это неправильно, породили вопрос: ...но это же можно нарисовать? Можно, конечно, но... мне не захотелось
Никогда не старайтесь играть с пропорциями и перспективой в реалистичных изображениях и коллажах без конкретной цели. Законы пространственной геометрии и естественных пропорций - это законы природы. Спросите у людей, имеющих высшее художественное образование, сколько времени они посвятили изучению перспектив и пропорций. Человеческий глаз легко замечает ложь в этой области. И есть опасность, что пользователь подсознательно, отвлекаясь от темы, сосредоточит внимание на поиске источника зрительного дискомфорта в изображении и сделает совершенно другие выводы, чем Вам бы хотелось. Другая ситуация - когда это сделано сознательно, сосредоточивая внимание на этом. Тогда нужно постараться убрать другие сложные элементы, избегая конфликтов.
Теперь, немного о "вечном" - о цвете. Вы, скорее всего, уже не раз читали различные материалы на эту тему и не раз видели статьи о психологическом восприятии цветов. Советую всегда скептически подходить к этому вопросу. Оставим бесспорным физические аспекты сочетания и свойств цветов, а остановимся на психологии. Многие выводы сделаны на основе достаточно спорных утверждений. В вопросе восприятия конкретного цвета психологи подходят индивидуально к каждому человеку. Дело в том, что конкретный цвет у каждого ассоциируется с конкретным образом, вещью или событием в его жизни и находится в подсознании человека. А эти ассоциации могут быть различными - как положительными, так и отрицательными. Это относиться не ко всем цветам подряд, а только к некоторым основным (у всех по-разному). Еще восприятие цвета может носить тематическую направленность. Например, красный. В технической области он символизирует опасность, а в области моды - чувственность и смелость. Если взять красный цвет в природе, то, скорее всего, он породит ассоциации со спелыми ягодами. А в социальной сфере он заставит вспомнить о коммунизме, однако у жителей других стран этой ассоциации может и не быть
Получилась достаточно разнообразная картина ассоциаций. И можно смело забыть многие однозначные утверждения. Поэтому очень осторожно выбирайте цвета для каждой конкретной ситуации и избегайте давления одного сплошного цвета в композиции делового сайта. Может быть, у самого важного клиента он вызовет совершенно негативные ассоциации. Не стесняйтесь опрашивать своих знакомых при построении композиции, интересуясь их мнением и ассоциациями - это очень полезная практика
Линии, стрелки или направленный градиент оказывают устойчивое направляющее, указывающее воздействие. Но, используя их, избегайте ситуации, когда приходится просматривать композицию "против шерсти". Это вызывает дискомфорт на уровне подсознания и подсознательное же желание найти его причину.
Если Вы web-дизайнер, то у Вас может возникнуть еще одна проблема - процесс загрузки страницы. Будет обидно, если элементы, управляющие ассоциативным рядом, будут загружены не в той последовательности. Но это уже не такая большая проблема. Если Вам действительно нужно показать все изображение сразу, то Вы можете использовать "слой загрузки", закрывающий всю страницу до тех пор, пока она не загрузится целиком, или убрать этот слой на каком-то этапе загрузки страницы с помощью скрипта. Но не забывайте проставить способ его "ручного" отключения, для нетерпеливых пользователей
Эта статья может дописываться бесконечно, но, надеюсь, я смог объяснить важность психологии в дизайне. Рабочее место психолога в рекламных агентствах уже давно существует. А дизайнер просто обязан быть неплохим психологом. Если Вы стремитесь к профессионализму, то постарайтесь прочесть соответствующую литературу и найти возможность общения с психологом. Не оставляйте без внимания различные статистические данные и публикации о результатах исследований. Не стесняйтесь спрашивать совета и чаще обсуждайте свои работы с другими. Всегда делайте выводы сами и скептически относитесь к выводам других. А книжки Д. Карнеги оставьте в покое, их нужно изучать в школе
Стоп! А разве графика, цвет и вся композиция не составляют информационное содержание страницы? Основной процент получаемой человеком информации воспринимается зрением. По статистике, воспринимается 83% информации зрительно. И 40% из нее запоминается человеком (против 20% услышанного!). А изображение может нести в себе ничуть не меньше (а иногда и больше) информации, чем текст. Но как связать их воедино? Как заставить дизайн нести тему страницы? Вот это уже вопрос психологии.
Нет, оставим в покое Юнга и Фрейда с их фундаментальными теориями и обратимся к прикладной психологии. Любое изображение вызывает у человека ассоциации. Но проблема в том, что одни предметы, сюжеты или графические элементы вызывают у всех людей (вернее, у многих) одинаковые ассоциации, а другие - совершенно различные. И если Вы ошибочно строите ассоциативный ряд, то можно завести пользователя совсем не туда, куда бы Вам хотелось. Поэтому для построения устойчивых ассоциаций, настроения или образа часто нужно дополнять композицию элементами, укрепляя тематическую линию. Такими элементами может быть что угодно: изображение, слово (первичный источник информации) или целая фраза, линия, размывка, коллаж
Главное - стремиться не к слепому усложнению, а к созданию устойчивого ассоциативного ряда по конкретной теме. Вы, наверное, уже заметили, что на сложных, детализированных, иногда не понятных с первого взгляда изображениях хочется задержать взгляд и они надолго остаются в памяти. Но немногие из них действительно несут тему или настроение. Большинство похоже на простую мозаику, сборище не связанной между собой графической информации. Творчество дизайнера в индивидуальных работах может быть любым - это его личное дело. Здесь работает понятие "дизайн ради дизайна". Но в оформлении конкретного заказа, рассчитанного на большую и различную аудиторию, важно не перестараться
Пользователь, просматривая оформление, всегда стремится сделать вывод, ищет законченность в понимании представленной информации. И, сделав его, испытывает эстетическое удовлетворение. Задача дизайнера - помочь ему в этом. Построить твердый, конкретный ассоциативный ряд, раскрывая тему. Простой пример - когда используется перевернутый текст. Это простая преграда для его восприятия, и пользователь способен прочитать этот текст, но решение этой загадки приносит подсознательное удовольствие и заостряет внимание на этом слове или фразе. Другое дело - уместно ли такое действие в конкретной ситуации
Теперь о способах и инструментах. Первое, на чем хочется остановить внимание, это способы проведения пользователя по композиции, построение ассоциативного ряда в нужном направлении. Восприятие текстовой информации (в большинстве языков) происходит слева направо и сверху вниз. Это правило хорошо помогает в карикатурах, когда есть сюжетный текст (например, вопрос - ответ). Чтобы зритель правильно понял сюжет, нужно заставить его прочесть сначала вопрос, а потом ответ. Текст вопроса выносится вверх изображения, поближе к левому углу, а текст ответа - в низ изображения или справа от вопроса. Это первый принцип, но есть и другие способы заострить внимание на конкретных деталях.
Еще есть пространственное понятие восприятия информации. То, что находится ближе (на переднем плане), воспринимается раньше, чем-то, что на заднем. Эффект заднего плана можно получить достаточно сильной размывкой. Объект с нормальной резкостью будет выглядеть расположенным на переднем плане и восприниматься первым. Крупные и достаточно яркие (контрастирующие) элементы также воспринимаются раньше мелких, детализированных. Любой "выделенный" объект в композиции становится тематическим центром. Специалисты "строгановки" советуют использовать не более 3 тематических центров при 5-7 управляющих элементах (в рекламных материалах еще меньше). Я оставлю это без комментариев, но позволю себе не согласиться
Еще один способ заострить внимание на конкретной детали - это освещение. Любой источник света гарантированно заставляет обращать на себя внимание. Даже тень и затемнение некоторых деталей подразумевают существование источника света. И затемненные детали оттеняются более яркими. Но, используя эффект освещения (внося источник света), можно совершить грубую ошибку. Человеческий глаз легко различает неправильное (неестественное) наложение теней. Поэтому понятиям света и тени уделяется очень большое внимание в программе обучения художников. Вот один пример из моей практики. Долгие обсуждения световой схемы в дизайн-макете вызвали естественное стремление к творчеству у клиента (достаточно частая ситуация). Но его предложение повергло меня в шок. Он предложил сделать графический элемент темно-синего цвета, а тень от него - желтой! Убеждения, что это неправильно, породили вопрос: ...но это же можно нарисовать? Можно, конечно, но... мне не захотелось
Никогда не старайтесь играть с пропорциями и перспективой в реалистичных изображениях и коллажах без конкретной цели. Законы пространственной геометрии и естественных пропорций - это законы природы. Спросите у людей, имеющих высшее художественное образование, сколько времени они посвятили изучению перспектив и пропорций. Человеческий глаз легко замечает ложь в этой области. И есть опасность, что пользователь подсознательно, отвлекаясь от темы, сосредоточит внимание на поиске источника зрительного дискомфорта в изображении и сделает совершенно другие выводы, чем Вам бы хотелось. Другая ситуация - когда это сделано сознательно, сосредоточивая внимание на этом. Тогда нужно постараться убрать другие сложные элементы, избегая конфликтов.
Теперь, немного о "вечном" - о цвете. Вы, скорее всего, уже не раз читали различные материалы на эту тему и не раз видели статьи о психологическом восприятии цветов. Советую всегда скептически подходить к этому вопросу. Оставим бесспорным физические аспекты сочетания и свойств цветов, а остановимся на психологии. Многие выводы сделаны на основе достаточно спорных утверждений. В вопросе восприятия конкретного цвета психологи подходят индивидуально к каждому человеку. Дело в том, что конкретный цвет у каждого ассоциируется с конкретным образом, вещью или событием в его жизни и находится в подсознании человека. А эти ассоциации могут быть различными - как положительными, так и отрицательными. Это относиться не ко всем цветам подряд, а только к некоторым основным (у всех по-разному). Еще восприятие цвета может носить тематическую направленность. Например, красный. В технической области он символизирует опасность, а в области моды - чувственность и смелость. Если взять красный цвет в природе, то, скорее всего, он породит ассоциации со спелыми ягодами. А в социальной сфере он заставит вспомнить о коммунизме, однако у жителей других стран этой ассоциации может и не быть
Получилась достаточно разнообразная картина ассоциаций. И можно смело забыть многие однозначные утверждения. Поэтому очень осторожно выбирайте цвета для каждой конкретной ситуации и избегайте давления одного сплошного цвета в композиции делового сайта. Может быть, у самого важного клиента он вызовет совершенно негативные ассоциации. Не стесняйтесь опрашивать своих знакомых при построении композиции, интересуясь их мнением и ассоциациями - это очень полезная практика
Линии, стрелки или направленный градиент оказывают устойчивое направляющее, указывающее воздействие. Но, используя их, избегайте ситуации, когда приходится просматривать композицию "против шерсти". Это вызывает дискомфорт на уровне подсознания и подсознательное же желание найти его причину.
Если Вы web-дизайнер, то у Вас может возникнуть еще одна проблема - процесс загрузки страницы. Будет обидно, если элементы, управляющие ассоциативным рядом, будут загружены не в той последовательности. Но это уже не такая большая проблема. Если Вам действительно нужно показать все изображение сразу, то Вы можете использовать "слой загрузки", закрывающий всю страницу до тех пор, пока она не загрузится целиком, или убрать этот слой на каком-то этапе загрузки страницы с помощью скрипта. Но не забывайте проставить способ его "ручного" отключения, для нетерпеливых пользователей
Эта статья может дописываться бесконечно, но, надеюсь, я смог объяснить важность психологии в дизайне. Рабочее место психолога в рекламных агентствах уже давно существует. А дизайнер просто обязан быть неплохим психологом. Если Вы стремитесь к профессионализму, то постарайтесь прочесть соответствующую литературу и найти возможность общения с психологом. Не оставляйте без внимания различные статистические данные и публикации о результатах исследований. Не стесняйтесь спрашивать совета и чаще обсуждайте свои работы с другими. Всегда делайте выводы сами и скептически относитесь к выводам других. А книжки Д. Карнеги оставьте в покое, их нужно изучать в школе
- Психология в дизайне
- Психология в дизайне
- Психология дизайна
- Баннерная реклама – психология потребителя
- Мелочи в дизайне
- Шрифт в web-дизайне
- О композиции в дизайне
- Мелочи в дизайне
- Главные ошибки в web-дизайне
- Шрифтовое оформление в web-дизайне
- Понимание психологии цвета в веб-дизайне
- 10 признаков дурного тона в web-дизайне
- Фреймы в HTML документах (2008-11-04)
- 10 признаков дурного тона в web-дизайне (2008-11-04)
- 800 и 1024. Пиксели или проценты? (2008-11-04)
- Как работает формат JPEG? (2008-11-04)
- О композиции в дизайне (2008-11-04)
- Шрифты (2008-11-04)
- Как сделать качественный веб-сайт (2008-11-04)
- Какой вид дизайна выбрать? (2008-11-04)
- Выпадающие меню с помощью CSS (2008-11-04)
- Создание веб-страниц для различных разрешений м... (2008-11-04)
- Веб-дизайн и анимация (2008-11-04)
- Немного об index.html (2008-11-04)
- Психология дизайна (2008-11-04)
- Что такое стильный web-сайт? (2008-11-04)
- Web дизайн :: Что такое хорошо и что такое плохо (2008-11-04)
- Лево, Право или Центр? (2008-11-04)
- Оптимизация изображений в формате JPG (2008-11-04)
- Альтернативные редакторы Flash (2008-11-04)
- Что же такое web-дизайн? (2008-11-04)
- Сайты для тинейджеров: правила дизайна (2008-11-04)
- Маленькие проблемы больших таблиц - HTML (2008-11-04)
- Особенности web-дизайна (2008-11-04)
- Подсказки и советы для веб-мастеров - Топ 100+ (2008-11-04)
- Единицы измерения CSS (2008-11-04)
- Состав изображений (2008-11-04)
- FLASH - ЧТО МОЖЕТ БЫТЬ ХУЖЕ? (2008-11-04)
- FAQ по графическим форматам файлов (2008-11-04)
- ПО необходимое для web-дизайнера (2008-11-04)
- Должностная инструкция веб-мастера (2008-11-04)
- Стиль Вашего сайта (2008-11-04)
- Стиль Вашего сайта (2008-11-04)
- Orange color: теория и практика (2008-11-04)
- Расположение баннера (2008-11-04)
- Советы "чайникам" (2008-11-04)
- С чего начать (2008-11-04)
- С чего начать (2008-11-04)
- Организация - вот ключ к успеху (2008-11-04)
- Подбор шрифта и верстка текста (2008-11-04)
- Обзор Gif-аниматоров (2008-11-04)
- Каскадные таблицы стилей (преимущества и недост... (2008-11-04)
- Фирменный шрифт (2008-11-04)
- Главные ошибки в web-дизайне (2008-11-04)
- CSS - Для чего нужны таблицы стилей? (2008-11-04)
- Таблицы или слои, что лучше? (2008-11-04)
- О скриптах (2008-11-04)
- Изучаем HTML (2008-11-04)
- Применение нескольких классов к элементу в CSS (2008-11-04)
- Создание сайта с помошью фреймов (2008-11-04)
- Основы работы со слоями в CSS (2008-11-04)
- 10 полезных советов (2008-11-04)
Быстрый переход