SlideShare une entreprise Scribd logo
1  sur  23
Télécharger pour lire hors ligne
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

En vedette (11)

Vous networkez chez vos parents ? Par Fabian Vervier
Vous networkez chez vos parents ? Par Fabian VervierVous networkez chez vos parents ? Par Fabian Vervier
Vous networkez chez vos parents ? Par Fabian Vervier
 
Présentation communication de crise
Présentation communication de crisePrésentation communication de crise
Présentation communication de crise
 
Stratégies de communication de crise : vous parlez la même langue, mais est-c...
Stratégies de communication de crise : vous parlez la même langue, mais est-c...Stratégies de communication de crise : vous parlez la même langue, mais est-c...
Stratégies de communication de crise : vous parlez la même langue, mais est-c...
 
HTML 5
HTML 5HTML 5
HTML 5
 
Exploiter php 5
Exploiter php 5Exploiter php 5
Exploiter php 5
 
La communication de crise dans le web, une pratique difficile et réglementée
La communication de crise dans le web, une pratique difficile et réglementéeLa communication de crise dans le web, une pratique difficile et réglementée
La communication de crise dans le web, une pratique difficile et réglementée
 
Et si on établissait une stratégie marketing digitale ? Par Jérémy Corman
Et si on établissait une stratégie marketing digitale ? Par Jérémy CormanEt si on établissait une stratégie marketing digitale ? Par Jérémy Corman
Et si on établissait une stratégie marketing digitale ? Par Jérémy Corman
 
Adw #19 : La communication de crise à l'ère du digital
Adw #19 : La communication de crise à l'ère du digital Adw #19 : La communication de crise à l'ère du digital
Adw #19 : La communication de crise à l'ère du digital
 
Apprenez à créer votre site Web avec HTML5 et CSS3
Apprenez à créer votre site Web avec HTML5 et CSS3Apprenez à créer votre site Web avec HTML5 et CSS3
Apprenez à créer votre site Web avec HTML5 et CSS3
 
CSS Grid Layout, le futur de vos mises en page
CSS Grid Layout, le futur de vos mises en pageCSS Grid Layout, le futur de vos mises en page
CSS Grid Layout, le futur de vos mises en page
 
Responsive Web Design - Enjeux, Solutions, Méthodologie
Responsive Web Design - Enjeux, Solutions, MéthodologieResponsive Web Design - Enjeux, Solutions, Méthodologie
Responsive Web Design - Enjeux, Solutions, Méthodologie
 

Similaire à Petit Déjeuner : 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 interactif
designers interactifs
 
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
 
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 : 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)
 

Plus de Makina Corpus

Créez votre propre fond de plan à partir de données OSM en utilisant TileMill
Créez votre propre fond de plan à partir de données OSM en utilisant TileMillCréez votre propre fond de plan à partir de données OSM en utilisant TileMill
Créez votre propre fond de plan à partir de données OSM en utilisant TileMill
Makina Corpus
 

Plus de Makina Corpus (19)

Happy hacking with Plone
Happy hacking with PloneHappy hacking with Plone
Happy hacking with Plone
 
Développer des applications mobiles avec phonegap
Développer des applications mobiles avec phonegapDévelopper des applications mobiles avec phonegap
Développer des applications mobiles avec phonegap
 
Running a Plone product on Substance D
Running a Plone product on Substance DRunning a Plone product on Substance D
Running a Plone product on Substance D
 
Why CMS will not die
Why CMS will not dieWhy CMS will not die
Why CMS will not die
 
Publier vos données sur le Web - Forum TIC de l'ATEN 2014
Publier vos données sur le Web -  Forum TIC de l'ATEN 2014Publier vos données sur le Web -  Forum TIC de l'ATEN 2014
Publier vos données sur le Web - Forum TIC de l'ATEN 2014
 
Créez votre propre fond de plan à partir de données OSM en utilisant TileMill
Créez votre propre fond de plan à partir de données OSM en utilisant TileMillCréez votre propre fond de plan à partir de données OSM en utilisant TileMill
Créez votre propre fond de plan à partir de données OSM en utilisant TileMill
 
Team up Django and Web mapping - DjangoCon Europe 2014
Team up Django and Web mapping - DjangoCon Europe 2014Team up Django and Web mapping - DjangoCon Europe 2014
Team up Django and Web mapping - DjangoCon Europe 2014
 
Petit déjeuner "Les bases de la cartographie sur le Web"
Petit déjeuner "Les bases de la cartographie sur le Web"Petit déjeuner "Les bases de la cartographie sur le Web"
Petit déjeuner "Les bases de la cartographie sur le Web"
 
Petit déjeuner "Développer sur le cloud, ou comment tout construire à partir ...
Petit déjeuner "Développer sur le cloud, ou comment tout construire à partir ...Petit déjeuner "Développer sur le cloud, ou comment tout construire à partir ...
Petit déjeuner "Développer sur le cloud, ou comment tout construire à partir ...
 
CoDe, le programme de développement d'applications mobiles de Makina Corpus
CoDe, le programme de développement d'applications mobiles de Makina Corpus CoDe, le programme de développement d'applications mobiles de Makina Corpus
CoDe, le programme de développement d'applications mobiles de Makina Corpus
 
Petit déjeuner "Alternatives libres à GoogleMaps" du 11 février 2014 - Nantes...
Petit déjeuner "Alternatives libres à GoogleMaps" du 11 février 2014 - Nantes...Petit déjeuner "Alternatives libres à GoogleMaps" du 11 février 2014 - Nantes...
Petit déjeuner "Alternatives libres à GoogleMaps" du 11 février 2014 - Nantes...
 
Petit déjeuner "Les nouveautés de la cartographie en ligne" du 12 décembre
Petit déjeuner "Les nouveautés de la cartographie en ligne" du 12 décembrePetit déjeuner "Les nouveautés de la cartographie en ligne" du 12 décembre
Petit déjeuner "Les nouveautés de la cartographie en ligne" du 12 décembre
 
Alternatives libres à Google Maps
Alternatives libres à Google MapsAlternatives libres à Google Maps
Alternatives libres à Google Maps
 
Atelier "Les nouveautés de la cartographie en ligne"
Atelier "Les nouveautés de la cartographie en ligne"Atelier "Les nouveautés de la cartographie en ligne"
Atelier "Les nouveautés de la cartographie en ligne"
 
Importing Wikipedia in Plone
Importing Wikipedia in PloneImporting Wikipedia in Plone
Importing Wikipedia in Plone
 
Geotrek
GeotrekGeotrek
Geotrek
 
Plomino
Plomino Plomino
Plomino
 
Des cartes d'un autre monde - DjangoCong 2012
Des cartes d'un autre monde - DjangoCong 2012Des cartes d'un autre monde - DjangoCong 2012
Des cartes d'un autre monde - DjangoCong 2012
 
Solutions libres alternatives à Google Maps
Solutions libres alternatives à Google MapsSolutions libres alternatives à Google Maps
Solutions libres alternatives à Google Maps
 

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