Designing (Deciding) in the Browser

Designing (Deciding) in the Browser

Sang-Min Yoon 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 YouEmail: info@SangMinYoon.com

Twitter: @SMY315

Questions?