Лекция №8 веб-дизайн



страница1/9
Дата23.02.2013
Размер0.71 Mb.
ТипЛекция
  1   2   3   4   5   6   7   8   9
Лекция №8


ВЕБ-ДИЗАЙН

Дизайн цвета для WEB

Нет ничего важнее правильного подбора цветов для оживления веб-страницы
И ничего хуже неправильных цветов, которые наносят ущерб вашему контенту

ЦВЕТНЫЕ ПОРТАЛЫ ЕСТЬ?
– Тогда заверните мне синенький! –

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

Цветовая гамма страницы дает возможность выделить такие наиболее важные части страницы как навигационные элементы, содержательные блоки, акценты, взаимосвязи и т.д. По этой причине, цвет - крайне важный элемент дизайна web-сайта.

Цвета выражают настроение и индивидуальность вашего сайта


Цвета выражают назначение вашего сайта, его цели, и индивидуальность (также как и той компании, которую он представляет). Чтобы проиллюстрировать это, рассмотрим два варианта интерфейса сайтов розничной торговли:

Gap Online - пример тщательного подбора цветовой гаммы. Сайт использует монохроматичную сине-серую палитру, которая является очень эффективной для выделения представляемой одежды и моделей. Цвета мягкие, ненасыщенные - и весь проект Gap смотрится и воспринимается легко и ненавязчиво. Оценка: 5

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

Ц
вета устанавливают идентичность


Цвета сайта и логотип компании должны дополнять друг друга и существовать в одной палитре... Дизайн сайта должен быть спроектирован относительно лого так, чтобы логотип не торчал как воспаленный большой палец. Хорошим примером вышесказанного послужит цветовая гармония между сайтом Beck Interactive и их логотипом . Это тем более важно, что в 99% случаев логотип уже содержит специфические фирменные цвета той или иной организации.

Цветoвая палитра должна соответствовать содержанию сайта


Содержание и цвет на сайте должны гармонично дополнять друг друга. Давайте вернемся к gap.com/" target="_blank">Gap Online еще раз: цвета, выбранные для дизайна не отвлекают от процесса получения информации, и это также создает дружественную привлекающую среду.

Цвета в контексте нашей эмоциональной и культурной действительности


Web-cайты, которые разрабатываются для глобальной аудитории, должны выбирать цвета для дизайна, основываясь на понимании их культурного и эмоционального значения. Web-дизайнер должен серьезно отнестись к анализу символики цвета. Например, красный - цвет огня, пожара и крови и не ассоциируется со спокойствием или миром. Зеленая шляпа в Китае сигнализирует, что жена человека обманывает его, но во многих других регионах (например, в Индии), зеленый цвет ассоциируется с деньгами, процветанием и благополучием. Так что является целесообразным осведомляться о цветовом и культурном назначении дизайна.

Цвет для групп населения


Цвета должны подбираться в зависимости от аудитории или целевой группы сайта... "The Meaning of Color" от Natalia Khouw обращает внимание на некоторые интересные факты, полученные из академических исследований о восприятии цвета различными группами населения, такие как:

  • Мужчины предпочитают синий цвет красному, в то время как женщины наоборот - красный синему.

  • Другой пример - мужчины предпочитают оранжевый желтому, тогда как женщины предпочитают желтый оранжевому.

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

Сочетания различных цветов


Отдельный цвет сам по себе может быть слишком кричащим или слишком бледным - однако он может быть хорошо обыгран в сочетании с другими цветами. Сочетание черного и серого достаточно тоскливо, но попробуйте добавить к ним оранжевый и БА-БАХ! - получилась славная комбинация. (Совет: На самом деле черный и серый с ЛЮБЫМ другим единым цветом - динамит.)

Посетите http://www.clevelandbrowns.com и http://www.hi-shock.com/dshock/Flash/dsflash.html два хороших примера этой концепции.

Цвета и их естественные ассоциации


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

Некоторые общеизвестные цветовые значения/ассоциации:


  • Красный !!! ассоциируется с кровью, и с чувствами, которые являются энергичными, волнения, страсти или эротика. Большинство цветов несет, и положительные и отрицательные значения. Обратная сторона красного вызывает агрессивные чувства, вызывая гнев или насилие.

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

  • Желтый !!! - цвет радости, солнечного света. Этот цвет оптимистический, приподнятый, современный. Энергия желтого может стать подавляющей. Поэтому желтый - не тот цвет, который имеет тенденцию доминировать над модой в течение длительных периодов времени.

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

  • Зеленый !!! В его положительном значении зеленый предполагает натуральные, природные состояния (растительный мир, леса), жизнь, стабильность, спокойствие, естественность. С другой стороны, зеленый в некоторых своих оттенках или в некотором нетрадиционном контексте (типа зеленой кожи) может вместо этого ассоциироваться с распадом (грибок, плесень), токсичностью, искуственностью.

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

  • Фиолетовый !!! - цвет фантазии, игривости, импульсивности, и мечтательного состояния. В его отрицательном качестве он может ассоциироваться с кошмарами или безумием.

Белый цвет


Используйте белый цвет. Используйте пространство. Пожалуйста!

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

Чем меньше - тем больше


Ограничивайте вашу цветовую палитру двумя или тремя главными цветами (полутоновыми вариациями) и небольшими акцентами в некоторых местах. Ограниченные цвета в вебе вообще и и цветовой палитры вашей графики в частности означают меньшие размеры файла, более быструю загрузку и, что наиболее важно, более читаемый и привлекательный сайт... который в конечном итоге приводит к большему успеху в бизнесе. Такие сайты, как WWW. Apple.com, WWW. EddieBauer.com использовали ограниченное цветовое пространство и все же выглядят отчетливыми; даже CoolHomepages главным образом использует 2 цвета, оранжевый и синий.

И последнее, но не наименее ценное... Сплетайте вашу сеть из красного, черного и белого. В отношении WEB белый - самый яркий цвет, черный по отношению к нему - наиболее контрастный, и красный обеспечивает акцент и отлично сочетается с обоими. Если вы посещали такие проекты, как NunDesign, UAPeople.Com www.oli.org, www.sprint.com, www.oracle.com, www.coke.com, www.honda.com, www.the-rev.com, вы конечно согласитесь со мной:)

вероятно так звучали бы слова героя известного анекдота, задумай он купить не телевизор, а хороший портал в Сети. И герой не виноват, что стал предметом насмешки: он был искренен – ведь для человека цвет действительно играет одну из самых важных ролей в восприятии, как окружающего мира, так и виртуальной среды.

Настолько важную роль, что человечество создало великое множество теорий, объясняющих воздействие, психологию, символику цвета. Достаточно вспомнить книгу художника В. Кандинского "О духовном в искусстве" (http://lib.ru/CULTURE/KANDINSKIJ/kandinskij.txt),  или "Теорию цвета" дизайнера, педагога и теоретика Баухауза И. Иттена (http://library.sredaboom.ru/color/libr_itten_5.htm, http://www.advertology.ru/article13833.html).

Надо отметить, что "режиссеры" многих современных порталов на роль цвет вообще не приглашают или отводят ему крайне незаметную роль второго плана (http://www.rbc.ru/, http://www.1c-leasing.ru/). А ведь цвет может быть примой! Цвет – это индивидуальность, эмоция, узнаваемость, понятность портала!





Предлагаю провести небольшой филологическо-колористический тест. Вот строчка из слов:

Борода. Лихорадка. Вагон. Шапочка. Змий. Свет. Юмор.

Прочитали? Интересны ли Вам вагон-вообще или борода-вообще (только если Вы не садитесь в поезд или не покупаете бритву)?

Синяя борода. Золотая лихорадка. Голубой вагон. Красная шапочка. Зеленый змий. Белый свет. Черный юмор.

Сколько ассоциаций и эмоций рождает теперь каждое из этих слов! Сколько вспоминается сразу сказок, песен, анекдотов, случаев из жизни и т.д.! То же происходит и с порталами. Цвет (после названия-адреса) – самая устойчивая ассоциация с содержанием портала, то есть имеющая наибольше количество ниточек, связывающих тематику портала с жизненным опытом его посетителя.

Это утверждение иллюстрируется знаменитой фразой Генри Форда:  "Автомобиль может быть любого цвета, если этот цвет черный". Классик автомобилестроения знал о силе воздействия цвета и применил цветовой код. Кстати, а какого цвета у Вас авто…, то есть портал?

Современные порталы, предлагают зрителю, оторвавшемуся на минутку от чашечки утреннего кофе и полагающейся к ней газеты, и благосклонно обратившему свой взор на монитор компьютера, предлагают ему посмотреть не цветной фильм или в крайнем случае журнал, а… газету – белая страница, черный и серый шрифт (http://www.religio.ru/bill/index.html).

При этом сайты самих газет (http://www.kommersant.ru/), выполненные таким образом выглядят довольно красиво и сохраняют стиль издания.




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

В чем же эти отличия состоят и как можно ими пользоваться для дизайна портала?

Для ответа на этот вопрос надо разобраться, в чем особенность самого монитора, на котором интерфейс портала предстает перед зрителем?

Особенность в том, что монитор функционирует, излучая свет.

Свет – это сущностная основа монитора. Его поверхность можно назвать мозаичной или кристаллической, состоящей из множества разделенных между собой сегментов. Каждый из сегментов монитора пронизан светом, благодаря этому становится видимым изображение.

Здесь необходимо напомнить о различии между монитором и экраном (эти понятия часто путают).

Экран – это отражающая плоскость. Глядя на экран, человек воспринимает отраженный свет. Каждую 24-ю долю секунды на экране возникает одна из проекций предмета или сцены. Она проецируется с пленки, просвеченной лучом проектора. Очертания на экране – суть тени, отбрасываемые изображениями на пленке, которая приводится в движение с помощью механического аппарата.

Мониторное же изображение – это свет, скопление светящихся пункт-элементов. Поэтому изображение на мониторе – это никогда не предмет, не силуэт, не его тень, но всегда – наполненное светом пространство.

Человек видит окружающий мир благодаря способности глаза воспринимать отраженный свет. Отраженный свет видит и зритель в кинематографе. Интерфейс – это, пожалуй, единственное изображение, когда человек воспринимает для чтения и рассматривания не отраженный, а излучающийся свет. Не приходилось ли Вам смотреть на карманный фонарик, направленный прямо в глаза? А если прикрыть его тканью или ладонью? Так и дизайнер, создавая интерфейс портала, с помощью цвета прикрывает, "дозирует" количество прямого света, попадающего в зрачок смотрящего на интерфейс человека.

Поэтому световая природа монитора напрямую влияет на цветовое решение и эстетику интерфейса.

Начнем с черного и белого.

Когда монитор выключен, он черен и непрозрачен. Изображение в нем возникает только благодаря свету. Как известно, в пигментных красках при смешивании основных цветов получается серый или черный цвет. А при смешивании основных цветов спектра возникает белый. Из всей палитры цветов именно белому отдается предпочтение для передачи света (светящегося окна, лампы, освещенной поверхности). Слова "свет" и "белый" неразделимы в нашем мировосприятии.

Пустота – понятие пространственное. Свет может пронизывать пустоту, то есть то пространство, где его ничто не отражает. Темнота, черный цвет – аморфны, не имеют четко выраженной материальности. Глаз не может, например, определить без достаточного количества света, перед черной ли стеной или в черной темной комнате человек находится. Только свет способен дать это представление. То же и с монитором. Изображение в нем возникает только благодаря свету. Особенность монитора в том, что свет ни от чего не отражается. Он сам есть и изображение, и средство изображения. Изображение формируется благодаря свету. Дизайнер практически "рисует" светом по черному. Иными словами, он организует светоносное пространство в плотной темноте.

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

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

По степени высвобождения света можно различать не столько светлые и темные цвета, сколько открытые (они же более яркие) и закрытые (они же более сдержанные).

Выбор цвета для дизайна портала может проходить по четырем критериям.

Первый – это соответствие цвета тематике портала, то есть цвет как образ. Разные цветовые сочетания связаны в нашем сознании с понятиями, ситуациями, образами. Цвет портала – это своеобразный дресс-код, хорошие манеры в Сети. Надо соответствовать теме и ситуации, в которой находишься. Далеко ходить за этими соответствиями не надо, ведь цвет воздействует настолько же глубоко, насколько прямолинейно. Строгий деловой портал можно одеть в сдержанную гамму серебристых или бежевых оттенков, развлекательный может быть ярким и слегка пестрым, сочетание красно-бело-зеленый напомнит нам об Италии… а каким сделать портал о пиве?

Конечно же зелено-коричнево-золотистым (http://www.propivo.ru/, http://www.beer-festival.ru/), только сразу исключим с этих порталов излюбленный нашими дизайнерами синий цвет, как чуждый образному решению темы. Ну где вы видели синий в запотевшем золотом бокале пива, налитого из зеленой или коричневой бутылки? Разве что на пробке…




Итак, цвет, как образ рождает нужные "тематические" ассоциации и подготавливает зрителя к восприятию текста, приводит его в нужное состояние.

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

Продолжая корректировать портал о пиве, возьмем коричневый как самый закрытый, не светящийся, цвет, зеленый и золотистый – средние цвета, а белый  - как самый яркий, открытый, его в дизайне будет немного, используем только для акцентов.

Третий критерий выбора – возможность создавать градации цвета по шкале открытости. Так золотистый, как это видно на примере, может иметь несколько ступеней до светло-желтого и бежевого, у коричневого эта шкала еще больше – все оттенки землистых и древесных цветов.

Эти градации необходимы нам для того, чтобы кодировать одним цветом страницы одного смыслового ряда, разнообразя при этом разные уровни этого ряда. Например, тема "история пивоварения" – это коричневый цвет, а уровни – разные исторические периоды – разные оттенки коричневого.

И наконец, четвертый критерий – сочетание цвета шрифта и фона интерфейса. Исходя из рассуждений о световой природе монитора, становится очевидно, что светлый шрифт на темном фоне наиболее органичен. Примеры – меню на  http://www.cnn.com/, http://www.msn.com/, http://www.rutv.ru/. (все эти сайты, однако ж, синие близнецы).


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

Таким образом, осознанный выбор цвета для интерфейса поможет сделать портал образным и функциональным, узнаваемым и более удобным для посетителя.

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

Теперь, когда с порталом о пиве мы в целом разобрались, можно приняться за портал о коньяке. И опять примеры оказались похожи, как две капли… http://www.royaldrinks.ru/http://www.wineworld.ru/countries_types/varieties_drink/article1051.html!




  1   2   3   4   5   6   7   8   9

Похожие:

Лекция №8 веб-дизайн iconВладимир Котомин
Интернет технологии cgi+sql программирование, e-коммерция, usability, веб-дизайн, веб-мастеринг, управление проектами
Лекция №8 веб-дизайн iconПрограмма дисциплины "Веб-дизайн"
...
Лекция №8 веб-дизайн iconРазработка насыщенных веб-интерфейсов
Несмотря на особенности реализации программных систем в веб-среде, такие как отсутствие “состояния” у веб-приложений и зависимость...
Лекция №8 веб-дизайн iconОсновная образовательная программа высшего профессионального образования Направление подготовки 072500 Дизайн Профили
Основная образовательная программа (ооп) бакалавриата, реализуемая вузом по направлению подготовки 072500 дизайн и профилю подготовки...
Лекция №8 веб-дизайн iconДемонстрационный тест для учителей изобразительного искусства
...
Лекция №8 веб-дизайн iconЧто такое Веб 0
«Что такое Веб 0» веб-сайтом «Компьютерра online». В этой статье Тим О’Рейли связал появление большого числа сайтов, объединенных...
Лекция №8 веб-дизайн iconРуководство по созданию и размещению веб-форм на сайте Содержание создание веб-формы в упрощенном режиме 3
В данном руководстве по созданию и размещению веб-форм на сайте мы рассмотрим основные аспекты работы с веб-формами: создание веб-форм...
Лекция №8 веб-дизайн iconБилет 1 Дизайн как проектная художественно-техническая деятельность. Виды дизайна. Дизайн
Дизайн художественное конструирование. В переводе с английского «design» «проект», «рисунок», «чертеж», а также действия, связанные...
Лекция №8 веб-дизайн iconДизайн-проект “эконом”
Стоимость разработки дизайн-проекта определяется индивидуально для каждого офиса. Цена на дизайн интерьера формируется в зависимости...
Лекция №8 веб-дизайн iconЛекция 18. Приложения для социальных сетей Понятие " Социальный Веб "

Разместите кнопку на своём сайте:
ru.convdocs.org


База данных защищена авторским правом ©ru.convdocs.org 2016
обратиться к администрации
ru.convdocs.org