Web wireframe: Difference between revisions
Jump to navigation
Jump to search
m (using an external editor) |
m (→List of tools) |
||
| (17 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
{{interaction-design|Overview article}} | |||
{{Stub}} | {{Stub}} | ||
Web wireframes are sketches of the structure of a web page (in various details) and an important tool in [[user interaction design]]. | 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]]. | ||
{{quotation|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.}} [http://en.wikipedia.org/wiki/Website_wireframe Website Wikipedia], retrieved Jan 12 2011) | {{quotation|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.}} [http://en.wikipedia.org/wiki/Website_wireframe Website Wikipedia], retrieved Jan 12 2011) | ||
| Line 11: | Line 12: | ||
=== List of tools === | === List of tools === | ||
; Specialized tools | ; Specialized software tools for your desktop or the browser | ||
* Pencil project, a free and opensource tool for making diagrams and GUI prototyping that everyone can use. Implemented as either Firefox extension or standalone tool. The [http://pencil.evolus.vn/en-US/Home.aspx Pencil Project Home page] includes recent FF extension versions as well as standalone versions. | |||
** Firefox version was last checked on Jan 2015 and it seems to work fine. Save the .xpi file, then drop it onto your browser. Finally you will have to enable the "classic" menu, else you cannot launch the application. | |||
** The [https://addons.mozilla.org/en-US/firefox/addon/pencil/?src=api Pencil Project] on Mozilla doesn't work as of Jan 2015. | |||
* [https://www.gliffy.com/ Gliffy] is a general purpose online diagramming tool. Five diagrams are free. | |||
* [https://wireframe.cc/ Wireframe.cc]. A basic version is free. | |||
The following tools are commercial, but most allow creation of a few diagrams for free. Some are free or cheap for students. | |||
* [http://www.justinmind.com/ Justinmind] interactive wireframes using its extensive gallery of components and interactions. - [http://en.wikipedia.org/wiki/Justinmind_Prototyper Justinmind Prototyper] (Wikipedia) | * [http://www.justinmind.com/ Justinmind] interactive wireframes using its extensive gallery of components and interactions. - [http://en.wikipedia.org/wiki/Justinmind_Prototyper Justinmind Prototyper] (Wikipedia) | ||
* [http://balsamiq.com/products/mockups Balsamiq Mockups], a fairly easy to use and powerful tool it seems. ([http://balsamiq.com/support/documentation documentation]) | * [http://balsamiq.com/products/mockups Balsamiq Mockups], a fairly easy to use and powerful tool it seems. ([http://balsamiq.com/support/documentation documentation]) | ||
* [http://mockupscreens.com/ Mockup Screens]. | * [http://mockupscreens.com/ Mockup Screens]. | ||
* [http:// | * [http://www.axure.com/ Axure] Students and teachers can get a free version upon request. ([http://en.wikipedia.org/wiki/Axure_RP Wikipedia]) | ||
* [http://www. | * [http://www.mockflow.com/ MockFlow] (1 free model in each "app") | ||
* [http://www. | * [http://www.uxpin.com/ UxPin] (formerly Justproto, commercial, 1 month free) | ||
* [http://www. | * [http://www.protoshare.com ProtoShare] (1 month free trial) | ||
* [ | * [https://gomockingbird.com/ Mockingbird] (playing with the interface is free) | ||
* [https:// | * [https://pidoco.com/ pidoco] (30 day trial free) | ||
; General purpose diagramming | ; 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 | ; Stencils / kits for various drawing programs | ||
* [http://www.smashingmagazine.com/2010/02/05/50-free-ui-and-web-design-wireframing-kits-resources-and-source-files/ 50 Free UI and Web Design Wireframing Kits, Resources and Source Files, by | * [http://www.smashingmagazine.com/2010/02/05/50-free-ui-and-web-design-wireframing-kits-resources-and-source-files/ 50 Free UI and Web Design Wireframing Kits], Resources and Source Files, by Paul Andrew, Smashing Magazine. February 5th, 2010. ('''Excellent list''') | ||
* [http://www.jankoatwarpspeed.com/post/2009/12/24/sketching-wireframing-kit.aspx Free Sketching & Wireframing Kit] (svg, illustrator, pdf) | * [http://www.jankoatwarpspeed.com/post/2009/12/24/sketching-wireframing-kit.aspx Free Sketching & Wireframing Kit] (svg, illustrator, pdf) | ||
* [http://www.userfocus.co.uk/resources/axure_grids.html Layout grids for Axure and Pencil] (Userfocus) | |||
; Paper kits | |||
* [http://uxpin.com/ UXPin Portable Kit and Mobile Kit] ($20) Re-stickable, post-it like, user interface elements plus notepads with grid and place for notes. | |||
== Links == | == Links == | ||
=== Introductions === | |||
* [http://en.wikipedia.org/wiki/Website_wireframe Website wireframe] (Wikipedia) | * [http://en.wikipedia.org/wiki/Website_wireframe Website wireframe] (Wikipedia) | ||
* [http://en.wikipedia.org/wiki/Communication_design communication design] (Wikipedia) | * [http://en.wikipedia.org/wiki/Communication_design communication design] (Wikipedia) | ||
=== Indexes and evaluations of tools === | |||
* [http://webdesignledger.com/tools/10-excellent-tools-for-creating-web-design-wireframes 10 Excellent Tools for Creating Web Design Wireframes] Posted by Henry Jones on Mar 30, 2010 | * [http://webdesignledger.com/tools/10-excellent-tools-for-creating-web-design-wireframes 10 Excellent Tools for Creating Web Design Wireframes] Posted by Henry Jones on Mar 30, 2010 | ||
* [http://www.smashingmagazine.com/2010/02/05/50-free-ui-and-web-design-wireframing-kits-resources-and-source-files/ 50 Free UI and Web Design Wireframing Kits, Resources and Source Files], Paul Andrew, Feb 2010, Smashing Magazine. | * [http://www.smashingmagazine.com/2010/02/05/50-free-ui-and-web-design-wireframing-kits-resources-and-source-files/ 50 Free UI and Web Design Wireframing Kits, Resources and Source Files], Paul Andrew, Feb 2010, Smashing Magazine. | ||
* [http://www.uie.com/articles/prototyping_tools/ Prototyping: Picking the Right Tool] by By Todd Zaki Warfel, Messagefirst, originally published: Mar 18, 2010 | |||
=== Tutorials === | |||
* [http://graphicdesign.about.com/od/effectivewebsites/ss/wireframes.htm How to Create Website Wireframes] By Eric Miller, About.com Guide | * [http://graphicdesign.about.com/od/effectivewebsites/ss/wireframes.htm How to Create Website Wireframes] By Eric Miller, About.com Guide | ||
* [http://www.uie.com/articles/user_expectations/ The Wheres and Whens of Users' Expectations] by By Jared M. Spool, User Interface Engineering, originally published: Jun 08, 2008 | |||
* [http://www.uie.com/articles/why_sketching/ Why We Sketch] By Jared M. Spool, Originally published: Sep 22, 2010 | |||
[[Category: Design methodologies]] | [[Category: Design methodologies]] | ||
[[Category: Ergonomics and human-computer interaction]] | [[Category: Ergonomics and human-computer interaction]] | ||
[[Category: Web authoring]] | [[Category: Web authoring]] | ||
Latest revision as of 12:30, 7 January 2020
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 or the browser
- Pencil project, a free and opensource tool for making diagrams and GUI prototyping that everyone can use. Implemented as either Firefox extension or standalone tool. The Pencil Project Home page includes recent FF extension versions as well as standalone versions.
- Firefox version was last checked on Jan 2015 and it seems to work fine. Save the .xpi file, then drop it onto your browser. Finally you will have to enable the "classic" menu, else you cannot launch the application.
- The Pencil Project on Mozilla doesn't work as of Jan 2015.
- Gliffy is a general purpose online diagramming tool. Five diagrams are free.
- Wireframe.cc. A basic version is free.
The following tools are commercial, but most allow creation of a few diagrams for free. Some are free or cheap for students.
- 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 Students and teachers can get a free version upon request. (Wikipedia)
- MockFlow (1 free model in each "app")
- UxPin (formerly Justproto, commercial, 1 month free)
- ProtoShare (1 month free trial)
- Mockingbird (playing with the interface is free)
- 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)
- Layout grids for Axure and Pencil (Userfocus)
- 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