Wireframes

Introductory articles

  • Using wireframes
    "Wireframes serve a central function in the development of a web site. [They are] a key tool in communicating the content and layout of each web page for internal and client reviews as well serving as a blueprint for graphic designers to produce designs and for programmers develop functionality."
    (Nam-ho Park)

  • (Wire)frame yourself
    "Wireframing takes its name from the skeletal wire structures that underlie any type of sculpture. Without this foundation, there is no support for the fleshing-out that creates the finished piece. Many site owners and developers are unaware of this powerful, cost-effective preliminary planning strategy for building websites, and those who are often make the expensive mistake of thinking it is the same as storyboarding. Wireframing, however, is storyboarding's parent technique, and a website overlooks the potential of wireframing to its detriment."
    (Grokdotcom)

Discussion articles

  • HTML wireframes and prototypes: all gain and no pain
    "Mention the use of HTML for wireframing or prototyping, and some information architects and interaction designers frantically look for the nearest exit. In some circles, HTML has acquired the reputation of being a time-consuming, difficult undertaking best left to developers. This is very far from the truth."
    (Julie Standord - Boxes and Arrows)

  • Know your place
    "Tired of cutting and pasting the same page module throughout a myriad of different wireframes? Even more frustrated when, late in the design cycle, it turns out that you need another tab or link in that header that you’ve already cut and paste into 22 wireframes? Ever wondered how you can improve your spec documents to generalize elements repeated across pages by using the same artwork that you’ve used in your wireframes? Do you reuse and centralize the storage of varied design artifacts throughout your process?"
    (Nathan Curtis - Boxes and Arrows)

  • Practical applications: Visio or HTML for wireframes
    "Design organisations inevitably run across the debate of Visio versus HTML wireframes. The decision for one over the other is never a clear-cut one since, as with all things IA-related, it depends. This article seeks to sort out the issues by describing the pros and cons of each and identifying situations where one may be more effective than the other."
    (Jeff Gothelf - Boxes and Arrows)

  • Representing content and data in wireframes
    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)

  • Representing data in wireframes (PDF)
    A large poster depicting "techniques for representing sample data and information in a wireframe, the risks associated with each technique, and best practices for applying them".
    (Dan Brown - IA Summit 2005)

  • The devil's in the wireframes
    "Wireframes: at once a singular composition and a collaborative expression, communicating the vision of both an individual and a team. Their visual language must be detailed enough to be widely interpretable, yet particular to different audiences. As a result, wireframes can be stacked with an enormous amount of detail. Are we becoming victims of information pollution in our own wireframes?"
    (Liz Danzico - Boxes and Arrows)

  • The guided wireframe narrative for rich Internet applications
    "Just as IA/UX/ID designers were settling into a comfortable working rhythm, the next step in the never-ending information architect’s challenge arrived: designing for rich internet applications (RIA)."
    (Andres Zapata - Boxes and Arrows)

  • Where the wireframes are
    "There are two main risks associated with wireframes: client expectations and designer innovation.While strategies exist to mitigate these risks, they are not totally avoidable. In this article Dan Brown presents an alternative approach that he has called the 'page description diagram'. The page description diagram is a tool to allow designers and information architects to stay comfortably within their own realms without compromising communication."
    (Dan Brown - Boxes and Arrows)

  • Wireframe annotations in Visio
    "Few information architects tap the full power of Visio. For the IA, Visio is a means to an end—a mechanism for capturing some ideas on paper before they are transformed into graphics, HTML, and code. Even so, the information architecture community can take advantage of some of Visio’s advanced features to make developing documentation more efficient. This article introduces several techniques in the context of wireframe annotations. At the conclusion, you will have learned to create an annotation widget, and you will also have learned several facets of Visio you may not have been aware of."
    (Dan Brown - Boxes and Arrows)

  • Writing smart annotations
    "One of the most tedious, yet necessary, tasks of an information architect or interaction designer is annotating wireframes. Annotations are brief notes, typically on the side or bottom of a wireframe, that attempt to describe each item on the wireframe. They have a difficult role: to speak for the wireframe's designer when she isn't there. In theory, when developers or clients want to know just why that link was placed in that spot, they can read the note on the document and understand not just what the thing does, but also why."
    (Dan Saffer - Boxes and Arrows)

Templates

  • IA tools
    Wireframe templates and other tools for information architects.
    (Information Architecture Institute)

  • Visio, the interaction designer's nail gun (2nd edition)
    "This is a second edition of the article on using Visio for rapid prototyping for the web. The new edition includes a new and improved version of the GUUUI Prototyping Tool for Visio 2003."
    (Henrik Olsen)

Resource collections

  • 35 excellent wireframing resources
    "Wireframing is one of the most valuable parts of any web design project. It can save a designer tons of time by hashing out the details of a site’s architecture, functionality, and content prior to actually starting a visual design. But if done inefficiently, it can end up costing more time and can even create bigger headaches for both the client and the designer. Below are more than 35 resources for creating better wireframes, including tutorials on different methods and a variety of tools available."
    (Cameron Chapman - Smashing Magazine)

  • Wireframe resources
    A collection of comments, examples and links to resources related to wireframing.
    (IAWiki)