Designers Guide To Wireframing
•
1 like•645 views
Lead a workshop to introduce new or veteran designers the basics of wireframing
Recommended
Recommended
More Related Content
Viewers also liked
Viewers also liked (20)
Similar to Designers Guide To Wireframing
Similar to Designers Guide To Wireframing (20)
Recently uploaded
Recently uploaded (20)
Designers Guide To Wireframing
- 2. DESIGNERS GUIDE TO WIREFRAMING AGENDA ▸ Wireframes. ▸ What are they? ▸ Why use them? ▸ Different Types ▸ Low-Fidelity ▸ High-Fidelity ▸ Wireframe Tips & Tricks ▸ Setting up Your Document ▸ Small Exercises ▸ Prompt
- 3. DESIGNERS GUIDE TO WIREFRAMING WIREFRAME “a visual guide that represents the skeletal framework of a website.”
- 4. DESIGNERS GUIDE TO WIREFRAMING WIREFRAMES: WHAT ARE THEY? ▸ Foundation ▸ Schematics/Blueprints of a Product ▸ 2-Dimensional Representation ▸ Communicational Tool
- 5. DESIGNERS GUIDE TO WIREFRAMING WIREFRAMES: WHY USE THEM? ▸ Low Cost & Easy to Create ▸ Tells a Story ▸ Gets Everyone On The Same Page ▸ Prototyping for Usability Tests ▸ Easy to Change ▸ Helps Narrow Scope
- 6. DESIGNERS GUIDE TO WIREFRAMING WIREFRAMES ▸ What They Help Represent ▸ Page Layout ▸ How will the elements be stitched together? ▸ Functionality ▸ Deciding how will the interface work? ▸ Content ▸ What will be displayed ▸ Behavior ▸ How someone will interact with the site. ▸ Informational Importance ▸ How is the information organized and displayed
- 7. DESIGNERS GUIDE TO WIREFRAMING BOXES ▸ The BOX ▸ Building Block of Any Wireframe is The Box ▸ Used to represent a portion of content. Example. Blog Posts, Ads, Navigation
- 8. DESIGNERS GUIDE TO WIREFRAMING BOX: EXAMPLE
- 9. DESIGNERS GUIDE TO WIREFRAMING LOW-FIDELITY ▸ Abstract ▸ Quick to Develop ▸ Easy to Share
- 10. DESIGNERS GUIDE TO WIREFRAMING HIGH FIDELITY ▸ Increased Clarity ▸ Detailed ▸ Helps Fill In Missing Pieces
- 11. DESIGNERS GUIDE TO WIREFRAMING LOW-FIDELITY HIGH-FIDELITY
- 12. DESIGNERS GUIDE TO WIREFRAMING WIREFRAME TIPS & TRICKS ▸ Why Try to Reinvent The Wheel? We want you to move quickly. ▸ Stencil Libraries ▸ Pattern Libraries ▸ Use a Grid
- 13. DESIGNERS GUIDE TO WIREFRAMING STENCIL LIBRARY ▸ http://www.humbleux.com/ ▸ http://axemplate.com/downloads/category/freebies/ ▸ http://speckyboy.com/2014/03/31/20-free-web-mobile- wireframe-templates/
- 14. DESIGNERS GUIDE TO WIREFRAMING PATTERNS ▸ http://studio.uxpin.com/patterns/ ▸ patterntap.com ▸ http://wireframes.tumblr.com/ ▸ http://webwithoutwords.com/
- 15. DESIGNERS GUIDE TO WIREFRAMING GRIDS
- 16. DESIGNERS GUIDE TO WIREFRAMING STARTING A WIREFRAME ▸ Biggest to Smallest ▸ Start with the largest part of the interface ▸ Outline ▸ header, footer, navigation ▸ content ▸ annotations
- 17. DESIGNERS GUIDE TO WIREFRAMING
- 18. DESIGNERS GUIDE TO WIREFRAMING
- 19. DESIGNERS GUIDE TO WIREFRAMING Footer Header Social Feed Image of The Day Logo
- 20. DESIGNERS GUIDE TO WIREFRAMING AXURE ▸ Setting Up Your Document ▸ Widgets & Properties Panel ▸ Libraries ▸ Grids
- 21. DESIGNERS GUIDE TO WIREFRAMING SKETCH GOOGLE
- 22. DESIGNERS GUIDE TO WIREFRAMING
- 23. DESIGNERS GUIDE TO WIREFRAMING SKETCH INSTAGRAM
- 24. DESIGNERS GUIDE TO WIREFRAMING
- 25. DESIGNERS GUIDE TO WIREFRAMING FREE FORM PROMPT ▸ Wireframe a Site for Dog Adoptions ▸ Image of the Dog ▸ Name of the Dog ▸ Age of the Dog ▸ Description ▸ Ability to Adopt
- 26. DESIGNER GUIDE TO WIREFRAMING ▸ Email: william.quez@gmail.com ▸ Twitter: @covalentwill ▸ Linkedin: https://www.linkedin.com/in/williamquezada THANK YOU!!