Activity: Wireframes

Now you have a rock-solid foundation and know what to start building, time to visualise the product.


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

  1. Sketch out the products states and pages on paper and play around with the layouts.
  2. Once you start to get more defined and learnings, start digitising them.
  3. 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.
  4. 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.