Wireframes

What is a wireframe?

Used by UX Designers, a wireframe is a visual representation of a user interface (used for screen based design) stripped back to its most basic form without visual design or branding elements. It is used to define the heirachy of items on a screen and communicate the users needs. 

THUS wireframes; 

• Are the floor plan - a platform for the design to flow into
• Low fidelity, simplified outline of your product with distinct block layouts 
• Makes sure the spaces function well / how the user would expect
• can be in sketch form or fully annotated diagrams 
• Useful for giving visual designers a basis to begin creating screens
• Used as a reference point for functional specifications
• Communicates solely its functionality - which is clear without the excess elements 
• Used as a basis for prototyping and user testing ideas early on

The wireframes are generally created after the research has been done. This means the persona of the concept, user journey, sitemap and other discovery activities. More basic wireframes can be useful during the discovery process as to explore various functionality options (these would most likely be throw-away designs). It is important to have a strong grasp on your user's goals, motivations and tasks they want to achieve - thus the target audience and how the app will achieve its USP and optimum UX (e.g. getting somewhere will never take more than 3 steps).

Creating a wireframe:

1. Tools - low fidelity = pen and paper / software = use one designed for the task as contain reusable common UI elements to fasten the process. Axure is the current industry standard tool
2. Content - type of language, needs to be close approximation final content / no need for imagery (usually use X), but may want to indicate the type of image or brand
3. Layout - need basic appreciation for web page layout / grid system / asses pros and cons of multiple routes 

How should they look?

• B&W diagrams
• various UI elements and notes on them 
• No imagery 
• No branding and colour (aside from links and call outs for communication with either client or project team)

1. Start a design process with a rough wireframe
2. Enables a backbone and structure for the projects layout
3. Makes it easier to later build individual parts
4. Creative a content inventory - list all the elements for each page then organise them by priority so you know what should be seen predominantly on each page
5. Start with mobile first - smallest screen helps create a consistent experience across devices (better to ad things progressively than take things away)
6. Place content blocks before diving into details - helps maintain consistency across devices
7. Detail the blocks - plinks / placeholders for images / sizes / numbers of rows etc
8. 
   

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