Designing a Visually Appealing Website Using CSS3

1,189 views
1,026 views

Published on

Design principles and progressive enhancements

Published in: Design, Technology, Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,189
On SlideShare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Designing a Visually Appealing Website Using CSS3

  1. 1. Designing a Visually Appealing Website Using CSS3MARIO HERNANDEZDesignsDrive.com 2012 DrupalCampLA
  2. 2. Mario Hernandez Front-end Developer and Web Designer Web: http://designsdrive.com Email: designsdrive@gmail.com Twitter: @designsdrive LinkedIn: http://linkedin.com/in/designsdriveMARIO HERNANDEZDesignsDrive.com 2012 DrupalCampLA
  3. 3. Great design • A well designed product gives the impression that it works wellSource: Apple.com MARIO HERNANDEZ DesignsDrive.com 2012 DrupalCampLA
  4. 4. Great design• Better designed websites appear easier to use• Generally people associate great design with something that works wellSource: MailChimp.com MARIO HERNANDEZ DesignsDrive.com 2012 DrupalCampLA Source: MailChimp.com
  5. 5. Elements of great web designMARIO HERNANDEZDesignsDrive.com 2012 DrupalCampLA
  6. 6. COLORMARIO HERNANDEZDesignsDrive.com 2012 DrupalCampLA
  7. 7. COLOURLovers.comSource: ColourLovers.com MARIO HERNANDEZ DesignsDrive.com 2012 DrupalCampLA
  8. 8. TextureMARIO HERNANDEZDesignsDrive.com 2012 DrupalCampLA
  9. 9. SubtlePatterns.comSource: SubtlePatterns.com MARIO HERNANDEZ DesignsDrive.com 2012 DrupalCampLA
  10. 10. white spaceMARIO HERNANDEZDesignsDrive.com 2012 DrupalCampLA
  11. 11. TypographyMARIO HERNANDEZDesignsDrive.com 2012 DrupalCampLA
  12. 12. Using CSS3 to achieve beauty is it safe?MARIO HERNANDEZDesignsDrive.com 2012 DrupalCampLA
  13. 13. Progressive enhancementsUses web technologies in a layered fashion thatallows everyone to access the basic content andfunctionality of a web page, while also providing anenhanced version of the page to those with moreadvanced browser software or better bandwidth.MARIO HERNANDEZDesignsDrive.com 2012 DrupalCampLA
  14. 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 DrupalCampLASource: CSS3 D r i v e . c o m book by Ethan Marcotte D e s i g n s for web designers
  15. 15. Do websites need to look exactly the same in every browser? http://dowebsitesneedtolookexactlythesameineverybrowser.com/MARIO HERNANDEZDesignsDrive.com 2012 DrupalCampLA
  16. 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+ RGBASource: CSS3Files.com 5+ 10+ 3.6+ 11+ 9+ MARIO HERNANDEZ DesignsDrive.com 2012 DrupalCampLA
  17. 17. Let’s do this!MARIO HERNANDEZDesignsDrive.com 2012 DrupalCampLA
  18. 18. Additional Resources• CSS3 Files: http://www.CSS3files.com• CSS3 Please: http://CSS3please.com• CSS Tricks: http://CSS-tricks.comBy Dan Cederholm By Dan Cederholm By Ethan Marcotte
  19. 19. Contact me• Web: http://designsdrive.com• Email: designsdrive@gmail.com• Twitter: @designsdriveDownload slides at:http://www.slideshare.net/marequi

×