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 (Oct. 14).

P3: Wireframes
Team contracts

Information Architecture (IA) is...

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

Generate a List

We need to know what we are organizing. For example: food, dog, scratching post, collar, snake, rock, aquarium, flea medication, leash, cat, laser pointer, sand, heater, catnip, cage, fish, frozen mice, ball, scratching post, water conditioner

Hierarchy Pattern

Types of hierarchies:

  • Broad: Lots of top level items
  • Deep: Lots of depth, little at top
  • Strict: Items occur in one place only
  • Poly: Items can be in more than one place

Sketching architecture

food, dog, scratching post, collar, snake, rock, aquarium, flea medication, leash, cat, laser pointer, sand, heater, catnip, cage, fish, frozen mice, ball, scratching post, water conditioner

  • Broad: Lots of top level items
  • Deep: Lots of depth, little at top
  • Strict: Items occur in one place only
  • Poly: Items can be in more than one place

Metadata

Information about information

The markup that we use in HTML — such as <p> for paragraphs — is a form of metadata, helping define what the information is for a computer. It helps us use the computer to build relationships.

In this category we have two patterns:

  • Linear: One thing follows another
  • Hypertext: Emergent structure

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)

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

Context

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

A screenshot of the Windows 10 interface with the start menu open showing a number of squares with application icons

The Windows 10 interface

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

Changing Formats

Our lecture will be adjusting

For the next couple weeks we'll be changing formats for our lecture.

  • First half: Regular lecture
  • Second half: Coding tutorial

Web Toolkits

Prepped and ready to go

Available on Canvas in next week's module will be links to programs for your first 'web toolkits'. They contain:

Please come with them installed for our lecture time if you want to follow along with the tutorial.

Next lecture

Semantics, Accessibility and Markup

This week we will introduce HTML and how proper use can mean more accessible websites. Lecture recordings will typically available over the weekend.

1/1