SlideShare une entreprise Scribd logo
LES
INTERFACES
DE DEMAIN
QUI SUIS-JE ?
Adrien Denat
Développeur front-end chez Makina Corpus
Passionné de multimédia et d'UI design
-@grsmto grsmto.com
1. Introduction : Retour sur l'évolution des interfaces web
2. État actuel
3. Et après ?
4. 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
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
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
LES ENJEUX
Utilisation naturelle de l'interface
Multi-support
Expérience utilisateur unique
AUJOURD'HUI
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.
SUR LE WEB : 
LE DOM EST VIVANT
Les sont physiques<div>
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)
2D ET 3D : DEUX MONDES
2D : HTML5/CSS
Parallax
Scrolling websites
...
3D : WEBGL/FLASH
jeux
démos/expés
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 ?
Si on peut faire des cubes, donc...?
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 ?
Augmenter l'expérience utilisateur sur le web
Améliorer l'expérience de lecture d'un article
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
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
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/
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

Contenu connexe

En vedette

Soin du visage
Soin du visageSoin du visage
Soin du visageWafa Memmi
 
Frances power familia8
Frances power  familia8Frances power  familia8
Frances power familia8lucasxu
 
Alimentation et Reporting de Bases de données via le WEB
Alimentation et Reporting de Bases de données via le WEBAlimentation et Reporting de Bases de données via le WEB
Alimentation et Reporting de Bases de données via le WEBGaspar Daniel
 
Content Marketing Tuesday: Dein Content knallt, doch keiner hörts - Erfolgsme...
Content Marketing Tuesday: Dein Content knallt, doch keiner hörts - Erfolgsme...Content Marketing Tuesday: Dein Content knallt, doch keiner hörts - Erfolgsme...
Content Marketing Tuesday: Dein Content knallt, doch keiner hörts - Erfolgsme...
Turbine Kreuzberg GmbH
 
A. Tanter - Warum ich angefangen habe zu bloggen und warum ich damit noch nic...
A. Tanter - Warum ich angefangen habe zu bloggen und warum ich damit noch nic...A. Tanter - Warum ich angefangen habe zu bloggen und warum ich damit noch nic...
A. Tanter - Warum ich angefangen habe zu bloggen und warum ich damit noch nic...
infoclio.ch
 
Ο Ερμής Τρισμέγιστος - http://www.projethomere.com
Ο Ερμής Τρισμέγιστος - http://www.projethomere.comΟ Ερμής Τρισμέγιστος - http://www.projethomere.com
Ο Ερμής Τρισμέγιστος - http://www.projethomere.com
Hélène Kémiktsi
 
Weniger Krise – mehr Projekte: Trends im Stillstandsmanagement
Weniger Krise – mehr Projekte: Trends im StillstandsmanagementWeniger Krise – mehr Projekte: Trends im Stillstandsmanagement
Weniger Krise – mehr Projekte: Trends im Stillstandsmanagement
Mateus Siwek
 
Stellen Sie sich vor …
Stellen Sie sich vor …Stellen Sie sich vor …
Stellen Sie sich vor …
fröhlich. Kreatives Marketing
 
Formation réception
Formation réceptionFormation réception
Formation réception
G. Christophe
 
Compte rendu du conseil municipal du 18 décembre 2014
Compte rendu du conseil municipal du 18 décembre 2014Compte rendu du conseil municipal du 18 décembre 2014
Compte rendu du conseil municipal du 18 décembre 2014
villedebegles
 
Tecosim Zahlen & Fakten 2014
Tecosim Zahlen & Fakten 2014Tecosim Zahlen & Fakten 2014
Tecosim Zahlen & Fakten 2014
TECOSIM Group
 
Enseignement de la priere islam
Enseignement de la priere islamEnseignement de la priere islam
Enseignement de la priere islamCasgordy Radjabu
 
Ein Unternehmen schaffen
Ein Unternehmen schaffenEin Unternehmen schaffen
Ein Unternehmen schaffen
ZFF - Zentrum für Führung GmbH
 
Ost 1 12664 76
Ost 1 12664 76Ost 1 12664 76
Ost 1 12664 76Moses Rich
 

En vedette (17)

Bibeltreff1
Bibeltreff1Bibeltreff1
Bibeltreff1
 
Soin du visage
Soin du visageSoin du visage
Soin du visage
 
Frances power familia8
Frances power  familia8Frances power  familia8
Frances power familia8
 
Alimentation et Reporting de Bases de données via le WEB
Alimentation et Reporting de Bases de données via le WEBAlimentation et Reporting de Bases de données via le WEB
Alimentation et Reporting de Bases de données via le WEB
 
2010 09 29 13-30 michael gniffke
2010 09 29 13-30 michael gniffke2010 09 29 13-30 michael gniffke
2010 09 29 13-30 michael gniffke
 
Pleniere2009 destination en tension
Pleniere2009 destination en tensionPleniere2009 destination en tension
Pleniere2009 destination en tension
 
Content Marketing Tuesday: Dein Content knallt, doch keiner hörts - Erfolgsme...
Content Marketing Tuesday: Dein Content knallt, doch keiner hörts - Erfolgsme...Content Marketing Tuesday: Dein Content knallt, doch keiner hörts - Erfolgsme...
Content Marketing Tuesday: Dein Content knallt, doch keiner hörts - Erfolgsme...
 
A. Tanter - Warum ich angefangen habe zu bloggen und warum ich damit noch nic...
A. Tanter - Warum ich angefangen habe zu bloggen und warum ich damit noch nic...A. Tanter - Warum ich angefangen habe zu bloggen und warum ich damit noch nic...
A. Tanter - Warum ich angefangen habe zu bloggen und warum ich damit noch nic...
 
Ο Ερμής Τρισμέγιστος - http://www.projethomere.com
Ο Ερμής Τρισμέγιστος - http://www.projethomere.comΟ Ερμής Τρισμέγιστος - http://www.projethomere.com
Ο Ερμής Τρισμέγιστος - http://www.projethomere.com
 
Weniger Krise – mehr Projekte: Trends im Stillstandsmanagement
Weniger Krise – mehr Projekte: Trends im StillstandsmanagementWeniger Krise – mehr Projekte: Trends im Stillstandsmanagement
Weniger Krise – mehr Projekte: Trends im Stillstandsmanagement
 
Stellen Sie sich vor …
Stellen Sie sich vor …Stellen Sie sich vor …
Stellen Sie sich vor …
 
Formation réception
Formation réceptionFormation réception
Formation réception
 
Compte rendu du conseil municipal du 18 décembre 2014
Compte rendu du conseil municipal du 18 décembre 2014Compte rendu du conseil municipal du 18 décembre 2014
Compte rendu du conseil municipal du 18 décembre 2014
 
Tecosim Zahlen & Fakten 2014
Tecosim Zahlen & Fakten 2014Tecosim Zahlen & Fakten 2014
Tecosim Zahlen & Fakten 2014
 
Enseignement de la priere islam
Enseignement de la priere islamEnseignement de la priere islam
Enseignement de la priere islam
 
Ein Unternehmen schaffen
Ein Unternehmen schaffenEin Unternehmen schaffen
Ein Unternehmen schaffen
 
Ost 1 12664 76
Ost 1 12664 76Ost 1 12664 76
Ost 1 12664 76
 

Similaire à Petit Déjeuner du 26 septembre : HTML5 et CSS3, les interfaces de demain.

Evolution des métiers du design interactif
Evolution des métiers du design interactifEvolution des métiers du design interactif
Evolution des métiers du design interactifdesigners interactifs
 
Les interfaces web de demain
Les interfaces web de demainLes interfaces web de demain
Les interfaces web de demain
Laurent Leborgne
 
Webdesign Passe, Present et... Present Part1
Webdesign Passe, Present et... Present Part1Webdesign Passe, Present et... Present Part1
Webdesign Passe, Present et... Present Part1
bduverneuil
 
Webdesign Passe Present et Present Part2
Webdesign Passe Present et Present Part2Webdesign Passe Present et Present Part2
Webdesign Passe Present et Present Part2
bduverneuil
 
La compétence numérique, un cadre de travail évolutif pour le design d'interf...
La compétence numérique, un cadre de travail évolutif pour le design d'interf...La compétence numérique, un cadre de travail évolutif pour le design d'interf...
La compétence numérique, un cadre de travail évolutif pour le design d'interf...
Vincent Beneche
 
Prez web vr chtijs
Prez web vr chtijsPrez web vr chtijs
Prez web vr chtijs
Thomas Balouet
 
Sonia HECQUET, Les Nouveaux Supports Medias Creatifs (PARIS 2.0, Sept 2009)
Sonia HECQUET, Les Nouveaux Supports Medias Creatifs (PARIS 2.0, Sept 2009)Sonia HECQUET, Les Nouveaux Supports Medias Creatifs (PARIS 2.0, Sept 2009)
Sonia HECQUET, Les Nouveaux Supports Medias Creatifs (PARIS 2.0, Sept 2009)
PSST (opinions et tendances 2.0) par jeremy dumont
 
Qu'est-ce que le design numérique ? Ebauche d'une réponse...
Qu'est-ce que le design numérique ? Ebauche d'une réponse...Qu'est-ce que le design numérique ? Ebauche d'une réponse...
Qu'est-ce que le design numérique ? Ebauche d'une réponse...
i-breed et associés
 
HTML5/CSS3D - Expresso Rennes Atalante - 17 sept. 2013
HTML5/CSS3D - Expresso Rennes Atalante - 17 sept. 2013HTML5/CSS3D - Expresso Rennes Atalante - 17 sept. 2013
HTML5/CSS3D - Expresso Rennes Atalante - 17 sept. 2013
Julien LE THUAUT
 
Semio web
Semio webSemio web
Semio web
Vincent Mabillot
 
Expresso Rennes Atalante - Html5 / Css3D - 17 sept. 2013
Expresso Rennes Atalante - Html5 / Css3D - 17 sept. 2013Expresso Rennes Atalante - Html5 / Css3D - 17 sept. 2013
Expresso Rennes Atalante - Html5 / Css3D - 17 sept. 2013
MBA Multimedia
 
L'évolution du web-design
L'évolution du web-designL'évolution du web-design
L'évolution du web-design
Olivier Soros
 
Convergence et mobilité des contenus
Convergence et mobilité des contenus Convergence et mobilité des contenus
Convergence et mobilité des contenus
Vanksen
 
MobiliteaTime #5 : Responsive & Adaptive Design
MobiliteaTime #5 : Responsive & Adaptive Design MobiliteaTime #5 : Responsive & Adaptive Design
MobiliteaTime #5 : Responsive & Adaptive Design
USERADGENTS
 
Communication digitale
Communication digitaleCommunication digitale
Communication digitale
Chris Gaillard
 
Le design empirique du web - 22-11-2010
Le design empirique du web - 22-11-2010Le design empirique du web - 22-11-2010
Le design empirique du web - 22-11-2010
Mediacom87
 
Introduction au développement windows 8 modern ui avec html5 et javascript
Introduction au développement windows 8 modern ui avec html5 et javascriptIntroduction au développement windows 8 modern ui avec html5 et javascript
Introduction au développement windows 8 modern ui avec html5 et javascript
davrous
 
Introduction au développement Windows 8 ModernUI avec HTML5 et JavaScript
Introduction au développement Windows 8 ModernUI avec HTML5 et JavaScriptIntroduction au développement Windows 8 ModernUI avec HTML5 et JavaScript
Introduction au développement Windows 8 ModernUI avec HTML5 et JavaScript
Microsoft
 
Webdesign Passe Present et... Present Part3
Webdesign Passe Present et... Present Part3Webdesign Passe Present et... Present Part3
Webdesign Passe Present et... Present Part3
bduverneuil
 
HTML 5, CSS 3 au service du web | Semaine du web Alger (Algérie)
HTML 5, CSS 3 au service du web | Semaine du web Alger (Algérie)HTML 5, CSS 3 au service du web | Semaine du web Alger (Algérie)
HTML 5, CSS 3 au service du web | Semaine du web Alger (Algérie)
Khaled Djebloun
 

Similaire à Petit Déjeuner du 26 septembre : HTML5 et CSS3, les interfaces de demain. (20)

Evolution des métiers du design interactif
Evolution des métiers du design interactifEvolution des métiers du design interactif
Evolution des métiers du design interactif
 
Les interfaces web de demain
Les interfaces web de demainLes interfaces web de demain
Les interfaces web de demain
 
Webdesign Passe, Present et... Present Part1
Webdesign Passe, Present et... Present Part1Webdesign Passe, Present et... Present Part1
Webdesign Passe, Present et... Present Part1
 
Webdesign Passe Present et Present Part2
Webdesign Passe Present et Present Part2Webdesign Passe Present et Present Part2
Webdesign Passe Present et Present Part2
 
La compétence numérique, un cadre de travail évolutif pour le design d'interf...
La compétence numérique, un cadre de travail évolutif pour le design d'interf...La compétence numérique, un cadre de travail évolutif pour le design d'interf...
La compétence numérique, un cadre de travail évolutif pour le design d'interf...
 
Prez web vr chtijs
Prez web vr chtijsPrez web vr chtijs
Prez web vr chtijs
 
Sonia HECQUET, Les Nouveaux Supports Medias Creatifs (PARIS 2.0, Sept 2009)
Sonia HECQUET, Les Nouveaux Supports Medias Creatifs (PARIS 2.0, Sept 2009)Sonia HECQUET, Les Nouveaux Supports Medias Creatifs (PARIS 2.0, Sept 2009)
Sonia HECQUET, Les Nouveaux Supports Medias Creatifs (PARIS 2.0, Sept 2009)
 
Qu'est-ce que le design numérique ? Ebauche d'une réponse...
Qu'est-ce que le design numérique ? Ebauche d'une réponse...Qu'est-ce que le design numérique ? Ebauche d'une réponse...
Qu'est-ce que le design numérique ? Ebauche d'une réponse...
 
HTML5/CSS3D - Expresso Rennes Atalante - 17 sept. 2013
HTML5/CSS3D - Expresso Rennes Atalante - 17 sept. 2013HTML5/CSS3D - Expresso Rennes Atalante - 17 sept. 2013
HTML5/CSS3D - Expresso Rennes Atalante - 17 sept. 2013
 
Semio web
Semio webSemio web
Semio web
 
Expresso Rennes Atalante - Html5 / Css3D - 17 sept. 2013
Expresso Rennes Atalante - Html5 / Css3D - 17 sept. 2013Expresso Rennes Atalante - Html5 / Css3D - 17 sept. 2013
Expresso Rennes Atalante - Html5 / Css3D - 17 sept. 2013
 
L'évolution du web-design
L'évolution du web-designL'évolution du web-design
L'évolution du web-design
 
Convergence et mobilité des contenus
Convergence et mobilité des contenus Convergence et mobilité des contenus
Convergence et mobilité des contenus
 
MobiliteaTime #5 : Responsive & Adaptive Design
MobiliteaTime #5 : Responsive & Adaptive Design MobiliteaTime #5 : Responsive & Adaptive Design
MobiliteaTime #5 : Responsive & Adaptive Design
 
Communication digitale
Communication digitaleCommunication digitale
Communication digitale
 
Le design empirique du web - 22-11-2010
Le design empirique du web - 22-11-2010Le design empirique du web - 22-11-2010
Le design empirique du web - 22-11-2010
 
Introduction au développement windows 8 modern ui avec html5 et javascript
Introduction au développement windows 8 modern ui avec html5 et javascriptIntroduction au développement windows 8 modern ui avec html5 et javascript
Introduction au développement windows 8 modern ui avec html5 et javascript
 
Introduction au développement Windows 8 ModernUI avec HTML5 et JavaScript
Introduction au développement Windows 8 ModernUI avec HTML5 et JavaScriptIntroduction au développement Windows 8 ModernUI avec HTML5 et JavaScript
Introduction au développement Windows 8 ModernUI avec HTML5 et JavaScript
 
Webdesign Passe Present et... Present Part3
Webdesign Passe Present et... Present Part3Webdesign Passe Present et... Present Part3
Webdesign Passe Present et... Present Part3
 
HTML 5, CSS 3 au service du web | Semaine du web Alger (Algérie)
HTML 5, CSS 3 au service du web | Semaine du web Alger (Algérie)HTML 5, CSS 3 au service du web | Semaine du web Alger (Algérie)
HTML 5, CSS 3 au service du web | Semaine du web Alger (Algérie)
 

Petit Déjeuner du 26 septembre : HTML5 et CSS3, les interfaces de demain.