What is wireframing?

Wireframing is a practice used by UX designers to define and plan the information hierarchy of their design for a website, app, or product. This process focuses on how the designer or client wants the user to process the information on a site, based on the user research already performed by the UX design team. Without the distractions of colors, typeface choices, or text, wireframing lets you plan your interface's layout and interaction. A commonly-used argument for wireframing is that if a user doesn’t know where to go on a direct hand-drawn diagram of your site page, it is irrelevant what colors or fancy text eventually get used. A button or call to action needs to be apparent to the user, even it’s not brightly colored and flashing.

Examples of Wireframe

• Wireframes are drawn with paper and a pencil, or at a whiteboard, have the advantage of looking and being very easy to change, which can help tremendously in early conversations about your website or product.
• With the help of paper-prototypes, you can test with end-users at every stage of ideation and design. Changes at these stages are much easier—and, therefore, cheaper than necessary changes after coding is underway.
• Switching later to software (after initially hand-drawing your wireframe) allows you to keep track of more complex decisions.

<aside> 💡 Watch this short video on how to sketch wireframes

</aside>

https://www.youtube.com/watch?v=ykHClgOUUj8

What to Consider during the Wireframe Process

Below are a number of ways different designers can structure the process from design to implementation:

• Wireframe > Interactive Prototype > Visual > Design
• Sketch > Code
• Sketch > Wireframe > Hi-Def Wireframe > Visual > Code
• Sketch > Wireframe > Visual > Code

If the task is very narrow and the visual design is either set or considered unimportant (such as with many backend administrative interfaces), then sketch > code makes sense, whereas if the time and resources and the business value are all high, then spending the time to make a high-definition wireframe and going through a cycle of testing with a fully realized interactive prototype makes better sense.

Best Tools for Wireframing