Аудит от независимых экспертов

поможет сделать ваш сайт понятным для всех


 

 
 
 

Сочетание цвета фона и шрифта

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


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


Теперь немного теории о сочетаниях цветов фона и шрифта.

Белый — открытость и нейтральность 
Это фон черного или синего шрифта в тетрадке, а так же цвет шрифта на черном фоне доски в классе, заложенный нам еще с детства. Белый шрифт по контрастности хорошо сочетается с красным, зеленым, синим и черным фоном, а белый фон с такими же цветами шрифтов. Влияние белого шрифта на пользователя при различных цветах фона:
  • красный фон — привлечение внимания к информации;
  • черный фон — усиление внимания к информации второстепенного плана и заключения;
  • зеленый фон — мягкое информирование о проблемах;
  • синий фон — убедительное формирование сути информации.

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

Желтый — общительность, коммуникабельность и открытость
Это цвет уравновешенности и внутренней гармонии, он хорошо запоминается и воспринимается жизнерадостными активными людьми. Цвет активизирует развитие, и деятельность мысли, не зря одно из направлений подачи информации назвали «желтой прессой», так как она дает длительное обсуждение её информации. Желтый цвет шрифта по контрастности хорошо сочетается с черным, синим, зеленым и красным фоном, а фон с черным, синим, зеленым и красным цветами шрифта. Влияние желтого шрифта на пользователя при различных цветах фона:
  • черный фон — третьестепенная информация и заключение;
  • зеленый фон — мягкая информация о небольших возможных проблемах;
  • синий фон — убедительное формирование подробной сути деловой информации.

Зеленый — снятие нервного напряжения и остроты переживания 
Это цвет успокоения, уменьшения болевых ощущений и усталости, формирования уравновешенности. Ассоциации вызываемые цветом это свежесть и естественность. Зеленый шрифт по контрастности хорошо сочетается с желтым и белым фоном, а фон с желтым и белым шрифтом. Влияние зеленого шрифта на пользователя при различных цветах фонах:
  • белый фон — привлечение внимания к приятной информации;
  • желтый фон — отображение неприятной информации;
  • синий фон — запоминание сути деловой информации.

Коричневый — стабильность, реалистичное настроение 
Это цвет самодостаточных людей. Коричневый шрифт хорошо сочетается с голубым, желтым и белым цветом, а фон с желтым и белым цветом шрифта. Влияние коричневого шрифта на пользователя при различных цветах фона:
  • белый фон — усиливает атрибуты информации;
  • желтый фон — укрепляет гарантированный результат в сознании пользователя;
  • голубой фон — укрепляет сплоченность пользователей в коллективе.

Красный — напряженность, внимание, действие 
Это цвет притягивающий внимание. Красный шрифт хорошо сочетается с черным, голубым, желтым и белым цветом фона, а красный фон с черным, белым и желтым цветом шрифта. Влияние красного шрифта на пользователя при различных цветах фона:
  • белый фон — выделение важной информации;
  • черный фон — скука;
  • желтый фон — объединение пользователей;
  • голубой фон — стремление новых пользователей к объединению.

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

Автор: Sherlock

 
Голосов: 4
Баллы рейтинга: 16

Надежда пишет:
25.07.2011 12:30
честно говоря не увидела в ней смысла при плохой картинке
moneymany пишет:
27.07.2011 21:46
Что рейт набиваешь
Надежда пишет:
28.07.2011 15:01
Какя потрясающая догадка! долго думали? даже если и так, мои посты хотя бы по делу, а не как у вас
В следующий раз постараюсбь во избежание таких глупых намеков высказывать мысль всю целиком и полностью в одном посте, а не спешить с отправкой сообщений
Надежда пишет:
25.07.2011 12:33
вот тут более понятней что-ли http://sitepolice.ru/blog/usability/21024/
Надежда пишет:
25.07.2011 12:35
красный шрифт плохо читабелен на голубом и черном фоне, белый н асинем тоже
Надежда пишет:
25.07.2011 12:38
ничего не написано о частом использование белого шрифта на сером фоне...Вообще статья инетересная, но не доработанная, спасибо
CON пишет:
25.07.2011 22:51
Зачем много комментариев , что в одном нельзя было написать
Lavinia пишет:
25.07.2011 23:56
Такая у нее привычка :)
Надежда пишет:
26.07.2011 08:55
сразу все незказала, отправила, потом еще мысль появилась, отправила, потом еще, в общем спешу прсото
Елена Решедько пишет:
26.07.2011 09:25
Да ты просто рейтинг набиваешь, нечего отмазываться!
Надежда пишет:
26.07.2011 10:36
Клянусь, НЕТ!!! :)))
Елена Решедько пишет:
26.07.2011 11:25
Не отмазывайся, говорю, не в военкомате!
Надежда пишет:
26.07.2011 11:27
КЛЯЯЯНУСЬ!!!! (упала на колени со слезами на глазах)
Sherlock пишет:
26.07.2011 11:48
хорош мозоли натирать на коленях, прогорела, так сознайся )))
Феликс пишет:
26.07.2011 01:06
http://sitepolice.ru/blog/usability/21024/ и эта статья дополняют друг друга
chelovek пишет:
05.11.2011 09:08
Да очень полезная статья, когда делать аудит дизайна.
Sherlock пишет:
25.07.2011 15:41
Спасибо за комментарии. Согласен, картинка не очень получилась, всему виной скрин с Ворда. Может её уменьшить в размерах, тогда она четче будет.
CON пишет:
25.07.2011 22:57
Все нормально получилось.Это просто показывает какие цвета лучше использовать
Елена Решедько пишет:
26.07.2011 08:29
Нужно просто табличку в хтмл-кодах прописать: тесктовое представление текста(пардон за тавтологию) всегда воспринимается лучше графического.
CON пишет:
25.07.2011 22:48
Я понял это интересно. Длятех кто делает сайт или делает анализ дизайна. Чтоб сайт лучше смотрелся
Sherlock пишет:
25.07.2011 23:19
у вас не меньше комментариев ))))
Елена Решедько пишет:
26.07.2011 08:34
Шерлок, статья более чем странная и в смысле сочетаемости цветов, и в смысле психологии.

Вот например красный текст на желтом фоне  - это не объединение пользователей, а, простите, полный п..ц: тревожное сочетание цветов, к тому же текст будет плохо читаться.
Надежда пишет:
26.07.2011 08:57
если смешать инфантильность и агрессию, то получиться...хм...истеричка?
Елена Решедько пишет:
26.07.2011 09:25
Предпочитаю менее культурное и более емкое слово))
moneymany пишет:
27.07.2011 21:57
Я тоже
Sherlock пишет:
26.07.2011 09:26
Спасибо. Статья сделана на основе рекомендаций для руководителей по доведению информации до подчиненных )))
Елена Решедько пишет:
26.07.2011 09:31
Не за что. Авторов исходника пристукнуть мало.
Sherlock пишет:
26.07.2011 09:35
Автор неизвестен, может быть.
Надежда пишет:
26.07.2011 10:39
автор Шерлок :))) честно мне показалось, что вы сами смотрели и сравнивали где лучше видны надпсиси, не учитывая производимое реальное впечатление ими
Sherlock пишет:
26.07.2011 10:43
табличка моя, а влияние не мое, точнее мое но на основе мозга другого человека.
Елена Решедько пишет:
26.07.2011 11:20
Если все начнут писать на основе мозга другого человека, ничего хорошего из этого не выйдет))
enyt пишет:
26.07.2011 10:47
картинка не ахти, мутновато все и не четко...
moneymany пишет:
27.07.2011 22:10
Да , но показывает нам информацию хорошую
chelovek пишет:
05.11.2011 09:09
Зато хорошо раскрыта суть.