Флет анімація в моушн-дизайні як спосіб візуалізації інформації

Размещено на http://www.allbest.ru/

Размещено на http://www.allbest.ru/

Київський національний університет технологій та дизайну

Флет анімація в моушн-дизайні як спосіб візуалізації інформації

Хиневич Р.В., Довженко І.Б., Родіна В.А.,

Яворський О.Л., Ковальчук О.В.

Мета. Визначити специфіку флет анімації як інноваційного засобу візуалізації інформації у сфері моушн-дизайну.

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

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

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

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

Ключові слова: моушн-дизайн, флет анімація, векторні об'єкти, композиційні прийоми, колористика, типографіка.

FLET ANIMATION IN MOTION DESIGN AS A METHOD OF INFORMATION VISUALIZATION

Khinevich R.V., Dovzhenko I.B., Rodina V.A., Yavorsky O.L., Kovalchuk O. V.

Kyiv National University of Technologies and Design

Purpose. Define the specifics of flat animation as an innovative means of visualizing information in the field of motion design.

Methodology. General scientific methods of research are used: analysis and synthesis, systematization and generalization, for studying of flat animation and its specifics in motion design, determination of features of its design and composite decisions, formation of research conclusions. The method of comparative analysis of types of modern animation is applied.

Results. The features of the use of flat animation in various fields of application are considered, compositional methods and tools that are used to implement a variety of design decisions are simple images]. (S. Kyrova, Trans). Moscow: Mann, Yvanov i Ferber. [in Russian]. analyzed, specific graphic image methods are identified and the basic elements inherent in modern animation products are identified. Scientific novelty. The most effective methods of visualization of information in motion-design are determined, the role of flat animation in motion-design is shown, its means of expression and their influence on the readability of information are analyzed.

Practical significance. Investigated and systematized the techniques and means of composite solutions flat animation for mobile applications. Features that distinguish flat animation from other animated products are defined. For the first time, a paper calendar with mobile interactivity has been developed and implemented. This opens up the possibility of creating innovative printing calendars.

Keywords: motion design, flat animation, compositional techniques, vector objects, coloristics, typography.

ФЛЕТ АНИМАЦИЯ В МОУШН-ДИЗАЙНЕ КАК СПОСОБ ВИЗУАЛИЗАЦИИ ИНФОРМАЦИИ

Цель. Определить специфику флет анимации как инновационного средства визуализации информации в сфере моушн-дизайна. Методология. Использованы общенаучные методы исследования: анализа и синтеза, систематизации и обобщения. Применен метод сравнительного анализа видов современной анимации.

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

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

Ключевые слова: моуш-дизайн, флэт анимация, композиционные приемы, векторные объекты, колористика, типографика.

Вступ

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

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

Аналіз попередніх досліджень. З огляду на новизну обраного для розгляду аспекту моушн-дизайну, теоретичною основою дослідження стали наукові праці вчених і дизайнерів Дональда Нормана, Майкла Бейрута, Нейтана Яу, які розглядають проблеми психології дизайну повсякденних речей, принципи логічного та ергономічного дизайну [1], створення і функціонування дизайну в реальному світі, особливості процесу творчості графічного дизайнера, пропонують практичні поради щодо застосування професійного арсеналу[2], вивчають мистецтво візуалізації інформації засобами дизайну [3].

Джерельною основою стали також наукові розвідки, розміщені на Інтернет- ресурсах, з історії моушн-дизайну [4] та анімації [6; 8], з використання виразних засобів моушн-дизайну в рекламній галузі [5], книги досвідчених аніматорів, які пропонують здобутки власних творчих напрацювань в галузі [7].

Постановка завдання. Анімація - прекрасний спосіб поширення ідей із залученням в контент. Глядач слідкує за розповіддю, а звук і графіка дають можливість легко сприймати і запам'ятовувати. Як вид творчості, анімація має давню і багату історію відкриттів, творчих знахідок, впровадження нових технологій. Перші випадки використання цифрових технологій в анімації припали на 50-і роки ХХ століття. Тоді стали з'являтися перші доробки спецефектів, експерименти з тривимірною графікою. А згодом, в 1976 американець Мартін Ньюелл продемонстрував перше тривимірне зображення чайника. Створена дослідником комп'ютерна модель стала зразком у середовищі користувачів тривимірної комп'ютерної графіки. Ньюелл вирахував математичні дані, які описували геометрію чайника і зробив їх загальнодоступними. Невдовзі інші дослідники почали використовувати ті ж дані для своїх експериментів у сфері комп'ютерної графіки і створення нових тривимірних об'єктів. У 1990 році студія 'Тох Network" випускає серіал "The Simpsons", головний герой якого на ім'я Гомер Симпсон «набуває життя» у третьому вимірі. Поява у 1996 році повнометражної стрічки "Тоу Storу" виробництва компаній "Піксар" та "Дісней", стала першим повністю комп'ютерним мультфільмом і, фактично, започаткувала новий період в історії світової анімації. З того часу почалося активне використання 3D-графіки і комп'ютерного моделювання [7]. Дослідники сучасного стану анімаційної галузі поділяють її на декілька видів [8], серед яких, останнім часом, набуває поширення флет анімація. Напрямок флет дизайну або плоского дизайну відомий історії анімаційного мистецтва. Він був широко представлений у другій половині ХХ ст. і був зумовлений технічними особливостями 80-тих років, а саме неможливістю відображення тіней та градієнтів. Наразі, більшість провідних Інтернет компаній звернулися до попереднього досвіду і використовують у своїх розробках саме флет дизайн [9].

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

Результати дослідження

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

Поява флет анімації обумовлена поширенням мобільних додатків. Адже через те, що флет анімація створюється за допомогою векторних об'єктів, її легше адаптувати під різні платформи гаджетів (рис. 1).

Рис. 1. Приклади флет анімації в оформленні мобільних додатків

флет анімація моушн дизайн

Серед основних принципів флет анімації виділяють наступні: 1) відмова від детальності в зображеннях, 2) використання простих елементів, 3) акцент на типографіці, 4) привертання уваги за допомогою кольору, 5) мінімалізм [9; 10]. Кожний з принципів дозволяє дизайнеру досягти виразності, ергономічності, комфортності не лише у втіленні творчого задуму, а й в сприйнятті створеного продукту споживачем. Так, створюючи двовимірне зображення, необхідно «відмовитися від детальності в зображеннях», тобто позбутися усіх елементів, які можуть надавати хоч якусь глибину зображенню: градієнтів, плавних переходів, тіней, скосів, текстури. Всі елементи малюнка позначені жорсткістю краю, не виділяються і стають плоскими один відносно одного.

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

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

Незвичність і особливу виразність зображенню надають кольори, що обирає дизайнер. Принцип «привертання уваги за допомогою кольору» полягає, як правило, у складанні кольорової палітри з декількох контрастних чистих (без відтінків) кольорів. За своєю структурою флет дизайн простий і гармонійно поєднується з мінімалістичним підходом.

Із розвитком комп'ютерних технологій список програм і додатків, за допомогою яких можна відтворювати інформацію, значно розширився, з'явилися такі мобільні додатки як CamStudio, Screen recorder, за допомогою яких можна відображати відео. Також, набули популярності QR-коди та додатки 4D-реальності. Вони надають можливість за допомогою спеціального мобільного додатку, що сканує код чи зображення, відтворити, закодований у ньому файл (відео, аудіо, картинку і т.д.). Для реалізації подібних завдань широко застосовується моушн-дизайн.

а б

Рис. 2. Використання QR-коду у дизайні календаря: а - ОК-код, в який зашифрована створена анімація; б - розміщення QR-коду на обкладинці інтерактивного календаря

За результатами проведеного наукового дослідження розроблено та реалізовано дизайн паперового календаря з мобільною інтерактивність., що урізноманітнило і збагатило сферу поліграфії можливістю створення інноваційних поліграфічних продуктів. Візуалізацію інформації, закладеної у паперовому виданні було збагачено флет анімацією, завдяки чому створений продукт дизайну, став не просто річчю, що займе певне місце в інтер'єрі, а дизайнерським об'єктом, з яким споживач може взаємодіяти. Саме для цього було прийнято рішення використовувати технології для кодування і зчитування інформації, аби власник календаря за допомогою свого смартфону та спеціального додатку міг, відсканувавши QR-код, побачити анімацію календаря. Що, в свою чергу, є заохочувальним елементом, який привертає увагу до календаря та вирізняє його серед інших. Нижче наведений фрагмент сторінки календаря з розміщеним на ній QR-кодом та зображення QR-коду, в який зашифрована створена анімація (рис.2).

а б

Рис. 3. Композиційні прийоми у зображенні календаря: а - відкрита композиція сторінок календаря; б - ОК-код як частина композиції

Концепцією анімації є демонстрація зображень, використаних у календарі. Оскільки головний і найвиразніший QR-код знаходиться на обкладинці календаря, людина, яка тримає його в руках, може, не відкриваючи календар, побачити графічне наповнення даного дизайнерського виробу. Для цього необхідно відсканувати QR-код за допомогою мобільного пристрою і переглянути анімаційний ролик. Таким чином, дана флет анімація являє собою промо-ролик календаря. Її призначення полягає в його презентації. Оскільки сам календар виконаний у техніці флет зображення, то й для анімації була використана та ж сама стилістика. Основні характеристики створеної флет анімації: відмова від градієнтів, складних текстур і тіней; увага до композиції кожного кадру; побудова усіх композиційних рішень на основі геометричних фігур; гармонія і простота кольору; обмежена кількість кольорів у дизайні; мінімалістичність зображень; виразна графіка.

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

Рис. 4. Останній кадр анімації - зображення календаря в інтер'єрі

Також, композиція анімаційного зображення була побудована таким чином, щоб чітко виявляти її акцент і ритм. При цьому QR-код, за допомогою якого власник календаря може «увімкнути» анімацію, також є частиною композиції, не будучи при цьому її акцентом (рис. 3б.).

В основі композиційних рішень всіх кадрів анімації лежать основні геометричні напрямки: вертикаль, горизонталь, діагональ. Такий прийом було застосовано, для того, щоб підкреслити мінімалістичність зображення та надати йому ритмічної структури і динаміки. Кольорова гамма витримана в пастельних відтінках, що є наразі основною тенденцією у флет анімації. Також, має місце повна відсутність градієнтів, натомість використовуються чисті кольори. Шрифт, використаний в анімації є акцидентним, але легко зчитуваним. Стилістично він додає композиції плавності ліній, не привертаючи до себе занадто багато уваги. Оскільки призначенням даної флет анімації є презентація календаря, то в останньому кадрі анімації графічне зображення поєднується з фотографією інтер'єру кімнати (рис. 4). Такий прийом застосовується для того, щоб людина, яка думає, чи варто їй купувати даний календар, відсканувавши QR-код і побачивши анімацію, змогла оцінити те, як виріб буде виглядати в реальному інтер'єрі. Таким чином, даний кадр виправданий репрезентативною метою флет анімації.

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

Висновки

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

Література

1. Норман Д. Дизайн привычных вещей; пер. с англ. Б. Глушак. Москва: Манн, Иванов и Фербер, 2013. 275 с.

2. Бейрут М. Теперь вы это видите. И другие эссе о дизайне; пер. с англ. А.Токарев. Москва: Манн, Иванов и Фербер, 2018. 256 с.

3. Яу Н. Искусство визуализации в бизнесе. Как представить сложную информацию простыми образами; пер. с англ. С. Кирова. Москва: Манн, Иванов и Фербер, 2013. 352 с.

4. Краткая история анимации. URL: https://www.animag.ru/article/kratkaya-istoriya- animacii (дата звернення 12.04.2019).

5. Желязный Д. Говори на языке диаграм: пособие по визуальным коммуникациям; пер. с англ. А. Мучник, Ю. Корнилович. Москва: Манн, Иванов и Фербер, 2012. 304 с.

6. Kuperberg M. A. Guide to Computer Animation: For TV, Games, Multimedia and Web. Washington: Focal Press, 2002. 264 с.

7. Хитрук Ф. Профессия - аниматор. Москва: Гаятри, 2008. 608 с.

8. Моушн-дизайн. URL:

https://netology.ru/blog/motion-design (дата звернення 18.05.2019).

9. Особенности FLAT - дизайнами https://des-life.ru/flat-design-features/ (дата звернення 12.05.2019).

10. Маккэндлесс Д. Инфографика. Самые интересные данные в графическом представлении. Москва: Манн, Иванов и Фербер, 2013. 264 с.

11. Calendar 2019 Full. URL: https://www.youtube.com/watch?v=CCisPwyzYmE

References

1. Norman, D. (2016). Dizayn privyichnyih veschey [Design of familiar things]. (B. Hlushak, Trans). Moscow: Mann, Yvanov i Ferber. [in Russian].

2. Beyrut, M. (2016). Teper vyi eto vidite. I drugie esse o dizayne [Now you see it. And other design essays]. (A.Tokarev, Trans). Moscow: Mann, Yvanov i Ferber. [in Russian].

3. Yau, N. (2013). Iskusstvo vizualizatsii v biznese. Kak predstavit slozhnuyu informatsiyu prostyimi obrazami [The art of visualization in business. How to present complex information in

4. Kratkaya istoriya animatsii [A brief history of animation]. URL:

https://www.animag.ru/article/kratkaya-istoriya- animacii. (Last accessed: 12.04.2019) [in Russian].

5. Zelazny, J. (2010). Say It With Chart [Govori na yazyke diagram]. (A. Muchnyk, Yu.Kornylovych Trans). Moscow: Mann, Yvanov i Ferber. [in Russian].

6. Kuperberg, M. A. (2002). Guide to Computer Animation: For TV, Games, Multimedia and Web. Washington: Focal Press. [in English].

7. Hitruk, F. (2008). Professiya - animator [Profession - Animator]. Moscow: Gayatri. [in Russian].

8. Moushn-dizayn [Motion design]. URL: from https://netology.ru/blog/motion-design. (Last accessed: 18.05.2019) [in Russian].

9. Osobennosti FLAT - dizayna [Features of FLAT Design]. URL: https://des-life.ru/flat-design- features/. (Last accessed: 12.05.2019) [in Russian].

10. Makkendless, D. (2013). Infografika. Samyie interesnyie dannyie v graficheskom predstavienii [Infographics. The most interesting data in a graphical representation]. Moscow: Mann, Yvanov i Ferber. [in Russian].

11. Calendar 2019 Full. URL: https://www.youtube.com/watch?v=CCisPwyzYmE.

Размещено на Allbest.ru