Sites Web et Mobiles 
Tendances 2015 
Webdesign 
Olivier Dommange
Olivier Dommange 
Les tendances 
du Webdesign
Olivier Dommange 
Sites Web
Olivier Dommange 
Responsive Webdesign (RWD) 
Adapter la mise en page d'un site 
et son contenu aux supports 
Avantages : ...
Olivier Dommange 
Responsive Webdesign (RWD) 
Site du livre 
« Adaptative Web Design » 
http://easy-readers.net/books/adap...
Olivier Dommange 
http://rts.ch/ http://lausanne.ch/ 
http://ge.ch/ 
http://letemps.ch/ http://24heures.ch/ http://ch.ch/ ...
Olivier Dommange 
Monopage « One page » 
Site dont le contenu est décliné 
sur une seule page. La page est 
divisée en por...
Olivier Dommange 
http://t-l.ch/ 
Monopage « One page » exemple 
Site t-l.ch 
Contenu réparti sur une colonne 
Le site est...
Olivier Dommange 
Grille dynamique 
Contenus organisés en zones qui 
se positionnent en fonction de la 
taille du support....
Olivier Dommange 
Grille dynamique - exemple 
Pinterest emploie l’organisation 
dynamique de la mise en page du 
site. 
ht...
Olivier Dommange 
Grille dynamique - Masonry 
Basé sur le card design, 
Masonry est un effet de 
transition en Javascript ...
Olivier Dommange 
Animé et « storytelling » 
Reportage interactif mixant les 
médias audiovisuels et photos au 
Web. 
Avan...
Olivier Dommange 
Animé et « storytelling » 
http://www.world-of-swiss.com/fr
Olivier Dommange 
Composants HTML et CSS
Olivier Dommange 
Format SVG 
Initité en 1999, le SVG (Scalable 
Vector Graphics) est un format 
vectoriel de mieux en mie...
Olivier Dommange 
http://upload.wikimedia.org/wikipedia/commons/6/6c/Trajans-Column-lower-animated.svg 
Format SVG - Exemp...
Olivier Dommange 
Canvas 
Composant HTML qui permet 
de créer des animations 
interactives dans une page 
Web. 
Avantages ...
Olivier Dommange 
http://shinydemos.com/emberwind/ 
Canvas - Exemple 
Les jeux ainsi que les 
bannières interactives 
util...
Olivier Dommange 
CSS 3D Transform 
Ajouter de la perspective aux 
pages Web 
Avantages : 
Supporté sur tous les navigateu...
Olivier Dommange 
http://tridiv.com/ 
CSS 3D Transform - exemple 
Application Web 3D en HTML et CSS
Olivier Dommange 
CSS Animation 
Créer des animations avec CSS. 
Avantages : 
Supporté sur tous les navigateurs récents 
U...
Olivier Dommange 
https://creative.adobe.com/products/animate 
https://www.google.com/webdesigner 
Logiciels d'animation 
...
Olivier Dommange 
jQuery 
Librairie Javascript (framework) 
facilitant l’animation des 
interfaces et la création d’outils...
Olivier Dommange 
Graphiques
Olivier Dommange 
Skeuomorphisme 
Aspect hyperréaliste et texturé. 
Fait écho au monde réel. Facilite le 
repérage et l'ut...
Olivier Dommange 
Flat design 
Graphisme minimaliste, clair, 
épuré et en aplat. Privilégie 
l’absence d’éléments de style...
Olivier Dommange 
Flat design - déclinaison 
Flat design long shadow 
Couleurs unies vives disposant d’une ombre 
portée f...
Olivier Dommange 
Flat design - déclinaison 
Material design 
Google propose en 2014 pour la version 
d’Android 5.0 (Lolli...
Olivier Dommange 
Flat design - interfaces 
L’efficacité reconnue du flat design en fait la référence du moment. Les 
inte...
Olivier Dommange 
Data information design 
Expliciter par l’image 
des concepts 
complexes 
Avantages : 
Rapide à consulte...
Olivier Dommange 
http://www.linkedin.com/in/olivierdommange
Prochain SlideShare
Chargement dans…5
×

Webdesign sites web et mobiles-tendances 2015

1 540 vues

Publié le

Tendances techniques, webdesign, des composants HTML, CSS et graphiques du moment.Recensement non exhaustif des tendances du moment. Analyse des avantages et inconvénients pour chacun d'eux

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

Aucun téléchargement
Vues
Nombre de vues
1 540
Sur SlideShare
0
Issues des intégrations
0
Intégrations
43
Actions
Partages
0
Téléchargements
79
Commentaires
0
J’aime
4
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Webdesign sites web et mobiles-tendances 2015

  1. 1. Sites Web et Mobiles Tendances 2015 Webdesign Olivier Dommange
  2. 2. Olivier Dommange Les tendances du Webdesign
  3. 3. Olivier Dommange Sites Web
  4. 4. Olivier Dommange Responsive Webdesign (RWD) Adapter la mise en page d'un site et son contenu aux supports Avantages : Contenus, fonctionnalités et aspect adapatés à chaque support. Optimisation du poids (notamment des images) en fonction du support. Entretien aisé. Un seul site. Inconvénients : Du temps supplémentaire s’ajoute à la conception et de réalisation traditionnelle d’un site. Les formats des supports très variables.
  5. 5. Olivier Dommange Responsive Webdesign (RWD) Site du livre « Adaptative Web Design » http://easy-readers.net/books/adaptive-web-design/
  6. 6. Olivier Dommange http://rts.ch/ http://lausanne.ch/ http://ge.ch/ http://letemps.ch/ http://24heures.ch/ http://ch.ch/ http://vd.ch/ http://hebdo.ch/ http://illustre.ch/ Responsive Webdesign (RWD) Quels sites sont responsives Autres que ceux des agences Web... Etat en décembre 2014
  7. 7. Olivier Dommange Monopage « One page » Site dont le contenu est décliné sur une seule page. La page est divisée en portions verticales. Avantages : Esthétique et ergonomique. Adapté à la navigation sur mobile. Occupe l'espace horizontal de la page. Inconvénients : Page lourde à charger (utiliser le progressive load) Pas bien pour le référencement d'un site Pose certains défis techniques au niveau développement (jQuery, Ajax)
  8. 8. Olivier Dommange http://t-l.ch/ Monopage « One page » exemple Site t-l.ch Contenu réparti sur une colonne Le site est responsive Navigation sur plusieurs pages
  9. 9. Olivier Dommange Grille dynamique Contenus organisés en zones qui se positionnent en fonction de la taille du support. Avantages : Esthétique et ergonomique. Adapté à la navigation sur mobile. Contenu dynamique. Inconvénients : Page lourde à charger (utiliser le progressive load) Pas bien pour le référencement d'un site Pose certains défis techniques au niveau développement (jQuery, Ajax)
  10. 10. Olivier Dommange Grille dynamique - exemple Pinterest emploie l’organisation dynamique de la mise en page du site. http://fr.pinterest.com/melissacales/2014-design-trends
  11. 11. Olivier Dommange Grille dynamique - Masonry Basé sur le card design, Masonry est un effet de transition en Javascript employé pour animer le repositionnement des contenus. http://masonry.com/
  12. 12. Olivier Dommange Animé et « storytelling » Reportage interactif mixant les médias audiovisuels et photos au Web. Avantages : Hautement interactif, esthétique et ludique. La navigation est à la première personne (l'utilisateur se met à la place du héros) Inconvénients : Page lourde à charger Réalisation temps, coût et matériel important Pose certains défis techniques au niveau développement (jQuery, Ajax)
  13. 13. Olivier Dommange Animé et « storytelling » http://www.world-of-swiss.com/fr
  14. 14. Olivier Dommange Composants HTML et CSS
  15. 15. Olivier Dommange Format SVG Initité en 1999, le SVG (Scalable Vector Graphics) est un format vectoriel de mieux en mieux supporté sur le Web. Avantages : Se redimensionne sans perte de qualité. Format d’image léger. Peut être formaté avec du CSS. Peut être généré depuis un logiciel de création d’illustrations (Illustrator, Inskape,...). Inconvénients : Genère quantité de code pour les formes complexes.
  16. 16. Olivier Dommange http://upload.wikimedia.org/wikipedia/commons/6/6c/Trajans-Column-lower-animated.svg Format SVG - Exemple Illustrations complexes et interactives.
  17. 17. Olivier Dommange Canvas Composant HTML qui permet de créer des animations interactives dans une page Web. Avantages : Plus performant que SVG. Engendre peu de code dans le HTML. Intervient sur les pixels des images. Dorénavant très bien supporté par les navigateurs récents (IE9 et +) Inconvénients : Implique du développement en Javascript pour la création de visuels et de l’interactivité.
  18. 18. Olivier Dommange http://shinydemos.com/emberwind/ Canvas - Exemple Les jeux ainsi que les bannières interactives utilisent ce composant afin qu’ils soient visibles sur les supports mobiles.
  19. 19. Olivier Dommange CSS 3D Transform Ajouter de la perspective aux pages Web Avantages : Supporté sur tous les navigateurs récents Une propriété CSS simple à employer pour les Webdesigners
  20. 20. Olivier Dommange http://tridiv.com/ CSS 3D Transform - exemple Application Web 3D en HTML et CSS
  21. 21. Olivier Dommange CSS Animation Créer des animations avec CSS. Avantages : Supporté sur tous les navigateurs récents Une propriété CSS simple à employer pour les Webdesigners Inconvénients : Implique de nombreux essais pour réaliser une animation réussie. Un générateur de codes s’avère incontournable. http://www.cssanimate.com/
  22. 22. Olivier Dommange https://creative.adobe.com/products/animate https://www.google.com/webdesigner Logiciels d'animation Permettent de créer des animations et des interfaces interactives utilisant les récents composants HTML et CSS Avantages : Remplacent Flash pour les supports mobiles. Facilite l’incorporation des codes Javascript nécessaires au fonctionnement de <canvas>. Permettent d’éditer le code généré. Inconvénients : Le code est automatiquement généré. Cela correspond-il aux besoins du métier ? Concurrencé par les librairies de codes (framework) en javascript notamment jQuery
  23. 23. Olivier Dommange jQuery Librairie Javascript (framework) facilitant l’animation des interfaces et la création d’outils utilisant les ressources du support. Avantages : Supporté sur tous les navigateurs. Dispose d’un grand nombre d’extensions (plug-ins) qui permet de créer des animations sophistiquées. S’adresse également aux Webdesigners qui ne sont pas des développeurs. Dispose d’une version mobile pour le support des outils et événements mobiles en plus de permettre la création d’objets de l’interface.
  24. 24. Olivier Dommange Graphiques
  25. 25. Olivier Dommange Skeuomorphisme Aspect hyperréaliste et texturé. Fait écho au monde réel. Facilite le repérage et l'utilisation des outils. Avantages : Oriente rapidement l'utilisateur. Esthétique et graphiquement beau, réfère à la sophistication. Inconvénients : Charge graphiquement une interface. Long et complexe à créer. Se décline difficilement en petite taille.
  26. 26. Olivier Dommange Flat design Graphisme minimaliste, clair, épuré et en aplat. Privilégie l’absence d’éléments de styles superflus. Avantages : Améliore la lisibilité. Adaptable facilement aux thématiques et aux fonctionnalités de l'interface Conception graphique rapide. Chargement de la page plus rapide (image légère). Inconvénients : Simplicité ne veut pas dire simple à concevoir (pas d'analogie d'objet au monde réel). Peut sembler simpliste et non travaillé. Conserver (ou décliner) l’identité graphique de la marque.
  27. 27. Olivier Dommange Flat design - déclinaison Flat design long shadow Couleurs unies vives disposant d’une ombre portée forte et tranchée par une couleur unie déclinée de la couleur principale.
  28. 28. Olivier Dommange Flat design - déclinaison Material design Google propose en 2014 pour la version d’Android 5.0 (Lollipop) une variante supplémentaire au « flat design ». Les limites des aspects graphiques et simplistes du « flat design » rendent la compréhension de certains icônes difficiles. Le « material design » cherche à résoudre cette problématique. http://www.google.com/design
  29. 29. Olivier Dommange Flat design - interfaces L’efficacité reconnue du flat design en fait la référence du moment. Les interfaces de nombreux sites Web adoptent cette nouvelle tendance. http://www.fitbit.com/ http://www.smartphood.it/
  30. 30. Olivier Dommange Data information design Expliciter par l’image des concepts complexes Avantages : Rapide à consulter. Ludique. Evite le contenu rébarbatif. S’accorde à la tendance du Flat design. Inconvénients : Ne s’applique pas à toutes les formes de contenus. Parfois complexe à représenter pour les données qualitative.
  31. 31. Olivier Dommange http://www.linkedin.com/in/olivierdommange

×