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

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

Итак, первые цвета, которые я люблю выбирать при создании цветовой схемы в веб-проекте, — это фон для основного текста и основной цвет текста. Обычно хорошей идеей является выбор двух наиболее контрастных цветов для выполнения этих ролей, и ваша примерная палитра не является исключением, поэтому в данном случае это цвета #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: комбинация, представленная на веб-сайте, достаточно хороша для начала.

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

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