LES TENDANCES 2017 DU WEBDESIGN APPLIQUÉES AUX SITES E-COMMERCE

Les sites e-commerce en 2017

Les sites e-commerce en 2017
Source : http://a2r.ca

Les dépenses en ligne des consommateurs ont progressé de 14,6% en un an, confirmant la ré-accélération du secteur, avec un chiffre d’affaires de 72 milliards d’euros.
Plus d’un milliard d’achats en ligne ont été réalisés l’an dernier, au rythme de 33 transactions par seconde.
Selon l’étude de la Fédération de l’e-commerce et de la vente à distance, l’e-commerce français devrait atteindre 80 milliards d’euros de chiffre d’affaires cette année.
Les deux raisons principales sont l’élargissement de la clientèle et la hausse de la fréquence d’achat.


Un design responsive

Le design de votre site internet
Source : http://www.alirevite.fr

Afin d’optimiser l’expérience d’achat des usagers, les nouvelles tendances du webdesign seront à privilégier. Les interfaces devront néanmoins restées familières pour ne pas perdre l’utilisateur.
Pour que votre site e-commerce soit référencé de façon optimal, il se doit d’être  responsive.
Ce qui signifie que votre boutique en ligne a grandement intérêt à être lisible facilement sur tous les écrans, quelle que soit leur taille, du smartphone à l’ordinateur, en passant par la tablette. 
Cette année, il faudra donc accorder une grande importance à la mise en page de votre site. L’agencement choisit devra ainsi favoriser la lisibilité de votre page et de l’ensemble de votre site.
Vos internautes viennent sur votre site pour découvrir du contenu, mais n’oubliez pas que si vos clients potentiels restent c’est aussi parce le design de votre boutique en ligne est adapté.

Les indispensables pour une bonne mise en page

 

Le lazy loading

En 2017, bannissez les boutons et liens pour rediriger l’internaute sur la page suivante.
Le défilement long associé à un chargement progressif, appelé aussi lazy loading, se généralise et permet de minimiser les clics de l’utilisateur et de mettre en valeur votre contenu.

Le Material Design

Terminé le Flat Design !
L’influence de Google devrait se poursuivre, notamment dans l’usage du Material Design.
Cette année, on garde la simplicité tout en ajoutant de la perspective, des ombres et des formes géométriques.
Grâce au Material Design, votre site e-commerce sera plus dynamique et l’impression de mouvement sera plus importante.

Le menu “Hamburger”

Le design des sites e-commerce en 2017
Source : https://blog.netapsys.fr

Afin de créer des interfaces plus claires et plus aérées pour votre site de vente en ligne, utilisez des menus de type “hamburger”.
Vos menus “hamburgers” peuvent se transformer pour inciter l’utilisateur à cliquer.
Vous pouvez personnaliser vos animations grâce au CSS, désormais compatibles avec l’ensemble des navigateurs.
Afin de mettre en valeur les icônes de vos réseaux sociaux, n’hésitez pas non plus à proposer des interactions lors de la conception de votre interface.
L’animation occupera cette année encore une place importante sur de nombreux sites : parallax, survol créatif des liens Cinemagraph et GIF.

Les couleurs à privilégier

Les couleurs pour votre site e-commerce
Source : http://tangledindesign.com

Terminé la sobriété !
Cette année, osez l’explosion de couleurs. 2017 devrait aussi être le synonyme du retour des dégradés de couleurs du côté  des boutiques en ligne.

D’après Pantone, le vert serait la couleur de l’année.
Vous n’êtes pas obligé pour autant de tout composer en vert.
Par contre, en 2017, privilégiez les couleurs vives !
Si tout le monde ne peut pas intégrer des visuels hauts en couleurs, ces teintes seront notamment présentes dans les dégradés de couleur, appliqués par exemple comme filtre semi-opaque sur un visuel ou en fond d’écran pour des formulaires.
Les photos Haute Définition et créatives vont s’imposer, aussi bien en page d’accueil que sur les fiches produits.
Les illustrations et icônes serviront à personnaliser l’image de marque de l’entreprise.

Eh que fait la police ?

Pour gagner en clarté et en sobriété, utilisez des polices modernes et originales, de préférence sans serif et d’une taille importante.

Les spécificités du e-commerce

Invasion de robots : Les chatbots devraient prendre une place de plus en plus importante pour accompagner, guider et renseigner les utilisateurs dans leur navigation.
Encore plus de livraison en magasin : Déjà présente chez de nombreux marchands, l’option de commande avec livraison rapide dans un magasin de l’enseigne devrait prendre encore plus d’essor.
Le déclin des carrousels : Un faible taux de clic, combiné à des contraintes de poids et de temps de chargement, devraient sceller le sort des sliders et carrousels qui vont peu à peu disparaître.

RACE Cindy, VAUTRAT Marine

Le Flat Design, la tendance minimaliste

flat design la tendance web minimaliste

Depuis quelques temps les interfaces flat design envahissent les écrans des internautes et signent petit à petit la fin du Skeuomorphic Web Design. Le Skeuomorphic Web Design est un style graphique qui consiste à intégrer des éléments, objets réels au webdesign. Le flat design, lui, pourrait être définit comme son opposé total. Mais qu’est-ce que cette tendance minimaliste apporte-elle réellement au monde digital ? à qui s’adresse-t-elle ? et quels sont ses aoûts et ses limites ?

Infographie comparaison skeumorphism et flat design

 Le flat design : définition

Pour débuter, le flat design ou « design plat » est un design graphique minimaliste, où tout ornement en relief a été supprimé dans le but d’améliorer la lisibilité. Il se distingue des autres tendances webdesign par des interfaces minimalistes et des aplats de couleurs vives et actuelles. Le flat design adopte un style graphique épuré qui exclut tous les détails superflus pour aller à l’essentiel tout en portant un véritable intérêt pour la typographie afin de créer une structure au contenu du site.

Avant, les web designer usaient et abusaient du style « Web2.0 glossy » agrémenté entre autres d’ombre porté et d’une multitude d’effet Photoshop. Aujourd’hui, la tendance flat design s’oriente vers des interfaces plus épurées, sans artifices, de grands aplats de couleurs le tout illustré par de nombreuses icones minimalistes.

L’interface flat design, qui ne date pas d’hier mais qui reste toujours dans la tendance actuelle, a été démocratisé par de grandes firmes comme Microsoft ou encore APPLE. On a également pu remarquer récemment que la nouvelle charte graphique de Google penchait aussi du côté de cette nouvelle tendance minimaliste.

Le flat design : Pourquoi cette tendance webdesign et pour qui ?

Infographie utilisateur flat design

Tout comme le responsive web design, le flat design ne sera pas toujours en phase avec les besoins de l’internaute.

Avant de penser design graphique, il est nécessaire de réfléchir d’abord à l’utilisabilité globale du projet :

  • Que viendront chercher les internautes ?
  • Le projet est-il complexe ou plutôt d’un webdesign simple ?
  • Le site est-il destiné à une utilisation en mobilité, ou non ?
  • L’utilisateur est-il à la recherche d’une tendance minimaliste, caractérisé par des couleurs vives, une typographie épurée et des formes légères.

Le flat design est particulièrement utilisé pour des projets dédiés aux appareils nomades ou dont le contenu est suffisamment accessible pour être représenté avec une interface minimaliste.

Il est important de noté qu’au-delà d’un look, d’une mode flat design et d’une tendance webdesign, c’est d’abord l’expérience utilisateur qui doit primer sur les choix d’un nouveau style graphique. L’objectif sera toujours le même : proposer un design qui soit à la fois compris par tous et simple d’utilisation.

Lorsque le flat design permet de mieux véhiculer l’information, de contribuer à une meilleure expérience de navigation pour l’utilisateur, et offre une prise en main supérieure / un taux d’adoption optimale à l’aide d’un webdesign simple, et une web interface design : alors OUI, vive le flat design !

Le pour et le contre de l’interface flat design

Le flat design, l’une des tendances actuelles du webdesign, permet d’améliorer son site et de le rendre unique. Cependant, un webdesign simple (voire trop simpliste) connait également des inconvénients à prendre en compte.

Les avantages de cette tendance graphique

Cette tendance minimaliste possède des avantages à prendre en compte pour valoriser son site internet.

Le flat design permet de créer une web interface design, sobre, épurée, avec des formes graphiques simples. De ce fait, l’internaute n’est pas perturbé par un trop plein d’informations, il peut hiérarchiser les données et les interpréter.

De plus, une interface flat design favorise le chargement rapide des pages du site internet. Tout est fait pour faciliter la navigation, aider l’internaute et rendre le site esthétiquement agréable (formes, couleurs vives, typographie, etc).

La tendance minimaliste est d’actualité, elle reflète l’évolution du web et particulièrement du responsive design.

Infographie avantages interface flat design

Mais quelles sont les limites de cette interface ?

Cette tendance flat design ne serait alors qu’une « tendance », qui pourrait lasser les internautes, et devenir parfois impersonnelle car copiée. L’objectif pour une site est donc de créer une interface flat design personnalisée, avec une forte identité de marque.

Il faut également faire attention à ne pas réaliser une interface minimaliste qui ne prend pas en compte les besoins et les attentes des utilisateurs. Le minimalisme oui, mais pas trop. Des interfaces vides, sans informations sont très peu valorisées.

Nous remarquons donc certaines limites cependant, cette web interface design est très utilisée en ce moment. Une nouvelle tendance très convoitée aujourd’hui qui tend encore à évoluer.

Exemple d’interface flat design

Flat design Twitter

Flat design Site So Word Wide

Flat design Site Skype

by Fanny Janin, Camille Renut et Mathilde Reyes