Week01.02 Visual storytelling - UX-UI-Design-Lab/DH150-viz GitHub Wiki

Agenda:

  1. Structure of visual storytelling - how to construct your visualization
  2. Demo: how to practice visual analysis by doing (= replicate)
  3. Demo: how to make variations
  4. Demo: how to document your assignment

Michael Jackson | Time, Mar. 19, 1984

Let's analyze the example with Time's Cover design - What do you think the cover story about? It is about Michael Jackson, about this Thriller, and readers (who might be interested in the album's record of 37 weeks at number one on the Billboard 200) can read more about Inside of his world (by open the cover or purchase the magazine --> this is call for action).

Let's see how the story was visually interpreted: There is a Title of the magazine (TIME, credential or the author), a name of Michael Jackson, a description why he is an interesting person to know by specifics (Why he's a thriller), and call for action (Look inside and read more!).

The main story is about Michael Jackson - so the image confirms who we are talking about - the African-American young male singer with curly hair. Well, the image looks a bit different from his real photo - because it is an art work of Pop Artist Andy Warhol. This portrait was commissioned and now is found in National Portrait Gallery in Washington DC. At this moment, the portrait may get more interesting. What Andy Warhol saw in this young singer whose fragile identity with a great talent? (or byproduct of the pop culture whose color is just a surface of printing?)

As you see the image and start thinking, you read the cover-line again "why he's a thriller." Then, how the image as a background comes in front either by contrasting or assimilating to the written text.

Then, you will do reverse engineering how this cover is made. It seems that you will need a title, the name of the person, the short coverline story, call-for-action, as texts. You need to think what can be a good visual complimentary. These are placed in the separate layers.

Next, I want you to rebuild the work again. You will put the image as a background. You will adjust the size of each elements -- how big the title would be, how big the name would show, how large the block of text would look with the coverline story, how the call-for-action would be stated. Depending on the image's shape and color (and the other factors, like where the person is looking at), you need to adjust the size, color, and typography of the texts. You may need to move around the text not to dominant but open the space for the image - and make a good balance of foreground information and the background. Sometimes the text will come up front and some times the image will come up - the relationship between the text and the image start vibrating (back and forth) -- or I would say recursive. If the recursive structure is successfully built, the texts and the image will construct a bigger meaning than just two separate things (image vs. texts) and that structure of the visual storytelling will make people keep looking to see/find more into the visual storytelling.


The Case for Moms Staying Home | Mar. 22, 2004

So, again, what do you think the story about?

  • What are the context of the storytelling? (reader, call for action)
  • What can you see/read? How do you explore the visual storytelling -- What do you see at first, then what do you find next, and the next, till you understand what is going on?
  • How is the image related to the cover storyline?
  • How do you think the usage of the color (white) contribute to the visual storytelling? Contrast or Assimilate to the cover-story?
  • How do you think the size of the each text contribute to the overall balance of the visual storytelling?
  • What do you see which layer is front than the other? How do you think you can make the same visual storytelling, for example which layer at the bottom, which layer at the top?

I will show you a demo 1) how you can replicate the visual storytelling; 2) how you can make variations; 3) how you can document all your works in assignment.


Advanced: Watch this video: Teaching to See

  • What does it mean by "negative" in visual design?
  • How has the designer Inge Druckrey taught about the negative space?
  • What do you think you can improve your visual storytelling by designing not-to-be-seen?