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 (September 23).

In preparation for lecture...

Please close up any laptops, cellphones, Atari 2600's, Game Boys and other 'beep-boop' devices.

Today's critique

Our approach

We will be asking questions of the work. Please phrase every 'critique' as a question.

Information Architecture (IA) is...

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

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

• 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

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 = chunks

Wireframes help us understand portions

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

Keep in mind some considerations of designing for mobile and desktop:

• 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?

Interaction as clarification

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

Wireframing interactions

Peer critique prep

In preparation for today's critiques, please:

1. Find two peers to do critiques with.
2. Load up your P1 on your laptop.
3. Make sure to have a pen or pencil ready.

Peer critique reminders

For today's peer critique, we will be providing you with a series of prompts to guide your critique. For each critique you provide please make sure to:

• Be specific about what you are referring to.
• Be clear about what is working, or not.
• Explain why it is working, or not.
• Take notes if you are receiving critique.

Look through the process document

What do you like/wish? Why?

You have 4 minutes.

Look through the process document

What questions do you have of the process?

You have 4 minutes.

Look through the process document

Does the process appear to explore a high quantity of different ideas? Why so, or why not?

You have 4 minutes.

Look through the process document

Can you easily navigate and understand the process? Why so, or why not?

You have 4 minutes.

Look through the final desktop and mobile mockups

What do you like/wish? Why?

You have 4 minutes.

Look through the final desktop and mobile mockups

The project rubric looks at clear hierarchy and composition. Do you feel the relationships and organization of content are clear? Why so or why not?

You have 4 minutes.

Look through the final desktop and mobile mockups

The project rubric looks at if there is a consistent hierarchy between mobile and desktop. Does the hierarchy feel consistent? Why so or why not?

You have 4 minutes.

Look through the final desktop and mobile mockups

The project rubric looks at if the scale of content is readable or legible at mobile and desktop sizes. Does the content feel appropriately readable or legible for desktop and mobile sizes? Why so or why not?

You have 4 minutes.

Critique complete

Use the critique you have just received as a means for improving your projects.

Additional office hours

In addition to existing office hours, further office hours will be available:

• Wednesday, Sept. 24 from 7:30-8:30pm
• Thursday, Sept. 25 from 7:30-8:30pm
• Friday, Sept. 26 from 9:30-10:30am
• Monday, Sept. 29 from 9:30-10am

Changing Formats

Some changes to our class structure over the next couple weeks:

• We'll be doing code tutorials in the lecture, so please bring laptops to follow along.
• Critique times will be pre-defined based on Canvas groups, I will announce them in advance of the class.

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:

• Visual Studio Code (a free code editor)
• Mozilla Firefox (a free web browser)

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

Teamwork

Working together

There is no class on September 30

We will reconvene next in two weeks time (Oct 7).

Homework review

Things to work on this week:

• Submit your sketching exercise before 8am on Monday (Oct 6).
• Work on your project and bring your deliverables to class in two weeks.

Next week: This week we will introduce HTML and how proper use can mean more accessible websites