Topic: Wireframes

Developing Good Wireframes Ahead of Visual Design

Vena Chitturi, Thursday, August 20, 2009 @ 1:39 pm

In the design process, the wireframes focus on the structure/layout of elements on the screen, and the interaction that the screens will provide. The visual design focuses on aspects of design such as colors, graphics, branding and mood.

Design encompasses both of these, and both are equally important. But by first addressing the software's information design & interaction needs, wireframes help you make sure the user experience makes sense, including that the workflows are natural and intuitive for users, and that the interactions are easy and clear. Without these, a site may not be very usable. Developing good skeletal wireframes before fleshing out the visual design is important for several reasons.

Focuses the Conversation
Visual designs tend to elicit more of an emotional response than wireframes. Hence, putting a fleshed out visual design in front of a client can divert attention from the structure and interaction of the page, and tilt the conversation more towards the color and graphic choices. Skeletal wireframes help you and your client focus the conversation on the business goals and the needs of the user. Continue reading »

• Digg
• Reddit
• del.icio.us

Comments (0)

Software Development

Exactly What are Wireframes?

Alice Toth, Thursday, August 13, 2009 @ 11:12 am

Wireframes are the bare-bones schematic of the presentation layer for an application or web site. They are the visual interpretation of the user and business needs for any given feature. At a basic level, they show the page layout and placement of various elements on the page. At a more detailed level, they identify user interactions and the expected behavior.

Why use them?

Wireframes are a great communication tool for all members of a project team. Instead of an abstract list of requirements or a verbal description of a concept, the visual nature of a wireframe allows everyone to see exactly what it is they’re discussing. They are usually black and white (sometimes with shades of gray) schematics because we want to get feedback on the page structure and behavior, not the visual design. However, wireframes created for mature applications can readily incorporate existing visual design since that language is already defined and shouldn’t divert focus from the reason we’re looking at wireframes.

Annotated Wireframe

Although a picture is worth a thousand words, adding annotations to a wireframe lets the viewer immediately know the expected user behavior of various elements on the page. While a more detailed explanation of the behavior is generally contained in the design specs, adding a shorter version here is extremely helpful.

Here's an example of what an annotated wireframe can look like:

Who uses them?

All team members. Because they are a visual artifact of what is proposed to be built, they are an easy and cost-effective way to get the stakeholders to sign-off on how their business requirements will be translated to software, before any code is written. They also give development a heads up on what the page will look like and how it’s expected to behave; which means they also let QA know what to expect once the feature is ready for testing.

While I sometimes have to educate clients new to software development on the benefits of wireframes, once they see them within the context of a project, they're sold on the benefits and understand their usefulness.

Related Services: User Experience Design, Custom Software Development

• Digg
• Reddit
• del.icio.us

Comments (2)

Software Development

Wireframes in Omnigraffle 5

Sasha Dzeletovic, Thursday, April 2, 2009 @ 12:24 pm

Before anything else is said, I am truly convinced that any creative work should start with a sheet of paper and a pencil. By creative, I mean any work where you have to come up with something, well, new. When creating wireframes for an enterprise piece of software that idea is restricted to initial brainstorming sessions and pretty much nothing else since you have to move to a computer for the sake of efficiency. And there is so much more work to be done. And revisited. And refined. And shared. And packaged for the final deliverable. When you add Agile process to the equation (which I think is a win right there) you will revisit your wireframes a lot of times.

Just to paint an example, let's say we have about 20 wireframe screens. And let's say that in the course of creating requirements, somewhere towards the middle of the road we decide to change some element in our application header that is repeated over the 20 pages. Ouch! This can be a cumbersome task if you are not using the right software because you would need to make the same change 20 times. Now imagine you have to do it daily because refining and testing the idea is the purpose of creating wireframes in the first place. Did I mention that there might be a lot of wireframes?
Continue reading »

• Digg
• Reddit
• del.icio.us

Comments (2)

Software Development

Wireframes: Much More Effective than Interpretive Dance

Alice Toth, Wednesday, May 23, 2007 @ 11:54 am

Wireframes are a valuable tool in designing a site or application. They enable us to communicate both the layout and page content to fellow team members and business stakeholders and get their signoff. They’re essential because they force viewers to focus on the content, not the visual design, which means preliminary design meetings won’t get sidetracked into discussions on colors and fonts.

Basically, wireframes are a sketch of the business and user requirements. Since they are a drawing, they allow us to demonstrate how these requirements, nicely bulleted in a list format, are translated to a visual medium. In addition to showing that the requirements are met, wireframes can generate discussions uncovering what may have been overlooked. As the project progresses, we use them to begin explorations on how the user will interact with the screens and which data is affected.

Continue reading »

• Digg
• Reddit
• del.icio.us

Comments (3)

User Experience Design

Great Article on Prototyping Complex Interactions

Dietrich Kappe, Wednesday, May 17, 2006 @ 10:49 pm

If you haven't already read it, you really should. Andres Zapata has published an excellent article over at boxesandarrows entitled The Guided Wireframe Narrative for Rich Internet Applications. A brief taste:

The key to using a low-context medium (wireframes) to illustrate
high-context information (rich internet applications) is to narrate the
information in layers or in dimensions. In short, because we couldn’t
build a prototype (due to time and budget constraints), we built a
story. But because it wasn’t a linear application, multiple stories
needed to be constructed. We call these stories the Guided Wireframe Narrative.

Our story or narrative focused on four main dimensions:

• Hierarchy
• Screen real estate
• Design conventions
• Interaction patterns

We call these multiple stories microflows.  Lots of food for thought here. Go and read it now.

• Digg
• Reddit
• del.icio.us

Comments (0)

User Experience Design

Visualizing Rich Interactions in Paper Prototypes

Elyse Sanchez, Monday, March 27, 2006 @ 11:42 am

Wireframes and paper prototypes work well in documenting the standard page metaphor of the Web, as the functionality of each screen can be captured in a single wireframe. Rich interactions, though, pose the challenge of expressing a series of states that may occur on a single screen.

As technologies like AJAX gain greater popularity, designers face the challenge of exploring and developing new and innovative visual vocabularies and flexible tools for capturing the microflows of rich interactivity.

At Pathfinder, we are drawing inspiration from the discipline of storyboarding, which is, of course, closely related to wireframing. Storyboards express ideas in a sequence of "key frames," showing only the minimum number of frames to convey the idea. The richness of storyboards comes not from just the individual pictures, but from the change from picture to picture. It's possible, then, to embed a miniature storyboard into a wireframe, thus illustrating the quality of the rich interaction.

A second technique is to create a visual taskflow representation to the system. In this format, all screens are miniaturized to capture both the linear and non-linear flows within individual screens and from screen to screen.

Our fellow practitioners are tackling this challenge as well. Bill Scott considers several strategies for creating interactive wireframes, including the PowerPoint clickthroughs, the development of quick and easy RIA toolkits, and standardized notations to indicate interaction effects in traditional, static wireframes. His personal technique involves the creation of storyboards in Visio, which he then animates. The strategy is detailed in his blog entry, "Interactive Wireframes: Documenting RIAs."

• Digg
• Reddit
• del.icio.us

Comments (0)

User Experience Design