Your SlideShare is downloading. ×
  • Like
Wireframing Strategies
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Wireframing Strategies

  • 3,281 views
Published

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

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

Published in Technology , Business
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
3,281
On SlideShare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
211
Comments
0
Likes
11

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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. 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. 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. 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/