Основы цвета и типографики, которые нужны каждому начинающему дизайнеру
Основы цвета и типографики простыми словами: цветовой круг, правило 60 30 10, контраст и сочетание арабских и английских шрифтов, чтобы дизайны выглядели единообразно.
Основы цвета и типографики отличают дизайн, выглядящий наспех, от профессионального, даже если в обоих одно и то же изображение и те же слова. Дело не только в таланте. Несколько простых правил помогут вам подбирать гармоничные цвета и читаемые шрифты в любом дизайне, работаете ли вы в Canva или с изображениями, созданными AI.
Почему цвет и шрифт так важны
Ещё до того, как кто-либо прочитает хоть слово, цвета и шрифты создают впечатление. Цвет задаёт настроение: спокойное, энергичное, премиальное, игривое. Шрифт задаёт характер: официальный, дружелюбный, современный, традиционный. Когда и то и другое соответствуют сообщению, дизайн убеждает. Когда они конфликтуют, зрители чувствуют, что что-то не так.
Они также основа фирменного стиля. Используйте их последовательно, и люди начнут узнавать вашу работу ещё до того, как увидят логотип.
Цветовой круг: как подобрать цвета, которые хорошо сочетаются
- Комплементарные: противоположные цвета, например синий и оранжевый. Сильный контраст для привлечения внимания.
- Аналоговые: соседние цвета, например синий, бирюзовый и зелёный. Спокойные и комфортные.
- Монохромные: один оттенок от светлого до тёмного. Элегантно и удобно для новичков.
- Триадные: три равноудалённых оттенка. Живо, но легко переборщить.
Не получается? Возьмите палитру с понравившегося фото. Многие инструменты извлекают цвета из изображения, и эти цвета уже живут вместе в одной сцене.
О чём говорят цвета?
У цветов есть распространённые ассоциации, но они различаются в зависимости от культуры и контекста, поэтому относитесь к ним как к ориентиру. Синий часто воспринимается как доверие и спокойствие, зелёный – как природа и здоровье, красный и оранжевый – как энергия и срочность, чёрный с золотым – как премиум, а пастельные тона – как нежные и игривые. То, как вы используете цвет, важнее его значения: красный, залитый на весь макет, может выглядеть дёшево, а тот же красный на одной кнопке выглядит уверенно.
Правило 60 30 10
- Около 60% – доминирующий, обычно спокойный цвет для фонов и крупных областей.
- Около 30% – второй цвет для вспомогательных фигур.
- Около 10% – акцент на том, что нужно заметить: кнопка, цена, ключевое слово.
Это отправная точка, а не закон. Оно предотвращает классическую ошибку – использовать все цвета в полную силу, из-за чего ничего не выделяется.
Контраст: правило, которое сохраняет читаемость дизайна
Светло-серый на белом или тёмно-синий на чёрном могут выглядеть стильно на большом мониторе, но исчезают на телефоне на солнце.
- Тёмный текст на светлом фоне или наоборот – безопасный выбор.
- На фотографиях добавляйте полупрозрачный цветной слой под текстом.
- Не полагайтесь только на цвет для передачи информации, поскольку многим людям трудно различать некоторые цвета.
- Инструменты проверки контраста проверяют текст по хорошо известным рекомендациям по доступности.
Быстрая проверка: переключите дизайн в оттенки серого. Если текст по-прежнему чёткий, контраст в порядке.
Выбор и сочетание шрифтов
Иерархия
Читатель должен знать, что читать первым. Используйте размер и насыщенность: крупный жирный заголовок, более мелкий подзаголовок, основной текст, затем мелкие детали.
Правило двух шрифтов
Двух шрифтов достаточно для большинства дизайнов: выразительный для заголовков и простой для основного текста. Одно семейство в разных начертаниях ещё проще.
Арабский и английский вместе
Подбирайте шрифты по духу и насыщенности: геометрический с геометрическим, классический с классическим. Двуязычные семейства шрифтов значительно упрощают задачу. Подробнее об арабской каллиграфии читайте в нашем руководстве по арабскому тексту в AI-изображениях.
Интервалы
- Комфортный межстрочный интервал, для арабского чуть больше.
- Избегайте очень длинных строк; разбивайте текст на короткие абзацы или колонки.
- Дайте заголовкам пространство.
Шаг за шагом: создание палитры и шрифтов для вашего проекта
- Запишите три прилагательных для бренда.
- Выберите основной цвет, который их выражает.
- Дополните набор: второй цвет, акцент и два нейтральных.
- Выберите шрифт для заголовков с подходящим характером и простой шрифт для основного текста.
- Сделайте макет заголовка, основного текста и кнопки по правилу 60 30 10.
- Проверьте контраст в оттенках серого и на телефоне.
- Сохраните всё в фирменном наборе.
Этот последний шаг разбирает наше руководство по фирменному набору Canva.
color palette inspiration board, calm and trustworthy fintech brand, deep navy, soft teal, warm sand, white, minimal swatches, flat design
Полезные инструменты и замечание о совместном доступе
Canva предлагает подходящие палитры и пары шрифтов, а Adobe Firefly поможет попробовать варианты цвета в дизайне. Набор инструментов в ZTOOLZ меняется, поэтому загляните в магазин.
Совместный доступ ZTOOLZ подходит для обучения и экспериментов, но не даёт лицензии или коммерческих прав и не покрывает лицензии на шрифты. Для работы на клиентов или коммерческой работы используйте официальный тариф на своё имя и проверяйте лицензию каждого шрифта.
Частые вопросы
Сколько цветов должно быть в одном дизайне?
Обычно хватает трёх-пяти: основной, дополнительный, акцентный и два нейтральных.
Как понять, что цвета сочетаются?
Используйте отношения на цветовом круге или берите цвета с гармоничной фотографии, а затем проверьте контраст в оттенках серого.
Какой арабский шрифт хорош для новичков?
Простое современное арабское семейство с несколькими начертаниями позволяет построить полную иерархию из одного шрифта.
Обязательно ли следовать правилу 60 30 10?
Нет. Суть в одном доминирующем цвете и небольшом акценте, который выделяет главное.
