What’s Wireframing? Why Do It?

Since there are already well-written resources on wireframes (many of which include pictures!) I’m directing you to two articles on the subject.

The first article, “Using Wireframes to Streamline Your Development Process” (webdesignerdepot.com, 2009) starts by stating

Creating a wireframe is one of the first steps you should take before designing a website.

A wireframe helps you organize and simplify the elements and content within a website and is an essential tool in the development process.

A wireframe is basically a visual representation of content layout in a website design.

The article includes sections on Benefits of Wireframing, Tools for Wireframe Development, and Wireframe Examples.

The second article, “20 Examples of Web and Mobile Wireframe Sketches” (speckyboy.com, 2011) is primarily a collection of examples to look at. It states

A wireframe sketch is effective in that:

• You can capture your creative spark and fluidly sketch out your design.
• You can work with your client without committing anything to code, thus saving yourself time and number of actual design revisions.
• You get a relatively quick sample that you can show the client and then work off of – think of is as an outline to an essay.

The article includes sections on Hand-Drawn Wireframe Sketches and Digital Wireframe Sketches.

We’ll do hand-drawn wireframes, followed by a digital mock-up before building the site in HTML/CSS.