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

DESIGNERS GUIDE TO WIREFRAMING

WIREFRAME

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

DESIGNERS GUIDE TO WIREFRAMING

WIREFRAMES: WHAT ARE THEY?

▸ Foundation

▸ Schematics/Blueprints of a Product

▸ 2-Dimensional Representation

▸ Communicational Tool

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

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

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

DESIGNERS GUIDE TO WIREFRAMING

BOX: EXAMPLE

DESIGNERS GUIDE TO WIREFRAMING

LOW-FIDELITY

▸ Abstract

▸ Quick to Develop

▸ Easy to Share

DESIGNERS GUIDE TO WIREFRAMING

HIGH FIDELITY

▸ Increased Clarity

▸ Detailed

▸ Helps Fill In Missing Pieces

DESIGNERS GUIDE TO WIREFRAMING

LOW-FIDELITY HIGH-FIDELITY

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

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/

DESIGNERS GUIDE TO WIREFRAMING

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

▸ patterntap.com

▸ http://wireframes.tumblr.com/

▸ http://webwithoutwords.com/

DESIGNERS GUIDE TO WIREFRAMING

GRIDS

DESIGNERS GUIDE TO WIREFRAMING

STARTING A WIREFRAME

▸ Biggest to Smallest

▸ Start with the largest part of the interface

▸ Outline

▸ header, footer, navigation

▸ content

▸ annotations

DESIGNERS GUIDE TO WIREFRAMING

DESIGNERS GUIDE TO WIREFRAMING

DESIGNERS GUIDE TO WIREFRAMING

Footer

Header

Social Feed

Image of The Day

Logo

DESIGNERS GUIDE TO WIREFRAMING

AXURE

▸ Setting Up Your Document

▸ Widgets & Properties Panel

▸ Libraries

▸ Grids

DESIGNERS GUIDE TO WIREFRAMING

SKETCH GOOGLE

DESIGNERS GUIDE TO WIREFRAMING

DESIGNERS GUIDE TO WIREFRAMING

SKETCH INSTAGRAM

DESIGNERS GUIDE TO WIREFRAMING

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

DESIGNER GUIDE TO WIREFRAMING

▸ Email: william.quez@gmail.com

▸ Twitter: @covalentwill

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

THANK YOU!!