Wireframing is one of the most important activities in the scoping stage as it begins the conversation towards the final designs. It lets you prototype layouts, understand what needs to be displayed on a page and how much room you actually have to play with.
This activity can start as early as the very first partner meeting with some rough sketches in your notepad about what the look could possibly be. Try to keep most of the wireframes as sketches until you feel like you’ve explored most of the product already so that all you’re doing is testing them as digital designs. This way you can keep fast and nimble with making changes rather than having to spend hours redoing everything.
Wireframes should be a basic mono or duo tone of the product, try to keep them as simple as possible without any of the visual niceties of a final product. This keeps the discussion focused to the layout and DOM structure.
Before you start
Completed activities:
- Stories backlog
- User flow
- Product journey
Details
Level of difficulty
Moderate
Stage
- Inspiration
- Ideation
- Discovery
Suggested time
3-4 days
Participants
- Designer
Materials
- Design software
- Sketchpad
- Pens
- Print outs
Steps
- Sketch out the products states and pages on paper and play around with the layouts.
- Once you start to get more defined and learnings, start digitising them.
- Look for patterns and utilise the Design Patterns activity to help find them. This will speed up the development time and help you create a library of functionality you can keep returning to.
- If the project still is in heavy flux with changes to features or layouts, keep the designs on paper. Speed is key here and only move onwards if flux has calmed down and more time can be devoted to refining.
Justification
Now you have a rock-solid foundation and know what to start building, time to visualise the product.
Written by Shannon England
Branding, Communications and Marketing
Shannon is our branding and marketing go-to. When she isn’t working on our communications and marketing campaigns, she is typically drinking coffee or at the local plant shop.
