Web Design Workflow and Tools that Make Life Easy
•2 likes•2,328 views
Report
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/
More Related Content
What's hot
What's hot(20)
Similar to Web Design Workflow and Tools that Make Life Easy
Similar to Web Design Workflow and Tools that Make Life Easy(20)
Recently uploaded
Recently uploaded(20)
Web Design Workflow and Tools that Make Life Easy
- 1. Web Design Workflow and Tools that Make Life Easy Sang-MinYoon April 25th, 2014 !
- 3. Web Designer & Front-End Developer at Wentworth Institute of Technology (Boston, MA)
- 4. 3 Weeks Before I Started at Wentworth
- 5. What I asked for…
- 10. What I Really Asked For • Adobe CS6 • BrowserStack • CodeKit • iMac • Sublime Text • Tower • Windows Computer and other Devices (for testing)
- 11. Already Owned • Macbook Pro Retina • iPad • iPhone,Windows Phone, and a Android Phone • A Windows 8 Laptop
- 12. Basically, All I Asked For Was • BrowserStack ($39 per month) • CodeKit ($30) • Sublime Text ($70) • Tower ($59)
- 13. Only $200? What? Why?
- 14. At the end of the day, all I’m doing is making websites using HTML, CSS and Javascript.
- 15. I only asked for tools that would help me work faster and in the most efficient way.
- 16. This is my desk Not pictured: My Microsoft (testing) products
- 17. My Workflow
- 18. My Workflow At Wentworth • Set clear Goals and Objectives with Clients • Content Inventory • Wireframe • Design (in the browser) and Development • Testing
- 19. Set Clear Goals and Objectives with Clients DON’TTALK ABOUT DESIGN!
- 22. Wireframes I make them ugly so that all the focus is on content of the website.
- 23. I use frameworks only for Wireframes
- 24. I use Foundation
- 25. There are few others… List of Front-End Frameworks http://usablica.github.io/front-end-frameworks/compare.html
- 26. Wireframes
- 27. Custom Template
- 29. Design and Development What I enjoy doing the most
- 30. Custom Template
- 31. Design in the Browser
- 32. Yup, No PSD or Mockups!
- 33. Code Editor Where I spend most of my day
- 34. Sublime Text 3
- 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. Quick Demo
- 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. How I Get Help With Code Before Google
- 39. Dash
- 40. Quick Demo
- 41. A List Apart blog post on Alfred and Dash: Read the Docs, Faster http://alistapart.com/blog/post/read-the-docs- faster
- 42. Version Control
- 43. I use to do this
- 44. Now, I use Git
- 45. But I don’t like the Terminal
- 46. I also don’t want to remember all this
- 47. So, I use Tower
- 49. Quick Demo
- 51. Why I use CodeKit • Compiles Sass • Live Reloads Browsers and Devices • Optimize Images • Autoprefixes • Checks Syntax • Combines and Minifies Files
- 52. “It's like steroids for web developers”
- 53. Quick Demo
- 54. smy.local:5757
- 55. Testing
- 56. BrowserStack
- 58. Firebug for IE!
- 59. Test on Real Devices
- 64. Performance
- 65. Chrome Dev Tool
- 66. Webpagetest.org
- 67. CMS Integration We use Hannon Hill’s Cascade Server at Wentworth
- 68. Done!
- 69. Wait, There Is One More Thing
- 70. Staying Up to Date The web is constantly changing and so is the resources and tools we use.
- 71. How I Stay Up to Date • Twitter • Blogs • Podcasts • Webinars • Weekly Newsletters
- 72. Twitter Best way to stay on top of news and trends about the web and Higher Ed
- 73. 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
- 74. Design Ideas and Inspirations • eduStyle http://edustyle.net • GalleryEDU http://galleryedu.com • HigherEd RWD Directory http://weedygarden.net/highered-rwd-directory
- 75. Weekly Newsletters • CSS Weekly • Fresh Brewed Frontend • HTML5 Weekly • JavaScript Weekly • Responsive Design Weekly • Web Design Weekly • WebTools Weekly • wpMail.me
- 76. Podcasts and Webinars Podcasts • ShopTalk Show • Treehouse Show • The Big Web Show • Sass Cast • The Web Ahead Webinars • Higher Ed Live • HubSpot • mStoner !
- 77. Final Thoughts
- 78. As I said earlier, at the end of the day, my job is to make websites.
- 79. But the way we work and tools we have available will continue to change over time.
- 80. For Example (tools) • CodeKit - CodeKitVersion 2 was released on March 2014. • Sublime Text - SublimeText 3 (in beta) was released early last year.
- 81. Final Thoughts • Be open to change • Pick your tools wisely • Invest time and get good
- 83. Any Questions?