Articles, Tips

Using Wireframes to Bring Your Site Together

October 30, 2009 • By

Wireframes are the blue prints that define and allocate a Web sites content and behavior. They are not bound by colors, fonts, and anything that may surface on the site as part of any content. Wireframing compliments good web development and offers a visual of where the content will be laid out within the sites design. A simple wireframe displays the location of a header, main content, footer, sidebars, ad placement, and navigation.

Coming to Terms with Wireframes

Wireframes are usually created using a variety of software applications geared towards design. Most developers find good use of Photoshop and Visio stencils because they allow you to save layers and libraries of commonly used shapes and elements. Once you’re able to develop your wireframe prototype, this will allow you to interact with your client in a variety of ways such as getting an up-front view of their sites design or redesign. This also means that the developer has a clear understanding of what technologies (i.e. JQuery, Ajax, etc..) need to be used for specific elements on the site.


A large portion of these common elements are absolute needs, and if not included then this can cause your visitors to experience, leave, and express a great deal of frustration towards your site. No one wants to visit a site that offers an unclear purpose, seems way to crowded, and neglects the need for vital elements such as navigation to be labeled and easy to find.

Vital Steps to Effective Wireframing


One of the biggest mistakes you can make as a designer on a development project is failing to plan. When you wireframe this is one of the very few vital steps you need to take v.s. the other 100 or so. This is where the conceptualization of an idea starts to take shape and form to allow interaction between the sites design and back end development. Below you will find a few tips that will enable you to make not only effective but better wireframes.

Functionality Contra Superficial

Many times the way you design your wireframe depends on the tools readily available. However, it should always be more about function rather than form at some point. Once you focus on function, form will start to take place. In other words, this means that you not need to create the best looking wireframe, just one that has promising function and form. A good wireframe would include the most important of elements such as boxes, buttons, dropdowns and more.

Spending Too Much Time on Wireframes

Your wireframe has nothing to do with design. Therefore try to avoid spending large amounts of time on making your wireframe “pretty”. If you add too much design then you will end up shifting your client’s focus onto un-important aspects.Wireframe is part of the development process, just remember that design should be left to designers.

Organizing Your Wireframe

As obvious as it is, sometimes it’s easy to forget how important it is to have a well organized wireframe. You can start organizing by splitting the sections that need to be separated such as news, products and user account/registration. Once you’re able to break up your wireframe correctly, then this will bring you one step closer to a more attractive and usable design.

Choosing the Right Tools

For most designers, the pen and paper is utilized as the canvas unto which creativity is transferred on. It is much easier and faster than using a computer and lets you get thoughts and ideas down as the concept becomes much more then that. As successful designers it’s important that you use tools that you’re most comfortable with. This would increase the chances of raising the quality of work. A few tools used besides Adobe Photoshop and Microsoft Visio would be PM PowerPoint, and Designers Adobe Fireworks.

Color a Plus or Negative?


There are a few things one should avoid when designing a wireframe, one of those things would be to use too much color in your design. Our human eyes are captivated by components that posses any sort of color. We naturally begin to analyze the color scheme behind most of the things we see on a daily basis. Simply put, a wireframe with an exaggerated amount of color will more than likely distract you (or the client) from chief elements.

Although, greyscale is the standard for wireframing, it’s not always a horrid idea to use a VERY light touch of darker colors (black, navy blue, etc..) to separate your sections. However, if you utilize any form of color, it’s possible that your client could have a mal-reaction, i.e. questioning the actual colors of the site. This could easily become a set-back, or it can all together end the clients interest in using you for their sites design. Most designers limit the use of colors to links or elements that may not be included on every page. If you feel the “need” to use color, this wouldn’t be a bad idea.

Clean Examples of Wireframes








(Visited 790 times, 1 visits today)