Slide 1

Slide 1 text

LES INTERFACES DE DEMAIN

Slide 2

Slide 2 text

QUI SUIS-JE ? Adrien Denat Développeur front-end chez Makina Corpus Passionné de multimédia et d'UI design - @grsmto grsmto.com

Slide 3

Slide 3 text

1. Introduction : Retour sur l'évolution des interfaces web 2. État actuel 3. Et après ? 4. Liens et références

Slide 4

Slide 4 text

INTRO : ÉVOLUTION DES INTERFACES

Slide 5

Slide 5 text

"...that strange new zone between medium and message. That zone we call the interface." — Steven Johnson, 1997

Slide 6

Slide 6 text

SUR LE WEB, AVANT 2000 Pages Hyperliens Formulaires GIF ! Les bases de navigation et d'interaction sont posées.

Slide 7

Slide 7 text

Pourquoi les interfaces évoluent ? Pourquoi ne pas se contenter de l'expérience acquise par les utilisateurs ?

Slide 8

Slide 8 text

"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

Slide 9

Slide 9 text

LES INTERFACES WEB EN TANT QU'ART 123KLAN TEAMCHMAN VECTORLOUNGE ...

Slide 10

Slide 10 text

L'ÉVOLUTION TECHNOLOGIQUE Le web influencé par le natif Les nouvelles possibilités techniques nécessitent de nouvelles interfaces pour être exploitées L'adoption des technologies par l'utilisateur pousse à aller plus loin

Slide 11

Slide 11 text

LES ENJEUX Utilisation naturelle de l'interface Multi-support Expérience utilisateur unique

Slide 12

Slide 12 text

AUJOURD'HUI

Slide 13

Slide 13 text

CÔTÉ NATIF Windows 8 (Metro) iOS7 L'apparition de la profondeur dans les interfaces récentes tel que iOS7, démocratise l'utilisation d'une nouvelle dimension et mène à penser que la 3D est un des éléments clé des interfaces du futur.

Slide 14

Slide 14 text

SUR LE WEB : LE DOM EST VIVANT Les sont physiques < d i v > 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 Et canvas ? canvas peut s'intégrer au DOM (tant bien que mal)

Slide 15

Slide 15 text

2D ET 3D : DEUX MONDES 2D : HTML5/CSS Parallax Scrolling websites ... 3D : WEBGL/FLASH jeux démos/expés

Slide 16

Slide 16 text

ET APRÈS ? (DEMO TIME) On a vu que les interfaces étaient influencées par l'évolution technologique et les expérimentations artistiques. Alors que nous propose le web d'aujourd'hui avec HTML5 et CSS3 ?

Slide 17

Slide 17 text

Si on peut faire des cubes, donc...? Les possibilités offertes par CSS3 ouvrent de nouveaux horizons

Slide 18

Slide 18 text

C'EST SYMPA LA 3D, MAIS C'EST COMPLIQUÉ ! CSS3 vulgarise la 3D et la rend simple Des éditeurs 3D directement dans le navigateur

Slide 19

Slide 19 text

POUR LES JEUX OK, MAIS POUR LES INTERFACES UTILISATEURS ? Augmenter l'expérience utilisateur sur le web Améliorer l'expérience de lecture d'un article

Slide 20

Slide 20 text

LIENS RÉFÉRENCES ÉDITEURS 3D VISUELS ThreeJS Editor : CSS3-3D : WebGL éditeur avancé : INTÉGRER LA 3D AU DOM (VIA CANVAS) http://mrdoob.github.io/three.js/editor/ http://tridiv.com/ http://idflood.github.io/ThreeNodes.js/public/index.html http://famo.us/ Mélange canvas/css Contourner les limitations de WebGL pour l'intégrer dans une page web Utiliser WebGL pour ajouter de la 3D dans une page web

Slide 21

Slide 21 text

3D “NATURELLE” INTÉGRÉE À UNE PAGE WEB : UTILISATION CAS RÉELS Comme bannière animé : Comme Illustration d’un article de blog : http://html5hub.com/using-webgl-to-add-3d-effects-to- your-website/#i.jcptr3ewneydq2 http://acko.net/blog/zero-to-sixty-in-one- second/ CSS3 SHADERS "Vrai" site réalisé avec les css3 custom filters (nécéssite l’activation des Shaders dans Chrome) https://github.com/adobe- webplatform/custom-filters-demo-travel-app

Slide 22

Slide 22 text

RÉFÉRENCES UI DESIGN INSPIRATION SUR L’UX DESIGN Tutoriel et inspiration : http://tympanus.net/codrops/ http://littlebigdetails.com http://useyourinterface.com/ http://sixux.com/ http://hoverstat.es/

Slide 23

Slide 23 text

JS LIBRARIES Transit : Lib JS pour animer en CSS Animations avancés (JS) http://ricostacruz.com/jquery.transit/ http://www.greensock.com/gsap-js/ ThreeJS : Moteur WebGL WWW.MAKINA-CORPUS.COM