DAY Vision Marketing
Day Vision Marketing Logo
DVM livecaht

client login   |

DAY Vision Marketing Free Demo  |   866-578-2030 866-578-2030
About DAY Vision DAY Vision Services DAY Vision Portfolio Day Vision Blogs Contact Day Vision Marketing

Marketing Chatter
Online Marketing
January 2011
February 2011
March 2011
April 2011
May 2011
June 2011
July 2011
August 2011
September 2011
October 2011
November 2011
December 2011
January 2012
February 2012
March 2012
April 2012
May 2012
June 2012
July 2012
August 2012
September 2012
October 2012
November 2012
December 2012
January 2013
February 2013
March 2013
April 2013
May 2013
June 2013
July 2013
August 2013
September 2013
October 2013
November 2013
December 2013
January 2014
February 2014
March 2014
April 2014
May 2014
June 2014
July 2014
August 2014
September 2014
October 2014
November 2014
December 2014
Marketing Chatter
Wireframes & Web Design
Seth Prelovsky | April 1st, 2011 | 2 comments

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.

Leave a Comment





DAY Vision Team May 23rd, 2011 01:25 PM
Thanks for your comments. We're glad you enjoyed the article. To answer your question everything we do is custom designed and built under our Content Management System.

internet television May 22nd, 2011 12:15 PM
Hi there clever points.. now why didn't i consider those? Off subject barely, is that this page sample merely from an abnormal installation or else do you use a custom-made template. I exploit a webpage i’m in search of to improve and well the visuals is probably going one of the key things to finish on my list.


© 1999-2015 DAY Vision Marketing, Inc. All Rights Reserved

Powered by DAY Vision Marketing

Sign up to receive industry tips and news, special offers and product information.