IAT-102: 01 Sketchapalooza

IAT-102: 01 Sketchapalooza — A slide deck


Welcome to 102

User-flow sketches for an application

Close All Laptops Please

In future lectures, only the back 2 rows of the class may use their laptops.

Andrew Hawryshkewich


Reachable at:

  • Office hours — Tuesdays from 9-10am and Thursdays from 9-10am at the Surrey campus mezzanine.
  • ac.ufs@h.werdna
  • Room 2816, Podium 2, SFU Surrey
  • 778.782.9747

Vinu Subashini Rajus

TA for D101

Reachable at: ac.ufs@sujar_inihsabus_univ

Kimi Zhong

TA for D103/D104

Reachable at: ac.ufs@zecgnohz

Yaying (Sunny) Zhang

TA for D105/D106

Reachable at: ac.ufs@zgniyay

Vidhi Shah

TA for D107/D108

Reachable at: ac.ufs@sihdiv

The SFU Surrey campus mezzanine
The mezzanine

Email Rules

What you must include

Requirements for response:

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

Critiques Via Email

No-fly zone

Please note that we will absolutely not provide design critique via email.Please visit us during office hours or arrange a meeting if you would like design feedback.

Photograph of doll standing in a classroom gazing off into the distance

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-word.

Have a Question?

Please (and definitely) raise your hand. I'll get back to you shortly.

The Surrey 3140 lab

This is not a software course

We will provide enough introduction to software to complete your projects, but that is all. Advanced functionality and ability is up to you.

Other resources:


Your lovely neighbourhood learning system

Andrew opens Canvas now.



  1. Icons — 5% (Individual)
  2. Layout — 25% (Group)
  3. Presenting — 5% (Group)
  4. Colour — 10% (Individual)
  5. Portfolio — 30% (Individual)
IAT-102 Course Schedule


Every project will have a rubric available. It is highly recommended that you review it early on in a project. To help with understanding the rubrics, there will be 'rubric moments' embedded in most lectures.


This course has a zero tolerance policy for plagiarism. 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 with possible further repercussions. No exceptions.

Late or Problematic Submissions

Late submissions receive 10% per day late.

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

Read the briefs

90% of project errors are because the instructions were not followed.

Quizzes are...

  • 20% of your grade
  • A test of your lecture, lab, and reading knowledge
  • Delivered through Canvas or in lab
  • Time-limited

Readings are...

  • Provided entirely digitally
  • Important
  • Key to your success
  • On the quizzes
  • In the projects
  • Important


participation grade (5%) will consist of unannounced in-lecture or in-lab activities.

Required Course Materials

You will require for this course:

  • A sketchbook.
  • Writing utensils.
  • Access to the labs.
  • The ability to print materials.
Moleskine sketchbooks

Exploring Graphic Design

Your term, in IAT-102

Including (but not limited to):

  • Process
  • Creativity
  • Perception
  • Composition
  • History
  • Type
  • Audience


  • Presenting
  • Colour
  • Medium
  • Message
  • Portfolio
  • Ethics
  • Interacting
A bird staring out at the world around it
This is not a bird course.

What Letter Grades Mean

  • A: Exceeding expectations
  • B: Meeting expectations
  • C: Not-quite meeting expectations
  • D/F: Not meeting/failing expectations

I did exactly what the TA said but didn't get an A+

Please keep in mind that an A-range grade means you have exceeded expectations. We need to see a demonstrated ability for your own critical reflection and practice as a designer for that A-range grade.

When Serious Issues Arise

Get in touch with Andrew

We can help you work around difficulties outside the course, but I have to know that a problem has arisen first. Come and see me (or your TA) if an issue comes up that may seriously impede your ability to work on the course.


Some things to note:

  • The labs cannot be over-enrolled.
  • I am beholden to the waitlist.
  • Checking in with me this week is a good idea.
  • Do attend the first lab in case you make it in.

Lab Changers

Some things to note:

  • There is no 'just attending' another lab.
  • You are expected to attend the lab you are enrolled in until you receive an email saying otherwise.
  • TAs have no control over waitlists and lab changes; please do not ask them.
  • I only try to accommodate lab changes for problematic schedules, not "because I don't like the time"

10 Things

What were they?

What were the ten things required you know to pass this course?

Any questions?

Design is _________

What is Graphic Design to you?

You now have some time to discuss.

"Design is thinking made visual."
Saul Bass
Saul Bass' Vertigo Poster
"It’s through mistakes that you actually can grow. You have to get bad in order to get good."
Paula Scher
Paula Scher's layout work
"Graphic design will save the world right after rock and roll does."
David Carson
David Carson's; Don't mistake legibility for communication
"Don't design for everyone. It's impossible. All you end up doing is designing something that makes everyone unhappy."
Leisa Reichelt
A screenshot of the Gov.uk website
"The computer is to design, as the microwave is to cooking."
Milton Glaser
Milton Glaser's I (heart) NY

Design Myths

Creatives Are Special

Being 'creative' is not a gift, it's a skill.

A children's drawing of a user interface

Inspiration is Key

Waiting for inspiration is like lightning, you rarely (if ever) get hit.

An inspiration poster

I Am the Audience

Designing for yourself does not solve everyone's problems.

A very ornately edged mirror

Rules Are For Chumps

How do you know what you should break?

We Are All Designers

Design is not simply 'being creative' (or using Photoshop)

Graphic design is making posters

Graphic design today is much broader then that.

Break Time

Suggested activities:

  • Review the readings.
  • Stroll briefly.
  • Consume caffeine.
  • Nap.

We will reconvene in...

Design is Process

Drawing of mind-mapping process
First rule: Keep all process

Archive Your Work

We will require all your paper, digital and in-process materials for your final project. Therefore keep all materials.

Thinking Visually

Make use of your sketchbook; regularly

"I want the logo to be a 3d box with the word awesome on it."Please sketch it.

Design Thinking

  1. Define
  2. Research
  3. Ideate
  4. Choose
  5. Try
  6. Learn (and repeat)

Design Thinking

  1. Define
  2. Research
  3. Ideate
  4. Choose
  5. Try
  6. Learn (and repeat)
IAT-102: P01 - Icons


What do we need to understand? What do we know?

Icon Fundamentals

A graphic symbol meant to represent an application and, or, its functionality.

What might represent an app that helps you watch the eclipse?

A series of various icons
Visual research


Generate ideas, lots of them

For today we'll be focusing on ideation through sketching, though your readings touch on other methods.

Good Sketching

When generating ideas

We are looking to suggest and explore, not to confirm our ideas.

A Sketch Is

  • Quick
  • Plentiful
  • Appropriately detailed
  • Disposable

Quick Sketching

Practice some quick sketching of an icon for an app that helps you watch the eclipse. You have...

Appropriate Detail

Otherwise known as fidelity

Pick one of your 'watch the eclipse' sketches from earlier and redraw it with more detail. You have...

Appropriate Scale

Remember that you are going for quantity and sufficient quality.

Rubric Moment

When the rubric refers to "Quality and quantity of idea generation" we are talking about:

  • Quality: The appropriate level of detail, scale, and clarity of the ideation.
  • Quantity: The ability to explore a volume of ideas as requested by the brief.

Disposable Sketches

Practice some disposal of sketches.

Sketching is Our Language

Make use of your sketchbook regularly

"I want the logo to be a 3d box with the word awesome on it."

How to Choose the Best?

When dealing with a series of sketches, picking the best options to further explore is part of the challenge of learning design.

Early Icons

Xerox Star 8010 (1981)

Xerox Star 8010 icons (1981)

Apple Macintosh (1984)

Icons from the 1984 Apple Macintosh


A series of icons demonstrating scalability

Technical Notes

Some things to be wary of in the coming weeks

Good Scan Quality

If you don't have access to a scanner taking photos is okay only if the clarity of the image is good. (see image on the right)

An example of a good scan quality; high contrast and good white-balance

Bad Scan Quality

If we have trouble seeing the sketch clearly, we have a problem. If using your phone, apps such as 'Scan-cam' can clean up the image for you.

An example of a good scan quality; low contrast and bad white-balance

Next week's lecture will be all about how we see (and don't see) things.

Contacting Andrew

Office Hours:

  • Tuesdays 9-9:50am on the mezz
  • Thursdays 9-9:50am on the mezz Cancelled for this week only.


The SFU Surrey Mezzanine
The Surrey campus mezzanine (the mezz).