Web wireframe

Draft

Web wireframes are sketches of the structure of a web page (in various details) and an important tool in user interaction and user interface design.

“A website wireframe (also "web wire frame", "web wireframe", "web wireframing") is a basic visual guide used in interface design to suggest the structure of a website and relationships between its pages. A webpage wireframe is a similar illustration of the layout of fundamental elements in the interface. Typically, wireframes are completed before any artwork is developed.” Website Wikipedia, retrieved Jan 12 2011)

Tools

According to Wikipedia, “Wireframes can range from simple structural drawings of the site to a high-fidelity simulation of the navigation, which has movements, functional links and complex interactions. For simple drawings, prototyping paper prototyping is the most common technique, but it's becoming increasingly common to use software for more complex projects. Software used for wireframing includes Visio Microsoft Visio, Creately, Balsamiq, LucidChart, ProtoShare, Axure, Prototyper Justinmind Prototyper, Fireworks Adobe Fireworks, OmniGraffle, Mockingbird and others.” (Website wireframe, retrieved 10:50, 13 January 2011 (CET).)

List of tools

Specialized software tools for your desktop

These tools are all commercial, but most allow creation of a few diagrams for free.

• Pencil Project (Mozilla page), a free and opensource tool for making diagrams and GUI prototyping that everyone can use. The Pencil Project Home page may include a more recent version, also includes standalone versions.
• Justinmind interactive wireframes using its extensive gallery of components and interactions. - Justinmind Prototyper (Wikipedia)
• Balsamiq Mockups, a fairly easy to use and powerful tool it seems. (documentation)
• Mockup Screens.
• Axure (Wikipedia)

Online specialized tools (all are commercial)

• Justproto (commercial, 1 free proto)
• ProtoShare
• MockFlow
• iPlotz
• Mockingbird
• pidoco (30 day trial free)

General purpose diagramming tools

Diagramming software or online general purpose diagramming/flowcharting several services support many different types of drawings.

• See: diagramming software

Stencils / kits for various drawing programs

• 50 Free UI and Web Design Wireframing Kits, Resources and Source Files, by Paul Andrew, Smashing Magazine. February 5th, 2010. (Excellent list)

• Free Sketching & Wireframing Kit (svg, illustrator, pdf)

Paper kits

• UXPin Portable Kit and Mobile Kit ($20) Re-stickable, post-it like, user interface elements plus notepads with grid and place for notes.

Links

Introductions

• Website wireframe (Wikipedia)
• communication design (Wikipedia)

Indexes and evaluations of tools

• 10 Excellent Tools for Creating Web Design Wireframes Posted by Henry Jones on Mar 30, 2010
• 50 Free UI and Web Design Wireframing Kits, Resources and Source Files, Paul Andrew, Feb 2010, Smashing Magazine.
• Prototyping: Picking the Right Tool by By Todd Zaki Warfel, Messagefirst, originally published: Mar 18, 2010

Tutorials

• How to Create Website Wireframes By Eric Miller, About.com Guide
• The Wheres and Whens of Users' Expectations by By Jared M. Spool, User Interface Engineering, originally published: Jun 08, 2008
• Why We Sketch By Jared M. Spool, Originally published: Sep 22, 2010