Week01.01: Introduction - UX-UI-Design-Lab/DH150-viz GitHub Wiki
Agenda:
- Course overview - things to remember from the syllabus, about the instructor, about classmates
- Visualization and interface in DH - learning objectives, pedagogical notes, understanding of design approach
- Introduction of Tool and Data, Contents - start your visualization journal, interface
- Structure of visual storytelling - how to construct your visualization (background + msg)
Welcome to DH150: visualization and interface design!
In this first week, the first part, I would like to introduce the basic plans for the next six weeks.
Things to remember:
- we will have six weekly assignments, no midterm/ no final exam. (60%)
- besides the assignment, there are several activities (30%), which will be counted as attendance/participation
- you will have at least one moment to present something for other classmates (individual research topic, 10%)
- there is a late work policy, 50% deduction of the total, no re-submission will be graded
- the course materials will be updated every Monday noon with the two parts (one for Tuesday, one for Thursday). I expect you to work on part1 by Tuesday midnight, and part2 by Thursday midnight (so that the activity due will be set accordingly). The assignment due is by Monday midnight.
About the instructor:
Just because it is helpful to understand the instructor's background - what it mean by the key concepts like visualization and design. Briefly, I was trained in industrial design strongly influenced by Bauhaus design. I learned design from engineering school along with mechanical workshop and technical drawings + 3D modelings. My influencers in design are Prof. BJ Lee (studied in TU Braunschweig, Germany) and Prof. Gunpyo Lee (studied in Illinois Institute of Technology, U.S.A.) who helped me think design in broader than applied/decorative art. Later, I studied German Aesthetics and wrote master's thesis about aesthetic experience based on Immanual Kant's Kritik der Urteilskraft. The other important turning point of my life as a design scientist is a period in University of Michigan, where I was mentored by a social psychologist Dr. Gonzalez. I learned about heuristics, bias, and judgment especially on visual perception and psychological design experiment -- being deeply influenced by Dr. A. Tversky's works (you may be familiar with D. Kahneman). I wrote the doctoral thesis about Kindchenschema, how much we are influenced by the visual traits of the object in the world -- based on Dr. K. Lorenz's ethological theory. My recent teaching and research was involved with visual semiotics, visual communication and design of communication.
My perspective toward design education is more of craftmanship (please refer to the Bauhaus manifesto) -- it needs efforts and time to be trained to acquire the skills, like visualization, but important thing is it is a skill you can learn, not about inspiration or talent. It is true that some can learn fast than the other, some would have stronger motivation and curiosity to push oneself harder so to reach to a masterly faster (check Outliers by Malcolm Gladwell) -- we should admit that there are some individual differences. But I don't think it is right to make feel someone frustrated who works really hard. What I do as an instructor is to encourage you to keep practicing to get closer to where you want to be. The goal of this course is to help you to see the world like "D" designer. If you start seeing the world as Designers would see, you can understand what is the problem -- so at least you can understand what design theories explain you about and you will know how to take an action.
Q1: Let's have some time to have your questions/ thoughts about course.
About classmates
Q2-1: What do you want to know about your classmates?
Q2-2: What do you want your classmates to know about you?
Topic of visualization and interface design in Digital Humanities
Q3-1: What did you learn about visualization and interface in DH101?
It is not testing but checking - because some students haven't taken the DH101, I would like to ask you to fill in those who are new to digital humanities.
Can you share what you remember if you are familiar with some of the references below?
About visualization Wainer: http://www.stat.columbia.edu/~gelman/communication/Wainer1984.pdf
Manuel Lima: http://www.visualcomplexity.com/vc/
Nathan Yau: https://msucreativecomp.files.wordpress.com/2016/08/data_points.pdf
Data + Design (data visualization) https://orm-atlas2-prod.s3.amazonaws.com/pdf/13a07b19e01a397d8855c0463d52f454.pdf
Mapping of time: https://themorningnews.org/gallery/cartographies-of-time
About interface/ design elements:
Pink vs. Blue: https://blog.datawrapper.de/gendercolor/
About Digital Humanities: Digital_Humanities, Burdick et al., 2012 - p.42-45
Q3-2: If relevant, can you share any relevant project you've done in DH about visualization? What kind of (research) question did you wanted to answer and what did you find out? What do you feel you are hungry for in this field?
Structure of visual storytelling
- how to construct your visualization
Reading: storytelling with data (chapter1)
I choose this book to follow in the middle level of data visualization and the interface/communication design - the book is very elementary level and easy to follow, a bit limited but clear and simple. Just one easy reading during the summer. (Seriously, you can read it through one weekend) -- and even if you won't be in the design area, you will learn something how to communicate with visuals efficiently. So, I assume that you will AT LEAST read this book through. If you have any (financial) reason not to be able to get the book, please contact me.
Summary of Ch.1: Important of context
Storytelling is a technique how to tell a story. Not about the story itself (what is the story?) - so before you practice a storytelling, you need to have a story. (that is what the chapter one's saying "explanatory analysis"). Just telling something doesn't make a good storytelling, or won't make any good story automatically.
The contexts of storytelling: audience + storyteller + THE MESSAGE (action to call) + how.
How is a big part in this course - you will tell a story with visualization - it can be graphs(data) or interface(ex. colors). Something different would be your normal oral storytelling is linear, but this visual storytelling would be non-linear -- at least 2-dimensional (or higher). To start with, I want you to be prepared with one story and tell us about it, with the topic which always will make you think (and sometimes you don't want to think) -- about YOU.
Q4: "What" are you? Tell us about you in 3-minute story and a big-idea. Refer to p.29-31.
Introduction of Tool and Data, Contents
I will help you to practice on visual-storytelling. I don't assume that you have used any Adobe Products (photoshop, illustrator) or similar but will cover the basic features of visualization that you can do with any relevant graphic authoring tools. I assume that you have at least a computer with internet browser, so the tools I would use will be open-source/free web/apps. I recommend you, though, to use the relatively recent version of thee Chrome browser. I will use Framer for the assignment demo. This course is too short to cover the data and contents generation/management -- but I will show as detail as possible when I process the data for you. The creative part would be your contents and your visual interpretation, which is the main learning point.
Q5: As starting your visualization journal, could you try to make something visual about you?
During this process of initial sketch, I want you to think about the elements you create and the attributes of the elements you can make a change.
- go to Framer - https://framer.com (create an account)
- start a project (+ new)
- make a frame, choose screen size (Device): MacBook Air (1440 x 900). You can see the related attributes on the right.
- change the name of the frame to "FirstScreen" (on the left, you can see the layers)
- change the background color as black (or any dark colors)
- write your name, change the font size big, font color as white
- write "I am XXX" as XXX is the short answer of Q4.
- preview (play) and see how the work looks like
- share the work and submit the link as the evidence of your activity.
We will revisit this work again. -- I will add video demonstration. Demo script here.
Action items/ Todos
- Share your thoughts on the 5 questions above
- Assignment01: Before & After (6/29)
- Choose the individual research topic and Signup
Readings/References
Storytelling with data By C. Knaflic, Ch.1-2
Design as craftsmanship: Bauhaus Manifesto, 1-page PDF
Practice/ Skills
Framer: drawing a frame, change background color, text-change font-size/font-color, managing layers