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

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Wireframing Strategies

3,502
views

Published on

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

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

Published in: Technology, Business

0 Comments
12 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,502
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
212
Comments
0
Likes
12
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/

×