Before I started working at my last full-time gig, anytime I would design a website I’d start off with the design and almost always found myself wondering what I would do with the navigation. The sites didn’t always provide the best user experience and I didn’t know how to go about fixing this problem. Then I learned about wireframing and everything started coming together.

What are Wireframes?

Wireframes are the blueprint of a website. Like any well-built house, the blueprint provides the framework so the house has a solid foundation. A website is very much like a house, it too needs a solid foundation so it provides a pleasurable user experience.

There are different types of wireframes you can use. One option is building what some people refer to as a “white site.” A white site is a very basic HTML document with text and bullet points to provide basic navigational browsing so the client can take advantage of experiencing the navigation.

The second type, and my wireframe of choice, is a graphical representation of the layout and navigation. The only colors that will generally be seen in a graphical wireframe are gray and black. Some people refer to it as the grey^[1] box^[2] method^[3]. A bunch of gray boxes are used to indicate what goes where. As you can see from the varying examples given above, there are different levels of the gray box methodology.

Wireframing Is an Art

Wireframing isn’t as easy as it seems it would be. It really makes you have to think about where things should go and whether or not their placement makes sense. That’s why it’s such a powerful tool to add to your design arsenal.  

A Wireframe Template for You

Here is an Adobe Illustrator wireframe template for use—each page is on separate layers and also includes form widgets.