Цвета для фона: #BADA55-цвета для веб-дизайна / Хабр

14.01.2023 alexxlab

Содержание

Почему вы не должны использовать яркие и насыщенные цвета для фона сайта | by dui | Дизайн-кабак

Перевод подготовлен для сообщества dui. Источник uxmovement

Вы используете цвет в вашем интерфейсе, который напрягает глаза пользователя?

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

На какую колонку вы можете смотреть дольше?

Пример. Посмотрите внимательно на цвета в изображении сверху.

Левый столбец содержит цвета с максимальной яркостью и насыщенностью. Правый столбец содержит цвета с яркостью и насыщенностью равной 80%.

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

Яркость (Brightness) и насыщенность (Saturation) это разные цветовые свойства. Первое свойство означает, как много белого или чёрного смешивается с цветом. Второе свойство — какое количество серого содержится в цвете.

Увеличивая яркость — вы не снижаете насыщенность. Когда вы понижаете насыщенность, вы смешиваете цвет с оттенком серого. Когда вы повышаете яркость, то вы делаете цвет светлее, но не делаете его серым. Источник.

Сверху. Увеличение яркости — больше белого
Снизу. Уменьшение насыщенности — больше серого.

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

Два других исследования — «Возбуждающий эффект цветовой насыщенности» и «Цвет и эмоции» показали, что насыщенные цвета связаны с наибольшим возбуждением. Оттенки (Hue), так же влияют на возбуждение, но насыщенность и яркость оказывают наибольшее влияние.

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

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

Слева. Фон яркий и насыщенный. Поэтому всё внимание к фону, а не к кнопке.
Справа. Кнопка использует яркий и насыщенный цвет. Она привлекает внимание пользователя

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

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

Слева.

Неприятно для глаз. Фон яркий и насыщенный. Максимальная яркость и насыщенность на изображении слева. Справа. Приятно для глаз. Фон тёмный и менее насыщенный. Яркость и насыщенность ниже

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

Сначала выберете основной оттенок и установите на нём максимальную яркость и насыщенность. Значение оттенка сохраняется и служит контрольной точкой для регулирования яркости и насыщенности.

Saturation — насыщенность.
Hue — оттенок
Brightness — яркость

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

Уменьшите уровень яркости у двух созданных образцов цвета. И уменьшите насыщенность у двух других образцов. При регулировании цвета используйте шаг кратный десяти.

Поместите насыщенные образцы цвета слева от изначального оттенка с яркость и насыщенностью равной 100%. Справа разместите образцы цвета с минимальной и максимальной яркостью.

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

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

В итоге, ни один из цветов второго ряда не имеет 100% насыщенности и яркости. Значит эти цвета наиболее подходящие для использования в работе.

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

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

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

Слева — плохой зелёный (Panic / Prismic). Справа — хороший зелёный (FreshDesk / Sigstr)

Слева — Плохой красный Telepath / Meat. Справа — Хороший красный AppFigures / Jackie

Слева — плохой синий (Compose / DareIt). Справа — хороший синий (Republic / MailTag).

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

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

Подписывайтесь на телеграм канал проекта или сообщество в VK и Facebook.

Автор проекта Андрей Астракт

Цвет фона и текста в презентации

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

Это черный текст
на белом фоне

Это белый текст
на черном фоне

Выбор зависит от того, на чем вы показываете презентацию.

Если презентация идет на ЖК-экране, то можно выбрать любой вариант: хоть черное на белом, хоть белое на черном. Как хотите. Разница — только в ваших вкусовых предпочтениях.

Если презентация идет на проекторе, LED-экране или вы выступаете в 1980-х годах у монитора с электронно-лучевой трубкой, то всегда выбирайте белый текст на черном фоне.

Для проектора всегда выбирайте
белый текст на черном фоне.

Что это дает:

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

Меньше шансов, что спикера засветит белым фоном его презентации.

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

Что будет, если делать на проекторе черный текст и белый фон:

Камерам тяжело найти нужный баланс освещенности, потому что перед ними ОГРОМНОЕ СВЕТЯЩЕЕСЯ ПЯТНО

Экран выглядит ярче и интереснее, чем спикер

Мелкий текст будет очень трудно прочитать

Вот пример, когда камера ничего не понимает:

Веду курс в бюро когда-то давно

Вот как бы это выглядело, если бы я светил белым текстом. Даже с учетом размытия и многократных отражений света, текст все еще был бы читаемым:

На следующей фотографии текст видно еле-еле, потому что белый свет экрана заливает всё:

Веду занятие в «КСК-груп»

А вот как бы это выглядело, выбери я белый текст на черном фоне:

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

Веду курс о редактуре в бюро

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

Читаю лекцию в НИУ ВШЭ

Судя по слайду, Илья Бирман рассказывает о понимании задачи. Бирмана ничто не побеждает

Исключение

Единственный случай, когда стоит выбрать для проектора белый фон и черный текст — если в проекторе подыхает лампа. Тогда его общая яркость будет слишком низкой, чтобы нормально прорисовать ваш белый текст, и все будет тусклым:

Выступаю на «Дизайн-просмотре»: проектор еле тянет даже большие белые области

Если вы знаете, что вам на выступлении достанется полудохлый проектор, используйте белый фон. А лучше — доску или флипчарт с жирным таким маркером.

Общие рекомендации

Что еще запомнить о подготовке презентации под проектор:

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

Фигурные плашки, рамки и прочее брендирование — в топку. Особенно модные растяжки сверху и снизу слайда. Это визуальный шум, который отъедает полезное пространство слайда.

Пишите просто и коротко. Читать с экрана — боль.

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

Избегайте сжатых и тонких шрифтов. Сжатые сожмутся, а тонкие затеряются.

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

Презентация для печати

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

Если, например, вы выступаете на конференции, а потом ваши презентации включают в какую-то печатную брошюру, то делайте две версии презентации:

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

Вторая для печати: черное на белом, подробное изложение ваших мыслей.

Загрузить HD-фоны на Unsplash

Более 900 цветных фоновых изображений: Скачать HD-фоны на Unsplash

Исследуйте › Фоны › Цвета

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

Цветные картинки HdФоны животныхФоны приложенийПрикольные фоныФоны телефона

Скачать бесплатно цветные фоновые изображения

–––– –––– –––– – –––– – –––– –– ––– –––– – – –– ––– –– –––– – –.

казахстанСветлые фоныдлинная выдержка

Hd обои осеньфиладельфиявисахикон вэлли парк

Еда фотоЗдоровье фотокрасочные

Hd синие обоиHd цветные обоиминимальные

Hq фон фотоВечеринка фоныПразднование фото

CanadaQcmontreal

HD Pattern Wallpapersmass Moca Waynorth Adams

Rainbow Images & Picturespridegay Pride

Flower Imagesspring Изображения и PicturesKraine

Music Images и PicturesCertfestival

Greatient Foinalshd. Greenshad. –––– –––– –––– – –––– – –––– –– – –– –––– – – –– ––– –– –––– – –.

HD Neon Wallpaperslove Imageslove Symbol

Nyqueensburyusa

Plantdetailphotoshoped

Фоны текстуры. обоиHd art wallpapersglow

–––– –––– –––– – –––– – –––– –– – –– –––– – – –– ––– –– –––– – –.

Kazakhstanlight Foanleslongexposture

Nyqueensburyusa

Plantdetailphotoshoped

HD Blue Wallpapershd Colorpapersmal и изображения

Picture -Picture -Picture -Picture -Picture -Picture -Picture -Picture -Picture -Picture -Picture -Picture -Picture -Picture -Clemesspar -ClateSpar -ClateSpar -ClateSpar -ClateSpar -ClateSpar -ClateSpar -ClateSparsl и изображение. фото

Hd неон фоткиЛюбовь фотографиисимвол любви

Food Images & PictureShealth Images. обои

канадаqcmontreal

Rainbow images & picturespridegay pride

Fruits images & picturesHd red wallpapersobject

Hd wallpapersHd art wallpapersglow

Sasha Kaunas

kazakhstanLight backgroundslongexposure

Jason Leung

Hd neon wallpapersLove imageslove symbol

–––– –––– – ––– – –––– – –––– –– – –– –––– – – –– ––– –– –––– – –.

Салли Михальски0002 Jesse Gardner

nyqueensburyusa

Nathalia Segato

plantdetailphotoshoped

Edgar Castrejon

Food images & picturesHealth imagescolorful

Pawel Czerwinski

Texture backgroundsHd abstract wallpapersHd pastel wallpapers

davisuko

Hd blue wallpapersHd color wallpapersminimal

Jason Leung

Hq фон фотоВечеринка фоныПразднование фото

Angel Ceballos

canadaqcmontreal

Lionel Gustave

Summer images & picturesHd pink wallpapersMexico pictures & images

Clark Van Der Beken

Hd pattern wallpapersmass moca waynorth adams

zero take

Leaf backgroundsTree images & picturesbench

Alexander Grey

Rainbow images & imagespridegay Pride

Иоанн-Марк Кузнецов

Цветок фотоВесна images & imagesukraine

Mae Mu

Fruits images & picturesHd red wallpapersobject

Aditya Chinchure

Music images & picturesconcertfestival

Gradienta

Gradient backgroundsHd green wallpapersGradient backgrounds

Gradienta

Hd wallpapersHd art wallpapersglow

Simon Berger

Mountain images & фотографииПейзаж изображения и изображенияПрирода изображения

Просматривайте премиум-изображения на iStock | Скидка 20% на iStock

Unsplash

Красивые бесплатные изображения, подаренные самым щедрым сообществом фотографов в мире. Лучше, чем любые бесплатные или стоковые фотографии.

About
Blog
Community
Join the team
Developers/API
Press
Help Center

Product

Explore
Unsplash Awards
Unsplash for Education
Unsplash for iOS
Приложения и плагины

Wallpapers

HD обои
4k обои
iPhone обои
классные обои
милые обои
Live Wallpapers
PC Wallpapers
Black Wallpapers
iPad Wallpapers
Desktop Wallpapers

Privacy Policy
Terms
Security

Twitter logo in the shape of a birdUnsplash Twitter
Facebook logo in форма FUnsplash Facebook
Логотип Instagram в форме квадратной камерыUnsplash Instagram

1000+ Цветные фоновые картинки | Скачать бесплатные изображения на Unsplash

1000+ цветных фоновых рисунков | Скачать бесплатные изображения на Unsplash

A Photophotos 10K
А.
Цвет фонатерракотаjar
Hd синие картинкиФоны для рабочего столатемно-синие
Текстуры фонаHq фон фотоHd белые обои
minimalisticceramic vaseFood images & pictures
Gradient backgroundsHd color wallpapersZoom backgrounds
Hd pattern wallpapersHd teal wallpapersbright
Hd color wallpapersPaper backgroundsHd design wallpapers
Hd wallpapersminimalismminimal
londonHd 3d wallpapersrender
Nature imagesLandscape images & picturesHd pink wallpapers
Sunset images & imagesoutdoorssunrise
–––– –––– –––– – –––– – –––– –– – –– –––– – – –– ––– –– –––– – –.
Hd wallpapersHd green wallpapersHd hipster wallpapers
Hd abstract wallpapersHd art wallpaperspaint
Hq background imagesGradient backgroundsHd red wallpapers
Hd sky wallpapersSpace images & picturesCloud pictures & images
Hd orange wallpaperscoloursfaded
copyspaceceramiclamp
Hd purple wallpapersGradient backgroundsbackround
Hd обои на рабочий столградиент цветарастение
portugallisbonarchitecture
Связанные коллекции
9 Одноцветный фон 641 Фотографии · Куратор Сара Боуман
Цветовой фон
95 Фото Hq фон фотографииГрадиентные фоныHd красные обои
HD узоры картинкиHD бирюзовые обоияркие
HD цветные картинкиБумажные фоныHd дизайн обои
londonHd 3d wallpapersrender
portugallisbonarchitecture
Hd wallpapersHd green wallpapersHd hipster wallpapers
minimalisticceramic vaseFood images & pictures
Gradient backgroundsHd color wallpapersZoom backgrounds
Hd orange wallpaperscoloursfaded
copyspaceceramiclamp
Nature imagesLandscape images & picturesHd pink wallpapers
– ––– –––– –––– – –––– – –––– –– – –– –––– – – –– ––– –– –––– – –.