How To Communicate Wireframes
•
8 likes•2,950 views
This document discusses how to effectively communicate wireframes. It recommends including page titles and numbers, using actual pixel sizes, visual heatmaps, real data and images when necessary. Descriptive annotations and showing the page fold help convey layout and functionality. Interactivity provides insight into user experience through reactions to clicks, forms, buttons and different user experiences. The audience and purpose should guide wireframe design and tools. Wireframes are just one part of the design process and effective communication is key.
Recommended
Recommended
More Related Content
Viewers also liked
Viewers also liked (12)
Similar to How To Communicate Wireframes
Similar to How To Communicate Wireframes (20)
More from Wolf Becvar
Recently uploaded
Recently uploaded (20)
How To Communicate Wireframes
- 1. How to communicate Wireframes Wolf Becvar @wdbecvar
- 2. HI. Wolf Becvar hashtag @wdbecvar #uxcampvienna hotgloo.com
- 4. I have to confess ...
- 5. I’m addicted
- 14. 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
- 15. A lot of talking ... The right tools to wireframe
- 16. 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
- 18. All this discussions are missing a point ...
- 20. Good UX is all about communication.
- 21. Good UX is all about communication & collaboration.
- 22. What are you communicating? •Vision •Layout •Content and images •Priority •Navigation •Functionality
- 23. Who is the audience? •Development Team •Specialists •Related Business Functions •Sign-off Groups •Agency Teams
- 24. Anatomy of a wireframe •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
- 26. Interactivity describes how your 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
- 27. Extras •get your audience involved from day 1 •bring your client aboard •set up feedback loop •add disclaimer / vision / sitemap / storyboard •test your wireframes
- 28. Wireframes are just one stor(e)y Credit: http://www.chrislabrooy.com/project/UX_design_dot_net/UX_Final_high_950px2.jpg
- 29. nt n na acc ou for Uxcampvienna ie loo attendees only! m pv otG ca yH an ux e- re hf o nt 1m ping me! twitter.com/wdbecvar wireframewednesday.com hotgloo.com
Editor's Notes
- \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