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 step in development, not an end. !

Wireframes are part of a process, and exist to support the next step.

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

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. Include graphics, typography, and other page elements.

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). !

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 ideas aren’t finished or precious

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

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

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

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

Wireframes

Wireframes DO: !Show where design elements will appear on the page !Help us test/refine navigation (even submenus) !Help define scope

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

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)

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

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.

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.) !!!

Wireframes: How To

Step 1: Get inspired ! UICloud I Heart Wireframes !!!

http://www.w3.org/WAI/eval/Overview.html http://wireframes.tumblr.com

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? — sketch —> wireframe —> visual design —> code? — wireframe —> interactive prototype —> code? — etc. !— What’s your story? !(Bonus round: What do these have in common?)

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

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://axure.com/

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://www.hotgloo.com/ http://www.webflow.com/

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/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

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, seeing information hierarchy when working from wireframe

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 and clients to present. !Relative positioning reflects information hierarchy.

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 no longer in drafting or experimenting mode. Perform the iteration cycles (feedback <-> wireframing) quickly !— or instead go to interactive prototyping !

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 you can wireframe "in the browser" !— or you can use frameworks such as ZURB Foundation, Twitter Bootstrap, Skeleton

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/

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.

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/ !http://patterntap.com !http://ui-cloud.com !http://www.mobile-patterns.com !http://bradfrost.github.io/this-is-responsive/

Patterns

ANTI-PATTERNS

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

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;}.

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 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

Patterns

DARK PATTERNS

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.

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