Les interfaces de demain
Qui suis-je ?
Adrien Denat
Développeur front-end chez Makina Corpus
Passionné de multimédia et d'UI design
Intro : évolution des interfaces
"...that strange new zone between medium and message. That zone we call the interface."
— Steven Johnson, 1997
— Steven Johnson, 1997
Sur le web, avant 2000
Pourquoi les interfaces évoluent ?
Pourquoi ne pas se contenter de l'expérience acquise par les utilisateurs ?
"We will come to think of interface design as a kind of art form— perhaps the art form of the next century."
— Steven Johnson, 1997
Les interfaces WEB en tant qu'art
123klan
TeamcHmAn
VectorLounge
...
L'évolution technologique
-
Le web influencé par le natif
-
Nouvelles possibilités techniques nécessitent nouvelles interfaces pour être exploitées
-
L'adoption des technologies par l'utilisateur pousse à aller plus loin
Les enjeux
-
Utilisation naturelle de l'interface
-
Multi-support
-
Expérience utilisateur unique
Problème
animations = performances
HTML5/CSS3 à la rescousse
Des outils
-
CSS transitions/animations
-
JS animations engine
(http://www.greensock.com/, http://famo.us/)
- Animation API
- CSS Filters
- Canvas
Le dom est vivant
chaque élément du DOM peut avoir ses propres propriétés et être traité comme on le veut
canvas peut s'intégrer au DOM (tant bien que mal)
2D et 3D : Deux mondes
2D : HTML5/CSS
- Parallax
- Scrolling websites
- ...
3D : WebGL/Flash
- jeux
- démos/expés
et demain ?
(DEMO TIME)
Les possibilités offertes par CSS3 ouvrent de nouveaux horizons
C'est sympa la 3D, mais c'est compliqué !
CSS3 vulgarise la 3D et la rend simple
Des éditeurs 3D directement dans le navigateur
Pour les jeux ok, mais pour les interfaces utilisateurs ?
côté natif
- Mobile (Windows Phone/Android/iOS7)
- Oculus Rift
Merci !
Liens références
-
Éditeurs 3D VISUELS
- ThreeJS Editor : http://mrdoob.github.io/three.js/editor/
- CSS3-3D : http://tridiv.com/
- WebGL éditeur avancé : http://idflood.github.io/ThreeNodes.js/public/index.html
-
IntégrEr lA 3D au DOM (via canvas)
-
3D “naturelle” intégrée à une page web : utilisation cas réels
-
Comme bannière animé : http://html5hub.com/using-webgl-to-add-3d-effects-to-your-website/#i.jcptr3ewneydq2
-
Comme Illustration d’un article de blog : http://acko.net/blog/zero-to-sixty-in-one-second/
-
CSS3 Shaders
-
"Vrai" site réalisé avec les css3 custom filters https://github.com/adobe-webplatform/custom-filters-demo-travel-app (nécéssite l’activation des Shaders dans Chrome)
Références ui design
-
Inspiration sur l’UX design
-
Tutoriel et inspiration : http://tympanus.net/codrops/