Making Design Simpler for Developers

Making Design Simpler for Developers


Shawn Wildermuth

October 30, 2013


  1. <anglebrackets/> Making Design Simple for Web Developers Shawn Wildermuth Microsoft

    MVP, Author, and Speaker
  2. 2 Introduction  Overview  Do You Need Design

    Skills?  Using Images  CSS in the Browser  Bootstrap  Templates
  3. 3 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 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 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 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 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 Takeaways…  This demo and slides will be

    available:   Important Links  Bootstrap   Paint.NET   iStockPhoto   My Company 
  14. Questions? Thank you! Don’t forget to enter your evaluation of

    this session using EventBoard!