Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
FUNDAMENTALS
THE AGENDA

Survey Results
Defining the Tool
Case Studies

lO Best Practices
love wireframing! 

lt’s OK,  not

my favorite. 

General Survey. 
5 1 l2 responses. 
Axure Pl"l0'f°$l'1°P Illustrator
Pen...
DEFINING THE TOOL

Wireframing:  lt’s ultimate purpose is to
create an ideal space for conversations
about design solution...
l3’E‘. "‘. ’ CASE STUDIES

New

~‘e"er: 'c? a:'liei'o l Relic.  a‘t~ Iwonairotto

dl) DIGITAL TELEPATHY
A FEW CASE STUDIES

in your words.  describe the client and main

ooiochve or the prcnoct

Ruckus wanted to create a MVP a...
A FEW CASE STUDIES

CF10 surveyed on a success scale OF 1-10:

Quantity Response
2 7
4 8
2 9
2 10

d[) DIGITAL TELEPATHY
10 BEST PRACTICES

So how do you know it your wiretrames are eftectively driving
the design conversation?  The best way to...
Don’t use color.  IF you do,  use it intentionally. 

Color is powerful!  As such,  it can be distracting.  IF you must us...
Consistency is key. 

Your wireFrames are meant to Facilitate,  not distract.  One oF the best ways to

do this is to be c...
Use real content. 

IF you don’t have content,  write it.  Writing is a design skill,  it will only help

you understand t...
Never wire alone. 

All we’re talking about here is sharing your ideas.  When we release ideas, 
their potential For great...
Communicate Functionalities 8: interactions statically. 

WireFraming and prototyping are amazing tools,  but they serve v...
Set clear expectations. 

Talk with the client about how you are using wireFraming as a tool.  IF a
client’s expectations ...
Avoid unnecessary barriers to success. 

IF you’re using a program like Axure,  don’t let the program be a barrier to
sett...
/l‘. f'.  TIE TOP 4 TIPS

Masters
Adapfive Views
Alignment Tools

Page Styles
Learn more:  www. axure. com/ learn

db) DIGI...
Practice non-attachment. 

Don’t get too attached to your wires,  they’re not glamorous portFolio
pieces.  With rapid idea...
Be selective and keep it simple. 

When we have lots oF ideas,  it’s easy to try and make them all work
together or conFus...
Control the conversation. 

A beautiFul conversation doesn’t happen by itselF or even with the most
proFoundly perFect wir...
THE CREATIVE PROCESS

Non-Linear vs.  Linear

Good designers spend time determining the right tools to solve design
proble...
ABOUT DIGITAL TELEPATHY

a. )

Digital Telepathy is a ux and product design shop based in san
Diego that believes in focus...
Upcoming SlideShare
Loading in …5
×

Wireframing Fundamentals

95,922 views

Published on

We surveyed our team for wireframing techniques, tools, and case studies.

The ultimate purpose of wireframing is to create an ideal space for conversations about design solutions, while supporting iterations and driving rapid ideation.

10 Wireframing Best Practices:

1 - Don't use color. If you do, use it intentionally.

2 - Consistency is key.

3 - Use real content.

4 - Never wire alone.

5. Communication functionalities & interactions statically.

6. Set clear expectations.

7. Avoid unnecessary barriers to success.

8. Practice non-attachment.

9. Be selective and keep it simple.

10. Control the conversation.

Published in: Design

Wireframing Fundamentals

  1. 1. FUNDAMENTALS
  2. 2. THE AGENDA Survey Results Defining the Tool Case Studies lO Best Practices
  3. 3. love wireframing! lt’s OK, not my favorite. General Survey. 5 1 l2 responses. Axure Pl"l0'f°$l'1°P Illustrator Pen/ Paper whiteboard No Response 9 labsolutely 81 dlz DIGITAL TELEPATHY
  4. 4. DEFINING THE TOOL Wireframing: lt’s ultimate purpose is to create an ideal space for conversations about design solutions, while supporting iterations and driving rapid ideation. dl) DIGITAL TELEPATHY
  5. 5. l3’E‘. "‘. ’ CASE STUDIES New ~‘e"er: 'c? a:'liei'o l Relic. a‘t~ Iwonairotto dl) DIGITAL TELEPATHY
  6. 6. A FEW CASE STUDIES in your words. describe the client and main ooiochve or the prcnoct Ruckus wanted to create a MVP at their website builder application for regional candidates Be agile without cornprcrnising transparency or governance Give your team the tools they want Adopt cost practices that evolve with your needs. scale your success across the enterpneo - all in one simple. eiegani solution CLinot (Co| labNa| ) makes a product (TaamForge) that is enterpnse sortware that rolls in iunoiiorialiiy oi Tre| lolJira/ Rally with SCM tools like ciusvN_ and code review options like Gerrii client needed rapid skinning of existing app experience with a potential for some UX atwroach ooioctivo oi the project in phase 1 was to deliver a visual ropainl or their enure inlarlaca. Build an application to allow developers to manage multiple applications across multiple clouds at the entarpnse level client was a great chanty-cohlno group that was pig on making a glooal impact on the world They were very pig on inspiration. wail loamed. had a strong ux member on lheirteam. and really respecued the or process Main ooiective oi the project was to create an Inspiration-ceritnl: marketing site that had a viral loop component in it The site was meant to keep people engaged and keep peoole inspired to do good. whether with Everydayl-lam or lust on their own They weren't super pig on metrics or conversions ror their objectives oh yeah. and got it all done in the limo irarne pl 2 5 months How would you best dascnco the protect hmellns? Moderate to lasbpaoad Moderate to iascpaood Moderate to fast-paced Extremely last-paced slow. no mayor ume related Dressure Extremely lasipaced how would you best dosorioo yourseii7 Been doing it. bt. lt still learning Been doing it, but sull reaming Been doing II. but still learning Bean around the block 3 low times Been doing it. but still reaming Been around the block a few times overall. pre visual design phase. how did you ilesh out the conceptual layouts and ux or the protect what is it that made you turn to wlreframlrig7 I wanted to deal with wires wilhcul discounting design—lhars why I moved to indosigh to deliver many wlrolramas at the same pace but also be at 90% tidaiity lmretraming as a way to show and tell the UX ul solutions structure and layout For this protect. it was a lot or reskinning. but wirelramihg helped to ensure that our locus was in ion right place There was low»level cleaning up that needed to happen in the appllcaiton. so wirarraming updated Uls was extremely irnponant. Bralrlstormed and whiteooarded tons or ul layouts vlnrairaming was utilized when we tned to convey ns would translate lrom an interaction persvuciiva . esp since this is an also experience and requires many visuals to be how high delity de demonstrated with prototyping we were establishing the visual design at the same limo we were prototyping, so it made the most sense to wire in Axure lo locus on the lunciion before the Iomt Lots ol wirarrarning, lots or sketming. lots or collaborating with John (day) one or the most collaborative oo. wirihg experiences I've had at DT we turned to wiroiraming to help layout structure that would allow us to make quick design decisions on content stralegv (because the site's content was nonnexistent) and also to give John a great parallel start to dovving the site how did when help Dmgress the lxolect’ it was cnlicai to the success or the nroiect They helped tell the story through high-fidelity interactions Get conceptual t>uy~in trim the client prior to purning time on designs that wouldn't be EDDIOVBG They helped convey complex iriteraciions and concepts They also allowed us to convey execution at a development level withoui actual development it was a working prototype so we could test and iterate and truly $68 now WIS Droduct would work out guick approval. was a great tool lor ocilaporaiion wiih days on how to develop the marketing plallorm, was great lor keeping us cohsisiehiwiih our ideas and creating a seamless expehonce. dl) DIGITAL TELEPATHY
  7. 7. A FEW CASE STUDIES CF10 surveyed on a success scale OF 1-10: Quantity Response 2 7 4 8 2 9 2 10 d[) DIGITAL TELEPATHY
  8. 8. 10 BEST PRACTICES So how do you know it your wiretrames are eftectively driving the design conversation? The best way to tell it wiretrames are hitting the mark is to take a step back and ask this question: When I share my wireframes, are the conversations about the execution OR about the experience I’m creating? dt) DIGITAL TELEPATHY
  9. 9. Don’t use color. IF you do, use it intentionally. Color is powerful! As such, it can be distracting. IF you must use color, use it sparingly and consistently and choose a color not in the clients’ pallette to ensure your discussion remains Focused on the experience you are creating and not the visual design solutions to come. dl> DIGITAL TELEPATHY
  10. 10. Consistency is key. Your wireFrames are meant to Facilitate, not distract. One oF the best ways to do this is to be consistent with things like typography, spacing, and delivery. db) DIGITAL TELEPATHY
  11. 11. Use real content. IF you don’t have content, write it. Writing is a design skill, it will only help you understand the client and story better. db) DIGITAL TELEPATHY
  12. 12. Never wire alone. All we’re talking about here is sharing your ideas. When we release ideas, their potential For greatness doubles. OFten times, you’re not the expert, so et over our e o and be reat to ether. 3 Y ‘3 Q 3 db) DIGITAL TELEPATHY
  13. 13. Communicate Functionalities 8: interactions statically. WireFraming and prototyping are amazing tools, but they serve very diFFerent purposes. Prototyping is more time intensive than wireFraming. Key Functionalities or interactions can be easily communicated statically. Ask the client what they need. IF user testing is an important part oF the project, prototyping may get you Far. The key is to know when you’ve crossed over to prototyping and be deliberate about it. db) DIGITAL TELEPATHY
  14. 14. Set clear expectations. Talk with the client about how you are using wireFraming as a tool. IF a client’s expectations are not met, it doesn’t matter how brilliant your work is, the will not hear ou. The best wa to roactivel avoid Failed ex ectations is Y Y Y P Y P to communicate them clearly, early, and oFten. db) DIGITAL TELEPATHY
  15. 15. Avoid unnecessary barriers to success. IF you’re using a program like Axure, don’t let the program be a barrier to setting your ideas Free. Take the time to learn the basics or choose a more natural medium like sketching or whiteboarding. db) DIGITAL TELEPATHY
  16. 16. /l‘. f'. TIE TOP 4 TIPS Masters Adapfive Views Alignment Tools Page Styles Learn more: www. axure. com/ learn db) DIGITAL TELEPATHY
  17. 17. Practice non-attachment. Don’t get too attached to your wires, they’re not glamorous portFolio pieces. With rapid ideation, we must be willing to entertain change and pivot oFten. db) DIGITAL TELEPATHY
  18. 18. Be selective and keep it simple. When we have lots oF ideas, it’s easy to try and make them all work together or conFuse elements oF one idea with another. Give each idea their own platForm. db) DIGITAL TELEPATHY
  19. 19. Control the conversation. A beautiFul conversation doesn’t happen by itselF or even with the most proFoundly perFect wires. Support your wireFrames by controlling the conversation. IF things get oFF track, bring it back around. Don’t be aFraid to interrupt politely and ask meaningFuI open—ended questions. db) DIGITAL TELEPATHY
  20. 20. THE CREATIVE PROCESS Non-Linear vs. Linear Good designers spend time determining the right tools to solve design problems. Use oF a great tool at the wrong time can be detrimental to a prolect. Like other UX practices, wireFraming exists in a non—linear plane. Think oF it as tool in your tool belt, grab it when you need it; use it in combination and in no particular order. Trust your design intuition and be Fearless with your ideas. db) DIGITAL TELEPATHY
  21. 21. ABOUT DIGITAL TELEPATHY a. ) Digital Telepathy is a ux and product design shop based in san Diego that believes in focusing on the user first. For over i2 years. DT has worked with entrepreneurs like Eric Rles and Tim Ferris. and successful missiori—driven startups and brands like New Relic. Manfrotto. and Pivotal. DT strives to make the web a better place by removing friction and focusing on simplicity in design Learn more at ir—iii; i»ri—, ,i l 'n FOLLOW US: ABOUT DANA LARSON a*““ , a5. 'ér :5 Dana has a bachelors degree in comparative Literature from uc irvine while in school she discovered a passion for solving problems through design she surrounded herselr with designers of all klrldsi critical thinkers. tattoo artists, and creative pioneers. She complemented her study of design with the practice of Yoga and an interest in Sustainable Business Practices. Now, after years of discovery, she still feels as though she is barely scratching the surface of design and its potential to drive the creation of great products and businesses. whether shes reviewing wireframes, designing interfaces. brainstorming video concepts. helping a friend with her small business logo and brand. or wrapping her brain around the umbrella of user Experience methodologies. her obyective is always the same; be outrageously creative 8t build great things that are useful and inspiring db) DIGITAL TELEPATHY

×