En tant que supports numériques, les sites web sont extrêmement susceptibles d’évoluer en 2018, bien plus que les techniques traditionnelles d’imprimerie… Mais, 18 années après le début du millénaire, ça ne surprend plus grand monde, non ? Ce qui est surprenant, en revanche, c’est la manière dont les designers web ont réussi à s’adapter aux défis techniques les uns après les autres, tout en parvenant à créer des sites intuitifs, clairs, innovants, cohérents avec les marques qu’ils représentent, adaptatifs pour aller sur tous les formats d’écrans et tout simplement beaux.

Beaucoup de nouveautés ont vu le jour en 2017, y compris l’utilisation mobile qui a pris le dessus sur toutes les autres. Cela signifie que 2018 va devoir exploiter les fonctionnalités plus que jamais, tandis que l’utilisation bureau devra évoluer pour rester dans la course. Avec tout ça en tête, voyons voir ce que les tendances en design web nous réservent pour 2018.

9 tendances design web à surveiller de près en 2018

  1. Ombres et profondeur
  2. Palettes de couleurs
  3. Background en particule
  4. Mobile avant tout
  5. Illustrations sur mesure
  6. Big, Typographie
  7. Grilles
  8. Animations intégrées
  9. Dégradés dynamiques

1. Ombres et profondeur

The search bar for Algolia's website
Via Algolia

L’utilisation des ombres n’est pas toute nouvelle. Pourquoi donc en parler ? Bien que cette technique existe depuis un certain temps dans le monde du design web, on voit émerger de nouvelles variations, notamment grâce à l’évolution des navigateurs. Les mises en page parallaxe ou en grille permettent aux graphistes de jouer avec les ombres au maximum de sorte à donner de la profondeur à leurs design et créer ainsi l’illusion que tout un monde se cache derrière l’écran. C’est l’une des réactions directes à la tendance flat design très à la mode ces dernières années.

An image of clearbrit.com's home page
Via Clearbit
An image of scaleapi.com's home page
Via ScaleAPI

Shadowplay a créé un effet étonnamment polyvalent qui améliore non seulement l’esthétique de son site, mais qui améliore également l’expérience utilisateur en accentuant tel ou tel aspect de chaque page. Par exemple, en ajoutant de légères ombres qui apparaissent lorsque la souris passe sur tel ou tel autre élément n’est pas une idée nouvelle. Mais combiner cela à un dégradé de couleurs vives (plus sur ce sujet plus bas) renforce l’aspect tridimensionnel de la page.

2. Palettes de couleurs saturées

An image of adobe.com's landing page
Via Adobe
An image of Spotify's web page
Via Spotify
An image of Eg Wine Co's web page
Via EgWineCo
A landing page for Arielle Careers
Landing page colorée réalisée par Adam Bagus pour Arielle Careers

2018 est clairement l’année de tous les excès en ce qui concerne les couleurs sur le net. Si auparavant les marques et les graphistes préféraient faire des choix sans risques, de plus en plus de designers tentent le tout pour le tout avec des couleurs plus courageuses, notamment avec des couleurs très saturées. Ces couleurs-là sont généralement utilisées pour les en-têtes qui ne sont d’ailleurs plus « juste horizontales », mais réinventées avec imagination.

Ceci est notamment aidé par les avancées technologiques qui concernent les moniteurs et les écrans en général qui reproduisent plus efficacement les couleurs riches. Les tons vibrants, et même les couleurs contrastantes, peuvent être très utiles pour les nouvelles marques qui espèrent attirer l’attention de consommateurs très rapidement. Mais c’est également une bonne méthode pour les entreprises déjà établies, pour se démarquer des sites web plus traditionnels.

3. Background en particule

An animated header for Heco's home page
Via Heco

Ces animations sont réalisées en JavaScript (elles sont donc légères) et permettent d’intégrer un mouvement naturel au fond d’écran d’un site, sans pour autant que la page mette du temps à charger.

On dit souvent qu’une image vaut mille mots. On ira encore plus loin en disant qu’une image en mouvement en vaut plus que dix mille. Les backgrounds en particule attirent immédiatement l’attention des visiteurs, grâce à quoi les marquent pourront laisser une impression durable dans l’esprit des utilisateurs, en quelques secondes seulement.

En plus de cela, les graphiques animés sont de plus en plus populaires sur les réseaux sociaux et peuvent guider les utilisateurs vers un site web très efficacement.

4. Mobile avant tout

A mobile nutrition app design
Application mobile réalisée par Masum R.
An image of the mobile version of G-Star's web page
Via G-Star
An image of the mobile version of IGK Hair's web page
Via IGK Hair
An animated mobile app for home growing
Application réalisée par Typelab D

Comme mentionné précédemment, la navigation mobile a désormais dépassé la navigation bureau. De nos jours, la quasi-totalité des consommateurs fait son shopping et ses achats depuis leur smartphone. Avant, le processus n’était pas vraiment intuitif et peinait à convaincre. Les graphistes se demandaient alors comment pouvaient-ils créer des menus, sous-menus et sous sous-menus sur un écran aussi petit…

Mais maintenant, les techniques de design ont évolué. Le bouton « burger » est devenu incontournable, car il permet de réduire la taille du menu en un clic. Certes, il faut parfois abandonner l’esthétique des photos grand format en fond d’écran, mais les icônes sont tellement plus économiques en termes d’espace que les utilisateurs comprennent très bien leurs fonctionnalités. Les problèmes liés à l’expérience utilisateur sont désormais mieux identifiés et donc mieux gérés, notamment grâce aux micro-interactions, et permettent d’obtenir des retours d’expérience en temps et en heure.

5. Illustrations sur mesure

An image of Stride.com's illustrated header
Via Stride
An image of a cartoon style web page
Web page illustrated and designed by SixDesign
An image of zingle.com's illustrated header
Via Zingle

Les illustrations sont des éléments graphiques très polyvalents pour créer des images à la fois amusantes et accessibles. Les artistes expérimentés sont capables de réaliser des illustrations chargées de personnalité et sur mesure pour n’importe quelle marque.

An image of flowmapp.com's illustrated header
Via FlowMapp

Si cette tendance est idéale pour les entreprises qui ont une personnalité joyeuse et dynamique, les autres marquent, perçues comme sérieuse ou formelles, peuvent également en tirer profit pour paraître plus accessibles auprès de leurs clients. Quelle que soit l’identité de votre marque, il y a très certainement un style d’illustration qui vous conviendra.

6. Typographie

Femme Fatale Studio's animated web header image
Via Femme Fatale Studio
The header image of oursroux.com
Via OursRoux

La typographie n’a jamais été aussi importante en ce qui concerne la communication visuelle. Capable de créer une personnalité de marque à elle seule, de susciter des émotions et de donner la mesure à un site web tout entier, en plus de communiquer des messages importants. Et, étant donné que la qualité des écrans ne fait qu’augmenter, on peut s’attendre à voir de plus en plus de polices de caractères réalisées sur mesure. Mis à part Internet Explorer, la plupart des navigateurs s’adaptent à toutes les typographies, grâce au CSS. La tendance du lettrage XL ainsi que les jeux de contraste entre sérif et sans-sérif permettent de créer des parallèles dynamiques, d’améliorer l’expérience utilisateur et surtout, parviennent à retenir les visiteurs sur un site donné.

The header image of Nurture Digital's home page
Via Nurture Digital

Pour les pages web en particulier, les en-têtes sont primordiaux pour le référencement, et aident à organiser l’information pour que les visiteurs puissent facilement trouver ce qu’ils cherchent. En 2018, les graphistes exploiteront ce principe et proposeront des en-têtes XL percutants, notamment grâce à des typographies uniques et originales.

7. Grille et asymétrie

The header image of dada-data's home page
Via Dada-Data
The header image of Veintidos Grados' home page
Via Veintidos Grados
The header image of Beoplay's home page
Via Beoplay

L’émergence de l’asymétrie et des mises en page originales constituait l’un des grands changements de 2017. La montée de cette tendance ne va pas s’arrêter là et continuera d’évoluer au cours de l’année. C’est surtout parce qu’elles sont vraiment uniques et expérimentales que les compositions asymétriques séduisent.

Bien que les très grandes marques qui proposent énormément de contenu sont restées sur leurs positions avec un layout « grid » traditionnel, on verra très probablement de plus en plus d’originalité de ce côté-là dans les prochains mois, puisque chaque entreprise cherche avant tout à se différencier de ses concurrents. Elles ne sont peut-être pas très intéressées par l’aspect esthétique de la technique, mais elles peuvent souvent se permettre de prendre quelques risques. Les graphistes se feront donc une joie de leur présenter des idées hors du commun.

8. Animations intégrées

The animated header of InTurn's web page
Via InTurn

Au fur et à mesure que les navigateurs web progressent, les sites web ont de plus en plus recours aux images dynamiques, comme les animations, pour améliorer l’engagement utilisateur. Contrairement aux animations en particule dont nous avons parlé plus haut (et qui sont généralement en fond parce que très grande), les petites animations peuvent être utiles pour inciter les visiteurs à interagir avec le site pendant toute la durée de ses opérations. Par exemple, un élément graphique peut servir à divertir l’utilisateur pendant qu’une page est en train de charger. Ces animations-là peuvent également être programmées pour fonctionner avec un défilement, avec la navigation ou être tout simplement l’élément central d’un site web.

Les animations sont des outils précieux pour inclure les utilisateurs dans l’histoire d’un site web. Elles leur permettent de se voir eux-mêmes en tant que clients de la marque. Même si vous n’êtes intéressé par les animations que pour ajouter un peu de légèreté à votre site, elles permettent aux visiteurs de se sentir impliqués.

9. Dégradés dynamiques

The header image of symodd's home page
Via symodd
An app screen for Fire Works
Fire Works mobile app by Samuel.Z for Fish on Fire
App screens for a Muslim prayer app
Mobile app by M. Tony for Elmurz
The header image of the Elje Group's home page
Via Elje Group

Le flat design a été la tendance préférée de tous ces dernières années. Mais les dégradées de couleurs font leur grand retour en 2018. La dernière fois que l’on a vu chose pareille, c’était sous la forme d’ombres, pour suggérer une légère 3D (les icônes d’Apple en sont un très bon exemple).

Désormais, les dégradés ne se cachent plus : ils sont vifs, bruyants et très colorés. Les filtres dégradés utilisés en photo sont l’exemple le plus récent de cette technique, ou comment rendre une photo « moyenne » beaucoup plus intéressante. Un simple dégradé en fond d’écran peut également s’avérer être la solution tendance idéale si vous n’avez pas d’image avec laquelle travailler.

On a hâte de découvrir ce que le design web nous réserve en 2018 !

Entre les couleurs vives, les dégradés osés et les animations intégrées, 2018 promet d’être très fun ! On a hâte de voir les solutions que les graphistes vont pouvoir imaginer et jusqu’où ils seront prêts à aller.

Vous avez besoin d'un site web pour votre entreprise?
Regardez ce que nos graphistes savent faire !