Class 04

Contents

• Home Page
• Class 01
• Class 02
• Class 03
• Class 04
• Class 04 Website
• Class 05 Website
• Class 05
• Class 06 Website
• Class 06
• Class 07 Website
• Class 07
• Class 08
• Class 08 Website

Wireframe & Design

Wireframes are a way for UI/UX designers to layout an example of how they want a website to look.

They are very high level and serve as a basic template with little detail included. These are a pre-cursor to a mockup which comes before the prototype which again comes before the website itself.

Wireframe Tools

There are some great tools out there to make Wireframes with such as Invision, Lucid Charts and Balsamiq to more advanced applications such as Adobe XD and Figma.

My favourite is Figma.

Be prepared

When you intend to make a wireframe make sure you are well prepared.

1. Do your research.
2. Prepare you research for quick reference.
3. Map out your user flow.
4. Draft, don’t draw. Sketch, don’t illustrate.
5. Add some detail and get testing.
6. Start turning your wireframes into mock ups.

How to make your wireframe good: Three key principles

1. Clarity - Ensure you make everything nice and clear. Put things where people would expect them to be. Anticipate your users needs.
2. Confidence - Create a layout that a user can navigate with confidence. Make sure your users don’t feel nervous to use your site.
3. Simplicity - Keep it simple, don’t over complicate it as it may confuse people.