vit_r (vit_r) wrote,
vit_r
vit_r

Emotional Design 3.0 / Short and mostly wrong introduction

Contents

  1. Introduction
  2. Visual storytelling
  3. Orchestration
  4. References

Further reading

It's all. I can show more samples or write more about any aspect but let's stop here. If you ask, where you can find more about emotional design for computer programs and online services I can only answer that I don't know. Better saying, I know that this information is nowhere to find. My text is the result of an intersection of many disciplines. Unfortunately I do not know who else is interested in all of them simultaneously.

This theme is very complex. Of course it is relatively simple to collect some basic tricks and to write a book "How to add emotional design to your site". But the real title of such a book must be "How to add emotional design to your site and fail". As I mentioned early emotional design is a very dangerous game.

I end my article with a list of information sources. They may be not the best possible and this list is not complete. I mention only the books from my bookshelves and links from my bookmarks that were most useful for me or my kids.

I have read many books and scientific articles about psychology, psychology of emotions, psychology of perception, psychology of vision, and other sophisticated topics. They may be ignored. If we speak about art, "I know" is nearly equal to "I feel" and in many cases the second is better.

Below are only practical guides that may be used in the real work.

Storytelling

As mentioned early you can use emotional design without visuals. However in our digital edge of permanent interruptions it is extremely difficult to control the concentration of your audience. Images are much more effective.

Despite that the most important skill is the storytelling. Emotions are born when something happens. Even if you simply see something you must first look at it.

  • "Shoujo Manga Techniques: Writing Stories" by Mako Itsuki This may sound odd but this is the best introduction book I know. There are others that cover the same topics but this is the most clear, the most compact and the most illustrative. This book is a manga and it is currently out of print but it would be my first choice. The title suggest that this textbook is about creating mangas for girls but it contains the storytelling basics that may be used for all purposes and all audiences.
  • "Writing for Emotional Impact: Advanced Dramatic Techniques to Attract, Engage, and Fascinate the Reader from Beginning to End" by Karl Iglesias If you open this book on page 17 you can read:
    Before we move on, I’d like to offer some caveats: If you love the "magic" of movies, put this book back on the shelf. This book offers advanced techniquesthat will demystify what you see on the screen. Many of them will seem familiar because you often see them in stories that work. But beware: you’ll never experience a movie or read a script the same way again.
    It is up to you, if you would exchange your ability to enjoy cinema and animation for some knowledge. However I would say this concerns only bad and mediocre movies.
  • "The Marshall Plan for Novel Writing" by Evan Marshall This is a good manual which gives you a simple and powerful method to create your story and make it bulletproof.

On my shelves are many other books starting from American bestsellers such as John Truby's "The Anatomy of Story" till Otto Schumann's "Schreibkunst" ("Art of writing") which contains 700 pages and is detailed and tedious on the level of a fundamental German textbook. I would limit the list with three titles above. It is not important how many books about storytelling you read and how many theories you have learned. After you know the basics only your own attempts to apply them on your works and to test them on real audiences may move you any further.

Visual art

Images are a great communication mechanism. Kids start to use them to express their thoughts, ideas and impressions long before they learn how to describe a scenery with words and how to write a story with letters. Unfortunately in our civilization most of them stop drawing and painting in the first school years. They understand how bad and unskillful their art is and become afraid to show it to other people.

As a result of this fear most adults are unable to use images for communication. They can scribble a way to their house for invited guests or copy a drawing of a rose for a homework of their kids but in most cases they are afraid to show their poor skills and adults usually try to replace one image with thousand words. New trend to replace a carefully written text with a spontaneous video speech has made this communication gap even worse.

To use emotional design you must not be an skilled artist yourself but you at least must understand how visual art works. Art is more about seeing right than about doing right. Good news is that this can be learned.

  • "The Artist's Complete Guide to Facial Expression" by Gary Faigin This is a widely recognized reference book. I would not recommend you to start with an cartooning book because the base even for cartoons are real human expressions. It is simple to find a book that contains a set of tricks with simplified faces but without a proper foundation you cannot create believable faces even for stick figures.
    It is enough to understand the basics. At least you always have a mirror and your own face for references.
  • James Gurnay's blog "Gurney Journey" (http://gurneyjourney.blogspot.com/) is the best source to study about foundations of art. It is not probably that you become an artist by reading his posts but you would understand how and why art works.
    James Gurnay had published two books that are based on the posts in his blogs. This are:
    • "Imaginative Realism: How to Paint What Doesn't Exist"
    • and "Color and Light: A Guide for the Realist Painter"
    I have them both and I will buy a next one, if it would be published.
  • Jack Hamm is an American artist who is widely recognized for his books on drawing technique. All of them are great but I recommend only two.
    • "Drawing Scenery: Landscapes and Seascapes" This is a compact and easy to follow reference.
      For instance you need a tree. You open the page 52 and select one of 20 styles. Or you draw a reflection in water. On the page 91 you can find how to show the conditions of water surface.
    • "Cartooning the Head and Figure" The caricature style in this book is a bit old fashioned and clothes are definitely old but you can find here 6 simplified methods of female construction, 23 versions of pretty girl faces, 75 male hair styles, 127 cartoon noses and many other things you may use.
  • Blog "Muddy Colors" ( http://muddycolors.blogspot.com/) This blog's main audience are the creators of fantasy art but you can find there a lot of posts with interesting information. And the images in this blog are always impressive.

Even if you aren't a skilled artist this books may help you create simple but powerful images to express your ideas visually. Of course you can always find in Internet some pictures to fill white space in your presentation but a poorly drawn sketch that is 100% suitable is more helpful than a perfect painting that sends a misleading message.

Visual storytelling with static images

Yes. You can call this section "Comics".

There are a lot of books about comics, manga and caricatures. You may find out about comics artists and their works, you may use drawing instructions for manga figures, you may learn how to create a comics book...

I know only two authors who explain how and why comics work.

  • Scott McCloud (http://scottmccloud.com/): He is an widely recognized comics guru. Even some programmers know about him.
    • "Understanding Comics: The Invisible Art" This book is the first successful attempt to explain how comics work.
    • "Making Comics: Storytelling Secrets of Comics, Manga and Graphic Novels" This is a textbook that explain how to create comics that work.
    • "Chapter Five and a Half"(http://www.scottmccloud.com/makingcomics/five_half/00.html) This is additional chapter of "Making Comics". It describes web-comics and their difference with the comics created to be printed on paper.
    • "Google Chrome comic" (http://www.google.com/googlebooks/chrome/index.html) This is a sample of applying comics techniques to a software manual. You can find out that it uses basic principles of emotional design. However the main goal of this comics is to transmit information and it does not contain attempts to use empathy of the readers.
  • Neil Cohn (http://www.thevisuallinguist.com) is a scientist who studies comics. He develops further the intuitive ideas of Scott McCloud and also corrects some of them with science. You can find the results of his studies in articles on his page.
    I would mention his new book.
    • "The Visual Language of Comics: Introduction to the Structure and Cognition of Sequential Images. (Continuum Advances in Semiotics)" Unfortunately this is an academic book which is not easy to read.

Visual storytelling with dynamic images

  • "Film Directing Shot by Shot: Visualizing from Concept to Screen" by Steven D. Katz As mentioned early this is simple a book from my shelf. It contains a catalog of visual techniques for filmmakers and videomakers. Maybe there exist books that are simpler or more suitable for general public but after I had read this I have no need to search for others.
  • "The Animator's Survival Kit: A Manual of Methods, Principles and Formulas for Classical, Computer, Games, Stop Motion and Internet Animators" by Richard WilliamsThis is a wide recognized manual that is recommended on animators' sites. My daughter had used it for a project in gymnasium and got a perfect score for the result.

    В связи с мультфильмом был показательный случай. Учиницы художественного класса должны были сделали короткую анимацию, а потом наивная немецкая гимназистка добавила к ней музыку и выложила на Ютуб, хоть моя дочь и предлагала музыку просто набренчать на пианино, а не вставлять звуковые файлы сомнительного происхождения.
    Естественно ютуб ролик сразу для Германии заблокировал как подозрительный на использование ворованного, и качать его мне пришлось через прокси.

  • Mark Kennedy is a storyboard artist in Disney. His blog "Temple of the Seven Golden Camels" (http://sevencamels.blogspot.com/) contains a lot of information about cartoon characters, storyboarding, screenwriting and language of cinema and animation.
  • John K's blog "John K Curriculum" ( http://johnkcurriculum.blogspot.com/) teaches how to create right character designs, impressive compositions and funny cartoons.

    It contains selected links to articles in his second blog "John K Stuff" ( http://johnkstuff.blogspot.com/) which also describes animation in general, its problems and the organization of animation processes. Some of his thoughts are quoted in my blog because animation is very similar to software development in ways to achieve great results also in ways to fail.

Anime

The best way to learn is to see and to analyze best samples. There are great painting and classic movies you can study from but, if you search the optimal balance between emotional impact and production cost, anime comes first to mind. As you can see even one episode of anime Nisekoi contains samples for all considered topics.

A common impression is that anime is intended for specific otaku audience only. Of course some serials are not for kids and maybe not for considerate adults even from Japan but this is a best source I know to study dynamic visual storytelling with strong emotional impact. Many Japanese animation studios are good and create impressive works. Shaft is the most interesting in visual design. And it is able to create characters that capture heart and soul.

Nisekoi 01 23_28

At least this is applicable to otaku community across the world.

Not all good anime serials are popular and not all popular serials are good, but there are a lot of works where you can find awesome graphical compositions and movement sequences. And almost all anime are incredible or very good in color design.

Let's start

Emotional Design is dangerous. It would be nice to have a proven method, an industry recognized standard and a lot of available experts. Unfortunately this is an undiscovered territory.

The good thing is that you are not obligated to be perfect. Nether your images nor your scripts must be on the highest professional level. This means you can start cheap.

Of course you need training and experience to create an impressive painting and to sell it. This is applicable in most cases even for modern art. However if you need to use images for communication purposes, it is not important how good they are. They only must be able to carry the message.

Here are two works of the great painter Rembrandt van Rijn from a collection of his drawings on http://www.rembrandtpainting.net/rembrandt_drawings_start.htm.

Rembrandt van Rijn_St. Jerome Reading in a Landscape
St. Jerome Reading in a Landscape
Rembrandt van Rijn_A Woman Teaching a Child to Stand
A Woman Teaching a Child to Stand

This drawings may be skillful but they are far from "beautiful" or "nice". You can use this as an excuse for your attempts. Artistic craft is less important than sincerity. Emotional design is not a method to manipulate your audience but a language to speak with it.

I had doubts about the last image in this article. It would be good to show an impressive painting created by a skillful artist. (Anime is a relatively cheap process but any kind of art has similar features.) It would be good to show an example that describes some of mentioned techniques in action. (I do not know about successful applications of emotional design in business software but some games use something similar to it.) After long consideration I had selected my portrait created by my son. This drawing is wrong in many ways but it fulfills its role. You can achieve results at least as good as it.

Maxim_Papa_working_2013-06-01_crop_375_x_325
Tags: animation, art, comics, design, en, it, manga, narrative_immersion, psychology, ru, screenplay, ux, visual_reference, visualisation, web, writing
Subscribe
  • Post a new comment

    Error

    default userpic

    Your reply will be screened

    Your IP address will be recorded 

    When you submit the form an invisible reCAPTCHA check will be performed.
    You must follow the Privacy Policy and Google Terms of use.
  • 0 comments