Wireframe and prototyping
What is a wireframe?
A low-fidelity mockup of the design
Why do wireframing?
Allows you to focus of determining the layout of the design rather than spending too
much time on little details (like font or images etc)
What is meant by the term 'responsive design'?
Designing in a way that reflects the flexibility needed when designing webpages for
different screen sizes
What are the suggested wireframe mockup sizes?
Mobile: 320px
Desktop: 1000px
Which size screen should you start with first when creating wireframes using responsive
design principles?
Generally starting with the smaller screen size (mobile) can be useful in streamlining
content and navigation
What are the different types of navigation systems?
Primary navigation
Secondary navigation
Utility navigation
Related content
Inline links
Index
Search
What questions should you consider when designing the navigation system?
How do navigation elements relate to one another and to the current page?
Are some links more important than others?
How are the links grouped?
What are other options based on current tasks or goals?
Where am I?
Why is it important to have proper navigation systems?
It allows the user to efficiently find the content they are looking for and thus enhances
useability
What elements can be used to assist with wayfinding?
Site identification
Page titles
'You are here' indicators
Breadcrumbs
Linking back home
