B-DC 221
Computation in Design
Information Design Project
2020
Week 1
Computation in Design
Information Design Project
B-DC 221
Computation in Design
Information Design Project
2020
Week 1
Visual Arts and Design
Across Disciplines
Collaboration
Coding
Andreas Schlegel
Background
Show some works.
B-DC 221
Computation in Design
Information Design
2020
Week 1
The guiding principle behind this project is the transformation of numerical data through code and design into visual infor-mation and knowledge.
The Project
When we look at data, we see numbers and complexity that are often inaccessible to the layman. The challenge for a designer is to propose ideas and solutions to how data can be transformed from its raw format into a simple, elegant form in order to synthesise and reveal insights conveyed through meaningful narrative and experience.
In a series of exercises and followed by an individual project, students learn, analyse, visualise and interpret data using a number visualisation techniques and existing or self-generated datasets.
B-DC 221
Computation in Design
Information Design
2020
Week 1
Data and Code
Introduction + 5 sessions
The Project
This project is divided into two parts. First, students undertake a series of exercises that deepen their understanding of the interrelation of data, code and design. The exercises are conducted in groups to explore data and code together.
1 Code Basics, develop an understanding of code principle. 2 Data Processing, practice formatting and processing data with code. 3 Data Aesthetics, apply simple and elegant form to a dataset. 4 Interactions, engage with data interactively through code. 5 Data in Motion, apply movement to data over time programmatically
B-DC 221
Computation in Design
Information Design
2020
Week 1
(De)coding Data
Briefing + 4 sessions
The Project
(De)coding Data is a self-directed project in which students start from a selected or generated data set to develop visual representations that provide access to and insights into the hidden patterns, details, information and structures of meaning that the dataset can reveal.
B-DC 221
Computation in Design
Information Design
2020
Week 1
The Project
Mix of media
Modular
Static/dynamic
Weekly sessions
1
online
Computation in Design: Information Design Project
2
online
Data and Code 1
3
on-campus
Data and Code 2
4
online
Data and Code 3
Introduction and overview of workshops, exercises and documentation procedures, Data and Code series
Code Basics, in class workshop and activity
To develop an understanding of code principles
Data Processing, in class workshop and activity
To practice formatting and processing data with code
Data Aesthetics, in class workshop and activity
To apply simple and elegant aesthetics to a data set
B-DC 221
Computation in Design
Information Design Project
2020
Week 1
Weekly sessions
5
online
Data and Code 4
6
online
Data and Code 5
7
on-campus
Review and sampling of Digital Portfolio progress
8
online
Project Briefing
Data Interactions, in class workshop and activity
To engage with data interactively
Data in Motion, in class workshop and activity
To apply movement to data over time
Project briefing and ideation
To develop a screen-based application that visualises data through code
Choose your data
Students to share their progress
B-DC 221
Computation in Design
Information Design Project
2020
Week 1
Weekly sessions
10
on-campus
(De)coding Data 2
11
on-campus
(De)coding Data 3
In class development and implementation
9
on-campus
(De)coding Data 1
In class development and implementation
Sense-making and Data Narrative ideation
In class development and implementation
12
on-campus
(De)coding Data 4
In class development and implementation
Digital Portfolio and preparation of final deliverable
B-DC 221
Computation in Design
Information Design Project
2020
Week 1
Weekly sessions
14
Assessment
13
on-campus
Open Consultation
B-DC 221
Computation in Design
Information Design Project
2020
Week 1
B-DC 121
Computation in Design
Information Design Project
2020
Week 1
Learning
on-campus and online
individually and in smaller groups
feedback and group discussions
independently
B-DC 121
2020
Week 1
Independent Learning
Make use of resources shared in class
Learn from resources online and the library
Study, learn, practice with classmates
Experiment and practice continuously
Getting stuck
Computation in Design
Information Design Project
B-DC 221
2020
Week 1
Digital Portfolio
What is it and where is it?
Computation in Design
Information Design Project
B-DC 221
2020
Week 1
Digital Portfolio
Folder structure
Available for download as .zip from Google Drive
Document your process and outcomes
Archive and organise materials for deliverable
Read and follow the Digital Portfolio Guidelines
Keep(s) your work organised
Computation in Design
Information Design Project
B-DC 221
2020
Week 1
Digital Portfolio
Computation in Design
Information Design Project
Available for download as .zip from Google Drive, please follow the link attached to the screenshot on the right.
B-DC 221
2020
Week 1
Computation in Design
Information Design Project
Guided
Learning
Data and Code
Independent
Applied
(De)coding Data
B-DC 221
2020
Week 1
10,000 vs 20
Computation in Design
Information Design Project
B-DC 221
2020
Week 1
10,000 vs 20
– How long does it take to acquire a new skill?
Computation in Design
Information Design Project
B-DC 221
2020
Week 1
10,000 vs 20
Break down a skill into its components
Learn enough to know when you are making a mistake
Remove any and all barriers to practice
Practice at least for 20 hours
Computation in Design
Information Design Project
B-DC 221
2020
Week 1
10,000 vs 20
Growing from
Seed
Computation in Design
Information Design Project
B-DC 221
2020
Week 1
10,000 vs 20
Growing from
Seed
Computation in Design
Information Design Project
B-DC 221
2020
Week 1
10,000 vs 20
Computation in Design
Information Design Project
B-DC 221
2020
Week 1
10,000 vs 20
Computation in Design
Information Design Project
B-DC 221
2020
Week 1
10,000 vs 20
Computation in Design
Information Design Project
B-DC 221
2020
Week 1
10,000 vs 20
Computation in Design
Information Design Project
B-DC 221
2020
Week 1
10,000 vs 20
Computation in Design
Information Design Project
B-DC 221
2020
Week 1
10,000 vs 20
Break down a skill into its components
Learn enough to know when you are making a mistake
Remove any and all barriers to practice
Practice at least for 20 hours
Computation in Design
Information Design Project
B-DC 221
2020
Week 1
10,000 vs 20
Break down a skill into its components
Learn enough to know when you are making a mistake
Remove any and all barriers to practice
Practice at least for 20 hours
Curiosity
Exploration
Patience
Practice
Computation in Design
Information Design Project
B-DC 221
2020
Week 1
10,000 vs 20
The Expert
The Curious
Computation in Design
Information Design Project
B-DC 221
2020
Week 1
Data
Tools
Code
Computation in Design
Information Design Project
B-DC 221
2020
Week 1
Data formats (csv, json)
Existing data sets or make your own data set
Quantitative Data
Working with Numbers
Data
Computation in Design
Information Design Project
B-DC 221
2020
Week 1
Computation in Design
Information Design Project
B-DC 221
2020
Week 1
Computation in Design
Information Design Project
B-DC 221
2020
Week 1
Computation in Design
Information Design Project
B-DC 221
2020
Week 1
Browser
Excel and csv
Google Drive
HTML and CSS
JavaScript and p5js
Pen and paper
Primary
Optional
Tools
Code editor
JSON
Computation in Design
Information Design Project
B-DC 221
2020
Week 1
Why JavaScript and p5js?
Unsurprisingly, for the eighth year in a row, JavaScript has maintained it's stronghold as the most commonly used programming language. Going further down the list, we also see moderate gains for TypeScript, edging out C in terms of popularity. Additionally, Ruby, once in the top 10 of this list as recently as 2017, has declined, being surpassed by newer, trendier technologies such as Go and Kotlin.
Computation in Design
Information Design Project
B-DC 221
2020
Week 1
Introduction to Code
Elements
Coding Tufte and Albers
Code
Today's exercises
Computation in Design
Information Design Project
1
2
3
B-DC 221
2020
Week 1
Break
10 minutes
Computation in Design
Information Design Project
B-DC 221
2020
Week 1
Computation in Design
Information Design Project
Introduction to Code
The Sketch
B-DC 221
2020
Week 1
Computation in Design
Information Design Project
Introduction to Code
The Canvas
Width
Height
Origin
B-DC 221
2020
Week 1
Computation in Design
Information Design Project
Elements
B-DC 221
2020
Week 1
Computation in Design
Information Design Project
Coding Tufte and Albers
In the following you will find a series of images taken from Edward Tufte's Visual Display of Quantitative Information and the exhibition catalog for Anni Albers at the Tate Modern. Let's re-create some of them using code.
Hand out briefing document
B-DC 221
2020
Week 1
Computation in Design
Information Design Project
Coding Tufte and Albers
beginShape
endShape
fill
vertex
fill
rect
1
2
B-DC 221
2020
Week 1
Computation in Design
Information Design Project
Coding Tufte and Albers
ellipse
for-loop
random
stroke
strokeWeight
fill
for-loop
if else
pop
push
random
translate
triangle
3
4
B-DC 221
2020
Week 1
Computation in Design
Information Design Project
Coding Tufte and Albers
beginShape
endShape
stroke
vertex
beginShape
bezierVertex or curveVertex
endShape
stroke
5
6
B-DC 221
2020
Week 1
Computation in Design
Information Design Project
Freestyle Practice
7
8
9
10
11
B-DC 221
2020
Week 1
Computation in Design
Information Design Project
B-DC 221
2020
Wrapping up
Homework
Complete Code Exercise
Read Digital Portfolio Guidelines
Computation in Design
Information Design Project