Переход на новую систему шапки/подвала
Цветовые схемы. Начало
В качестве вступления. Каждый цвет имеет свой код. Скажем, чёрный - это #000000, а белый - #ffffff. Красный: #ff0000, синий: #0006ff.
Когда вы выбираете цвет в Базиуме, вы водите по цветовой палитре, а код цвета будет написан под ней
Или вы можете открыть фотошоп, открыть там макет какого-то сайта (я обычно делаю принтскрин понравившегося мне сайта и вставляю его в фотошоп) и посмотреть, какие там используются цвета
Совокупность цветов, которые будем использовать на сайте, называется цветовая схема.
Когда вы выбираете цвет в Базиуме, вы водите по цветовой палитре, а код цвета будет написан под ней
Или вы можете открыть фотошоп, открыть там макет какого-то сайта (я обычно делаю принтскрин понравившегося мне сайта и вставляю его в фотошоп) и посмотреть, какие там используются цвета
Совокупность цветов, которые будем использовать на сайте, называется цветовая схема.
Готовые цветовые схемы
Я пробовал использовать сайты типа https://colorscheme.ru, которые помогают создать цветовую схему для сайта. Выбираешь один цвет, а сайты предлагают дополняющие цвета. Вот как-то так
Каждый раз, решая что-то с цветами, я шёл к артдиректору или дизайнеру и просил помощи. Я понимал, что делаю что-то не то (ибо уровень насмотренности хорошим дизайном у меня высокий), но сделать правильно мне помогал тот, кто разбирается.
Я в целом наблюдаю проблему с подбором цветов. То есть не только я такой недогоняющий. При этом кто-то может гармонично подобрать цвета в одежде, но когда начинает делать тоже самое в цифровой среде, то ничего не получается.
Итак, каково будет решение? Оно будет в том, чтобы использовать готовые цветовые схемы!
Пабам! Нам нужно делать качественные сайты и интернет-магазины? Прекрасно, берём готовые цветовые решения. А потом, если станем в этом разбираться и будем чувствовать разницу между близкими оттенками, то сможем и сами эти цветовые решения составлять.
И да, в цветах тоже есть тренды. Где их можно увидеть?
https://www.awwwards.com
https://httpster.net/
https://www.behance.net/search/projects?field=web%20design
Гуглим "color trends web design": https://www.google.com/search?q=color+trends+web+design
Я в целом наблюдаю проблему с подбором цветов. То есть не только я такой недогоняющий. При этом кто-то может гармонично подобрать цвета в одежде, но когда начинает делать тоже самое в цифровой среде, то ничего не получается.
Итак, каково будет решение? Оно будет в том, чтобы использовать готовые цветовые схемы!
Пабам! Нам нужно делать качественные сайты и интернет-магазины? Прекрасно, берём готовые цветовые решения. А потом, если станем в этом разбираться и будем чувствовать разницу между близкими оттенками, то сможем и сами эти цветовые решения составлять.
И да, в цветах тоже есть тренды. Где их можно увидеть?
https://www.awwwards.com
https://httpster.net/
https://www.behance.net/search/projects?field=web%20design
Гуглим "color trends web design": https://www.google.com/search?q=color+trends+web+design
Где брать готовые схемы?
Во-первых, можно исходить из какой-то существующей графики. И тут я говорю не о том, чтобы взять фотографию с любимым пёсиком/котиком/черепашкой и ориентироваться на цвета от туда, а про то, чтобы выбрать какой-то набор иконок, иллюстраций для сайта и ориентироваться на него. Вот пример набора: https://craftwork.design/downloads/teamwork-illustrations/ и прямо там примеры дизайна сайтов в рамках данных цветов:
Во-вторых, можно использовать готовые цветовых схемы от Базиума: https://bzm.bz/blog/tsvetovye-palitry-dlya-ispolzovaniya-na-sayte. Когда мне сделали логотип интернет-магазина Zog (заказывал в Go designer, вот карточка заказа: https://godesigner.ru/pitches/view/132924/), то мне очень понравилось цветовое решение, предложение дизайнером, что я заказал сделать вот эту подборку цветов.
В-третьих, можно брать цветовые схемы на других сайтах: смотреть трендовые сайты, находить то, что подходит и брать от туда цвета.
В-третьих, можно брать цветовые схемы на других сайтах: смотреть трендовые сайты, находить то, что подходит и брать от туда цвета.
Пример подбора цветового решения
Сайт можно сделать чёрно-белым, а цвет использовать только в фотографиях и иллюстрациях. Или цветными могут быть только кнопки.
На том сайте, что я делаю параллельно с курсом, я решил использовать яркие цвета, чтобы мне было посложнее. И решил использовать вот этот сайт в качестве источника цветового решения:
На том сайте, что я делаю параллельно с курсом, я решил использовать яркие цвета, чтобы мне было посложнее. И решил использовать вот этот сайт в качестве источника цветового решения:
Пример сайта с подбором цветов из цветовых схем
На сайте много цветов. Такое большое количество я не осилю использовать, ибо моих способностей не хватит, чтобы сделать годноту, а не винегрет. Поэтому я беру:
И вот что у меня получилось:
- #f8e1ce в качестве основного цвета фона
- #f1ba4e в качестве дополнительного цвета фона, чтобы выделять некоторые блоки
- #e24e44 данным цветов будут кнопки и какие-то плашки
И вот что у меня получилось:
Поиск подходящих иллюстраций
Движемся далее. Я смотрю на то, что получилось у меня, на то, что было на исходном сайте, и понимаю, что блок с черными прямоугольниками совершенно не в концепции.
Поэтому я отправляюсь искать новые иллюстрации, которые подходили бы по цвету.
Иллюстрации ищу на гугле по запросу "free illustrations": https://www.google.com/search?q=free+illustrations
Вот тут вижу подходящую стилистику в коллеции Flame. Вуаля! Готово
Поэтому я отправляюсь искать новые иллюстрации, которые подходили бы по цвету.
Иллюстрации ищу на гугле по запросу "free illustrations": https://www.google.com/search?q=free+illustrations
Вот тут вижу подходящую стилистику в коллеции Flame. Вуаля! Готово
Да, картинки можно немного привести в соответствие по размерам, но сейчас мы это делать не будем, но обязательно поговорим об этом позже, когда будем делать сайты для клиентов.
Из чего вообще состоит цветовая схема?
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 цвет для кнопок и каких-то ярких элементов + цвет шрифта на нём (скорее всего это был бы белый или чёрный)
- Выбрал бы лёгкий фон для выделения блоков.
То есть макет моего сайта выглядел бы вот так:
Просмотр кода цвета в Фотошопе
Если бы хотел чуть-чуть дополнительной персонализации, то добавил бы ещё цвет заголовка (не сам бы придумывал, и нашёл бы, кто и как использует их на классных сайтах). Например, так:
Вот что отмечу:
1. Если вы для первых 50 проектов будете использовать цветовые решения, придуманные другими, то это позволит вам лучше чувствовать цвета. Потом сможете придумывать сами. *** Разумеется, если у вас есть природный талант сразу делать прекрасно, то можете придумывать. Но просто изначально решите: есть он у вас или нет. У меня нет. У вас, может, есть ***
2. Посмотрите на скриншоты сайта, который я делаю как образец, там получается вполне себе добротный дизайн. При этом стоит учесть, что я не дизайнер. Я специально делаю это всё сам, чтобы не было разрыва между вашими способностями и способностями матёрого артдиректора Базиума.
3. Мы делаем просто: не используем слишком много цветов, не используем градиенты. Но итог получается великолепный.
4. Но мы действуем внимательно. Мы используем те цвета, которые выбрали. Обратите внимание, что я перекрасил иконки, которые были на первом экране моего сайта. Я перекрасил надпись "познакомимся" рядом с иконкой Телеграма.
1. Если вы для первых 50 проектов будете использовать цветовые решения, придуманные другими, то это позволит вам лучше чувствовать цвета. Потом сможете придумывать сами. *** Разумеется, если у вас есть природный талант сразу делать прекрасно, то можете придумывать. Но просто изначально решите: есть он у вас или нет. У меня нет. У вас, может, есть ***
2. Посмотрите на скриншоты сайта, который я делаю как образец, там получается вполне себе добротный дизайн. При этом стоит учесть, что я не дизайнер. Я специально делаю это всё сам, чтобы не было разрыва между вашими способностями и способностями матёрого артдиректора Базиума.
3. Мы делаем просто: не используем слишком много цветов, не используем градиенты. Но итог получается великолепный.
4. Но мы действуем внимательно. Мы используем те цвета, которые выбрали. Обратите внимание, что я перекрасил иконки, которые были на первом экране моего сайта. Я перекрасил надпись "познакомимся" рядом с иконкой Телеграма.
p.s. короткая видео-версия урока, где, в частности, демонстрирую просмотр кода цвета в Фотошопе: