User Interface Design Pattern With CSS3

2012/09/08
HTML5 Conference 2012の講演資料です。

Transcript

1. USER INTERFACE
   DESIGN PATTERN
   WITH CSS3
   HTML5 CONFERENCE 2012
   SEPTEMBER 8TH 4PM
   

   View Slide

2. YUYA SAITO
   CSSRADAR
   L
   O CyberAgent
   

   View Slide

3. Design is not just what it looks like and feels like.
   Design is how it works.
   - Steve Jobs
   “
   ”
   

   View Slide

4. Layer of Experience
   Smoothing UI with Animation
   Copy, Transform and Combine
   Crafting Your Pattern
   Agenda
   

   View Slide

5. UI Side of CSS3
   

   View Slide

6. border-radius
   .selector {
   border-radius: 12px;
   }
   

   View Slide

7. gradient
   .selector {
   background-image:
   linear-gradient
   (to bottom, #444444, #999999);
   }
   

   View Slide

8. box-shadow
   .selector {
   box-shadow: 0px 0px 4px 0px #ffffff;
   }
   

   View Slide

9. text-shadow
   .selector {
   text-shadow: 1px 1px 3px #888;
   }
   

   View Slide

10. multiple-background
    .selector {
    background-image:
    url(bg1.png),
    url(bg2.png);
    }
    

    View Slide

11. @font-face
    @font-face {
    font-family: 'WebFont';
    src: url('myfont.woff') format('woff'),
    url('myfont.ttf') format('truetype');
    }
    

    View Slide

12. transform
    .selector {
    transform: translate(25px, 50px);
    transform: rotate(7.5deg);
    transform: scale(0.8);
    transform: skew(45deg, 30deg);
    transform-origin: top left;
    }
    

    View Slide

13. Layer of Experience
    

    View Slide

14. Layer of Web
    

    View Slide

15. Structure
    HTML
    Behavior
    JS
    Presentation
    CSS
    

    View Slide

16. Experience Layer
    

    View Slide

17. Critical
    Non-Critical
    Experience Layer
    

    View Slide

18. User Experience Hierarchy of Needs
    Based on The hierarchy of needs by Abraham Maslow
    http://uxmovement.com/thinking/are-you-meeting-the-user-experience-hierarchy-of-needs/
    

    View Slide

19. Functionality
    Information
    Aesthetics
    Usability
    

    View Slide

20. Critical
    Non-Critical
    Aesthetics
    Usability
    Functionality
    Information
    

    View Slide

21. HTML
    CSS
    JS
    CSS3
    JS
    

    View Slide

22. The design of your website can not only lead to
    a positive user experience,
    but it also helps your visitors to reach their
    goals more efficiently.
    - Sabina Idler
    “
    ”
    

    View Slide

23. http://www.amazon.co.jp/dp/4788509210
    Emotional Design
    by Donald A. Norman
    

    View Slide

24. Progressive Enhancement
    

    View Slide

25. Progressive enhancement [...] allows the Web document
    designer, visual designer, and developer to play to their own
    strengths while enabling each to deliver the information
    and interactivity demanded by users, while embracing
    accessibility, future compatibility, and determining
    user experience based on the capabilities of new devices.
    - Steven Champeon
    “
    ”
    

    View Slide

26. Progressive enhancement uses web technologies in a
    layered fashion that allows everyone to access the basic
    content and functionality of a web page, using any browser
    or Internet connection, while also providing an enhanced
    version of the page to those with more advanced browser
    software or better bandwidth.
    - Wikipedia
    “
    ”
    

    View Slide

27. Know Capability of Browsers
    

    View Slide

28. http://caniuse.com/
    

    View Slide

29. http://mobilehtml5.org
    

    View Slide

30. Start with interaction and be subtle
    

    View Slide

31. Smoothing UI with Animation
    

    View Slide

32. We need to give users a sense of location in our
    applications, and transitions will play an important part in
    this.
    - Mark Cossey
    “
    ”
    

    View Slide

33. Animation
    Transition
    ୯७ͰɺεςοϓͷΈͷ
    มԽͷ৔߹
    ෳࡶͰɺ
    ෳ਺εςοϓ͕
    ඞཁͳมԽͷ৔߹
    

    View Slide

34. Animatable Properties
    

    View Slide

35. http://oli.jp/2010/css-animatable-properties/
    

    View Slide

36. Transition Syntax
    

    View Slide

37. transition-property
    .selector {
    transition-property: opacity;
    }
    .selector {
    transition-property: opacity, color;
    }
    .selector {
    transition-property: all;
    }
    

    View Slide

38. transition-duration
    .selector {
    transition-duration: .15s;
    }
    

    View Slide

39. transition-delay
    .selector {
    transition-delay: .1s;
    }
    

    View Slide

40. transition-timing-function
    .selector {
    transition-timing-function: linear;
    }
    

    View Slide

41. http://cubic-bezier.com
    

    View Slide

42. transition
    .selector {
    transition: opacity .25s .1s linear;
    }
    

    View Slide

43. Animation Syntax
    

    View Slide

44. @keyframes Animation
    @keyframes animation-name {
    from { opacity : 0; }
    to { opacity : 1; }
    }
    @keyframes animation-name {
    0% { opacity : 0; }
    100% { opacity : 1; }
    }
    

    View Slide

45. @keyframes Animation
    @keyframes animation-name {
    0% { opacity : 0; }
    25% { opacity : .5; }
    70% { opacity : .25; }
    100% { opacity : 1; }
    }
    

    View Slide

46. animation-name
    // Animation Name
    .selector {
    animation-name: animation-name;
    }
    

    View Slide

47. animation-duration
    .selector {
    animation-duration: 6s;
    }
    

    View Slide

48. animation-delay
    .selector {
    animation-delay: 1500ms;
    }
    

    View Slide

49. animation-iteration-count
    // [Number] [infinite]
    .selector {
    animation-iteration-count: 1;
    }
    

    View Slide

50. animation-timing-function
    // [ease] [ease-in] [ease-out]
    // [ease-in-out] [linear]
    .selector {
    animation-timing-function: linear;
    }
    

    View Slide

51. animation-direction
    // [normal] [alternate]
    .selector {
    animation-direction: normal;
    }
    

    View Slide

52. animation
    .selector {
    animation: 6s 1500ms 1 linear normal;
    }
    

    View Slide

53. Examples of Animating UIs
    

    View Slide

54. https://github.com/jekyllbootstrap/theme-the-minimum/pull/1
    

    View Slide

55. View Slide

56. http://tympanus.net/TipsTricks/CSS3TimedNotifications/
    

    View Slide

57. View Slide

58. http://tinyurl.com/3d-image-transitions
    

    View Slide

59. View Slide

60. http://jsfiddle.net/ten1seven/p9PwU/2/show/
    

    View Slide

61. View Slide

62. http://lab.hakim.se/avgrund/
    

    View Slide

63. View Slide

64. Copy, Transform and Combine
    

    View Slide

65. Innovative and Creative
    

    View Slide

66. Nobody starts out original.
    Need copying until the foundation of knowledge and
    understanding.
    - Kirby Ferguson
    “
    ”
    

    View Slide

67. Copy
    

    View Slide

68. ֶͿ͸ɺ
    ·ͶͿ ֶͿ
    ͱಉݯͰɺ
    ·ͶΔ ਅࣅΔ
    ͱ΋ಉ͡ޠݯ
    

    View Slide

69. ⌘ + C ⌘ + V
    

    View Slide

70. https://path.com
    

    View Slide

71. $44Ͱ͸ͲΜͳ͜ͱ͕Ͱ͖Δͷ͔
    

    View Slide

72. http://dribbble.com
    

    View Slide

73. Dribbble for Front-end Devs
    

    View Slide

74. http://www.webinterfacelab.com
    

    View Slide

75. http://cssdeck.com
    

    View Slide

76. http://codepen.io
    

    View Slide

77. http://cssbutton.me
    

    View Slide

78. ·ͣ͸ਅࣅΔͱ͜Ζ͔Βελʔτɻ
    ୭΋͕͔ͦ͜Βελʔτ͍͖ͯ͠·͢ɻ
    

    View Slide

79. Transform
    

    View Slide

80. ≠
     GUI
    

    View Slide

81. View Slide

82. Good artists copy, great artists steal.
    - Pablo Picasso
    “
    ”
    

    View Slide

83. HOW?
    

    View Slide

84. Ask Questions
    

    View Slide

85. Ͳ͏ͯͦ͠ͷํ๏Ͱ࣮૷͞Ε͔ͨ
    ΄͔ʹͲͷΑ͏ͳදݱ΍࣮૷ํ๏͕
    ͔͋ͬͨ
    ͲΜͳલఏ৚͕͔݅͋ͬͨɺ
    ͲΜͳ੍ݶ͕͋ͬͨͷ͔
    

    View Slide

86. Try It Yourself
    

    View Slide

87. There is no substitute for firsthand experience when
    creating things. The unique aspects of who you are,
    including qualities you may not like about yourself, are an
    asset when it comes to creative thinking. No one can see
    the world exactly the way that you do.
    - Scott Berkun
    “
    ”
    

    View Slide

88. Feedback
    

    View Slide

89. Demo or it didn't happen.
    - codepen.io
    “
    ”
    

    View Slide

90. Combine
    

    View Slide

91. 
    

    View Slide

92. ✖
    

    View Slide

93. 1 + 1 = 3
    

    View Slide

94. ίϯϏωʔγϣϯ͸৽͍͠΋ͷΛੜΈग़͢
    େࣄͳݤɻ
    

    View Slide

95. $44͸͜ͷίϯϏωʔγϣϯʹ
    ڧ͍ݴޠͰ͢ɻ
    

    View Slide

96. View Slide

97. keyframes
    transform: scale()
    border-radius
    gradient(radial ...)
    +
    +
    +
    +
    

    View Slide

98. Copy, Transform and Combine
    

    View Slide

99. Crafting Your Pattern
    

    View Slide

100. A pattern doesn’t need to have a name, and it doesn’t have
     to come from a book. A pattern is some design trick that is
     lying around in your head, and when the right problem rises
     up in front of your nose, the pattern pops into your mind as
     a solution.
     - Ryan Singer
     “
     ”
     

     View Slide

101. http://bit.ly/ryan-singer-from-37signals
     

     View Slide

102. http://flic.kr/p/9v2Pgx
     

     View Slide

103. Copy + Transform + Combine UI Kit
     

     View Slide

104. http://www.premiumpixels.com/freebies/dark-ui-kit-psd/
     

     View Slide

105. http://365psd.com/day/2-63/
     

     View Slide

106. http://www.designkindle.com/2011/03/14/solid-ui-kit/
     

     View Slide

107. Dropdown
     Breadcrumb
     Pagination
     Alert
     Tab
     Navigation
     Button
     Modal
     Image slider
     Form
     

     View Slide

108. http://twitter.github.com/bootstrap/
     

     View Slide

109. http://foundation.zurb.com
     

     View Slide

110. ୯७ͳϑϨʔϜϫʔΫͱ͚ͯͩ͠Ͱ͸ͳ͘
     6*σβΠϯύλʔϯͷࢦ਑ͱͯ͠࢖͏ɻ
     

     View Slide

111. Create
     Collect # = Pattern
     

     View Slide

112. Garbage in, Garbage out.
     

     View Slide

113. I’ve missed more than 9000 shots in my
     career. I’ve lost almost 300 games. 26 times,
     I’ve been trusted to take the game winning
     shot and missed. I’ve failed over and over
     and over again in my life. And that is why I
     succeed.
     - Michael Jordan
     “
     ”
     

     View Slide

114. CSSRADAR
     L
     Thank You!
     

     View Slide

115. Appendix: CSS Online Tools
     

     View Slide

116. http://www.colorzilla.com/gradient-editor/
     

     View Slide

117. http://css3please.com/
     

     View Slide

118. http://css3generator.com/
     

     View Slide

119. http://prefixr.com/
     

     View Slide

120. http://www.dextronet.com/css-buttons-generator/
     

     View Slide

121. http://boxshadow.ru/
     

     View Slide

122. http://cubic-bezier.com/
     

     View Slide

123. http://border-image.com
     

     View Slide

124. http://flexiejs.com/playground/
     

     View Slide

125. http://www.aaronlumsden.com/multicol/
     

     View Slide

126. http://cssarrowplease.com/
     

     View Slide

127. http://proto.io/freebies/onoff/
     

     View Slide

128. http://apps.eky.hk/css-triangle-generator/
     

     View Slide

129. http://www.wordpressthemeshock.com/css-box-machine/
     

     View Slide

130. http://noisepng.com/
     

     View Slide

131. http://www.patternify.com/
     

     View Slide

132. http://bran.name/dump/data-uri-generator/
     

     View Slide