Making Design Simple for Web Developers Shawn Wildermuth Microsoft MVP, Author, and Speaker [email protected] 

2 http://www.anglebrackets.org Introduction  Overview  Do You Need Design Skills?  Using Images  CSS in the Browser  Bootstrap  Templates 

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… 

Demo Simple versus Pretty 

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 

Demo Images 

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) 

Demo CSS 

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 

Demo Using Bootstrap 

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 

Demo Bootstrap Templates 

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 

Questions? Thank you! Don’t forget to enter your evaluation of this session using EventBoard!