Контраст — это визуальное различие между противоположными элементами или областями, (белое и черное, грубое и гладкое, большое и маленькое) созданное для возбуждения визуального интереса.
В учебнике по графическому дизайну я рассказываю о базовых основах, без которых новичкам сложно разобраться в профессии графического дизайнера.
В этой статье разберем теоретическую часть вопроса «что такое контраст в графическом дизайне». Впервые статья была опубликована в блоге «Два клика».
Почему у дизайнера главные враги — серость и скука?
Наша жизнь полна контрастов. День сменяется ночью, лето проходит и наступает зима. В графическом дизайне, как и в нашей жизни контраст привлекает, а серый и невыразительный дизайн навевает скуку.
Однообразие, монотонность и серость – главные враги дизайнера. В книге Lisa Graham «Basics of Design: Layout and Typography for Beginners» автор сравнивает отсутствие контраста со вкусом овсянки, приготовленной без соли и сахара.
🌟🌟🌟
Представьте, что вас пригласили на праздничный ужин и начинают подавать разные блюда. Как правило начинают с холодных закусок — но вместо икры малосоленой, рыбы заливной и салатов вам приносят овсянку. После холодных закусок подают горячие — но вам снова приносят овсянку. После горячего подают вторые блюда — дичь, птицу, рыбу, мясо, а вам приносят овсянку.
То же самое чувствует зритель, когда смотрит на унылый, скучный дизайн веб-сайта или каталога, в котором все фотографии одного размера, текст и заголовки сливаются, а цветовая палитра совершенно не имеет контраста.
🌟🌟🌟 Скучный дизайн лечится и сегодня расскажу о простых рецептах, которые сделают графический дизайн выразительнее, а жизнь разнообразнее.
Как сделать ваш дизайн выразительнее и привлечь внимание аудитории?
Самый простой способ улучшить дизайн — усилить контраст между темным и светлым, большим и маленьким, ярким и приглушенным, теплым и холодным.
Цвет можно затемнить или осветлить, сделать холоднее или теплее. Старайтесь не вдаваться в крайности и не выкручивать контраст на полную мощность, как в китайском телевизоре. В примере использованы два одинаковых цвета. Простое упражнение — сделайте один из оттенков светлее или темнее, чтобы усилить контраст и сделать сочетание цветов в монохромной гармонии выразительнее.
1. Усильте контраст заголовка!
Контраст в графическом дизайне не только усиливает визуальный интерес и делает ваше сообщение выразительнее, но и устанавливает отношения между элементами. Начните с простых приемов — усильте контраст, увеличивая размер элемента или области. Увеличение в размере усиливает драматический эффект и рождает точку входа в дизайн.
Самое элементарное, что можно сделать в типографике — сделать заголовок крупнее и отделить его от основного текста.
Представим на миг, что дизайнер сделал заголовки и основной текст одного кегля. Как минимум, это нас запутает и мы не сразу поймем, о чем тест. Заголовок обязан привлечь внимание и представить нечто важное, чтобы зритель быстро понял основную тему сообщения. Делая заголовок больше, чем основной тест, дизайнер помогает зрителю быстрее понять основную коммуникацию.
02. Контраст теплых и холодных цветов
Подберите холодный или теплый вариант вашему основному цвету. Используйте в дизайне гармонию из родственных цветов. На цветовом круге они находятся рядом, на один или два шага против или по часовой стрелки.
Цветовой круг дизайнера состоит из теплых и холодных цветов. Иоганнес Иттен считал, что контраст холодного и теплого считается самым «звучащим» среди других цветовых контрастов. Может показаться странным сравнивать температуру окружающего мира с восприятием цвета. Однако опыты Иттена доказывают факт влияния цвета в окружающей среде на наше самочувствие, например цвет морской волны успокаивает, а кухня красного цвета возбуждает аппетит.
Контраст между органической формой и геометрической фигурой
Для иллюстрации принципа контраста приведем пример с простыми формами. Принято считать, что формы делятся на две большие группы: органические и геометрические.
Фигуры являются основными элементами в графическом дизайне. Иногда их сравнивают со строительными блоками и это действительно отражает роль фигур дизайне.
Геометрические фигуры, такие как квадраты, треугольники и круги, имеют определенные смысловые значения. Например, круги символизируют бесконечность, так как не имеют ни начала, ни конца. Квадраты и прямоугольники, выражают стабильность, а треугольники движение и рост. Это общепринятые значения, которые дизайнеры используют в дизайне бренда или в веб-дизайне.
Органические формы родились из окружающей нас природы. Фигуры являются частью природного мира и принимают форму дерева, листьев, птиц, животных или воды и воздуха. Формы могут символизировать или представлять абстрактные концепции: мир, движение, чувства и эмоции.
Контраст, основанный на текстуре
Для описания текстур дизайнеры используют характеристики: гладкие и шероховатые, мягкие и грубые, рваные и плавные.
В графическом дизайне мы определяем текстуру как элемент графического дизайна, с помощью которого дизайнер имитирует поверхность форм и фигур. То, что мы видим в дизайне — это визуальное восприятие, то что можем ощущать при прикосновении — тактильное восприятие.
Тактильная текстура является трехмерной, потому что имеет реальную высоту, ширину и глубину. Визуальная текстура является двухмерной, и она является имитацией трехмерной текстуры.
Как усилить контраст с помощью стиля: замените засечки на гротеск
Сравнивая стили шрифта, мы говорим не о весе, а о качестве тона. Тональность может быть стильной и элегантной, современной и классической, веселой и легкой.Про контраст в шрифтах можно найти много информации.
Именно про шрифты можно продолжить фразу — противоположности притягиваются, так как разные шрифты дополняют и делают сообщение выразительным. Шрифты в разных стилях, например PT Serif и гротеск PT Sans созданы как единое семейство и очень хорошо сочетаются, так как их объединяет стилистика, авторская рука и похожая высота строчных букв.
Как добавить контраст в характеристиках шрифта — изменить насыщенность или вес
Существует как минимум еще один тип контраста в типографике — это разница в характеристиках шрифта. Шрифты между собой отличаются многими характеристиками, например, насыщенность.
Насыщенность — это отношение толщины основных штрихов к высоте знака. Самая распространенная это светлая, полужирная и жирная насыщенность шрифта.При работе с шрифтами принято заголовки делать более жирной насыщенностью, чем основной текст. Конечно, правила существуют для того, чтобы их нарушали. Но прежде чем нарушать, подумайте о целевой аудитории и над тем, насколько удобно будет читать текст набранный «bold» или жирной насыщенностью.
Собираетесь усилить контраст между основным текстом и выделить слово или фразу — нажмите на панели инструментов «bold» и выделите жирным. Это создаст контраст между основным текстом и той фразой, на которой вы хотите сделать акцент.
Зачем делать дизайн контрастнее?
Без контраста дизайн выглядит скучным и неинтересным. Грамотное использование контраста делает ваш дизайн выразительным и привлекательным для зрителя.
Самый простой способ сделать дизайн чуть лучше не так сложно. Достаточно провести анализ и выяснить, что является главным в вашем проекте. Это может быть иллюстрация, слово или цвет. Цвет можно сделать ярче, теплее или холоднее. Иллюстрацию можно увеличить или откадрировать, чтобы найти новый фокус. Заголовок можно сделать крупнее или повысить насыщенность.
Как усилить контраст и сделать графический дизайн выразительнее, узнайте в учебнике по графическому дизайну. Получите шесть бесплатных ознакомительных фрагмента из учебника по по графическому дизайну. Еще сомневаетесь? Прочитайте Ведение к учебнику, оно изменит ваше представление о дизайне!
Домашнее задание по теме контраст в графическом дизайне
Упражнение. Откройте файл по ссылке в редакторе Canva. Предложите ваши решения, используя знания, полученные в статье. Меняйте цвет, создавая контрастные сочетания. Подбирайте стиль шрифта, увеличивайте или уменьшайте фигуры, добиваясь контрастных отношений. Это примеры домашнего задания онлайн-курса «Графический дизайн в два клика».