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  
   
 

BROWSE GUUUI POSTINGS

 

21

Rapidrabb - an online prototyping tool

Rapidrabb is an online prototyping tool that allows for real time collaboration as we know it from Google Docs. As is the standard in other prototyping tools, we can create pages and populate them with drag-and-drop widgets, link it all together, and view the whole thing live.

I haven't tested the tool thoroughly but it seems quite reasonable and fast to work with.

Links:

  • The RapidRabb homepage Open link in new window
  • Demo video of RapidRabb in action Open link in new window

Henrik Olsen - February 23, 2009

Permanent link Comments (2)

See also: Prototyping and wireframing (119) 


 

22

Rich interactions with Visio via VisDynamica

Tomek Seroczynski has developed a very promising extension that makes Visio capable of simulating rich interactions. The tool is currently under development. At the time being, it features:

- Dynamically loading content for simulating things like dropdown menus and tool tips
- Pop-up layers (known as lightbox the web sphere)
- A dynamic tabs widget
- Inclusion of YouTube videos

At Tomek's site, you can see a demo, download a sample Visio document, and the stencil needed to use the tool.

Links:

  • The Visio extention VisDynamica Open link in new window

Henrik Olsen - January 26, 2009

Permanent link Comments (0)

See also: Prototyping and wireframing (119) 


 

23

User Interface stencils for OmniGraffle

At Graffletopia you can find a wealth of user interface stencils for OmniGraffle (an Apple diagramming tool) for free download - among them, a stencil for creating sketchy looking prototypes and wireframes.

Links:

  • User Interface stencils for OmniGraffle Open link in new window
  • A sketchy interface stencil Open link in new window

Henrik Olsen - January 12, 2009

Permanent link Comments (0)

See also: Prototyping and wireframing (119) 


 

24

Prototyping with Flash Catalyst

Adobe TV has published a one hour video showing how to use Flash Catalyst (formerly known by its codename Thermo) to build user interface wireframes for interactive applications.

Links:

  • Video demo of Flash Catalyst Open link in new window

Henrik Olsen - January 02, 2009 - via Konigi

Permanent link Comments (0)

See also: Prototyping and wireframing (119) 


 

25

Paper prototyping stencil

Design Commission has made a cool stencil kit that makes it easier to sketch nice looking interaction designs by hand. The kit includes a metal stencil, a mechanical pencil, and a sketchpad with browser chrome and grid.

Links:

  • Announcement of the web stencil kit Open link in new window

Henrik Olsen - December 28, 2008 - via KONIGI

Permanent link Comments (0)

See also: Prototyping and wireframing (119) 


 

26

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).

Links:

Henrik Olsen - August 24, 2008

Permanent link Comments (2)

See also: Prototyping and wireframing (119) 


 

27

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

Links:

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


 

28

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

Links:

  • The Pencil Project Open link in new window

Henrik Olsen - July 06, 2008

Permanent link Comments (0)

See also: Prototyping and wireframing (119) 


 

29

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.

Links:

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


 

30

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.

Links:

  • Quick and Easy Flash Prototypes Open link in new window

Henrik Olsen - June 01, 2008

Permanent link Comments (1)

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) 

Technology

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

Humour

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