Bare Bones

Bare Bones

Lecture outline

Covered in this lecture:

  1. Interacting with information
  2. Exploring layout and structure
  3. Wireframing and fidelity

Full lecture slides will be available the day of the lecture.

A pair of very low-fidelity wireframes
Bare Bones

Please Close All Laptops

Only the back row may make use of their laptops during lecture.

Information Architecture (IA) is...

  1. Organising content or objects.
  2. Describing them clearly.
  3. Providing ways for people to get them.

The Lowest Level

The very basics of wireframing

  • Structure
  • Hierarchy
  • Purpose


  • Structure - Organising content or objects.
  • Hierarchy - Describing them clearly.
  • Purpose - Providing ways for people to get to them.
A pair of very low-fidelity wireframes
Why were wireframes identified as 'controversial' in your reading?

Grids & Sketching

A recap

Block Sketches

Low-level wireframes

These help illustrate:

  • Content areas
  • Hierarchy of areas

Please sketch your P1 design as if it was a low-level wireframe, it should help illustrate:

  • Content areas
  • Hierarchy of areas

The Next Level

Low-to-mid-level wireframes

These help illustrate:

  • Layout
  • Content
  • Function (if applicable)

The Next Level

Please sketch your current P1 design as if it was a low-to-mid-level wireframe, it should help illustrate:

  • Layout
  • Content
  • Function (if applicable)

Another Level!

Mid-level wireframes

These help illustrate:

  • Grids
  • Hierarchy of content
  • Basic aesthetics

Another Level!

Please sketch your current P1 design as if it was a mid-level wireframe, it should help illustrate:

  • Grids
  • Hierarchy of content
  • Basic aesthetics

P2: Wireframes

This project has you beginning to work with interaction and information.

P2: Wireframes

Working in Groups

The team contract review.

P2 Final Deliverable

Interactive wireframes

Your final deliverables for P2 include interactive wireframes and a sitemap; both are meant to help us understand the structure of content, and how we interact with it.

Submit Your Sketches

Please take a photo of your mid-level sketches and submit them to

Mobile and Desktop

As part of this project we are requiring you to consider both mobile and desktop displays. We will talk in more depth next week, but think about:

  • Using the grid structure
  • How might my content reorganize for mobile?
  • How can I keep consistency when reflowing content?
  • Using the grid structure

Wireframing Display Sizes

Challenges to consider

  • Linguistic considerations
  • Misinformation, or information overload
  • Accessibility of information
  • and more...

Interactive Wireframes

Sitemaps and low-to-mid-level wireframes should help inform our interactive wireframes. This is how we will test if our interactions with information are reasonable.

Adobe XD/Figma/Axure/...

A wireframing tool

Next lab you will receive an introduction to a wireframing tool. Remember that wireframes — just like everything else in design — come in different levels of fidelity.

Flow + Wires = Chunking

Wireframes help us understand task chunking

In addition to helping us see the interactions and design fundamentals, wireframes will help illustrate how well the task has been broken up.

Interaction Wayfinding

Help us know what and how to focus

Wayfinding through:

  • Context
  • Metaphor
  • Narrative


Helping us understand

This is a link, but how do you know that?

An image of the metaphor-heavy Magic Cap interface
The interface from Magic Cap uses metaphor heavily (more at The Anti-Mac User Interface)
An info-graphic illustrating how to make a kid's book
How to Make a Kid's Book by Nicholas Blechman
Inception Explained
VanSort Recycling Game

Interaction as Clarification

Avoid using interaction to make things 'cool'. Aim for purposeful and clarifying interactions with objects on the screen.

Wireframing Interactions


This week is MEGA-LAB

The low-down

For labs at 2:30pm — D101, D103 — please meet in your regular lab space to start. We will form mega-lab later in your lab.

For labs at 4:30pm — D102, D104 — please meet in room 3130 with your P1 ready for review.

Members of the City of Vancouver and CityStudio will be joining us.

Next lecture is on 'teh webz' and its fluid nature.

There will also be a quiz.


Things to note

  • You will have 30 minutes.
  • You will be completing it on paper.
  • It will be open book, but not open laptop.
  • It will use any readings up-to and including next lecture's.
  • There will be 2-4 short answer questions.

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