web design with edge reflow html5devconf
DESCRIPTION
TRANSCRIPT
Web Design with Reflow
Jacob Surber Sr. Product Manager HTML Design @jacobsurber
Web Designers
Information
Motion
Visual
Web design
Top down
Visual approach
Bottom Up
Content First
Content !
First
Team dynamic & individual responsibilities
Tools
Inspection
Responsive Inspector
Abstraction
Abstraction = Good
Abstraction = Bad ?
The right tool for the right job
Design
Honesty in design
Design for the medium
“Content Choreography” @trentwalton
Emerging Tools
2013
If you are not embarrassed by the first version of your product, you’ve launched too late.
- Reid Hoffman
Change is OK
Change requires more than 5 minutes of effort
Because a tool does not solve your every need,
doesn’t mean it can’t help
Design is about
communication
Layout
is Design
Let’s talk about
#changeiscoming
Designers Developers
is about communication
• Responsive Intent
• Designing to content
What’s the workflow?
Two ways to start
From Photoshop
Assets Content Layout
Import:
Photoshop “Generator Technology”
Export Import
Hierarchy! Hierarchy! Hierarchy!
‘Original’ responsive design
Layout...
Reflow for Screen Design
But then what?
What’s the workflow?
http://blog.terrenceryan.com/reflow-cleaner/
Where are we going?
Try
html.adobe.com/edge/reflow !
!
@Reflow
Jacob Surber Sr. Product Manager HTML Design @jacobsurber