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

1. Sites Web et Mobiles
Tendances 2015
Webdesign
Olivier Dommange

2. Olivier Dommange
Les tendances
du Webdesign

3. Olivier Dommange
Sites Web

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. Olivier Dommange
Responsive Webdesign (RWD)
Site du livre
« Adaptative Web Design »
http://easy-readers.net/books/adaptive-web-design/

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. 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. 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. 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. 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. 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. 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. Olivier Dommange
Animé et « storytelling »
http://www.world-of-swiss.com/fr

14. Olivier Dommange
Composants HTML et CSS

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. Olivier Dommange
http://upload.wikimedia.org/wikipedia/commons/6/6c/Trajans-Column-lower-animated.svg
Format SVG - Exemple
Illustrations complexes et
interactives.

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. 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. 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. Olivier Dommange
http://tridiv.com/
CSS 3D Transform - exemple
Application Web 3D en HTML et CSS

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. 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. 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. Olivier Dommange
Graphiques

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. 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. 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. 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. 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. 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. Olivier Dommange
http://www.linkedin.com/in/olivierdommange