wireframing basics - ux and the design process by amber vasquez

29
a presentation by May 21, 2014 Amber Vasquez @ambersiscoe Wireframing Basics - UX and the Design Process

Upload: mightybytes

Post on 17-Aug-2014

827 views

Category:

Design


1 download

DESCRIPTION

Join Mightybytes Experience Director Amber Vasquez for a workshop explaining the basics of wireframing. You'll gain a basic understanding of the tools and techniques you'll need to incorporate wireframing into your everyday design work. And you'll get a complimentary UX sketchbook to work with! This workshop is recommended for design professionals looking to integrate wireframing into their process, or anyone strengthening their full-stack design skills.

TRANSCRIPT

Page 1: Wireframing Basics - UX and the Design Process by Amber Vasquez

a presentation by

May 21, 2014

Amber Vasquez @ambersiscoe

Wireframing Basics - UX and the Design Process

Page 2: Wireframing Basics - UX and the Design Process by Amber Vasquez

About Mightybytes

We solve problems by:

• UX research and strategy

• Responsive web design and development

• Content strategy

• Digital marketing and SEO

• Motion graphics

• Product development

• Drupal, Wordpress, Expression Engine

!

Page 3: Wireframing Basics - UX and the Design Process by Amber Vasquez
Page 4: Wireframing Basics - UX and the Design Process by Amber Vasquez

What you will learn today

• What a wireframe is & why you should start using them now

• What you need to start your wireframe

• What’s your process?

• Let’s build a wireframe!

• Wireframes in the wild

• Q&A

• Conclusion

Page 5: Wireframing Basics - UX and the Design Process by Amber Vasquez

Wireframes show: • Page layout • Information priority • A bridge between ideas and prototype !

Wireframes do not show: • Look and Feel • Treatment of buttons and/or graphic elements • Exact copy or verbiage

Wireframes: Functionality, not visual designWireframes are blueprints for a site or app

Page 6: Wireframing Basics - UX and the Design Process by Amber Vasquez

#1 - They force you and your client to think about the basic interactions your user will have with your product

Page 7: Wireframing Basics - UX and the Design Process by Amber Vasquez

#2 - Easier to design with a wireframe in hand

Page 8: Wireframing Basics - UX and the Design Process by Amber Vasquez

#3 - You will save time by getting client sign off on wireframes before the design stage.

VS.

Page 9: Wireframing Basics - UX and the Design Process by Amber Vasquez

#4 - Once there is sign off on wireframes the developers can start - without waiting for your design

Page 10: Wireframing Basics - UX and the Design Process by Amber Vasquez

Version #2Version #1

#5 - You can workout new ideas about user interaction you might have before you spend time in the design phase — without being distracted by design components

Page 11: Wireframing Basics - UX and the Design Process by Amber Vasquez

An amazing analogy!

• Wireframes are the architectural blueprint of the house

• HTML/CSS are the bones of the house - the frame, the doors, the roof

• Backend Development (i.e. a Drupal install, Wordpress setup, ect.) is the plumbing and heating - you don’t see it, but it’s an integral part of how the house operates

• Visual Design is how you decorate the house - it’s curtains, carpet, paint or wallpaper & furniture

Think of your website or app like a house:

Page 12: Wireframing Basics - UX and the Design Process by Amber Vasquez

a presentation by

Your first wireframe - Let’s get started!

Page 13: Wireframing Basics - UX and the Design Process by Amber Vasquez

What kind of wireframe do YOU need?

• What is the budget?

• What is the timeframe?

• What do you need to get sign off to move forward in the process with your client?

Some questions to ask before you begin:

Page 14: Wireframing Basics - UX and the Design Process by Amber Vasquez

Different strokes for different folks.

Low Fidelity High Fidelity

Page 15: Wireframing Basics - UX and the Design Process by Amber Vasquez

What program should you use?

• Paper sketches

• Illustrator

• Photoshop

• Keynote or Powerpoint

• InDesign

• Fireworks

• Balsamiq

• Omnigraffle

Pick your poison:

Page 16: Wireframing Basics - UX and the Design Process by Amber Vasquez

Pattern libraries recommend solutions to common design problems so you don’t have to burn your time re-inventing the wheel. !Some of my favorites include:

• Welie.com • Patterny.com • Patterntap.com • Pttrns.com

Juicy Tidbit!

Page 17: Wireframing Basics - UX and the Design Process by Amber Vasquez

Pattern Tap - great for fast sorting of types

Page 18: Wireframing Basics - UX and the Design Process by Amber Vasquez

pttrns - great for iOS patterns

Page 19: Wireframing Basics - UX and the Design Process by Amber Vasquez

Different projects require different workflows

Sketch > Wireframe > Visual Design > Code

Sketch > Wireframe > Hi-Def Wireframe > Visual Design > Code

Wireframe > Hi-Def Wireframe > Visual Design > Code

Sketch > Code

Wireframe > Interactive Prototype > Visual Design > Code

Page 20: Wireframing Basics - UX and the Design Process by Amber Vasquez

a presentation by

Let’s build a wireframe!

Page 21: Wireframing Basics - UX and the Design Process by Amber Vasquez

The basics - the frame of the house

Page 22: Wireframing Basics - UX and the Design Process by Amber Vasquez

Symbol libraries are your friend

Page 23: Wireframing Basics - UX and the Design Process by Amber Vasquez

Build your wireframes on a 12 grid format - this will make the transition easier from wireframes to design to code.

Juicy Tidbit!

Page 24: Wireframing Basics - UX and the Design Process by Amber Vasquez

It needs to accomplish 3 things:

Wireframe a site for Narwhal Adoption

• Search for local Narwhals • Buy Narwhal merchandise • Adopt a Narwhal

Page 25: Wireframing Basics - UX and the Design Process by Amber Vasquez

a presentation by

Wireframing in the Wild

Page 26: Wireframing Basics - UX and the Design Process by Amber Vasquez

Wireframes in the wild: Rails-to-Trails

This site is a great example of very little change from the wireframes to the design phase. !We spent 70% of our time wireframing, 30% designing.

Page 27: Wireframing Basics - UX and the Design Process by Amber Vasquez

Wireframes in the wild: Elevate Energy

This site is a great example of some changes from the wireframes to the design phase. !Entering in more specific content in the design & coding phase made the client realize they wanted some content to shift.

Page 28: Wireframing Basics - UX and the Design Process by Amber Vasquez

a presentation by

Q&A

Page 29: Wireframing Basics - UX and the Design Process by Amber Vasquez

a presentation by

May 21, 2014

Amber Vasquez @ambersiscoe&

Thank you!

linkedin.com/in/ambersiscoe