Why You Need to Wireframe

Good piece from Webflow blog on importance of using a wireframe to build a website. 

Why you need to wireframe

"If a sitemap provides the blueprint for your whole website, a wireframe represents the blueprint for a single page (or group of pages). It’s what you’d see if you could take your sitemap, then zoom in on and enhance a single page in that high-level map. 

Like the sitemap, a wireframe captures hierarchy. But this time, that hierarchy is limited to a single page, and thus defines the relative importance of content as it flows down the page. 

Similar to prototypes, wireframes can come in a variety of levels of fidelity. Some wireframes basically are the final design, complete with the final fonts and sizing, sample photos, and even production-ready copy. Others are much more schematic, sticking with a collection of monochrome boxes and blobs where content will one day appear. 

Because of that wide range of fidelities, it’s important to clearly explain to your stakeholders just how final-final your wireframe is."

Image Source: Derek Clark created this wireframe, which shows only the basic elements of a page layout, but still communicates so much of how the final design will look and function.

599dde98b8464a0001c15498_blue-wireframe-by-derek-clark.jpg