Web prototyping software: Difference between revisions

The educational technology and digital learning wiki
Jump to navigation Jump to search
m (Text replacement - "<pageby nominor="false" comments="false"/>" to "<!-- <pageby nominor="false" comments="false"/> -->")
 
(11 intermediate revisions by the same user not shown)
Line 1: Line 1:
{{interaction-design|Overview article}}
{{stub}}
{{stub}}
<pageby nominor="false" comments="false"/>
<!-- <pageby nominor="false" comments="false"/> -->
 
This piece needs updating ! / [[User:Daniel K. Schneider|Daniel K. Schneider]] ([[User talk:Daniel K. Schneider|talk]]) 21:45, 1 February 2015 (CET)


== Introduction ==
== Introduction ==
Line 9: Line 12:
(random collection, none is endorsed by 18:12, 26 November 2010 (CET))
(random collection, none is endorsed by 18:12, 26 November 2010 (CET))


; Free drawing
; Drawing programms
* Pencil and paper
* Pencil and paper
* Flow chart drawing software like [http://live.gnome.org/Dia DIA] (A Visio-like tool)
* Open office drawing program (Free)
* Presentation software like [http://www.openoffice.org/ OpenOffice presenter]
* Presentation software like [http://www.openoffice.org/ OpenOffice presenter]
* Illustrator + Photoshop
* OmmniGraffe + OmmiGraffle extensions (Mac)


; Commercial drawing
For some programs one then can download special stencils, e.g.
* Photoshop
* [http://www.jankoatwarpspeed.com/post/2009/12/24/sketching-wireframing-kit.aspx Free Sketching & Wireframing Kit] (Adobe Illustrator and the other in SVG vector format)
 
; Diagramming software
See [[diagramming software]] and to a lesser extent [[concept map]] and [[mind map]] software


; Interactive Multimedia
; Interactive Multimedia
Line 25: Line 33:
* Flex (use Flash Builder just for the GUI outline)
* Flex (use Flash Builder just for the GUI outline)


; Commercial interactive mockup
; Wireframe mockup
 
Wireframe mockups can illustrate of the layout of fundamental elements of the web page. There exist several kinds of tools, e.g.


* [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)
* Specific [[web wireframe]] tools (see this article for a longer list)
* [http://www.conceptdraw.com/en/products/webwave/main.php ConceptDraw PRO WebWave Plug-in]
* General purpose diagramming tools
* [http://balsamiq.com/products/mockups Balsamiq Mockups], a fairly easy to use and powerful tool it seems. See the [http://balsamiq.com/support/documentation documentation]
* General purpose GUI wireframe tools
* [http://www.justproto.com/en/ Justproto]
* [http://mockupscreens.com/ Mockup Screens].
* [http://en.wikipedia.org/wiki/LucidChart LucidChart] (Wikipedia)
* [http://en.wikipedia.org/wiki/ProtoShare ProtoShare] (Wikipedia)
* [http://en.wikipedia.org/wiki/Axure_RP Axure] (Wikipedia)
* DefineIt from [http://en.wikipedia.org/wiki/Borland Borland]


== Links ==
== Links ==
Line 42: Line 46:


* [http://c2.com/cgi/wiki?GuiPrototypingTools Gui Prototyping Tools] (good list in the ''original'' wiki, wow), up-to-date when retrieved 18:12, 26 November 2010 (CET).
* [http://c2.com/cgi/wiki?GuiPrototypingTools Gui Prototyping Tools] (good list in the ''original'' wiki, wow), up-to-date when retrieved 18:12, 26 November 2010 (CET).
=== Some software ===
See also:
* [[web wireframe]]
* [[concept map]]
Random list:
* [http://www.justinmind.com/ Justinmind] interactive wireframes using its extensive gallery of components and interactions. -
* DefineIt from [http://en.wikipedia.org/wiki/Borland Borland]
* [http://www.carettasoftware.com/ GUI Design Studio]
* [http://www.conceptdraw.com/en/products/webwave/main.php ConceptDraw PRO WebWave Plug-in]


=== Comparisons and reviews ===
=== Comparisons and reviews ===
Line 47: Line 63:
* [http://www.dexodesign.com/2008/11/07/review-16-user-interface-prototyping-tools/ Review: 16 User Interface Prototyping Tools], November 7th, 2008 by Russell Wilson  
* [http://www.dexodesign.com/2008/11/07/review-16-user-interface-prototyping-tools/ Review: 16 User Interface Prototyping Tools], November 7th, 2008 by Russell Wilson  
* [http://en.wikipedia.org/wiki/Graphical_user_interface_builder Graphical user interface builder] (Wikipedia, includes a list of GUI builders)
* [http://en.wikipedia.org/wiki/Graphical_user_interface_builder Graphical user interface builder] (Wikipedia, includes a list of GUI builders)


===  Introductions and further reading ===
===  Introductions and further reading ===


* [http://www.wireframemockups.com/ Wireframe Mockups] is a collection of articles of interest. Quote (11/2010): {{quotation|Wireframes, Mockups and Prototypes are an integral part of any requirement gathering and software development. This site aims to provide some intelligent discussion points on the above topics.}}
* [http://en.wikipedia.org/wiki/User_interface_design User interface design](Wikipedia)
* [http://en.wikipedia.org/wiki/User_interface_design User interface design](Wikipedia)
* [http://en.wikipedia.org/wiki/Software_prototyping Software prototyping] (Wikipedia)
* [http://en.wikipedia.org/wiki/Software_prototyping Software prototyping] (Wikipedia)
Line 61: Line 77:
[[Category: Ergonomics and human-computer interaction]]
[[Category: Ergonomics and human-computer interaction]]
[[Category: Web authoring]]
[[Category: Web authoring]]
[[Category: Design methodologies]]

Latest revision as of 18:03, 22 August 2016

Draft

This piece needs updating ! / Daniel K. Schneider (talk) 21:45, 1 February 2015 (CET)

Introduction

“Wireframing is one the best method to streamline your development process. But there are many tools and methods to choose from, when creating a wireframe. From to easiest one (hand sketching on paper), to much more complicated (desktop prototyping software, web-based prototyping software, mind-mapping software, etc). Which one is the most powerfull? Maybe any of them is just useless?” (Karol Zielinski, July 2009)

Software

(random collection, none is endorsed by 18:12, 26 November 2010 (CET))

Drawing programms
  • Pencil and paper
  • Open office drawing program (Free)
  • Presentation software like OpenOffice presenter
  • Illustrator + Photoshop
  • OmmniGraffe + OmmiGraffle extensions (Mac)

For some programs one then can download special stencils, e.g.

Diagramming software

See diagramming software and to a lesser extent concept map and mind map software

Interactive Multimedia
  • Fireworks
  • Flash
  • Catalyst
GUI Builders / CASE tools
  • Flex (use Flash Builder just for the GUI outline)
Wireframe mockup

Wireframe mockups can illustrate of the layout of fundamental elements of the web page. There exist several kinds of tools, e.g.

  • Specific web wireframe tools (see this article for a longer list)
  • General purpose diagramming tools
  • General purpose GUI wireframe tools

Links

Indexes (links of links)

  • Gui Prototyping Tools (good list in the original wiki, wow), up-to-date when retrieved 18:12, 26 November 2010 (CET).

Some software

See also:

Random list:

Comparisons and reviews

Introductions and further reading

Retrieved from "https://edutechwiki.unige.ch/mediawiki/index.php?title=Web_prototyping_software&oldid=59758"