To the front pageThe Interaction Designer's Coffee Break - Weekly postings and quarterly articles about interaction design  
  To the front pageSign inTo the frontpageSearch in GUUUI postingsAbout GUUUI  




More magnetic interface widgets

Not long ago, GuiMags brought the magnetic interface widgets for whiteboard prototyping back. Now a competitor, GUIMagnets, has entered the marked with magnets that seem to be a bit cheaper (if you can do without the case that comes with GuiMags).


Henrik Olsen - August 24, 2008

Permanent link Comments (2)

See also: Tools (106) 



Fireworks - from interaction design to visual design

In this article from Adobe Developer Connection, Nick Myers gives a walkthrough of how he and his colleagues at Cooper used Adobe Firework to evolve a design from a bare bones interaction design to a visually refined one.

According to Nick Myers, working in Fireworks throughout the design process has many benefits:

- You use one tool for both interaction design and visual design

- It encourages teams to be more collaborative as work is passed back and forth between the different people involved

- You can work much faster as you don't have to recreate things or check work against each other's files

- It reduces mistakes as you don't manage multiple versions of files


  • Designing interactive products with Fireworks Open link in new window

Henrik Olsen - July 14, 2008

Permanent link Comments (2)

See also: Cases and Examples (28)  Tools (106) 



Firefox wireframing tool

Pencil is a free tool for sketching user interfaces. Since it's a Firefox 3 extension, it runs on virtually all platforms.

The tool has many of the features you would expect from a decent prototyping tool. But unfortunately, it lacks the ability to work with even basic interactivity, such as creating interlinked pages


  • The Pencil Project Open link in new window

Henrik Olsen - July 06, 2008

Permanent link Comments (0)

See also: Tools (106) 



The online prototyping tool ProtoShare

ProtoShare is a new online prototyping tool. With the tool, we can build functional prototypes online that can be shared with teammates and clients.

The feature list is quite amazing: drag-and-drop widgets, automatic navigation, and potent specification and collaboration tools with annotations, discussions, to-do lists and what have we.

The only downside is that the tool is somewhat slow to work with compared with an off-line tool.


  • The online prototyping tool ProtoShare Open link in new window
  • See demo videos Open link in new window

Henrik Olsen - June 05, 2008

Permanent link Comments (1)

See also: Tools (106) 



How to build prototypes using Flash

Alexa Andrzejewski has written a thorough step-by-step tutorial on how to create high-fidelity prototypes using Flash.

According to Alexa, creating a basic click-through prototype in Flash takes the same time and effort as with other popular prototyping tools, while the flexibility and potential for extending the prototype is far greater in Flash.


  • Quick and Easy Flash Prototypes Open link in new window

Henrik Olsen - June 01, 2008

Permanent link Comments (1)

See also: Tools (106) 



OverSite - a prototyping tool

I just stumbled upon this interface prototyping tool called OverSite that works on Windows, Mac and other platforms. I haven't tested it on a real project, but it seems like a quite reasonable tool.

Like other prototyping tools, it allows us to create interfaces with drag-and-drop widgets, link screens together, and export the whole thing to HTML. It even has a build in browser that allows us to test the interaction flow before exporting the project.

A quite interesting feature of Oversite is the ability to create multiple versions of a page. This is a nice way supporting the creative process of exploring different design directions.


  • The prototyping tool Oversite Open link in new window

Henrik Olsen - May 13, 2008

Permanent link Comments (0)

See also: Tools (106) 



Video of paper prototype usability tests

Here's an interesting video showing how a paper prototype usability test helped the usability team at Corel find flaws in a preliminary design of a website creation product.


  • YouTube video of paper prototype usability test Open link in new window

Henrik Olsen - April 16, 2008

Permanent link Comments (2)

See also: Usability testing (68) 



Prototyping with Adobe Fireworks

It seems like Adobe Fireworks is becoming a new favourite prototyping tool of many interaction designers. With the CS3 version, Adobe has added a number of new features that makes it interesting for prototyping purposes:

- You can create pages instead of having to work with a maze of layers
- You can have a master page holding elements shared across pages
- It comes with a library of common user interface widgets that you can drag and drop onto pages
- You can create your own widgets
- You can make elements clickable and link them to other pages
- You can export the whole thing as web pages to create a clickable prototype
- You can work with schematic designs to fully treated graphic designs

Below you'll find a video and three tutorials on how to use Fireworks as a prototyping tool.


  • Video of a web page made with Fireworks Open link in new window
  • Tutorial: Rapid prototyping in Fireworks CS3 Open link in new window
  • Tutorial: Wireframing with Fireworks CS3 Open link in new window
  • Tutorial: Using Fireworks CS3 to design effective, interactive website presentations Open link in new window

Henrik Olsen - March 24, 2008

Permanent link Comments (4)

See also: Tools (106) 



iPhone paper prototype

So you thought that Apple didn't do paper prototypes. Well, you were wrong. Here's a video of the very first iPhone crayon-and-paper prototype.


  • Video of the iPhone paper prototype Open link in new window

Henrik Olsen - March 14, 2008

Permanent link Comments (4)

See also: Fun music and videos (13) 



How the new Office 2007 interface came about

MIX08 has published a talk by Jensen Harris giving a rare behind-the-scenes glimpse into the new interface design of Office 2007. He talks about how Microsoft said farewell to menus and toolbars and hello to the Ribbon.

In his presentations, Jensen shows some of the many concepts prototypes that came before the final design and explains how usability tests of these prototypes led to the Ribbon concept.


  • The Story of the Ribbon Open link in new window

Henrik Olsen - March 11, 2008

Permanent link Comments (3)

See also: Usability testing (68)  Audio and video (48)  Cases and Examples (28)  Talks and presentations (18) 


Browse GUUUI postings

Methods and the design process

Prototyping and wireframing (119)  Usability testing (68)  Cost-justification and ROI (27)  User research (23)  Personas (19)  The design process (24)  Eye-tracking (14)  Card sorting (13)  Web traffic analysis (12)  Expert reviews (11)  Implementing user-centred design (9)  Site and flow diagramming (6)  Envisionments (4)  Use Cases (3) 

Design elements

Navigation (63)  Web page design (40)  Search (27)  Text (24)  Forms (30)  Links (19)  Guidelines and Standards (15)  Site design (14)  Ads (9)  Design patterns (8)  Sections (8)  Shopping Carts (9)  Error handling (7)  Home pages (9)  Help (3)  E-mails (3)  Sitemaps (2)  Personalization (1)  Print-friendly (1)  Landing pages (5) 

General aspects

E-commerce (27)  Persuasive design (21)  Visual design (19)  Information architecture (15)  Accessibility (13)  Search engines (7)  Credibility, Trust and Privacy (6)  Emotional design (10)  Simplicity vs. capability (7)  Web applications (6)  Intranets (3) 


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


Bad designs (20)  Cartoons (14)  Fun music and videos (13)  Funny tools and games (12)  Misc humor (8)  Fun with Jakob Nielsen (9)  Designs with humor (3)  Fun posters (5)  Funny 404 pages (2) 

Resource types

Research (129)  Tips and guidelines (95)  Tools (106)  Books (47)  Audio and video (48)  Interviews (30)  Cases and Examples (28)  Talks and presentations (18)  GUUUI articles (11)  Primers (14)  Online books (5)  Posters (5)  Glossaries (3)  People and organisations (3) 

Information sources

Blogs (12)  Websites (11)  Discussion lists (4)  News (3)  Newsletters (3)  Online magazines (3)  Wikis (1) 

  To the front pageSign inTo the frontpageSearch in GUUUI postingsAbout GUUUI