What is Information?

What is Information?

Lecture outline

In this week's lecture we will be introducing the course structure, as well as getting into the basics of thinking about information and designing with it.

What is Information?

A welcome to IAT-235

Close All Laptops


You are allowed to bring them, as we will occassionally have things to discuss online, but they are not allowed to be open whilst I am talking at the front. Please sit in the back row if you absolutely need it.

Andrew Hawryshkewich


Reachable at:

  • Office hours — Tuesdays from 2:30-3:20pm and Thursdays from 9:30-10:20am at the Surrey campus mezzanine.
  • ac.ufs@h_werdna
  • Room 2816, Podium 2, SFU Surrey

Mohammad Rajabi Seraji

TA for D101/D102

Reachable at:

Daniela Valdes

TA for D103/D104

Reachable at:

  • Office hours — Mondays from 11:00-11:50am at the Surrey campus mezzanine.
  • ac.ufs@sedlavd

Email Rules

What you must include

Requirements for response:

  1. Your full name.
  2. The course number (IAT-235).
  3. Your lab number (i.e. D101, D104).
  4. Your student number.
  5. A clearly articulated question.

Warning: No email crits

It is unfair for both us and yourself if we begin to offer the option of providing critiques via email. If you are looking for feedback on some work, please visit office hours or arrange a meeting to do so.


What to expect:

  • Me talking
  • Visual samples
  • You talking
  • Readings
  • Discussions
  • A break
  • Later in term; coding basics

Taking Notes

If you have not gotten in the habit of taking notes, I highly recommend starting. My lecture slides will not reiterate what I say word-for-


What to expect

  1. Crits, crits and more crits
  2. Group crits
  3. An intro to wireframing tools
  4. An intro to HTML + CSS
  5. Super-awesome support


Our course-site

Should you encounter any issues, or have any questions, please feel free to ask.


Warning: Not a software course

While we do cover some wireframing software and web software to some depth, teaching software is not the primary focus of this course. Please be prepared to spend a bit of time outside of class working on your skills (to pay the bills).

This being said, I am always happy to discuss software or technical considerations should you have any questions or concerns.


Readings are available entirely digitally. If I sense that the reading has not been sufficiently completed, a quiz may be called.


The 'random' checks

There will be random, unannounced or somewhat-announced checks for participation through the term both in-lab and in-lecture. It is your responsibility to make sure you are in attendance and participating.

5% of your final grade.


Those very calm events

There will be three quizzes in this course.

The first two will cover the readings, and will either be announced or unannounced, pending how many of you do the readings. The final quiz will be on HTML/CSS, and will require that you solve a series of coding questions in lecture.

20% of your final grade.


They move from static, to interactive, to responsive. Four in total:

  1. Information Design — 15% (Individual)
  2. Wires — 20% (Group)
  3. HTML/CSS — 10% (Individual)
  4. Web — 30% (Group)

75% of your final grade.

Group Work

A quick note

P2 and P4 will be done in groups. As warning in advance, a significant number of your process deliverables are graded separately. Remember, you are responsible for your own work.

Team contracts are also used in this course.

No Process?

Remember that a project which does not do the work is unlikely to have thought enough to succeed.

Great Process ? Great Design

While a great process can often result in a great design, keep in mind that a great process may still result in a poor final design depending on the decisions made.

The First Half of the Term

What we'll be doing

In the first half of the term, we're going to focus on getting you to deal with information.

This includes:

  • Asking questions of and presenting information
  • Information graphics
  • Looking at context and content
  • Information architecting
  • Wireframing and layout

The Second Half

What we'll be doing

In the second half of the term, we're going to get you coding and delivering information effectively.

This includes:

  • Web coding basics (CSS/HTML)
  • Working with interaction
  • Responsive design
  • User experience
"What happens when the internet escapes from behind glass, stops being on screens and starts being in physical things?"
Joe Malia
A blizzard of snow
How do you react to a blizzard?
A fellow guiding his sled-dogs down a snowy street
How we'll respond to a blizzard (aka. coding)


This course has a zero tolerance policy for plagiarism on projects. If you are found presenting work that is not your own or resubmitting old work without notice, you will receive a failing grade on that project. No exceptions.

Late or Problematic Submissions

Late submissions receive 10% per day late.

Problematic submissions — i.e. we can't open the PDF or the wrong files were submitted — receive an immediate 30% off plus late penalties on the resubmission.

What is an A?

An A is exceeding expectations. Our expectations are set out in project rubrics.

All Courses Are Equal

Just a quick, friendly reminder

If you feel you are being overworked by one course in particular, let the instructor know. If you do not feel comfortable talking to the instructor, chat with SIAT advising.

When Serious Issues Arise

Get in touch with Andrew

I am amenable to coming up with agreements, but I have to know that a problem has arisen first. Come and see me if an issue comes up that may seriously impede your ability to work on the course.

Any questions?

What is Information?

Information 'components'

  • The message
  • The forms we choose
  • Us (humans)
A computer desktop with lots of windows open
Different scales of letters and distances at which they can be read effectively
Icons of various building amenities
Isotype by Gerd Arntz
Icon of a police car
Icon of a female student
Visual instructions for a personal defibrilator
Instructions for a defibrilator
A sign stating 'If you hit this sign, you will hit that bridge'
The 2012 New York Transit Map
2012 New York City Transit Map
Info-graphic illustrating how to make a kid's book
How to Make a Kid's Book by Nicholas Blechman
A visualization of browsing history through favicons
Iconic History by Shan Huang
Various examples of information design in a traditional and non-traditional sense (i.e. wearable performance display for athletes)
Selections from Thoughts on Designing Information (Gobert & Van Looveren, 2014)

Reading Practice

To get us started on critical reading, please read through pages 144-147 of Selections from Thoughts on Designing Information (Gobert & Van Looveren, 2014) and highlight the following:

  • Portions of the text that evoke a strong response from you.
  • Portions of the text that you do not understand.

Do not stop to note down why, just highlight and move on.

You have 15 minutes.


Would anyone be up for sharing:

  • A portion of the text that evoked a strong response from you...
  • A portion of the text that you do not understand...

...and why?

This Term's Goal

This term we will be working with the Vancouver Plan team to help inform a broader audience about different drivers of change in Vancouver.

IAT-235 — P1: Information Design
Property Tax Report (Vancouver, 2014-2019)
Vancouver Plan
IAT-235 — Information Needed
Redesigned information pill bottles for Target
Selections from Infographic Designers' Sketchbooks (Heller & Landers, 2014)

This week's labs

The low-down

  • An introduction to one another
  • P01 introduction and work-time
  • Starting with information
  • Bring writing paper+pen!

Next Week's Lecture

Next week we will talk about context, content, and the design of information.

Contacting Andrew

Your Lecturer

Reachable at:

  • Office hours — Tuesdays from 2:30-3:20pm and Thursdays from 9:30-10:20am at the Surrey campus mezzanine.
  • ac.ufs@h_werdna