Your SlideShare is downloading. ×
Frontend 2010   beautiful design is all about the details
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

Frontend 2010 beautiful design is all about the details

28,922
views

Published on


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

No Downloads
Views
Total Views
28,922
On Slideshare
0
From Embeds
0
Number of Embeds
14
Actions
Shares
0
Downloads
505
Comments
0
Likes
33
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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