How to Read a Wireframe

You’re reading the Fuzzy Math design series on wireframe basics: how to read, evaluate, and design wireframes effectively.

There are tons of great articles out there currently on the subject of wireframes and how to effectively create them. With wireframes not only being a crucial piece of the puzzle for designers but also clients, the gang at Fuzzy Math thought it was about time to present a few guidelines for how to read and understand what exactly is going on in a wireframe.

Reading a wireframe

Whether new to the world of wireframes, a client or stakeholder being presented one, or just a general fan of wireframe goodness, the best place to start is with the basics. A solid understanding of the pieces that make up a wireframe, will make reading one much easier. Everyone has their own style, but take a look below for a rundown of a few of the basic components to keep in mind:

Click on the image to view and download the 11×17 PDF (French version here).

How to read a wireframe, user experience design, Diagram of a wireframe,


Next up in the wireframe series: How to evaluate a wireframe

Subscribe to our newsletter to receive more content like this

Our monthly newsletter on UX design, research, planning, and strategy.

Filed Under:

envelope mail-envelope-closed file_pdf arrow-up chevron-left arrow-left close x linkedin twitter facebook mailbox search