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...
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 John...
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 int...
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'u...
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 tr...
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érimentation...
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 navig...
POUR LES JEUX OK, MAIS
POUR LES INTERFACES
UTILISATEURS ?
Augmenter l'expérience utilisateur sur le web
Améliorer l'expéri...
LIENS RÉFÉRENCES
ÉDITEURS 3D VISUELS
ThreeJS Editor :
CSS3-3D :
WebGL éditeur avancé
:
INTÉGRER LA 3D AU DOM (VIA
CANVAS)
...
3D “NATURELLE” INTÉGRÉE À UNE
PAGE WEB : UTILISATION CAS RÉELS
Comme bannière animé :
Comme Illustration d’un article de b...
RÉFÉRENCES UI DESIGN
INSPIRATION SUR L’UX DESIGN
Tutoriel et inspiration : http://tympanus.net/codrops/
http://littlebigde...
JS LIBRARIES
Transit : Lib JS pour animer en CSS
Animations avancés (JS)
http://ricostacruz.com/jquery.transit/
http://www...
Prochain SlideShare
Chargement dans…5
×

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

2 743 vues

Publié le

On les utilise habituellement pour structurer et "designer" une page web mais HTML5 et CSS3 sont capables d'aller beaucoup plus loin : ils peuvent offrir aux utilisateurs de nouvelles expériences de navigations et permettront bientôt de révolutionner la vision actuelle d'un site web. HTML5 apporte de nombreuses fonctionnalités dont le web s'imprègne peu à peu. Les interfaces web évoluent rapidement, se transforment et s'adaptent à tout type de supports.

http://makina-corpus.com/blog/societe/petit-dejeuner-le-26-septembre-sur-html5-css3

Publié dans : Technologie
0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
2 743
Sur SlideShare
0
Issues des intégrations
0
Intégrations
1 206
Actions
Partages
0
Téléchargements
20
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

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

  1. 1. LES INTERFACES DE DEMAIN
  2. 2. QUI SUIS-JE ? Adrien Denat Développeur front-end chez Makina Corpus Passionné de multimédia et d'UI design -@grsmto grsmto.com
  3. 3. 1. Introduction : Retour sur l'évolution des interfaces web 2. État actuel 3. Et après ? 4. Liens et références
  4. 4. INTRO : ÉVOLUTION DES INTERFACES
  5. 5. "...that strange new zone between medium and message. That zone we call the interface." — Steven Johnson, 1997
  6. 6. SUR LE WEB, AVANT 2000 Pages Hyperliens Formulaires GIF ! Les bases de navigation et d'interaction sont posées.
  7. 7. Pourquoi les interfaces évoluent ? Pourquoi ne pas se contenter de l'expérience acquise par les utilisateurs ?
  8. 8. "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
  9. 9. LES INTERFACES WEB EN TANT QU'ART 123KLAN TEAMCHMAN VECTORLOUNGE ...
  10. 10. 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
  11. 11. LES ENJEUX Utilisation naturelle de l'interface Multi-support Expérience utilisateur unique
  12. 12. AUJOURD'HUI
  13. 13. 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.
  14. 14. 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)
  15. 15. 2D ET 3D : DEUX MONDES 2D : HTML5/CSS Parallax Scrolling websites ... 3D : WEBGL/FLASH jeux démos/expés
  16. 16. 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 ?
  17. 17. Si on peut faire des cubes, donc...? Les possibilités offertes par CSS3 ouvrent de nouveaux horizons
  18. 18. C'EST SYMPA LA 3D, MAIS C'EST COMPLIQUÉ ! CSS3 vulgarise la 3D et la rend simple Des éditeurs 3D directement dans le navigateur
  19. 19. 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
  20. 20. 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
  21. 21. 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
  22. 22. 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/
  23. 23. 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

×