An introduction to interaction design and wireframing. Lecture slides will be made available on the day of the lecture (Jun 21).
Information Architecture (IA) is...
- Organising content or objects.
- Describing them clearly.
- Providing ways for people to get them.
The Lowest Level
The very basics of wireframing
IA and wireframing
- Structure - Organising content or objects.
- Hierarchy - Describing them clearly.
- Purpose - Providing ways for people to get to them.
Grids & Sketching
These help illustrate:
- Layout and structure
- Hierarchy of content
- Function (if applicable)
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
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.
Help us know what and how to focus
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.
Come prepared to be introduced to Figma!
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.