WIRE-FRAMING
Lead paragraph
Wire-framing is used by designers in any project that deals with digital interfaces and services. Generally, wire-frames can be created during the early ideation phase to provide enough layout to get the whole team on the same page. But wireframes are great during prototyping because of their iterative nature.
PREPARATION: up to 15 minutes
DESIGN PHASE: Creation
DURATION: 15-45 minutes
TEMPLATE OR GUIDELINES: n/a
FACILITATORS: 1 per workshop
RESOURCES: Pens, Post-its, a large sheet of paper or whiteboard
PARTICIPANTS: 3–30, design team, partners, community members, etc.
EXPECTED OUTCOME: Wire-frames
Wire-frames help designers to understand and explore by prototyping a specific interface or different parts of software work together. Wire-framing makes prototypes and interactive experience, which can range from low to high-fidelity.
STEPS
1.START:
State the selected “How Might We” statement or a sub-focus area of it.
2.IDENTIFY:
Based on your HMW statement or the focus of what you are interested in, define the criteria and select the suitable participants.
3.PREPARE:
Organize a meeting with the selected participants, and gather the necessary resources and supplies. Choose a persona or a specific user type: What user are you going to test the wireframes with? Review scope and clarify prototyping questions: Briefly reflect. What is your scope? What do you want to learn from this prototyping activity? Do you want to test the whole experience or just a part? Which parts are you most interested in? Think about what expectations will be set up-front, how you will start and end the workshop, and how much time participants are expected to dedicate to this activity.
4.CONDUCT:
Ask participants to sketch rough versions of the different screens of the interface on paper, on whiteboards, or in a special wire-framing app (e.g. https://moqups.com/). Leave out aesthetic aspects, colours, fonts and alike. Use placeholder content – dummy text or filler text.
1. Present the wireframes to your audience: Establish the context in which the presented wireframes will be used in the future application. Then introduce the wireframes, explain visual conventions, and present key elements.
2. Solicit feedback: Discuss with the team or a selected audience.
3. Document as you go along: Add annotations to capture changes and new ideas about the behaviours of interface elements.
5.REPORT:
Discuss the results and write up the key outcomes from this exercise.