View
351
Download
2
Category
Preview:
DESCRIPTION
“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.
Citation preview
Work Smarter, Not Harder.
Using digital prototypes to create responsive wireframes.
Who are we?
A brief history
The Guttenberg Version
Wireframes:
The Wireframe
3 in 3
Illustrator Axure Omnigraffle
Responsive Prototype
3 in 1
html
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 Dreamweaver Sublime Text 2
Coda 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!
Andrew Wachholz awachholz@rockcreeksm.com
Michelle Chin mchin@rockcreeksm.com
Recommended