A website is not a car! Wireframing is an essential step in the web design process and it would be a shame if up-and-coming designers did not learn to love it. Granted, a website is not a car, it is still a substantially complex undertaking and leaving out careful planning and structure is the recipe for a lot of wasted time, work and money. Part of the initial battle is making sure everyone understands what a concept is and what it is for.
»Over the last few years, wireframing is a process that has endured a lot of misunderstanding and has been become much more widely known as a software and web design methodology. I’ve begun to notice that the concept is warping and not for the better. This twisting of the terms is making it difficult for newer designers and students to understand the real application of the process.« Borsky
1. Wireframes are NOT designs
Don’t confuse the function by putting visual distractions on your wireframes. Remind them: there is little visual fidelity, wire-frames are about working through functional issues and organizing information.
2. Wireframes are NOT final layouts
It is clear by the difference in many designers that it is nearly impossible to separate the final effective layout from the aesthetic design. But, that is a different stage and it can be stifling and disastrous to try and cling to a wireframe layout.
3. Wireframes are NOT prototypes
There is actually quite a bit of confusion between wireframes and prototypes.
Simply, wireframes are for organizing information and prototypes are for evaluating interaction.
» A Concept is purely a map of function, priority and information «
This is only small primer on how wireframes are an essential, powerful and time saving part of the design process. Many designers have the tendency to dive right into designing look and feel, cool features, and graphics. Take a step back and remember that websites and software are complex (even the simple ones).
Wireframes are one of the most effective methods to work through ideas, their functionalities and usability. Keep in mind, we are taking about usability NOT user experience. A common mistake is to think that Usabilty = UX. Proper planning is not just a formality but the most important step you can take. A good Concept with abstract Wireframes will help to build awesome team communication and facilitate solid, professional and well-planned projects.
The Concept-Development is an effective way of matching every problem with an actionable solution. But by visually exploring and explaining the features it maps out the scope of work and gets everyone on the same page. You will be surprised at all the details that might have been overlooked or simply not considered. More often than not, clients, managers and product developers have an extremely macro approach to the design. They are more interested in the big picture and that is really a problem for designers. Thats why we have Concept-Developers and Wireframes!
Practical Tips:
_ Do a deep dive on each feature
_ List out relative content limitations
(Discuss with the team and write down roughly how long a title will need to be,
how many images will you have, …)
_ Illustrate Navigation
_ Visualize Steps and Exits (use the wireframes to compare to the site map)
June 13th, 2012 at 15:31
[…] concept papers (detailed wireframes and specifications) helps to decrease the risk of error accumulation by testing the idea in a very early stage of the […]