digital prototypes: work smarter, not harder
Post on 18-Oct-2014
351 views
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.TRANSCRIPT
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
