In Articles, Tips Oct 30, 200916
Using Wireframes to Bring Your Site Together
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
16 Comments
Oct 30, 2009
[...] Direct Link [...]
Oct 30, 2009
Thanks for this article. I do follow wire frames and this article would definitely improve my skills more with wire frames.
Thanks once again!
Oct 30, 2009
I just finished up a few wireframes for clients this week and think OmniGraffle (http://r2t2.us/ogp) and the Simple Wire Frame Stencils (http://r2t2.us/swf) plus Yahoo’s Stencil Kit (http://r2t2.us/ysk) are perfect for quick site wireframing.
Oct 30, 2009
Excellent article, worth reading all the way
The only issue I find in wireframing is the lack of interaction.
Most of the times you have to sit down with the developer and explain exactly how you want certain features to work and still there is a risk the developer understands something different from what you are thinking.
Oct 30, 2009
Nice….you have a lot of different examples of wireframes. I always like to draw these before I create a site. It gives you a great feel on how things are coming together.
Oct 30, 2009
[...] http://designreviver.com/articles/using-wireframes-to-bring-your-site-together/ [...]
Oct 30, 2009
Useful info!
Wireframes are one essential part on the design process since it helps one to think right and proper placements of content elements & proximity as well.
Oct 30, 2009
I usually just dive right into a full comp without wire framing. Painting the full picture with images and colors seems to work better for most clients I work with.
Wire framing seems like an unnecessary extra step, but would like to try it sometime and compare. I think it seems like a good idea for larger websites with lots of content and features.
Oct 30, 2009
It may be a good idea to point to your sources for the images.
Oct 31, 2009
[...] Using Wireframes to Bring Your Site Together | Design Reviver (tags: wireframe webdesign wireframes design development layout usability webdev) [...]
Nov 2, 2009
I think you underestimate the use of wireframes in your article.
You state “Wireframing compliments good web development and offers a visual of where the content will be laid out within the sites design”.
When used right, wireframes are far more than that: it is an excellent resource to discuss and validate the entire website with the client. If you break it down in unique pages and components, you can design the most important pages and components for the whole site.
This way you will be able to disuss it with the client, your graphic designers and your developers. When the client is satisfied you can test it with users (or in an earlier stage).
This serves (amongst others) a few purposes:
a) the client gets a good feeling of what he can expect
b) you tackle a lot of problems which otherwise might be found in the development stage: when still wireframing you can adjust easily
c) stakeholders can give their input in an early stage
d) you know you have tackled graphic or development issues in an early stage
Nov 2, 2009
[...] Ein sehr anschaulicher Artikel auf dem Design Reviver Blog über den Einsatz von Wireframes (mit Beispielen verschiedener WF-Typen): 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. [...]
Nov 3, 2009
Wireframes are really very useful and handy for web designers. It creates a hell lot of understanding about the design and functionality.
One should always make a wireframe … i make wireframes in a Excel sheet as they are very easily understandable .. hand coded wireframes are basic and primary requirement for any type of design.
Nov 5, 2009
Great post. I do alot of my wire frames on graph paper. Our firm designed a web designer ruler which is a 1000 pixels wide, with common ad sized stencils. It def makes wireframing alot easier.
Nov 9, 2009
Hello Ivo Bosma,
Thank you for your clarification! I hope others have had the chance to read your comment as well
Nov 16, 2009
[...] en savoir plus sur les prototypes en fil de fer, lire le billet “Using Wireframes to Bring Your Site Together” de DesignReviver. Pour un schéma très clair sur la place de l’analyse et du visuel [...]
Leave a Comment