Как недизайнеру создать крутую презентацию?

Автор: Андрей Летницкий
«Дизайн не должен доминировать над людьми. Дизайн должен помогать им. В этом его роль.»
Дитер Рамс, промышленный дизайнер, ведущий дизайнер фирмы Braun с 1962 по 1995 год.
Первая книга о дизайне, которую я прочитал, была «Дизайн для НЕдизайнеров». Ее автор, Робин Вильямс, наглядно показала, как работают главные принципы дизайна и как они влияют на наше восприятие информации. В качестве примеров выступали привычные нам всем вещи: визитки, буклеты, страницы сайтов, пригласительные и др.

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

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

Четыре принципа, о которых
пишет Робин Вильямс


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

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

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

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

На некоторые картинки можно навести, чтобы почитать детали изменений. Поехали!

Слайд №1

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

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

Увеличенная картинка стала более эмоциональной и сильнее привлекает внимание.

Слайд №2

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

Слайд №3

Исходный слайд выглядит неаккуратно: подзаголовки сливаются с текстом, выравнивание по центру ухудшает читаемость текста.
Начнем с приближения. В данном случае, следует разделить текстовые блоки:
Теперь расстояние между ними позволяет определить, где заканчивается первый блок и начинается второй. Элементов стало больше, но связь между ними более очевидная.
Следующий шаг — выравнивание:
Для читателя всегда привычнее, когда строки текста двигаются по ровной линии, а взгляду не приходится «искать» начало следующей строки. Если текст содержит несколько коротких строк, то выравнивание по правой стороне может быть удобным. Но когда строк много — читаемость снизится. Поэтому я выровнял текст на слайде по левому краю.
Теперь добавим контраст в заголовки и подзаголовки:
Также здесь реализуется принцип повторения. Единый стиль подзаголовков позволяет нам понять, что это два равнозначных текстовых блока и они относятся к одному делу.

Слайд №4

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

Слайд №5

Первым шагом следует навести порядок в тексте.
Принцип приближения поможет соотнести улики и пояснения к ним.
На исходном слайде можно подумать, что «без отпечатков» не стакан, а «Мяч для гольфа».
Это касается и других элементов.
Добавим контраст подзаголовкам:
Теперь нам легче соотнести подзаголовки и второстепенный текст.
Для удобства можно выровнять текст по левому краю:
Выравнивание дает возможность легче прочитать список, ведь теперь каждый его элемент расположен вдоль условной ровной линии.
Очевидно, что изображение слишком мелкое. Увеличив его, мы применим сразу два принципа — приближение и контраст:
В результате мы получили аккуратный слайд с понятной структурой.

Слайд №6

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

Слайд №7

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

Слайд №8

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

Слайд №9

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

Принцип повторения (бонус)

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

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

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

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

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

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

Резюме

В статье мы рассмотрели 4 базовых принципа дизайна:

1. Приближение — если хотите, чтобы элементы воспринимались как одно целое, расположите их рядом.

2. Выравнивание — для создания и поддержания порядка в презентациях располагайте элементы по заданному вами же правилу.

3. Контраст — если хотите обратить внимание на какой-то элемент, сделайте его заметно отличающимся от других.

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

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


И в завершение

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