Як виконати розкадрування

Кращі книги і серіали часто вражають нашу уяву складними сюжетами. Взяти ту ж «Гру престолів», Що успішно протрималася на екранах цілих 8 сезонів і задіяла в різних сюжетних лініях як мінімум 52 значущих персонажа. Або «Володаря кілець», де сюжет насичений настільки, що автору роману Дж. Р. Р. Толкіну довелося присвятити цілу книгу одним тільки родоводам героїв. Працюючи з творами такого масштабу, практично неможливо втримати в голові до дрібниць.

Але в тому й секрет: одразу весь сюжет ніхто й не тримає. Усі письменники та режисери користуються нотатками. Хоч би як парадоксально це звучало, але порядок створює родючий ґрунт для творчості. Тому, якщо ви займаєтеся UX-дизайном або керуєте проектами та хочете краще зрозуміти своїх клієнтів та порадувати їх по-справжньому якісним продуктом, беріть приклад із творчих геніїв: вони поганому не навчать.

Найчастіше титани думки вдаються до методу розкадрування.

Нижче ми поговоримо про те, чому техніка, широко поширена у сфері кіно, телебачення та літератури, дозволяє отримати такі феєричні результати в галузі дизайну та розробки.

Що таке розкадрування?

Розкадрування — це покадровий аналіз кожної сюжетної точки. Кінцевий результат цього процесу виглядає як комікс без діалогу. Свого роду історія у картинках, часто із примітками до кожного кадру.

Навіщо потрібне розкадрування в UX-дизайні?

Розкадрування - чудовий спосіб вдихнути життя в дорогу користувача. Коротко розповімо, чому так важливо.

Розкадрування передає ідеї наочно

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

Ваше бачення не спотворюється

Коли в одному проекті задіяно кілька великих відділів, складно однаково донести своє бачення до кожного співробітника. Але вихід є: не розповісти, а показати. Розкадрування не дасть аудиторії зайвий раз неправильно витлумачити ідею чи додумати щось своє, а отже, можна менше пояснювати і більше працювати.

Можна уявити проект у вигідному світлі

Творці передач про ремонт недарма презентують свої ідеї у вигляді тривимірних моделей: одна річ сказати господарям будинку, що ви плануєте знести стіну між вітальнею та їдальнею, і зовсім інше. показати, як у результаті зміниться житловий простір. Те саме з керівництвом та замовниками. Можна годинами пояснювати їм, чому нова процедура оформлення покупки краща за стару, а можна просто показати кілька картинок. Побачивши ваші ідеї в дії, вони більш охоче затвердять зміни або виділять необхідні ресурси.

Розкадрування заздалегідь відкриє помилки

Якщо дизайн проекту закралися недоліки, розкадровка допоможе їх швидко виявити. Краще заздалегідь усунути проблему на папері, ніж потім переробляти частину готового продукту і швидше, і дешевше.

Як провести розкадрування

Сподіваємося, ми переконали вас у тому, що розкадрування того варте. Давайте розберемося, як її виконати.

1. Проаналізуйте дані

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

2. Виберіть один аспект

Різні типи користувачів по-різному взаємодіють із вашим продуктом. Зосередьтеся на одному сценарії використання та одному шляху. По кожному проекту можна створювати скільки завгодно розкадровок, тому якщо ви хочете індивідуально розглянути кожен сценарій, чому б і ні?

3. Познайомтеся із героєм

Хто користується продуктом? Яке рішення потрібне клієнту? Чим ближче ваші персонажі до реальних людей, тим простіше створити розкадрування, яке вселяє довіру та вирішує реальні проблеми.

4. Перерахуйте важливі контактні точки

Хтось вважає за краще записати відразу всі точки контакту, але якщо почати з найважливіших, то вони підкажуть, в якому напрямку рухатися разом із користувачем. А ще розумніше почати зі списку, а не братися відразу за розкадрування, інакше надалі ви втомитеся перетягувати блоки по полотну.

5. Додайте контекст

Припустимо, що ви займаєтеся розробкою програми-перекладача. Чому б не включити в розкадрування, скажімо, історію студента, який зібрався у подорож Марокко? Покажіть, як він збирає валізу, прилітає до країни та намагається купити сувенір на базарі. А потім додайте блоки, де показано, як студент користується вашим додатком для перекладу. Таким чином, історія героя постане на розкадруванні цілком, дозволяючи вам на конкретному прикладі побачити, як ваш додаток працюватиме в умовах реального світу.

Як Lucidspark стане вам у нагоді при роботі з розкадруванням

Мабуть, найбільший недолік розкадрування полягає в тому, що донедавна воно створювалося виключно на папері. Припустилися помилки? Беріть гумку і переробляйте. Ну а якщо в хід все ж таки пускалося базове ПЗ, користі від нього було мало: програми громіздкі, навчатися довго, а поділитися результатом - дуже непросто.

Інша річ Lucidspark. Пояснимо, чому наш сервіс чудово підходить для розкадрування UX:

Легко взятися за справу

Наші зручні шаблони самі підкажуть вам, як виконується процес розкадрування. Вільно переміщуйте ідеї, а ми автоматично збережемо ваш проект і позбавимо вас зайвого стресу.

Творча свобода

Lucidspark не перешкоджає, а, навпаки, сприяє творчості. В інших програмах дизайнерам доводиться забагато відволікатися на технічні питання. Lucidspark забезпечує безшовний інтуїтивний підхід до роботи завдяки липким онлайн-нотаткам, малюванню від руки та іншим зручним функціям.

По-справжньому загальний робочий простір

Щоб скоординувати роботу віддаленої чи розподіленої команди, іноді потрібні сталеві нерви. Зате якщо ви займаєтеся розкадровкою в Lucidspark, всі інші учасники проекту зможуть зробити свій внесок у реальному часі. Плюс до всього, Lucidspark дає вам додаткові важелі прямого спілкування через коментарі, чат та згадки у форматі @mentions. Працювати над таким розкадруванням просто і весело. Усі знають, хто що запропонував і хто за що відповідає, і кожен перед очима має загальну картину проекту.

Можливо, навіть перша чернетка розкадровки згодиться для того, щоб представити її колегам і поцікавитися, якими креативними способами можна створити для користувача ще приємніші умови.Наприклад, повернемося до нашого мобільного перекладача. Може, чи варто доповнити його функцією конвертації валют? Саме такі нестандартні рішення почнуть з'являтися на порядку денному, коли ваш проект оживе на розкадруванні.

З вами на всіх етапах проекту

Коли розкадрування буде готове, можна приступати до створення карти історій користувача та інших матеріалів для безпосередньої розробки UX-елементів. До речі, на основі розкадровки можна судити, які функції мають найбільшу важливість для продукту і від чого вони залежать. Хоча на перший погляд розкадрування може здатися факультативним заняттям, насправді час, витрачений на те, щоб ваш проект і шлях користувача по ньому ожили на екрані, того варта.

Отже, тепер ви знаєте, як провести розкадрування. Саме час попрактикуватись на шаблоні Lucidspark!

Про Lucidspark

Хмарна віртуальна дошка Lucidspark є ключовим компонентом пакета програм Lucid Software. Це сучасне цифрове полотно поєднує команди для мозкового штурму, спільної роботи та консолідації колективних ідей у ​​практичні кроки — і все це в режимі реального часу. Lucid пишається тим, що обслуговує провідні компанії по всьому світу, включаючи таких клієнтів, як Google, GE та NBC Universal, а також 99% компаній зі списку Fortune 500. Lucid співпрацює з лідерами галузі, включаючи Google, Atlassian та Microsoft. З моменту заснування компанія Lucid отримала багато нагород за свої продукти, бізнес та культуру на робочому місці. Детальну інформацію шукайте на сайті www.lucidspark.com.

Пройдіть реєстрацію та розкрийте свої найкращі ідеї в Lucidspark!

Зареєструючи обліковий запис, ви таким чином приймаєте Умови надання послуг та підтверджуєте, що ви ознайомлені з Політикою конфіденційності.

Розкадрування коміксу – розсуваємо межі кадру

Кадри – лише спосіб прямолінійного візуального викладу; вони нав'язують ясну послідовність картинок, розділених лініями. Це непогано, але якщо покладатися на такий спосіб занадто часто, виклад стане сухим, а захоплюючі можливості будуть втрачені. Складні розкадрування хороші для розуму: виконані вміло, вони розбурхують читача і розширюють запас технік, які ви можете застосувати, щоб донести свою ідею.

Ось основний список деяких нетрадиційних технік, від простих до складніших.

Непрямокутні кадри

Вони мають бути на озброєнні кожного художника. Кадри можуть приймати будь-яку форму, яку ви не побажали б. Поки зміст зрозумілий і читаний, все підходить. Наприклад, ви можете вставити менш помітний кадр незвичайної форми, який показує, що відбувається десь в іншому місці.

Ви можете застосувати контури інших зображень, щоб створити потрібний настрій, або зробити натяк на оточення, не промальовуючи його:

Або нехай форма кадру вказує на розташування об'єкта чи персонажа у загальній композиції:

Або змініть форму кадру зі стилістичних міркувань:

Як і будь-яким прийомом, цим не варто зловживати. Часто варто розбавити послідовність прямокутних кадрів кількома кадрами незвичайної форми, щоб підкреслити контраст. Усі техніки, що виділяють фокусні центри та лінії дії, можна застосовувати і до кадру в цілому, тому ніколи не недооцінюйте їх значення.

Об'єкти, що перетинають межі кадру

Відмінний спосіб привернути увагу до об'єкта – змусити об'єкт вийти за кордон кадру. Він утримуватиме увагу глядача, і, додавши пару інших просунутих технік, ви отримаєте справді креативну композицію. Це ще один прийом, який можуть використати художники всіх мастей.

Ризик помилитися дуже невеликий, якщо цим прийомом не зловживати. Проте результат може виявитися дуже дієвим.

Повна відмова від кадрів

(Крім того, що A Lesson is Learned – найбільший веб-комікс усіх часів, він особливо добрий своєю технікою). Це складний підхід, але результат набагато перевершує витрачені зусилля. Комікс набуває органічності, а композиція самого зображення грає головну роль. Однак читач виявляється вразливим, тому що ви прибрали кадри, що підтримують хід викладу, темп розвитку сюжету сповільнюється, і читачеві доводиться додумувати самому. Оскільки читач може втратити точку опори, вам легко застати його зненацька, передаючи сильні емоційні моменти.

Важливо помітити, що всі стандартні елементи композиції все ж таки повинні бути присутніми. Вони стають важливими, як ніщо інше, оскільки завдання направити перебіг викладу стає складнішим:

Ви змушуєте читача швидко розуміти, але дозволяє йому трохи поблукати по зображенню. Але це не означає, що безкадровий комікс не може бути хвилюючим, сповненим пригод і смішним:

Перемикання між кадрами та їх відсутністю та навпаки – відмінний спосіб показати зміну сцени чи настрою в оповіданні. У цьому прикладі Кіміко підключається до комп'ютера і переходить із безкадрової сцени в строго розділений на кадри віртуальний світ усередині її комп'ютера.

Нелінійна розповідь

Тільки те, що комікс – візуальний виклад історії, зовсім не означає, що виклад має йти послідовно. На відміну від фільмів, які по суті одномірні за напрямом (один кадр слідує за іншим), комікси двовимірні, що відкриває величезний простір для різноманітних можливостей передачі інформації.

На зображенні зверху бос вішається, але повішене тіло не займає одного окремого кадру. Воно перекриває відразу кілька, і частини тіла взаємодіють із різними сценами. В цілому, воно домінує над усією сторінкою, і стає ясно, що є найбільш значущим зображенням у всій композиції:

Але ми не обмежені лише одним зображенням. Цілі панелі можуть йти паралельно, означаючи, що дві події відбуваються одночасно:

Також можна пов'язати дві одночасні дії, щоб показати, де саме вони зустрічаються:

На зображенні вгорі перший і останній кадр ілюструють те саме, але з різних дистанцій. Вони служать у тому, щоб забезпечити послідовність викладу. Чоловік розуміє, що до нього повернувся зір, тоді як інші мандрівники у часі розмовляють із Дмитром. Замість того, щоб склеювати ці кадри в єдину послідовність, як у фільмі, ми просто малюємо дві паралельні послідовності подій.

Поворот перебігу викладу

Успішно поміняти хід викладу коміксу праворуч наліво і ліворуч праворуч можливо, але попереджаю: це штучки Темної Сторони, і використовувати їх варто лише тоді, коли це абсолютно необхідно і коли ви абсолютно впевнені, що зможете впоратися із завданням. Ось найкращий приклад, який я зустрічав:

У другому ряду, замість повернення в лівий край сторінки, композиція утримує нас праворуч, веде нас вниз водоспадом і рухається праворуч наліво на інший бік сторінки. Це не надмірність техніки: тут підкреслюється звивистий і важкий шлях персонажа до підземного світу:

Як автору це вдалося? Поєднавши кілька технік, автор веде нас у потрібному напрямку. Давайте розберемо їх детальніше:

1.Немає кадрів, що допомагає погляду читача. Ми як глядачі не шукаємо «наступний кадр» і більш схильні до впливу інших композиційних елементів.

2.Фокус на високому контрасті. Перш ніж ми встигаємо інстинктивно повернутись до лівого краю сторінки, наш погляд утримує арка з високим контрастом кольору. Як тільки наша увага затрималася, його захоплює наступний елемент.

3.Персонажі дивляться у тому напрямі, у якому автор хоче змусити подивитися нас. Якщо малюнок зроблено добре, ми інстинктивно подивимося туди, куди дивиться персонаж.

4. Водоспад теж задає напрямок. І знову це підштовхує нас у потрібному напрямку.

5.Погляд приваблює діалог. Репліки розташовані поблизу один від одного, тому ми природно слідуємо за ними.

6. Знак-підказка. Майже підсвідомо ця стрілка нагадує зміну напряму читання.

Змінюючи напрямок викладу коміксу, необхідно буквально вести читача за руку, інакше ви ризикуєте заплутати його або позбавити інтересу. Я покажу на власному (дуже старому) коміксі приклад погано виконаної зміни напряму:

Тут недостатньо візуальної підтримки зміни напряму викладу. Пару речей мені все ж таки вдалося зробити правильно: Кіміко дивиться туди, куди я хочу, щоб подивився читач, але невеликого накладання кадрів для ясності недостатньо.Також для такої яскравої кульмінації найкраще залишити звичайну послідовність кадрів.

Ось і все. Звичайно, це в жодному разі не повний список розвинених технік розкадрування, а лише огляд основ можливого. Ці техніки підходять для всіляких стилів і здібностей і розширюють візуальний словник художника.

Як виконати розкадрування

Кращі книги і серіали часто вражають нашу уяву складними сюжетами. Взяти ту ж «Гру престолів», Що успішно протрималася на екранах цілих 8 сезонів і задіяла в різних сюжетних лініях як мінімум 52 значущих персонажа. Або «Володаря кілець», де сюжет насичений настільки, що автору роману Дж. Р. Р. Толкіну довелося присвятити цілу книгу одним тільки родоводам героїв. Працюючи з творами такого масштабу, практично неможливо втримати в голові до дрібниць.

Але в тому й секрет: одразу весь сюжет ніхто й не тримає. Усі письменники та режисери користуються нотатками. Хоч би як парадоксально це звучало, але порядок створює родючий ґрунт для творчості. Тому, якщо ви займаєтеся UX-дизайном або керуєте проектами та хочете краще зрозуміти своїх клієнтів та порадувати їх по-справжньому якісним продуктом, беріть приклад із творчих геніїв: вони поганому не навчать.

Найчастіше титани думки вдаються до методу розкадрування.

Нижче ми поговоримо про те, чому техніка, широко поширена у сфері кіно, телебачення та літератури, дозволяє отримати такі феєричні результати в галузі дизайну та розробки.

Що таке розкадрування?

Розкадрування — це покадровий аналіз кожної сюжетної точки. Кінцевий результат цього процесу виглядає як комікс без діалогу.Свого роду історія у картинках, часто із примітками до кожного кадру.

Навіщо потрібне розкадрування в UX-дизайні?

Розкадрування - чудовий спосіб вдихнути життя в дорогу користувача. Коротко розповімо, чому так важливо.

Розкадрування передає ідеї наочно

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

Ваше бачення не спотворюється

Коли в одному проекті задіяно кілька великих відділів, складно однаково донести своє бачення до кожного співробітника. Але вихід є: не розповісти, а показати. Розкадрування не дасть аудиторії зайвий раз неправильно витлумачити ідею чи додумати щось своє, а отже, можна менше пояснювати і більше працювати.

Можна уявити проект у вигідному світлі

Творці передач про ремонт недарма презентують свої ідеї у вигляді тривимірних моделей: одна річ сказати господарям будинку, що ви плануєте знести стіну між вітальнею та їдальнею, і зовсім інше. показати, як у результаті зміниться житловий простір. Те саме з керівництвом та замовниками. Можна годинами пояснювати їм, чому нова процедура оформлення покупки краща за стару, а можна просто показати кілька картинок. Побачивши ваші ідеї в дії, вони більш охоче затвердять зміни або виділять необхідні ресурси.

Розкадрування заздалегідь відкриє помилки

Якщо дизайн проекту закралися недоліки, розкадровка допоможе їх швидко виявити.Краще заздалегідь усунути проблему на папері, ніж потім переробляти частину готового продукту і швидше, і дешевше.

Як провести розкадрування

Сподіваємося, ми переконали вас у тому, що розкадрування того варте. Давайте розберемося, як її виконати.

1. Проаналізуйте дані

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

2. Виберіть один аспект

Різні типи користувачів по-різному взаємодіють із вашим продуктом. Зосередьтеся на одному сценарії використання та одному шляху. По кожному проекту можна створювати скільки завгодно розкадровок, тому якщо ви хочете індивідуально розглянути кожен сценарій, чому б і ні?

3. Познайомтеся із героєм

Хто користується продуктом? Яке рішення потрібне клієнту? Чим ближче ваші персонажі до реальних людей, тим простіше створити розкадрування, яке вселяє довіру та вирішує реальні проблеми.

4. Перерахуйте важливі контактні точки

Хтось вважає за краще записати відразу всі точки контакту, але якщо почати з найважливіших, то вони підкажуть, в якому напрямку рухатися разом із користувачем. А ще розумніше почати зі списку, а не братися відразу за розкадрування, інакше надалі ви втомитеся перетягувати блоки по полотну.

5. Додайте контекст

Припустимо, що ви займаєтеся розробкою програми-перекладача. Чому б не включити в розкадрування, скажімо, історію студента, який зібрався у подорож Марокко? Покажіть, як він збирає валізу, прилітає до країни та намагається купити сувенір на базарі. А потім додайте блоки, де показано, як студент користується вашим додатком для перекладу.Таким чином, історія героя постане на розкадруванні цілком, дозволяючи вам на конкретному прикладі побачити, як ваш додаток працюватиме в умовах реального світу.

Як Lucidspark стане вам у нагоді при роботі з розкадруванням

Мабуть, найбільший недолік розкадрування полягає в тому, що донедавна воно створювалося виключно на папері. Припустилися помилки? Беріть гумку і переробляйте. Ну а якщо в хід все ж таки пускалося базове ПЗ, користі від нього було мало: програми громіздкі, навчатися довго, а поділитися результатом - дуже непросто.

Інша річ Lucidspark. Пояснимо, чому наш сервіс чудово підходить для розкадрування UX:

Легко взятися за справу

Наші зручні шаблони самі підкажуть вам, як виконується процес розкадрування. Вільно переміщуйте ідеї, а ми автоматично збережемо ваш проект і позбавимо вас зайвого стресу.

Творча свобода

Lucidspark не перешкоджає, а, навпаки, сприяє творчості. В інших програмах дизайнерам доводиться забагато відволікатися на технічні питання. Lucidspark забезпечує безшовний інтуїтивний підхід до роботи завдяки липким онлайн-нотаткам, малюванню від руки та іншим зручним функціям.

По-справжньому загальний робочий простір

Щоб скоординувати роботу віддаленої чи розподіленої команди, іноді потрібні сталеві нерви. Зате якщо ви займаєтеся розкадровкою в Lucidspark, всі інші учасники проекту зможуть зробити свій внесок у реальному часі. Плюс до всього, Lucidspark дає вам додаткові важелі прямого спілкування через коментарі, чат та згадки у форматі @mentions. Працювати над таким розкадруванням просто і весело.Усі знають, хто що запропонував і хто за що відповідає, і кожен перед очима має загальну картину проекту.

Можливо, навіть перша чернетка розкадровки згодиться для того, щоб представити її колегам і поцікавитися, якими креативними способами можна створити для користувача ще приємніші умови. почнуть з'являтися на порядку денному, коли ваш проект оживе на розкадруванні.

З вами на всіх етапах проекту

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

Отже, тепер ви знаєте, як провести розкадровку.

Про Lucidspark

Хмарна віртуальна дошка Lucidspark є ключовим компонентом пакету додатків Lucid Software. світу, включаючи таких клієнтів, як Google, GE та NBC Universal, а також 99% компаній зі списку Fortune 500. Lucid співпрацює з лідерами галузі, включаючи Google, Atlassian та Microsoft.З моменту заснування компанія Lucid отримала багато нагород за свої продукти, бізнес та культуру на робочому місці. Детальну інформацію шукайте на сайті www.lucidspark.com.

Пройдіть реєстрацію та розкрийте свої найкращі ідеї в Lucidspark!

Зареєструючи обліковий запис, ви таким чином приймаєте Умови надання послуг та підтверджуєте, що ви ознайомлені з Політикою конфіденційності.