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 full-size slide

  2. YUYA SAITO
    CSSRADAR
    L
    O CyberAgent

    View full-size slide

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


    View full-size slide

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

    View full-size slide

  5. UI Side of CSS3

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size slide

  13. Layer of Experience

    View full-size slide

  14. Layer of Web

    View full-size slide

  15. Structure
    HTML
    Behavior
    JS
    Presentation
    CSS

    View full-size slide

  16. Experience Layer

    View full-size slide

  17. Critical
    Non-Critical
    Experience Layer

    View full-size 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 full-size slide

  19. Functionality
    Information
    Aesthetics
    Usability

    View full-size slide

  20. Critical
    Non-Critical
    Aesthetics
    Usability
    Functionality
    Information

    View full-size slide

  21. HTML
    CSS
    JS
    CSS3
    JS

    View full-size 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 full-size slide

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

    View full-size slide

  24. Progressive Enhancement

    View full-size 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 full-size 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 full-size slide

  27. Know Capability of Browsers

    View full-size slide

  28. http://caniuse.com/

    View full-size slide

  29. http://mobilehtml5.org

    View full-size slide

  30. Start with interaction and be subtle

    View full-size slide

  31. Smoothing UI with Animation

    View full-size 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 full-size slide

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

    View full-size slide

  34. Animatable Properties

    View full-size slide

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

    View full-size slide

  36. Transition Syntax

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  41. http://cubic-bezier.com

    View full-size slide

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

    View full-size slide

  43. Animation Syntax

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  53. Examples of Animating UIs

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  59. Copy, Transform and Combine

    View full-size slide

  60. Innovative and Creative

    View full-size slide

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


    View full-size slide

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

    View full-size slide

  63. ⌘ + C ⌘ + V

    View full-size slide

  64. https://path.com

    View full-size slide

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

    View full-size slide

  66. http://dribbble.com

    View full-size slide

  67. Dribbble for Front-end Devs

    View full-size slide

  68. http://www.webinterfacelab.com

    View full-size slide

  69. http://cssdeck.com

    View full-size slide

  70. http://codepen.io

    View full-size slide

  71. http://cssbutton.me

    View full-size slide

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

    View full-size slide

  73. Good artists copy, great artists steal.
    - Pablo Picasso


    View full-size slide

  74. Ask Questions

    View full-size slide

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

    View full-size slide

  76. Try It Yourself

    View full-size slide

  77. 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 full-size slide

  78. Demo or it didn't happen.
    - codepen.io


    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  82. Copy, Transform and Combine

    View full-size slide

  83. Crafting Your Pattern

    View full-size slide

  84. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  87. Copy + Transform + Combine UI Kit

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  93. http://foundation.zurb.com

    View full-size slide

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

    View full-size slide

  95. Create
    Collect # = Pattern

    View full-size slide

  96. Garbage in, Garbage out.

    View full-size slide

  97. 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 full-size slide

  98. CSSRADAR
    L
    Thank You!

    View full-size slide

  99. Appendix: CSS Online Tools

    View full-size slide

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

    View full-size slide

  101. http://css3please.com/

    View full-size slide

  102. http://css3generator.com/

    View full-size slide

  103. http://prefixr.com/

    View full-size slide

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

    View full-size slide

  105. http://boxshadow.ru/

    View full-size slide

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

    View full-size slide

  107. http://border-image.com

    View full-size slide

  108. http://flexiejs.com/playground/

    View full-size slide

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

    View full-size slide

  110. http://cssarrowplease.com/

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  114. http://noisepng.com/

    View full-size slide

  115. http://www.patternify.com/

    View full-size slide

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

    View full-size slide