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.
Web Design Workflow and 

Tools that Make Life Easy
Sang-MinYoon

April 25th, 2014	

!
Sang-Min Yoon
Twitter: SMYoon315
Web Designer & Front-End Developer
at Wentworth Institute of Technology
(Boston, MA)
3 Weeks Before 

I Started at Wentworth
What I asked for…
Photo Credit: http://www.bhphotovideo.com/bnh/controller/home?O=&sku=1021273&gclid=COup49ut8r0CFchQ7Aod7VkAJA&Q=&is=REG&A=...
Photo Credit: http://hardforum.com/showthread.php?t=1720205
Photo Credit: http://mydecorative.com/make-an-inspiring-office-for-employees-to-aspire/
Just Kidding…
What I Really Asked For
• Adobe CS6	

• BrowserStack
• CodeKit
• iMac 	

• Sublime Text
• Tower
• Windows Computer and oth...
Already Owned
• Macbook Pro Retina	

• iPad	

• iPhone,Windows Phone, and a Android Phone	

• A Windows 8 Laptop
Basically, All I Asked For Was
• BrowserStack ($39 per month)
• CodeKit ($30)
• Sublime Text ($70)
• Tower ($59)
Only $200? What? Why?
At the end of the day, 

all I’m doing is making websites
using HTML, CSS and Javascript.
I only asked for tools that would
help me work faster and in the
most efficient way.
This is my desk
Not pictured: My Microsoft (testing) products
My Workflow
My Workflow At Wentworth
• Set clear Goals and Objectives with Clients	

• Content Inventory	

• Wireframe	

• Design (in ...
Set Clear Goals and
Objectives with Clients
DON’TTALK ABOUT DESIGN!
Content Inventory
Content Development
Wireframes
I make them ugly so that all the 

focus is on content of the website.
I use frameworks 

only for Wireframes
I use Foundation
There are few others…
List of Front-End Frameworks

http://usablica.github.io/front-end-frameworks/compare.html
Wireframes
Custom Template
Content(almost) is done!
Design and Development
What I enjoy doing the most
Custom Template
Design in the Browser
Yup, No PSD or Mockups!
Code Editor
Where I spend most of my day
Sublime Text 3
Why I use Sublime Text 3
• Packages (for just about everything)	

• Fast and light weight	

• Autocomplete and Emmet	

• Q...
Quick Demo
Free online course for Sublime Text 2 by Jeffrey Way:
!
http://code.tutsplus.com/articles/perfect-workflow-
in-sublime-tex...
How I Get Help With Code
Before Google
Dash
Quick Demo
A List Apart blog post on Alfred and Dash:
Read the Docs, Faster
http://alistapart.com/blog/post/read-the-docs-
faster
Version Control
I use to do this
Now, I use Git
But I don’t like the Terminal
I also don’t want 

to remember all this
So, I use Tower
And click buttons
Quick Demo
CodeKit
For everything else
Why I use CodeKit
• Compiles Sass	

• Live Reloads Browsers and Devices	

• Optimize Images	

• Autoprefixes	

• Checks Syn...
“It's like steroids for web developers”
Quick Demo
smy.local:5757
Testing
BrowserStack
Mobile and Tablet
Firebug for IE!
Test on Real Devices
Performance
Chrome Dev Tool
Webpagetest.org


CMS Integration
We use Hannon Hill’s Cascade Server at Wentworth
Done!
Wait, 

There Is One More Thing
Staying Up to Date
The web is constantly changing and so is the resources and tools we use.
How I Stay Up to Date
• Twitter	

• Blogs	

• Podcasts	

• Webinars	

• Weekly Newsletters
Twitter
Best way to stay on top of news and trends 

about the web and Higher Ed
Blogs
Web Design/Development
• A List Apart	

• CreativeBloq (.net Magazine)	

• SitePoint	

• Smashing Magazine	

• Treeh...
Design Ideas and Inspirations
• eduStyle

http://edustyle.net	

• GalleryEDU 

http://galleryedu.com	

• HigherEd RWD Dire...
Weekly Newsletters
• CSS Weekly	

• Fresh Brewed
Frontend	

• HTML5 Weekly	

• JavaScript Weekly
• Responsive Design
Weekl...
Podcasts and Webinars
Podcasts
• ShopTalk Show	

• Treehouse Show	

• The Big Web Show	

• Sass Cast	

• The Web Ahead
Web...
Final Thoughts
As I said earlier, at the end of the
day, my job is to make websites.
But the way we work and tools we
have available will continue to
change over time.
For Example (tools)
• CodeKit - CodeKitVersion 2 was released on
March 2014.
• Sublime Text - SublimeText 3 (in beta) was
...
Final Thoughts
• Be open to change	

• Pick your tools wisely	

• Invest time and get good
Thank You
Twitter: @SMYoon315
Any Questions?
Web Design Workflow and 
Tools that Make Life Easy
Web Design Workflow and 
Tools that Make Life Easy
Web Design Workflow and 
Tools that Make Life Easy
Web Design Workflow and 
Tools that Make Life Easy
Upcoming SlideShare
Loading in …5
×

Web Design Workflow and 
Tools that Make Life Easy

2,008 views

Published on

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

Published in: Design, Technology
  • Be the first to comment

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?

×