Designing (Deciding)
in the Browser
Sang-MinYoon
August 16th, 2014
!

Let’s change the phrase “designing in the
browser” to “deciding in the browser.”
-Dan Mall

When I mention “PSDs”, I’m
referring to fully fleshed out comps

Sang-Min Yoon
Web Designer & Front-End Developer
at Wentworth Institute of Technology
(Boston, MA)

I have designed and/or
developed websites for

I learned web design &
development with WordPress

About 4 years ago…

Typical Workflow
• Set clear Goals and Objectives
• Content Inventory/Strategy
• Wireframe
• PSDs (Design)
• Front-end Development
• Back-end Development
• Testing

Typical Workflow
• Set clear Goals and Objectives
• Content Inventory/Strategy
• Wireframe
• PSDs (Design)
• Front-end Development
• Back-end Development
• Testing
Most of the design
decisions were made

Design
• Create the PSD
• Get feedbacks
• Make millions and millions of edits
• Get sign off
• Start building the website only when
clients/stakeholders are satisfied with the PSDs.

Typical Workflow
• Set clear Goals and Objectives
• Content Inventory/Strategy
• Wireframe
• Design (PSDs)
• Front-end Development
• Back-end Development
• Testing
Most of the design
decisions were made

Does this make sense?

We aint talkin ‘bout how the
website looks on a browser
We talkin ‘bout how the
website looks on a PSD.

How silly is that.We talking about PSDs.
!
-Allen Iverson

These are printouts of websites
and not websites.

Even more issues now

Pictures of Phone Usage
Photo Credit: www.flickr.com/photos/lukew

Create PSDs for every single
one of these devices?

“We only need designs for desktop
computer, iPhone and iPad.”

“Most of our users use a desktop
computer, iPhone and iPad.”

“we’ll see a larger screen, with a 4.7-inch model
launching first and a 5.5-inch model also being
unveiled at the same time”

Touch Experience

Touch Experience

Interactions
(hover, animations and transitions)

Show Animations

Show Animations

Can not make these design
decisions on a PSD

Past Workflow
• Set clear Goals and Objectives
• Content Inventory/Strategy
• Wireframe
• PSDs (Design)
• Front-end Development
• Back-end Development
• Testing
Most of the design
decisions were made

Present Workflow
• Set clear Goals and Objectives
• Content Inventory/Strategy
• Wireframe
• Design (PSDs)
• Front-end Development
• Back-end Development
• Testing
Make MOST of the
design decisions
Make SOME of the
design decisions

Designing in the Browser

1) Saves Time

CSS3 is Powerful

CSS3 is Powerful

CSS3 is Powerful

2) Allows for rapid iteration

3) Content

On a PSD, more time is spent on
look and feel of the website.
This puts content second.

Show Animations

CSS3 is Powerful

Content is given priority

Content is given priority

Content is given priority

4) Makes RWD easier

Let the content determine
the breakpoints

5) Icon Fonts and SVG

6) Browser and Devices

Video Credit: https://www.youtube.com/watch?v=_iidwn2kfJU

I Use CodeKit

BrowserStack

8) Performance

9) Accessibility

Accessibility

Accessibility

Testing (user experience, browser & device
compatibility, performance, accessibility)
should not be done at the end.

Should be done during the
design process…

..in the Browser!

Let's Wrap it up

Continue to use Photoshop but
quickly move to the browser

Workflow
• Set clear Goals and Objectives
• Content Inventory/Strategy
• Wireframe
• Design (PSDs)
• Front-end Development
• Back-end Development
• Testing
Make MOST of the
design decisions
Make SOME of the
design decisions

Make all the important
decisions in the browser

Thank You
Email: info@SangMinYoon.com
Twitter: @SMY315

Questions?