Designing a Visually Appealing Website Using CSS3

MARIO HERNANDEZD e s i g n s D r i v e . c o m 2012 DrupalCampLA

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 HERNANDEZD e s i g n s D r i v e . c o m 2012 DrupalCampLA

Great design

• A well designed product gives the impression that it works well

Source: Apple.com

MARIO HERNANDEZD e s i g n s D r i v e . c o m 2012 DrupalCampLA

• Better designed websites appear easier to use

• Generally people associate great design with something that works well

Source: MailChimp.com

Great design

MARIO HERNANDEZD e s i g n s D r i v e . c o m 2012 DrupalCampLA

Source: MailChimp.com

Elements of great web design

MARIO HERNANDEZD e s i g n s D r i v e . c o m 2012 DrupalCampLA

COLOR

MARIO HERNANDEZD e s i g n s D r i v e . c o m 2012 DrupalCampLA

COLOURLovers.com

MARIO HERNANDEZD e s i g n s D r i v e . c o m 2012 DrupalCampLA

Source: ColourLovers.com

TextureMARIO HERNANDEZD e s i g n s D r i v e . c o m 2012 DrupalCampLA

SubtlePatterns.com

Source: SubtlePatterns.com

MARIO HERNANDEZD e s i g n s D r i v e . c o m 2012 DrupalCampLA

white space

MARIO HERNANDEZD e s i g n s D r i v e . c o m 2012 DrupalCampLA

TypographyMARIO HERNANDEZD e s i g n s D r i v e . c o m 2012 DrupalCampLA

Using CSS3 to achieve beauty

is it safe?

MARIO HERNANDEZD e s i g n s D r i v e . c o m 2012 DrupalCampLA

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 HERNANDEZD e s i g n s D r i v e . c o m 2012 DrupalCampLA

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 HERNANDEZD e s i g n s D r i v e . c o m 2012 DrupalCampLA

Do websites need to look exactly the same in every

browser?http://dowebsitesneedtolookexactlythesameineverybrowser.com/

MARIO HERNANDEZD e s i g n s D r i v e . c o m 2012 DrupalCampLA

Supported CSS3 PropertiesProperty 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 HERNANDEZD e s i g n s D r i v e . c o m 2012 DrupalCampLA

Source: CSS3Files.com

Let’s do this!

MARIO HERNANDEZD e s i g n s D r i v e . c o m 2012 DrupalCampLA

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

Contact me• Web: http://designsdrive.com

• Email: designsdrive@gmail.com

• Twitter: @designsdrive

Download slides at: http://www.slideshare.net/marequi