BEAUTIFUL DESIGN
is all about the details




NICK L A
@nickla
ndesign-studio.com
A BOUT M E
N.Design Studio   IconDock   Best Web Gallery   Web Designer Wall   Themify
BEAUTIFUL
     =
    F INE D ETAILS
          +
GREAT USER EXPERIENCE
W ORK #1
N.DESIGN STUDIO
ndesign-studio.com
INTRO BOX
VARIOUS HEADERS
POST TYPE ICONS
OUT OF THE BOX
NAVIGATION MINI ICONS
HEADER / BREADCRUMB
W ORK #2
THEMIFY
themify.me
SMILE
POST NOTES
CUTOUT EFFECT
AGAIN, OUT OF THE BOX
P IXEL DETAILS
HOMEPAGE FEATURE BOX
TOP BAR
FORM FIELDS
WHITE SPACE ISSUES
QUICK SOLUTION: BORDER
CONTRAST ISSUES
CSS3 TRICK: BOX-SHADOW
HOWEVER, NOT CROSS-BROWSERS
SOLUTION: GRADIENT PNG
FINAL RESULT
CSS3 E NHANCEMENT
COMMONLY USED
CSS3 P ROPERTIES

•   RGBA
•   Border-radius
•   Box-shadow
•   Text-shadow
RGBA
RGBA BORDER
BORDER-RADIUS
BOX-SHADOW
HOVER BOX-SHADOW
TEXT-SHADOW
J AVASCRIPT E NHANCEMENT
HOVER
TABS
SLIDE OPEN
SLIDER
MODAL BOX
E XAMPLES
KALEIDOSCOPE APP
kaleidoscopeapp.com
45 ROYALE
45royale.com
BASECAMP
basecamphq.com
ANALOG
analog.coop
SUSHI & ROBOTS
sushiandrobots.com
PICTORY
pictorymag.com
FOR A BEAUTIFUL WEB
forabeautifulweb.com
T HANK YOU ☺
Frontend 2010   beautiful design is all about the details
Frontend 2010   beautiful design is all about the details
Upcoming SlideShare
Loading in …5
×

Frontend 2010 beautiful design is all about the details

29,776 views

Published on

0 Comments
33 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
29,776
On SlideShare
0
From Embeds
0
Number of Embeds
15,822
Actions
Shares
0
Downloads
507
Comments
0
Likes
33
Embeds 0
No embeds

No notes for slide

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 ☺

×