Upgrade to Pro — share decks privately, control downloads, hide ads and more …

User Interface Design Pattern With CSS3

Yuya Saito
September 08, 2012

User Interface Design Pattern With CSS3

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

Yuya Saito

September 08, 2012
Tweet

More Decks by Yuya Saito

Other Decks in Design

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