Sélectionner une page

Les tendances web design pour 2018

Les tendances web design pour 2018

par | Août 31, 2018 | Web design | 0 commentaires

Vous êtes peut-être en train de réfléchir à la refonte de votre site web pour la rentrée, si tel est le cas vous devriez vous renseigner sur les tendance web design pour 2018. Comme partout, le design web obéit à des tendances et des modes qui ne sont pas vraiment explicables. En voici quelques unes pour l’année 2018.

Adapté aux pros comme au novices, cet article fait une petite liste des différentes tendances dans le design web et de l’évolution de certains éléments de design.

1/ Les gradients (dégradés de couleurs)

http://www.symodd.com/

Le flat design qui a dominé l’année 2016-2017 disparaît progressivement de nos écran pour laisser place à de nouvelles tendances. Fini les couleurs unis : place aux dégradés de couleurs. Avec l’évolution du CSS et l’augmentation des capacités d’affichage des navigateur, il est maintenant possible de créer des composition de couleur avec plus de nuances, avec des tons plus diffus, et des formes plus organiques (à l’instar de notre bannière).

 

2/ Le (controversé) menu hamburger

Vous êtes sans doute familiarisé avec cette icône en forme de hamburger que l’on voit de plus en plus dans les appli et les sites web, surtout dans leurs versions mobiles et qui sert à dérouler un menu.

Cette tendance tend à s’uniformiser partout, même pour l’affichage desktop.

Un clic ou un passage de la souris sur l’icône hamburger viendra dérouler le menu. Votre design sera plus lisse et plus propre. On évitera cependant de l’utiliser à mauvais escient, spécialement pour les sites de e-commerce, ou certains site d’information par exemple.

Selon le principe de base de l’UX design ; ne pas hésiter à tester l’effet de ce menu sur vos visiteurs : si vous observez un taux de rebond augmentant il sera bon de revenir à un menu plus classique.

Exemples de bonne utilisation :

Le site est simple, la page d’accueil est la source principale de conversion. Les pages internes n’étant pas forcément « nécessaires » à la bonne navigation de l’utilisateur, qui s’orienterait plutôt en scrollant verticalement.

https://www.lequipe.fr/Football/Coupe-du-monde/Mundial-Memories/

Le site est plus complexe : il garde un menu top contenant les onglet usuels, mais dispose aussi d’un menu vertical déroulant, accessible grâce à la fameuse icône et qui permet d’obtenir des liens vers d’autres niveaux de pages.

https://www.inspark.nl/

Pour aller plus loin au sujet du menu burger : https://www.cmantika.com/le-blog/design/reflexions-web-design-2016-partie-1-le-menu-hamburger/

3/ Le « mobile-friendly »

Si vous avez déjà mis un pied dans la création de site web ; vous devez déjà connaître l’importance d’un affichage mobile pour vos utilisateurs.

Depuis 2018 c’est officiel : Google pénalise les sites ne disposant pas d’une version d’affichage mobile pour leurs visiteurs. Ceci afin de répondre à l’accroissement massif de la consultation de ses page sur mobile ou tablette.

Si vous lancez à peine votre site : optez pour un thème WordPress responsive reconnu, ou bien faîtes appel à un professionnel pour adapter le design de votre site sur mobile.

Vous n’êtes pas sûr que votre site s’affiche bien sur mobile ? Allez faire un tour sur Resizer le tout nouvel outil de test d’affichage responsive créé par Google.

On entend beaucoup de termes autour de l’affichage mobile pour comprendre la différence entre une version mobile, un site en « mobile-first » ou une appli mobile, rendez-vous ici : https://www.zeemedia.fr/actualites/importance-site-mobile-friendly/

4/ Le design des indicateurs de la force du mot de passe

http://ui-patterns.com/patterns/PasswordStrengthMeter

Celui-ci s’adressera aux éditeurs de site web proposant à leurs utilisateurs de créer un mot de passe de connexion. Il est toujours frustrant de ne pas savoir pourquoi votre mot de passe ne peut pas être enregistré ! Il était temps que des designer donne un petit coup de peinture à cet indicateur trop générique.

5/ Le design en “grille”

La majorité des sites sont maintenant créés en utilisant ce concept. Organiser son contenu en suivant une grille permet de structurer des mises en pages plus complexes, tout en conservant facilement l’équilibre général de la page.

La création en utilisant des grilles d’affichage permet aussi de travailler facilement votre version mobile : il suffit de réorganiser chaque colonne/ligne séparément pour obtenir un résultat intéressant.

Cela pourrait paraître réducteur pour le design, mais en réalité l’utilisation des grille peut être adapté de nombreuses façon : en diagonale, en cassant une colonne avec un élément original, etc.

Plus d’info sur le site suivant :

https://www.canva.com/learn/grid-design/

6/ Les cinémagraphes, ou “images animées”

Il s’agit soit d’une séquence vidéo répétée en fond d’écran, ou d’une image gif que l’on peut voir s’animer.

Apparus pour la première fois dans le monde de la mode, les cinémagraphes sont maintenant largement utilisés dans les bannières et les fond d’écran pour les pages d’accueil de sites web. Comme il est encore trop rare de voir un site s’animer sous ses yeux, c’est toujours impressionnant de découvrir une bannière animée. Conversion de vos visiteurs assurée !

https://fr.wikipedia.org/wiki/Cinemagraphe

http://cinemagraphs.com/

7/ Le design vectoriel

Tendance qui a commencé à se généraliser avec l’apparition du “flat design”, le design vectoriel s’affiche aujourd’hui partout sur le net. On utilise des set d’icônes améliorés, des infographies ou autres élément PNG.

L’avantage de ces éléments graphiques est qu’une fois convertis au web : ils sont extrêmement léger, facilitant ainsi l’affichage rapide de vos pages web.

Pour trouver des vecteurs sympa à utiliser dans vos pages web, ou tout simplement pour trouver de l’inspiration pour votre projet, rendez-vous sur Freepiks : https://www.freepik.com/free-vectors/design-elements

8/ CTA “Call-to-action” (Appel à l’action)

Les CTA sont généralement des boutons, destinés à attirer l’attention de l’utilisateur pour qu’il s’inscrive, souscrive ou partage une information. Ce n’est pas une tendance nouvelle en design, mais elle continue de perdurer sur le même principe : de la couleur, du contraste et du volume !

Voici quelques autres exemples tirés du blog hubspot : https://blog.hubspot.com/marketing/call-to-action-examples

9/ Police “oversize”

http://www.weareacademy.com

Celui-ci n’est pas compliqué à expliquer. Il s’agit d’utiliser des polices très grandes tailles et les intégrer dans le design pour attirer l’oeil et créer une page d’accueil originale.

Allez voir ces très bons exemples sur le site awwwards : https://www.awwwards.com/18-excellent-websites-created-with-big-fonts.html

10/ Animation lors du scroll (scroll = défilement de la page généralement avec la roulette de la souris)

L’animation au scroll est un mélange de HTML, CSS et JS faisant s’animer des éléments, des fond d’écran ou des mises en page d’un site au fur-et-à-mesure que l’utilisateur fait défiler la page vers le bas.

Allez voir l’un de ces sites pour voir des animation au défilement de la souris très impressionnantes

http://www.beargrylls.com/

http://toyfight.co/who/

D’autres exemples …

https://www.hellomonday.com/

https://gardenestudio.com.br/index.php

Plus d’effets sur : https://www.creativebloq.com/web-design/parallax-scrolling-1131762

Pour les développeurs : voici un CodePen avec les animation CSS les plus utilisées pour pouvoir les reproduire sur votre site. https://codepen.io/bramus/pen/yikfd

11/ Le design isométrique

Le design isométrique est une technique permettant de représenter un objet en tenant compte de la profondeur, permettant de mieux l’apprécier, comme si il était en 3D.

On trouve une multitude de bannières et d’images de blog avec ce genre de technique.

Pour en avoir un aperçu : https://www.google.com/search?q=isometric+design&client=firefox-b-ab&tbm=isch&tbo=u&source=univ&sa=X&ved=2ahUKEwjavev0xpLdAhUrxYUKHecoCygQsAR6BAgAEAE&biw=1920&bih=943

https://www.behance.net/gallery/20699311/Recent

12/ Formulaires adaptés au mobile

Dans le cadre de la réforme Google sur l’affichage responsive : les formulaires doivent s’adapter aussi.

Tout le monde s’est déjà retrouvé au moment de remplir une réservation ou un paiement en ligne avec un formulaire beaucoup trop récalcitrant, occasionnant de longues heures d’arrachage de cheveux.

Heureusement depuis les UX designer ont trouvé comment bien adapter votre formulaire sur mobile.

Quelques exemples très réussis de formulaires pour mobiles : https://1stwebdesigner.com/mobile-form-design/

13/ Les micro-interactions

Les micro-interactions sont ces petites animations que l’utilisateur peut observer quand il réaliser une action comme :

  • cocher une case
  • cliquer sur un bouton
  • partager un post
  • recommander un produit
  • attendre un chargement
  • etc…

Les exemples sont nombreux et rendent votre site toujours un peu plus vivant : https://uxplanet.org/micro-interaction-great-experience-for-user-engagement-b37446bf6306

14/ Vidéo interactives

Certains sites poussent le concept d’animation encore plus loin, en intégrant carrément tout leur site dans un environnement vidéo. Vous naviguez alors dans une interface flash, répondant à chacune de votre action, et évoluant dans le temps.

Il s’agit probablement d’une des techniques de design les plus avancées : poussant l’immersion à l’intérieur d’un site encore plus loin.

Voici quelques exemples :

https://charbonneltowns.com/

https://akku.promo-msk.ru/

https://orgasm.narscosmetics.eu/

https://www.awwwards.com/websites/video/

15/ Les vues à 360° et la VR

L’utilisation de vue 360° panoramique ou de la VR pour visualiser un produit est très appréciée sur les site de commerce en ligne. En outre, la généralisation de la vue 360° avec le perfectionnement des caméra smartphone dans le cas des visites virtuelles est aussi un avantage marketing énorme.

https://www.liberty-japan.co.jp/specialcontent/

https://www.smart.com/de/de/index/model-select.html

Ne manquez pas le génial site web de Kaspersky vous proposant une immersion en VR dans une sorte de mini jeu flash où vous combattez les virus

https://vr.kaspersky.com/

 

Vous avez maintenant 15 pistes pour imaginer le design de votre site web : il ne vous reste plus qu’à passer à la conception ! N’hésitez pas à mettre un commentaire et à faire appel à Forward Digital pour la création de votre maquette.

 

Sources principales :

15 Web Design Trends Generating Huge Results in 2018 [Infographic]

http://www.resonancecommunication.com/non-classe/10-tendances-webdesign-2018/