Module 07: Wireframes
3 likes1,434 views
This document discusses wireframes and provides guidance on how to create them. It begins by explaining what wireframes are not, such as prototypes, visual designs, or marketing materials. It then describes what wireframes are, including low-fidelity visual representations of a website's layout and structure that are free of design elements. The document provides tips for creating wireframes, such as getting inspired, determining your process, choosing tools, using grids and blocks, and adding typographic hierarchy. It cautions that wireframes should remain flexible and not dictate the final design.
Module 07: Wireframes
- 1. Wireframes It’s important to be aware of what wireframes are NOT and should not be used as. !
- 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. 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. Wireframes NOT ! —"Got it. Done. Boom." http://ma.tt/2010/11/one-point-oh/
- 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. 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. Wireframes NOT ! Compounding the issue: many wireframing tools also allow you to create interactive prototypes.
- 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. 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. 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. 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. 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. Wireframes Wireframes DO: ! Show where design elements will appear on the page ! Help us test/refine navigation (even submenus) ! Help define scope
- 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. 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. 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. 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. 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. Wireframes: How To Step 1: Get inspired ! UICloud I Heart Wireframes ! ! ! http://www.w3.org/WAI/eval/Overview.html http://wireframes.tumblr.com
- 20. Wireframes: How To Step 1: Get inspired ! Wirify Browser Bookmarklet ! ! ! http://www.wirify.com/
- 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. 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. Wireframes: How To Step 3: Choose your quiver ! Balsamiq UXPin ! ! ! http://balsamiq.com http://uxpin.com/
- 24. Wireframes: How To Step 3: Choose your quiver ! OmniGraffle Axure RP ! ! ! http://www.omnigroup.com/omnigraffle/ http://axure.com/
- 25. Wireframes: How To Step 3: Choose your quiver ! Flairbuilder Keynote/PowerPoint ! ! ! http://www.flairbuilder.com
- 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. Wireframes: How To Step 3: Choose your quiver ! "Traditional" graphics tools: Photoshop Illustrator Fireworks InDesign ! !
- 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. Wireframes: How To Step 4: Grid it or block it ! ! ! ! ! !
- 30. Wireframes: How To Step 4: Grid it ! ! ! ! ! You can create responsive grids using http://responsify.it
- 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. Wireframes: How To Step 4: or both ! ! !
- 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. Wireframes: How To Step 5: Hierarchy through typography ! You pay more attention to this than this or this or this ! !
- 35. Wireframes: How To Step 5: Hierarchy through typography ! ! ! !
- 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. Wireframes: How To Step 6 (optional): Go hi-fi !
- 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. 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. 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. Patterns PATTERNS ! It’s not just paisley and plaid.
- 42. Patterns PATTERNS ! Unfortunately, there can be multiple meanings. ! Patterns as templates, design language:
- 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. 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. Patterns ANTI-PATTERNS ! Type: Clickable elements which don’t appear clickable ! Example:
- 48. Patterns ANTI-PATTERNS ! Type: Content hidden below the fold ! Example:
- 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
- 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. Patterns There are lots of "how-to" texts on this
- 54. Wireframing Let’s do this thing.
- 55. Next up: Responsive web design [email protected] twitter web