designers guide to wireframing

WIREFRAMINGDESIGNERS GUIDE TO

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


WIREFRAME

“a visual guide that represents the skeletal framework of a website.”


WIREFRAMES: WHAT ARE THEY?

▸ Foundation

▸ Schematics/Blueprints of a Product

▸ 2-Dimensional Representation

▸ Communicational Tool


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


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


BOXES

▸ The BOX

▸ Building Block of Any Wireframe is The Box

▸ Used to represent a portion of content. Example. Blog Posts, Ads, Navigation


BOX: EXAMPLE


LOW-FIDELITY

▸ Abstract

▸ Quick to Develop

▸ Easy to Share


HIGH FIDELITY

▸ Increased Clarity

▸ Detailed

▸ Helps Fill In Missing Pieces


LOW-FIDELITY HIGH-FIDELITY


WIREFRAME TIPS & TRICKS

▸ Why Try to Reinvent The Wheel? We want you to move quickly.

▸ Stencil Libraries

▸ Pattern Libraries

▸ Use a Grid


STENCIL LIBRARY

▸ http://www.humbleux.com/

▸ http://axemplate.com/downloads/category/freebies/

▸ http://speckyboy.com/2014/03/31/20-free-web-mobile-wireframe-templates/

http://www.humbleux.com/

http://axemplate.com/downloads/category/freebies/

http://speckyboy.com/2014/03/31/20-free-web-mobile-wireframe-templates/


PATTERNS▸ http://studio.uxpin.com/patterns/

▸ patterntap.com

▸ http://wireframes.tumblr.com/

▸ http://webwithoutwords.com/

http://studio.uxpin.com/patterns/

http://patterntap.com

http://wireframes.tumblr.com/

http://webwithoutwords.com/


GRIDS


STARTING A WIREFRAME

▸ Biggest to Smallest

▸ Start with the largest part of the interface

▸ Outline

▸ header, footer, navigation

▸ content

▸ annotations


Footer

Header

Social Feed

Image of The Day

Logo


AXURE

▸ Setting Up Your Document

▸ Widgets & Properties Panel

▸ Libraries

▸ Grids


SKETCH GOOGLE


SKETCH INSTAGRAM


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

DESIGNER GUIDE TO WIREFRAMING

▸ Email: [email protected]

▸ Twitter: @covalentwill

▸ Linkedin: https://www.linkedin.com/in/williamquezada

THANK YOU!!

mailto:[email protected]

https://www.linkedin.com/in/williamquezada

designers guide to wireframing

Design