VADENS
обучение руководителей
развитие организаций
визуальное
оформление
презентаций
Михаил Плотников
1
Михаил Плотников
• доктор социологических наук, МВА
• директор бизнес-школы Vadens
• профессор ВШЭ
• консультант по управлению и развитию
организаций
• партнер по управлению ОЭЗ «Иннополис»
Содержание
1
2
3
настройка
шаблонов
организация
контента
дизайн и
эргономика
шрифты – цвета - слайды
сообщения – данные
функциональность - тренды
3
настройка
шаблонов
4
настройка шаблонов
организация контента
дизайн и эргономика
Шрифт
44 Заголовок
18 Основной текст
12
Комментарий
Regular, Bold или Black
в 2-3 раза больше основного текста
Обычный
ЗАГЛАВНЫЕ
МАЛЫЕ ПРОПИСНЫЕ
только Regular
выделение Bold, Black или Italic
интервал
уплотнённый
разреженный
Regular или Italic
в 1,5 – 2 раза меньше основного цвета
для подписей, уточнений, второстепенных сведений
5
настройка шаблонов
организация контента
дизайн и эргономика
https://fonts-online.ru/fonts
https://fonts.google.com/
https://www.fontsquirrel.com/
Шрифт
без засечек
Arial
Calibri
Century Gothic
Roboto
Helvetica
Open Sans
свободно используйте их
для всех типов текста
с засечками
Century
Times New Roman
Bell MT
Cambria
Georgia
Perpetua
используйте их только для заголовков
или не используйте вовсе
6
настройка шаблонов
организация контента
дизайн и эргономика
Абзац
Минимум 40 символов
Ширина текста определяет, с какой
скоростью его будут читать и какое
напряжение это создаст.
Более узкие абзацы читаются быстрее и
легче, однако слишком частые разрывы
предложений из-за переносов могут
нарушать целостное восприятие.
Между абзацами лучше делать отступ на
1/3 – 2/3 размера основного шрифта.
Кроме того вы можете использовать
красную строку (на 3-5 символов). В этом
случае отступ между абзацами не обязателен.
Это будет выглядеть немного старомодно
и по-книжному. Читается текст при таком
разделении заметно тяжелее. Но, если такова
ваша задумка – почему бы и нет.
В этом случае обязательно выравнивайте
абзац по ширине. Иначе два неровных края
могут окончательно запутать читателя.
Максимум 70 символов
Более широкие абзацы позволяют передать больше содержания и
неразрывного текста, однако они читаются медленнее и требуют большей
концентрации при переходе на новую строку.
7
настройка шаблонов
организация контента
дизайн и эргономика
Цвет
текст
основное
акцент
главное
фон
текст
незаметное
основное
тень
акцент
второстепенное
Используйте не больше четырёх базовых
цветов в одной презентации. У каждого есть
своё функциональное назначение.
главное
фон
незаметное
тень
второстепенное
Используйте не больше четырёх базовых
цветов в одной презентации. У каждого есть
своё функциональное назначение.
8
настройка шаблонов
организация контента
дизайн и эргономика
https://color.adobe.com/ru/create/color-wheel
Палитра
последовательная
монохромная
комплементарная
сплит
треугольная
квадратная
9
настройка шаблонов
организация контента
дизайн и эргономика
Сетка
Пересечение линий указывает
на точки фокусировки внимания.
Ориентируйтесь на них при
выстраивании композиции
слайда.
10
настройка шаблонов
организация контента
дизайн и эргономика
Неправильно
Привет!
Я – фото какого-то человека со
стокового сайта. Ничего, если я
тут побуду?
11
настройка шаблонов
организация контента
дизайн и эргономика
Правильно
Привет!
Я – фото какого-то человека со
стокового сайта. Ничего, если я
тут побуду?
12
настройка шаблонов
организация контента
дизайн и эргономика
Поля и колонтитулы
Никогда
Ни при каких условиях
Совсем никогда
То есть – вообще не вариант
не нарушайте поля!
основным содержанием слайда
Используйте поля для колонтитулов
 раздел, навигация
 бренд / контакты
 номер слайда
 референс, копирайт
13
настройка шаблонов
организация контента
дизайн и эргономика
Элементы
Это основной текст слайда. Он передаёт сообщение,
рассказывает о разных интересных вещах.
Не делайте его слишком длинным.
И по возможности выделяйте ключевые аспекты.
Это просто котик.
Здесь он работает
ключевым образом,
который помогает
уловить суть слайда и
запомнить его.
14
настройка шаблонов
организация контента
Элементы
дизайн и эргономика
название
провокация
вывод
образ
иллюстрация
украшение
Это основной текст слайда. Он передаёт сообщение,
рассказывает о разных интересных вещах.
сообщение
Не делайте его слишком длинным.
И по возможности выделяйте ключевые аспекты.
данные
объяснение
фокус внимания
вывод
перечень
справка
Это просто котик.
Здесь он работает
ключевым образом,
который помогает
уловить суть слайда и
запомнить его.
главное
цитата
заключение
15
организация
контента
16
настройка шаблонов
организация контента
дизайн и эргономика
Основной слайд
сюда можно добавить подзаголовок
Что вы хотите сказать этим слайдом
 сообщить тезис
 привести список
 показать последовательность, процесс или цикл
 отразить иерархию или отношение частей
какое средство
будет передавать
основную идею
Текст
Схема
Образ
идея
средство
композиция
Таблица
Диаграмма
17
настройка шаблонов
организация контента
дизайн и эргономика
Титульный слайд
может начинать или заканчивать раздел или презентацию
18
настройка шаблонов
организация контента
дизайн и эргономика
Титульный слайд
можно использовать для объявления
19
настройка шаблонов
организация контента
Рисунки
дизайн и эргономика
https://www.flickr.com/
https://unsplash.com/
https://www.everypixel.com/
Стиль
используйте все
иллюстрации и рисунки
одного стиля – фото, флэтарт, наброски, анимация…
20
настройка шаблонов
организация контента
дизайн и эргономика
Рисунки
«бразильцы»
реальное фото
21
настройка шаблонов
организация контента
Видео
дизайн и эргономика
https://ru.freepik.com/videos
https://stock.adobe.com/ru/free/video
https://www.shutterstock.com/ru/royalty-free/video-categories
https://lifehacker.ru/16-stock-video-sites/
Видеозаписи или анимации
могут заметно оживить
презентацию и придать ей
необходимую выразительность
22
настройка шаблонов
организация контента
дизайн и эргономика
Таблицы
чёткий акцент
на выводе
дополнительное поле
(столбец) для итогов
лидеры отгрузок в I квартале – колбаса и сыр
янв
фев
мар
колбаса
12
13
16
молоко
5
6
хлеб
8
сыр
фрукты
янв
фев
мар
ВСЕГО
колбаса
12
13
16
41
7
молоко
5
6
7
18
8
7
хлеб
8
8
7
23
11
13
13
сыр
11
13
13
37
1
2
17
фрукты
1
2
17
20
нет лишних
деталей и фона
неправильно
выделение
главного
правильно
23
настройка шаблонов
организация контента
Диаграммы
важно акцентировать вывод
неправильно
дизайн и эргономика
дизайн одной конкретной
идеи графика
чёткий акцент
на выводе
нет лишних
деталей и фона
выделение
главного
правильно
24
дизайн и
эргономика
25
настройка шаблонов
организация контента
дизайн и эргономика
https://1ps.ru/blog/ctr/2017/na-chto-lyudi-obrashhayut-vnimanie-pri-prosmotre-sajta/
Тепловая карта взгляда
На что обращают внимание
1. Лица
2. Направление взгляда
3. Непривычное, неожиданное
4. Еда
5. Сексуальность
6. Агрессия, погоня
7. Цифры, числа
8. Перечеркивающие элементы
9. ТОП-5 из списка
10. Перспектива
26
настройка шаблонов
организация контента
дизайн и эргономика
https://www.flaticon.com/
Стиль иконок
неправильно
Стиль
все иконки должны быть
выполнены в едином стиле
и гармонировать с цветами темы
Размер
размер иконок должен быть
сопоставимым с размером шрифта
заголовка или основного текста
Положение
иконка должна располагаться в
точке притяжения внимания и иметь
достаточно пространства вокруг
правильно
Стиль
все иконки должны быть
выполнены в едином стиле
и гармонировать с цветами темы
Размер
размер иконок должен быть
сопоставимым с размером шрифта
заголовка или основного текста
Положение
иконка должна располагаться в
точке притяжения внимания и иметь
достаточно пространства вокруг
27
настройка шаблонов
организация контента
дизайн и эргономика
https://www.flaticon.com/
Размер иконок
Стиль
Стиль
Размер
Размер
Положение
Положение
все иконки должны быть
выполнены в едином стиле
и гармонировать с цветами темы
размер иконок должен быть
сопоставимым с размером шрифта
заголовка или основного текста
иконка должна располагаться в
точке притяжения внимания и иметь
достаточно пространства вокруг
неправильно
все иконки должны быть
выполнены в едином стиле
и гармонировать с цветами темы
размер иконок должен быть
сопоставимым с размером шрифта
заголовка или основного текста
иконка должна располагаться в
точке притяжения внимания и иметь
достаточно пространства вокруг
правильно
28
настройка шаблонов
организация контента
дизайн и эргономика
https://www.flaticon.com/
Положение иконок
неправильно
Размер
Положение
Стиль
все иконки должны быть
выполнены в едином стиле
и гармонировать с цветами темы
размер иконок должен быть
сопоставимым с размером шрифта
заголовка или основного текста
иконка должна располагаться в
точке притяжения внимания и иметь
достаточно пространства вокруг
правильно
Стиль
все иконки должны быть
выполнены в едином стиле
и гармонировать с цветами темы
Размер
размер иконок должен быть
сопоставимым с размером шрифта
заголовка или основного текста
Положение
иконка должна располагаться в
точке притяжения внимания и иметь
достаточно пространства вокруг
29
настройка шаблонов
организация контента
дизайн и эргономика
https://www.flaticon.com/
Лица и текст
Это очень классная штука.
Всецело рекомендую!
картинка и текст не связаны
Это очень классная штука.
Всецело рекомендую!
жест указывает на текст
Это очень классная штука.
Всецело рекомендую!
Это очень классная штука.
Всецело рекомендую!
отвернулся от текста
неправильно
смотрит на текст
правильно
30
настройка шаблонов
организация контента
дизайн и эргономика
https://www.flaticon.com/
Оттеняющие и акцентные элементы
Заголовок
пояснение заголовка
Акцентная линия отделяет
заголовок и позволяет
воспринимать его отдельно
от основного текста.
Заголовок
Заголовок
Акцентная линия отделяет
заголовок и позволяет
воспринимать его отдельно от
основного текста.
Заголовок
Оттеняющий круг полутона
тени связывает заголовок и
текст воедино, позволяя
воспринимать их как целое.
пояснение заголовка
пояснение заголовка
Оттеняющий круг полутона
акцента привлекает
внимание, но не отделяет
текст от заголовка.
пояснение заголовка
31
настройка шаблонов
организация контента
дизайн и эргономика
https://www.flaticon.com/
Крупные числа
31
Именно такой номер
этого слайда. Это
занятный и ничего не
значащий факт.
7
Слайдов в этом разделе вы
уже посмотрели. И обратите
внимание – здесь мы говорим
про крупные числа.
12 символов
содержит заголовок этого слайда
а сколько их всего на этом слайде Вы даже не
представляете! и мы, кстати, тоже
32
настройка шаблонов
организация контента
дизайн и эргономика
Читабельность текста
https://www.flaticon.com/
Текст здесь контрастный, жирный,
и на однотонной части рисунка
Текст здесь на полупрозрачной
контрастной подложке. Её можно
делать светлой, тёмной или блур.
Текст здесь неконтрастный, тонкий,
расположен на пёстрой части
рисунка и поэтому почти не читается
Здесь для текста использовано
отдельное контрастное поле.
А здесь сама картинка заблурена и
затемнена, так что жирный
контрастный текст отлично читается.
33
Присоединяйтесь VADENS
www.vadens.org
+7 910 870 1593
info@vadens.org
https://smmplanner.com/blog/triendy-dizaina-osnovnyie-tiendientsii-i-napravlieniia/
https://merehead.com/ru/blog/graphic-design-trends-for-2024/
20
23
бонусный раздел
20
24
35
Нейросети
Midjourney
DALL-E
Kandinsky
Шедеврум
Изображения и
иллюстрации,
сгенерированные
нейросетями.
36
Креативная типографика
Надписи, которые выглядят как изображения.
37
Яркий минимализм
Однотонный фон, простая чёткая надпись и один отчётливый образ.
38
Стикеры
Яркие стикеры подчёркнуто иного стиля на спокойном нейтральном изображении.
39
Градиенты
Градиентный фон смежных или комплементарных цветов. Однотонный чёткий шрифт.
40
Детский рисунок
Стилизация под крупные и плавные детские рисунки карандашами.
41
Психоделика
Многоплановые контрастные повторяющиеся узоры со множеством мелких деталей.
42
Нестандартное положение текста
Наклонный текст, текст на выделенном фоне и лентах, выделяющие элементы за текстом.
43
Крупные изображения
Основной объект подчёркнуто близко к наблюдателю, не помещающийся в кадр.
44
Несовершенная ботаника
Подчёркнуто крупные незавершённые образы цветов и растений в пастельных тонах.
45
Монохромный
минимализм
Максимально упрощённые формы,
монохромная палитра, много воздуха.
46
Затёртость
и зернистость
47
Сочетание
2D и 3D
48
Конфетные
цвета
49
Голографический
дизайн
Тёмный фон и неоновый градиент шрифта
50
Приглушённые цвета природы
51
Антидизайн
Подчёркнутая социальная и культурная
роль объекта с отрицанием эстетики и
гармонии визуального ряда.
52
Скрученные шрифты
53
Присоединяйтесь VADENS
www.vadens.org
+7 910 870 1593
info@vadens.org