How do you make wireframes?

or at least, how I do it!

What is wireframing?

Why is wireframing important?

It creates space for collaboration

It creates alignment

It saves time

A couple caveats before we get started:


It does take practice

The phases of wireframing


Step one: Start by wireframing what you know

No comment box? Who knows — we might do something different depending on our context

Step two: Start ideating

It’s so hard to watch yourself work

Things to remember:

Step three: Start Reviewing

The next phase: Development

Step 4: Copy

Step 5: Visual Style

Step 6: Functionality

Final Wireframe

Step 7: Review again!

There you have it!

Happy Wireframing!

Digital Designer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store