OUGD504- What is a wireframe?

A Wireframe is a low-fidelity simplified outline of your product, you can usually recognise them by their distinctive block layouts, use of lines and to represent text, and 'x' squares indicating placeholders for future images.

Wireframes= the skeleton, they loosely shape the final product giving you an idea of where they will eventually go

Mockup= the skin, they are strictly visual and this is the documentation where you solidify your final decisions.

Prototype=they test your interface ideas and generate the feedback necessary to keep the design headed in the right direction.

Sketch => Wireframe => Lo-fi Prototype => Hi-fi Mockup => Hi-fi Prototype (Rapid) => Code

Wireframe => Lo-fi Prototype => Hi-fi- Mockup => Code

Why are they useful?

• Giving visual designers a basis to begin creating screens
• Using as a reference point for functional specifications
• Communicating the functionality you are going to build with stakeholders without muddying the waters with visual design elements or branding
• Exploring ideas without the difficulty of change inherent in Photoshop mockups
• Using as a basis for prototyping and for user testing ideas early on