Design principles and progressive enhancements

1. Designing a Visually Appealing
Website Using CSS3
MARIO HERNANDEZ
DesignsDrive.com 2012 DrupalCampLA

2. Mario Hernandez
Front-end Developer and Web Designer
Web: http://designsdrive.com
Email: designsdrive@gmail.com
Twitter: @designsdrive
LinkedIn: http://linkedin.com/in/designsdrive
MARIO HERNANDEZ
DesignsDrive.com 2012 DrupalCampLA

3. Great design
• A well designed product gives the impression that it works well
Source: Apple.com
MARIO HERNANDEZ
DesignsDrive.com 2012 DrupalCampLA

4. Great design
• Better designed
websites appear
easier to use
• Generally people
associate great
design with
something that
works well
Source: MailChimp.com
MARIO HERNANDEZ
DesignsDrive.com 2012 DrupalCampLA
Source: MailChimp.com

5. Elements of great web design
MARIO HERNANDEZ
DesignsDrive.com 2012 DrupalCampLA

6. COLOR
MARIO HERNANDEZ
DesignsDrive.com 2012 DrupalCampLA

7. COLOURLovers.com
Source: ColourLovers.com
MARIO HERNANDEZ
DesignsDrive.com 2012 DrupalCampLA

8. Texture
MARIO HERNANDEZ
DesignsDrive.com 2012 DrupalCampLA

9. SubtlePatterns.com
Source: SubtlePatterns.com
MARIO HERNANDEZ
DesignsDrive.com 2012 DrupalCampLA

10. white space
MARIO HERNANDEZ
DesignsDrive.com 2012 DrupalCampLA

11. Typography
MARIO HERNANDEZ
DesignsDrive.com 2012 DrupalCampLA

12. Using CSS3 to achieve beauty
is it safe?
MARIO HERNANDEZ
DesignsDrive.com 2012 DrupalCampLA

13. Progressive enhancements
Uses web technologies in a layered fashion that
allows everyone to access the basic content and
functionality of a web page, while also providing an
enhanced version of the page to those with more
advanced browser software or better bandwidth.
MARIO HERNANDEZ
DesignsDrive.com 2012 DrupalCampLA

14. CSS3
• Use CSS3 to target the experience layer
• Focus on the properties that are widely supported
• Do not sacrifice functionality for looks
Critical Non-critical
Branding Interaction
Usability Visual rewards
Accessibility Feedback
Layout Movement
MARIO HERNANDEZ
2012 DrupalCampLA
Source: CSS3 D r i v e . c o m book by Ethan Marcotte
D e s i g n s for web designers

15. Do websites need to look
exactly the same in every
browser?
http://dowebsitesneedtolookexactlythesameineverybrowser.com/
MARIO HERNANDEZ
DesignsDrive.com 2012 DrupalCampLA

16. Supported CSS3 Properties
Property Supported In
border-radius 5+ 10+ 3.6+ 11+ 9+
text-shadow 5+ 10+ 3.6+ 11+
box-shadow
5+ 10+ 3.6+ 11+ 9+
opacity
5+ 10+ 3.6+ 11+ 9+
RGBA
Source: CSS3Files.com 5+ 10+ 3.6+ 11+ 9+
MARIO HERNANDEZ
DesignsDrive.com 2012 DrupalCampLA

18. Let’s do this!
MARIO HERNANDEZ
DesignsDrive.com 2012 DrupalCampLA

19. Additional Resources
• CSS3 Files: http://www.CSS3files.com
• CSS3 Please: http://CSS3please.com
• CSS Tricks: http://CSS-tricks.com
By Dan Cederholm By Dan Cederholm By Ethan Marcotte

20. Contact me
• Web: http://designsdrive.com
• Email: designsdrive@gmail.com
• Twitter: @designsdrive
Download slides at:
http://www.slideshare.net/marequi