IAT-102: 11 Getting Interactive

IAT-102: 11 Getting Interactive — A slide deck

Close All Laptops Please

Only the back 2 rows may use laptops during lecture.

IAT-102 — P05: Portfolio

Getting Interactive

The Old Rules Still Apply

Design Principles

Let's take a look at how the CBC uses colour and works with scale to create hierarchy in their design.


Let's take a look at how Google uses Gestalt principles to clarify relationships.

The Web is 95% Typography


Let's recap your reading on Horror Vacui for a moment.

How Fluid Works

Websites that are fluid and respond to different device sizes accordingly are considered responsive websites. Let's take a look at some examples at Media Queries

Delight in Design

"There is a tendency to think that to delight someone with design is to make them happy. Indeed, the work may do that, but more appropriately, the object is to produce a memorable experience because of its superior fit."
Frank Chimero
Adam Hartwig
The audiences for the portfolio project
Your portfolio's audiences.

Connections and Humans

We're lazy, er, or efficient

"...users have time to read [on average] 20% of words on a page."
Nielson-Norman Group

Patterns and Chunking

Giving us consistent and reasonable chunks of information makes it easier for us to use.

User Expectations

What they have experienced before

"Users spend most of their time on other websites"
Jakob's Law of the Web User Experience

Fulfilling a Need

Your first goal for every web project is fulfilling a need. You will have less than 20 seconds to convince an employer or client that your website is 'the one'.

What might help convince them your portfolio is 'the one'?


You want to craft a usable, accessible and pleasurable experience for your audience.

Making it Usable

Thinking about context

This is a link. But how do you know that?

Making it Interactive


A series of web buttons
A series of different download buttons.

Keeping Up With the Jones

Flat design is... good? bad? ugly? gorgeous?

A series of flat UI elements

The Fluidity Problem

The web is not a fixed medium, as much as you may wish otherwise. As designers, we must embrace this.

Aiming for Consistency

To help achieve consistency on the web, we develop style guides to help direct and maintain our design standards. Let's take a look at the Yelp Style Guide

Melanie DaVeid
Tyler Womack

Human Search Engines

We are the search engines. Google is just a tool. This is why effective navigation is key in effective design of websites.

How We Navigate

Some considerations:

  • We're lazy (make it easy)
  • We're efficient (make it quick)
  • We search (make it findable)
  • We click (give us directions)

What kind of design considerations might apply to making our navigation more usable?


Interaction points should clearly indicate they are interactive.

The Peer Review for your Process Analysis is due in this weeks lab!

Critique Quiz

In next week's labs we will be doing the critique quiz. It is important that you prepare for this quiz by reviewing the language and skills we have discussed in the course so far.

Next week we're going to get ethical.