One of the more challenging aspects of working on web sites is the process of communicating the “vision” the client has for the site. They usually have a picture of the site in their head, or at least lots of ideas floating around in there, and imparting that vision to the designer can be difficult. One extremely effective tool for this communication is a wireframe.
What is a wireframe?
A wireframe is simply a visual communication tool. It consists of a layout of the site’s various pages with no graphics or content. In other words, what goes where and how big it is. Here is a great example by 31Three Design.
The advantages of using a wireframe
Anytime you can improve communication in any project it’s an advantage. It cuts down on the production time. I don’t need to create a mockup that is a “guess” as to how the site should be laid out and then rework the whole thing when the client moves everything around. The process of creating a wireframe can be very helpful when making decisions about the content layout, because of it’s visual nature, rather than just being a list of sections of content. You can see how everything is going to fit together.
How to create a wireframe
To create a wireframe, you can use anything that will allow you to draw boxes and add text. Here are some options:
- MS Word or Excel.
- Google docs- great when you’re collaborating on a site design.
- Photoshop, Illustrator or any other graphics software.
- WireMaster- a Java based wireframing tool.
- Gliffy – an online diagramming tool that includes wireframes and allows you to share projects with others easily. They have a free basic account that allows most options.
- Of course a pencil, paper and scanner work just great too, as long as you have legible handwriting!
What to include in the wireframe
In a word: everything. Everything you know you want on the site and all ideas about how it might look. Beyond just laying out the blocks of content, you can include notes on color, functionality, example URLs, etc. Be sure to note the size of ads that will be used on the site. I find that a wireframe is a good place for questions as well. With any project, a client may not be sure what the best choice is for certain sections, and there may be questions about plugins or functionality- the “is this possible” kinds of questions that come up so frequently. A wireframe may also contain a site map.
Whether it’s been created by the client or the designer, a good wireframe makes it easy for a designer to move into the mockup stage because all the client’s ideas are in one place and have, hopefully, been agreed upon Because the ideas are represented visually it helps to avoid the communication issues that often arise from describing how you’d like something to look in words. Obviously, it has it’s limitations and I’m not suggesting that it’s the client’s job to decide exactly how the site should look, down to every detail, and then simply describe it to the designer so they can execute it. Rather, it’s a place to centralize everything a client knows they want the site to include and how they envision it being laid out.
Who should create the wireframe?
Either the client or the designer, whichever works best. It really depends on the type of job it is and how clear the client is on exactly how they want the site to look. I’ve had clients who know exactly what they want and where they want it, and there are some who would prefer to have more designer input on layout.
A couple more articles on wireframes for further reading:
Wireframes: Much More Effective Than Interpretive Dance
Creating an Effective Wireframe (video tutorial)
[...] New Web Site? Start With a Wireframe (tags: wireframe design) [...]
Hi Randa,
Very informative and Interesting. I’m in the process of self learning and do a little bit of designing myself. Thanks for sharing.
Cheers,
Eddie Gear
You are right, sometimes it can be very difficult to communicate with someone and get what they see in their head in to your head.
Besides wireframes do ever use mood boards?
Thanks for mentioning Gliffy! Our free accounts include all the features of the Premium Account (basic accounts have public diagrams and image upload size limits). But all the other features are in full effect! Let us know if you have suggestions for new features — we appreciate feedback,
best,
debik at gliffy dot com
Hi Randa thanks for your informations. I will try wireframe…If i will have some mistake i will come back you… take care…
Site Ekle;
Hi Randa,
Actually I have no words to express something here because your creations itself express your devotion to the work. As a inexperienced blogger I just say it is nice …
Very creative approach. I like the wireframe idea. This is some great information!
Great post, very informative. I actually found this post while researching what other sites support the “dofollow” philosophy. I found your site, started reading and found a lot of great content here.
In addition to wire frames, I will often tell my clients to research color pallets to get a head start on color selections.. It never ceases to amaze me how people will think certain colors look great together until they actually see them together. Using wire frames and color pallets can ease the process greatly and make life much easier
I love the idea of designing my own design and etc, however, it is seems a bit complicated, however, I won’t give up. A lot of great content here like Jesse said.
Hi Randa, great approach as I’ve been a bit weary on following thru on building my own site. Will def look into more now however. Thanks!
Great article,
We usually come up with wireframes in collaboration with the client, unless the client has no idea about what they need and relay deeply on our expertise.
Let’s face it. Building your own website, especially when you are a (web) designer, (web) programmer or somehow related to media – is a never ending story. You could always improve stuff and when you are almost there, you begin to hate the look of the site and start all over again
But nice article though. I have to use this technique more often from now on.
Keep on writing.
Daniel
I guess the issue is getting the clients to sign off the wireframes, and make sure they know that there could be charges if they change their minds. But then is it necessarily fair to ask them to sign off a layout without seeing what it looks like in the flesh?
this wireframe technology will be good to make a new site.thanks to sharing this informative post.i will use it for my new site.
Thanks, for very helpful information. I would like to know that for you Dofollow. That means to belong to this movement. Excuse for my not so good English, I hope you have understood that I wished to learn (((
Thanks! I am getting design prices from 2 grafic guys just the next days and will decide which one to take. I am a bit afraid the whole thing will run out of place so i will try to build a roadmap or “wireframe” like you say, because i have certain ideas, but i am no-go when it comes to designing
Randa, thanks for these tips. I really like your blog and I will stumble and digg it
Thanks, nice post and nice works!
Great idea – what an excellent way to get a client to focus on the structure of the page and on communicating with a site visitor. The designer can make the creative decisions after the client has done what they do best – be intuitive about what customers want.
Thanks to sharing this useful information.Wire frame tool is a good tool to make your site good and attractive.surely i will use it in my new site.
I haven’t used mood boards, but they’re a good idea. I should definitely try it.