Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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) 	

• Fron...
Typical Workflow
• Set clear Goals and Objectives	

• Content Inventory/Strategy	

• Wireframe	

• PSDs (Design)
• Front-e...
Design
• Create the PSD	

• Get feedbacks	

• Make millions and millions of edits	

• Get sign off	

• Start building the ...
Typical Workflow
• Set clear Goals and Objectives	

• Content Inventory/Strategy	

• Wireframe	

• Design (PSDs)
• Front-e...
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 tim...
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 ...
Present Workflow
• Set clear Goals and Objectives	

• Content Inventory/Strategy	

• Wireframe	

• Design (PSDs)
• Front-e...
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 Devel...
Make all the important
decisions in the browser
Thank You
Email: info@SangMinYoon.com
Twitter: @SMY315
Questions?
Designing (Deciding) in the Browser
Designing (Deciding) in the Browser
Designing (Deciding) in the Browser
Designing (Deciding) in the Browser
Designing (Deciding) in the Browser
Designing (Deciding) in the Browser
Designing (Deciding) in the Browser
Designing (Deciding) in the Browser
Designing (Deciding) in the Browser
Designing (Deciding) in the Browser
Designing (Deciding) in the Browser
Designing (Deciding) in the Browser
Designing (Deciding) in the Browser
Designing (Deciding) in the Browser
Upcoming SlideShare
Loading in …5
×

Designing (Deciding) in the Browser

2,478 views

Published on

Slides from my talk at 2014 WordCamp Maine: http://2014.maine.wordcamp.org/session/designing-deciding-in-the-browser/

Published in: Technology
  • Be the first to comment

Designing (Deciding) in the Browser

  1. 1. Designing (Deciding) 
 in the Browser Sang-MinYoon
 August 16th, 2014 !
  2. 2. Let’s change the phrase “designing in the browser” to “deciding in the browser.” -Dan Mall
  3. 3. When I mention “PSDs”, I’m referring to fully fleshed out comps
  4. 4. Sang-Min Yoon Web Designer & Front-End Developer 
 at Wentworth Institute of Technology (Boston, MA)
  5. 5. I have designed and/or developed websites for
  6. 6. I learned web design & development with WordPress
  7. 7. About 4 years ago…
  8. 8. Typical Workflow • Set clear Goals and Objectives • Content Inventory/Strategy • Wireframe • PSDs (Design) • Front-end Development • Back-end Development • Testing
  9. 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. 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. 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. 12. Does this make sense?
  13. 13. We aint talkin ‘bout how the 
 website looks on a browser We talkin ‘bout how the 
 website looks on a PSD.
  14. 14. 
 How silly is that.We talking about PSDs. ! -Allen Iverson
  15. 15. These are printouts of websites 
 and not websites.
  16. 16. Even more issues now
  17. 17. Pictures of Phone Usage Photo Credit: www.flickr.com/photos/lukew
  18. 18. Create PSDs for every single one of these devices?
  19. 19. “We only need designs for desktop computer, iPhone and iPad.”
  20. 20. “Most of our users use a desktop computer, iPhone and iPad.”
  21. 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. 22. Touch Experience
  23. 23. Touch Experience
  24. 24. Interactions 
 (hover, animations and transitions)
  25. 25. Show Animations
  26. 26. Show Animations
  27. 27. Can not make these design 
 decisions on a PSD
  28. 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. 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. 30. Designing in the Browser
  31. 31. 1) Saves Time
  32. 32. CSS3 is Powerful
  33. 33. CSS3 is Powerful
  34. 34. CSS3 is Powerful
  35. 35. 2) Allows for rapid iteration
  36. 36. 3) Content
  37. 37. On a PSD, more time is spent on look and feel of the website. 
 This puts content second.
  38. 38. Show Animations
  39. 39. CSS3 is Powerful
  40. 40. Content is given priority
  41. 41. Content is given priority
  42. 42. Content is given priority
  43. 43. 4) Makes RWD easier
  44. 44. Let the content determine 
 the breakpoints
  45. 45. 5) Icon Fonts and SVG
  46. 46. 6) Browser and Devices
  47. 47. Video Credit: https://www.youtube.com/watch?v=_iidwn2kfJU
  48. 48. I Use CodeKit
  49. 49. BrowserStack
  50. 50. 8) Performance
  51. 51. 9) Accessibility
  52. 52. Accessibility
  53. 53. Accessibility
  54. 54. Testing (user experience, browser & device compatibility, performance, accessibility) should not be done at the end.
  55. 55. Should be done during the design process…
  56. 56. ..in the Browser!
  57. 57. Let's Wrap it up
  58. 58. Continue to use Photoshop but quickly move to the browser
  59. 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. 60. Make all the important decisions in the browser
  61. 61. Thank You Email: info@SangMinYoon.com Twitter: @SMY315
  62. 62. Questions?

×