20 сториттеллинг в дизайне

1. Дисциплина «Дизайн-мышление»

Сторителлинг в дизайне

2. Почему факты не работают, а истории — работают?

3. Что такое сторителлинг?

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

4. Почему истории работают лучше сухих фактов?

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

5. Почему сторителлинг важен именно для графического дизайнера?

6. Сфера и как там работает сторителлинг

Логотип и айдентика
Веб-дизайн и интерфейсы
• Логотип не просто значок. У
него есть история создания,
идея, смысл. Когда вы
рассказываете клиенту,
почему выбрали этот
шрифт и эту форму, вы
продаёте не картинку, а
историю ценности.
• Пользователь не просто
«кликает по кнопкам». Он
совершает путешествие
по вашему сайту. Хороший
дизайн рассказывает
историю: «Ты здесь, чтобы
решить свою проблему, иди
по этому пути, и в конце
тебя ждет награда».

7. Сфера и как там работает сторителлинг

Упаковка
Плакат и наружная реклама
• Когда человек берет
коробку с полки, у него есть
доли секунды, чтобы
принять решение. Упаковка
должна рассказать миниисторию: откуда этот
продукт, кто его сделал,
какие эмоции он дарит.
• У вас 3 секунды. Ваш
плакат должен рассказать
историю, которая "зацепит"
взгляд, вызовет эмоцию,
заставит задуматься или
улыбнуться.

8. Сфера и как там работает сторителлинг

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

9. Базовая структура истории: на чем строится сторителлинг

Классическая схема:
• Экспозиция: Кто герой? Где он? Что хочет?
• Завязка (Конфликт): Что-то идет не так. Возникает
проблема, препятствие.
• Развитие: Герой пытается решить проблему, встречает
помощников, учится.
• Кульминация: Момент высшего напряжения. Главное
действие.
• Развязка (Финал): Проблема решена. Герой изменился.

10. Как это выглядит в дизайне (пример с сайтом или приложением)

• Экспозиция: Пользователь приходит на главный экран. Мы
показываем ему, кто мы, и что он здесь получит. (Герой —
пользователь, его желание — решить проблему).
• Завязка: Пользователь сталкивается с трудностью: не понимает, куда
нажать, где найти нужный товар. (Конфликт). Наша задача —
провести его за руку, снять напряжение.
• Развитие: Пользователь просматривает товары, читает описание,
добавляет в корзину. (Он движется к цели).
• Кульминация: Нажатие кнопки «Оформить заказ» или «Оплатить».
Самый ответственный момент.
• Развязка: Экран «Спасибо за заказ!». Пользователь испытывает
удовлетворение, облегчение, радость.

11. Инструменты сторителлинга

Композиция как сценарий
Визуальная иерархия
В хорошей композиции есть своё начало,
развитие и финал. Взгляд зрителя
движется по листу не хаотично, а по
маршруту, который вы проложили. Вы
задаете:
• Точку входа: куда смотреть в первую
очередь (обычно самый крупный или
яркий элемент).
• Путь движения: как взгляд перетекает
от одного элемента к другому (линии,
ритм, направление объектов).
• Точку выхода: что зритель должен
запомнить, на чем задержаться
(кульминация).
История имеет главного героя и
второстепенных персонажей. В дизайне
— главный объект (заголовок, главная
кнопка, центральное изображение) и
второстепенные (подзаголовки, иконки,
декоративные элементы). Иерархия
подсказывает зрителю: «Вот это важно,
читай сначала, а это — дополнительная
информация».

12. Инструменты сторителлинга

Цвет как эмоция
Шрифт как голос героя
Цвет в истории — это настроение сцены.
• Яркие, теплые цвета (желтый,
оранжевый) — история про радость,
энергию, детство.
• Холодные, приглушенные (синий,
серый) — история про спокойствие,
профессионализм, грусть,
технологичность.
• Резкий контраст (черный-красный) —
история про конфликт, опасность,
страсть.
Смена цвета на разных экранах сайта
может рассказывать о смене
эмоционального состояния пользователя
(например, от тревоги на старте к
Представьте, что шрифт — это голос,
которым говорит ваш герой (или
рассказчик).
• Строгий рубленый шрифт (гротеск) —
сухой, деловой голос. История про
бизнес, технологии.
• Элегантная антиква — голос
аристократа, история про традиции,
дороговизну.
• Рукописный шрифт — личный,
эмоциональный голос. История про
тепло, ручную работу, душу.
Выбор шрифта должен соответствовать
истории, которую вы рассказываете.

13. Инструменты сторителлинга

Нарратив в серии
(многокадровость)
Часто дизайн — это не один
образ, а серия. Например,
карусель в Instagram, несколько
страниц сайта, развороты
журнала. Здесь можно
выстроить полноценное
повествование кадр за кадром.
Первый экран задает вопрос,
второй дает частичный ответ,
третий — кульминация,
четвертый — призыв к

14. Типы историй в дизайне

История героя (Пользователь как герой). Самый эффективный тип. Не бренд
— герой, а клиент становится героем. Бренд — лишь волшебный помощник,
который дает ему инструмент (меч, карту, волшебное зелье). «Ты — главный.
Ты справишься. Мы тебе просто поможем».
• История происхождения (Origin story). Как бренд появился на свет? Кто
его создал? Зачем? Например, история про дизайнера, который не мог
найти удобный стул для своей спины, и решил сделать его сам. Это
вызывает доверие и симпатию.
• История трансформации. «Было — стало». Показывает, как продукт
меняет жизнь пользователя. Например, «Раньше у меня была скучная и
неудобная визитка, а теперь — такая, что все её запоминают». Очень
наглядно для дизайнера.
• История сообщества. «Мы — это не просто компания, мы — семья».
Рассказ о людях, которые стоят за продуктом, об их ценностях, традициях,
совместных активностях.

15. Как применять сторителлинг на практике (алгоритм)

Шаг 1. Определите героя
Шаг 2. Опишите его путь
• Кто ваш пользователь?
(Абитуриент, студент,
который хочет сменить
профессию). Какой у него
страх? (Страх, что не
получится, что зря потратит
деньги). Какая у него
мечта? (Стать
востребованным
дизайнером, работать на
От первого касания с брендом до момента, когда он
купил курс.
• Осознание: "Я хочу научиться дизайну, но не
знаю с чего начать".
• Исследование: "Смотрю разные школы,
сравниваю программы, читаю отзывы".
• Сомнение: "А потяну ли я? А найду ли я
работу?".
• Решение: "Здесь дают практику, портфолио и
поддержку. Я готов".
• Действие: Оплата.
• После: Обучение, создание проектов,
трудоустройство.

16. Как применять сторителлинг на практике (алгоритм)

Шаг 3. Спроектируйте дизайн под этот путь
• Блок 1 (Экспозиция): Покажите
героя (фото студента, который
начинал с нуля). Текст: «Мечтаешь
стать дизайнером, но боишься?».
• Блок 2 (Конфликт): Покажите
проблемы: сложные программы,
конкуренция, непонимание, где
брать заказы.
• Блок 3 (Помощник — ваша
школа): Покажите, как вы решаете
эти проблемы (кураторы,
практические задания, помощь с
трудоустройством).
• Блок 4 (Кульминация): Кнопка
«Записаться на курс» — это момент
принятия решения. Сделайте её
заметной, вдохновляющей.
• Блок 5 (Развязка): Отзывы
реальных студентов, которые уже
стали дизайнерами. Это история
успеха, которую прожили другие.

17. Ошибки сторителлинга в дизайне

• Бренд — главный герой. «Мы такие крутые, у нас есть это и это».
Пользователю всё равно на вас. Ему важно, что он получит.
• Отсутствие конфликта. История, в которой нет проблемы, — это не
история, это скучная констатация факта. «У нас есть товар. Он
хороший. Купите». Не работает.
• Слишком длинная история. В дизайне время зрителя ограничено.
Если вы не уложились в 3-5 секунд на плакате или в 30 секунд на
сайте — вас не заметят. Лаконичность — сестра таланта.
• Разрыв между историей и визуалом. Вы рассказываете историю
про экологичность и натуральность, но используете кислотно-розовые
цвета и глянцевую пластиковую упаковку. История не совпадает с
визуальным языком — возникает диссонанс и недоверие.

18. Заключение и ключевые тезисы

• Не просто «красиво», а «смыслово». История превращает
визуальный объект в носитель ценности и эмоции.
• Инструмент управления вниманием и действием. С помощью
истории мы ведем пользователя по нужному пути и подводим к цели.
• Структура, которую можно спроектировать. У любой истории есть
экспозиция, конфликт, развитие, кульминация и развязка. Этот каркас
можно наложить на сайт, приложение, презентацию, упаковку.
• Инструмент эмпатии. Чтобы рассказать хорошую историю, нужно
хорошо понимать своего героя — пользователя. Его боли, страхи,
мечты.
• Навык, который отличает дизайнера-исполнителя от дизайнерастратега. Клиенты платят не за картинки, а за истории, которые эти
картинки рассказывают и за результат, который эти истории приносят.

19. Вопросы

1. Вспомните рекламу или упаковку, которая вас недавно
зацепила. Какая история там рассказывалась? Кто был
героем?
2. Почему в интерфейсах «умных» устройств (фитнес-браслеты,
приложения для здоровья) так важен сторителлинг с
пользователем в главной роли? Что произойдет, если просто
выводить сухие цифры (шаги, калории)?
3. Как можно использовать сторителлинг в оформлении своего
портфолио? Какую историю о вас как о дизайнере оно
рассказывает сейчас?
4. Может ли минималистичный дизайн (минимум цвета, форм,
текста) рассказывать истории? Если да, то за счет чего?