Учитывая цветовую схему, как мне применить дизайн сайта?

Просто есть что-то конкретное для обсуждения, скажем, у меня есть такая цветовая схема:

Источник

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

Существуют ли практические правила или общие рекомендации, которые помогают определить, какие цвета и куда идут?

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

Итак, первыми цветами, которые мне нравится выбирать при создании цветовой схемы в веб-проекте, являются фон для основного текста и основной цвет текста. Обычно хорошей идеей является выбор двух наиболее контрастных цветов для заполнения этих ролей, и ваша примерная палитра не является исключением, поэтому в этом случае цвета # DEE1DD и # 28363D. Теперь мы должны решить, что использовать для текста, а какой - для фона, и в большинстве случаев я стараюсь использовать более светлый цвет для фона и темнее для текста. Было проведено значительное исследование, которое показало, что мы читаем темный цвет на светлом цвете легче, чем светлый цвет на темном, так что это то, к чему я обычно по умолчанию отношусь, если нет причины для более темного вида (как, например, вы делаете сайт для тяжелого металла группа или что-то ... Я предполагаю, что это не тот случай). Так,

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

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

Наконец, в заключение я расскажу о несущественных элементах дизайна, таких как состояния при наведении, и у нас осталось несколько разных цветов. Опять же, это, вероятно, должно достаточно контрастировать с фоном, так как ссылки не исчезают при наведении на них, поэтому, если вы склонны идти с # 658B6F ...

И ... Вуаля! Теперь у вас есть (базовая) 4 цветовая схема. Я надеюсь, что этот процесс поможет вам так же, как и мне :)!

Сайт, на который вы ссылаетесь, показывает, как использовать эти цвета:

#28363D for the active state 
#2F575D as the navigation background 
#DEE1DD as background 
#C4CDC1 as banner ...

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

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

Надеюсь, это поможет

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

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

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

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

Откуда ты знаешь, хорошо это или нет? Легко, как только вы говорите: «Это хорошо», тогда это хорошо. Это всегда помогает получить второе мнение от других людей.

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

@Color Combination: комбинация, предоставленная веб-сайтом, достаточно хороша для начала.

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

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