$30 off During Our Annual Pro Sale. View Details »

Making Design Simpler for Developers

Making Design Simpler for Developers

Shawn Wildermuth

October 30, 2013
Tweet

More Decks by Shawn Wildermuth

Other Decks in Programming

Transcript


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

    View Slide

  2. 2 http://www.anglebrackets.org
    Introduction
     Overview

    Do You Need Design Skills?

    Using Images

    CSS in the Browser

    Bootstrap

    Templates

    View Slide

  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…

    View Slide

  4. Demo
    Simple versus Pretty

    View Slide

  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

    View Slide

  6. Demo
    Images

    View Slide

  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)

    View Slide

  8. Demo
    CSS

    View Slide

  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

    View Slide

  10. Demo
    Using Bootstrap

    View Slide

  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

    View Slide

  12. Demo
    Bootstrap Templates

    View Slide

  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

    View Slide

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

    View Slide