Wireframing Strategies

DARYA A. BUSHMAKIN, MBA
Facebook / Twitter / LinkedIn / Pinterest / Instagram / Video Resume / Website / Slideshare
(603) 689 – 4513 / dbushmakingmail.com

WIREFRAMING
Definitions
Wireframes - illustrations ofstructure and components of a web page; first step indesign
process.
Mockups -close or identical toactual final site design and algraphics, typography and other page
elements;image files.
Prototypes - semi-functional webpage layouts of a mockup/comp that serves to give a higher-
fidelity preview ofactual site being built;user interface; constructed using HTML/CSS (and even
JavaScript for showcasing howfront-end interface works).
Low-fidelity (low-fi) wireframes - lines on a plain background with some labels; hand-drawn and
digital wireframes
High-fidelity (hi-fi) wireframes - using certain design elements withinwireframe (i.e. logo or
some othergraphics, color scheme and other visual design elements).

What to Include
Headers, footers, sidebars and content areas.
Dynamic widgets
Graphics
Navigation - Buttons for users to visitmain sections of your site.
Company logo - Can be represented by a box.
Content areas - Where will your different sections of content appear?
Search boxes
User login areas

Benefits
Allows for rapid prototyping
Communicate ideas
Enable greater upfront usability and functionality testing
Cost-effective - Wireframes can easily be revised or discarded.
Visual representation of content, hierarchy and layout
Wireframes can come in handy when you’re communicating with clients, as it allows them to
visualize your ideas more easily than when you describe them verbally.

Tips
Everything means something (every color, line, shadow, gradient).
Consistency helps

Tools
Pen and Paper
o Graph paper workswell
o Pencil for your initial sketches, so you can erase things without having to start over.
o As you finalize different parts, you can trace over them with a pen to prevent
erasingwrong elements.
o Use colored pens and pencils to differentiate between elements or to add more
meaning to your wireframes by color-coding things
Post-it note
o Makes it easy to rearrange different design elements
Microsoft Office - PowerPoint, Excel
Adobe Photoshop, Illustrator, or other graphics software
Web-Based Tools (share wireframes with other team members or clients
o Balsamiq Mockups - http://www.balsamiq.com/products/mockups
o Cacoo - https://cacoo.com/
o Connect-a-Sketch - http://connectasketch.com
o Creately - http://creately.com/Online-UI-Mockups-and-Wireframes
o DUB DENIM - http://dub.washington.edu:2007/denim
o EightShapes - http://unify.eightshapes.com
o fluidIA - http://www.fluidia.org
o ForeUI - http://www.foreui.com
o Frame Box - http://framebox.org
o Gliffy - http://www.gliffy.com/examples/wireframes/
o Grid Paper - http://gridpapr.com
o GUI Design Studio - http://www.carettasoftware.com/guidesignstudio
o HotGloo - http://www.hotgloo.com
o Interactive Sketching Notation - http://www.linowski.ca/sketching
o InVision - http://www.invisionapp.com
o iRise - http://www.irise.com/
o Jumpchart - https://www.jumpchart.com/
o JustInMindPrototyper - http://www.justinmind.com/
o JustProto - http://www.justproto.com/en/
o Lovely Charts - http://www.lovelycharts.com/
o Lumzy - http://lumzy.com/
o MindMeister - http://www.mindmeister.com/
o MockFlow - http://www.mockflow.com
o Mockingbird - https://gomockingbird.com/
o Mockup Screens - http://www.mockupscreens.com/
o Origramy - http://my.origramy.com/
o Pidoco - https://pidoco.com/

o Proto.io - http://proto.io
o ProtoShare - http://www.protoshare.com
o SimpleDiagrams - http://www.simplediagrams.com
o Tiggr – http://gotiggr.com
o Treejack - http://www.optimalworkshop.com/treejack.htm
o UIreframe - http://uireframe.com
o UXpin - http://uxpin.com
o Wireframes – http://Wireframes.org
o XMind - http://www.xmind.net/
Desktop and Hybrid Apps
o Axure - http://www.axure.com/
o DesignerVista - http://www.designervista.com/
o EasyPrototype - http://www.easyprototype.com/
o Ethnio - http://www.ethnio.com/
o Flairbuilder - http://flairbuilder.com/
o ForceUI - http://www.foreui.com/
o Gliffy - http://www.gliffy.com/wireframe-software/
o GUI Design Studio - http://www.carettasoftware.com/
o Hot Gloo - http://www.hotgloo.com/
o iPlotz - http://iplotz.com/
o JustinmindPrototyper - http://www.justinmind.com/
o JustProto - http://www.justproto.com/
o MockFlow - http://www.mockflow.com/
o MockupScreens - http://mockupscreens.com/
o Napkee - http://www.napkee.com/
o Naview - http://www.volkside.com/tools/naview/
o OverSite - http://www.taubler.com/oversite/
o Pencil Project - http://www.evolus.vn/Pencil/Home.html
o ProtoShare - http://www.protoshare.com/
o WireframeSketcher - http://www.wireframesketcher.com/
Wireframing Templates
o OmniGraffle Wireframe Stencils - http://konigi.com/tools/omnigraffle-wireframe-
stencils/
o Fuel Your Interface - http://www.fuelyourinterface.com/
o Yahoo. Developer Network Design Stencils -
http://developer.yahoo.com/ypatterns/about/stencils/

Helpful Resources
35 Excellent Wireframing Resources - http://www.smashingmagazine.com/2009/09/01/35-
excellent-wireframing-resources/
10 Free Wireframing Tools for Designers - http://mashable.com/2010/07/15/wireframing-tools/

Ultimate Guide to Website Wireframing - http://sixrevisions.com/user-interface/website-
wireframing/
A Beginner’s Guide to Wireframing - http://webdesign.tutsplus.com/tutorials/workflow-
tutorials/a-beginners-guide-to-wireframing/
Wireframing For Web Apps - http://blog.intercom.io/wireframing-for-web-apps/
50 Free UI and Web Design Wireframing Kits, Resources and Source Files -
http://www.smashingmagazine.com/2010/02/05/50-free-ui-and-web-design-wireframing-kits-
resources-and-source-files/
The - of Website Wireframes -
http://graphicdesign.about.com/od/effectivewebsites/ss/wireframes_all.htm
10 Excellent Tools for Creating Web Design Wireframes - http://webdesignledger.com/tools/10-
excellent-tools-for-creating-web-design-wireframes
15 Desktop & Online Wireframing Tools - http://www.uxbooth.com/blog/15-desktop-online-
wireframing-tools
Wireframe tools - top 10 solutions - http://www.netmagazine.com/features/wireframe-tools-
top-10-solutions
17 Great Wireframing Tools for Web Designers- http://www.fuelyourcreativity.com/17-great-
wireframing-tools-for-web-designers/
Top 14 Excellent Free Wireframe Tools Designers/Developers Must Try -
http://medleyweb.com/resources/tools/top-14-excellent-free-wireframe-tools
Useful Wireframing And Prototyping Tools – Roundup -
http://www.hongkiat.com/blog/wireframing-prototyping-tools/
20 Handy Wireframe Tools Designed for Designers and Project Managers -
http://www.smashingbuzz.com/2012/01/20-handy-wireframe-tools-designed-for-designers-
and-project-managers
Top 20 Wireframe Tools- http://garmahis.com/reviews/wireframe-tools
15 Best Wireframing Tools for Designers- http://www.tripwiremagazine.com/2010/04/15-best-
wireframing-tools-for-designers.html
25 Wireframe Tools to Aid Your Creative Process- http://www.hotscripts.com/blog/25-
wireframe-tools-aid-creative-process/

Wireframing Strategies

Recomendados

Recomendados

Mais conteúdo relacionado

Mais de Darya Bushmakin

Mais de Darya Bushmakin (6)

Último

Último (20)

Wireframing Strategies