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 (October 8).
Peer critique prep
In preparation for today's critiques, please:
- Place your bags/belongings off to the side or under the table.
- Load up your P1 on your laptop.
- Make sure to have a pen or pencil ready.
- Once ready please raise your hands and we will provide you with a stack of post-its.
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.
- Include your name at the bottom of the critique.
Leave your post-it with a comment at the project you are providing critique on.
Peer critique process
After each prompt, you will move to the next project. Please make sure to leave your critique on a post-it at the project with your name on it.
Peer critique start
Please move +1 project.
Look through the process document
What do you like? and what do you wish?
You have...
Look through the process document
What questions do you have of the process?
You have...
Look through the process document
Does the process appear to explore a high quantity of different ideas? Why so, or why not?
You have...
Look through the process document
Can you easily navigate and understand the process? Why so, or why not?
You have...
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...
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...
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...
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...
Attendance
As hinted at last week, there are benefits to having attended today:
- Here on time?
- Here late?
Use the critique you have just received as a means for improving your projects.
In preparation for lecture...
Please close up any laptops, cellphones, Game Boys, Palm Pilots and other 'beep-boop' devices.
Information Architecture (IA) is...
- Organising content or objects.
- Describing them clearly.
- 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
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
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?
The old iBook interface
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
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:
- Visual Studio Code (a free code editor)
- Google Chrome (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
Teamwork reflections
We will have a brief teamwork reflection for you to complete each week in the lab time. These will provide us with a quick means of following up on questions or concerns as they come up for the team.
There is no lecture/labs on Oct 15
We will reconvene next in two weeks time (Oct 22).