Designing a Visually Appealing Website Using CSS3

Principles of web design and progressive enhancements using CSS3

Transcript

1. Designing a Visually Appealing Website Using CSS3 MARIO HERNANDEZ DesignsDrive.com 2012 DrupalCampLA
2. Front-end Developer and Web Designer Mario Hernandez 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. • Better designed websites appear easier to use • Generally people associate great design with something that works well Source: MailChimp.com Great design 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. Texture MARIO HERNANDEZ DesignsDrive.com 2012 DrupalCampLA
8. white space MARIO HERNANDEZ DesignsDrive.com 2012 DrupalCampLA
9. Typography MARIO HERNANDEZ DesignsDrive.com 2012 DrupalCampLA
10. Using CSS3 to achieve beauty is it safe? MARIO HERNANDEZ DesignsDrive.com 2012 DrupalCampLA
11. 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
12. Source: CSS3 for web designers book by Ethan Marcotte 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 DesignsDrive.com 2012 DrupalCampLA
13. Do websites need to look exactly the same in every browser? http://dowebsitesneedtolookexactlythesameineverybrowser.com/ MARIO HERNANDEZ DesignsDrive.com 2012 DrupalCampLA
14. Supported CSS3 Properties Property Supported In 5+ 10+ 3.6+ 11+ 9+ 5+ 10+ 3.6+ 11+ 5+ 10+ 3.6+ 11+ 9+ 5+ 10+ 3.6+ 11+ 9+ 5+ 10+ 3.6+ 11+ 9+ border-radius text-shadow box-shadow opacity RGBA MARIO HERNANDEZ DesignsDrive.com 2012 DrupalCampLA Source: CSS3Files.com
16. Let’s do this! MARIO HERNANDEZ DesignsDrive.com 2012 DrupalCampLA
17. Additional Resources By Dan Cederholm By Dan Cederholm By Ethan Marcotte • CSS3 Files: http://www.CSS3files.com • CSS3 Please: http://CSS3please.com • CSS Tricks: http://CSS-tricks.com
18. Contact me • Web: http://designsdrive.com • Email: designsdrive@gmail.com • Twitter: @designsdrive Download slides at: http://www.slideshare.net/marequi