Палитра для сайта: мой метод

Приветики! Если кто не знает - меня зовут Рута, я занимаюсь созданием сайтов) Сразу оговорюсь: я не патентую этот способ подбора палитры, и я уверена что кто то еще так делает. Но думаю, что кому то из вас точно пригодится такой метод)

Подбор цветов для сайта это в принципе процесс достаточно долгий. Хорошо, когда у заказчика_цы уже есть фирменные цвета (логотип, например). Но учитывая то, что многие сайты создаются для тех же блогеров, такой подсказки иногда нет. Да и у меня бывали случаи, когда меня просили не использовать цвета логотипа, потому что не нравятся/скоро будут менять/еще какая то причина. Что же делать?

Для начала я определяюсь с основным оттенком. Это будет синий? Желтый? Фиолетовый? Что бы понять, какой цвет нам подходит, я зачастую обращаюсь к анализу ЦА и психологии цвета. В принципе, в большинстве своем цвета имеют одно и то же значение. Например, синий - надежность, зеленый - натуральность, природа, и так далее. Но я очень рекомендую чекнуть культурные особенности страны, для которой делается сайт, что бы случайно не сделать ошибку. Например, синий в большинстве стран передает позитивное значение, а вот в Японии это цвет подлости. Так то)

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

Для этого нужно перейти в раздел HSL. Это аббревиатура трех слов: hue (оттенок), saturation (насыщенность) и lightness (яркость). Мы будем менять значение только последней характеристики. Чем меньше значение - тем темнее, и наоборот. По этому цвет одного кружка мы меняем на темный (значение ставим где то 10-25), а второго на светлый (значение 95). В итоге у нас есть уже 3 основных цвета, идеально подходящие под красивый монохромный сайт.

Соответственно, изначальный цвет (самый яркий) используем для кнопок и ярких элементов, темный используем для текста (или фона в темной теме), а светлый для фона (или текста в темной теме)

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

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

0
23 комментария
Написать комментарий...
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Рута Дизайнер
Автор

Ого сколько! Это метод прям для верстальщиков, я так понимаю? Я когда то пыталась научиться, но ничего не вышло) Но звучит очень круто))

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Рута Дизайнер
Автор

Ооо, спасибо, обязательно чекну!

Ответить
Развернуть ветку
Dmitry

Как только вы говорите про цвета и психологию - дальше можно не читать

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Рута Дизайнер
Автор

Не читайте)

Ответить
Развернуть ветку
Where Areyou

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

Ответить
Развернуть ветку
Рута Дизайнер
Автор

Да, я про это и говорила) Есть культурные устои и ассоциации, нарушать которые нужно очень аккуратно, или вообще не нужно. Все таки люди сначала считывают нонвербальную коммуникацию (жесты, цвета, картинки и тд), а потом уже текст

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Денис Раевский

Пример с цветом (картинка)
Нагляднее получилось бы

Ответить
Развернуть ветку
Рута Дизайнер
Автор

Услышала) Следующие статьи будут с картинками, стей тьюнд))

Ответить
Развернуть ветку
Андрей Кириллов
Дальше обращаемся к нашему софту

Я примерно понимаю, что вы ответите, но всё же этот пассаж остался нераскрыт, так как никакой софт назван не был.

Ответить
Развернуть ветку
Макс Брызгалов

Да хоть в пайнте. Выбор инструмента уже мелочи

Ответить
Развернуть ветку
Рута Дизайнер
Автор

Насколько это принципиально? В принципе 99% софтов предоставляют возможность делать то, что я описываю в статье, по этому я посчитала не сильно важным озвучивать этот момент)

Пы.Сы. Я работаю в фигме и фш

Ответить
Развернуть ветку
Артём Лисин

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

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Артём Лисин

:) Видимо дизлайкают те, кто возиться не хочет))) Патологически боятся что завтра заказчик позвонит и нагрузит таким экспериментом))) 

Ответить
Развернуть ветку
Нина Магомедова

Блин, да! гениально. 
как такое можно было бы организовать технически? 

Ответить
Развернуть ветку
Артём Лисин

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

Ответить
Развернуть ветку
Артём Артёмов

Идея конечно так себе... Для этого есть специальная кнопочка в виде 🌞 на сайте которая позволяет включить темную тему тем, кому это нравится. Не рекомендую делать так, чтобы смена производилась автоматически от времени суток. Людей только отпугнёте )

Ответить
Развернуть ветку
Артём Лисин

А/Б тест :D Чо так из пустого в порожнее лить то)))
Можно даже смену по поло возрастному признаку организовать)
Эксперименты и эксперименты. и конечно нужно не безумно подходить, для начала выстроить гипотезу опираясь на сектор рынка, на образ потребителя, слегка психолога подключить) 
Посетитель это же человек, со всеми своими подкорковыми атрибутами, и чем больше совпадений, даже косвенных, с его ожиданиями тем выше лояльность и значимее триггер для действия)
Можно три варианта оттестировать, в т.ч. с самостоятельной заменой. И поглядим по показателям какой вариант вывозит лучше) 
Можно опросы для начала подключить через Яндекс Взгляд, и даже сформировать на основе его LAL из тех, кто его прошел и на нужные нам вопросики положительно ответил.

ММММ как я кайфую от таких алгоритмов с анализом статистики Хдддд

Сайт это частичка нашего мозга, нашего восприятия. Как нам реакцию изучить  и отточить таргетинг кроме как А/Б тесты, и анализ таргетинга_)

Ответить
Развернуть ветку
Where Areyou

Блин )) а я так всегда цвета и подбираю!
Когда есть ещё люди с таким методом, это вселяет больше уверенности даже :)

Ответить
Развернуть ветку
20 комментариев
Раскрывать всегда