Выбор цветовой схемы для сайта
1
Цветовые схемы. Начало
В качестве вступления. Каждый цвет имеет свой код. Скажем, чёрный - это #000000, а белый - #ffffff. Красный: #ff0000, синий: #0006ff.
Когда вы выбираете цвет в Базиуме, вы водите по цветовой палитре, а код цвета будет написан под ней
Или вы можете открыть фотошоп, открыть там макет какого-то сайта (я обычно делаю принтскрин понравившегося мне сайта и вставляю его в фотошоп) и посмотреть, какие там используются цвета
Совокупность цветов, которые будем использовать на сайте, называется цветовая схема.
Когда вы выбираете цвет в Базиуме, вы водите по цветовой палитре, а код цвета будет написан под ней
Или вы можете открыть фотошоп, открыть там макет какого-то сайта (я обычно делаю принтскрин понравившегося мне сайта и вставляю его в фотошоп) и посмотреть, какие там используются цвета
Совокупность цветов, которые будем использовать на сайте, называется цветовая схема.
После перехода на новую систему прежние шапка и подвал будут удалены
2
Готовые цветовые схемы
Я пробовал использовать сайты типа https://colorscheme.ru, которые помогают создать цветовую схему для сайта. Выбираешь один цвет, а сайты предлагают дополняющие цвета. Вот как-то так
Каждый раз, решая что-то с цветами, я шёл к артдиректору или дизайнеру и просил помощи. Я понимал, что делаю что-то не то (ибо уровень насмотренности хорошим дизайном у меня высокий), но сделать правильно мне помогал тот, кто разбирается.
Я в целом наблюдаю проблему с подбором цветов. То есть не только я такой недогоняющий. При этом кто-то может гармонично подобрать цвета в одежде, но когда начинает делать тоже самое в цифровой среде, то ничего не получается.
Итак, каково будет решение? Оно будет в том, чтобы использовать готовые цветовые схемы!
Пабам! Нам нужно делать качественные сайты и интернет-магазины? Прекрасно, берём готовые цветовые решения. А потом, если станем в этом разбираться и будем чувствовать разницу между близкими оттенками, то сможем и сами эти цветовые решения составлять.
И да, в цветах тоже есть тренды. Где их можно увидеть?
https://www.awwwards.com
https://httpster.net/
https://www.behance.net/search...
Гуглим "color trends web design": https://www.google.com/search?...
Я в целом наблюдаю проблему с подбором цветов. То есть не только я такой недогоняющий. При этом кто-то может гармонично подобрать цвета в одежде, но когда начинает делать тоже самое в цифровой среде, то ничего не получается.
Итак, каково будет решение? Оно будет в том, чтобы использовать готовые цветовые схемы!
Пабам! Нам нужно делать качественные сайты и интернет-магазины? Прекрасно, берём готовые цветовые решения. А потом, если станем в этом разбираться и будем чувствовать разницу между близкими оттенками, то сможем и сами эти цветовые решения составлять.
И да, в цветах тоже есть тренды. Где их можно увидеть?
https://www.awwwards.com
https://httpster.net/
https://www.behance.net/search...
Гуглим "color trends web design": https://www.google.com/search?...
3
Где брать готовые схемы?
Во-первых, можно исходить из какой-то существующей графики. И тут я говорю не о том, чтобы взять фотографию с любимым пёсиком/котиком/черепашкой и ориентироваться на цвета от туда, а про то, чтобы выбрать какой-то набор иконок, иллюстраций для сайта и ориентироваться на него. Вот пример набора: https://craftwork.design/downl... и прямо там примеры дизайна сайтов в рамках данных цветов:
Во-вторых, можно использовать готовые цветовых схемы от Базиума: https://bazium.ru/blog/tsvetov.... Когда мне сделали логотип интернет-магазина Zog (заказывал в Go designer, вот карточка заказа: https://godesigner.ru/pitches/...), то мне очень понравилось цветовое решение, предложение дизайнером, что я заказал сделать вот эту подборку цветов.
В-третьих, можно брать цветовые схемы на других сайтах: смотреть трендовые сайты, находить то, что подходит и брать от туда цвета.
В-третьих, можно брать цветовые схемы на других сайтах: смотреть трендовые сайты, находить то, что подходит и брать от туда цвета.
4
Пример подбора цветового решения
Сайт можно сделать чёрно-белым, а цвет использовать только в фотографиях и иллюстрациях. Или цветными могут быть только кнопки.
На том сайте, что я делаю параллельно с курсом, я решил использовать яркие цвета, чтобы мне было посложнее. И решил использовать вот этот сайт в качестве источника цветового решения:
На том сайте, что я делаю параллельно с курсом, я решил использовать яркие цвета, чтобы мне было посложнее. И решил использовать вот этот сайт в качестве источника цветового решения:
5
Пример сайта с подбором цветов из цветовых схем
На сайте много цветов. Такое большое количество я не осилю использовать, ибо моих способностей не хватит, чтобы сделать годноту, а не винегрет. Поэтому я беру:
#f8e1ce в качестве основного цвета фона
#f1ba4e в качестве дополнительного цвета фона, чтобы выделять некоторые блоки
#e24e44 данным цветов будут кнопки и какие-то плашки
И вот что у меня получилось:
#f8e1ce в качестве основного цвета фона
#f1ba4e в качестве дополнительного цвета фона, чтобы выделять некоторые блоки
#e24e44 данным цветов будут кнопки и какие-то плашки
И вот что у меня получилось:
6
Поиск подходящих иллюстраций
Движемся далее. Я смотрю на то, что получилось у меня, на то, что было на исходном сайте, и понимаю, что блок с черными прямоугольниками совершенно не в концепции.
Поэтому я отправляюсь искать новые иллюстрации, которые подходили бы по цвету.
Иллюстрации ищу на гугле по запросу "free illustrations": https://www.google.com/search?...
Вот тут вижу подходящую стилистику в коллеции Flame. Вуаля! Готово
Поэтому я отправляюсь искать новые иллюстрации, которые подходили бы по цвету.
Иллюстрации ищу на гугле по запросу "free illustrations": https://www.google.com/search?...
Вот тут вижу подходящую стилистику в коллеции Flame. Вуаля! Готово
Да, картинки можно немного привести в соответствие по размерам, но сейчас мы это делать не будем, но обязательно поговорим об этом позже, когда будем делать сайты для клиентов.
7
Из чего вообще состоит цветовая схема?
1. Основной цвет фона. На 90% сайтов это белый фон. Но для примера выше я выбрал фон, отличный от белого, но на котором чёрный шрифт читается легко.
2. Цвет дополнительного фона. Он может быть насыщенным, как взятый мной с сайта из подборки хороших дизайнов. Или он может быть еле заметным.
3. Цвет-акцент для чего-то яркого. Плашки, линии, обводки и тп.
4. Цвет основной кнопки *** может совпадать с пунктом 2 или 3 ***
5. Цвет дополнительной кнопки *** может совпадать с пунктом 2 или 3 ***
6. Цвет шрифта
7. Цвет шрифта на дополнительном фоне
8. Возможно, цвет заголовков
9. Прочие цвета :-) Да, это ужасный пункт, который может включать в себя сотню разных цветов.
Если бы я определял цветовой минимум, который должен быть, то это было бы так:
То есть макет моего сайта выглядел бы вот так:
2. Цвет дополнительного фона. Он может быть насыщенным, как взятый мной с сайта из подборки хороших дизайнов. Или он может быть еле заметным.
3. Цвет-акцент для чего-то яркого. Плашки, линии, обводки и тп.
4. Цвет основной кнопки *** может совпадать с пунктом 2 или 3 ***
5. Цвет дополнительной кнопки *** может совпадать с пунктом 2 или 3 ***
6. Цвет шрифта
7. Цвет шрифта на дополнительном фоне
8. Возможно, цвет заголовков
9. Прочие цвета :-) Да, это ужасный пункт, который может включать в себя сотню разных цветов.
Если бы я определял цветовой минимум, который должен быть, то это было бы так:
- Цвет фона точно белый.
- Шрифты все чёрные.
- Я бы выбрал 1 цвет для кнопок и каких-то ярких элементов + цвет шрифта на нём (скорее всего это был бы белый или чёрный)
- Выбрал бы лёгкий фон для выделения блоков.
То есть макет моего сайта выглядел бы вот так:
8
Просмотр кода цвета в Фотошопе
Если бы хотел чуть-чуть дополнительной персонализации, то добавил бы ещё цвет заголовка (не сам бы придумывал, и нашёл бы, кто и как использует их на классных сайтах). Например, так:
Вот что отмечу:
1. Если вы для первых 50 проектов будете использовать цветовые решения, придуманные другими, то это позволит вам лучше чувствовать цвета. Потом сможете придумывать сами. *** Разумеется, если у вас есть природный талант сразу делать прекрасно, то можете придумывать. Но просто изначально решите: есть он у вас или нет. У меня нет. У вас, может, есть ***
2. Посмотрите на скриншоты сайта, который я делаю как образец, там получается вполне себе добротный дизайн. При этом стоит учесть, что я не дизайнер. Я специально делаю это всё сам, чтобы не было разрыва между вашими способностями и способностями матёрого артдиректора Базиума.
3. Мы делаем просто: не используем слишком много цветов, не используем градиенты. Но итог получается великолепный.
4. Но мы действуем внимательно. Мы используем те цвета, которые выбрали. Обратите внимание, что я перекрасил иконки, которые были на первом экране моего сайта. Я перекрасил надпись "познакомимся" рядом с иконкой Телеграма.
1. Если вы для первых 50 проектов будете использовать цветовые решения, придуманные другими, то это позволит вам лучше чувствовать цвета. Потом сможете придумывать сами. *** Разумеется, если у вас есть природный талант сразу делать прекрасно, то можете придумывать. Но просто изначально решите: есть он у вас или нет. У меня нет. У вас, может, есть ***
2. Посмотрите на скриншоты сайта, который я делаю как образец, там получается вполне себе добротный дизайн. При этом стоит учесть, что я не дизайнер. Я специально делаю это всё сам, чтобы не было разрыва между вашими способностями и способностями матёрого артдиректора Базиума.
3. Мы делаем просто: не используем слишком много цветов, не используем градиенты. Но итог получается великолепный.
4. Но мы действуем внимательно. Мы используем те цвета, которые выбрали. Обратите внимание, что я перекрасил иконки, которые были на первом экране моего сайта. Я перекрасил надпись "познакомимся" рядом с иконкой Телеграма.