Posts Tagged ‘wireframes’

Interface as text

June 6, 2017

“How would I explain to a friend, in a conversation or in an email, this thing/topic/product/story I am trying to communicate?”

Fabricio Teixeira: Storyframes before wireframes: starting designs in the text editor




July 22, 2013

Wireframes are page schematics with bare-bones depictions of the components on each page and how they fit together.


  • Narrative flow
  • Visual hierarchy
  • Composition

Page Description Diagram

February 5, 2013

The PDD is a valuable deliverable that can either complement or precede wireframes to negotiate the strategy of the site/pages with clients.

Re-Introducing Page Description Diagrams by Colin Butler, Andrew Wirtanen

Example of a PDD / template


May 9, 2011

I encourage students to use a limited color set (3-5 grays), 2 fonts, default HTML components, and little else. This might result in “dull” wireframes, but bear in mind all wireframes end up in the trash anyway.

Wireframes guidelines

June 5, 2008
  1. Consistency is key, especially when presenting multiple wireframes. It ensures that clients will be impressed by the professionalism of your wireframes. More importantly, colleagues take wireframes quite literally, so consistency makes their design and production work go more smoothly.
  2. Visio and other standard charting tools support background layers, allowing you to reuse navigation bars and page layouts for multiple pages throughout the site. Similarly, Visio’ s stencil feature allows you to maintain a standard library of drawing objects that can be used to describe page elements.
  3. Callouts are an effective way to provide notes about the functionality of page elements. Be sure to leave room for them at the sides and top of your wireframes.
  4. Like any other deliverable, wireframes should be usable and professionally developed. So tie your collection of wireframes together with page numbers, page titles, project titles, and last revision date.
  5. When more than one information architect is creating a project’s wireframes, be sure to establish procedures for developing, sharing, and maintaining common templates and stencils (and consider establishing a wireframe “steward”). Schedule time in your project plan for synchronizing the team’s wireframes to ensure consistent appearance and for confirming that these discrete documents do indeed fit together functionally.

From: Morville, Peter and Rosenfeld, Louis (2002), Information Architecture for the World Wide Web – 2nd edition, Sebastopol: O’Reilly, p. 288-9


June 5, 2008

“Blueprints can help an information architect determine where content should go and how it should be navigated within the context of a site, subsite, or collection of content. Wireframes serve a different role: they depict how an individual page should look from an architectural perspective. Wireframes
stand at the intersection of the site’s information architecture and its visual and information design.”

From: Morville, Peter and Rosenfeld, Louis (2002), Information Architecture for the World Wide Web – 2nd edition, Sebastopol: O’Reilly, p. 283