Jak tvořit wireframes

Nástroje pro tvorbu wireframů a prototypů.

Než začnete používat některý z níže uvedených nástrojů, tak si rozmyslete, zda to vůbec má smysl. Pro efektivní práci často stačí obyčejná tužka a papír.

Pokud se vaším jediným nástrojem stane kladivo, všechno pak začne vypadat jako hřebík.

Někdy obyčejné skicy stačí.

• tužka a papír
• tužka a lepší papír (přehled)
• fixy a tabule
• fixy a lepší tabule (IdeaPaint)

• http://www.axure.com/ (můj oblíbený program, bližší popis Axure RP, nabízím také Školení Axure RP)
• http://www.microsoft.com/cze/office/programs/visio/highlights.mspx + http://www.nickfinck.com/blog/entry/visio_stencils_for_information_architects/ a http://www.guuui.com/issues/02_07.php a taky http://blogs.msdn.com/b/visio/archive/2009/12/22/wireframe-shapes-in-visio-2010.aspx
• http://www.foreui.com/
• http://www.wireframesketcher.com/
• http://www.mockupscreens.com/
• http://www.justinmind.com/
• http://www.flairbuilder.com/
• http://www.omnigroup.com/applications/omnigraffle/ + http://konigi.com/tools/omnigraffle-wireframe-stencils
• http://www.irise.com/
• http://www.antetype.com/
• http://www.smartdraw.com/
• http://www.carettasoftware.com/guidesignstudio/
• http://www.evolus.vn/Pencil/
• http://www.serena.com/products/prototype-composer/index.html
• http://www.microsoft.com/expression/products/Sketchflow_Overview.aspx
• http://www.codingrobots.com/screensketcher/
• http://www.adobe.com/products/flashcatalyst/
• http://dub.washington.edu:2007/denim/

Většinou jde o nástroje v Adobe Air, jen občas to někdo zkouší v javascriptu.

• http://www.balsamiq.com (+ http://www.realitymechanic.com/)
• http://www.iplotz.com
• http://www.mockflow.com
• http://www.hotgloo.com
• http://www.justproto.com/en
• http://www.protoshare.com
• http://www.conceptdraw.com/en
• http://www.elegancetech.com/ls/ls.aspx
• http://www.pidoco.com
• http://www.gomockingbird.com
• http://www.fluidia.org/
• http://www.lumzy.com/
• http://www.cacoo.com/
• http://www.gliffy.com/
• http://www.mocksup.com
• http://www.lovelycharts.com
• http://www.gridpapr.com/
• http://www.jumpchart.com/
• http://www.creately.com/
• http://www.inpreso.com/inpresoscreens/
• http://gotiggr.com/
• http://handcraft.com/

• http://lesscode.co.nz/interface
• http://www.mockapp.com/
• http://www.endloop.ca/imockups/
• http://sketchyapp.com/

• PowerPoint + Plugin http://www.powermockup.com/
• Keynote http://keynotekungfu.com/, http://http://keynotopia.com/, http://www.lukew.com/ff/entry.asp?1155, http://www.lukew.com/ff/entry.asp?1171, http://adaptivepath.com/ideas/your-rapid-prototyping-tool-for-ipad-keynote
• Grafické programy
  • Photoshop,
  • Fireworks,
  • InDesign (http://unify.eightshapes.com/),
  • atd.
• Prototypy přímo v HTML + CSS + JavaScript
• Flash, resp. Catalyst

Další zdroje

• http://weblogs.asp.net/fmarguerie/archive/2009/02/15/gui-design-and-prototyping-tools.aspx
• http://www.c2.com/cgi/wiki?GuiPrototypingTools
• http://www.sitepoint.com/article/tools-prototyping-wireframing/
• http://blog.h1.cz/nase-cislo-jedna-pro-tvorbu-wireframes/
• http://sigchiczech.ning.com/forum/topics/prototypovaci-nastroje
• http://www.90percentofeverything.com/2009/09/16/help-were-drowing-in-wireframing-apps/

• http://spreadsheets.google.com/pub?key=pOa2Uqiakxlry5hNuZm89Eg&output=html
• http://konigi.com/node/1819

• http://www.smashingmagazine.com/2009/09/01/35-excellent-wireframing-resources/
• http://www.gracesmith.co.uk/get-wireframing-the-all-in-one-guide/
• http://carsonified.com/blog/features/20-steps-to-better-wireframing/
• http://www.uxbooth.com/blog/15-desktop-online-wireframing-tools/