Wireframing icon

Wireframes address problems early in the design phase, placing full focus on the user experience. Wireframes are conceptual design: outlining basic navigation, on-page structure and the organisation of content.

Dividing line pattern

What is a wireframing?

Wireframing is a way to design a product, service or application at a structural level. It should be used to lay out content, design complex functionality. The wireframes should be guided by understanding user needs through research and strategy.

Wireframes should be void of colour, using only white space and black lines to indicate form and layout. They should include written content, and very in terms of fidelity and level of detail.

Dividing line pattern

Why use wireframes?

  • Clarify website features and functionality
  • Display site architecture visually and avoid the abstraction site maps
  • Place a focus on website usability
  • Support a iterative design process where products can be amended quickly
  • Quickly experiment with multiple ideas
  • Save valuable project time, with calculated designs that provide guidance for developers
  • Quickly turn wireframes into working prototypes
  • Provide a solid foundation and guidance for User-interface design and UI design toolkits

Creating a website is evolutionary process. Wireframing is one of those parts of process that should not be skipped and doing so can have a detrimental effect on the end product, the live website or app.

Dividing line pattern

Need help with your UX?

If you’re looking for help with your project or have a few questions, I’m happy to help.