ah teaches information design (Bare Bones lecture)

Bare Bones

Lecture outline

An introduction to interaction design and wireframing. Lecture slides will be made available on the day of the lecture (Jun 21).

P3: Research and Present

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

IA and wireframing

  • Structure - Organising content or objects.
  • Hierarchy - Describing them clearly.
  • Purpose - Providing ways for people to get to them.

Grids & Sketching

A recap

Low-fidelity wireframing

These help illustrate:

  • Layout and structure
  • Hierarchy of content
  • Function (if applicable)
P4: Wireframes

Interactive wireframes

Your final deliverables for the project are interactive wireframes which are meant to help us understand the structure of content and how we interact with it.

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.

Mobile and desktop

As part of this project we are also 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

Working in remote groups

As part of this next project we will have you work in groups remotely. We have some specific recommendations for you as a result:

  • Set clear expectations
  • Communicate regularly
  • Use collaborative online tools
Team contracts

Communicate regularly

As part of setting expectations you will establish how you want to communicate. We recommend you are clear about:

  • How frequently you want to communicate?
  • Do you prefer lots of short messages, or fewer larger messages?

Set a weekly meeting

This part is important. Set at least one weekly meeting time that you check-in on the project. It is also a good idea to have collaborative 'work times' to both sit on chat and work on the project if schedules permit.

Use collaborative tools

We have chosen Figma specifically because it allows for easy team collaboration. Please pick tools you prefer for communciation and sharing of other project files.

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?

A screenshot of the iBook interface with a collection of different ebooks on a bookshelf

The old iBook interface

Inception Explained

Interaction as clarification

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

Wireframing interactions

Sketch #5

For lecture...

Come prepared to be introduced to Figma!

Next lecture

Semantics, Accessibility and Markup

This week we will introduce HTML and how proper use can mean more accessible websites. Pre-recorded lectures and slides will typically become available on Wednesdays.