SlideShare a Scribd company logo
Стажировка-2015. Дизайнеры. Занятие 4.5
цвет в web-дизайне
Стажировка-2015
Цветовая гамма
У каждого сайта есть цветовая гамма, в которой основные цвета
используются для заполнения большего пространства.
Использование этих цветов воздействует на разум и настроение
человекавосновномподсознательно.Такчтовыбирайтеихтщательно.
Стажировка-2015
Триада (тройная гармония, треугольник)
Триада — основная и самая сбалансированная система из трёх цветов. В ней
используется резонанс и дополнение цветов, но нет сложного контраста, из-
за чего триада является самой надёжной гаммой.
Стажировка-2015
Двойная комплиментарная система
Эту гамму труднее воплотить, но она может оказаться выгодным решением.
Используется четыре цвета: два контрастных и два дополнительных.
Стажировка-2015
Аналоги (последовательная система)
Гамма аналогичных цветов использует в основном дополняющие друг друга
оттенки. Это позволяет особенно ярко подчеркнуть какие-то качества и
вызвать определённые эмоции.
Стажировка-2015
Цвет и эмоции
Наиболее стимулирующий цвет, настолько энергетически заряженный,
что может даже увеличить кровяное давление. Отличное решение для
привлечения внимания. Однако, ассоциируется и с опасностью.
Красный: власть, важность, молодость
Стажировка-2015
Цвет и эмоции
В качестве основного цвета он может вызывать интерес и бодрить, а в
качестве вторичного — сохранять эти свойства, но в более ненавязчивой
манере. Кроме того, оранжевый помогает создать ощущение движения и
энергии.
Оранжевый: дружелюбие, энергия, уникальность.
Стажировка-2015
Цвет и эмоции
Яркий жёлтый цвет добавляет энергии, но без остроты и резкости, которая
присутствует в красном. Средние оттенки жёлтого цвета вызывают
ощущение комфорта, хотя всё ещё бодрят. Тёмные оттенки (включая
золотой) обеспечивают ощущение старины, наполняют пространство
безвременьем, мудростью и любопытством.
Желтый: счастье, энтузиазм, архаичность (более тёмные тона).
Стажировка-2015
Цвет и эмоции
Создаёт очень сбалансированную и стабильную атмосферу. Более тёмные
оттенки зелёного создают впечатление богатства и изобилия
Зеленый: рост, стабильность, темы финансов, темы окружающей среды.
Стажировка-2015
Цвет и эмоции
Все оттенки синего универсальны в плане расслабления и безопасности, но
светлые тона ассоциируются с дружелюбием, а тёмные — с печалью.
Синий: покойствие, безопасность, открытость (более светлые оттенки),
надёжность (более тёмные оттенки).
Стажировка-2015
Цвет и эмоции
Фиолетовый цвет исторически ассоциируется с королевским величием,
намекает на роскошь. Пурпурные оттенки отражают щедрость и богатство
в целом. Более светлые оттенки, такие как лавандовый (фиолетовый с
добавлением розового), навевают мысли о романтике, тогда как тёмные
оттенки кажутся более шикарными и таинственными.
Фиолетовый: роскошь, романтика (светлые оттенки), мистика и тайна
(тёмные оттенки).
Стажировка-2015
Цвет и эмоции
Для большинства сайтов чёрный используется, чтобы создать ощущение
изысканности. От сочетания чёрного и белого в минималистичном дизайне
создаётся впечатление элегантности и стиля
Черный: власть, изысканность, нервозность.
Стажировка-2015
Цвет и эмоции
В западной культуре белый цвет ассоциируется с чистотой, добротой и
невинностью. Этот цвет часто используют для фона минималистичных и
простых сайтов.
Белый: чистота, простота, добродетель.
Стажировка-2015
Цвет и эмоции
Часто используется профессиональными дизайнерами. Всё дело в оттенках:
чередуя их, можно получить все эмоции, вызываемые как чёрным цветом,
так и белым. Серый — это мощный инструмент в умелых руках.
Отличный нейтральный фон для фото.
Серый: нейтральность, формальность, меланхолия.
Стажировка-2015
Цвет и эмоции
Сам по себе бежевый цвет довольно тусклый и невыразительный, но у него
есть одно замечательное свойство: бежевый принимает характер цветов,
которые его окружают. Поэтому, если он предназначен не для выражения
сдержанности, бежевый служит в качестве фона или второго цвета.
Бежевый: передаёт характер остальных цветов.
Стажировка-2015
Цвет и эмоции
Цвет слоновой кости, а также кремовый вызывают практически те же
эмоции, что и белый. Однако цвет слоновой кости более тёплый (или менее
стерильный), чем белый, что создаёт большее ощущение комфорта, сохраняя
при этом минимализм. Можно использовать цвет слоновой кости вместо
белого, чтобы смягчить контраст между ним и более тёмными цветами.
Цвет слоновой кости: комфорт, элегантность, простота.
Стажировка-2015
Инструменты-помощники
Adobe Color CC (Kuler) color.adobe.com/ru/create/color-wheel/
0 to 255 - www.0to255.com
Flat UI Color Picker - www.flatuicolorpicker.com
Цветовые палитры для Matherial Design www.google.com/design/spec/style/
color.html

More Related Content

PPT
композиция
PPTX
Спецкурс 2014, занятие 10. Lean startup
PDF
Стажировка-2015. Разработка. Занятие 11. Безопасность web-приложений
PPTX
Стажировка-2015. Разработка. Занятие 12. Транзакции в БД, работа с БД из прил...
PPTX
Спецкурс 2014, занятие 3. Абстракции, именование, документирование
PPTX
Стажировка-2014, занятие 5. Базы данных
PDF
Стажировка 2015. Разработка. Занятие 5. Использование nginx
PPTX
Спецкурс 2014, занятие 10. Lean startup
композиция
Спецкурс 2014, занятие 10. Lean startup
Стажировка-2015. Разработка. Занятие 11. Безопасность web-приложений
Стажировка-2015. Разработка. Занятие 12. Транзакции в БД, работа с БД из прил...
Спецкурс 2014, занятие 3. Абстракции, именование, документирование
Стажировка-2014, занятие 5. Базы данных
Стажировка 2015. Разработка. Занятие 5. Использование nginx
Спецкурс 2014, занятие 10. Lean startup

Viewers also liked (20)

PPTX
Cпецкурс 2014, занятие 9 (1 часть). Языки разметки
PDF
Стажировка 2015. Дизайн. Занятие 5. Адаптивный web-дизайн
PPTX
Стажировка-2014, занятие 8. Общая архитектура web-приложений, web frameworks
PDF
Спецкурс 2014, занятие 6. Базы данных
PPTX
Стажировка-2014, занятие 7. Языки разметки, HTML5, CSS3
PDF
Курс Java-2016. Занятие 06. Файлы и ввод-вывод
PPTX
Стажировка-2015. Тестирование. Занятие 2. Планирование процесса тестирования.
PPTX
Стажировка-2014, занятие 8. Обзор CakePHP framework (PHP)
PDF
Стажировка 2015. Дизайн. Занятие 1. История дизайна, тренды 2015, логотипы.
PPTX
Стажировка-2014, занятие 8. Обзор Rails framework (Ruby)
PPTX
Стажировка-2014, занятие 4. Планирование процесса тестирования.
PPTX
Стажировка-2015. Разработка. Занятие 10 (часть 2). Исключения и логи.
PPTX
Стажировка-2014, занятие 3. Тест-кейсы, ручное и автоматическое тестирование.
PPTX
Спецкурс 2014, занятие 9 (2 часть). Code conventions and best practices
PPTX
Спецкурс 2014, занятие 5 (часть 1). Исключения и логи
PPTX
Спецкурс "Современные практики разработки ПО", 2013-2014 уч. год, занятие 4
PPTX
Стажировка-2015. Разработка. Занятие 4. Системы контроля версий
PPT
Стажировка-2014, занятие 8. Обзор Sails framework (Node.js)
PDF
Стажировка 2015. Разработка. Занятие 6. Адаптивная верстка
PPTX
Курс Java-2016. Занятие 05. Тестирование и Java
Cпецкурс 2014, занятие 9 (1 часть). Языки разметки
Стажировка 2015. Дизайн. Занятие 5. Адаптивный web-дизайн
Стажировка-2014, занятие 8. Общая архитектура web-приложений, web frameworks
Спецкурс 2014, занятие 6. Базы данных
Стажировка-2014, занятие 7. Языки разметки, HTML5, CSS3
Курс Java-2016. Занятие 06. Файлы и ввод-вывод
Стажировка-2015. Тестирование. Занятие 2. Планирование процесса тестирования.
Стажировка-2014, занятие 8. Обзор CakePHP framework (PHP)
Стажировка 2015. Дизайн. Занятие 1. История дизайна, тренды 2015, логотипы.
Стажировка-2014, занятие 8. Обзор Rails framework (Ruby)
Стажировка-2014, занятие 4. Планирование процесса тестирования.
Стажировка-2015. Разработка. Занятие 10 (часть 2). Исключения и логи.
Стажировка-2014, занятие 3. Тест-кейсы, ручное и автоматическое тестирование.
Спецкурс 2014, занятие 9 (2 часть). Code conventions and best practices
Спецкурс 2014, занятие 5 (часть 1). Исключения и логи
Спецкурс "Современные практики разработки ПО", 2013-2014 уч. год, занятие 4
Стажировка-2015. Разработка. Занятие 4. Системы контроля версий
Стажировка-2014, занятие 8. Обзор Sails framework (Node.js)
Стажировка 2015. Разработка. Занятие 6. Адаптивная верстка
Курс Java-2016. Занятие 05. Тестирование и Java
Ad

Similar to Стажировка-2015. Дизайн. Занятие 4 (2 часть). Цвет в web-дизайне (8)

PDF
4.5 Веб-дизайн
PPTX
интернет2
PPSX
Психология цвета
PDF
Композиция в веб-дизайне
PPTX
11. цвет для веб страниц
PPT
влияние цвета на здоровье человека
PPT
Цветовые модели КГ
PPTX
выбор цвета для интерьера
4.5 Веб-дизайн
интернет2
Психология цвета
Композиция в веб-дизайне
11. цвет для веб страниц
влияние цвета на здоровье человека
Цветовые модели КГ
выбор цвета для интерьера
Ad

More from 7bits (20)

PDF
Гудбай, ИТ-лофт! Тарасенко Анна: Стартап = факап?
PDF
Гудбай, ИТ-лофт! Денис Нелюбин: Новейшая история ИТ-лофта
PDF
Гудбай, ИТ-лофт! Лопатюк Саша: Договоримся не плакать
PDF
Гудбай, ИТ-лофт! Гончаровский Игорь: IT-Loft без связи
PDF
Гудбай, ИТ-лофт! Мячин Сергей: LUDUM DARE + IT-LOFT = LOVE
PDF
Goodbye, IT-loft! Тараканов Алексей: Идеология в IT
PPTX
Курс Java-2016. Занятие 13. Spring
PDF
Курс Java-2016. Занятие 12. DBMS, JDBC
PDF
Курс Java-2016. Занятие 11. Servlets, JSP
PDF
Курс Java-2016. Занятие 10. Reflection, mock
PDF
Курс Java-2016. Занятие 09. Web
PDF
Курс Java-2016. Занятие 08. Итераторы, многопоточность
PDF
Курс Java-2016. Занятие 07. Логи, фасады, библиотеки и коллекции
PDF
Курс Java-2016. Занятие 04 (часть 2). Git и GitHub
PDF
Курс Java-2016. Занятие 04 (часть 1). Еще немного про Generics
PPTX
курс Java 2016. занятие 03. интерфейсы, generic, исключения
PPTX
Курс Java-2016. Занятие 02. Пакеты, сборка проекта с Maven
PPTX
Курс Java-2016. Занятие 01. Введение в Java как технологию
PPTX
Спецкурс-2015. Занятие 05. Системы контроля версий
PPTX
Спецкурс-2015. Занятие 04 (часть 2). Обработка исключительных ситуаций, запи...
Гудбай, ИТ-лофт! Тарасенко Анна: Стартап = факап?
Гудбай, ИТ-лофт! Денис Нелюбин: Новейшая история ИТ-лофта
Гудбай, ИТ-лофт! Лопатюк Саша: Договоримся не плакать
Гудбай, ИТ-лофт! Гончаровский Игорь: IT-Loft без связи
Гудбай, ИТ-лофт! Мячин Сергей: LUDUM DARE + IT-LOFT = LOVE
Goodbye, IT-loft! Тараканов Алексей: Идеология в IT
Курс Java-2016. Занятие 13. Spring
Курс Java-2016. Занятие 12. DBMS, JDBC
Курс Java-2016. Занятие 11. Servlets, JSP
Курс Java-2016. Занятие 10. Reflection, mock
Курс Java-2016. Занятие 09. Web
Курс Java-2016. Занятие 08. Итераторы, многопоточность
Курс Java-2016. Занятие 07. Логи, фасады, библиотеки и коллекции
Курс Java-2016. Занятие 04 (часть 2). Git и GitHub
Курс Java-2016. Занятие 04 (часть 1). Еще немного про Generics
курс Java 2016. занятие 03. интерфейсы, generic, исключения
Курс Java-2016. Занятие 02. Пакеты, сборка проекта с Maven
Курс Java-2016. Занятие 01. Введение в Java как технологию
Спецкурс-2015. Занятие 05. Системы контроля версий
Спецкурс-2015. Занятие 04 (часть 2). Обработка исключительных ситуаций, запи...

Стажировка-2015. Дизайн. Занятие 4 (2 часть). Цвет в web-дизайне

  • 2. Стажировка-2015 Цветовая гамма У каждого сайта есть цветовая гамма, в которой основные цвета используются для заполнения большего пространства. Использование этих цветов воздействует на разум и настроение человекавосновномподсознательно.Такчтовыбирайтеихтщательно.
  • 3. Стажировка-2015 Триада (тройная гармония, треугольник) Триада — основная и самая сбалансированная система из трёх цветов. В ней используется резонанс и дополнение цветов, но нет сложного контраста, из- за чего триада является самой надёжной гаммой.
  • 4. Стажировка-2015 Двойная комплиментарная система Эту гамму труднее воплотить, но она может оказаться выгодным решением. Используется четыре цвета: два контрастных и два дополнительных.
  • 5. Стажировка-2015 Аналоги (последовательная система) Гамма аналогичных цветов использует в основном дополняющие друг друга оттенки. Это позволяет особенно ярко подчеркнуть какие-то качества и вызвать определённые эмоции.
  • 6. Стажировка-2015 Цвет и эмоции Наиболее стимулирующий цвет, настолько энергетически заряженный, что может даже увеличить кровяное давление. Отличное решение для привлечения внимания. Однако, ассоциируется и с опасностью. Красный: власть, важность, молодость
  • 7. Стажировка-2015 Цвет и эмоции В качестве основного цвета он может вызывать интерес и бодрить, а в качестве вторичного — сохранять эти свойства, но в более ненавязчивой манере. Кроме того, оранжевый помогает создать ощущение движения и энергии. Оранжевый: дружелюбие, энергия, уникальность.
  • 8. Стажировка-2015 Цвет и эмоции Яркий жёлтый цвет добавляет энергии, но без остроты и резкости, которая присутствует в красном. Средние оттенки жёлтого цвета вызывают ощущение комфорта, хотя всё ещё бодрят. Тёмные оттенки (включая золотой) обеспечивают ощущение старины, наполняют пространство безвременьем, мудростью и любопытством. Желтый: счастье, энтузиазм, архаичность (более тёмные тона).
  • 9. Стажировка-2015 Цвет и эмоции Создаёт очень сбалансированную и стабильную атмосферу. Более тёмные оттенки зелёного создают впечатление богатства и изобилия Зеленый: рост, стабильность, темы финансов, темы окружающей среды.
  • 10. Стажировка-2015 Цвет и эмоции Все оттенки синего универсальны в плане расслабления и безопасности, но светлые тона ассоциируются с дружелюбием, а тёмные — с печалью. Синий: покойствие, безопасность, открытость (более светлые оттенки), надёжность (более тёмные оттенки).
  • 11. Стажировка-2015 Цвет и эмоции Фиолетовый цвет исторически ассоциируется с королевским величием, намекает на роскошь. Пурпурные оттенки отражают щедрость и богатство в целом. Более светлые оттенки, такие как лавандовый (фиолетовый с добавлением розового), навевают мысли о романтике, тогда как тёмные оттенки кажутся более шикарными и таинственными. Фиолетовый: роскошь, романтика (светлые оттенки), мистика и тайна (тёмные оттенки).
  • 12. Стажировка-2015 Цвет и эмоции Для большинства сайтов чёрный используется, чтобы создать ощущение изысканности. От сочетания чёрного и белого в минималистичном дизайне создаётся впечатление элегантности и стиля Черный: власть, изысканность, нервозность.
  • 13. Стажировка-2015 Цвет и эмоции В западной культуре белый цвет ассоциируется с чистотой, добротой и невинностью. Этот цвет часто используют для фона минималистичных и простых сайтов. Белый: чистота, простота, добродетель.
  • 14. Стажировка-2015 Цвет и эмоции Часто используется профессиональными дизайнерами. Всё дело в оттенках: чередуя их, можно получить все эмоции, вызываемые как чёрным цветом, так и белым. Серый — это мощный инструмент в умелых руках. Отличный нейтральный фон для фото. Серый: нейтральность, формальность, меланхолия.
  • 15. Стажировка-2015 Цвет и эмоции Сам по себе бежевый цвет довольно тусклый и невыразительный, но у него есть одно замечательное свойство: бежевый принимает характер цветов, которые его окружают. Поэтому, если он предназначен не для выражения сдержанности, бежевый служит в качестве фона или второго цвета. Бежевый: передаёт характер остальных цветов.
  • 16. Стажировка-2015 Цвет и эмоции Цвет слоновой кости, а также кремовый вызывают практически те же эмоции, что и белый. Однако цвет слоновой кости более тёплый (или менее стерильный), чем белый, что создаёт большее ощущение комфорта, сохраняя при этом минимализм. Можно использовать цвет слоновой кости вместо белого, чтобы смягчить контраст между ним и более тёмными цветами. Цвет слоновой кости: комфорт, элегантность, простота.
  • 17. Стажировка-2015 Инструменты-помощники Adobe Color CC (Kuler) color.adobe.com/ru/create/color-wheel/ 0 to 255 - www.0to255.com Flat UI Color Picker - www.flatuicolorpicker.com Цветовые палитры для Matherial Design www.google.com/design/spec/style/ color.html