Wireframes: integral for UI design

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.

Share this post

Comments on this post

  1. 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!


  2. Pingback: How long does it take to finish a website? | Blue Fountain Media Blog

  3. Cristian Pascu said:

    Hi 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!

Comment on this post


Ready to discuss your project? Work With Us
Blue Fountain Media is recognized as a
Top Digital Agency by
Ranked #1 Interactive
Agency by top interactive agencies example
Ranked Top 10 Digital
Agency by awwwards logo
Ranked Top 10 Agency
Worldwide by IMA logo
Our Locations
New York Headquarters
New York Headquarters
102 Madison Avenue - Second Floor
New York, NY 10016
Chicago Office
Chicago Office
222 Merchandise Mart Plaza, Suite 1212
Chicago, IL 60654
Seattle Office
Seattle Office
14980 NE 31st Way, Suite 120
Redmond, WA 98052
  • 102 Madison Ave, 2nd Floor
  • New York, NY 10016
  • 212.260.1978