Wireframing, Mockups, and Prototyping Made Easy
•
4 gostaram•2,550 visualizações
Your job description might not say anything at all about making wireframes, interactive mockups, or prototypes, but having the ability to quickly create them can be invaluable, whether you're the de facto user experience team at your company, or a content strategist, or a technical writer. There's a wealth of new tools that make prototyping easier than ever—you don't have to be a Photoshop guru or know any software code! Pick up some new skills that can help you solve difficult concepts, communicate more efficiently, drive improvements to your products, or move your career in a new direction. ** Presented at the Society for Technical Communication Summit 2015 in Columbus, Ohio as a 45-minute workshop. ** http://lanyrd.com/2015/stc15/sdhdtc/
Recomendados
Recomendados
Mais conteúdo relacionado
Destaque
Destaque (20)
Semelhante a Wireframing, Mockups, and Prototyping Made Easy
Semelhante a Wireframing, Mockups, and Prototyping Made Easy (20)
Mais de John Collins
Mais de John Collins (6)
Último
Último (20)
Wireframing, Mockups, and Prototyping Made Easy
- 1. Wireframing, mockups, and prototyping made easy JOHN COLLINS • SENIOR TECHNICAL WRITER • ATLASSIAN • @JRC_COLLINS
- 2. About me @jrc_collins • #stc15
- 3. About you @jrc_collins • #stc15
- 4. NO • An See col @jrc_collins • #stc15 http://www.leonardoda-vinci.org/fly.html • https://creativecommons.org/licenses/by-nc-nd/3.0/
- 5. NO • An See col @jrc_collins • #stc15 http://www.leonardoda-vinci.org/Drawing-Of-A-Flying-Machine-large.html • https://creativecommons.org/licenses/by-nc-nd/3.0/
- 6. NO • An See col @jrc_collins • #stc15 http://www.wright-brothers.org/Information_Desk/Help_with_Homework/Wright_Photos/Wright_Photos_images/1903_Flyer_Plan.jpg
- 7. DAVID MANNHEIM ” Who should sketch?“ Everyone. @jrc_collins • #stc15
- 8. A sketch can look bad and still work wonderfully. UXMOVEMENT ” “ @jrc_collins • #stc15
- 9. Why do these things? @jrc_collins • #stc15
- 10. To understand @jrc_collins • #stc15
- 11. To explain @jrc_collins • #stc15
- 12. To improve @jrc_collins • #stc15
- 13. To create @jrc_collins • #stc15
- 14. NO • An See col Fidelity Sketch Wireframe Mockup @jrc_collins • #stc15
- 15. NO • An See col Sketch prototype Wireframe Mockup @jrc_collins • #stc15 Fidelity
- 16. NO • An See col Sketch Wireframe prototype Mockup @jrc_collins • #stc15 Fidelity
- 17. NO • An See col Sketch Wireframe Mockup prototype @jrc_collins • #stc15 Fidelity
- 19. NO • An See col Tools • Paper & pencil (or Sharpie) • Whiteboard & marker • Powerpoint/Keynote • Balsamiq Mockups • Sketch • Invision • POP @jrc_collins • #stc15
- 22. Balsamiq Mockups @jrc_collins • #stc15
- 26. POP (Prototyping On Paper) @jrc_collins • #stc15
- 34. Scenario • Redesign home screen of LinkedIn app for mobile • Make 8 sketches • You have 5 minutes (37 seconds each) • Explore various ideas @jrc_collins • #stc15
- 38. Seek feedback @jrc_collins • #stc15
- 48. Thank you! JOHN COLLINS • SENIOR TECHNICAL WRITER • ATLASSIAN • @JRC_COLLINS
Notas do Editor
- Find a partner for later in the workshop.
- Worked in computer graphics years and years ago, was a newspaper editor, where I loved to combine content and design. Now, in software, I’m realizing the same interest. For the last 7 years, I was at Rosetta Stone, first as a tech writer and then as a UX content strategist. Two months ago, I moved to Austin, TX to join the Design team at Atlassian as a senior tech writer. Mention Twitter.
- • Who here is a designer? • Who considers themselves to be artistic? • Are any of you quick to the whiteboard at work? Let’s start at the beginning.
- Sketching. Da Vinci
- 1903 – Initial sketch for the Wright Bros first powered flyer – on brown wrapping paper
- UX people and Dan Roam of The Back of the Napkin both say that people who consider themselves bad at art are sometimes the best at sketching.
- Why sketch? Why make wireframes and mockups and prototypes?
- You can grasp difficult concepts by breaking them into sketches or visual depictions.
- Turn an abstract into a visual and people may be more likely to understand and remember it.
- Use sketches, wireframes, etc. to suggest improvements to sub-par user experiences.
- Step up. You want more influence on the design of the products you’re documenting? Put out some sketches and wireframes for a new feature. ESPECIALLY if you’re in a company without a design team. FWIW, I sketch each presentation I give before I build it. So, let’s talk terminology a bit.
- This is how I think of these terms. Other UX practitioners may define them a bit differently. What about prototypes?
- • Disclaimer: I’m not pushing certain tools on you. I don’t like that kind of thing. I’m going to give you an idea of some tools quickly. It’s not exhaustive. It’s not necessarily an endorsement, either.
- Tried to focus on easy, cheap, accessible tools. • Other options: Photoshop, Flash, HTML
- • By (left) hand, quick, iterative, social (share!). • NOT going for perfection. • Sticky notes for tooltips, modals, etc. • Use a photocopier • Avoids getting bogged down in typography, color, etc.
- Ever seen something like this floating around your office and wondered where it came from?
- • Simple drag-and-drop interface with common UI elements in a sketch-like style • Markdown-style text editing • Limited options again helps you avoid getting bogged down with color and typography.
- Some of the standard options, but never fear! Additional assets online.
- Mobile app lets you turn photos into interactive prototypes that you can share with others. This is really lightweight. A lot of UX folks are using a more powerful program called Invision to do similar things.
- Make a hotspot
- Thank you! Check my Twitter feed for more resources!