When you get a new client asking for a website what is the first thing you do? Do you immediately head to Photoshop or illustrator and start designing? If so, you are skipping a vital step in the web design process, wireframing. Wire frames are an important step in web design; they are a simple visual representation of the structure of your webpage. Everyone has their own method for wireframing, but normally it consists of blocks and text representing where content will go on. At this phase don’t think about color and design details, just the simplistic layout of the page.
There are different methods such as sophisticated wire frames or hand done sketches on grid paper. There are also a variety of programs out there that will assist you with your wire frames. Personally I prefer Photoshop or Illustrator and the grey box method which basically consists of laying out your website in different grey boxes and areas of text. Keep it simple and just focus on content and hierarchy. It is also a good idea to have your grid system in place during this process. As I said before, there are many different methods, choose one that is most effective in helping you layout your website.
Your wire frame will help to determine the layout and hierarchy of your pages. This phase will let you determine where the most important elements of the page are, such as your navigation and call to action points. These are the points in the site you want to be the easiest to find. By first creating a wire frame you can determine whether these parts of the site are easily accessible while you are still in the first phase. You don’t want to get to deep into a project to find out you need to redesign the entire navigation.
Wire frames can also be of value when communicating with your web programmer. Rather than designing an entire website then saying, “here it is, program it”, it would be beneficial to review the wire frame with your programmer in the beginning. This way you are both on the same page from the start and both know what to expect. If it is not feasible to review your wire frame with the programmer before designing the site, then you should think about providing the wire frame along with site notes at the end.
Whenever possible you should try to set up a time to review the wire frame design with your client. This can help a client visualize the website in its most simple form. Your wire frame will keep the client focused on the structure and layout and not distracted by color and small details that will all be addressed later. This should also give you a chance to learn what the client does or doesn’t like and how the client communicates before you are to deep into the project.
One major benefit of using a wire frame is that it will save you time and revisions. You may think, “I need to start designing right away because there is not a lot of time”, but by working this way you will probably make more mistakes and revisions toward the end of your process. If you take the time to create wire frames, you are laying out the entire site and seeing what does and doesn’t work. In the end you should have far less mistakes and revisions.
Wire frames may seem like a waste of time but they are really a time saver. Creating a wire frame should eliminate problems with your layout early in the design phase rather than later. If you’ve never tried using a wire frame give it a try in your next design and see if it works for you.