Post on 28-Jan-2015
description
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