Les grandes tendances du web design à connaître pour 2015
BY ON Avr 14, 2015
0

Pour comprendre l’évolution des tendances du web design, il est nécessaire d’appréhender avant tout les changements comportementaux qui affectent les consommateurs du Web de manière générale. Comment les nouvelles technologies influencent-elles les habitudes de navigation ? Qui sont les nouveaux acteurs qui font bouger la toile ? Quelles variations de design ont été opérées par les titans […]

Pour comprendre l’évolution des tendances du web design, il est nécessaire d’appréhender avant tout les changements comportementaux qui affectent les consommateurs du Web de manière générale. Comment les nouvelles technologies influencent-elles les habitudes de navigation ? Qui sont les nouveaux acteurs qui font bouger la toile ? Quelles variations de design ont été opérées par les titans comme Google, Microsoft ou encore Apple pour optimiser l’utilisation de leurs interfaces ?

Il est évident que les réponses à ces questions sont complexes et nécessitent des recherches approfondies. Néanmoins, il est possible de déceler certaines lignes directrices communes qui permettent de (re)composer intuitivement le puzzle mouvant du visage du Web tel qu’il se forme au quotidien.

Si vous utilisez Wix, vous avez déjà à portée de clic des centaines de Templatesqui respectent les tendances majeures du web design. Néanmoins, en creusant un peu le sujet, nous espérons vous fournir quelques nouvelles pistes intéressantes pour améliorer encore l’utilisabilité et l’esthétique de vos projets Web. Après tout, on n’est jamais mieux servi que par soi-même.

Ci-dessous, les tendances du web design qui domineront le Web en 2015 :

 

Long scrolling : les pages longues continuent de défiler

Les réseaux sociaux nous habituent à faire défiler inlassablement nos fils d’actualité et l’Internet mobile a généré de nouveaux standards de navigation – adoptés par plus de 60% des surfeurs. Nous ne cliquons plus sur les menus, nous glissons nos doigts sur les pages Web que nous consultons depuis nos écrans tactiles.

Afin de s’aligner avec les nouveaux réflexes des internautes, de nombreux web designer optent pour la création de pages qui s’étendent sur la longueur. Cette tendance se caractérise tout d’abord par la séparation de la page à l’aide de différentes bandes qui organisent le contenu par catégorie. Ensuite, il est intéressant de souligner l’utilisation stratégique d’images et/ou icônes séduisantes destinées à stopper l’utilisateur dans sa lancée. Autre point à noter, les ancres, à savoir, les boutons connectés à des liens de navigation internes aux pages – Retour en haut et autres indications permettant de se déplacer au sein d’une même page – se substituent partiellement aux menus « classiques ».

Cette tendance séduit bon nombre d’internautes de par son élégance visuelle et sa navigation intuitive. Cette année encore, la taille de vos pages compte : pensez à les allonger afin de faire durer le plaisir de vos visiteurs – toute connotation est purement intentionnelle [NDLR].

Astuce Wix : si l’idée d’utiliser des ancres vous donne de l’hyperventilation, vous pouvez simplement fixer l’en-tête de votre site afin qu’il reste apparent à mesure du scrolling (ou défilement).

Site créé avec Wix : C’Home Un Chef

Site de barabra Evenot de PBLV

Les vidéos géantes : votre page d’accueil casse la baraque

Les vidéos plaisent aux surfeurs et génèrent un engagement réel. YouTube et ses 4 milliards d’heures visualisées chaque mois prouvent que si une image vaut 1000 mots alors il est facile de multiplier sa valeur quand la motion lui est ajoutée. En utilisant une vidéo comme fond d’écran sur votre page d’accueil vous êtes assuré non seulement de captiver vos visiteurs, mais également de donner à votre site la touche de créativité qui vous permettra de vous distinguer de vos concurrents. Si vous avez des talents cachés de réalisateur, n’hésitez surtout pas à les faire valoir. Le tapis rouge du web design se déroulera fièrement aux pieds de votre site.

Astuce Wix : misez sur le visuel – le son n’a que peu ou pas d’importance. Préférez une suite de courts clips représentatifs à une seule vidéo interminable. Trouvez ici le tutoriel complet.

Site créé avec Wix : Zenit Longboard

Zenit Longboard   Montréal - Site Wix avec une vidéo en fond d'écran

Card design : devenez un As de l’organisation

Si le card design (ou un design sous forme de cartes) n’est pas exactement une nouveauté, il continue de séduire les web designers de tous bords. Présenter son menu ou ses travaux sous forme de cartes légendées juxtaposées les unes aux autres (on pense à Pinterest) permet de l’organiser de façon visuelle et accessible sans effort. La netteté de l’arrangement au sein de l’espace combinée à l’utilisation de textes concis, oriente instinctivement le regard des surfeurs vers ces éléments et attire les clics inéluctablement. En jouant la carte de cette tendance, vous êtes assuré de rafler la mise.

Astuce Wix : utilisez une galerie mosaïque dans l’éditeur afin d’économiser les efforts de mise en page.

Site créé avec Wix : L H A 

LHA Laura Rouzet : site Wix Card Design

Typographies : votre police prend du grade

Comme nous le disions, il devenu essentiel de captiver les internautes dès le premier regard. L’outil indispensable pour donner à votre page d’accueil un impact optimal est l’utilisation de polices de caractères sophistiquées ou de typographies originales. Il fut un temps où les gens ne pensaient qu’en termes de Times New Roman ou Arial pour leurs sites internet. Aujourd’hui, les possibilités sont infinies et ces polices « classiques » sont mises au placard pour laisser place à des styles considérablement plus créatifs. Bien entendu, cela ne remplace pas nécessairement l’utilisation des images : le tout est de trouver le bon équilibre entre vos mots et vos visuels – vous trouverez ici des conseils utiles. Sélectionnez une police de caractères qui reflète le vôtre, et donnez à votre image de marque un nouvel élan sur la Toile.

Astuce Wix : n’utilisez pas plus de 3 polices de caractères sur votre site.

Site créé avec Wix : We Art Next

We Art Next - Site Wix avec des typographies créatives

Grandes images : votre fond d’écran en met plein la vue

On a beau dire, Internet 2.0 fait la part (très) belle aux images. Autrement, pourquoi l’ami en chef Zuckerberg leur accorde-t-il tant de place dans le nouveau design de son interface ? Utiliser des visuels de qualité supérieure en mode « plein écran » reste incontestablement un moyen simple et efficace de séduire les internautes. Pour tout vous dire, même les images ont leurs tendances. Cliquez ici pour tout savoir sur ce sujet. L’utilisation de grands visuels, en plus de son aspect pratique, apporte une valeur ajoutée rassurante : cette mode existe depuis plusieurs années et n’a aucune raison de voir ses beaux jours s’assombrir – bien au contraire.

Astuce Wix : si vous souhaitez surfer sur cette tendance au maximum, utilisez un arrière-plan différent pour chacune de vos pages.

Site créé avec Wix : David Gerbi

David Gerbi - SIte Wix avec grande image de fond

Interactive Storytelling : relatez votre histoire de façon dynamique

Raconter votre « histoire » de façon interactive est un excellent moyen de faire entrer vos visiteurs dans votre site de façon progressive et de susciter un intérêt fort à l’égard de votre entreprise. Néanmoins, le travail technique imposé pour réaliser ce type de design n’a rien d’un conte de fées. Il faudra vous armer de patience pour élaborer un plan concret et affronter vaillamment les nombreuses difficultés de gestion provoquées par ce type de design.

Le but de la manœuvre consiste à animer divers éléments de votre site à mesure de son défilement. Chacun des dits éléments constitue un événement de votre « histoire », un argument de vente ou encore un renseignement supplémentaire sur votre entreprise. L’exercice est périlleux, certes : il suffit d’un léger manque de coordination ou d’une utilisation abusive d’animations et votre site ressemblera plus à de l’art abstrait qu’à une interface professionnelle. Néanmoins, si vous parvenez à le faire comme il se doit, la magie opérera et vous vivrez heureux tout ça, tout ça…

Astuce Wix : dupliquez votre site avant d’essayer et faites revoir votre copie par vos proches avant de le publier. Leurs remarques constructives vous seront d’une précieuse aide.

Site créé avec Wix : The Creative French Man

The Creative Frenchman - site long scrolling créé avec WIx

Micro-interactions : engagez-vous qu’ils disaient…

Trouver des façons innovantes de pousser vos visiteurs à cliquer est un défi constant. En conséquence, le Web 2015 se dessine sous le signe des micro-interactions. Plutôt que d’aller agresser les surfeurs pour « Ajouter au Panier » ou « Cliquer ici », il peut s’avérer profitable de les inciter à s’engager de façon progressive à l’aide de micro-interactions.

Le concept est simple : il s’agit de créer des propositions d’actions rapides qui ne nécessitent qu’une faible implication de la part des visiteurs. Les outils d’évaluation (vous savez, les étoiles d’Allociné ?), le bouton Like de Facebook ou encore la boîte d’inscription à une newsletter constituent des exemples courants de micro-interactions. Le visiteur ne se sent pas oppressé et effectue ces manipulations par choix. L’engagement progressif peut ainsi opérer pour fidéliser le visiteur lentement mais sûrement. Cette année, petit à petit, les micro-interactions feront leur nid sur la Toile.

Site créé avec Wix : The Scran Line

Site créé avec Wix : The Scran Line

Mobile Friendly : acoquinez-vous avec les mobinautes

Le changement technologique majeur de ces dernières années est, bien entendu,l’explosion de l’Internet mobile. Les souris sont en grève, les claviers tirent la tronche et les tours des ordinateurs de bureau songent à déposer le bilan tandis que les smartphones, tablettes et autres iChoses célèbrent l’avènement de leur ère. Vous l’avez compris, créer une version optimisée pour mobiles de votre site est donc un must afin de séduire les surfeurs mordus de tactile.

Si vous désirez pousser le vice encore plus loin, il est très à la mode de présenter ses produits/services/travaux à l’intérieur d’écrans de tailles différentes. La pertinence de cette mode varie considérablement selon votre activité : si vous louez des poules pondeuses, la connexion sera difficilement acceptable tandis que si vous créez des applications ou des sites, cette astuce vous permettra de les mettre en valeur de façon sophistiquée. Tout dépend de vos besoins.

Gardez simplement une chose à l’esprit : votre site doit être présentable sur tous les appareils afin de conquérir le cœur des internautes. L’hégémonie des ordinateurs classiques touche à sa fin et vous ne souhaitez pas rester à la traîne.

Astuce Wix : vérifiez ici si votre version mobile est optimisée.

Site Wix de l’atelier du Coteau 

Site et site mobile de l’atelier du Coteau

Site créé avec Wix : Bell Media 

Bell Media   Indoor Advertising  Outdoor Advertising  Online Services

Menu caché : exploitez au maximum le filon mobile

Pour continuer sur le sujet du mobile, une tendance très en vogue consiste à créer des menus “cachés” sur les sites internet, qui se déroulent uniquement au passage de la souris. L’objectif est de créer un design uni sur tous les appareils et d’imiter la navigation mobile au maximum .Ce concept du menu déroulant discret (généralement en haut à droite de l’écran) représente des avantages esthétiques considérables – puisqu’il n’empiète pas sur le visuel – et offre une touche interactive à votre site. Reste encore à en tester l’utilisabilité. C’est à la mode alors nous vous en parlons après, c’est à vous de voir.

Astuce Wix : cliquez sur ce lien pour un découvrir comment créer un menu dans le style mobile sur votre site Wix.

Site créé avec Wix : Expand Network 

Expand Network l Réseau YouTube francophone

Material design : le flat design, nouvelle définition

Si les tendances du web design sont votre dada, le Flat design n’a pas vraiment de secret pour vous. La bonne nouvelle est que cette tendance – inspirée du Metro Design de Microsoft – a été reprise par Google qui la porte a son prochain niveau : le Material design.

En français maintenant : Le Flat design ou design plat est une tendance qui vise à simplifier le design d’une interface en mettant tous les éléments « à plat » et en l’épurant de tout détail superflu. L’exemple qui illustre l’idée de façon claire, est celui du nouveau design de la célèbre interface aux fenêtres de Microsoft. Le menu est composé de boutons de couleur de formes rectangulaires au sein desquels apparaissent des icônes. Fini les textes longs, les dégradés, les ombres et les menus à niveaux : tout vise à simplifier le chemin à l’utilisateur en économisant les mots et les clics.

L’innovation du Material Design se traduit par différents changements : premièrement, l’utilisation d’animations et d’éléments en mouvement permettent de donner vie et de hiérarchiser le design traditionnellement plat du Flat design . Ensuite, l’expérience utilisateur est unifiée sur les différents supports à travers l’interface. Enfin, cette nouvelle tendance permet de mieux hiérarchiser son contenu à l’aide notamment de l’utilisation de jeux de volumes et d’ombres, moins présents sur les sites en Flat.

On n’aime ou on n’aime pas Windows 8, mais quand Microsoft et Google prennent une direction similaire, le bon sens impose d’emboîter le pas.

Astuce Wix : découvrez comment appliquer le Flat design sur votre site.

Material Desing de Google 

Introduction   Material design   Google design guidelines

Site Flat Design créé avec Wix : Freakly

Freakly Flat design

Ghost buttons : incitez à cliquer avec des boutons fantômes

Pour finir sur un concept étroitement liée au Flat design, les boutons « fantômes » (Ghost buttons) constituent une mini-tendance qui fait des miracles. Il s’agit de créer des boutons transparents par défaut qui changent de look au passage de la souris (ou au survol). La beauté de la chose réside dans la fausse discrétion de ces éléments de design. Contrairement aux boutons en 3D – beaucoup trop 2011 – ces boutons transparents minimalistes appellent à l’action de façon très efficace, puisque subreptice. Dans une mesure métaphysique, le bruit de leur silence fait leur force – oui, on se la raconte un peu.

Astuce Wix : utilisez dans l’éditeur un bouton d’accentuation et modifiez ses paramètres pour obtenir l’effet escompté.

About the author

Write a comment