Добро пожаловать на вторую статью из курса шпаргалок «Основы любого дизайна». В ней мы рассмотрим теорию цвета, законы, позволяющие воспринимать объекты как единое целое и затронем базовые правила при выборе шрифта для своей работы.
Первая часть шпаргалки доступна здесь.
Содержание
Тема «Цвет»
Сочетание цветов
Цветовая палитра — один из важнейших инструментов передачи настроения зрителю.
Выбирая палитру, помните, что каждый цвет вызывает определенные ассоциации
- 60% — основной цвет,
- 30% — второстепенный,
- 10% — акцентный;
Следует использовать не более 3 основных цветов. Это правило вытекает из первого. Ведь при использовании слишком большого количества цветов, они начинают конкурировать между собой, и в итоге, донести до зрителя определённую эмоцию почти невозможно.Более того, в идеале каждый из них должен соответствовать пропорции:
![](https://uprologue.com/wp-content/uploads/2023/05/sochetanie-cvetov-1-1024x741.jpg)
Это в особенности касается дизайна интерфейсов. Ведь они предназначены для длительного использования, а значит должны быть легко-воспринимаемыми и интуитивно понятными.
Не забывайте о цветовой гамме изображений, которые используете в своей работе! Она должна как можно лучше соответствовать цветовой гамме самой работы.
Теория цвета (А вы думали, что всё будет лекго?)
Теория цвета — набор правил и рекомендаций создания эстетичных, гармоничных и функциональных цветовых палитр.
Цветовой круг — это диаграмма, которая отражает взаимосвязи между различными цветами и цветовыми схемами.
Существует 3 категории цветов:
- Первичные: красный, желтый, синий;
- Вторичные: цвета, которые получаются в результате смешения двух первичных цветов;
- Третичные: цвета, которые получаются в результате смешения первичного и вторичного цветов.
![](https://uprologue.com/wp-content/uploads/2023/05/sochetanie-cvetov-2.jpg)
Однако подбирать сочетающиеся друг с другом цвета интуитивно, дано далеко не каждому.
Для этого существует методика, позволяющая легко подбирать цвета, используя цветовой круг. Название её — цветовые схемы.
![](https://uprologue.com/wp-content/uploads/2023/05/izobrazhenie-2-1024x396.png)
Чтобы быстро подобрать нужные цвета, вы можете воспользоваться сервисом:
colorscheme.ru
5 категорий цвета
Теперь, зная о теории цвета и цветовых схемах, рассмотрим ещё один способ быстро подобрать цвета и вызвать у зрителя нужное настроение.
Все цвета, в зависимости от их яркости и насыщенности можно разделить на 5 категорий:
1. Драгоценные. Эти богато насыщенные оттенки царственны, глубоки и придают ощущение роскоши.
![](https://uprologue.com/wp-content/uploads/2023/05/sochetanie-cvetov-3-1-1.jpg)
![](https://uprologue.com/wp-content/uploads/2023/05/sochetanie-cvetov-3-1.jpg)
2. Пастельные тона принадлежат к бледной цветовой гамме.
![](https://uprologue.com/wp-content/uploads/2023/05/sochetanie-cvetov-4-1.jpg)
![](https://uprologue.com/wp-content/uploads/2023/05/sochetanie-cvetov-4.jpg)
3. Нейтральные. Создаются обесцвечиванием цветов. Часто используются как второстепенные.
![](https://uprologue.com/wp-content/uploads/2023/05/sochetanie-cvetov-5-1.jpg)
![](https://uprologue.com/wp-content/uploads/2023/05/sochetanie-cvetov-5.jpg)
4. Земельные. Эти цвета обычно встречаются в природе. Многие земные тона происходят от глиняных пигментов, таких как зонтик, охра и сиена.
![](https://uprologue.com/wp-content/uploads/2023/05/sochetanie-cvetov-6-1.jpg)
![](https://uprologue.com/wp-content/uploads/2023/05/sochetanie-cvetov-6.jpg)
5. Насыщенные. Яркие и насыщенные цвета. Их нужно очень осторожно использовать в соотношении с нейтральными цветами. Нейтральные цвета должны занимать до 80%
![](https://uprologue.com/wp-content/uploads/2023/05/sochetanie-cvetov-7-1.jpg)
![](https://uprologue.com/wp-content/uploads/2023/05/sochetanie-cvetov-7.jpg)
Цветовые режимы RGB и CMYK
А Вы знали, что при печати и при отображении на экране цвета «смешиваются» по-разному? Если использовать не тот режим смешения цветов, то в результате все цвета непредсказуемо исказятся.
RGB (красный, зеленый и синий) — это цветовое пространство для цифровых изображений.
![](https://uprologue.com/wp-content/uploads/2023/05/90-1-rgb-colour.jpg)
CMYK (голубой, пурпурный, желтый, черный) — это цветовое пространство для печатных материалов.
![](https://uprologue.com/wp-content/uploads/2023/05/92-3-cmyk-colour.jpg)
![](https://uprologue.com/wp-content/uploads/2023/05/90-1.jpg)
СОВЕТ
Сохраняя файл, указывайте цветовую схему в названии.
Это поможет избежать путаницы.
Тема «5 законов восприятия»
Близость
Если объекты расположены близко друг к другу, мозг воспринимает их как группу. Следите за тем, чтобы близкое расположение элементов поддерживало общую логику композиции.
![](https://uprologue.com/wp-content/uploads/2023/05/zakok-blizosti-1.jpg)
Сходство
Кроме близко расположенных объектов, мозг склонен группировать элементы, схожие визуально. За счет различия формы, цвета или размера можно создавать контраст в композиции.
![](https://uprologue.com/wp-content/uploads/2023/05/zakok-blizosti-2.jpg)
Замкнутость
Если поместить контент в незамкнутый круг — пользователь будет больше фокусироваться на круге, чем на контенте.
Всегда старайтесь создавать замкнутые, завершенные композиции.
![](https://uprologue.com/wp-content/uploads/2023/05/zakok-blizosti-3.jpg)
Связанность
Два объекта, связанные между собой третьим, будут восприняты как единое целое.
![](https://uprologue.com/wp-content/uploads/2023/05/zakok-blizosti-4.jpg)
Совместное движение
Объекты, движущиеся вместе, воспринимают как связанные общей судьбой. Это правило имеет место не только в анимации, но и применимо для теней и эффектов размытия
![](https://uprologue.com/wp-content/uploads/2023/05/zakok-blizosti-5.jpg)
Тема «Шрифты»
Настроение шрифтов
Шрифты обладают визуальными характеристиками из реального мира
![](https://uprologue.com/wp-content/uploads/2023/05/izobrazhenie-3.png)
![](https://uprologue.com/wp-content/uploads/2023/05/izobrazhenie-4.png)
Акцентирование шрифтов
Часто новички забывают о казалось бы очевидных, но важных правилах построения текста:
- Контраст: для создания визуальной иерархии, выделите наиболее важный текст насыщенностью, размером, цветом, начертанием и т.п.;
- Разборчивый текст: основной текст должен быть разборчивым и не отвлекать читателя от содержания;
- Выравнивание текста: в большинстве случаев, стоит выравнивать текстпо левой стороне, чтобы обеспечить читабельность.
![](https://uprologue.com/wp-content/uploads/2023/05/izobrazhenie-6-1024x318.png)
Анонс следующей части
В следующем выпуске мы «копнём глубже» некоторые темы и рассмотрим ошибки, которые волей-неволей допускают не только начинающие, но и бывалые дизайнеры.
Бонусом я расскажу Вам о сервисах, которые облегчат ваши будни.