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

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

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

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

5.
I have designed and/or
developed websites for

6.
I learned web design &
development with WordPress

7.
About 4 years ago…

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

9.
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

10.
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.

11.
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

12.
Does this make sense?

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

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

15.
These are printouts of websites
and not websites.

16.
Even more issues now

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

18.
Create PSDs for every single
one of these devices?

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

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

21.
“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”

22.
Touch Experience

23.
Touch Experience

24.
Interactions
(hover, animations and transitions)

25.
Show Animations

26.
Show Animations

27.
Can not make these design
decisions on a PSD

28.
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

29.
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

30.
Designing in the Browser

31.
1) Saves Time

32.
CSS3 is Powerful

33.
CSS3 is Powerful

34.
CSS3 is Powerful

35.
2) Allows for rapid iteration

36.
3) Content

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

38.
Show Animations

39.
CSS3 is Powerful

40.
Content is given priority

41.
Content is given priority

42.
Content is given priority

43.
4) Makes RWD easier

44.
Let the content determine
the breakpoints

45.
5) Icon Fonts and SVG

46.
6) Browser and Devices

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

48.
I Use CodeKit

49.
BrowserStack

50.
8) Performance

51.
9) Accessibility

52.
Accessibility

53.
Accessibility

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

55.
Should be done during the
design process…

56.
..in the Browser!

57.
Let's Wrap it up

58.
Continue to use Photoshop but
quickly move to the browser

59.
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

60.
Make all the important
decisions in the browser

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

62.
Questions?