Sites Web et Mobiles Tendances 2015 Webdesign Olivier Dommange
Sites Web et MobilesTendances 2015
Webdesign
Oliv
ier D
omm
ange
Oliv
ier D
omm
ange
Les tendancesdu Webdesign
Oliv
ier D
omm
ange
Sites Web
Oliv
ier D
omm
ange
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.
Oliv
ier D
omm
ange
http://easy-readers.net/books/adaptive-web-design/
Responsive Webdesign (RWD)
Site du livre« Adaptative Web Design »
Oliv
ier D
omm
ange
http://rts.ch/ http://ge.ch/
http://letemps.ch/ http://24heures.ch/ http://ch.ch/
http://vd.ch/ http://hebdo.ch/ http://illustre.ch/
http://lausanne.ch/
Responsive Webdesign (RWD)
Quels sites sont responsives
Autres que ceux des agences Web...
Etat en décembre 2014
Oliv
ier D
omm
ange
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 sitePose certains défis techniques au niveau développement (jQuery, Ajax)
Oliv
ier D
omm
ange
http://t-l.ch/
Monopage « One page » exemple
Site t-l.ch
Contenu réparti sur une colonneLe site est responsive Navigation sur plusieurs pages
Oliv
ier D
omm
ange
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 sitePose certains défis techniques au niveau développement (jQuery, Ajax)
Oliv
ier D
omm
ange
http://fr.pinterest.com/melissacales/2014-design-trends
Grille dynamique - exemple
Pinterest emploie l’organisation dynamique de la mise en page du site.
Oliv
ier D
omm
ange
http://masonry.com/
Grille dynamique - Masonry
Basé sur le card design, Masonry est un effet de transition en Javascript employé pour animer le repositionnement des contenus.
Oliv
ier D
omm
ange
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 à chargerRéalisation temps, coût et matériel importantPose certains défis techniques au niveau développement (jQuery, Ajax)
Oliv
ier D
omm
ange
http://www.world-of-swiss.com/fr
Animé et « storytelling »
Oliv
ier D
omm
ange
Composants HTML et CSS
Oliv
ier D
omm
ange
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.
Oliv
ier D
omm
ange
http://upload.wikimedia.org/wikipedia/commons/6/6c/Trajans-Column-lower-animated.svg
Format SVG - Exemple
Illustrations complexes et interactives.
Oliv
ier D
omm
ange
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é.
Oliv
ier D
omm
ange
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.
Oliv
ier D
omm
ange
CSS 3D Transform
Ajouter de la perspective aux pages Web
Avantages :Supporté sur tous les navigateurs récentsUne propriété CSS simple à employer pour les Webdesigners
Oliv
ier D
omm
ange
http://tridiv.com/
CSS 3D Transform - exemple
Application Web 3D en HTML et CSS
Oliv
ier D
omm
ange
CSS Animation
Créer des animations avec CSS.
Avantages :Supporté sur tous les navigateurs récentsUne 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/
Oliv
ier D
omm
ange
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
Oliv
ier D
omm
ange
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.
Oliv
ier D
omm
ange
Graphiques
Oliv
ier D
omm
ange
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.
Oliv
ier D
omm
ange
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'interfaceConception 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.
Oliv
ier D
omm
ange
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.
Oliv
ier D
omm
ange
http://www.google.com/design
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.
Flat design - déclinaison
Oliv
ier D
omm
ange
http://www.fitbit.com/ http://www.smartphood.it/
L’efficacité reconnue du flat design en fait la référence du moment. Les interfaces de nombreux sites Web adoptent cette nouvelle tendance.
Flat design - interfaces
Oliv
ier D
omm
ange
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.
Data information design
http://www.linkedin.com/in/olivierdommange
Olivier Dommange