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  




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: Prototyping and wireframing (119) 



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: Prototyping and wireframing (119) 



Microsoft builds prototypes in PowerPoint

According to Long Zheng, PowerPoint is becoming a popular prototyping tool inside Microsoft. Parts of Windows, Windows Live, Internet Explorer, Home Server and Expression Blend have been prototyped in PowerPoint.

You can watch a talk by Manuel Clement, a lead at the Microsoft Design team, about prototyping with PowerPoint 2007. You can also download the PowerPoint prototyping toolkit and try it out yourself.


  • Microsoft Design prototyping with PowerPoint Open link in new window
  • Talk by Manuel Clement about prototyping with PowerPoint 2007 (video) Open link in new window
  • PowerPoint Prototyping Toolkit for PowerPoint 2007 Open link in new window

Henrik Olsen - March 08, 2008

Permanent link Comments (1)

See also: Prototyping and wireframing (119) 



Magnetic interface widgets for whiteboard prototyping

Not long ago, you could buy a magnetic interface design toolkit. Now, they are back - this time big enough to use on a whiteboard (or your fridge) for collaborative on-the-fly prototyping.

The magnetic interface widgets have a special coated surface so that you can write on them with a non-permanent maker and easily wipe them off again. They come in a nice laptop sized case with around 100 magnets.


  • GuiMags Open link in new window

Henrik Olsen - February 09, 2008

Permanent link Comments (8)

See also: Funny tools and games (12)  Prototyping and wireframing (119) 



Recording paper prototype tests with Morea

This how-to article shows how to exploit the full functionality of the screen recording tool Morae when carrying out paper prototype usability tests.


  • Paper Prototyping with Morae Open link in new window

Henrik Olsen - January 20, 2008

Permanent link Comments (0)

See also: Usability testing (68) 



Web-based site map tool

WriteMaps is a free web-based tool for creating site maps. It can come in handy if you need to share sites structures with clients and colleagues.


  • WriteMaps Open link in new window

Henrik Olsen - December 02, 2007 - via pathfinder

Permanent link Comments (0)

See also: Site and flow diagramming (6) 



Watch users navigate websites with RobotReplay

RobotReplay an online service that records and plays back visitors' sessions on websites. Sit back and watch every mouse movement, click, keystroke, scroll, etc.

RobotReplay a direct competitor to ClickTale - a similar service previously mentioned here at GUUUI.

RobotReplay promises to always have a free version of their service available.


Henrik Olsen - November 09, 2007

Permanent link Comments (0)

See also: Web traffic analysis (12)  Usability testing (68) 



Tutorial on how to create dynamic PDF prototypes

Contrary to what many believe, we can do more with PDF prototypes than create links and forms.

In this article, Kyle Pero Soucy explains how we can use PDFs to:

- Add dynamic elements such as rollovers and drop-down menus
- Mimic Ajax-like functionality by updating only parts of the PDF instead of an entire page
- Embed audio and video files
- Validate form data
- Perform calculations and respond to user actions

The prototypes can be created with our favourite prototyping tool. Once converted to PDF, we can add interactivity, audio and video to the prototype using Adobe Acrobat Professional.


  • PDF Prototypes: Mistakenly Disregarded and Underutilized Open link in new window

Henrik Olsen - August 08, 2007

Permanent link Comments (0)

See also: Prototyping and wireframing (119) 



Tutorial on how to create clickable prototypes with PowerPoint

One good reason for building prototypes with PowerPoint is that it's probably already sitting on your hard drive. Another is that anyone you want to share it with probably also has it.

In this tutorial, Maureen Kelly shows how to build working prototypes with PowerPoint by using its interactive features for creating hyperlinks, buttons, and dynamic mouseover effects.


  • Interactive Prototypes with PowerPoint Open link in new window

Henrik Olsen - August 08, 2007

Permanent link Comments (0)

See also: Prototyping and wireframing (119) 



OmniGraffle wireframe palette

Michael Angeles has released a revision to his wireframe palette for OmniGraffle (a Machintosh diagramming tool).


  • Michael Angeles' OmniGraffle wireframe palette Open link in new window

Henrik Olsen - June 26, 2007 - via Digital Web

Permanent link Comments (0)

See also: Prototyping and wireframing (119) 


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