Wireframe = thousand spread sheets

A wireframe is a diagram of the content, arrangement and hierarchy of elements of a web page or set of pages on a website. Wireframes are typically created in grayscale or with minimal color. They are kept free of design elements (no color palettes, no fancy borders or line styles, no shadows or other design treats.) A set of wireframes will demonstrate how users navigate a website and the flow users take to accomplish key tasks such as downloading a product, or creating a new account.

Wireframe vs Spreadsheet

Why wireframes?

  • Focus on Structure. Wireframes focus on website structure without the distraction of how the web page design looks. Because wireframes are created with little to no color, with very simple font choices, and a basic design style, it’s much easier to focus on the contents and arrangement of the page.
  • Visualize Ideas. Wireframes help stakeholders see the reality of their ideas. It’s difficult to imagine an idea without seeing how it looks and acts on screen.
  • Define Project Scope. Wireframes are essential for defining a project’s scope – and are often used as part of the project spec. They bring the web team and the client team in sync on what’s being built.
  • Clarify Hierarchy. Wireframes help the design team and client team focus on the hierarchy of items on a page. Should the “call to action” to sign up for the newsletter be more prominent? Is the balance of photo size to copy size correct?
  • Identify Content Needs. Wireframes identify the content a website will need for completion. They’re a great resource for the content team to use when gathering content. It will help them know what sizes (3 paragraphs) and styles (list format, or subheadings) are needed.
  • Refine Content. Wireframes also make it easy to see what content is missing or extraneous on a web page.
  • Promote Discussion. Wireframes promote discussion of design and functional features. Because they’re sketched out and unfinished, it’s easier for clients to visualize changes, adjustments and improvements without being worried about drawing on top of a beautiful web design.
  • Reduce Problems Early. Wireframes reveal design pitfalls that are hard to imagine before creating the actual layout and structure of a site. For example, initial design concepts might not reveal the challenge of requiring three clicks to get to an important piece of content. However, when paging through a wireframe, excessive clicking will become a much more apparent issue, and can quickly be addressed.
  • Keep Process Enjoyable. Wireframes are also just more fun to work with than a spreadsheet of fields that will go into a database.

Who benefits from the wireframing process?

Everyone involved in creating a web site benefits from wireframes: designers, developers and clients. Designers use them to create and understand patterns and visual hierarchy when they’re creating their web design compositions. Developers use them to inform the specs of what they’re building. Clients use them as a tool to make sure their website goals are addressed. Wireframes are a great way to help everyone understand the project goals and to build a comprehensive project plan.

What should clients look for in wireframes?

  • What content is missing? What content doesn’t need to be on the page?
  • Are the most important features clearly visible and easy to spot on the page? (Tip: On first glance of a page, what is the first thing you see?)
  • Do you know what you can do on specific pages?
  • Do you know where you are on the site? Can you figure out how to get to another page of your choice?
  • Is it clear how to do your key actions (such as contact the company, or download a product manual)?

What should designers look for in wireframes?

  • Do the wireframes capture the appropriate visual hierarchy of each page?
  • What methods are used to identify where a user is on page/site?
  • Is the navigation consistent from page to page?
  • Are common features in appropriate locations (search box, contact button, etc.)?
  • Do the wireframes have consistent visual patterns? (For example: from page to page, are lists of content similar in structure with heading, description and link?)

What should developers look for in wireframes?

  • Should anything be clarified? Can you build the site from these diagrams?
  • Can you suggest anything to make the structure simpler? (For example: Can the same structure of content fields be used for different content types?)
  • Is there enough specificity? Are the number of items in lists or characters in an excerpt identified?

What projects need wireframes?

Wireframes are appropriate for any website bigger than a few pages and with more than one person involved in its creation. Wireframes are especially critical when multiple parties are involved in defining the scope and features of a website (such as a design team, development team and client team). When using a content management system that has custom fields and custom types of content (such as ExpressionEngine or Drupal), wireframes are often a key part of the project requirements process.

Will my team understand wireframes?

Yes! Wireframes are much easier for non-programmers to understand than a sitemap of pages or a spreadsheet of fields that will be in the database.

If you’re worried a non-tech savvy group will have a hard time working with a wireframe, consider showing a smaller number of wireframes first, like only the home page and two or three key interior pages. In addition, when releasing the wireframes, be sure to walk the audience through the wireframes on common user paths to show how people will really be interacting with the site.

++contents  from Susan Snipes,Owner and principal of Q Digital Studio

By max macapagal Posted in Posts

Wireframe Benefits

What Is a Wireframe?

A wireframe is a low-fidelity visual representation of a website’s layout design, sometimes referred to as a skeleton, outline or blueprint. Often, a wireframe represents the basic page layout structure and navigational scheme of the site’s pages, as well as major site components (like web forms and ad units).

Wireframe example 1

A wireframe does not contain finished design elements as such, but does display where design elements will appear on the page. Wireframes are normally produced in grayscale using off-the-shelf wireframing software such as Mockingbird or, in its simplest form, paper and pencil.

Wireframes allow project team members and clients to do such things as:

  • Test and refine navigation
  • See how content lays out on the page
  • Study and rapidly refine the user interface design of web forms and interactive elements
  • Evaluate overall effectiveness of the page layout against usability best practices
  • Determine web development/programming requirements

Here is an example of a wireframe for a home page:

Wireframe example 2

Here is an example of a wireframe for an interior page:

Wireframe example 3

Key benefits of wireframing web designs

It takes a lot more time, effort and expertise to create a web page design than a wireframe. When the first thing clients see is a finished design, they are seeing something that has taken considerable time to produce and will involve (potentially) considerable expense to revise.

The bad news, especially from a cost standpoint, is that design changes are just about inevitable.

Changes like the ones above, when made to full-blown, high-fidelity designs, can run up thousands of dollars of expense (to say nothing of extending the timeline to complete the project). Knowing the impact in time and cost to making design changes, clients and web development team members become almost reluctant to voice concerns for fear of the time and cost involved in addressing design issues.

The point to remember: Wireframing makes it quick and inexpensive to tweak or even overhaul a design at exactly the time when you want to be doing major changes and fine-tuning.

Wireframes Make Site Navigation Designs Better

One of the most important factors in web design is content findability, and an intuitive site navigation design is important in this regard. If users cannot easily get to where they want to go on a site, they’re gone.

As users become increasingly more web-savvy, the negative impact of shoddy navigation increases. Unfortunately, clients, designers and even developers have a difficult time evaluating navigation until they actually have an opportunity to use it.

Wireframes allow people to give the new site a test run: to see how easy or difficult it is to locate key pages; to determine whether dropdown menus clarify or confuse the user; to find out whether breadcrumbs are useful or distracting; to understand whether the overall navigational scheme is intuitive, incomprehensible or somewhere in between.

When site navigational issues come to light after designs are completed, it’s a bit like realizing your ceilings are too low after the house has been built. Changes to navigation can run the gamut, but many of them are almost prohibitively expensive to correct. I think this is one reason why we see so many websites — even large and sophisticated ones that display wonderfully creative content and dazzling design — still manage to deliver an overall inferior user experience.

Wireframes Can Improve Content

Content — whether inserted for SEO purposes or for human readers (great content addresses the needs of both) — can look clunky or elegant.

An example of clunky content is something you see every day: large blocks of undifferentiated text. Nobody is going to read it. Elegant content — content that informs and persuades — makes use of design elements such as readable fonts, properly sized fonts, numbered lists, bullets and well-positioned subheads. In a wireframe, it’s easy to play around with these elements and arrive at a formatting scheme that will maximize readability and persuasiveness.

Wireframes Can Improve User Interface Copy

For the user’s interface, little pieces of copy can be far more important than big ones. Example: should the call to action button say Learn More, More Information or Click Here? How the client and design team answer that question will have an enormous impact on conversions.

And yet, when content and user interface copy issues are addressed while reviewing a finished design, there’s a tendency to live with a problem and to compromise the effectiveness of the copy in an effort to contain cost and keep the project on schedule.

When content issues are dealt with at the wireframing stage, making changes is a piece of cake. Result: a website that blends the best of copy and design and maximizes user experience on every page.

Wireframes Help Clients Help Their Cause

Wireframes are a visual way to evaluate a new website and, as we all know, a picture is worth a thousand words. When clients green light the design phase of a project based on a sitemap and a few static design layouts, they are, to a certain extent, driving blind.

When clients are confronted with a wireframe, their reaction ranges from shock to total satisfaction (usually somewhere in between). There is no wrong response. It is far easier and less costly — and puts far less strain on the relationship — to address issues in this early phase of the project than later on, or worse, to launch a site knowing it has serious deficiencies.

Almost inevitably, wireframes generate a useful punch list of changes that are routine to make early on. In some cases, a wireframe leads a client to rethink their approach on a more strategic level. Comments typically include:

  • I didn’t realize our product line was this confusing
  • We have too many options in our navigation: our key pages are getting lost in the shuffle
  • Our call to action is weak
  • Our Contact form takes too long to fill out
  • We’re talking too much about ourselves and not enough about our customer
  • Our most important product photos are below the fold: nobody’s going to see them

When conversations around topics like those above are at the wireframing stages, they lead to happier and easier resolutions. When these conversations occur after design and development are completed, they frequently do not.

Wireframes Help Web Developers

Programmers benefit from wireframes. If all the web developer has to go on is a sitemap, design templates and a bunch of verbal instructions from the client and project manager, there are going to be a lot of questions and assumptions as the build process moves forward.

Wireframes give web developers a clear path of what has to be done. It clarifies the direction and objectives of the site build and allows for better decision-making as to which web technologies, techniques and processes should be used in order to achieve an excellent result.

Summary

A web development project is a lot like building a house. Both are complicated projects. Both involve teams of specialists working in concert to give concrete form to a client’s vision. If you are going to build a house, you naturally want the best builder you can find. But you also want to equip the builder with the right tools. And you want to make sure the builder has the right process in place to get the job done on time and within budget.

Wireframing is not a cure-all, but is something we’ve found to be a very valuable tool — one we would never dream of giving up.

++Contents from Brad Shorr ,Director of Content Marketing for Straight North

By max macapagal Posted in Posts