Меню

Контраст в дизайне это

Обучение: что такое контраст в графическом дизайна?

contrast v dizaine

Контраст — это визуальное различие между противоположными элементами или областями, (белое и черное, грубое и гладкое, большое и маленькое) созданное для возбуждения визуального интереса.
На авторском курсе по графическому дизайну я рассказываю о базовых основах, без которых новичкам сложно разобраться в профессии графического дизайнера. В этой статье расскажу теоретическую часть вопроса. С практические примерами, как применять контраст в графическом дизайне можно прочитать в статье.

Наша жизнь полна контрастов. День сменяется ночью, лето проходит и наступает зима. В графическом дизайне, как и в нашей жизни контраст привлекает, а серый и невыразительный дизайн навевает скуку.

Однообразие, монотонность и серость – главные враги дизайнера.

В книге Lisa Graham «Basics of Design: Layout and Typography for Beginners» автор сравнивает отсутствие контраста со вкусом овсянки, приготовленной без соли и сахара.

Представьте, что вас пригласили на праздничный ужин и начинают подавать разные блюда. Как правило начинают с холодных закусок — но вместо икры малосоленой, рыбы заливной и салатов вам приносят овсянку. После холодных закусок подают горячие — но вам снова приносят овсянку. После горячего подают вторые блюда — дичь, птицу, рыбу, мясо, а вам приносят овсянку. То же самое чувствует зритель, когда смотрит на унылый, скучный дизайн веб-сайта или каталога, в котором все фотографии одного размера, текст и заголовки сливаются, а цветовая палитра совершенно не имеет контраста.

Скучный дизайн лечится и сегодня расскажем о простых рецептах, которые сделают графический дизайн выразительнее, а жизнь разнообразнее.

Как сделать дизайн выразительнее?

principy kontrastОбучение графическому дизайну: самый простой способ улучшить дизайн — сделать что-то темнее или светлее, больше или меньше, ярче или приглушеннее, теплее или холоднее.
Цвет можно затемнить или осветлить, сделать холоднее или теплее. Старайтесь не вдаваться в крайности и не выкручивать контраст на полную мощность, как в китайском телевизоре. В примере использованы два одинаковых цвета. Простое упражнение — сделайте один из оттенков светлее или темнее, чтобы усилить контраст и сделать сочетание цветов в монохромной гармонии выразительнее.

Контраст в размерах между элементами

kontrast zagolovokОбучение графическому дизайну: контраст в размерах не только усиливает визуальный интерес и делает графический дизайн выразительнее, но и устанавливает отношения между элементами. Начните с простых приемов — усильте контраст, увеличивая размер элемента или области. Увеличение в размере усиливает драматический эффект и рождает точку входа в дизайн. Самое элементарное, что можно сделать в типографике — сделать заголовок крупнее и отделить его от текста.

Представим на миг, что дизайнер сделал заголовки и основной текст одного кегля. Как минимум, это нас запутает и мы не сразу поймем, о чем тест. Заголовок обязан привлечь внимание и представить нечто важное, чтобы зритель быстро понял основную тему сообщения. Делая заголовок больше, чем основной тест, дизайнер помогает зрителю быстрее понять основную коммуникацию.
Главное в контрасте — не «переборщить» и следовать меры, иначе еда будет пересоленной или переперченной. Слишком крупные заголовки будут «кричать», отвлекать от основного сообщения, а актеры второго плана — подзаголовки, основной текст и иллюстрации будут слишком «тихими».

Читайте также:  Дизайн магазина пиво на разлив

Контраст теплых и холодных цветов

kontrast teplyi holoОбучение графическому дизайну: сделать дизайн выразительным можно на контрасте теплых и холодных оттенков. Подберите холодный или теплый вариант вашему основному цвету. Используйте в дизайне гармонию из родственных цветов. На цветовом круге они находятся рядом, на один или два шага против или по часовой стрелки.

Цветовой круг дизайнера состоит из теплых и холодных цветов. Иоганнес Иттен считал, что контраст холодного и теплого считается самым «звучащим» среди других цветовых контрастов. Может показаться странным сравнивать температуру окружающего мира с восприятием цвета. Однако опыты Иттена доказывают факт влияния цвета в окружающей среде на наше самочувствие, например цвет морской волны успокаивает, а кухня красного цвета возбуждает аппетит.

Контраст между органической формой и геометрической фигурой

Для иллюстрации принципа контраста приведем пример с простыми формами. Принято считать, что формы делятся на две большие группы: органические и геометрические. .

kontrast organikaОбучение графическому дизайну: усильте контраст, добавив органические или геометрические фигуры Фигуры являются основными элементами в графическом дизайне. Иногда их сравнивают со строительными блоками и это действительно отражает роль фигур дизайне.

Геометрические фигуры, такие как квадраты, треугольники и круги, имеют определенные смысловые значения. Например, круги символизируют бесконечность, так как не имеют ни начала, ни конца. Квадраты и прямоугольники, выражают стабильность, а треугольники движение и рост. Это общепринятые значения, которые дизайнеры используют в дизайне бренда или в веб-дизайне.

Органические формы родились из окружающей нас природы. Фигуры являются частью природного мира и принимают форму дерева, листьев, птиц, животных или воды и воздуха. Формы могут символизировать или представлять абстрактные концепции: мир, движение, чувства и эмоции.

Контраст, основанный на текстуре

kontrast teksturaОбучение графическому дизайну: текстуры, как и формы, взаимодействуют друг с другом, создавая контрастные отношения. Для описания текстур дизайнеры используют характеристики: гладкие и шероховатые, мягкие и грубые, рваные и плавные. На онлайн-курсе мы определяем текстуру как элемент графического дизайна, с помощью которого дизайнер имитирует поверхность форм и фигур. То, что мы видим в дизайне — это визуальное восприятие, то что можем ощущать при прикосновении — тактильное восприятие.Тактильная текстура является трехмерной, потому что имеет реальную высоту, ширину и глубину. Визуальная текстура является двухмерной, и она является имитацией трехмерной текстуры.

Как усилить контраст с помощью стиля: замените засечки на гротеск

01 minОбучение графическому дизайну: контрастом «стиля» в шрифтах — это различие в буквенных формах шрифта. Сравните засечки у PT Serif и рубленные формы PT Sans от Paratype. Сравнивая стили шрифта, мы говорим не о весе, а о качестве тона. Тональность может быть стильной и элегантной, современной и классической, веселой и легкой.Про контраст в шрифтах можно найти много информации.

Читайте также:  Дизайн кухни с микроволновкой и телевизором

Именно про шрифты можно продолжить фразу — противоположности притягиваются, так как разные шрифты дополняют и делают сообщение выразительным. Шрифты в разных стилях, например PT Serif и гротеск PT Sans созданы как единое семейство и очень хорошо сочетаются, так как их объединяет стилистика, авторская рука и похожая высота строчных букв.

Как добавить контраст в характеристиках шрифта — изменить насыщенность или вес

kontrast nasyshchennОбучение графическому дизайну: разница в насыщенности между шрифтами Существует как минимум еще один тип контраста в типографике — это разница в характеристиках шрифта. Шрифты между собой отличаются многими характеристиками, например, насыщенность.

Насыщенность — это отношение толщины основных штрихов к высоте знака. Самая распространенная это светлая, полужирная и жирная насыщенность шрифта.При работе с шрифтами принято заголовки делать более жирной насыщенностью, чем основной текст. Конечно, правила существуют для того, чтобы их нарушали. Но прежде чем нарушать, подумайте о целевой аудитории и над тем, насколько удобно будет читать текст набранный «bold» или жирной насыщенностью.

Собираетесь усилить контраст между основным текстом и выделить слово или фразу — нажмите на панели инструментов «bold» и выделите жирным. Это создаст контраст между основным текстом и той фразой, на которой вы хотите сделать акцент.

Зачем делать дизайн контрастнее?

Без контраста дизайн выглядит скучным и неинтересным. Грамотное использование контраста делает ваш дизайн выразительным и привлекательным для зрителя. Самый простой способ сделать дизайн чуть лучше не так сложно. Достаточно провести анализ и выяснить, что является главным в вашем проекте. Это может быть иллюстрация, слово или цвет. Цвет можно сделать ярче, теплее или холоднее. Иллюстрацию можно увеличить или откадрировать, чтобы найти новый фокус. Заголовок можно сделать крупнее или повысить насыщенность.

Существует много способов усилить контраст и сделать графический дизайн выразительнее. Подписывайтесь на курсы графического дизайна, если хотите создавать правильный, привлекательный и выразительный дизайн. В этой статье дается определение контраста в графическом дизайне, примеры из теории и домашнее задание.

Источник

Как применять контрасты в графическом дизайне

askusers

10.03.2016 • 4 мин. читать

Дизайн-макет любого сайта предполагает наличие определенного набора элементов, из которого и складывается интерфейс. Все эти элементы, исходя из задач интерфейса и потребностей пользователей, должны быть расположены в макете. Понятно, что пользователи, решая свои задачи, последовательно будут обращать внимание на разные элементы. Понятно, что есть элементы более важны, есть менее важные. Для решения как раз этой задачи – управление вниманием пользователей – необходимо знать и уметь применять базовые принципы и правила контрастов.

  • Мало кликают по кнопке?
  • Не видят важную информацию?
  • Не понимают, куда нажимать?
  • Уходят, не совершив целевые действия?
Читайте также:  Создай футболку со своим дизайном

А может быть дело в контрасте? Просто они не обращают внимания на важные элементы?

Изучите простые принципы и правила контрастов и посмотрите на свой сайт. Уверен, вы сможете найти варианты улучшения своих интерфейсов.

Итак, контрастные элементы на сайте способны привлечь внимание пользователей. Рассмотрим основные виды контрастов.

Виды контрастов

vidy kontrastov 1

Контраст размера в композиции

Более крупные объекты на сайте воспринимаются пользователями лучше. Они контрастируют и привлекают больше внимания, чем маленькие.

kontrast razmera

Примером использования контраста размера являются разные шрифты. Более важная информация выделяется большим шрифтом.

img1size

На примере – заголовок большего шрифта. Он более заметен и читаем, чем остальной текст. Здесь можно увидеть еще один пример контраста размера. Целевое действие реализовано кнопкой «да» более крупного размера. Это усиливает желание нажать на неё. Варианты отказа правильнее делать менее контрастными, в том числе и за счет меньшего размера.

Контраст цвета

Контрастирование или контраст цвета — это разница между яркостью цветов. Разительный контраст показывает, насколько цвет светлый или темный.

kontrast tsveta

Контрастный цвет на сайтах используют для выделения основного действия в композиции.

img2size

На картинке – первый экран главной страницы сайта AskUsers. Кнопка «зарегистрироваться» выделена красным цветом. Она контрастирует с основными цветами первого экрана – зеленым, черным, белым.

Прочитать, как правильно оформить кнопки призыва к действию и сделать на них акцент, вы можете в этой статье на блоге AskUsers.

Контраст формы геометрических фигур

Сложные объекты дизайна вызывают более активную реакцию, чего не скажешь о простых. На сложных объектах мы дольше фокусируем свой взгляд.

Если нужно сконцентрировать внимание на объекте, можно сделать его сложнее других. Его обязательно заметят!

img3size

Пример использования контрастов цвета и формы:

img4size

Контраст движения

Движущиеся объекты привлекают больше внимания пользователей и никогда не остаются незамеченными. Для управления вниманием пользователя эффективно использовать анимацию.

kontrast dvizheniya 1

Примером такой композиции может служить «прыгающая» трубка обратного звонка, которую вы наверняка встречали на коммерческих сайтах. Она подталкивает пользователей нажать на неё.

Если вам понравилась эта статья, подписывайтесь, и мы будем присылать вам свежие материалы.

Проще поделиться, чем спорить в комментариях.

С помощью этих 4-х простых приемов вы сможете управлять вниманием посетителя сайта и добиваться выполнения нужных вам действий.

konvers

А теперь можно и к себе на сайт заглянуть!

… и свежим взглядом оценить контрастность важных элементов на страницах.

В статье описаны простые вещи, но многие владельцы сайтов, разработчики и дизайнеры о них не знают или забывают использовать. Если у вас в друзьях есть такие люди, пожалуйста, напомните им о важности соблюдения правил контрастов — поделитесь с ними ссылкой на статью.

Источник

Adblock
detector