Дизайн
Рута Дизайнер

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

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

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

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

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

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

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

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

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

{ "author_name": "Рута Дизайнер", "author_type": "self", "tags": [], "comments": 23, "likes": 21, "favorites": 74, "is_advertisement": false, "subsite_label": "design", "id": 199871, "is_wide": false, "is_ugc": true, "date": "Sat, 30 Jan 2021 14:19:56 +0300", "is_special": false }
0
23 комментария
Популярные
По порядку
Написать комментарий...
10

Я делаю так:
1. Узнаю, какой CSS фреймворк будет использоваться фронтендерами. Допустим, бутстрап.
2. Скачиваю соус фреймворка и создаю локальный бутстрап-сайт с scss-файлом
3. Создаю файлы _var.scss и bootstrap-theme.scss. В последнем пишу две строчки импорта файла _var.scss и bootstrap/bootstrap.scss. Система генерирует полноценный css-шаблон темы для бутстрапа.
4. Ну, а затем начинаю вписывать свои переменные в файл _var.scss. Основной цвет обычно приходит в брендбуке. Акцентный цвет беру из банального трилистника или четырехлистника. Цвета семантики беру либо из потолка, либо подсматриваю у коллег, либо иду на какой-нибудь eve.design и беру оттуда. Научная точность тут не важна, ибо потом можно все поменять. Тут важнее, чтобы все было гуд с точки зрения читабельности (ААА, АА или АА+).
5. Вписываю также 9 оттенков нейтрального от светлого до темного. Опираюсь на цвет основного текста, а ступеньки генерятся любым генератором. Желательно, чтобы Grey-600 или Grey-700 были читабельны, ибо они будут для приглушенного текста. Семантическими цветами переписываю переменные дефолтных цветов бутстрапа. Типа, красный будет не #ff0000, а #d40000. Это отразится, например, на том, как будут выглядеть семантические цвета (ошибка, успех, предупреждение и инфо), заложенные в бутстрапе.
6. Тестирую в html получившиеся цвета. Вписываю разные бутстраповские компоненты и смотрю, как они выглядят вживую. Исправляю переменные, если что где плохо читается и тд. Самый долгий шаг, но в браузере все выглядит иначе. Даже сглаживание текста.
7. При передаче клиенту дизайна отдаю его верстальщикам тот самый _var.scss, чтобы не парились.

Процесс кажется сложным и долгим, но на деле это «один раз сделал и использую всегда». Также он дает ряд преимуществ, способных сэкономить время.
- Можно не рисовать состояния кнопок (наведение, фокус, выкл/откл), а взять те, что выдает такой шаблонизатор. Их же можно поменять и в самих переменных. Ну, и интерактивные элементы лучше рисовать в браузере, если честно.
- То же самое с элементами форм. Реально не люблю рисовать валидацию форм, например. А тут все готовое. При желании можно пройтись пипеткой и вытащить дизайн уже из браузера в условную фигму.
- Переписывание переменных касается не только шрифтов, но практически абсолютно всего, например, закругления углов и тд. Можно сделать так, что дизайн на бутстрапе будет выглядеть не как дизайн на бутстрапе.
- Размеры заголовков, мелкого текста, закругления, отступы и прочие вещи также генерируются препроцессором и там же редактируются при необходимости. Семантические цвета для текста, рамки и прочие вещи тоже отсюда. А таблицы можно вставлять принтскрином в фигму для демонстрации.
Из-за всего этого часто мой дизайн наполовину нарисован в браузере и уже оттуда кочует в фигму при необходимости демонстрировать в джипеге.

Капец я тут исписался. А вроде простой процесс.

Ответить
1

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

Ответить
0

Если будет время, стоит поиграться в codepen. Там же можно слепить себе генератор цвета, который будет математически высчитывать нужные оттенки и прочие вещи. Один раз сделал и сохранил на будущее. Не панацея на все случаи жизни, но подходит процентам 70 проектов.

Ответить
0

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

Ответить
6

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

Ответить
6

Так будет продолжаться, пока маркетологи ищут истинный смысл существования своего отдела.

Ответить
1

Не читайте)

Ответить
0

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

Ответить
0

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

Ответить
3

Теперь размышляю, почему японские «Панасоник» или «Субару» — подлые.

Ответить
2

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

Ответить
0

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

Ответить
1

Дальше обращаемся к нашему софту

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

Ответить
0

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

Ответить
0

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

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

Ответить
–3

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

Ответить
1

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

Ответить
1

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

Ответить
0

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

Ответить
1

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

Ответить
0

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

Ответить
1

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

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

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

Ответить
0

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

Ответить

Комментарии

null