Back to Basics:

Wireframing & Planning

Michael McArthur
@gorfed

Paul Crimi

@paulohnine
planning

So, you want to
create your own
digital product…
planning

Here are a few
things you should
know:
what is IA?

Information
Architecture is:
what is IA?

Grouping of content so that
it can be presented in a
logical order.
what is IA?

Creation of clear and
consistent navigation that
allows the user to easily find
the content they are
looking ...
what is IA?

Clear and visible content
hierarchy on each page
or screen.
why is content hierarchy important?

#1 UX rule:
!

Don’t make me think
when approaching IA:

Always ask yourself:
!

· What must users know first?
· Which actions do I want them to take?
· How ...
action funnel

welcome
supporting info
user takes
action

what am I looking at?
what do you want me
to do & how do I do it...
IA design

Define the end-game for
your site/app.
!

Define the end-game for
each screen.
remember:

The best interfaces are
invisible. They get out of the
way so that the user feels like
they achieve their goals...
App Maps.
what is an app map?

A high-level (bird’s eye)
overview of all the screens or
pages that exist within an
application.
what is an app map?
0.2

0.0

0.1

Register

Entry

Login

Forgot
Password

1.0

5.0

Stream

Legend:

0.1.1

Other User
P...
planning

Well then, how do we
go about planning a
product?
planning

UX Methodologies
!

· Deep dives
· User empathy
· Creating the appropriate hooks
· Iteration
Nir Eyal’s hook model

H

K
planning: iterative approach
fig 3. the ux design cycle

idea

learn

build

data

product

measure
planning

Step 1:
!

Outline the key features and/or
requirements
planning

Step 2:
!

Research the competitive landscape
!

· Outline key features/requirements
· Define differences in fea...
planning

Step 3:
!

Create a feature set comparison
!

· Identify common and rare features
· Outline what works and what ...
planning

Step 4:
!

Perform a heuristics on any competitor
products in market
!

· Outline assumption, observations,
impl...
planning

Step 5:
!

Draw a high-level (rudimentary)
Application Map
!

· Boxes & arrows are your new best friends
planning

Step 6:
!

Map features to the pages you outlined in
the Application Map.
!

· Put functionality in the boxes (f...
planning

Step 7:
!

Make sketchy love to your whiteboard
!

· Once satisfied that all requirements and
functions have bee...
planning

Step 8:
!

Capture your work
!

· Take pictures before you erase anything
from the whiteboard
· Erase everything...
planning

Step 9:
!

Massage your wires
!

· Open your wireframing app of choice and
vectorize your whiteboards
Wireframes.
what is a wireframe?

A visual representation of an
interface that excludes visual
design.
what is a wireframe?

instagram
username
location lorem ipsum

13 m

username comment lorem ipsum dolor sit amet
consectet...
why do we need wireframes?

To express how our website
or app will function.
who is it for?

The client.
!

To show them what we’re building
who is it for?

The dev team.
!

To define scope &
begin development
who is it for?

Our users.
!

For user testing
who is it for?

Yourself.
!

To test and iterate from
fidelity:
!

lo-fi vs hi-fi
tools:

Kick it old skool.

Good ol’ paper and pencil
tools:

Quick n’ dirtys
whiteboard
tools:

Step it up a notch
Balsamiq
Omnigraffle
!

(…and many more)
tools:

Hi-fi

Illustrator
Fireworks
Omnigraffle
!

(or your vector tool of choice)
ok, let’s solve your problems*
(workshop.)

*all problems not guaranteed solved.
resources
Wireframes, App Maps, Flow Charts &
Prototype Resources:
App Maps, Flow Charts & Wireframes:
!

Prototypes:
!

!...
resources
Recommended Books

Don’t Make Me Think
Steve Krug

Lean UX
Jeff Gothelf

Envisioning Information
Edward R Tufte
...
resources
Recommended Links
Luke Wroblewski
http://www.lukew.com

Capptivate
http://capptivate.co/

Interaction Design Ass...
Thank You.
Michael McArthur
@gorfed

Paul Crimi

@paulohnine
Upcoming SlideShare
Loading in …5
×

HTML5 Meetup | Back to Basics: Wireframing & Planning

1,640 views
1,507 views

Published on

This is the keynote presentation from the HTML5 Meetup in Toronto, CA that took place on February 27, 2014.

Planning your projects at the very beginning can be a fun yet daunting task. Showing clients early concepts, prototypes, wireframes and ideas at early stages can help you land the contract, or perhaps see concerns or new features for your own project that wasn’t apparent before. Michael McArthur and Paul Crimi, both of whom are Product Designers at BNOTIONS, are going to walk us through their processes of how they begin a project, what resources they use, and what goes on in their minds as they get everything off the ground.

Published in: Design
0 Comments
8 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,640
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
65
Comments
0
Likes
8
Embeds 0
No embeds

No notes for slide

HTML5 Meetup | Back to Basics: Wireframing & Planning

  1. 1. Back to Basics: Wireframing & Planning Michael McArthur @gorfed Paul Crimi @paulohnine
  2. 2. planning So, you want to create your own digital product…
  3. 3. planning Here are a few things you should know:
  4. 4. what is IA? Information Architecture is:
  5. 5. what is IA? Grouping of content so that it can be presented in a logical order.
  6. 6. what is IA? Creation of clear and consistent navigation that allows the user to easily find the content they are looking for.
  7. 7. what is IA? Clear and visible content hierarchy on each page or screen.
  8. 8. why is content hierarchy important? #1 UX rule: ! Don’t make me think
  9. 9. when approaching IA: Always ask yourself: ! · What must users know first? · Which actions do I want them to take? · How can I persuade them to take those actions? · How can I make the user feel good about the action they just took?
  10. 10. action funnel welcome supporting info user takes action what am I looking at? what do you want me to do & how do I do it? what happened?
  11. 11. IA design Define the end-game for your site/app. ! Define the end-game for each screen.
  12. 12. remember: The best interfaces are invisible. They get out of the way so that the user feels like they achieve their goals without interruption.
  13. 13. App Maps.
  14. 14. what is an app map? A high-level (bird’s eye) overview of all the screens or pages that exist within an application.
  15. 15. what is an app map? 0.2 0.0 0.1 Register Entry Login Forgot Password 1.0 5.0 Stream Legend: 0.1.1 Other User Profile X.X Page 2.0 3.0 4.0 5.0 Explore Take Photo / Video News My Profile 2.1 3.1 5.0 5.1 Explore Results Filter Selection Other User Profile Profile Options 5.0 3.1.1 Other User Profile Confirmation X.X Duplicated Page X.X Conditional Page X.X Not A Physical Page
  16. 16. planning Well then, how do we go about planning a product?
  17. 17. planning UX Methodologies ! · Deep dives · User empathy · Creating the appropriate hooks · Iteration
  18. 18. Nir Eyal’s hook model H K
  19. 19. planning: iterative approach fig 3. the ux design cycle idea learn build data product measure
  20. 20. planning Step 1: ! Outline the key features and/or requirements
  21. 21. planning Step 2: ! Research the competitive landscape ! · Outline key features/requirements · Define differences in feature sets · Establish each product’s brand essence
  22. 22. planning Step 3: ! Create a feature set comparison ! · Identify common and rare features · Outline what works and what doesn’t · Highlight the good, bad & ugly.
  23. 23. planning Step 4: ! Perform a heuristics on any competitor products in market ! · Outline assumption, observations, implications and recommendations · Be harsh :)
  24. 24. planning Step 5: ! Draw a high-level (rudimentary) Application Map ! · Boxes & arrows are your new best friends
  25. 25. planning Step 6: ! Map features to the pages you outlined in the Application Map. ! · Put functionality in the boxes (figure out what goes where).
  26. 26. planning Step 7: ! Make sketchy love to your whiteboard ! · Once satisfied that all requirements and functions have been accounted for, take those words in your boxes and start iterating on your interface. !
  27. 27. planning Step 8: ! Capture your work ! · Take pictures before you erase anything from the whiteboard · Erase everything · Make improvements · Repeat until satisfied
  28. 28. planning Step 9: ! Massage your wires ! · Open your wireframing app of choice and vectorize your whiteboards
  29. 29. Wireframes.
  30. 30. what is a wireframe? A visual representation of an interface that excludes visual design.
  31. 31. what is a wireframe? instagram username location lorem ipsum 13 m username comment lorem ipsum dolor sit amet consectetur. userTwo reply lorem ipsum. Like Comment
  32. 32. why do we need wireframes? To express how our website or app will function.
  33. 33. who is it for? The client. ! To show them what we’re building
  34. 34. who is it for? The dev team. ! To define scope & begin development
  35. 35. who is it for? Our users. ! For user testing
  36. 36. who is it for? Yourself. ! To test and iterate from
  37. 37. fidelity: ! lo-fi vs hi-fi
  38. 38. tools: Kick it old skool. Good ol’ paper and pencil
  39. 39. tools: Quick n’ dirtys whiteboard
  40. 40. tools: Step it up a notch Balsamiq Omnigraffle ! (…and many more)
  41. 41. tools: Hi-fi Illustrator Fireworks Omnigraffle ! (or your vector tool of choice)
  42. 42. ok, let’s solve your problems* (workshop.) *all problems not guaranteed solved.
  43. 43. resources Wireframes, App Maps, Flow Charts & Prototype Resources: App Maps, Flow Charts & Wireframes: ! Prototypes: ! ! ! Omnigraffle http://www.omnigroup.com/omnigraffle/ Omnigraffle Stencils https://www.graffletopia.com/ ! Sketch http://www.bohemiancoding.com/sketch/ ! Adobe Illustrator http://www.adobe.com/ca/products/illustrator.html ! Adobe Fireworks http://www.adobe.com/ca/products/fireworks.html ! Balsamiq http://balsamiq.com/ ! InVision http://www.invisionapp.com/ Axure http://www.axure.com/ ! Origami http://facebook.github.io/origami/ ! UXPin http://uxpin.com/ ! Keynote http://www.apple.com/ca/mac/keynote/ ! Using Keynote To Prototype http://www.lukew.com/ff/entry.asp?1155
  44. 44. resources Recommended Books Don’t Make Me Think Steve Krug Lean UX Jeff Gothelf Envisioning Information Edward R Tufte The Essentials of Interaction Design Alan Cooper The Laws of Simplicity John Maeda Sketching User Experiences Bill Buxton Head First Design Patterns Eric Freeman Mobile First Luke Wroblewski
  45. 45. resources Recommended Links Luke Wroblewski http://www.lukew.com Capptivate http://capptivate.co/ Interaction Design Association http://ixda.org/ The Hipper Element http://thehipperelement.com/ Boxes and Arrows http://boxesandarrows.com/ UX Archive http://uxarchive.com/ UI Patterns http://ui-patterns.com/ UX Porn http://uxporn.uxpin.com/ Pttrns http://pttrns.com/ UX Magazine http://uxmag.com/ UI Parade http://www.uiparade.com/ Mobile Patterns http://www.mobile-patterns.com/ ! ! ! ! ! ! ! ! ! ! !
  46. 46. Thank You. Michael McArthur @gorfed Paul Crimi @paulohnine

×