Wireframing Strategies


Published on

Wireframing Strategies - http://www.daryabushmakin.com/

Published in: Technology, Business

Wireframing Strategies

  1. 1. DARYA A. BUSHMAKIN, MBA Facebook / Twitter / LinkedIn / Pinterest / Instagram / Video Resume / Website / Slideshare (603) 689 – 4513 / dbushmakingmail.com WIREFRAMINGDefinitions 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 areasBenefits 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
  2. 2. DARYA A. BUSHMAKIN, MBA Facebook / Twitter / LinkedIn / Pinterest / Instagram / Video Resume / Website / Slideshare (603) 689 – 4513 / dbushmakingmail.comTools 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/
  3. 3. DARYA A. BUSHMAKIN, MBA Facebook / Twitter / LinkedIn / Pinterest / Instagram / Video Resume / Website / Slideshare (603) 689 – 4513 / dbushmakingmail.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/
  4. 4. DARYA A. BUSHMAKIN, MBA Facebook / Twitter / LinkedIn / Pinterest / Instagram / Video Resume / Website / Slideshare (603) 689 – 4513 / dbushmakingmail.comUltimate 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.htm10 Excellent Tools for Creating Web Design Wireframes - http://webdesignledger.com/tools/10-excellent-tools-for-creating-web-design-wireframes15 Desktop & Online Wireframing Tools - http://www.uxbooth.com/blog/15-desktop-online-wireframing-toolsWireframe tools - top 10 solutions - http://www.netmagazine.com/features/wireframe-tools-top-10-solutions17 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-toolsUseful 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-managersTop 20 Wireframe Tools- http://garmahis.com/reviews/wireframe-tools15 Best Wireframing Tools for Designers- http://www.tripwiremagazine.com/2010/04/15-best-wireframing-tools-for-designers.html25 Wireframe Tools to Aid Your Creative Process- http://www.hotscripts.com/blog/25-wireframe-tools-aid-creative-process/