Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Making Design Simpler for Developers

Making Design Simpler for Developers

Shawn Wildermuth

October 30, 2013

More Decks by Shawn Wildermuth

Other Decks in Programming


  1. 2 http://www.anglebrackets.org Introduction  Overview  Do You Need Design

    Skills?  Using Images  CSS in the Browser  Bootstrap  Templates
  2. 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…
  3. 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
  4. 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)
  5. 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
  6. 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
  7. 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