Making Design Simpler for Developers

Transcript

1. <anglebrackets/> Making Design Simple for Web Developers Shawn Wildermuth Microsoft MVP, Author, and Speaker shawn@wilderminds.com
2. 2 http://www.anglebrackets.org Introduction  Overview  Do You Need Design Skills?  Using Images  CSS in the Browser  Bootstrap  Templates
3. 3 http://www.anglebrackets.org Do You Need Design Skills?  Aren’t designers always on your web projects?  I didn’t think so…  Your job is to make it look acceptable, not necessarily polished  Design != Art  Good Design is as much about the user as it is about art…  Simple and clean is almost always better than pretty…
4. Demo Simple versus Pretty
5. 5 http://www.anglebrackets.org Images  Using Images is a good way to spruce up a site design  Some developers are overwhelmed with Photoshop (et al.)  Start with Stock Photos  Yeah, license them – copying images from Internet search isn’t legal  Use simple tools to crop, size, fix  Create small images without sacrificing quality
6. Demo Images
7. 7 http://www.anglebrackets.org Working with CSS in the Browser  Editing Your CSS directly in the browser makes it easier!  See real-time changes to your CSS  Helps you learn CSS  Chrome Tools and Firebug are both fine  IE Tools are ok in IE9+ but still prefer the other toolsets  Dynamic Stylesheet Language can help too  LESS or SASS (but use LESS)
8. Demo CSS
9. 9 http://www.anglebrackets.org Bootstrap  A design framework can help you achieve great looking sites…  …without manually creating all the design by hand  Helps with Responsive Design too (e.g. mobile and tablet sizing)  Bootstrap 2 or 3 are both great starting points  Though Zerb Foundation and Semantic are both getting fans too
10. Demo Using Bootstrap
11. 11 http://www.anglebrackets.org Templates  Can really shortcut a site design  Have a risk of looking like other existing sites…  Unless you buy an exclusive license but can be expensive  Template is more than just styling  It will include examples and  Bootstrap 2 or 3 are both great starting points  Though Zerb Foundation and Semantic are both getting fans too
12. Demo Bootstrap Templates
13. 13 http://www.anglebrackets.org Takeaways…  This demo and slides will be available:  http://wildermuth.com  Important Links  Bootstrap  http://getbootstrap.com  Paint.NET  http://www.getpaint.net  iStockPhoto  http://istockphoto.com  My Company  http://wilderminds.com
14. Questions? Thank you! Don’t forget to enter your evaluation of this session using EventBoard!