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

5. BEAUTIFUL
=
F INE D ETAILS
+
GREAT USER EXPERIENCE

6. W ORK #1

7. N.DESIGN STUDIO
ndesign-studio.com

8. INTRO BOX

9. VARIOUS HEADERS

10. POST TYPE ICONS

11. OUT OF THE BOX

12. NAVIGATION MINI ICONS

13. HEADER / BREADCRUMB

14. W ORK #2

15. THEMIFY
themify.me

16. SMILE

17. POST NOTES

18. CUTOUT EFFECT

19. AGAIN, OUT OF THE BOX

20. P IXEL DETAILS

21. HOMEPAGE FEATURE BOX

22. TOP BAR

23. FORM FIELDS

24. WHITE SPACE ISSUES

25. QUICK SOLUTION: BORDER

26. CONTRAST ISSUES

27. CSS3 TRICK: BOX-SHADOW

28. HOWEVER, NOT CROSS-BROWSERS

29. SOLUTION: GRADIENT PNG

31. FINAL RESULT

32. CSS3 E NHANCEMENT

33. COMMONLY USED
CSS3 P ROPERTIES
• RGBA
• Border-radius
• Box-shadow
• Text-shadow

34. RGBA

35. RGBA BORDER

36. BORDER-RADIUS

37. BOX-SHADOW

38. HOVER BOX-SHADOW

39. TEXT-SHADOW

40. J AVASCRIPT E NHANCEMENT

41. HOVER

42. TABS

43. SLIDE OPEN

44. SLIDER

45. MODAL BOX

46. E XAMPLES

47. KALEIDOSCOPE APP
kaleidoscopeapp.com

48. 45 ROYALE
45royale.com

49. BASECAMP
basecamphq.com

50. ANALOG
analog.coop

51. SUSHI & ROBOTS
sushiandrobots.com

52. PICTORY
pictorymag.com

53. FOR A BEAUTIFUL WEB
forabeautifulweb.com

54. T HANK YOU ☺