Правило 60-30-10 в дизайне и как его использовать
Иногда дизайнеры долго ищут «ту самую» цветовую схему, перебирают палитры, двигают оттенки, меняют насыщенность — а ощущение цельности всё равно не появляется.. Восприятие не фиксирует приоритеты, элементы конкурируют между собой, продукт не выделяется.
В таких задачах используется базовый принцип — правило 60–30–10.
Это схема распределения цветовой нагрузки в композиции. 60% занимает основной цвет, который формирует общее поле. 30% — поддерживающий цвет, на котором держится визуальный фокус. 10% — акцентный слой, который управляет вниманием. В карточках товаров это реализуется через фон, продукт и элементы интерфейса: текст, плашки, графику.
Поведение цвета напрямую связано с площадью. Крупные поверхности требуют сдержанных оттенков, чтобы сохранялась стабильность восприятия. Поэтому базовый цвет чаще имеет сложную или приглушённую тональность. Средний слой допускает более высокую насыщенность, так как занимает меньшую площадь и формирует визуальный центр. А акцентные элементы получают максимальный контраст, чтобы фиксировать внимание и направлять взгляд.
Подбор палитры опирается на цветовые схемы. Монохромная модель использует один цвет в разных значениях светлоты и насыщенности и формирует цельную структуру. Аналогичные цвета, расположенные рядом в цветовом круге, создают последовательные переходы. Контрастные сочетания строятся на противоположных цветах и усиливают различимость элементов. В продуктовых карточках эти подходы комбинируются в зависимости от задачи.
Существуют и более сложные цветовые схемы — триады, квадраты, — но в дизайне карточек товаров они встречаются редко. Причина проста: они требуют поистине ювелирной настройки, где каждый оттенок должен идеально вписываться в общую картину.
Давайте посмотрим, как эта волшебная формула работает на практике.
Разберём её на примере карточек MYMUSE.
Основной слой композиции (занимает около 60% площади) представлен светлым нейтральным фоном. Этот элемент играет ключевую роль в формировании визуального восприятия: он создаёт чистое, стабильное поле, свободное от избыточной нагрузки. Благодаря высокой светлоте фон выступает в качестве идеальной подложки, на которой чётко и без искажений воспринимаются все остальные компоненты дизайна.
Помимо этого, в зону основного слоя входят крупные пустоты и «воздушные» промежутки вокруг центрального объекта — они выполняют функцию изоляции продукта, минимизируя визуальный шум и позволяя сосредоточить внимание на главном элементе композиции.
Средний слой (около 30% композиции) концентрируется непосредственно на продукте — флаконе с мылом-пенкой. Насыщенный розовый цвет упаковки выступает мощным акцентом, мгновенно притягивающим взгляд. Контраст между ярким оттенком флакона и светлым фоном обеспечивает мгновенное считывание формы продукта — потребителю не требуется дополнительных усилий для распознавания товара. Вертикальная ориентация упаковки усиливает визуальную доминанту, делая продукт более заметным и выразительным.
Градиентный переход внутри розового цвета добавляет упаковке объём и ощущение материальности, делая её более «живой» и привлекательной для покупателя.
Акцентный слой (примерно 10% композиции) распределён между текстовыми блоками, цветными плашками и дополнительными графическими элементами. Розовые вставки в текстовых блоках гармонично дублируют цвет продукта, создавая визуальную связку между разными элементами дизайна. Это усиливает узнаваемость бренда и поддерживает единую стилистическую концепцию. Чёрный цвет текста обеспечивает высокую читаемость на светлом фоне и формирует чёткую информационную иерархию — ключевые сообщения выделяются и легко воспринимаются.
Дополнительные графические элементы — розовые сферы — органично дополняют композицию. Они поддерживают общую цветовую систему, добавляют ритмичность и динамику, не перегружая при этом дизайн