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

Свойства визуального восприятия

Восприятие информации

Человек это информационная система. Есть разные каналы ввода и вывода информации. Каналы ввода это восприятие:

• Визуальный 65%.
• Аудиальный 20%.
• Кинестический 12%.
• Дигитический 3% (абстрактно-логические образы).

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

Свойства визуального восприятия на примере рекламных кампаний IKEA

Предметность

Характеризуется направленностью на внешний мир. Человек всегда сосредоточивает свое внимание на каких-то предметах в окружающем пространстве.

Предметом восприятия может быть рекламный носитель или сам предмет.

Целостность

Это восприятие общего образа предметов. Оно складывается из совокупности различных ощущений и формирует целостное представление о том или ином предмете.

Целостное восприятие товаров в домашней атмосфере.

Структурность

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

Контрастность

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

Контраст предметов, цвета, размера в разном пространстве.

Осмысленность

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

Принципы визуального восприятия

Принцип завершения образа

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

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

Можно найти использование закона завершения образа на логотипах некоторых известных брендов, таких как WWF или Apple.

Принцип сходства

В соответствии с этим принципом мы воспринимаем объекты с общими элементами так, как будто они являются частью друг друга. «Общими элементами» здесь выступают форма, цвет, размер, текстура или любой другой визуальный элемент.

Элементы, имеющие сходные визуальные характеристики, воспринимаются как более связанные, чем те, которые не имеют сходных характеристик.

Группировки

Человек довольно легко визуально группирует геометрические объекты, если ему не мешать.

Сильная группировка

Расстояние выбрано таким образом, что мы легко соотносим картинку и подпись, понимаем, где единое целое.

Слабая группировка

Мы можем сгруппировать объекты, но тут мы это делаем по косвенным признакам и понимаем.

Принцип фигуры и фона

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

Существует 3 типа отношений между фигурой и фоном:

1. Фигура может быть четко отделена от фона (устойчивое отношение).
2. Часть изображения может быть воспринята и как фигура, и как фон (двусмысленное отношение).
3. И фигура, и фон имеют одинаковый визуальный вес. Глаз переключается с одного на другое (реверсивное отношение). 

Лицо и взгляд

Лица людей — это то, что гарантировано привлечет внимание. Направление взгляда сфокусирует это внимание на нужном объекте. Лицо — естественная «ловушка для глаз».

Большое значение имеет направление взгляда. Как только ребенок начал смотреть на текст, то выросла конверсия в прочтении этого блока, выросла конверсия в просмотре товара и даже логотипа.

Принцип контраста

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

• Контраст формы
• Контраст цвета
• Обратный контраст цвета
• Контраст размера

Одна из главных причин использования эффекта контраста в дизайне — привлечение вниманияе. Обратный контраст применим ко всем видам.

Основные принципы создания дизайна

Принципы визуального дизайна

Весь визуальный дизайн можно разделить на три больших раздела, которые составляют основу. Они, в свою очередь, делятся на более конкретные составляющие: 

Композиция

• Линия
• Сетка
• Масштаб
• Баланс и симметрия
• Контраст
• Иерархия
• Повторение
• Движение
• Глубина

Цвет и текстура

• Теория цвета
• Текстура
• Прозрачность

Типографика и верстка

• Шрифты
• Иерархия

Композиция

Линия

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

Посредством линий можно передавать различные идеи:

• прямые линии говорят о порядке и опрятности;
• волнистые создают ощущение движения;
• зигзаги — напряжения или возбуждения.

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

1. Линии ведут вниз по странице секция за секцией: взгляд быстро скользит по зигзагу.

2. Отличный способ стилизовать иллюстрации. 

Сетка

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

Сетка — невидимый элемент практически любого дизайна. Сетка состоит

из определенного количества колонок и рядов, по которым можно выравнивать элементы дизайна.

1. Пятиколоночная сетка
2. Больше колонок — гибче сетка
3. Колонки и горизонтальный ряд

Масштаб

Направляет внимание на нужные элементы, расставляет акцентыакциенты, создает драматизм. В самом базовом смысле, масштаб — это конкретный размер отдельных элементов. 

Совсем не обязательно руководствоваться реализмом при выборе масштаба. Можно создавать невероятно большие или очень маленькие изображения, чтобы подчеркнуть, что в дизайне самое важное, а что — второстепенное.

Благодаря масштабу сразу понятно, насколько важен каждый персонаж.

Выражение важности информации с помощью масштаба.

Баланс

Чтобы освоить баланс, нужно видеть «вес» каждого элемента: от текстовых блоков до картинок. Нужно учитывать цвета, размеры, формы элементов и на основании этого оценивать их «вес» относительно других деталей.

3 типа баланса в дизайне:

• симметричный баланс;
• ассиметричный баланс;
• разбаланс.

Симметричный баланс

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

Ассиметричный баланс

Одной из разновидностей баланса является «асимметричный баланс», в котором верх/низ и право/лево не являются зеркальными отражениями друг друга. Асимметричный баланс достигается «уравновешиванием» элементов за счет размера и выравнивания.

Разбаланс

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

Симметрия

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

Виды симметрии: 

• зеркальная симметрия;
• круговая симметрия;
• трансляционная симметрия. 

Зеркальная симметрия

Зеркальная симметрия (или двусторонняя симметрия) возникает, когда две половины композиции, расположенные по разные стороны от центральной оси, являются зеркальными отражениями друг друга. Направление и ориентация оси чаще всего вертикальная или горизонтальная.

Круговая симметрия

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

Трансляционная симметрия

Трансляционная симметрия (или кристаллографическая симметрия) возникает, когда элементы повторяются через определенные промежутки. При помощи трансляционной симметрии можно создать ритм, движение, скорость или динамичное действие.

Контраст

В самом базовом смысле контраст означает степень различия между элементами дизайна. 

Контраст — отличный способ привлечь внимание к определенным деталям дизайна. 

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

• контраст формы;
• контраст размера;
• контраст цвета;
• обратный контраст.

Контраст также оказывает огромное влияние на разборчивость и читаемость текста. 

Иерархия

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

Способы управления визуальным весом:

• Размер
• Цвет
• Пространство
• Группировка

Повторение

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

Цель принципа повторения унифицировать визуальный язык, с помощью типографики, элементов и цвета сделать его простым и понятным.

Принцип повторения незаменим при создания фигменного стиля бренда.

Движение

Поток и направление внимания в дизайне играют важную роль при создании ощущения движения. Если ваша работа органично направляет поток внимания зрителя сверху вниз, слева направо, из точки А в точку Б — то дизайн будет «двигаться».

Ощущение движения создается при помощи:

• прозрачности;
• размытия;
• линий движения.

Глубина

Даже на самом плоском носителе можно создать ощущение глубины и иллюзию третьего измерения. Глубина делает плоский дизайн многомерным. 

Техники эффекта глубины:

• тени;
• перспектива;
• наложение элементов.

Беспорядок

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

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

Композиция

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

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

Цвет и текстура

Цвет

Цвет — это основа основ. Цвет создает определенное настроение и атмосферу, передает эмоции; каждый оттенок вызывает свои ассоциации. 

Как правильно использовать цвет:

• создайте сильную цветовую палитру;
• используйте правильный подбор цветов;
• учитывайте теорию цвета.

Теория цвета

Цвет — это признак объекта, который возникает из-за света, излучаемого или отражаемого этим объектом. Цвет можно визуально «проверить», оценив его свойства.

Свойства цвета:

• тон;
• яркость;
• хроматичность;
• насыщенность.

Свойства цвета. Тон

«Тон» часто путают с «цветом». «Цвет» — это обобщенное понятие, для обозначения всех тонов, полутонов и тональностей. «Тон» — это именно то, что мы имеем в виду, спрашивая «какого цвета эта вещь?». Это совокупность двенадцати чистых и ярких цветов, представленных на цветовом круге.

Из тона можно получить:

• оттенок — создается смешением какого-либо тона с белым;
• тень — смешение какого-либо тона с черным;
• тональность — добавление серого цвета.

Свойства цвета. Яркость

Яркость — это свойство, указывающее, насколько светлым/темным является цвет. Этот признак определяется степенью белизны. Чем больше белого было добавлено в тон, тем выше его яркость.

• Низкая яркость, постоянная — одинаковый уровень яркости.
• Контраст яркостей — ахроматичный.
• Контраст яркостей — полное различие яркости.

Свойства цвета. Хроматичность

Хроматичность — показывает чистоту тона. Этот признак оценивается на основе наличия белого, серого или черного в цвете. Двенадцать основных тонов имеют самую высокую степень хроматичности, так как не содержат никаких дополнительных элементов. Цвета с высоким хромом яркие и живые.

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

Свойства цвета. Насыщенность

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

Насыщенность цвета обозначает его отличие от серого при определённой яркости освещения. 

Цветовой круг

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

По типу цвета делится на:

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

Цветовые модели

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

RGB (Red Green Blue)

Цветовая модель, названная по трём заглавным буквам названий цветов, лежащих в ее основе: Red, Green, Blue. Служит для вывода изображения на экраны мониторов и другие электронные устройства. Обладает большим цветовым охватом.

CMY(K) (Cian Magenta Yellow Key (Black))

Используется в полиграфии для стандартной триадной печати и в сравнении с RGB-моделью обладает меньшим цветовым охватом. Название модели происходит от «cyan/magenta/yellow» — «циан/фуксин/жёлтый».

Цветовой баланс

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

Основные цветовые составляющие:

• Контраст — использование резко контрастирующих друг с другом цветов и оттенков позволяет подчеркивать остроту, пикантность, важность отдельных элементов или информации;
• Дополнение — цвета и оттенки, не конфликтующие друг с другом, а подчеркивающие, способные усилить эффект друг друга.  Лучшая палитра дополнений — природа.
• Резонанс — использование цветов, которые усиливают эмоцию в дизайне, передает настроение.

Сервисы для работы с палитрами

colorscheme.ru

color.adobe.com

paletton.com

palettable.io

flatcolors.net

palettable.io

Текстура

Текстура делает дизайн более глубоким и тактильным и привносит в него интересные эффекты и придает глубину. Использование текстуры должно быть уместно и осознанно.

Если в дизайне слишком много текстур, он выглядит перегружено. Существует тонкая грань между «потертым шиком» и просто потертым старым дизайном.

Пример перегруженного дизайна с использованием текстуры.

Пример хорошего дизайна. Текстура усиливает эффект винтажности.

Прозрачность

Степень прозрачности элемента показывает, насколько мы можем видеть «сквозь него». Чем выше прозрачность, тем легче и незаметнее выглядит элемент; чем ниже прозрачность — тем он массивнее.

• Прозрачность также отлично подойдет для создания эффекта движения в статичных изображениях.

• Прозрачность может быть не только показана в графике, можно использовать и материалы.

Типографика и верстка

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

Верстка — процесс работы над типографикой.  Типографика и верстка — два тесно связанных друг с другом понятия.

Классификация шрифтов

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

San-SerifШрифты без засечек, или «Гротеск» ArialHelveticaRobotoGeometriaTahomaVerdanaProximaOpen Sans

Serif fontsШрифты с засечками, или «Антиква» Times New RomanPT SerifGeorgiaAustin CyrBodoniPalatinoDidot

Декоративные шрифтыДля выделения и привлечения внимания.

Handwritting – рукописные шрифтыДля выделения и привлечения внимания.

Моноширинные шрифтыВсе шрифты, в которых длина букв по горизонтали одинаковая.

Символьные шрифтыПредставлены в виде иконок.

Анатомия шрифта

Шрифт состоит из букв, это не просто линии и круги, соединенные в знакомые формы. Каждая буква индивидуальна и формируется из множества элементов со своими названиями. 

Символы — это отдельные буквы, знаки пунктуации, цифры и прочие элементы в типографском наборе.

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

Прописные буквы — это заглавные буквы, отличающиеся от строчных размером, а иногда и начертанием.

Линия шрифта — воображаемая линия, проходящая по нижнему краю строчных символов без учета нижних выносных элементов.

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

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

Гарнитура шрифта

Гарнитура — семейство начертаний шрифтов, объединенных общими стилевыми признаками, отличными от других шрифтов.

Насыщенность

Насыщенность — определяется изменением толщины основных и соединительных штрихов одноименных знаков.

Кегль

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

Интерлиньяж и межстрочный интервал

Интерлиньяж — расстояние между линиями шрифта соседних строк

в тексте. Складывается из кегля шрифта и межстрочного интервала.

Межстрочный интервал — расстояние между строками или расстояние от линии шрифта до верхней линии строчных букв на следующей строке.

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

Трекинг и кернинг

Трекинг — это расстояние между символами, изменение плотности текста.

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

Шрифтовые пары

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

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

Верстка. Колонки

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

Верстка. Выключка

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

Предлоги и союзы в конце строки

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

Многоточие

Многоточие — это самостоятельный знак, а не три точки, набранные подряд. Отличаются они шириной знака. В палитре символов для этого есть специальный знак многоточия.

Тире и дефис

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

Короткое тире —  ставится между числами. По бокам короткого тире пробелы не ставят.

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

Полезные сервисы

https://almanac.readymag.com/fonts/   Комбинации шрифтов

https://www.paratype.ru/   Комбинации шрифтов

https://fonts.google.com/   Бесплатные шрифты

https://typejournal.ru/   Журнал о шрифте и типографике

https://orfogrammka.ru/ ; Проверка текста

https://www.artlebedev.ru/typograf/ ; Проверка текста