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