Making Design Simpler for Developers

Transcript

1. 
   Making Design Simple for Web Developers
   Shawn Wildermuth
   Microsoft MVP, Author, and Speaker
   shawn@wilderminds.com
   

   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