Design web

Six tendances qui influencent le design Web

Ces dernières années, neuf grandes tendances Web se sont dessinées. J’en ai discuté dans un mon précédent article sur les neuf tendances Web qui ont marqué l’année 2014.

Toutefois, il existe d’autres tendances qui influencent de plus en plus le design Web et l’expérience utilisateur.

1- La ludification, la tendance virale

La ludification (ou gamification) est une tendance de plus en plus utilisée par les entreprises. Elle se traduit principalement par l’importation de mécanismes du jeu dans des contenus en ligne afin de les rendre ludiques et pour capter l’attention. Abondamment utilisée dans les domaines éducatifs, publicitaires ainsi que ceux associés au marketing et à la marque employeur, la ludification favorise l’engagement et comporte une importante dimension virale et sociale. Il existe six mécaniques principales, soit les points, les niveaux, les défis, les badges, les classements et le don qui stimule six dynamiques, soit la gratification, le statut, la réalisation, la créativité, la compétition et l’altruisme.

Magnum : une campagne ludique et efficace

Depuis 2011, Magnum réalise d’excellentes campagnes interactives sur le Web. Le principe : une publicité qui se transforme en jeu de plateforme interactif, où l’utilisateur contrôle un personnage qui doit récolter des chocolats en traversant de nombreux sites Web tels que YouTube, Bing ou encore Spotify. Découvrez les deux premières éditions (Cliquez sur l’image pour accéder au jeu):

Magnum : La chasse aux plaisirs
Magnum : La chasse aux plaisirs 2

D’autres exemples d’utilisation de ludification :

  • Jeu en ligne permettant d’évaluer les compétences et connaissances d’un candidat en situation réelle;
  • Soutien en ligne communautaire entre les utilisateurs avec un programme de récompenses;
  • Jeux concours sur Facebook;
  • Campagne de vote destinée aux clients pour la mise en marché de nouveaux produits.

2- L’innovateur social design

Le social design est la notion d’appliquer les tendances de design et d’ergonomie des médias sociaux aux sites Web. Ainsi, de nombreux sites utilisent certaines fonctionnalités évolutives de certains médias sociaux dont Pinterest, Vine et Tumblr. Parmi les exemple de social design, on retrouve la présentation visuelle sous forme de grille, le déroulement (scroll) infini ou bien des espaces d’interaction en temps réel.

L’exemple le plus concret est le système de grille qu’on retrouve sur Pinterest :

Social design : la grille Pinterest

3 – Le controversé menu hamburger

Le menu hamburger est un symbole qui présente trois lignes horizontales et parallèles utilisées dans l’interface graphique des sites Web afin de représenter le menu déroulant. D’abord utilisé dans le cadre du design mobile, le menu hamburger est une tendance mitigée auprès des designers Web. Pour certains, il représente une avancée pratique et conviviale, tandis que pour d’autres, il est beaucoup trop simple, n’est pas compris par la majorité des utilisateurs et compromet la navigation.Le controversé menu hamburger

4- L’essentiel responsive design

L’adaptabilité des sites Web (mieux connu sous le nom de responsive design) est plus qu’une tendance, elle s’est imposée comme une norme dans l’industrie. En effet, Google et les différents moteurs de recherche pénalisent les sites Web qui n’utilisent pas ce critère dans leur développement. De plus en plus, les designers Web vont entreprendre la création de site Web sur mobile et l’adapter par la suite pour les ordinateurs de bureau (c’est ce qu’on appelle le mobile first). Pour en savoir plus, je vous invite à lire mon précédent article consacré uniquement au responsive design.

Responsive design

5- L’interminable monopage

La tendance du design monopage (ou le one page design) est de plus en plus présente dans le design de sites Web. Cette tendance consiste à avoir accès au contenu entier d’un site Web sur une seule page : le design monopage consiste donc en un défilement infini sans cliquer (verticale ou horizontale).

Le design monopage convient parfaitement au storytelling et il est facilement agrémenté d’animations, d’images ou de vidéos. Néanmoins, pour certains, il peut représenter un frein pour le référencement, car il se présente sur la même page et possède donc la même URL.

6 – L’intrigante animation SVG

Le SVG est un langage XML qui décrit des éléments graphiques en deux dimensions. Il permet de définir des formes vectorielles, des images et du texte, tout en étant en mesure de gérer des animations, des effets de filtre et de transparence. On peut donc facilement créer des contenus interactifs et dynamiques à partir de logiciel de création et les exporter sous forme SVG. Elles sont ensuite intégrées aisément à un site Web tout en ayant un poids beaucoup moins important que les autres formats. Le principal avantage de l’animation SVG est qu’elle permet un rendu vectoriel, ce qui permet de la redimensionner sans perdre de qualité. De nombreuses librairies existent sur le Web pour pouvoir faciliter son utilisation. Seul bémol : l’animation SVG ne fonctionne que sur les navigateurs dits modernes.

De nombreuses animations complexes et des images aux détails impressionnants sont réalisées en SVG. Voici quelques exemples :

See the Pen Submarine with CSS by Alberto Jerez (@ajerez) on CodePen.

See the Pen Loader SVG/CSS by Bidji (@Bidji) on CodePen.

See the Pen SVG CSS3 Menu / Burger Button by Kyle Henwood (@kyleHenwood) on CodePen.

Que nous réserve le futur du Web?

Il n’existe pas de réel consensus sur l’évolution des tendances Web. Néanmoins, on ne peut qu’imaginer l’émergence de nouvelles tendances.

Dans quelle direction va évoluer l’utilisation tactile, dictée par la croissance de l’utilisation des téléphones intelligents et des tablettes ?

L’infonuagique (cloud computing), qui permet d’avoir accès, en tout temps, à n’importe quel endroit et sur n’importe quel support à de l’information continue, va-t-elle continuer de prendre une place de plus en plus significative?

Les objets sont également de plus en plus connectés. On pense notamment à la domotique, qui correspond à l’ensemble des techniques de l’électronique, de physique du bâtiment, d’automatisme, de l’informatique et des télécommunications utilisées dans les bâtiments, permettant de centraliser le contrôle des différents systèmes et sous-systèmes de la maison ou d’une organisation. La domotique vise notamment à apporter des solutions techniques pour répondre aux besoins de confort et de communication.

Peut-on s’attendre à une révolution 3D de nos sites Web? Une nouvelle forme de navigation?

Avec les navigateurs de plus en plus performants et des possibilités techniques de plus en plus poussées, la créativité pourrait être le seul frein restant face à cette évolution. À suivre!

2292
0

À propos de l’auteur

Randy Delpierre

Randy Delpierre

Concepteur multimédia et intégrateur web

Suivez-moi sur

Passionné de design et de nouvelles technologies, Randy Delpierre a poursuivi des études en communication et en publicité en France avant de se spécialiser dans le design web. Depuis 2013, Randy met son expertise et sa créativité au profit d’ACCEO, en occupant le double rôle de concepteur multimédia et intégrateur web.

Ses compétences en ergonomie, en référencement (SEO) et communication combinées à ses expériences au sein de différentes agences web et d’un important annonceur français, lui permettent d’avoir une vision marketing web globale et d’accompagner ACCEO dans sa constante recherche d’innovation. En plus de concevoir et de développer des interfaces graphiques pour les différents produits médias, les sites web et les campagnes e-mailing, Randy œuvre dans la recherche et le développement de nouvelles solutions techniques web pour l’entreprise.

Consultez son profil

Laisser un commentaire

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


9 + = 12

blog