ypx
INTENSIVE
Попробуй себя в UX/UI-дизайне UX/UI-дизайн бесплатно
7 дней
5 проектов в портфолио
проверка дз
banner-circle
INTENSIVE
Попробуй себя во Frontend разработке Frontend бесплатно
7 дней
1 полноценный проект
проверка дз
banner-circle
Зачем дизайнеру знать основы сторителлинга?
Уметь рассказывать истории — задача не только копирайтеров, но и дизайнеров. Они помогают сделать сайты интереснее, моушн-работы — увлекательнее, а еще привлечь внимание к отдельным составляющим проекта.
Веб-дизайн
3485

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



Зачем дизайнеру сторителлинг?


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

Вот зачем это нужно:

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


Сторителлинг в дизайне: что важно знать


№1. У каждой истории есть структура


И эта структура состоит из таких пунктов:

  • предыстория;
  • завязка;
  • основная часть;
  • кульминация;
  • развязка (и призыв к действию).

Упустите какую-то часть — и история может не сработать.

Такая структура — основа другой, которая стала популярной благодаря соцсетям — о точках А и Б. Часто используется для демонстрации успехов клиентов, учеников, показывая их жизнь или неудачи ДО покупки продукта и отличные результаты, лучшую жизнь ПОСЛЕ. И вы тоже можете использовать такой прием для сайта.

№2. Заменяем текст на картинки


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

№3. Иногда анимация лучше, чем статичная картинка


Например, ваш нужно интересно и коротко рассказать об истории компании. Она у нее богатая на факты и ситуации, имеет важное значение и должна зацепить, убедить посетителя, что этому бренду можно доверять. Тогда лучше рассказать об этом через анимационный ролик. Если такой возможности нет — через иллюстрации и 1-2 предложения. Но не сухим текстом, который не вызывает никаких эмоций.

№4. Не делайте дизайн однообразным


Допустим, вам нужно показать разные способы применения виртуального продукта (приложения, сервиса, логотипа). Минимально это можно сделать с помощью смены мокапов. Еще можно менять расположение объектов на экране (одни — слева, потом — справа, потом — в центре, и т.д.).

№5. Истории могут быть разными в разных блоках


Например, отдельная история о компании на лендинге. Чаще всего она занимает 2 блока — «О компании» (чем занимается, с какого года на рынке, кто основные клиенты) и «О нас в цифрах» (самые интересные факты об организации, которые можно как-то передать в виде цифровых фактов).

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

№6. Если геймификация уместна, используйте ее


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

№7. Эмоциональное состояние истории определяют разные дизайн-элементы


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


Что еще важно знать о сторителлинге?


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

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


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

Понравилась статья? Сохраните её в своих соц. сетях!
обучайся с нами профессии
UX/UI-дизайнер
Подробнее о курсе
Читайте другие статьи
Как дизайнеру восстановить свой ресурс: 7 шагов заботы о себе
Чувствуете, что вдохновение вас покинуло, а создание каждого нового дизайна дается все труднее? Значит, пора позаботиться о себе и восстановить внутренний ресурс. Как это сделать, читайте в новой статье.
Веб-дизайн
19980
Удаленка или фриланс: с чего дизайнеру начать карьеру?
Сегодня у дизайнера есть множество вариантов карьерного развития. Как минимум, фриланс и работа на удаленке в компаниях разного формата. Но как понять, с чего же лучше начать?
Веб-дизайн
5551
UX-исследование в дизайне: что это и зачем нужно
При разработке дизайна нового продукта или редизайне текущего у специалиста могут возникать догадки и гипотезы о том, что и как нужно сделать, улучшить. Но как понять, что гипотезы верные и их стоит брать в работу? С этим поможет UX-исследование.
Веб-дизайн
4652
Получайте первыми свежие статьи из нашего блога прямо на вашу почту
Введите корректный e-mail
Никакого спама. Только ценные и полезные статьи для вас!