What is a Wireframe?

A wireframe is a mock-up that doesn’t involve any content or images. It uses only simple shapes or guides in order to let you visualize the overall layout and direction of the page. By simplifying the design down to basic shapes you are not distracted by different components of the page and can create a balanced, visually pleasing layout. This is an Example of a wireframe design:

How to Use a Wireframe to Your Advantage

The times when it becomes the most important for me to use a wireframe is when I am overloaded with a lot of different components that need to be worked into the design. As the designer, it is your responsibility to take the overload of information and organize it so it looks visually pleasing, makes sense to the user, and highlights the most important parts of the site. Making all of these things work together can be complicated and it easy to forget components if you just dive into designing the site. To start I usually make a list of all of the things that MUST be designed into the site. For example, your list may be something like: Large Logo, Phone number/call to action, HTML5 Banner, Contact form, Sidebar, Video, Social Icons, Footer. This is just a very simple example, with some projects you may have twice as many components. In this case I like to organize all of the pieces into where on the design they go. For example, Logo/Phone #/Social icons may fall under the larger category of “header.”

To make it even simpler for myself, sometimes I will create my wireframe using the Guides in Photoshop. This allows me to create a perfectly lined up and proportional design and as I start to add in details I wont have to delete anything, they can stay there throughout the entire design process.

The Cons of Using a Wireframe

While a wireframe is en excellent way to brainstorm the design of a website and a great tool for organizing a large amount of information, it is important not to get to caught up in your wireframe design. When your layout becomes too rigid it makes is hard to adapt to slightly different pages. For example, If you have designed a perfect wireframe for the homepage of a project you are working on, then you find out the Inner pages are all going to be different, it can sometimes be hard to adapt your homepage design to the inners. Another thing to be wary of with an overly rigid wireframe is if for some reason a client changes their mind on a certain portion of their site or wants to add another component to it. If your design can’t handle these kinds of changes you are back at square one and may have to start over.

By: Blueprint