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
2. YUYA SAITO CSSRADAR L O CyberAgent
3. Design is not just what it looks like and feels like. Design is how it works. - Steve Jobs “ ”
4. Layer of Experience Smoothing UI with Animation Copy, Transform and Combine Crafting Your Pattern Agenda
5. UI Side of CSS3
6. border-radius .selector { border-radius: 12px; }
7. gradient .selector { background-image: linear-gradient (to bottom, #444444, #999999); }
8. box-shadow .selector { box-shadow: 0px 0px 4px 0px #ffffff; }
9. text-shadow .selector { text-shadow: 1px 1px 3px #888; }
10. multiple-background .selector { background-image: url(bg1.png), url(bg2.png); }
11. @font-face @font-face { font-family: 'WebFont'; src: url('myfont.woff') format('woff'), url('myfont.ttf') format('truetype'); }
12. transform .selector { transform: translate(25px, 50px); transform: rotate(7.5deg); transform: scale(0.8); transform: skew(45deg, 30deg); transform-origin: top left; }
13. Layer of Experience
14. Layer of Web
15. Structure HTML Behavior JS Presentation CSS
16. Experience Layer
17. Critical Non-Critical Experience Layer
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/
19. Functionality Information Aesthetics Usability
20. Critical Non-Critical Aesthetics Usability Functionality Information
21. HTML CSS JS CSS3 JS
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 “ ”
23. http://www.amazon.co.jp/dp/4788509210 Emotional Design by Donald A. Norman
24. Progressive Enhancement
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 “ ”
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 “ ”
27. Know Capability of Browsers
28. http://caniuse.com/
29. http://mobilehtml5.org
30. Start with interaction and be subtle
31. Smoothing UI with Animation
32. We need to give users a sense of location in our applications, and transitions will play an important part in this. - Mark Cossey “ ”
33. Animation Transition ୯७ͰɺεςοϓͷΈͷ มԽͷ৔߹ ෳࡶͰɺ ෳ਺εςοϓ͕ ඞཁͳมԽͷ৔߹
34. Animatable Properties
35. http://oli.jp/2010/css-animatable-properties/
36. Transition Syntax
37. transition-property .selector { transition-property: opacity; } .selector { transition-property: opacity, color; } .selector { transition-property: all; }
38. transition-duration .selector { transition-duration: .15s; }
39. transition-delay .selector { transition-delay: .1s; }
40. transition-timing-function .selector { transition-timing-function: linear; }
41. http://cubic-bezier.com
42. transition .selector { transition: opacity .25s .1s linear; }
43. Animation Syntax
44. @keyframes Animation @keyframes animation-name { from { opacity : 0; } to { opacity : 1; } } @keyframes animation-name { 0% { opacity : 0; } 100% { opacity : 1; } }
45. @keyframes Animation @keyframes animation-name { 0% { opacity : 0; } 25% { opacity : .5; } 70% { opacity : .25; } 100% { opacity : 1; } }
46. animation-name // Animation Name .selector { animation-name: animation-name; }
47. animation-duration .selector { animation-duration: 6s; }
48. animation-delay .selector { animation-delay: 1500ms; }
49. animation-iteration-count // [Number] [infinite] .selector { animation-iteration-count: 1; }
50. animation-timing-function // [ease] [ease-in] [ease-out] // [ease-in-out] [linear] .selector { animation-timing-function: linear; }
51. animation-direction // [normal] [alternate] .selector { animation-direction: normal; }
52. animation .selector { animation: 6s 1500ms 1 linear normal; }
53. Examples of Animating UIs
54. https://github.com/jekyllbootstrap/theme-the-minimum/pull/1
56. http://tympanus.net/TipsTricks/CSS3TimedNotifications/
58. http://tinyurl.com/3d-image-transitions
60. http://jsfiddle.net/ten1seven/p9PwU/2/show/
62. http://lab.hakim.se/avgrund/
64. Copy, Transform and Combine
65. Innovative and Creative
66. Nobody starts out original. Need copying until the foundation of knowledge and understanding. - Kirby Ferguson “ ”
67. Copy
68. ֶͿ͸ɺ ·ͶͿ ֶͿ ͱಉݯͰɺ ·ͶΔ ਅࣅΔ ͱ΋ಉ͡ޠݯ
69. ⌘ + C ⌘ + V
70. https://path.com
71. $44Ͱ͸ͲΜͳ͜ͱ͕Ͱ͖Δͷ͔
72. http://dribbble.com
73. Dribbble for Front-end Devs
74. http://www.webinterfacelab.com
75. http://cssdeck.com
76. http://codepen.io
77. http://cssbutton.me
78. ·ͣ͸ਅࣅΔͱ͜Ζ͔Βελʔτɻ ୭΋͕͔ͦ͜Βελʔτ͍͖ͯ͠·͢ɻ
79. Transform
80. ≠  GUI
82. Good artists copy, great artists steal. - Pablo Picasso “ ”
83. HOW?
84. Ask Questions
85.  Ͳ͏ͯͦ͠ͷํ๏Ͱ࣮૷͞Ε͔ͨ  ΄͔ʹͲͷΑ͏ͳදݱ΍࣮૷ํ๏͕ ͔͋ͬͨ  ͲΜͳલఏ৚͕͔݅͋ͬͨɺ ͲΜͳ੍ݶ͕͋ͬͨͷ͔
86. Try It Yourself
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 “ ”
88. Feedback
89. Demo or it didn't happen. - codepen.io “ ”
90. Combine
91. 
92. ✖
93. 1 + 1 = 3
94. ίϯϏωʔγϣϯ͸৽͍͠΋ͷΛੜΈग़͢ େࣄͳݤɻ
95. $44͸͜ͷίϯϏωʔγϣϯʹ ڧ͍ݴޠͰ͢ɻ
97. keyframes transform: scale() border-radius gradient(radial ...) + + + +
98. Copy, Transform and Combine
99. Crafting Your Pattern
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 “ ”
101. http://bit.ly/ryan-singer-from-37signals
102. http://flic.kr/p/9v2Pgx
103. Copy + Transform + Combine UI Kit
104. http://www.premiumpixels.com/freebies/dark-ui-kit-psd/
105. http://365psd.com/day/2-63/
106. http://www.designkindle.com/2011/03/14/solid-ui-kit/
107. Dropdown Breadcrumb Pagination Alert Tab Navigation Button Modal Image slider Form
108. http://twitter.github.com/bootstrap/
109. http://foundation.zurb.com
110. ୯७ͳϑϨʔϜϫʔΫͱ͚ͯͩ͠Ͱ͸ͳ͘ 6*σβΠϯύλʔϯͷࢦ਑ͱͯ͠࢖͏ɻ
111. Create Collect # = Pattern
112. Garbage in, Garbage out.
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 “ ”
114. CSSRADAR L Thank You!
115. Appendix: CSS Online Tools
116. http://www.colorzilla.com/gradient-editor/
117. http://css3please.com/
118. http://css3generator.com/
119. http://prefixr.com/
120. http://www.dextronet.com/css-buttons-generator/
121. http://boxshadow.ru/
122. http://cubic-bezier.com/
123. http://border-image.com
124. http://flexiejs.com/playground/
125. http://www.aaronlumsden.com/multicol/
126. http://cssarrowplease.com/
127. http://proto.io/freebies/onoff/
128. http://apps.eky.hk/css-triangle-generator/
129. http://www.wordpressthemeshock.com/css-box-machine/
130. http://noisepng.com/
131. http://www.patternify.com/
132. http://bran.name/dump/data-uri-generator/