Web Design with Reflow

Jacob Surber Sr. Product Manager HTML Design @jacobsurber

Web Designers

Print

Information

Motion

Visual

Web design

Top down

Visual approach

Bottom Up

Content First

Content !

First

Team dynamic & individual responsibilities

Tools

Inspection

Responsive Inspector

PIOTR WALCZYSZYN - http://outof.me

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