Work Smarter,
Not Harder.
Using digital prototypes to
create responsive wireframes.
Who are we?
A brief history
Wireframes:
The Guttenberg
Version
The Wireframe
3 in 3
Illustrator

Axure

Omnigraffle
Responsive
Prototype
html

3 in 1
Early collaboration
Prototype Tools
Foundation

Bootstrap

Proty
What You Need
To Know
Responsive Principles
Grid System
Content is king
Sketch A Plan
Technical Components
GitHub*
Text Wrangler

Coda

Dreamweaver

Sublime Text 2

Textmate
Prototype Pros
Instant feedback
...for the most part.
Prototypes
are
dynamic.

…like these
two.
Prototype Cons
This looks convincingly real!
Changes to
timeline
Integrate as a
deliverable
Paparazzi

Awesome Screenshot
In sum...
• 3 in 1
• HTML/CSS (more universal)
• instant feedback
• more effective wireframes
Gracias!
Michelle Chin	


mchin@rockcreeksm.com	


Andrew Wachholz	


awachholz@rockcreeksm.com
Digital Prototypes: Work Smarter, Not Harder
Digital Prototypes: Work Smarter, Not Harder
Upcoming SlideShare
Loading in …5
×

Digital Prototypes: Work Smarter, Not Harder

569 views

Published on

“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.

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
569
On SlideShare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Digital Prototypes: Work Smarter, Not Harder

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

×