Wireframes are simplified outlines of all the different elements on a web page. They are used to get feedback on the layout, interface, navigation and functionality of a website.
1. Plan out the screens for the intended design. Write them down on a list.
2. Design layouts of ways to display the different elements for each screen.
3. Go through the wireframes and check that things are clear and have a clear ow.
4. Review the proposed design and adjust where needed.
WHEN
Once a rough draft of an idea has been developed and before moving to details.
WHY
To validate an initial (screen) design idea.
NOTE!
You can make boxes or outlines by hand drawing or using software for it. Try different layouts and review your top 3.
OUTPUT
A preview of a proposed design.
Next
Make a clickable prototype of the wireframe. Test and review the design and prototype.
Reference
RAMÓN, Oscar Sánchez, et al. GUI Generation from Wireframes. 2013./ GILRA, Anant; JUDE, Eugene. Methods and systems for creating wireframes and managing containers. U.S. Patent No 8,438,495, 2013./