Making Design Simpler for Developers

Making Design Simpler for Developers

41ea68e40ed39c5392cbce8ab0a7d720?s=128

Shawn Wildermuth

October 30, 2013
Tweet

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!