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

HTML5 Conference 2012の講演資料です。

Yuya Saito

September 08, 2012

More Decks by Yuya Saito

Other Decks in Design


  1. Design is not just what it looks like and feels

    like. Design is how it works. - Steve Jobs “ ”
  2. 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/
  3. 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 “ ”
  4. 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 “ ”
  5. 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 “ ”
  6. We need to give users a sense of location in

    our applications, and transitions will play an important part in this. - Mark Cossey “ ”
  7. @keyframes Animation @keyframes animation-name { from { opacity : 0;

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

    } 25% { opacity : .5; } 70% { opacity : .25; } 100% { opacity : 1; } }
  9. Nobody starts out original. Need copying until the foundation of

    knowledge and understanding. - Kirby Ferguson “ ”
  10. 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 “ ”
  11. 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 “ ”
  12. 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 “ ”