Wireframes

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.

Wireframes

2 HOURS - 1 DAY

Previous Method

back

Next Method

TASKS

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./

Wireframes

2 HOURS - 1 DAY

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.

TASKS

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./