Digital Prototypes: Work Smarter, Not Harder

Presented at ModevEast on December 12, 2013 and ModevGov on February 26, 2015.

“Work smarter, not harder” is an adage we’ve heard at some point in our careers. From our vantage point, it’s as good in theory as it is in practice, especially when it comes to something as complex as wireframing for responsive sites. In this session we review our approach for creating efficient wireframes that facilitate a tight working relationship between UX and Dev and also ‘wow’ the client. Plus, we’ll talk about the pros and cons of the approach and how best to implement this solution at your workplace, for your client.

Transcript

1. Work Smarter, Not Harder. Using digital prototypes to create responsive wireframes.
2. Who are we?
3. A brief history
4. The Guttenberg Version Wireframes:
5. The Wireframe
6. 3 in 3
7. Illustrator Axure Omnigraffle
8. Responsive Prototype
9. 3 in 1 html
10. Early collaboration
11. Prototype Tools Foundation Bootstrap Proty
13. What You Need To Know
14. Responsive Principles
15. Grid System
16. Content is king
17. Sketch A Plan
18. Technical Components GitHub*
19. Text Wrangler Dreamweaver Sublime Text 2 Coda Textmate
20. Prototype Pros
21. Instant feedback
23. ...for the most part.
24. Prototypes are dynamic. …like these two.
25. Prototype Cons
26. This looks convincingly real!
27. Changes to timeline
28. Integrate as a deliverable
29. Paparazzi Awesome Screenshot
30. In sum... • 3 in 1 • HTML/CSS (more universal) • instant feedback • more effective wireframes
31. Gracias! Andrew Wachholz awachholz@rockcreeksm.com Michelle Chin mchin@rockcreeksm.com