Designers Guide To Wireframing
1 like686 views
This document provides an overview of wireframing for designers. It defines wireframes as visual representations of a website's skeletal framework. Wireframes are used early in the design process to plan page layout, functionality, content and user behavior at a low cost before visual design. The document outlines tips for wireframing such as using stencil libraries, pattern libraries and grids. It also provides examples of low and high-fidelity wireframes and prompts designers to create a wireframe for a dog adoption site.
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!!