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

Designing a Visually Appealing Website Using CSS3

Embed Size (px)

DESCRIPTION

Design principles and progressive enhancements

Citation preview

Page 1: Designing a Visually Appealing Website Using CSS3

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

Page 2: Designing a Visually Appealing Website Using CSS3

Front-end Developer and Web Designer

Mario Hernandez

Web: http://designsdrive.com

Email: [email protected]

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

Page 3: Designing a Visually Appealing Website Using CSS3

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

Page 4: Designing a Visually Appealing Website Using CSS3

• 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

Page 5: Designing a Visually Appealing Website Using CSS3

Elements of great web design

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

Page 6: Designing a Visually Appealing Website Using CSS3

COLOR

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

Page 7: Designing a Visually Appealing Website Using CSS3

COLOURLovers.com

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

Source: ColourLovers.com

Page 8: Designing a Visually Appealing Website Using CSS3

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

Page 9: Designing a Visually Appealing Website Using CSS3

SubtlePatterns.com

Source: SubtlePatterns.com

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

Page 10: Designing a Visually Appealing Website Using CSS3

white space

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

Page 11: Designing a Visually Appealing Website Using CSS3

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

Page 12: Designing a Visually Appealing Website Using CSS3

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

Page 13: Designing a Visually Appealing Website Using CSS3

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

Page 14: Designing a Visually Appealing Website Using CSS3

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

Page 15: Designing a Visually Appealing Website Using CSS3

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

Page 16: Designing a Visually Appealing Website Using CSS3

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

Page 17: Designing a Visually Appealing Website Using CSS3
Page 18: Designing a Visually Appealing Website Using CSS3

Let’s do this!

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

Page 19: Designing a Visually Appealing Website Using CSS3

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

Page 20: Designing a Visually Appealing Website Using CSS3

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

• Email: [email protected]

• Twitter: @designsdrive

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