• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
How To Communicate Wireframes
 

How To Communicate Wireframes

on

  • 2,083 views

Session contribution #uxcampvienna #wudvie

Session contribution #uxcampvienna #wudvie

Statistics

Views

Total Views
2,083
Views on SlideShare
1,966
Embed Views
117

Actions

Likes
3
Downloads
0
Comments
0

7 Embeds 117

http://blog.hotgloo.com 87
http://dex.io 18
http://paper.li 8
http://a0.twimg.com 1
http://us-w1.rockmelt.com 1
http://www.linkedin.com 1
https://twitter.com 1
More...

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-ShareAlike LicenseCC Attribution-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • \nThe most benefit of presenting today is probably that I can skip the slides where I have to explain\nwhat wireframes are and come straight to the interactive part of wireframing\n\n
  • so that’s me \n\ni’m also on the twitters if you want to get in touch.\n\nif you are tweeting please use the hashtag #touchpoints\n
  • and I’m the cofounder of HotGloo a webbased wireframe app where we focus on providing the best experience when it comes to web-based, collaborative wireframing and prototyping.\n\nwe provided a promo code for each of you so you can check out hotgloo and test it two months for free. if you like. \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Wireframes help us to get a clear picture of what information will be needed on each page before design.\nthe help us to spend time and really focus on what each page’s purpose is. \n\nThey are supportive when we need a clear look at how a site will react to various visitors without the clutter of color or design elements.\n\nWireframes are also helpful when we need give designers a clear view of what needs to be designed.\n\nand they can help us to connect to our stakeholders and get clients deeply involved in the planning process.\n\n
  • Wireframes help us to get a clear picture of what information will be needed on each page before design.\nthe help us to spend time and really focus on what each page’s purpose is. \n\nThey are supportive when we need a clear look at how a site will react to various visitors without the clutter of color or design elements.\n\nWireframes are also helpful when we need give designers a clear view of what needs to be designed.\n\nand they can help us to connect to our stakeholders and get clients deeply involved in the planning process.\n\n
  • Wireframes help us to get a clear picture of what information will be needed on each page before design.\nthe help us to spend time and really focus on what each page’s purpose is. \n\nThey are supportive when we need a clear look at how a site will react to various visitors without the clutter of color or design elements.\n\nWireframes are also helpful when we need give designers a clear view of what needs to be designed.\n\nand they can help us to connect to our stakeholders and get clients deeply involved in the planning process.\n\n
  • Wireframes help us to get a clear picture of what information will be needed on each page before design.\nthe help us to spend time and really focus on what each page’s purpose is. \n\nThey are supportive when we need a clear look at how a site will react to various visitors without the clutter of color or design elements.\n\nWireframes are also helpful when we need give designers a clear view of what needs to be designed.\n\nand they can help us to connect to our stakeholders and get clients deeply involved in the planning process.\n\n
  • Wireframes help us to get a clear picture of what information will be needed on each page before design.\nthe help us to spend time and really focus on what each page’s purpose is. \n\nThey are supportive when we need a clear look at how a site will react to various visitors without the clutter of color or design elements.\n\nWireframes are also helpful when we need give designers a clear view of what needs to be designed.\n\nand they can help us to connect to our stakeholders and get clients deeply involved in the planning process.\n\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • The feature war (funktions krieg)\n- html export\n- templates\n- make websites?\n
  • \n
  • \n
  • \n
  • \n
  • Vision, Layout, Content and images, priority, navigation, functionality\n
  • Vision, Layout, Content and images, priority, navigation, functionality\n
  • Vision, Layout, Content and images, priority, navigation, functionality\n
  • Vision, Layout, Content and images, priority, navigation, functionality\n
  • Vision, Layout, Content and images, priority, navigation, functionality\n
  • Vision, Layout, Content and images, priority, navigation, functionality\n
  • Who is your audience?\n\nDev Team: Designers, Developers (front, backend), Project Managers, Business Analyst, USer Experience Peers\nSpecialists: SEO teams, Content and copy team, analytics specialists, accessability teams\nRelated Business Functions: product managers, brand and makreting team, lega and compliance teams, finance and operators, market researcher, customer service managers\nSign off groups: head of online and online managers, e-commerce teams, managing director\nagency teams: account directors and managers, strategists and planners\n
  • Who is your audience?\n\nDev Team: Designers, Developers (front, backend), Project Managers, Business Analyst, USer Experience Peers\nSpecialists: SEO teams, Content and copy team, analytics specialists, accessability teams\nRelated Business Functions: product managers, brand and makreting team, lega and compliance teams, finance and operators, market researcher, customer service managers\nSign off groups: head of online and online managers, e-commerce teams, managing director\nagency teams: account directors and managers, strategists and planners\n
  • anatomy of a wireframe \nclear page titles and numbers\nwork in actual pixels (960.gs.)\nuse visual heat\nuse real data\nuse real images (where necessary)\nwrite descriptive image placeholders\nuse clear & linking annotation\nshow the fold\nuse interactivity to provide the FEEL\n\n
  • anatomy of a wireframe \nclear page titles and numbers\nwork in actual pixels (960.gs.)\nuse visual heat\nuse real data\nuse real images (where necessary)\nwrite descriptive image placeholders\nuse clear & linking annotation\nshow the fold\nuse interactivity to provide the FEEL\n\n
  • anatomy of a wireframe \nclear page titles and numbers\nwork in actual pixels (960.gs.)\nuse visual heat\nuse real data\nuse real images (where necessary)\nwrite descriptive image placeholders\nuse clear & linking annotation\nshow the fold\nuse interactivity to provide the FEEL\n\n
  • anatomy of a wireframe \nclear page titles and numbers\nwork in actual pixels (960.gs.)\nuse visual heat\nuse real data\nuse real images (where necessary)\nwrite descriptive image placeholders\nuse clear & linking annotation\nshow the fold\nuse interactivity to provide the FEEL\n\n
  • anatomy of a wireframe \nclear page titles and numbers\nwork in actual pixels (960.gs.)\nuse visual heat\nuse real data\nuse real images (where necessary)\nwrite descriptive image placeholders\nuse clear & linking annotation\nshow the fold\nuse interactivity to provide the FEEL\n\n
  • anatomy of a wireframe \nclear page titles and numbers\nwork in actual pixels (960.gs.)\nuse visual heat\nuse real data\nuse real images (where necessary)\nwrite descriptive image placeholders\nuse clear & linking annotation\nshow the fold\nuse interactivity to provide the FEEL\n\n
  • anatomy of a wireframe \nclear page titles and numbers\nwork in actual pixels (960.gs.)\nuse visual heat\nuse real data\nuse real images (where necessary)\nwrite descriptive image placeholders\nuse clear & linking annotation\nshow the fold\nuse interactivity to provide the FEEL\n\n
  • anatomy of a wireframe \nclear page titles and numbers\nwork in actual pixels (960.gs.)\nuse visual heat\nuse real data\nuse real images (where necessary)\nwrite descriptive image placeholders\nuse clear & linking annotation\nshow the fold\nuse interactivity to provide the FEEL\n\n
  • anatomy of a wireframe \nclear page titles and numbers\nwork in actual pixels (960.gs.)\nuse visual heat\nuse real data\nuse real images (where necessary)\nwrite descriptive image placeholders\nuse clear & linking annotation\nshow the fold\nuse interactivity to provide the FEEL\n\n
  • anatomy of a wireframe \nclear page titles and numbers\nwork in actual pixels (960.gs.)\nuse visual heat\nuse real data\nuse real images (where necessary)\nwrite descriptive image placeholders\nuse clear & linking annotation\nshow the fold\nuse interactivity to provide the FEEL\n\n
  • \n
  • Does your prototype react to user inputs with feedback? \nCan they “click” on something to go to another page or fill in a form? \nWill buttons appear to depress and drop-down menus work?\nWill different personas experience different content?\n\n
  • Does your prototype react to user inputs with feedback? \nCan they “click” on something to go to another page or fill in a form? \nWill buttons appear to depress and drop-down menus work?\nWill different personas experience different content?\n\n
  • Does your prototype react to user inputs with feedback? \nCan they “click” on something to go to another page or fill in a form? \nWill buttons appear to depress and drop-down menus work?\nWill different personas experience different content?\n\n
  • Does your prototype react to user inputs with feedback? \nCan they “click” on something to go to another page or fill in a form? \nWill buttons appear to depress and drop-down menus work?\nWill different personas experience different content?\n\n
  • Does your prototype react to user inputs with feedback? \nCan they “click” on something to go to another page or fill in a form? \nWill buttons appear to depress and drop-down menus work?\nWill different personas experience different content?\n\n
  • Does your prototype react to user inputs with feedback? \nCan they “click” on something to go to another page or fill in a form? \nWill buttons appear to depress and drop-down menus work?\nWill different personas experience different content?\n\n
  • Does your prototype react to user inputs with feedback? \nCan they “click” on something to go to another page or fill in a form? \nWill buttons appear to depress and drop-down menus work?\nWill different personas experience different content?\n\n
  • Make your point and explain that they are looking at wireframes not at visual design.\nExplain further (if you haven't already) what wireframes are and why they are important.\nIf you have built a working prototype, make a short description on how to interact with it, which steps a reviewer should take.\nNote that they can leave feedback through feedback notes. Explain to them how feedback notes work and how the feedback process will look like.\nOffer assistance. If your client is reviewing wireframes for the first time, take them by the hand and walk through the first review together.\n
  • Make your point and explain that they are looking at wireframes not at visual design.\nExplain further (if you haven't already) what wireframes are and why they are important.\nIf you have built a working prototype, make a short description on how to interact with it, which steps a reviewer should take.\nNote that they can leave feedback through feedback notes. Explain to them how feedback notes work and how the feedback process will look like.\nOffer assistance. If your client is reviewing wireframes for the first time, take them by the hand and walk through the first review together.\n
  • Make your point and explain that they are looking at wireframes not at visual design.\nExplain further (if you haven't already) what wireframes are and why they are important.\nIf you have built a working prototype, make a short description on how to interact with it, which steps a reviewer should take.\nNote that they can leave feedback through feedback notes. Explain to them how feedback notes work and how the feedback process will look like.\nOffer assistance. If your client is reviewing wireframes for the first time, take them by the hand and walk through the first review together.\n
  • Make your point and explain that they are looking at wireframes not at visual design.\nExplain further (if you haven't already) what wireframes are and why they are important.\nIf you have built a working prototype, make a short description on how to interact with it, which steps a reviewer should take.\nNote that they can leave feedback through feedback notes. Explain to them how feedback notes work and how the feedback process will look like.\nOffer assistance. If your client is reviewing wireframes for the first time, take them by the hand and walk through the first review together.\n
  • Make your point and explain that they are looking at wireframes not at visual design.\nExplain further (if you haven't already) what wireframes are and why they are important.\nIf you have built a working prototype, make a short description on how to interact with it, which steps a reviewer should take.\nNote that they can leave feedback through feedback notes. Explain to them how feedback notes work and how the feedback process will look like.\nOffer assistance. If your client is reviewing wireframes for the first time, take them by the hand and walk through the first review together.\n
  • Make your point and explain that they are looking at wireframes not at visual design.\nExplain further (if you haven't already) what wireframes are and why they are important.\nIf you have built a working prototype, make a short description on how to interact with it, which steps a reviewer should take.\nNote that they can leave feedback through feedback notes. Explain to them how feedback notes work and how the feedback process will look like.\nOffer assistance. If your client is reviewing wireframes for the first time, take them by the hand and walk through the first review together.\n
  • \n
  • “Wireframes are a visual representation of the functional page start. They visually communicate what functional pieces are present on a page and their relationship to each other.\nTodd Zaki Warfel, Protyping 2009\n\n
  • \n
  • “A prototype is a representative model or simulation of the final system. Unlike wireframes, prototypes go further than show and tell and actually let you experience the design”\nTodd Zaki Warfel, Protyping 2009\n\n
  • focusing on collaboration: join forces we wanted to get the coworkers: designers and developers as well as the stakeholders on board to present them something in progress so that they can comment on and jin the team right from the start. so it’s also a story about education the clientbecause let’s be honest most of the times we are talking a different language and getting things signed off by presenting some paper printouts or early stage handdrawn mocckups is just like judging a book by it’s cover.\n\nIndepence: you want your projects being accessible from everywhere at any time.\nEasy to use: drag and drop functionality. all the things self explaining, manual free, and it should look and fell like a desktop app. runs on mac, pc, linux, ubuntu, and on any modern web browser. on the signup you simply pick a personal url and there you go... it’s as easy as that.\n\nbulletproff: the work must be secure and save, you don’t want to loose work at all that would be the worst case scenario.\n
  • but after all wireframes are just one part of the equation. and it seems to me that lately ux is being narrowd down to ths topic and that’s not good. \n
  • The hallmark of a good UX is that customers get what they want, what they need, and you get what you want. \nYou have to make UX choices that don’t just satisfy visitor needs, but ones that also meet your organization’s goals. \n\nFor example you could give a white paper away for free or you could ask for the email address or contact information.\n
  • \n
  • but i’ve strayed from the given topic here and this is wireframing in full stereo\n

How To Communicate Wireframes How To Communicate Wireframes Presentation Transcript

  • How tocommunicateWireframesWolf Becvar @wdbecvar
  • HI. Wolf Becvar hashtag @wdbecvar#uxcampvienna hotgloo.com
  • I have to confess ...
  • I’m addicted
  • to wireframes.
  • Wireframes help us ...• get a clear picture• focus on each page’s purpose• no distraction through clutter of design• clear view of what needs to be designed• get clients involved in the process
  • A lot of talking ...The right tools to wireframe
  • And a lot of talking ... The right way to wireframe•wireframing vs. prototyping•low vs. high-fidelity•interactive vs. non-interactive•comic sans vs. no comic sans•color vs. shades of grey•export to html vs. export to print•collaborative vs. non collaborative
  • THEFEATUREWARCredit: http://www.comparestoreprices.co.uk/
  • All thisdiscussions aremissing a point ...
  • How tocommunicatewireframes?
  • Good UX is all aboutcommunication.
  • Good UX is all aboutcommunication &collaboration.
  • What are youcommunicating? •Vision •Layout •Content and images •Priority •Navigation •Functionality
  • Who is the audience?•Development Team•Specialists•Related Business Functions•Sign-off Groups•Agency Teams
  • Anatomy of awireframe •clear page titles and numbers •work in actual pixels (960.gs.) •use visual heat •use real data •use real images (where necessary) •write descriptive image placeholders •use clear & linking annotation •show the fold •use interactivity to provide the FEEL - Communicating the user expierience, Caddick/Cable
  • Interactivity describes howyour prototype behaves• does it react to user inputs with feedback?• can they “click” on something to go to another page?• can they fill in a form?• will buttons appear to depress?• will drop-down menus work?• will different personas experience different content?- Chris Farnum/Boxes and Arrows
  • Extras•get your audience involved from day 1•bring your client aboard•set up feedback loop•add disclaimer / vision / sitemap / storyboard•test your wireframes
  • Wireframes arejust one stor(e)y Credit: http://www.chrislabrooy.com/project/UX_design_dot_net/UX_Final_high_950px2.jpg
  • nt n na acc ou for Uxcampvienna ie loo attendees only! m pv otG ca yH an ux e- re hf o nt1m ping me! twitter.com/wdbecvar wireframewednesday.com hotgloo.com