All posts about
Wireframes

When to prototype, when to wireframe: How much fidelity can you afford?

Added on 25 April 2014 Peter Bogaards

All kinds of design documents provide you with a view of the future.

“The distinction between wireframe and prototype is almost arbitrary—both are mockups of the proposed application that differ in their fidelity to the final application. The lowest fidelity mockup has hand-drawn sketches which are quick, easy to do, and cheap. A set of black and white static layouts linked via hot zones provides a medium level of fidelity.”

(Garett Dworman ~ Usability Geek)

Re-Introducing page description diagrams

Added on 10 January 2013 Peter Bogaards
Content models, schemas and DTDs. Good old skool abstracting stuff. But… what’s a page anyway?

“Recently, we discovered the page description diagram, a method for documenting components without specifying layout. At first, it seemed limited, even simplistic, relative to our needs. But with some consideration, we began to understand the value. We started looking at whether or not PDDs could help us improve our process.”

(Colin Butler a.k.a. @cbutlerUX and Andrew Wirtanen a.k.a. @awirtanen ~ UX Magazine)

Ditch Traditional Wireframes

Added on 25 October 2012 Peter Bogaards
Some still think they have value.

“Wireframes have played an increasingly leading role in the modern Web development process. They provide a simple way of validating user interface and layout and are cheaper and faster to produce than a final visual comp. However, most of the methods and techniques used to create them are far from being efficient, contradicting the principles and values that made wireframing useful in first place. While this article is not about getting rid of the wireframing process itself, now is a good time for questioning and improving some of the materials and deliverables that have become de facto standards in the UX field. To make this point clear, let’s do a quick review of the types of wireframes commonly used.”

(Sergio Nouvel a.k.a. @shesho ~ UX magazine)

Time to Dump Wireframes

Added on 6 September 2012 Peter Bogaards
Photoshops and wireframes are pictures of apps in action. Polaroids of feature films scenes.

“Wireframes just aren’t up to the job of showing subtle interaction details—the things that make the difference between an application that is a delight to use and one that frustrates and annoys. And even if you’re using a more sophisticated prototyping tool, you’re still not doing yourself any favors, because these tools don’t allow your designs to adapt to the multitude of different screen sizes that are out there.”

(Martin Polley a.k.a. @martinpolley ~ capcloud)

Beyond Wireframing: The Real-Life UX Design Process

Added on 30 August 2012 Peter Bogaards
Following the UCD process in any form is no guarantee for success. No process is.

“We all know basic tenets of user-centered design. We recognize different research methods, the prototyping stage, as well as the process of documenting techniques in our rich methodological environment. The question you probably often ask yourself, though, is how it all works in practice?”

(Marcin Treder ~ Smashing Magazine)

From Wireframes to Code (1/2)

Added on 20 December 2010 Peter Bogaards
“Within many companies, the use of wireframes in user experience design can be a contentious issue. People typically think of wireframes simply as artifacts designers create when generating design concepts, then later discard. Why not create a design artifact that is not disposable, but instead, one your team can convert to actual production code? Is this Holy Grail of the design process a good idea? Is it even possible? Or does the answer depend on the project, the team, and its agility? This first part in a two-part series takes an in-depth look at the process of converting wireframes to code.” (Bill Schmidt ~ UXmatters)

Wireframes are dead, long live rapid prototyping

Added on 22 November 2010 Peter Bogaards
“Wireframes, your time is up. You’ve served your purpose. You’ve brought order where there was once chaos and provided gainful employment for thousands of UX designers, but I’m afraid now it’s time for you to go to the big recycling bin in the sky. You’re just no longer cut out for the cut and thrust of UX design and have been replaced by that young upstart called rapid prototyping. In this article I argue why you too should ditch wireframes and embrace rapid prototyping.” (Neil Turner ~ UX for the masses)

Preso: Wireframes for the Wicked

Added on 19 January 2010 Peter Bogaards
“Wireframes beyond the basics, not for the weak at heart. In this panel, three experienced designers will share their tried and true tips for making wireframes really work. We’ll talk about how to sketch a wireframe on the fly to demonstrate an idea and how to create a standalone wireframe deliverable; when to show a concept and when to describe nitty-gritty detail; how to make a narrative wireframe and how to make a specification wireframe. And best of all, we’ll show you plenty of examples.” (Michael Angeles, Nick Finck and Donna Spencer – March 6, 2009)

Sketchy Wireframes: When you can’t (or shouldn’t) draw a straight line

Added on 7 December 2009 Peter Bogaards
“When it comes to user interface documentation, wireframes have long been the tool of choice. However, using traditional diagramming tools like Visio, OmniGraffle, and InDesign, most wireframes today look the same as their ancestors did from a decade ago – assembled with rigid, computer-drawn boxes, lines and text. While these artifacts have served us well, they can also be slow to produce, burdened with unnecessary detail and give a false impression of ‘completion’. To compensate for the drawbacks of traditional wireframes, many practitioners put aside the computer in favor of simple pencil sketches or whiteboard drawings. This speeds up the ideation process, but doesn’t always produce presentable or maintainable documentation.” (Aaron Travis – Boxes and Arrows)

The Life Cycle of a Wireframe

Added on 3 June 2009 Peter Bogaards
“For those who are looking for my slides from the Puget Sound SIGCHI lecture and for those who missed it but are curious, here is my presentation. It focuses specifically on my personal process for creating wireframes. There are 4 parts to my process, each has a series of deliverables that feed into it and principals I try to keep in mind, the outcome is either a single or a series of IA deliverables. My overall strategy for IA is three step process; understanding the problem (note: not merely identifying the problem but really understanding it), find a solution (there may be more than one solution, but there is often only one right solution), and present the solution (a large part of your job as a IA is presenting your work so the client can understand the results). Hope you enjoy the slides, these are admittedly pretty rough. I plan to refine and show better pairing between the principals and the specific outcome of applying them to the wireframes in the future.” – (Nick Finck)

Wireframes Magazine

Added on 13 January 2009 Peter Bogaards
“Oh come on don’t be shy. Do you have something to show off while documenting rich interaction, dynamic content, user flows, and web 2.0 wireframes? Please send me a sample and I will put it up. Also tell me who to credit and if you would like an optional link back.” (Jakub Linowski)

Wireframeworks Manifesto

Added on 24 November 2008 Peter Bogaards
“Over the last ten years, the Internet has gone from being the product of technology to the media channel of choice for much of the general public. Designers and developers have forged together innovative, entertaining and essential landmarks that can be accessed by computer, mobile and TV. As the importance of access, effectiveness and ergonomics of the web has become self evident, the role of the user experience professional has become the missing link between technology and people. We aim to make the web more usable, accessible, findable and practical.” (Hammad Khan – Wireframeworks)

Real Wireframes Get Real Results

Added on 20 September 2006 Peter Bogaards
“Wireframes are in fact the first design iteration, and this overlap of visual design can be uncomfortable for teams. However, denial is not the way to fix this issue. Good collaborative relationships should make this overlap an opportunity to reduce work, not fight over ownership. Concern that wireframe might be mistaken for a visual design, or worse, be criticized for lacking design, may be holding the entire project back. It is much easier to communicate within the project team than the outside audience. Consider ways to make the transition as smooth as possible, for example having the wireframe be designed to import into the designer tool without retyping all the text.” (Stephen Turbek – Boxes and Arrows)

Graffletopia

Added on 18 July 2006 Peter Bogaards
“As a web designer, I’ve been using OmniGraffle for years. It’s fantastic for designing interfaces — miles better than Adobe Illustrator for most tasks. Stencils are a big part of why Graffle is great. So, hopefully, this website will make it easier to find cool stencils. Let the sharing begin!” (About Graffletopia)

Representing Content and Data in Wireframes

Added on 17 August 2004 Peter Bogaards
“Sample data can make or break a wireframe, whose purpose is typically to illustrate architecture and interaction. Poorly selected sample data can end up clouding the wireframe or distracting stakeholders from its purpose. By codifying the types of sample content they employ in their deliverables, information architects can create a coherent narrative to illustrate a website’s functionality.” (Dan Brown – Boxes and Arrows)