Wireframes are an essential stage in building a website.The wireframe is a large part of the blueprint for the site whether it is hand-drawn or in digital format. It should give a clear understanding of what elements are on each page, where they should be displayed and why–to achieve the most cohesive balance and overall structure. As we always say, building a custom website is like building a custom house–you wouldn’t want to pick out your dining room wallpaper before you even decide if there will be a dining room!
Creating framework for a site always saves time and money.Why spend all the time to design a layout, when the message of that layout hasn’t been defined?Spending a few days to create a wireframe and test it as a prototype guarantees that a redesigned site will not create more problems versus fixing the ones already present.It will also allow time for the purposes and goals of a new site to be worked out and should create user expectations and helps to develop an awareness of and familiarity with the site. In other words:
Great wireframes = great UI design.
Instead of getting caught up on colors and pictures, which can cause emotional responses that aren’t useful for deciding the overall mood of the site, the wireframe allows for the navigational structure and layout (which should be intuitive) to take focus.
Wireframes force site designers and client to use simple shapes and lines to work out the flow and interaction for the user–a crucial step to ensure the user can easily move throughout the site to be shown what you want them to see and let them get where they need to go. The second a user gets frustrated with the site, they leave.The most common reason being frustration–poor user interface design.
When creating wireframes, the designer should not feel the need to be abstract or different.Most common elements that have been used on sites for years, such as top and side navigation, bread crumb trailing, headers and footers are very useful tools.A user knows and understands how these elements work and they expect them in an easy to use site.The creativity to mix these common elements with some innovative ideas is the key to a great wireframe design and a successful site.
Jonathan,
Very informal post on the needs for wireframing; not only should it be done to cut down on costs in final development, but to ensure a great user experience is provided. It can certainly be difficult to try to verbally walk people though how a site should function without a visual representation of the site structure and page layout. People don’t really know what they want until they see it.
Great post, thank you!
Andrea
July 30th, 2009 at 10:31 am@ProtoShare
[...] -Wire frames to determine the layout for design [...]
August 11th, 2009 at 9:28 amHi there,
There’s a lot of confusion these days between wireframes, mockups and prototypes. Your article made it plain clear what are the natural steps in building a website and which is the role of each artifact in this process.
Thank you!
October 14th, 2009 at 6:39 am