P.03 // WIREFRAMES

//WHAT?

Wireframes are a rudimentary simulation of a user interface for a computer system or another digital device. They usually showcase the different screens of an application or software system.

//WHY?

Wireframes  allow you to test the user experience, the functionalities, and the usability of the solution you are designing. The creation of wireframes is usually cheap and quickly done, especially in early project phases, when you want to test the general concept of an idea.

//ROLES

  • No specific team roles necessary. Everybody has the same tasks and responsibilities.

//TOOLS / INFRASTRUCTURE

  • Pens and Post-its

  • Paper, cardboard

  • Computer with internet connection for online tools (see below)

PRINCIPLES

1. Draw and sketch screens

1.1 Use simple materials: Get hold of some simple materials such as paper, cardboard or Post-its.

1.2 Sketch: Sketch out the screens roughly as you want them to appear. Be guided by apps or systems that inspire you!

1.3 Think through all steps: Think through and work through all the steps needed for experiencing  your idea - even if they initially appear obvious.

2. Develop wireframes

2.1 Develop interactive wireframes: Then use additional tools available for this purpose (see below) by photographing your sketches and linking them together within the tool.

2.2 Tools: Tried-and-tested tools for developing wireframes include:

2.3 Ready for testing: The new “app” is ready when it can be tested.

EXAMPLES

MATERIAL

3. Test

Higher-resolution prototypes: Once the wireframes have been tested, generate higher-resolution prototypes - mockups - and continue testing them.

© 2018 University of St. Gallen / ITMP