Successfully reported this slideshow.

Frontend 2010 beautiful design is all about the details

33

Share

Upcoming SlideShare
RESIDENTIAL DESIGN
RESIDENTIAL DESIGN
Loading in …3
×
1 of 54
1 of 54

More Related Content

Related Audiobooks

Free with a 14 day trial from Scribd

See all

Frontend 2010 beautiful design is all about the details

  1. 1. BEAUTIFUL DESIGN is all about the details NICK L A @nickla ndesign-studio.com
  2. 2. A BOUT M E
  3. 3. N.Design Studio IconDock Best Web Gallery Web Designer Wall Themify
  4. 4. BEAUTIFUL = F INE D ETAILS + GREAT USER EXPERIENCE
  5. 5. W ORK #1
  6. 6. N.DESIGN STUDIO ndesign-studio.com
  7. 7. INTRO BOX
  8. 8. VARIOUS HEADERS
  9. 9. POST TYPE ICONS
  10. 10. OUT OF THE BOX
  11. 11. NAVIGATION MINI ICONS
  12. 12. HEADER / BREADCRUMB
  13. 13. W ORK #2
  14. 14. THEMIFY themify.me
  15. 15. SMILE
  16. 16. POST NOTES
  17. 17. CUTOUT EFFECT
  18. 18. AGAIN, OUT OF THE BOX
  19. 19. P IXEL DETAILS
  20. 20. HOMEPAGE FEATURE BOX
  21. 21. TOP BAR
  22. 22. FORM FIELDS
  23. 23. WHITE SPACE ISSUES
  24. 24. QUICK SOLUTION: BORDER
  25. 25. CONTRAST ISSUES
  26. 26. CSS3 TRICK: BOX-SHADOW
  27. 27. HOWEVER, NOT CROSS-BROWSERS
  28. 28. SOLUTION: GRADIENT PNG
  29. 29. FINAL RESULT
  30. 30. CSS3 E NHANCEMENT
  31. 31. COMMONLY USED CSS3 P ROPERTIES • RGBA • Border-radius • Box-shadow • Text-shadow
  32. 32. RGBA
  33. 33. RGBA BORDER
  34. 34. BORDER-RADIUS
  35. 35. BOX-SHADOW
  36. 36. HOVER BOX-SHADOW
  37. 37. TEXT-SHADOW
  38. 38. J AVASCRIPT E NHANCEMENT
  39. 39. HOVER
  40. 40. TABS
  41. 41. SLIDE OPEN
  42. 42. SLIDER
  43. 43. MODAL BOX
  44. 44. E XAMPLES
  45. 45. KALEIDOSCOPE APP kaleidoscopeapp.com
  46. 46. 45 ROYALE 45royale.com
  47. 47. BASECAMP basecamphq.com
  48. 48. ANALOG analog.coop
  49. 49. SUSHI & ROBOTS sushiandrobots.com
  50. 50. PICTORY pictorymag.com
  51. 51. FOR A BEAUTIFUL WEB forabeautifulweb.com
  52. 52. T HANK YOU ☺

×