Рассматриваем техники живописи и архитектуры, которые помогут улучшить дизайн презентации
Мы привыкли искать вдохновение в кейсах на Behance и Dribbble. Но вдохновляться можно не только работами современников. Дизайн развивался под влиянием искусства, так что лайфхаки от Да Винчи или Климта будут не менее полезны.
Чем дизайн отличается от искусства? Он служит прикладным задачам: привлечь внимание и донести до людей информацию.
Чем дизайн похож на искусство? Он задействует визуальный канал восприятия. Даже при создании презентации нужно понимать, как работает цвет, форма и композиция.
Шедевры мирового искусства в этом лучшие помощники, и мы решили рассказать вам о правилах живописи и архитектуры, которые полезны дизайнеру.
Тектоника: делаем понятную структуру
Структурная ясность – важный принцип современного дизайна, который впервые сформулировали древние греки. Они стремились к порядку во всем. При беглом взгляде на античный храм сразу понятно, как он построен и из каких частей состоит. Это свойство называется тектоникой.
Тектоника – отличительный принцип древнегреческого зодчества, который полюбился и многим современным архитекторам. Благодаря ясности построения фасад выглядит надежным и устойчивым. А еще такие здания удобны для людей: их форма, входы и выходы понятны и предсказуемы.
Визуальные коммуникации нередко сравнивают с архитектурой. Презентация, как здание, должна быть крепкой, убедительной и последовательной.
В основе тектоники лежит разделение целого на части. Каждый элемент фасада четко просматривается. В хорошей презентации все то же самое. Есть группы слайдов одной тематики, есть каждый отдельный слайд и информационные блоки, расположенные на этом слайде. Чем длиннее повествование, тем больше требуется структурных единиц.
Хорошая презентация, как греческое строение, предсказуема. В европейской культуре мы привыкли читать сверху вниз и слева направо – именно так глаза зрителя будут скользить по слайду с текстом. Нужно, чтобы блоки информации были последовательными и подчинялись единой логике, а не хаотично болтались на экране.
Наконец, важна функциональность деталей. В греческом храме каждая мелочь на своем месте. И в дизайне важную роль играют акценты. Маркеры, иконки и рамки помогают привлечь внимание зрителя или показать связь одного элемента с другим.
Alt: Конструкция фасада четко просматривается. А мелкие детали в местах соединения элементов служат акцентами: они помогают с первого взгляда понять, что структура греческого храма логичная и надежная
Точно так же и в презентациях:
Alt: Название слайда – это фундамент, его основная идея. Содержание – надстройка, которую важно разделять на более мелкие структурные единицы. Это сделано с помощью столбцов и подчеркнуто цветовыми акцентами
Гризайль: ищем тональные контрасты
Если информации много, слайды будут сложными по своей структуре. Чтобы избежать беспорядка, важно соблюдать тональный контраст: соотношение темных и светлых пятен на экране. Художники со времен Средневековья для этих целей делали монохромные эскизы – эта техника называется гризайль.
Гризайль помогает выявить главные тональные контрасты, чтобы сохранить их в полноцветном изображении.
Именно тон помогает нам различать границы предметов. Мы без проблем понимаем, что изображено на черно-белых картинах или фотографиях. Цвет определяет настроение, но он вторичен при восприятии фигур в пространстве.
Часто веб-дизайнеры начинают работу с черно-белых прототипов. Это может быть актуально и при создании презентаций, чтобы избежать ошибок.
Alt: Здесь взгляду не за что зацепиться. Есть ощущение, что фон сливается с иконками и текстом: изображения не бросаются в глаза, а мелкий текст трудно прочесть
В любой непонятной ситуации можно перевести картинку в черно-белые тона, чтобы понять ошибку.
Alt: На слайде полностью отсутствуют темные тона, поэтому иконки не яркие, а текст смазанный
В монохроме проблема стала очевидной. Если сделать фон темнее, композиция заиграет по-новому.
Alt: Теперь все элементы четко видны и текст различим
Сфумато: подчеркиваем единство элементов
Мы поговорили о разделении информации на структурные единицы, но не менее важна связь элементов друг с другом: особенно в тех случаях, когда требуется отразить фирменный стиль компании.
Сфумато – это живописная техника, которая заключается в смягчении контуров с целью показать единую воздушную среду. Именно так писал свои картины Леонардо Да Винчи. Плавные цветовые переходы создают ощущение общности пространства и, следовательно, гармонии.
Единство должно быть и в дизайне презентаций. Самая очевидная аналогия сфумато в дизайне – это градиенты.
Alt: Разница цветов помогает визуально разделить текстовые блоки. Мягкие переходы делают слайд однородным и гармоничным
Конечно, не градиентами едиными жив дизайнер. Давайте посмотрим на идею сфумато более широко: цель этой техники – добиться визуального единства. Для этого следует подбирать подходящие друг к другу шрифты, сочетания цветов и графические техники.
Alt: На слайде мы видим одновременно четкую структуру и целостность. Это достигается за счет синей цветовой гаммы и округлых форм, которые повторяются в шрифте и в графических элементах справа
Негативная техника: придаем значение фону
Создавая презентацию, мы перемещаем по экрану заголовки, блоки текста, фотографии и иконки. Фон – относительно статичная штука, о которой легко забыть. Но даже участки слайда, на которых отсутствует какой-либо контент, влияют на общее впечатление.
Негативная техника – термин художников-акварелистов. Из-за отсутствия белой краски они вынуждены оставлять светлые объекты нетронутыми и использовать белые участки листа как полноправные части композиции. Например, как белые цветы на следующей картинке:
Области на листе бумаги или на экране, в которых отсутствуют изображения, называются негативным пространством. Обычно они воспринимаются на слайдах как задний план, поверх которого наложены фигуры: фотографии, картинки и блоки текста. Но чтобы сделать визуальное сопровождение более интересным, можно, подражая акварелистам, превращать части фона в фигуры. Это популярный прием в дизайне фирменного стиля и рекламы, который хорошо работает и в визуальных коммуникациях.
Alt: На этом слайде кусок белого фона как бы выдвинут на передний план и перекрывает часть женского лица. Это делает фотографию более интересной, привлекает к ней повышенное внимание
Негативное пространство позволяет добавить в дизайн креатива, сохраняя лаконичность – для оформления презентаций это ценный прием.
Конечно, не всегда фон переходит в фигуры: чаще всего он остается сзади. Но при этом фон всегда является частью композиции, ведь пустое пятно имеет свой тон, цвет, размер и форму. Мы работаем с негативным пространством, даже не осознавая этого, когда создаем любой дизайн.
Alt: Мы видим четкий цветной рисунок благодаря белому бэкграунду. Кроме того, белые треугольники фона связывают композицию: без них текст просто болтался в воздухе
В большинстве случаев дизайн смотрится хорошо, когда участки фона относительно равномерно распределены между фигурами. В презентации нужны места, на которых зритель будет концентрировать внимание, и пустые области, на которых взгляд будет отдыхать. Если пустоты слишком маленькие, слайд будет казаться переполненным, в информации будет трудно ориентироваться. Если пустоты большие, взгляд проваливается в эти ямы, а зритель отвлекается от содержания.
Орнаментальность: заботимся о красоте
С древних времен люди стремились окружать себя красотой: достаточно вспомнить любое декоративно-прикладное творчество. У разных народов были свои орнаменты — несложные повторяющиеся узоры, которые сравнительно легко воспроизводить на любых носителях. В эпоху модерна началось слияние классического искусства с декоративным, и для этого направления особенно характерна орнаментальность.
Alt: Мы видим повторение простых элементов в картинах Климта или в архитектуре Гауди
Работы мастеров модерна отражают не реальную жизнь, а буйство фантазии, они заряжают зрителя определенными эмоциями. Это пригодится и при оформлении презентаций: чтобы создать нужное настроение, сделать содержание живым, динамичным и убедительным.
В визуальных коммуникациях ценится минимализм и функциональность. Но презентации без красивых деталей заставят людей скучать. Дизайнеры ищут золотую середину и нередко используют принцип орнаментальности – повторение простых декоративных элементов.
Повторяющиеся рамки, фигуры или маркеры задают нужное настроение, но не перетягивают на себя внимание. Логика орнамента проста и понятна, так что зритель будет думать о содержании слайда, не отвлекаясь на художественные изыски.
Alt: Левая часть презентации построена на повторении квадратов, накладывающихся друг на друга. Эти элементы задают настроение слайда, но не конфликтуют с текстом – за счет простых повторяющихся форм
Итак, принцип орнаментальности учит нас, что для презентаций хороши шаблоны с простыми декоративными элементами, которые будут многократно воспроизводиться. Они помогают оживить текст, не рассеивая внимание зрителя.
Выводы
- Перед началом работы представьте себя архитектором. Придумайте понятную конструкцию презентации и поделите информацию на структурные единицы.
- Сделайте монохромный эскиз слайдов – в графическом редакторе, на листе бумаги или хотя бы мысленно. Выделяйте блоки информации с помощью контрастов светлого и темного.
- Создайте единую визуальную среду, чтобы связать элементы на слайде друг с другом. В этом могут помочь плавные переходы, единство цветовой гаммы или графических приемов.
- Помните, что важно не только расположение картинок и текста по отношению друг к другу, но и соотношения пустот между ними. Используйте фон как часть композиции.
- Люди с трудом воспринимают сухую информацию. Хорошая презентация – эмоциональная. Используйте для оформления слайдов орнамент – простой рисунок, который будет повторяться во всей презентации.