Successfully reported this slideshow.

Web Design Workflow and 
Tools that Make Life Easy

2

Share

Upcoming SlideShare
Bootstrap Bootcamp
Bootstrap Bootcamp
Loading in …3
×
1 of 83
1 of 83

Web Design Workflow and 
Tools that Make Life Easy

2

Share

Download to read offline

Slides from my talk at HighEdWeb New England: http://ne.highedweb.org/web-design-workflow-and-tools-that-make-life-easy/

Slides from my talk at HighEdWeb New England: http://ne.highedweb.org/web-design-workflow-and-tools-that-make-life-easy/

More Related Content

Related Books

Free with a 14 day trial from Scribd

See all

Related Audiobooks

Free with a 14 day trial from Scribd

See all

Web Design Workflow and 
Tools that Make Life Easy

  1. 1. Web Design Workflow and 
 Tools that Make Life Easy Sang-MinYoon
 April 25th, 2014 !
  2. 2. Sang-Min Yoon Twitter: SMYoon315
  3. 3. Web Designer & Front-End Developer at Wentworth Institute of Technology (Boston, MA)
  4. 4. 3 Weeks Before 
 I Started at Wentworth
  5. 5. What I asked for…
  6. 6. Photo Credit: http://www.bhphotovideo.com/bnh/controller/home?O=&sku=1021273&gclid=COup49ut8r0CFchQ7Aod7VkAJA&Q=&is=REG&A=details
  7. 7. Photo Credit: http://hardforum.com/showthread.php?t=1720205
  8. 8. Photo Credit: http://mydecorative.com/make-an-inspiring-office-for-employees-to-aspire/
  9. 9. Just Kidding…
  10. 10. What I Really Asked For • Adobe CS6 • BrowserStack • CodeKit • iMac • Sublime Text • Tower • Windows Computer and other Devices (for testing)
  11. 11. Already Owned • Macbook Pro Retina • iPad • iPhone,Windows Phone, and a Android Phone • A Windows 8 Laptop
  12. 12. Basically, All I Asked For Was • BrowserStack ($39 per month) • CodeKit ($30) • Sublime Text ($70) • Tower ($59)
  13. 13. Only $200? What? Why?
  14. 14. At the end of the day, 
 all I’m doing is making websites using HTML, CSS and Javascript.
  15. 15. I only asked for tools that would help me work faster and in the most efficient way.
  16. 16. This is my desk Not pictured: My Microsoft (testing) products
  17. 17. My Workflow
  18. 18. My Workflow At Wentworth • Set clear Goals and Objectives with Clients • Content Inventory • Wireframe • Design (in the browser) and Development • Testing
  19. 19. Set Clear Goals and Objectives with Clients DON’TTALK ABOUT DESIGN!
  20. 20. Content Inventory
  21. 21. Content Development
  22. 22. Wireframes I make them ugly so that all the 
 focus is on content of the website.
  23. 23. I use frameworks 
 only for Wireframes
  24. 24. I use Foundation
  25. 25. There are few others… List of Front-End Frameworks
 http://usablica.github.io/front-end-frameworks/compare.html
  26. 26. Wireframes
  27. 27. Custom Template
  28. 28. Content(almost) is done!
  29. 29. Design and Development What I enjoy doing the most
  30. 30. Custom Template
  31. 31. Design in the Browser
  32. 32. Yup, No PSD or Mockups!
  33. 33. Code Editor Where I spend most of my day
  34. 34. Sublime Text 3
  35. 35. Why I use Sublime Text 3 • Packages (for just about everything) • Fast and light weight • Autocomplete and Emmet • Quickly navigate through files • Hotkeys similar to Chrome
  36. 36. Quick Demo
  37. 37. Free online course for Sublime Text 2 by Jeffrey Way: ! http://code.tutsplus.com/articles/perfect-workflow- in-sublime-text-free-course--net-27293
  38. 38. How I Get Help With Code Before Google
  39. 39. Dash
  40. 40. Quick Demo
  41. 41. A List Apart blog post on Alfred and Dash: Read the Docs, Faster http://alistapart.com/blog/post/read-the-docs- faster
  42. 42. Version Control
  43. 43. I use to do this
  44. 44. Now, I use Git
  45. 45. But I don’t like the Terminal
  46. 46. I also don’t want 
 to remember all this
  47. 47. So, I use Tower
  48. 48. And click buttons
  49. 49. Quick Demo
  50. 50. CodeKit For everything else
  51. 51. Why I use CodeKit • Compiles Sass • Live Reloads Browsers and Devices • Optimize Images • Autoprefixes • Checks Syntax • Combines and Minifies Files
  52. 52. “It's like steroids for web developers”
  53. 53. Quick Demo
  54. 54. smy.local:5757
  55. 55. Testing
  56. 56. BrowserStack
  57. 57. Mobile and Tablet
  58. 58. Firebug for IE!
  59. 59. Test on Real Devices
  60. 60. Performance
  61. 61. Chrome Dev Tool
  62. 62. Webpagetest.org
  63. 63. 
 CMS Integration We use Hannon Hill’s Cascade Server at Wentworth
  64. 64. Done!
  65. 65. Wait, 
 There Is One More Thing
  66. 66. Staying Up to Date The web is constantly changing and so is the resources and tools we use.
  67. 67. How I Stay Up to Date • Twitter • Blogs • Podcasts • Webinars • Weekly Newsletters
  68. 68. Twitter Best way to stay on top of news and trends 
 about the web and Higher Ed
  69. 69. Blogs Web Design/Development • A List Apart • CreativeBloq (.net Magazine) • SitePoint • Smashing Magazine • Treehouse Blog Higher Education • EDUniverse • Higher Ed Solo • Hannon Hill’sTeam Blog • Higher Ed Live Blog • mStoner Blog
  70. 70. Design Ideas and Inspirations • eduStyle
 http://edustyle.net • GalleryEDU 
 http://galleryedu.com • HigherEd RWD Directory
 http://weedygarden.net/highered-rwd-directory
  71. 71. Weekly Newsletters • CSS Weekly • Fresh Brewed Frontend • HTML5 Weekly • JavaScript Weekly • Responsive Design Weekly • Web Design Weekly • WebTools Weekly • wpMail.me
  72. 72. Podcasts and Webinars Podcasts • ShopTalk Show • Treehouse Show • The Big Web Show • Sass Cast • The Web Ahead Webinars • Higher Ed Live • HubSpot • mStoner !
  73. 73. Final Thoughts
  74. 74. As I said earlier, at the end of the day, my job is to make websites.
  75. 75. But the way we work and tools we have available will continue to change over time.
  76. 76. For Example (tools) • CodeKit - CodeKitVersion 2 was released on March 2014. • Sublime Text - SublimeText 3 (in beta) was released early last year.
  77. 77. Final Thoughts • Be open to change • Pick your tools wisely • Invest time and get good
  78. 78. Thank You Twitter: @SMYoon315
  79. 79. Any Questions?

×