Pro Yearly is on sale from $80 to $50! »

User Interface Design Pattern With CSS3

32f242f75b63e7174b493446de54a6b8?s=47 Yuya Saito
September 08, 2012

User Interface Design Pattern With CSS3

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

32f242f75b63e7174b493446de54a6b8?s=128

Yuya Saito

September 08, 2012
Tweet

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

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

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

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

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

  63. None
  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

  81. None
  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. 1 + 1 = 3

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

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

  94. None
  95. keyframes transform: scale() border-radius gradient(radial ...) + + + +

  96. Copy, Transform and Combine

  97. Crafting Your Pattern

  98. 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 “ ”
  99. http://bit.ly/ryan-singer-from-37signals

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

  101. Copy + Transform + Combine UI Kit

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

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

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

  105. Dropdown Breadcrumb Pagination Alert Tab Navigation Button Modal Image slider

    Form
  106. http://twitter.github.com/bootstrap/

  107. http://foundation.zurb.com

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

  109. Create Collect # = Pattern

  110. Garbage in, Garbage out.

  111. 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 “ ”
  112. CSSRADAR L Thank You!

  113. Appendix: CSS Online Tools

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

  115. http://css3please.com/

  116. http://css3generator.com/

  117. http://prefixr.com/

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

  119. http://boxshadow.ru/

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

  121. http://border-image.com

  122. http://flexiejs.com/playground/

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

  124. http://cssarrowplease.com/

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

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

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

  128. http://noisepng.com/

  129. http://www.patternify.com/

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