Tendances du Web design

Proposé par l’équipe pédagogique Orsys*

En 2013, le maître mot en matière d’interfaces graphiques était « simplicité ». Qu’en sera-t-il pour 2015 ?

La tendance 2013, le Flat Design, impulsée par la sortie de Windows 8 – avec son interface graphique Modern UI – et confirmée avec la sortie d’iOS 7, s’est en effet poursuivie. Ici, fini les effets de relief et les simulations de textures : le Flat Design privilégie le contenu plutôt que le contenant. Il mise sur une interface graphique épurée, des icônes claires et minimalistes, des couleurs vives et de nouvelles typographies.

Article Web Design 1

Cette tendance perdurera en 2015, d’autant plus que celle-ci s’adapte parfaitement au développement des interfaces graphiques des applications pour smartphones, tablettes et autres objets connectés, comme les montres par exemple, massivement adoptés par les internautes.

En parallèle, le Material Design, lancé par Google, fait parler de lui depuis juin 2014. Considéré comme une évolution du Flat Design, le Material Design se caractérise par de grands principes graphiques. Ici, on considère que les transitions et les animations sont essentielles à la compréhension de l’espace écran : changement d’écran, apparition d’un bloc d’informations, effet de zoom sur un élément de la page… Son objectif étant d’améliorer ce que l’on nomme l’UX (expérience utilisateur).

Quel est l’impact de l’évolution grandissante des sites mobiles sur la conception des interfaces graphiques ?

Internet se consomme en effet de plus en plus sur mobile. On compte 27 millions de mobinautes (11,2 millions de tablonautes) sur 43,2 millions d’internautes français*. Les sites Web sont consultés à partir de terminaux ayant des résolutions et des tailles d’écran très variées, et disposant de capacités mémoire inférieures à celles des ordinateurs. Le Flat Design offre une expérience utilisateur satisfaisante intégrant les particularités de l’ensemble de ces terminaux. Sur les écrans tactiles, les textes et les éléments graphiques épurés permettent d’accélérer le chargement des pages Web et d’offrir une meilleure fluidité au niveau de la navigation.

L’autre réponse, intimement liée, est celle du Responsive Web Design (RWD). Son objectif : adapter automatiquement le contenu d’un site Web aux différentes résolutions et tailles d’écran et, ainsi, en favoriser la lecture sur n’importe quel support (smartphones, tablettes, montres connectées…). Concrètement, les textes s’adaptent à la largeur de l’écran, les images se redimensionnent ou se repositionnent par rapport au texte, les menus se réagencent… afin d’apporter un meilleur confort visuel.

Article Web Design 2

 

 

 

 

 

 

 

 

L’approche de conception de Marcotte**, dite Mobile First, tient compte de ces exigences. Elle privilégie d’abord le design ergonomique de l’interface pour terminaux mobiles, à base de grilles fluides, avant d’établir le design pour un terminal « de bureau ».

Quelles sont les nouveautés du côté de W3C, en charge de valider les standards adoptés par les navigateurs ?

Les nouveautés touchent essentiellement les langages HTML5 et CSS3. Bien que l’on parle de ce couple mythique depuis déjà de nombreuses années, ce n’est que le 28 octobre 2014 qu’HTML5 est devenu une recommandation officielle du W3C. Le CSS3 est, quant à lui, toujours en cours de standardisation. On a pu noter une certaine frilosité des développeurs sur ces langages, car rien ne garantissait la pérennité de leurs balises ou de leurs sélecteurs, ni même leur support par l’ensemble des navigateurs. Nombre d’entre eux ont pourtant fait leurs preuves et sont repris par la plupart des navigateurs récents.

Parmi les nouveautés CSS3 retenons :

– le positionnement par grille (Grid Layout), il permet de diviser la page en différentes zones dans lesquelles se placeront tous les types de contenus (images, textes, vidéos, diaporama…). Associé aux media queries, il est possible d’adapter la mise en page aux caractéristiques du terminal (taille de l’écran, orientation, densité de pixels…). Ces deux éléments CSS3 constituent les piliers de la mise en place du Responsive Design au sein de sites Web ;

– les transformations géométriques 2D et 3D d’un élément (rotation, translation, grossissement…). Les transitions et les animations apportées par les CSS3 offrent de nouvelles interactions afin d’améliorer l’expérience utilisateur.

Et du côté d’HTML5 : – les nouvelles balises sémantiques soutiennent le travail des ergonomes qui doivent se concentrer sur la hiérarchie des éléments et leur fonction au sein de la page ; – le processus de création d’images ou d’icônes vectorielles en SVG permet d’imaginer des interfaces à base de formes géométriques simples (rond, carré, arc de cercle…) redessinées à chaque visualisation. Elles répondent parfaitement aux attentes du Flat Design et du RWD ;

Article Web Design 3Visuel créé en SVG Source :http://blogs.msdn.com/b/davrous/archive/2011/05/09/introduction-aux-apis-graphiques-d-html5-svg-amp-canvas-1-4.aspx
– la création d’éléments graphiques 2D et 3D (animations, bannières, applications, jeux…) à partir de canvas améliore l’expérience utilisateur grâce à la production de contenus riches.

Article Web Design 4

Jeu créé en HTML Source :https://www.youtube.com/watch?v=tB9Jb2o79Pk

Enfin, retenons également le nouveau framework Polymer de Google. Il aide à appliquer les règles du Material Design lors de la conception d’une application Web. Google met d’ailleurs régulièrement à jour ses applications mobiles (Gmail, Gmaps…) en Material Design afin d’uniformiser les usages, quel que soit le support de consultation.

Quels programmes de formation avez-vous mis en place à Orsys pour répondre à ces nouveautés ?

De nombreux cours Orsys traitent de la conception de sites Web, qu’ils soient mobiles ou non. Nous avons renforcé ceux portant sur les fondamentaux de HTML5 et CSS 3, ainsi que sur la création de contenus riches et la conception d’interfaces « responsive » (voir ci-dessous). Les cours sur les frameworks mobiles et la conception d’applications multicanales « responsive » ont aussi un intérêt particulier…

* Article Web Design 5

**Chiffres 2013 – Médiamétrie **Ethan Marcotte est à l’origine du concept de responsive Web design

 

Formations associées :

 

Share Button

Cette entrée a été publiée dans Informatique, Logiciels, avec comme mot(s)-clef(s) , , , , , , , , , , , , , , , , , . Vous pouvez la mettre en favoris avec ce permalien.

Commentaires

3 réponses à Tendances du Web design

  1. Ping : Tendances du Web design | Le blog de la formati...

  2. Hello, It is a good post, thanks, good job , http://www.domohouse-technologie.ma/domotique-rabat la domotique rabat casablanca marrakech agadir

  3. Ping : Responsive Design : les bonnes pratiques à mettre en œuvre – Les carnets d'ORSYS

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

*