Your SlideShare is downloading. ×
Wireframing Strategies
Wireframing Strategies
Wireframing Strategies
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


Published on

Wireframing Strategies -

Wireframing Strategies -

Published in: Technology, Business
  • Be the first to comment

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. DARYA A. BUSHMAKIN, MBA Facebook / Twitter / LinkedIn / Pinterest / Instagram / Video Resume / Website / Slideshare (603) 689 – 4513 / 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 - o Cacoo - o Connect-a-Sketch - o Creately - o DUB DENIM - o EightShapes - o fluidIA - o ForeUI - o Frame Box - o Gliffy - o Grid Paper - o GUI Design Studio - o HotGloo - o Interactive Sketching Notation - o InVision - o iRise - o Jumpchart - o JustInMindPrototyper - o JustProto - o Lovely Charts - o Lumzy - o MindMeister - o MockFlow - o Mockingbird - o Mockup Screens - o Origramy - o Pidoco -
  • 3. DARYA A. BUSHMAKIN, MBA Facebook / Twitter / LinkedIn / Pinterest / Instagram / Video Resume / Website / Slideshare (603) 689 – 4513 / o - o ProtoShare - o SimpleDiagrams - o Tiggr – o Treejack - o UIreframe - o UXpin - o Wireframes – o XMind - Desktop and Hybrid Apps o Axure - o DesignerVista - o EasyPrototype - o Ethnio - o Flairbuilder - o ForceUI - o Gliffy - o GUI Design Studio - o Hot Gloo - o iPlotz - o JustinmindPrototyper - o JustProto - o MockFlow - o MockupScreens - o Napkee - o Naview - o OverSite - o Pencil Project - o ProtoShare - o WireframeSketcher - Wireframing Templates o OmniGraffle Wireframe Stencils - stencils/ o Fuel Your Interface - o Yahoo. Developer Network Design Stencils - Resources 35 Excellent Wireframing Resources - excellent-wireframing-resources/ 10 Free Wireframing Tools for Designers -
  • 4. DARYA A. BUSHMAKIN, MBA Facebook / Twitter / LinkedIn / Pinterest / Instagram / Video Resume / Website / Slideshare (603) 689 – 4513 / dbushmakingmail.comUltimate Guide to Website Wireframing - Beginner’s Guide to Wireframing - For Web Apps - Free UI and Web Design Wireframing Kits, Resources and Source Files - - of Website Wireframes - Excellent Tools for Creating Web Design Wireframes - Desktop & Online Wireframing Tools - tools - top 10 solutions - Great Wireframing Tools for Web Designers- 14 Excellent Free Wireframe Tools Designers/Developers Must Try - Wireframing And Prototyping Tools – Roundup - Handy Wireframe Tools Designed for Designers and Project Managers - 20 Wireframe Tools- Best Wireframing Tools for Designers- Wireframe Tools to Aid Your Creative Process-