What is the purpose of wireframing? And what is it?

Wireframing’s purpose is to set up the structure and flow of your app or site. A real-world equivalent to the blueprint drawing and then framing of a building. It’s a quick, low-fidelity way of testing the product before adding the visuals and full content.

Usually done with a monochrome palette, text is mostly be filler (lorem ipsum) but with header/button text to test flow. Graphics are represented by placeholder solid shapes.

The screens are laid out based on hand-sketched sessions and the features list that we’ve already compiled.

After laying out the screens, we take the wireframe into an interactive prototyping tool to test the flow with stakeholders and/or users who fit your persona types.  

Interactive Wireframe Prototype

The example shown here are wireframes of a few screens for the FirstPersonas product developed for a client.  Wireframing was for a mobile-first web app, and planned for a responsive layout from small to large screens using a Grid system. View the interactive prototype in the InVision App.

TOOLS USED:

Sketch App
InvisionApp (protyping)
Lookback.io (user testing)