Wireframes
It’s important to be aware of what wireframes are
NOT and should not be used as.
!
Wireframes
It’s possible people will try to misuse wireframes.
It’s your responsibility to maintain focus on them
as a ste...
Wireframes
NOT
!
— prototyping
— visual design (http://ux.stackexchange.com/
questions/18069/how-to-work-with-visual-desig...
Wireframes
NOT
!
—"Got it. Done. Boom."
http://ma.tt/2010/11/one-point-oh/
Wireframes
NOT
!
Mockups: generally focus on visual design elements, are
often very close to actual final site design. Incl...
Wireframes
NOT
!
Prototypes: Semi-functional. Have the the start of a
functional user interface.Ability to click, simulate...
Wireframes
NOT
!
Compounding the
issue: many
wireframing tools also
allow you to create
interactive prototypes.
Wireframes
Wireframes ARE:
!
A foundation on which we build
A blueprint for where information will go
A reminder that new ...
Wireframes
Wireframes ARE:
!
A low-fidelity visual
representation of a website’s
layout design.
!
Represents the basic page...
Wireframes
Wireframes ARE:
!
Free of color, particular font
choices, logos, or "live"
design elements
!
A tool to help us ...
A Quick Note on
Greeking
Though there is not universal
agreement, it’s an accepted
practice is to use greeked
text as a pl...
Wireframes
Wireframes ARE:
!
Low fidelity so we don’t get
hung up on "hm, maybe 5px
to the right" or "I don’t like
that sha...
Wireframes
Wireframes DO:
!
Show where design
elements will appear on
the page
!
Help us test/refine
navigation (even
subme...
Wireframes
Wireframes DO:
!
Help evaluate page layout
against usability best
practices
!
!
!
Help us all get on the
same p...
Wireframes
Recapping the case for low fidelity
!
— Helps teams avoid premature conversations about surface
issues like colo...
Wireframes
Recapping the case for low fidelity
!
— Keeps the focus on user interaction (works or fails)
!
— Can clearly com...
Wireframes
AND:
!
It’s the UX team’s (or person’s) job and
responsibility to communicate this and put it in
context to the...
Wireframes: How To
Step 1: Get inspired
!
(Pro tip: Not all work you’ll see out in the wild may be
good work… build your c...
Wireframes: How To
Step 1: Get inspired
!
UICloud I Heart Wireframes
!
!
!
http://www.w3.org/WAI/eval/Overview.html http:/...
Wireframes: How To
Step 1: Get inspired
!
Wirify Browser Bookmarklet
!
!
!
http://www.wirify.com/
Wireframes: How To
Step 2: Figure out your process
!
— sketch —> code?
— sketch —> wireframe —> high-fidelity —> code?
— sk...
Wireframes: How To
Step 2: Figure out your process
!
— think about your strengths, skills, and interests
!
— you may need ...
Wireframes: How To
Step 3: Choose your quiver
!
Balsamiq UXPin
!
!
!
http://balsamiq.com http://uxpin.com/
Wireframes: How To
Step 3: Choose your quiver
!
OmniGraffle Axure RP
!
!
!
http://www.omnigroup.com/omnigraffle/ http://axur...
Wireframes: How To
Step 3: Choose your quiver
!
Flairbuilder Keynote/PowerPoint
!
!
!
http://www.flairbuilder.com
Wireframes: How To
Step 3: Choose your quiver
!
Web-based tools:
http://www.mockflow.com/
https://gomockingbird.com/
http:/...
Wireframes: How To
Step 3: Choose your quiver
!
"Traditional" graphics tools:
Photoshop
Illustrator
Fireworks
InDesign
!
!
Wireframes: How To
Step 3: Choose your quiver
!
Free and paid sketching tools:
http://designshack.net/articles/inspiration...
Wireframes: How To
Step 4: Grid it or block it
!
!
!
!
!
!
Wireframes: How To
Step 4: Grid it
!
!
!
!
!
You can create responsive grids using http://responsify.it
Wireframes: How To
Step 4: Block it
!
Gray boxes help give a
leg up on information
hierarchy when
creating wireframe,
seei...
Wireframes: How To
Step 4: or both
!
!
!
Wireframes: How To
Step 4: or both
!
Based on your research, you
should have a sense of
what’s important for users
to find ...
Wireframes: How To
Step 5: Hierarchy through typography
!
You pay more attention to this
than this
or this
or this
!
!
Wireframes: How To
Step 5: Hierarchy through typography
!
!
!
!
Wireframes: How To
Step 6 (optional): Go hi-fi
!
— Increment
!
— at visual/code stage you want to be in polishing mode
and ...
Wireframes: How To
Step 6 (optional): Go hi-fi
!
Wireframes
Alternatives
!
— if you’re a Photoshop ace, maybe wireframe in that
!
— if you’re a Javascript/CSS ace, maybe y...
Wireframes
CAVEAT
!
Make sure everybody understands that each step of the
process exists to support the next one, not dict...
Wireframes
Huddle? Break!
!
Let’s take a break to ponder all this, keeping in mind the
project of building a site for a ne...
Patterns
PATTERNS
!
It’s not just paisley and plaid.
Patterns
PATTERNS
!
Unfortunately, there can be multiple
meanings.
!
Patterns as templates, design
language:
Patterns
PATTERNS
!
http://www.smashingmagazine.com/2009/06/15/40-
helpful-resources-on-user-interface-design-patterns/
!
...
Patterns
ANTI-PATTERNS
Patterns
ANTI-PATTERNS
!
"a frequently used design pattern that either outright
doesn’t work or is counter-productive"
!
—...
Patterns
ANTI-PATTERNS
!
Type: Clickable elements which don’t appear clickable
!
Can include:
— Buttons which are too smal...
Patterns
ANTI-PATTERNS
!
Type: Clickable elements which don’t appear clickable
!
Example:
Patterns
ANTI-PATTERNS
!
Type: Content hidden below the fold
!
Example:
Patterns
ANTI-PATTERNS
!
Type: Content covering content
Example: Drop-down menus on MPICT.org
!
Type: Users want to batch ...
Patterns
DARK PATTERNS
Patterns
DARK PATTERNS
!
—"…dirty tricks designers use to make people do stuff"
— Harry Brignull, www.darkpatterns.org
!
—...
Patterns
There are lots of "how-to" texts on this
Patterns
DARK PATTERNS
!
!
http://alistapart.com/article/dark-patterns-deception-vs.-honesty-in-ui-design
Wireframing
Let’s do this thing.
Next up:
Responsive web design
ddt@twoangstroms.com
twitter web
Upcoming SlideShare
Loading in …5
×

Module 07: Wireframes

1,079 views

Published on

Module 07 in the one-week intensive for community college instructors, offered by MPICT.org.

Published in: Design, Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,079
On SlideShare
0
From Embeds
0
Number of Embeds
12
Actions
Shares
0
Downloads
21
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Module 07: Wireframes

  1. 1. Wireframes It’s important to be aware of what wireframes are NOT and should not be used as. !
  2. 2. Wireframes It’s possible people will try to misuse wireframes. It’s your responsibility to maintain focus on them as a step in development, not an end. ! Wireframes are part of a process, and exist to support the next step.
  3. 3. Wireframes NOT ! — prototyping — visual design (http://ux.stackexchange.com/ questions/18069/how-to-work-with-visual-designers- who-treat-wireframes-as-literal-graphic-sugges) — proofs of your concept — marketing materials
  4. 4. Wireframes NOT ! —"Got it. Done. Boom." http://ma.tt/2010/11/one-point-oh/
  5. 5. Wireframes NOT ! Mockups: generally focus on visual design elements, are often very close to actual final site design. Include graphics, typography, and other page elements.
  6. 6. Wireframes NOT ! Prototypes: Semi-functional. Have the the start of a functional user interface.Ability to click, simulates the way the site will work. ! Wireframes will miss if there’s an interaction-related issue (which could be a showstopper). !
  7. 7. Wireframes NOT ! Compounding the issue: many wireframing tools also allow you to create interactive prototypes.
  8. 8. Wireframes Wireframes ARE: ! A foundation on which we build A blueprint for where information will go A reminder that new ideas aren’t finished or precious
  9. 9. Wireframes Wireframes ARE: ! A low-fidelity visual representation of a website’s layout design. ! Represents the basic page layout structure and navigational scheme of the site, as well as major site components
  10. 10. Wireframes Wireframes ARE: ! Free of color, particular font choices, logos, or "live" design elements ! A tool to help us learn about the site or app’s architecture
  11. 11. A Quick Note on Greeking Though there is not universal agreement, it’s an accepted practice is to use greeked text as a placeholder. It shows where content will go, how the page will look with content (not too busy nor too unbalanced). ! And it can be fun. http://favbulous.com/post/973/20-funny-lorem- ipsum-dummy-text-generators
  12. 12. Wireframes Wireframes ARE: ! Low fidelity so we don’t get hung up on "hm, maybe 5px to the right" or "I don’t like that shade of blue" ! Can even be really, really low in fidelity to start
  13. 13. Wireframes Wireframes DO: ! Show where design elements will appear on the page ! Help us test/refine navigation (even submenus) ! Help define scope
  14. 14. Wireframes Wireframes DO: ! Help evaluate page layout against usability best practices ! ! ! Help us all get on the same page http://www.w3.org/WAI/eval/Overview.html
  15. 15. Wireframes Recapping the case for low fidelity ! — Helps teams avoid premature conversations about surface issues like color or "pixel-perfect" ! — Instead focuses discussion on correct and complete content and functionality ! — Keeps the focus on user interaction (works or fails)
  16. 16. Wireframes Recapping the case for low fidelity ! — Keeps the focus on user interaction (works or fails) ! — Can clearly communicate how features will function (note: you need to be active in presenting) ! — Makes it easier to "kill your darling"/update ! — Everything’s easier to change if code isn’t committed
  17. 17. Wireframes AND: ! It’s the UX team’s (or person’s) job and responsibility to communicate this and put it in context to the boss/client/external team/etc.
  18. 18. Wireframes: How To Step 1: Get inspired ! (Pro tip: Not all work you’ll see out in the wild may be good work… build your critical eye and facilities.) ! ! !
  19. 19. Wireframes: How To Step 1: Get inspired ! UICloud I Heart Wireframes ! ! ! http://www.w3.org/WAI/eval/Overview.html http://wireframes.tumblr.com
  20. 20. Wireframes: How To Step 1: Get inspired ! Wirify Browser Bookmarklet ! ! ! http://www.wirify.com/
  21. 21. Wireframes: How To Step 2: Figure out your process ! — sketch —> code? — sketch —> wireframe —> high-fidelity —> code? — sketch —> wireframe —> visual design —> code? — wireframe —> interactive prototype —> code? — etc. ! —What’s your story? ! (Bonus round: What do these have in common?)
  22. 22. Wireframes: How To Step 2: Figure out your process ! — think about your strengths, skills, and interests ! — you may need to try many times to figure out what works best for you ! — maybe different processes work for different projects
  23. 23. Wireframes: How To Step 3: Choose your quiver ! Balsamiq UXPin ! ! ! http://balsamiq.com http://uxpin.com/
  24. 24. Wireframes: How To Step 3: Choose your quiver ! OmniGraffle Axure RP ! ! ! http://www.omnigroup.com/omnigraffle/ http://axure.com/
  25. 25. Wireframes: How To Step 3: Choose your quiver ! Flairbuilder Keynote/PowerPoint ! ! ! http://www.flairbuilder.com
  26. 26. Wireframes: How To Step 3: Choose your quiver ! Web-based tools: http://www.mockflow.com/ https://gomockingbird.com/ http://www.hotgloo.com/ http://www.webflow.com/
  27. 27. Wireframes: How To Step 3: Choose your quiver ! "Traditional" graphics tools: Photoshop Illustrator Fireworks InDesign ! !
  28. 28. Wireframes: How To Step 3: Choose your quiver ! Free and paid sketching tools: http://designshack.net/articles/inspiration/5-fantastic- notebooks-and-sketchbooks-for-designers/ ! Sketching blanks: http://www.jankoatwarpspeed.com/free-sketching- wireframing-kit/ http://benmartineau.com/works/grids-for- sketching.php
  29. 29. Wireframes: How To Step 4: Grid it or block it ! ! ! ! ! !
  30. 30. Wireframes: How To Step 4: Grid it ! ! ! ! ! You can create responsive grids using http://responsify.it
  31. 31. Wireframes: How To Step 4: Block it ! Gray boxes help give a leg up on information hierarchy when creating wireframe, seeing information hierarchy when working from wireframe
  32. 32. Wireframes: How To Step 4: or both ! ! !
  33. 33. Wireframes: How To Step 4: or both ! Based on your research, you should have a sense of what’s important for users to find and clients to present. ! Relative positioning reflects information hierarchy.
  34. 34. Wireframes: How To Step 5: Hierarchy through typography ! You pay more attention to this than this or this or this ! !
  35. 35. Wireframes: How To Step 5: Hierarchy through typography ! ! ! !
  36. 36. Wireframes: How To Step 6 (optional): Go hi-fi ! — Increment ! — at visual/code stage you want to be in polishing mode and no longer in drafting or experimenting mode. Perform the iteration cycles (feedback <-> wireframing) quickly ! — or instead go to interactive prototyping !
  37. 37. Wireframes: How To Step 6 (optional): Go hi-fi !
  38. 38. Wireframes Alternatives ! — if you’re a Photoshop ace, maybe wireframe in that ! — if you’re a Javascript/CSS ace, maybe you can wireframe "in the browser" ! — or you can use frameworks such as ZURB Foundation, Twitter Bootstrap, Skeleton
  39. 39. Wireframes CAVEAT ! Make sure everybody understands that each step of the process exists to support the next one, not dictate what it should be.The wireframe should remain a tool that helps with the creation of a higher fidelity mockup or prototype, not a perfect blueprint for it.This means that no part of the wireframe should be off limits when it comes to changes. ! http://www.attackofdesign.com/why-wireframes-can-hurt-your-project/
  40. 40. Wireframes Huddle? Break! ! Let’s take a break to ponder all this, keeping in mind the project of building a site for a new Oakland Farmers’ Market based on all our user research (including the stakeholder needs). Break into teams, share what processes work for you. ! 15 minutes.
  41. 41. Patterns PATTERNS ! It’s not just paisley and plaid.
  42. 42. Patterns PATTERNS ! Unfortunately, there can be multiple meanings. ! Patterns as templates, design language:
  43. 43. Patterns PATTERNS ! http://www.smashingmagazine.com/2009/06/15/40- helpful-resources-on-user-interface-design-patterns/ ! http://patterntap.com ! http://ui-cloud.com ! http://www.mobile-patterns.com ! http://bradfrost.github.io/this-is-responsive/
  44. 44. Patterns ANTI-PATTERNS
  45. 45. Patterns ANTI-PATTERNS ! "a frequently used design pattern that either outright doesn’t work or is counter-productive" ! — Sarah Kahn, in http://webdesign.tutsplus.com/articles/ the-world-of-ux-anti-patterns--webdesign-12198
  46. 46. Patterns ANTI-PATTERNS ! Type: Clickable elements which don’t appear clickable ! Can include: — Buttons which are too small. —Text links which aren’t visually distinct — Buttons which are too flat to cue users that they are in fact buttons —The absence of hover states can also be problematic, including failure to use {cursor: pointer;}.
  47. 47. Patterns ANTI-PATTERNS ! Type: Clickable elements which don’t appear clickable ! Example:
  48. 48. Patterns ANTI-PATTERNS ! Type: Content hidden below the fold ! Example:
  49. 49. Patterns ANTI-PATTERNS ! Type: Content covering content Example: Drop-down menus on MPICT.org ! Type: Users want to batch an action, but nope Example: A long list of items with actions for each item (e.g. edit or delete), but user has no way to select multiple items ! Type: Oh, you entered some data? Took care of that for you. Example: Forms that delete user-entered data on page reload
  50. 50. Patterns DARK PATTERNS
  51. 51. Patterns DARK PATTERNS ! —"…dirty tricks designers use to make people do stuff" — Harry Brignull, www.darkpatterns.org ! — User interfaces designed to trick people ! —And these test well! They’re effective. Just at the expense (sometimes literal) of users: trying to end a gym membership. ! — Not cool, man. Not cool.
  52. 52. Patterns There are lots of "how-to" texts on this
  53. 53. Patterns DARK PATTERNS ! ! http://alistapart.com/article/dark-patterns-deception-vs.-honesty-in-ui-design
  54. 54. Wireframing Let’s do this thing.
  55. 55. Next up: Responsive web design ddt@twoangstroms.com twitter web

×