To the front page The Interaction Designer's Coffee Break - Weekly postings and quarterly articles about interaction design




Wireframing tool for Dreamweaver

For those who prefer to design prototypes in HTML, Eric Ott's wireframing extension for Dreamweaver might be useful. Using this tool, you don't have to struggle with tables to design your page layouts, since it relies on layers. You drag-and-drop interface elements from the objects tool bar onto the pages.

According to Eric Ott, the extension adds the best of Visio and Illustrator in Dreamweaver. I would love to do prototypes in HTML, but I still find Visio more effective.


  • Download the Wireframing extension (search for Wireframing)

Henrik Olsen - February 10, 2003

Permanent link Comments (0)

See also: Tools (46) 



Visio or HTML for Wireframes

Jeff Gothelf on the pros and cons of using HTML versus Visio for prototyping:

"Design organizations 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."


Henrik Olsen - January 28, 2003

Permanent link Comments (0)

See also: Tools (46) 



DENIM, a Sketch-based Web Site Prototyping Tool

Through a study of web site design practice, the Group for User Interface Research at Berkeley University observed that web site designers design sites at different levels of refinement (site map, storyboard, and individual page) and that designers sketch at all levels during the early stages of design. However, existing web design tools do not support these tasks very well.

Informed by these observations, they created DENIM, a tool that helps web site designers in the early stages of design.

DENIM supports sketching input, allows design at different refinement levels, and unifies the levels through zooming.

Supported platforms:
- Windows 95, 98, Me, NT 4.0, 2000, or XP
- Mac OS X 10.1 (10.0 is not supported)
- Solaris, Linux, and other Unix-like operating systems


  • The DENIM Web Site at
  • Try an exported DENIM Web Site Prototype

Pieter-Jan Pruuost - December 06, 2002

Permanent link Comments (2)

See also: Tools (46) 



Greek text

Greek text can be helpful when designing initial design comps and prototypes, where the actual content isn't important. has developed a neat little thing, which can generate a specified number of fake latin paragraphs for you.

Jakob Nielsen has an article about how greeked text can come in handy, when you want to test how easy users can identify the location of different content areas in different layout templates.


  • The fake latin text generator
  • The article Testing Whether Web Page Templates are Helpful

Henrik Olsen - November 27, 2002

Permanent link Comments (1)

See also: Tools (46) 



Information Architecture: Blueprints for the Web

In the introduction, Christina Wodtke claims that her book on IA isn't for people doing IA for a living "most of it will probably be old hat." It might be true, that her book won't make a revolution for the IA field, but it is very enlightening to read about Wodtke's practical use of the techniques and principles of IA. And there's no armchair theory here. Everything is backed up by cases, examples, and practical advice on how to make everything work in the real world.

The book concentrates on traditional IA practices, such as:
- User research
- Organising content
- Card sorting
- Personas, scenarios and task analysis
- Site and flow diagramming
- Wireframing and storyboarding

At the end of the book, you'll also find some she-devil tricks on how to persuade you boss and co-workers to do things your way. Highly revealing - my girlfriend is never going to fool me again.


  • The book at
  • The book at

Henrik Olsen - November 14, 2002

Permanent link Comments (1)

See also: Books (31)  Card sorting (8)  Site and flow diagramming (3)  Requirement Analysis (10)  Usability testing (24)  Personas (11)  The design process (13) 



Rapid web prototyping

A survey conducted by GUUUI confirmed that there's currently no consensus on what's the best tool to use for web prototyping and that many are not content with the tools they are using. The first article in the Q3 2002 issue of GUUUI presents the results of this survey. The second shows how the diagramming tool Visio can meet a wide range of the interaction designers' requirements.


Henrik Olsen - September 30, 2002

Permanent link Comments (0)

See also: GUUUI articles (5) 



Adventures in Low Fidelity: Designing Search for Egreetings

Cris Farnum's story of a redesign of Egreetings proves the importance of testing early prototypes, by showing how even experienced interaction designers can be wrong and how we have to accept that usability tests can fail concepts, which we believe to be superior.

The article is also an interesting case on testing paper prototypes - or "tabletops", as Farnum calls it. I especially like their use of laminated printouts of screens, which the users can write on with a thin whiteboard marker.


  • The article Adventures in Low Fidelity: Designing Search for Egreetings

Henrik Olsen - August 01, 2002

Permanent link Comments (0)

See also: Cases and Examples (11)  Usability testing (24) 



Survival of the fittest through iterative design

Comparing iterative design with Darwin's concept of natural selection, John S. Rhodes from explains why iterative design and testing are important.

Natural selection happens through the production of many offsprings, each with their unique differences. The ones that are strong and fit in a way that make them succeed in their environment, will survive. That's why many quick and dirty prototypes (offsprings) and continuous testing (selection in a natural environment) are important to a successful development workflow.


  • Evolution, Usability, and Web Design

Henrik Olsen - July 30, 2002

Permanent link Comments (0)

See also: Tips and guidelines (55)  The design process (13)  Usability testing (24) 



Prototyping for Tiny Fingers by Marc Rettig (1994)

This fairly short article about paper prototyping covers how to do them but is more concerned with why they work. The interesting aspect of this technique (fmm) is the notion of 'playing' the computer; I have experienced students creating fairly complex interactions that they could simulate 'by hand'. The article also highlights some of the problems with hi-fi prototyping - the time it takes, the fact the users tend to focus on the gloss and the understandable resistance on the part of developers to change them. This kind of technique is akin to the performance design method (interactionary) which also seems like a brilliant technique to use with students (so there is no hiding from the comments of your peers or tutors). It is a shame though that the scan is of such poor quality!


  • Prototyping for Tiny Fingers - original article (pdf)
  • Overview of Paper Prototyping Technique (from the European Usability Support Centres))
  • INTERACTIONARY - Sports for design training and team building
  • INTERACTIONARY - Sports for design training and team building

Ben Hyde - July 18, 2002

Permanent link Comments (3)



The art of UI prototyping

Scott Berkun's primer on prototyping explains the why, when and how of user interface prototyping for web and software designs.

To Berkun, prototyping is a means of exploring ideas, ensuring quality and save time and resources: "Even the brightest people make mistakes. This is especially true for teams of people. Somehow, as a project moves forward, small assumptions and well-intentioned but poor decisions accumulate, turning hours of work into a lousy user experience. The smart teams eliminate their mistakes before they ship by using a technique called UI prototyping. Combined with usability studies, prototypes keep teams headed in the right direction."


  • The art of UI prototyping

Henrik Olsen - July 04, 2002

Permanent link Comments (0)

<< Back More >>

Browse GUUUI postings

Methods and the design process

Usability testing (24)  Wireframing and prototyping (24)  Cost-justification and ROI (17)  The design process (13)  Personas (11)  Requirement Analysis (10)  Card sorting (8)  Implementing user-centred design (7)  Expert reviews (6)  Web log analysis (6)  Eye-tracking (5)  Site and flow diagramming (3)  Use Cases (3) 

Design elements

Navigation (37)  Web page design (20)  Search (17)  Guidelines and Standards (10)  Links (9)  Text (9)  Forms (8)  Ads (6)  Site design (6)  Shopping Charts (5)  Error handling (5)  Sections (3)  Home pages (2)  Design patterns (2)  E-mails (1)  Personalization (1)  Sitemaps (1)  Print-freindly (1) 

General aspects

E-commerce (19)  Accessibility (10)  Information architecture (10)  Persuasive design (9)  Visual design (10)  Search engines (7)  Credibility, Trust and Privacy (5)  Web applications (3)  Intranets (1) 


Flash (5)  URLs (3)  Download time (2)  Javascript (3)  Web standards (2)  Browsers (1) 


Cartoons (8)  Funny tools and games (9)  Bad designs (7)  Fun with Jakob Nielsen (6)  Designs with humor (3)  Fun music and videos (3)  Fun posters (2)  Funny 404 pages (2)  Misc humor (2) 

Ressource types

Research (79)  Tips and guidelines (55)  Tools (46)  Books (31)  Cases and Examples (11)  Interviews (9)  Primers (7)  GUUUI articles (5)  Posters (5)  Online books (4)  Glossaries (2)  People and organisations (2) 

Information sources

Blogs (10)  Websites (8)  Discussion lists (4)  News (3)  Newsletters (3)  Online magazines (2)  Wikis (1)