Штирлиц — Сеть печатных салонов в Перми

Весь комплекс печатных услуг в Перми. Общирная сеть печатных салонов в Перми. Цифровая печать, цветное и черно-белое копирование документов, сканирование документов, ризография в Перми

Цвет фона для сайта: Как подобрать лучшие цвета для сайта

Содержание

Как подобрать лучшие цвета для сайта

25 мая 2014      Интернет-маркетинг, Контент, Полезные советы, Продвижение сайтов

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

Выберите лучшие цвета для сайта, и ваши посылы обретут силу и ясность.

Вот основные значения в психологии цвета.

 

Первичные цвета:

  • красный – привлекает внимание;
  • желтый – несет бодрость и веселье, надежду и оптимизм;
  • синий – цвет честности и надежности.

Вторичные:

  • оранжевый – достижения, энергия, азарт, успех;
  • зеленый – отражает природу и чистоту, свежесть и здоровье;
  • фиолетовый – подчеркивает индивидуальность, творчество и изобретательность.

Третичные:

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

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

  • Используйте 2-3 цвета в оформлении сайта, не больше. Для усиления можно использовать оттенки основных цветов.

  • Белый фон обеспечит читаемость большинства цветов текста, кроме желтого и пастельного. Классика жанра – темный шрифт на белом фоне. Избыток ярких, бьющих по глазам, шрифтов не идет на пользу вашему сайту.
  • Темный фон тоже хорошо работает, если цвет текста очень яркий или белый.
    Однако чтение большого объема мелкого текста на темном фоне затруднено. Нежелательно делать черный и другие темные цвета основным фоном сайта. Но можно использовать для отдельных элементов, например, кнопок меню.
  • Используйте контрастные цвета для кнопок, ссылок, мотиваторов. Красный цвет текста призывает к действиям и направляет. Зеленый помогает принять решение. Синий считается самым безопасным цветом, вызывает доверие.

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

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

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

Детям нравятся более яркие и простые цвета, чем взрослым, подростки выбирают черный или сложные цвета. Мужчины предпочитают синий, а женщины – красный, желтый, оранжевый. Хорошо образованные люди любят третичные цвета с необычными названиями.

Люди в тропических странах выбирают яркие и теплые цвета. Те, кто живет в странах с  более холодным климатом – холодные.

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

  • Красный – цвет удачи и празднования в Китае, но цвет траура в Южной Африке.
  • Желтый – священный и благоприятный в Китае и Индии, однако цвет траура в Египте.
  • Зеленый связан с богатством и престижем в Саудовской Аравии, но традиционно запрещен в Индонезии.
  • Голубой во всем мире считается цветом для новорожденных мальчиков, розовый – для девочек, а в Бельгии наоборот.

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

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

/Автор статьи: Юлия Мураева/

В соцсети нас уже больше 20 тыс. Присоединяйтесь, чтобы получать советы по развитию бизнеса и полезные ссылки

* В случае упоминания в тексте социальных сетей Facebook, Instagram, уведомляем: деятельность компании Meta (Facebook, Instagram) признана экстремистской и на территории РФ запрещена.

Почему вы не должны использовать яркие и насыщенные цвета для фона сайта — Дизайн на vc.ru

Перевод подготовлен для сообщества Dui.

7036 просмотров

Источник uxmovement.

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

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

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

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

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

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

Яркость против насыщенности

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

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

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

Влияние цвета на внимание и возбуждение

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

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

Используйте яркие и насыщенные цвета в кнопках

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

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

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

Используйте тёмный и менее насыщенный цвет для фона

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

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

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

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

Поиски оптимального цвета фона

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

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

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

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

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

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

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

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

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

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

Примеры хорошего и плохого цвета для использования в фоне сайта

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

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

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

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

Эстетика и юзабилити

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

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

Лучшие цвета для веб-сайтов

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

Улучшите внешний вид вашего сайта с помощью этого руководства.

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

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

Лучшие цвета фона

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

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

Цвет фона веб-сайта задает тон всему сайту. Макет через nelelena. Изображение через PureSolution.

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

Белый фон

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

Выбор белого фона позволяет зрителям сосредоточиться на визуальных эффектах и ​​сообщениях. Макет через nelelena. Изображение через Photographee.eu.

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

Черный фон

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

Выбор черного фона добавит драматизма и яркости любой странице или заголовку. Макет через nelelena. Фон через Таню Збродко.

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

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

Фирменные цветные фоны

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

Фирменные цвета могут стать отличным источником вдохновения для фона вашего веб-сайта. Макет через nelelena. Изображение предоставлено Алимом Якубовым.

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

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

Лучшие цвета кнопок

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

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

Используйте насыщенные или контрастные оттенки для призыва к действию. Макет через nelelena. Изображение предоставлено Darko, 1981.

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

Лучшие цвета текста

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

Сделайте текст разборчивым за счет контраста его цвета с фоном.

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

Лучшая цена Цвета

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

При оформлении сайта всегда обращайте внимание на цвет цены. Макет через nelelena. Изображение через ImYanis.

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

Цвета, которых следует избегать

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

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

Цвета, которых следует избегать для фона

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

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

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

Яркий, насыщенный фон часто затмевает смысл веб-сайта. Макет через nelelena. Изображение через Allies Interactive.

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

Цвета, которых следует избегать для кнопок

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

Выбор светлого цвета для кнопок может затруднить их обнаружение. Макет через nelelena. Изображение через My Ocean Production.

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

Цвета, которых следует избегать для текста

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

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

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

Цвета, которых следует избегать при определении цен

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

Выбор цвета цены, похожего на фон, может затруднить чтение. Макет через nelelena. Изображение через Kom_Pornnarong.

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

Обложка через Pure Solution.

Ищете другие способы сделать свой веб-сайт заметным? Ознакомьтесь со следующими статьями:

  • 30 идей освежающей цветовой палитры для вашего веб-сайта
  • Черный фон на веб-сайтах: как сделать это правильно
  • Лучшие шрифты и сочетания шрифтов для веб-сайтов и интернет-магазинов
  • Как создать веб-сайт: 10 золотых правил для начинающих
  • Простые советы по дизайну макета веб-сайта, которым может следовать каждый

Бизнес Дизайн Ресурсы для дизайна Маркетинг малый и средний бизнес Советы и руководства

классных веб-сайтов с розовой цветовой палитрой (51 пример)