February 19, 2014

Wireframes

What are Wireframes for websites?

Website wireframes, also known as page schematics or screen blueprints, are the visual guide that represents the skeletal framework of a website. Wireframes are created for the purpose of arranging elements to best accomplish a particular purpose. The purpose is usually being informed by a business objective and a creative idea. The wireframe depicts the page layout or arrangement of the website’s content, including interface elements and navigational systems, and how they work together.

Uses of Wireframes

Aside from websites, wireframes are utilized for the prototyping of mobile sites, computer applications, or other screen-based products that involve human-computer interaction.

Wireframes may be utilized by different disciplines.

Developers use wireframes to get a more tangible grasp of the site’s functionality, while designers use them to push the user interface (UI) process.
User-experience designers and information architects use wireframes to show navigation paths between pages.
Business Analysts use wireframe to visually support the business rules and interaction requirements for a screen.
Business stakeholders review wireframes to ensure that requirements and objectives are met through the design.
Other professionals who create wireframes include; interaction designers, graphic designers, programmers, and product managers.

Wireframes may have multiple level of detail and can be broken up into two categories in terms of fidelity, or how closely they resemble the end product.

Low-fidelity-wireframes resemble a rough sketch or a quick mock-up, have less detail and are quick to produce. These wireframes help a project team collaborate more effectively since they are more abstract, using rectangles and labeling to represent content. Dummy content, Latin filler text (lorem ipsum), sample or symbolic content are used to represent data when real content is not available.
High-fidelity-wireframes are often used for documenting because they incorporate a level of detail that more closely matches the design of the actual webpage, thus taking longer to create.

Elements of Wireframes

The skeleton plan of a website can be broken down into three components:

Information design-is the presentation—placement and prioritization of information in a way that facilitates understanding.
Navigation design-provides a set of screen elements that allow the user to move page to page through the website.
Interface design-includes selecting and arranging interface elements to enable users to interact with the functionality of the system.

Important! Page layout is where these components come together, while wireframing is what depicts the relationship between these components.

How to choose the right wireframe tool? With hundreds of wireframing tools available, how do to you go about choosing which ones will create the best wireframes for your needs? On the My Crowd blog they have researched and narrowed down the options for you as they see it in 2014.

When it comes to the goal of wireframing and the time/money that is needed, Giff Constable the CEO of Neo clarifies some ideas in his article, Lean Wireframing. “A wireframe is meant to communicate and test. You want to do the least amount of work required to fulfill those functions. Anything more is a waste of time and resources. When paper testing, let the type of customer dictate your level of fidelity. You can show a techie-early-adopter a fairly crude wireframe and they will get it. However, if your target is a fashionista, you need to have more polish, otherwise the lack of visuals will get in the way of an honest reaction about the core value proposition you are trying to test.” Constable has three great examples of developing wireframes for different companies with some parts done in pencil, some in Balsamiq, and some in Photoshop.

Resource List for Wireframing for Startups