Web wireframe: Difference between revisions
m (using an external editor) |
m (using an external editor) |
||
| Line 1: | Line 1: | ||
{{Stub}} | {{Stub}} | ||
{{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 | {{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 wirefram'''e 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 9: | Line 9: | ||
=== List of tools === | === List of tools === | ||
; Specialized tools | |||
These tools are all commercial, but most allow creation of a few diagrams for free. | |||
* [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://www.justproto.com/en/ Justproto] | * [http://www.justproto.com/en/ Justproto] | ||
* [http://mockupscreens.com/ Mockup Screens]. | * [http://mockupscreens.com/ Mockup Screens]. | ||
* [http://en.wikipedia.org/wiki/LucidChart | * | ||
([http://en.wikipedia.org/wiki/LucidChart Wikipedia]) | |||
* [http://www.protoshare.com ProtoShare] | * [http://www.protoshare.com ProtoShare] | ||
* [http://en.wikipedia.org/wiki/Axure_RP | * [http://www.axure.com/ Axure] ([http://en.wikipedia.org/wiki/Axure_RP Wikipedia]) | ||
* [http://www.mockflow.com/ MockFlow] | |||
; General purpose diagramming online tools | |||
* | There exist several services. As of Jan 2011, the two most popular seem to be: | ||
* [http:// | * [http://www.gliffy.com/ Gliffy] | ||
* [http://creately.com/ Creatly] | |||
== Links == | == Links == | ||
| Line 26: | Line 34: | ||
* [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) | ||
* [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://graphicdesign.about.com/od/effectivewebsites/ss/wireframes.htm How to Create Website Wireframes] By Eric Miller, About.com Guide | |||
[[Category: Design methodologies]] | [[Category: Design methodologies]] | ||
Revision as of 15:18, 13 January 2011
“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 tools
These tools are all commercial, but most allow creation of a few diagrams for free.
- 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)
- Justproto
- Mockup Screens.
- General purpose diagramming online tools
There exist several services. As of Jan 2011, the two most popular seem to be:
Links
- Website wireframe (Wikipedia)
- communication design (Wikipedia)
- 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.
- How to Create Website Wireframes By Eric Miller, About.com Guide