Geum.ru

Лекция учителя «дизайн web-сайтов»

Вид материалаЛекция

Содержание


Технические приемы использования цвета в Web
Цветовая палитра браузера
Выразительность цвета в Web
Роль цвета в формировании образа сайта
Подобный материал:

Зайцева Л.И.

Учитель информатики МОУ: СОШ п.Горноправдинск


Лекция учителя

«ДИЗАЙН WEB-САЙТОВ»


Здравствуйте, ребята!

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

Но о внешнем дизайне вашей работы, о ее цветовом решении, мы с вами еще не говорили.

Скажите, как вы думаете, как художники и дизайнеры подбирают цветовую гамму своего творения? Интуитивно? Опираясь на какие то технологии подбора цвета?

Конечно же, будут правы и те, кто скажет «интуитивно» и те, кто скажет «опираясь на определенные технологии».

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


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

Гармония по Иттену - это равновесие, симметрия сил. Изучая физиологические проблемы цветового видения, он подошел к теоретическому обоснованию законов восприятия.

Он заметил что если долго смотреть на красный цвет, а потом закрыть глаза, то «увидишь» зеленый цвет. Подобные опыты проводились Иттеном со всеми цветами, и всегда перед закрытыми глазам возникал цвет, дополнительный к реально увиденному. Сознание пытается достичь равновесия цветовых образов. Это явление Иттен назвал последовательным контрастом.

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

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

Для определения гармоничного сочетания различных цветов можно пользоваться цветовыми (колориметрическими) кругами. Разные исследователи теории цвета предлагали свои варианты таких кругов.

Это Большой цветовой круг Оствальда. Он содержит 24 цвета. Гармоничные сочетания дают два цвета, лежащие напротив друг друга. или три цвета, расположенные под углом 600.

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

Например круг естественных цветов по ГЕТЕ.





В круге представлены: треугольником СКЖ – первичные цвета, перевернутым треугольником ФОЗ показаны смешанные цвета первого порядка, а точками на окружности СЗ, СФ, КФ и т.д. – смешанные цвета второго порядка.

Наличие такого цветового круга позволяет дать следующие рекомендации:

контрастные сочетания дают цвета, расположенные друг против друга (например, Ф и Ж). Расположенные рядом, они взаимно усиливают друг друга, их сочетание гармонично;

сочетание цветов, расположенных по углам основного или перевернутого треугольника (например, С и Ж), менее гармонично;

сочетание цветов, расположенных в квадратуре, целесообразно для подбора «цветовых аккордов» в два. три или четыре цвета (например, СФ и З, или ЖО и З, или все вместе, или три из них)


Цвет в Wеb

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

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

Технические приемы использования цвета в Web

Web-страница предназначена только для экранного просмотра. Следовательно, разработчику незачем особенно заботиться о сохранении всех параметров изображения при выводе на печать. Это значительно облегчает работу, но остается ряд других проблем. Для Web-страниц очень важен цвет текста. Один из приемов — использование цветового контраста между буквами и фоном.

Художники XIX – XX веков (Матисс, Мондриан, Пикассо, Леже, Миро, Вазарелли) писали с помощью цветового контраста фигурные композиции, натюрморты, абстрактные картины. В современном дизайне, рекламе, Интернете, цветовой контраст – наиболее часто используемый элемент.

Традиционное сочетание — черный шрифт на белом фоне. Он легко читается, но смотрится "неинтересно". Другой вариант — светлый текст на темном фоне. Это не всегда целесообразно, т. к. затрудняет восприятие информации.

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

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

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

Цветовая палитра браузера

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

Для передачи изображения Netscape Communicator и Microsoft Internet Explorer используют только 216 цветов, которые являются общими для операционных систем Мас и Winduws. Эти 216 цветов составляют палитру браузера. Если дизайн изображения создан на основе палитры из 256 цветов, то в результате отображения в браузерах, использующих 216 цветов, цвета исказятся в соответствии с установками браузера. Эта проблема наиболее заметна на изображениях, где есть большие площади, залитые одним цветом. На них искажение цвета будет особенно заметно, и результат может быть неприятным. Использование основной палитры поможет избежать этого.

Выразительность цвета в Web

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

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

Цвет это эмоции и настроение. Вы можете взбодрить зрителя, навеять на него осеннее или весеннее настроение, или наоборот, вогнать в смертную тоску.

“Престижные”, золото, серебро, темно-серый, черный. Их задача - передать солидность, уверенность, стабильность и высокую стоимость.



“Пастельные”, нежные бежевые, розовые, голубоватые... Женственные, мягкие, расслабляющие...



“Здоровые”, из американской психологии... Чистота, здоровье, уверенность, семья.... (соя, кукуруза,oлива)



“Природные”, близкие к естественным органическим, природным компонентам...



Как вариант использования цвета - “Растяжки”... Обычно тональные оттенки одного цвета, и как акцент - более активный цвет.



Стильные, лаконичные изображения можно создавать и в ахроматической черно-белой гамме.





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



Цвет формирует образ или вызывает нужную реакцию целевой аудитории.

При создании сайта, первый шаг для правильного колористического решения — понимание того, как цвет влияет на зрителей, как изменяется его восприятие при длительном рассматривании. У каждого человека есть своя собственная реакция на определенные цвета, иногда просто предвзятое отношение.

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

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

Роль цвета в формировании образа сайта

Мы уже говорили, что каждый цвет создает определенный настрой. Часто человек даже не может определить, что его так привлекает или отталкивает. Понимание характера каждого цвета позволяет критически относиться к его применению в дизайне Web-страницы.

Рассмотрим примеры Web-страниц, в которых наиболее удачно используется цвет.

Красный мгновенно привлекает внимание. Он наиболее энергичный, иногда агрессивный.

Выбор красного цвета может быть обусловлен национальными предпочтениями.



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

Но бывают и очень интересные решения, например, если используется два контрастных цвета



или гамма голубого с контрастом по яркости.




Глядя на зеленый цвет, люди видят образ Природы, который ассоциируется со свежестью и целомудрием. Исследования показывают, что из всех наиболее популярных цветов самый часто используемый в Web-сайтах — сине-зеленый. Дополнительные ассоциации - здоровье, чистота.



Желтый у многих народов ассоциируется с солнцем. Этот цвет очень популярен у Web-дизайнеров. Светло-желтый вызывает чувство бодрости, веселья.

Ярко-желтый — более сложный, заметный цвет. Он привлекает взгляд, приковывает внимание, особенно если присутствует в контрасте с противоположными, холодными тонами, такими как голубой и зеленый.

Желтый и черный дают наиболее мощный цветовой контраст. Эти два цвета инстинктивно напоминают нам о хищных зверях и жалящих насекомых. Реакция на защитные природные цветовые комбинации остается с нами и сегодня.



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

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

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



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




ЗАКЛЮЧЕНИЕ

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

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

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

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

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

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

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

Список использованной литературы.
  1. О. Яцюк. Основы графического дизайна. «БХВ-Петербург», 2004.
  2. О. Яцюк Компьютерные технологии в дизайне. «БХВ-Петербург», 2003.
  3. Тодд Стоуфер Создание Web-страниц. «Питер», 2003г


Приложение:

Этот сайт можно отнести полиграфическому и динамическому дизайну. Сайт разбит на 3 основных колонки , а колонки на более мелкие блоки что придаёт ему вид газеты. И главное виден свой стиль и уникальность сайта. Безупречно подобранные цвета









В оформлении сайта используются серые тона. Что придаёт сайту определённую стильность.



За счёт полосатого фона чувствуется законченность, и как бы сглаживаются пустоты на странице




Хорошо подобраны цвета, даже смело. Получилась яркая, контрастная цветовая гамма