Advertisement
Advertisement

More Related Content

Advertisement

Designing (Deciding) in the Browser

  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?
Advertisement