Web Design Workflow and Tools that Make Life Easy
•
2 j'aime•2,330 vues
Slides from my talk at HighEdWeb New England: http://ne.highedweb.org/web-design-workflow-and-tools-that-make-life-easy/
Recommandé
Contenu connexe
Tendances
Tendances (20)
Similaire à Web Design Workflow and Tools that Make Life Easy
Similaire à Web Design Workflow and Tools that Make Life Easy (20)
Dernier
Dernier (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?