Si les tendances webdesign de 2017s’illustrait déjà par la place qu’elle donnait à l’utilisateur, 2018 vient confirmer l’importance donnée à l’UX. Le responsive design évolue et la conception graphique s’oriente mobile-first. Une évidence lorsqu’on pense que presque la moitié de la population navigue directement sur son mobileplutôt que sur un ordinateur !
Le Material Design
Minimaliste, en aplat de couleur et privilégiant l’essentiel pour faciliter la lisibilité sur les supports mobiles aussi bien que sur les ordinateurs, le flat design s’est enrichi et a évolué vers une nouvelle tendance résolument orientée mobile : le Material Design.
Le Material Design, conçu par Google, est un style graphique et ergonomique élaboré sur un ensemble de règles, orientées vers la conception UI / UX des applications et logiciels.
En 2018, ce style, reprenant à sa façon quelques éléments du skeumorphisme (retour des ombrages, dégradés de couleur), revient sur les effets d’ombre et de lumière, joue sur les couleurs, les typographies. Tout en privilégiant un design unifié sur toutes les plateformes.
Conception Mobile First
Conséquence des nouvelles tendances, mais surtout de la façon dont le smartphone a pris de l’importance dans notre quotidien, la conception web s’inscrit dans une optique résolument mobile first.
Il ne s’agit plus seulement de concevoir son site Internet en mode « responsive design » mais de créer les pages web d’abord pour mobile et tablette. Ainsi, le contenu est clairement orienté de sorte à répondre aux exigences des utilisateurs sur mobile : une navigation fluide, qui rappelle les usages des applications mobiles.
La conception en mobile first implique :
- Le focus sur l’essentiel : aucun élément ne doit être superflu. On centre la conception sur l’ergonomie
- Une performance optimale : rapidité, fluidité, facilité à naviguer
- Un design adapté : d’où la popularité de plus en plus forte du Material Design
- La priorité au HTML5, plus léger et adapté aux supports modernes
- Le focus sur le contenu : l’utilisateur a une recherche spécifique en naviguant sur votre site, il doit trouver rapidement l’information.
- Pas d’effets, codes et ressources superflues : les pages doivent se charger rapidement
Le mobile first est d’autant plus important aujourd’hui que Google donne la priorité aux mobiles (index mobile-first). Savoir tirer parti de ces nouvelles exigences sera impactera positivement votre référencement naturel. Raison pour laquelle les développeurs UX sont de plus en plus sollicités.
Les couleurs vives
La sobriété, c’est dépassé ! Les webdesigners osent les couleurs vives, mais elles ne sont pas utilisées au hasard. La couleur est porteuse de sens, mais sert aussi à renforcer un message ou orienter l’utilisateur dans la navigation.
Les années 80 / 90 font leur grand retour avec un but : casser les interfaces et design trop normés avec des teintes qui marquent les esprits. On injecte plus de personnalité dans le design des pages web, faire valoir une image plus visionnaire et résolument actuelle.
On retrouve l’usage de la couleur aussi bien sur les boutons, fond de page, qu’en philtre semi-opaque sur les photos ou encore en monochrome, vibrant et percutant.
Le pantone 2018, Ultra Violet, illustre bien cette tendance aux couleurs moins conventionnelles et résonne comme un symbole d’originalité et d’audace.
Les dégradés
De la même manière, les dégradés jusqu’alors boudés font leur grand retour. L’exemple le plus célèbre ? Instagram, qui a transformé son logo en conciliant son look minimaliste en y ajoutant un dégradé de couleurs flashies.
Le dégradé s’inscrit clairement dans l’esprit Material Design : il s’agit d’ajouter de la profondeur, d’attirer l’œil en conciliant l’ergonomie attendue sur les plateformes mobiles et l’exploitation des écrans HD.
Minimalisme
Malgré l’explosion de couleurs, le minimalisme a la part belle dans la conception UI des pages web et mobiles. Le blanc vient servir le contenu en lui donnant de l’espace et de l’impact. L’information est au cœur de la conception graphique.
Les textes sont aérés, les titres sont mis en valeur par l’usage d’une typographie qui dénote. On ose concilier les polices en surgras avec des typos fines et les call to action sont à la fois très visuels et minimalistes grâce à l’iconographie, déjà très utilisée en flat design.
Dans le même esprit, les photos et visuels sont utilisés à bon escient. Le but est de donner de la valeur ajoutée et de traduire une émotion au premier coup d’œil. C’est là l’héritage du storytelling, concept très apprécié des experts marketing.
En somme, les interfaces web en 2018 s’illustrent par :
- Le content first
- Un style épuré, sans fioriture inutile
- Des contenus centrés
- L’UI au coeur du concept
- Le mariage du blanc et de la couleur
- L’optimisation en HTML5 et CSS3
Le format SVG
Là où les formats d’image classiques viennent à pixelliser sur des formats de type pictographique ou offrir des contours dégradés (une couleur buvant l’autre ou se répandant sur le blanc autour), le SVG offre un rendu impeccable quel que soit l’écran et sa taille d’affichage.
S’il était auparavant ignoré pour des questions d’optimisation ou de sécurité, aujourd’hui, les intégrateurs web ne le boudent plus. C’est un format vectoriel : une image en SVG se traduit en descriptions géométriques plutôt qu’en pixels comme le JPG ou le PNG.
Ainsi, l’image est belle et lisse quelle que soit la résolution ou la taille qu’on lui applique. Par ailleurs, une icône en SVG est plus légère et ne voit pas son poids impacté par la taille qu’on lui attribue. Un format qui permet également l’usage d’illustrations animées, particulièrement tendances !
Animations et vidéos
Le CSS3 couplé au HTML5 permettent de plus en plus d’effets sans avoir recours à un code trop lourd. Les webdesigners l’ont bien compris et n’hésitent plus à incorporer des effets animés très visuels aux interfaces graphiques.
En SVG, comme nous en parlions dans le chapitre précédent, ou en effet CSS (focus, hover, au scroll), les animations ont la part belle. Elles sont parfois au cœur de la navigation et guident l’utilisateur lors de la navigation. Elles peuvent aussi être plus discrètes et enrichir la navigation en réagissant au défilement, au clic, pour mieux immerger l’utilisateur.
La vidéo est elle aussi très populaire pour faire passer un message, une valeur. Son potentiel en matière d’engagement est connu et on l’utilise majoritairement pour susciter une émotion. Son contenu doit être simple mais percutant.
Formes géométriques
Autre réponse au style très structuré du flat design, les formes géométriques viennent casser les codes dont on a l’habitude pour introduire plus de fantaisie et d’audace, de la même manière que les couleurs.
La forme géométrique vient habiller un background, mettre en valeur un formulaire, attirer l’œil vers une action de l’utilisateur. Elle permet aussi d’habiller et de marquer une transition en créant une coupure nette entre un contenu et un autre. Ainsi, la forme géométrique peut-être particulièrement pertinente sur les sites one-page.
Retour des arrondis et de la police en serif
L’un et l’autre semblaient dépassées il y a encore deux ou trois ans. Utiliser une bordure arrondie étaient la marque d’une faute de goût. Quant à l’écriture serif, elle était boudée au profit de sa concurrente sans-serif, jugée plus lisible sur les écrans de toute taille. Aujourd’hui, l’un et l’autre ont leur revanche.
Les boutons osent de nouveau les arrondis. Certains n’ont même plus peur d’y ajouter de la couleur en dégradé ! La mode du bouton rectangulaire ou carré laisse sa place au bouton aux bordures très courbes et aux call to action ronds, d’autant plus impactant sur le mobile où la navigation se fait avec le doigt.
Quant à la police en serif, on ose désormais la marier avec la sans-serif, permettant ainsi de démarquer les titres et les sous-titres, ou les titres et le contenu. La typographie est au cœur du webdesign et on ose jouer avec ses formes, ses épaisseurs et ses empattements comme on ose, en 2018, jouer avec les couleurs les moins conventionnelles.
La grille asymétrique
Le concept de grille est bien connu des graphistes, webdesigners et intégrateurs web. Cette technique permet de structurer le contenu et lui donner de la cohérence, visuellement. La grille s’est illustrée sur le web avec l’avènement du responsive design.
La grille, en graphisme, permet :
- De structurer
- D’équilibrer
- D’instaurer de l’harmonie
Néanmoins, vous l’avez vu, en 2018, on aime casser les normes pour des concepts graphiques plus frais et plus entreprenants. On brise la monotonie en surprenant visuellement, et la grille asymétrique permet justement cela.
L’inspiration vient clairement du print. Les pages sont plus volontiers déstructurées à la manière d’un magazine et les textes s’entrecroisent, les contenus se superposent. On cherche à susciter la curiosité, à intriguer pour mieux convertir.
En conclusion, 2018 s’inscrit dans la conception de designs ultra personnalisés, dont le but est de marquer par une expérience utilisateur facile, unique et agréable. L’ergonomie et l’adaptabilité de l’interface met au ban des techniques qui ont dominé le web pendant des années, comme l’usage du slider. Le mobile first s’ancre dans les méthodes de conception.
Vous souhaitez d’autres astuces pour booster vos pages web ? Découvrez 10 tendances UX pour convertir les utilisateurs de vos pages web.
- Comment utiliser le framework React JS - 17/09/2020
- Les logiciels ERP en 2020 - 16/09/2020
- La reprise de l’emploi sur le marché informatique en temps de crise mondiale - 28/08/2020