Les interfaces de demain
Qui suis-je ?
Adrien Denat
Développeur front-end
Passionné de multimédia et d'UI design
- Introduction : Retour sur l'évolution des interfaces web
- État actuel
- Et après ?
- Liens et références
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
- Pages
- Hyperliens
- Formulaires
- GIF !
Les bases de navigation et d'interaction sont posées.
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
Aujourd'hui
côté natif
- Windows 8 (Metro)
- iOS7
- Oculus Rift
SUr le web :
LE DOM EST VIVANT
chaque élément du DOM peut avoir ses propres propriétés et être traité comme on le veut
La maturité de JavaScript offre de nouvelles possibilités
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 après ?
(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 ?
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
- http://famo.us/
-
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/