• 0k
  • 0
Web design \ 5 Decembre 2016

Les grandes tendances du web design 2017

Le web design évolue constamment, et à toute vitesse. Chaque année, de nouvelles tendances naissent, d’autres se transforment, et d’autres encore finissent par disparaître. Ensemble, elles tissent la Toile telle qu’on la connaît et qu’on la pratique au quotidien. Du coup, à la veille des fêtes de fin d’année, le monde des webmasters entre en ébulittion et se demande fébrilement : à quoi ressembleront les sites internet l’année prochaine ? Corollaire : que devra-t-on utiliser pour rester, nous aussi, à la page en 2017 ? Des questions cruciales car, qu’on le veuille ou non, les internautes s’attendent à retrouver certains schémas sur un site. Il leur suffit d’à peine 50 millisecondes (#ScienceFact) pour juger de sa crédibilité, notamment en fonction de sa conformité aux dernières tendances.

La bonne nouvelle, c’est que Wix vous propose des Templates de sites à la pointe, intégrant d’office les éléments qui seront en vogue l’année à venir. Mais il reste important de connaître la théorie, ne serait-ce que parce qu’au moment de personnaliser votre œuvre, vous aurez besoin de savoir dans quelle direction aller. Nous avons donc interviewé les designers qui fabriquent nos modèles et les avons (gentiment) abreuvés de questions. Le résultat ? Ce guide complet qui vous donne, en avant-première, toutes les tendances qui vont rythmer le Web de 2017. Bienvenue dans le futur !

Comment ça se lit ? Nous avons réparti les tendances dans trois grandes parties, qui font écho aux fondamentaux de tout site internet : la Structure, le Mouvement et le Visuel. Et parce que le web design évolue avec le monde et est (aussi) le reflet de ce qui se passe dans la vie réelle, nous avons glissé quelques repères sociologiques, historiques ou artistiques. Bonne lecture ! 

Les grandes tendances du web design 2017

Aperçu général : évolution d’Internet, avant/après

À l’ère du mobile triomphant, le monde est littéralement à portée de main. Il vous suffit de « scroller » (faire défiler du bout des doigts) votre écran pour trouver tout ce que vous voulez, de votre site internet gratuit à votre prochaine destination de vacances, en passant par le meilleur GIF animé de Donald Trump. Même avec un ordinateur, nous effectuons ce mouvement vertical avec le doigt, qu’il s’agisse de la molette de la souris ou du pavé digital d’un portable. Le sens de l’Histoire (et de la lecture) penche donc vers la verticalité.

Conséquence pour les sites internet ? Ces derniers deviennent de plus en plus longs (le Long Scrolling est une tendance qui n’en finit pas de défiler), avec des images qui prennent toute la largeur de l’écran et des polices qui gonflent. Avec tout ça, travail du web master a dû s’adapter. Son objectif n’est plus forcément de fournir l’information la plus détaillée, mais de la rendre plus facile à lire et à comprendre. Ne nous méprenons pas : l’essence du contenu doit bien rester là, mais être affiché d’une façon plus fluide et « sexy ».

Point psycho : La condensation de l’information ne répond pas qu’à une mode visuelle, mais également à une évolution de nos cerveaux. Selon une récente étude conduite par Microsoft, la capacité d’attention moyenne d’un être humain a baissé de 33 % ces quinze dernières années, pour atteindre 8 secondes seulement. Pour la petite info, c’est une seconde de moins qu’un poisson rouge…

Et concrètement, ça donne quoi, cette course à la longueur ? Illustration avec l’un de nos Templates pour entreprises de services, il y a 2 ans et aujourd’hui :

template de site gratuit pour entreprise de services

Maintenant que vous compris l’idée, penchons-nous de façon plus détaillée sur les styles de l’année à venir.

Structurez

Le Web, un univers « Materialiste » ?

Comme disait Père Castor, il est temps de raconter une petite histoire. Il était une fois une tendance nommée skeuomorphisme (bonne chance pour la prononciation). Portée par Apple, elle consistait à imiter la forme des objets réels pour représenter les applications numériques ayant la même fonction. Par exemple, le bloc-notes des anciens iPhone, qui reprenait les lignes d’un vrai calepin. Cette tendance répondait à un besoin psychologique de continuité entre les différentes évolutions de nos outils. Mais avec l’apparition de la génération Y, née avec un smartphone dans la main, ce besoin a progressivement disparu.

C’est à ce moment que le Flat Design est apparu, sous l’impulsion de Microsoft 8. Le principe : des couleurs acidulées et des icônes minimalistes, sans référence symbolique au monde réel. Très attirant, mais finalement un peu lassant pour les internautes, qui ont trouvé le Flat décidément trop « plat ». Dernière étape du parcours : le Material Design, initié cette fois-ci par Google. Il garde les fondamentaux du précédent, mais y apporte un brin de perspective, avec des formes géométriques, des ombres et du mouvement. Bref, du panache.

Pourquoi c’est important ? Parce que quand la firme de Moutain View dit quelque chose, vous pouvez être sûr que le reste du Web se mettra au pas. C’est donc une déferlante de Material Design que l’on voit apparaître sur les sites internet – et peut-être bientôt sur le vôtre. Alors, qui dicte vraiment les tendances ? Karl Lagerfeld ? Non, Google.

Point techno : en plus d’être très lisible, cette tendance contribue à alléger votre contenu – et donc à réduire le temps de chargement de votre site. Et, comme par hasard, selon les dernières recommandations SEO de Google, la vitesse fait partie des critères prioritaires pour obtenir un bon référencement. Envie d’en savoir plus ? Voici 5 conseils pratiques pour améliorer la vitesse de vos pages.

le material design de google grande tendance web design

Les aventuriers de l’ordre perdu

On vous le disait plus haut : la verticalité est le nouveau maître-mot du web design. La bande (horizontale) avait déjà envahi nos écrans ces dernières années, pour mieux découper et aérer les pages Long Scrolling. Aujourd’hui, elle a trouvé un nouveau compagnon, avec lequel elle forme un inséparable duo façon Laurel et Hardy : la colonne. Cette dernière découpe la première à la verticale, en plusieurs parties (2, 4, 6, etc.) égales.

Structurés à la façon de grilles, les nouveaux sites internet présentent ainsi de nombreuses cases, dans lesquelles viennent s’insérer harmonieusement vos contenus (une vidéo en haut à gauche, un slogan à droite, une image en bas, etc.). Le résultat fait penser aux pages « Actualités » des hebdomadaires, dans lesquelles les informations se succèdent dans de petits encadrés. L’objectif : accroître la lisibilité. Or, qui dit lisibilité dit augmentation de votre taux de conversion. On comprend donc pourquoi les webmasters sont de plus en plus nombreux à vouloir mettre de l’ordre sur leur site.

Point socio : selon un récent sondage Le Monde, 76 % des électeurs de gauche estiment qu’un bon Président doit remettre « de l’ordre » dans le pays. Le web design, reflet des tendances sociales ?

Animez

Insufflez de la vie avec les GIF et le Parallaxe

Avertissement d’usage : abuser des GIF peut sérieusement nuire à votre UX (pour expérience utilisateur). Mais lorsqu’ils sont utilisés intelligemment, ils peuvent donner vie à votre site et attirer l’attention sur les éléments les plus importants de façon ludique et sophistiquée. Nous recommandons par exemple d’utiliser les GIF pour vos pop-ups promotionnels, l’introduction de votre newsletter ou encore vos articles de blog.

Autre tendance (animée) qui met tout le monde d’accord : l’effet Parallaxe. Pour faire simple, il consiste à faire défiler l’arrière-plan moins vite que le reste du site, afin de créer une illusion d’optique s’apparentant à la 3D. Les visiteurs adorent, et les web designers en redemandent ! Une tendance qui ne s’essoufflera pas en 2017.

Point design : Non content d’offrir la Parallaxe à votre site gratuitement et de façon très intuitive, Wix vient de créer 3 nouveaux effets inédits sur le marché : « Zoom », « Apparition » et « Fondu ». À découvrir de toute urgence.

 GIF animé tendance web design

Micro-interactions, méga-engagement

On n’y fait plus attention, mais qu’il s’agisse d’appuyer sur un bouton d’ascenseur ou de déverrouiller son téléphone d’un coup de pouce, on effectue chaque jour des milliers de petits gestes qui mettent en branle des mécanismes extrêmement complexes. C’est ce que l’on appelle les micro-interactions, et elles sont également présentes sur les sites internet. À vrai dire, de plus en plus d’experts jugent de la qualité d’une page à sa capacité à offrir des micro-interactions engageantes et subtiles.

Wix a instillé dans son Éditeur des centaines de possibilités de micro-interactions, qu’il vous suffit d’insérer sans effort (ni connaissance technique) à votre site. C’est notamment le cas des barres de réseaux sociaux, qui permettent à vos visiteurs de partager, d’un clic de souris, un contenu qui leur a beaucoup plu. Autre exemple ? Les animations que vous insérez sur vos boutons, afin que leur visuel change dès que vos visiteurs posent le curseur (ou le doigt) dessus. Cela n’a l’air de rien, mais ça augmente furieusement l’envie de cliquer ! Ou pour le dire autrement : les micro-interactions, un petit pas pour vos visiteurs, un bond de géant pour votre site internet.

Point histoire : « Les détails ne sont pas un détail. Ils font le design », disait Charles Eames, designer et architecte américain. C’est cette citation qui sert de fondement à la plupart des théoriciens des micro-interactions.

Osez

Provoquez la police (de caractères)

Oui, les polices extravagantes, baroques ou taille XXL s’imposent sur la Toile. Elles permettent aux web designers d’exprimer leur créativité et de sortir du lot. Après des années corsetée par les conventions, les tabous sont en train de sauter. Bien sûr, la typographie est un art, et comme le recommendait Picasso : « Apprenez les règles comme un professionnel, afin de les briser comme un artiste ». Traduction : faites le maximum de recherches sur le sujet avant de vous lancer dans la déconstruction des polices. Mais une fois que vous aurez acquis suffisamment de connaissances et de pratique, vous pourrez commencer à jouer avec les couleurs et les espacements, à combiner les polices entre elles… La seule limite est votre imagination.

Point design : Depuis cette année, Wix vous permet d’ajouter vos propres polices de caractères à votre site internet.

créez vos propres polices de caractères

Attirez le regard avec des visuels décomplexés

Si vous suivez la mode ou l’art de façon générale, vous avez certainement remarqué que les couleurs, formes et visuels deviennent de plus en plus extravagants. Cette tendance est directement issue de l’art « Edgy » (pour « limite, à la frontière », en anglais), qui consiste à utiliser des images fortes et presque provocantes, sans entrer dans le racolage. Autrement dit, reprendre les codes du Pop Art, sans la volonté de choquer (ou de dénoncer).

Tout le monde ne peut pas se permettre une touche d’Edgy sur son site internet. Si vous êtes un cabinet d’avocats très sérieux (mais quand même sympas), il y a peu de chances que vous réussissiez à caser une photo de cornet de glace écrabouillé – comme ci-dessous. En revanche, vous pourrez sortir des tons neutres et tenter une palette plus audacieuse. Le principe reste le même pour toutes les autres activités : expérimentez, du moment que cela reste cohérent avec votre image de marque. Et la bonne nouvelle, c’est que si vous êtes un utilisateur de Wix, pas besoin de s’appeler Andy Warhol pour surfer sur la tendance : des milliers de visuels gratuits sont déjà disponibles dans notre Éditeur.

Point art : La théorie des couleurs vous fascine ? Nous venons justement de publier un article qui vous explique comment créer, à coup sûr, des palettes chromatiques réussies.

edgy art tendances web design

En bonus : personnalisez votre carte Google Maps

En 2017, n’importe quel internaute s’attend à trouver la carte Google avec la fameuse languette rouge de géolocalisation. Le problème : puisque tous les webmasters l’utilisent, le risque est grand de se fondre dans la « map ». Il est grand temps de changer cela. Comment ? En personnalisant la mise en page de Google Maps pour l’adapter au design de votre site. Vous avez bien entendu, c’est possible avec Wix. En plus, vous n’avez pas besoin de payer pour ça : cadeau de la maison !

personnaliser une carte Google Maps

Inspiration : quelques Templates qui font la tendance

Template pour agence de création et communication

template de site gratuit pour agence design communication graphique

Template pour artiste de rue

 

template de site gratuit artiste de rue graffiti

Template pour événement

template de site gratuit pour événement

Template pour site de mariage

template de site gratuit invitation de mariage

Prêt à exprimer votre talent ? Créez votre site internet avec Wix, c’est gratuit !


Recevez le
par e-mail !

Rejoignez le blog de Wix Ne manquez rien de notre actu !

Hmmm, that's not a valid email address.

Hmmm, that's not a valid email address. Email already exists

Hmmm, that's not a valid email address. Invalid email

Rejoignez-nous ! \ 

Découvrez nos conseils en web design, en marketing digital,
et suivez toute l'actu Wix ! Pas de spam. Promis.

Hmmm, that's not a valid email address.

Hmmm, that's not a valid email address. Email already exists

Hmmm, that's not a valid email address. Invalid email