Istanbul Art and Design Collective Online Course Series

With the exponentially growing amount of data around us, we need sound training in visualization to extract meaningful information from complex datasets. This course introduces working with data visualization and digital media for students new to the fields of information and interaction design. Students learn to create clear and meaningful visualizations, tell stories with interactive graphics, and create sophisticated interaction techniques. Weekly topics include; concepts of data visualization, collection and analysis of data, basic programming skills and web languages, choosing representations and interactivity design. Each student works on a course-long project which can be either a data visualization piece that can serve as exploratory and analytical tool; or a new media interface design as it relates to their own interest. A strong interest in working with data and interactivity is required.  


Class 01: What is design thinking? What is out there - introduction to information design through inspiring examples ?
In class exercise: How do you visualize information? Visual queries with simple arrays

Assigned Readings:
Tufte, The Visual Display of Quantitative Information (Chapters 1-3) Ware, Visual Thinking for Design (Chapter 1)

Lab 01: Introduction to Git workflow. Basic Web Development Tools: Introduction to HTML and CSS

Class 02: What is the question? Who is the audience? Data visualization techniques and Tufte’s principles
In class exercise: Creative visualization exercises

Assigned Readings:
Heer, Bostock, and Ogievetsky, A
Tour Through the Visualization Zoo Cairo, The Functional Art (Chapter 3,4)

Lab 02: Introduction to Javascript and basic data structures

Class 03: Perception and Visual Hierarchy: From Gestalt to Bertini

In class exercise: Evaluating data visualization: How to give design critics

Assigned Readings:

Healey, Perception in Visualization
Bertin, The Semiology of Graphics (Part 1, section 1) Elliott, 3
9 Studies About Human Perception in 30 minutes

Lab 03: Advanced Javascript methods and introduction to D3; data joins, selections and scales.

Class 04: Introduction to Human-centered Design: User Experience Principles

In class exercise: Sketch to Wireframe and Interaction Design

Assigned Readings:

Norman, The Design of Everyday Things pages 135-161 & 220-236

Lab 04: D3 scales, shapes and transitions.

Class 5: Narrative Visualization: Telling Stories with Data

Class exercises: Re-mapping the narrative space (collaborative work) Assigned Readings:
Segel & Heer, N arrative Visualization: Telling Stories with Data Vallandingham, S o You Think You Can Scroll

Lab 05: D3 map and layouts. Introduction to Mapbox and spatial data.

Class 06: Storytelling and Interaction Design

Class exercises: Storyboarding, User flows and Personas Assigned Reading:
McCloud, Making Comics (Chapter 4 World Building) Review 5 project from Review 2 projects from

Lab 06: Interaction design with Javascript 1. (Javascript interaction design libraries introduction)

Class 07: User testing methods and heuristic evaluation

Class exercises: Preparing and Implementing Talk-aloud Tests Assigned Readings:
Zuk and Et al.,Heuristics for Information Visualization Evaluation

Lab 07: Interaction design with Javascript 2. (Javascript interaction design libraries introduction) Page Structure.

Class 08: Final Presentations

Lab 08: Final project coding session + debugging

**Students will follow Scott Murray, Interactive Data Visualization for the Web, 2nd Edition An Introduction to Designing with D3.