Le web Design sous toutes ses coutures en 2018 – Ses contenus aussi …

background-3063287_1280
Le web design se matérialise par de nouvelles techniques media digitale

๑۩۩.. ..۩۩๑        ๑۩۩.. ..۩۩๑         ๑۩۩.. ..۩۩๑       ๑۩۩.. ..۩۩๑        ๑۩۩..

Fiche LEONF logo

Pourquoi attacher de l’importance à son design de présentation que ce soit pour un site de vente en ligne ou un site vitrine?

Répondre à cette question fondamentale est tout simplement de l’ordre de l’impact visuel qu’un type de présentation suscitera chez l’interlocuteur. D’une mise en page originale, en passant par l’utilisation des codes typographiques tendance, pour finir par l’intégration de nouveautés design images animées ou pas, on crée ainsi un univers propre à la marque ou à l’entreprise.

L’ANIMATION MATERIAL DESIGN

Le material design permet de gagner en temps de téléchargement, avec une iconographie simplifiée, les interactions renforçant le lien avec l’internaute. On verra ainsi de plus en plus de boutons animés, grâce à l’effet « hover » (qui changent de couleur au passage de la souris, par exemple) ou des menus « hamburger » qui se transforment pour inciter à cliquer. Ces animations, grâce au CSS et au javascript, sont maintenant compatibles avec tous les navigateurs.

Les barres latérales défilantes de partages sur les réseaux sociaux font également partie de ces micro-interactions de plus en plus bienvenues.

Le nouveau format d’images le plus utilisé sur le web pourrait d’ailleurs bientôt être le SVG*, très flexible et surtout léger à charger.

* Le Scalable Vector Graphics (en français « graphique vectoriel adaptable »), ou SVG, est un format de données conçu pour décrire des ensembles de graphiques vectoriels et basé sur XML. Pour en savoir plus sur ce sujet très technique : lien tuto Youtube explicatif

Les images PNG, JPG et même GIF  appartiennent déjà au passé. Dans le monde moderne, nous accordons plus d’attention à la qualité des images et à leur accessibilité. Le format SVG sera certainement le format le plus populaire dans les tendances de conception de sites Web 2018. Le SVG ne bénéficie d’aucune perte de qualité par rapport aux autres formats d’image. Ce sera le meilleur format pour les éléments graphiques type icônes par exemple.

Les graphiques vectoriels évolutifs deviennent plus courants en tant que type d’image. Le SVG garantit que les graphiques, les icônes et les logos restent parfaitement nets quelle que soit la taille ou la résolution de l’écran.

Tous les affichages haute résolution d’écran (Retina) contribuent à l’augmentation de ce format de fichier. De plus le SVG peut se décliner en animation très légère grâce au CSS3.

Vous pouvez voir quelques exemples des possibilités qu’offre le format SVG en terme d’animation web sur le site www.hongkiat.com :

Le Flat design a été très (trop ?) présent ces dernières années. Il flattait nos envies de simplicité, avec une iconographie simple et des couleurs uniformes.

Le Material Design, initié par Google (hé oui !) ne s’écarte pas trop du Flat Design mais il y ajoute de la perspective, des ombres, des formes géométriques et même du mouvement. Il y a de la vie dans le Material Design.

 

gif-icons-menu-transition-animations-hamburger

๑۩۩.. ..۩۩๑        ๑۩۩.. ..۩۩๑         ๑۩۩.. ..۩۩๑       ๑۩۩.. ..۩۩๑        ๑۩۩.. ..۩۩๑    

DE LA COULEUR EN VEUX-TU EN VOILA !

Même si Pantone a établi que l’Ultra violet serait la couleur de l’année 2018, on n’est pas obligé de s’y cantonner forcément. Par contre, la tendance 2018 sera certainement du côté des tonalités 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 tonalités de gris restent une valeur sûre pour ce qui est des fonds d’écran. Mais gardons toujours en tête, que la marque ou l’entreprise a déjà sa propre charte graphique et qu’elle n’est pas forcément pour des raisons de coûts, enclin à modifier ses codes couleur. Il s’agira donc en cas de refonte, de veiller à respecter les chartes en vigueur.

2018 sera donc, à première vue, définitivement l’année des couleurs vives et originales. Dans le passé, les marques et concepteurs étaient coincés avec l’usage de couleurs standardisées du Web. Maintenant, les webdesigners deviennent plus audacieux dans leur approche de la couleur. Ils osent la sursaturation ou bien utilisent des couleurs flashys que le spectre RVG de nos écrans offrent (couleurs de la lumière, écran Rétina).

Ceci est partiellement dû aux progrès technologiques dans les les écrans plus appropriés à reproduire des couleurs riches. Des couleurs vibrantes sont utiles pour les nouvelles marques qui veulent attirer instantanément l’attention, mais elles sont également parfaites pour les marques qui veulent se démarquer artistiquement et faire leur petit effet.

Les dégradés et autres transitions de couleurs sont aussi à la mode. Dés 2016, des grands noms comme Instagram ont décidé de changer leurs logos et leurs images d’une couleur plate à des transitions multicolores. Des logos aux boutons ou superpositions d’images, cette tendance est omniprésente.

Cette tendance est encore liée aux avancées niveau code CSS3. Il y a quelques années les webdesigners devaient utiliser les formats images jpg pour réaliser des dégradés.

Cependant la compression pour le Web détériorait les nuances en les pixelisant. Le résultat était rarement parfait. Désormais vous avez de magnifiques rendus grâce à des transition de couleurs créées dans le code du site sans défaut grâce aux nouvelles technologies.

๑۩۩.. ..۩۩๑        ๑۩۩.. ..۩۩๑         ๑۩۩.. ..۩۩๑       ๑۩۩.. ..۩۩๑        ๑۩۩.. ..۩۩๑

UN STYLE TOTALEMENT EPURE & ELEGANT SANS SURCHARGE !

Première chose, installer le vide. et oui, aussi étrange que cela puisse paraître, les espaces blancs servent à mettre en valeur des éléments. Ils seront de plus en plus utilisés sur les pages internet aussi, s’insérant entre les blocs pour aérer la présentation.

Les écrans apparaîtront ainsi moins chargés… ce qui encouragera les utilisateurs à passer plus de temps sur les sites. C’est tout de même l’objectif recherché !!!

Une forme d’élégance suggestive qui nous plonge directement dans l’univers de la marque ou de l’entreprise qui y est mise en valeur sans fioritures ni artifices brouillant le message.

La conception du site se dirige directement vers son utilisateur et donc son lecteur.

Si en 2017, on a déjà oublié définitivement le site vitrine sans valeur ajoutée, en 2018, il faudra donner un VRAI objectif à son site web …

Donc, on verra de plus en plus de typographies bien lisibles, souvent en gras, des contenus centrés, des formulaires plein écran, des menus allégés

Le choix d’une typographie impacte la lecture d’un texte. En optant de plus en plus souvent pour des polices de caractère en gras, il sera plus facile de guider les lecteurs. Vous pourrez même y ajouter un peu de couleurs pour encore plus les souligner.

Il faudra cependant être attentif à ne pas surcharger la page de mots ainsi mis en évidence !

On privilégiera les contenus directs vers l’essentiel car ceux-ci sont aussi les outils pour votre référencement. Donc il faudra bien penser à l’agencement de suffisamment de textes en même temps qu’une présentation agréable, limpide & surtout suscitant de l’intérêt pour en savoir plus. Cela passe par des images ou des vidéos aussi percutantes insérées de manière intelligente et pertinente pour amener petit à petit, l’internaute vers une réflexion & un rapprochement entre son besoin & son envie de concrétiser.

 

๑۩۩.. ..۩۩๑        ๑۩۩.. ..۩۩๑         ๑۩۩.. ..۩۩๑       ๑۩۩.. ..۩۩๑        ๑۩۩.. ..۩۩๑

SUSCITER L’ENGAGEMENT DE L’INTERNAUTE !

Les micro-intéractions prennent le pouvoir; tendance forte en webdesign, et donc pour le graphisme d’un site ou d’une application. Aujourd’hui, il faut montrer à l’utilisateur qu’il est en train d’agir, qu’il n’est pas juste un témoin face à un écran inerte.

Vous savez quelle est la fonctionnalité la plus appréciée sur Facebook en ce moment ? Les petites animations qui apparaissent dès que certains mots, comme  » félicitations  » ou  » bisous  » ou encore « ça va le faire  » …  sont inscrits dans un message.

animations-facebook

 

Multiplier ce genre de micro-interactions sur les sites améliorera l’engagement de leurs utilisateurs à long terme. D’autant qu’ils induisent une réactivité de la page, et donc, à nouveau, une rapidité qui est maintenant attendue partout.

Quand il glisse son doigt dessus, quand il coche un bouton, les couleurs changent, des fenêtres s’ouvrent… Quelque chose doit se passer dès qu’une action est effectuée.

Dans quelques mois ou années, les sites qui n’intégreront pas de micro-interactions sembleront dépassés aux internautes. Et ce n’est certainement pas votre but !!!!

Dans cet exemple du site refletcommunication.com , c’est en scrollant que vous déclenchez l’animation.

L’animation est un excellent outil pour faire participer les utilisateurs et les immerger dans l’histoire d’une marque.

L’animation est provoquée par l’interaction de l’internaute avec le site. L’effet, si il est bien pensé et réalisé,  celui ci garantit une visite plus longue et riche en expérience comme sur le site www.doggoforhire.com par exemple.

Les animations déclenchées par l’usage du scroll encouragent les utilisateurs à continuer à faire défiler les pages de votre site Ces animations augmentent l’engagement.  Ces déclencheurs d’animation ne sont pas nouveaux, mais ils ont commencé à être utilisés d’une nouvelle manière. Les meilleures animations déclenchées par défilement sont minimalistes, éducatives et stratégiques, elles ont pour but d’augmenter les conversions.

Les animations déclenchées par défilement peuvent également nettoyer l’apparence de votre site Web. Au lieu d’avoir une collection de boutons et de menus, votre site transmettra une véritable expérience interactive à vos utilisateurs en s’adaptant selon la navigation par des animations qui afficheront ou feront disparaitre certains éléments.

๑۩۩.. ..۩۩๑        ๑۩۩.. ..۩۩๑         ๑۩۩.. ..۩۩๑       ๑۩۩.. ..۩۩๑        ๑۩۩.. ..۩۩๑

L’ILLUSTRATION PERSONNALISEE

L’illustration personnalisée continue de se développer dans la conception de sites Web

Les illustrations sont d’excellents supports pour créer des images ludiques, conviviales et d’une manière générale rajouter un élément agréable à regarder sur un site. Les artistes peuvent créer des illustrations pleines de personnalité et adaptées au ton d’une marque, bien que cette tendance peut aider à rendre les marques généralement perçues comme sérieuses plus faciles à appréhender pour leurs clients potentiels.

Quelle que soit l’identité de votre marque, il y a probablement un style d’illustration pour l’assortir. Cela permet à la marque ou à l’entité de créer son story book, l’occasion unique de créer son propre univers au moyen d’une mascotte ou d’un personnage incarnant le mieux les valeurs & les symboliques. Le storytelling est approprié pour aussi raconter l’histoire, les traditions, l’authenticité & plonger l’internaute dans un contexte émotionnel.

Je ne résiste pas à l’envie de vous faire partager des images de mon propre site pour lequel j’ai déjà voulu intégrer cette tendance en 2017, avant-gardiste certainement de ce qui allait se profiler … Retrouvez mon site http://www.chicetdesign.fr/strategy sur ce lien

Ce diaporama nécessite JavaScript.

๑۩۩.. ..۩۩๑        ๑۩۩.. ..۩۩๑         ๑۩۩.. ..۩۩๑       ๑۩۩.. ..۩۩๑        ๑۩۩.. ..۩۩๑

DU CONTENU QUI S’EXPRIME PAR L’IMAGE & LA VIDEO, LA 3D !

Une approche du contenu photographique reste très pertinente dans les tendances de conception de sites Web 2018.

Il est intéressant de noter que les raisons sont évidentes: plus de 60% des utilisateurs pensent que le facteur décisif d’un achat est l’utilisation d’images et de photos uniques, les boutiques en ligne doivent donc y accorder le maximum d’attention. De plus une image vaut mieux qu’un long discours pour communiquer et c’est aussi vrai dans le monde du Webdesign.

Vous devez à tous prix éviter les photos de stock et préférez attirer l’attention avec des images à l’esthétique personnalisée, originales et surtout uniques. C’est cette personnalisation des images qui mettra certainement en valeur votre exclusivité dans votre champ de compétence !

Vous avez probablement assisté à la montée en flèche de l’ère de la vidéo sur internet ! Vous pouvez facilement intégrer ce média très engageant sur votre site en utilisant un arrière-plan vidéo ou des lecteurs de vidéo en provenance de plateforme type Youtube, Viméo, Daily motion…

Utiliser la vidéo ou des animations 3D est un excellent moyen de montrer visuellement votre histoire, produit ou service. Par exemple, imaginez à quel point un produit serait plus attrayant s’il était présenté sous ses différents facettes. Vous serez sûr de captiver vos visiteurs et mieux les séduire pour un éventuel achat, toujours mieux les convaincre en leur apportant des preuves pratiques.

En parlant d’objets en mouvement, les animations 3D s’avèrent être aussi à la mode que les vidéos. Jetez un œil à cette utilisation impressionnante de art gallery.

Capture d_écran 2018-02-03 à 13.03.42

๑۩۩.. ..۩۩๑        ๑۩۩.. ..۩۩๑         ๑۩۩.. ..۩۩๑       ๑۩۩.. ..۩۩๑        ๑۩۩.. ..۩۩๑

LE RESPONSIVE DESIGN

C’est maintenant confirmé : pour qu’un site soit bien référencé, il doit être responsive. Ce qui signifie que votre site internet a grandement intérêt à être lisible facilement sur tous les écrans, quelle que soit leur taille, tablettes, ordinateurs, smartphones.

La mise en page est doublement importante depuis que Google a mis en place son index mobile-first. Il ne faut pas seulement penser son site comme un agencement de colonnes, mais veiller à ce que celles-ci favorisent la lisibilité du site. Les internautes viennent sur les pages en quête de contenu, ils y restent parce qu’il est bien présenté !

Même si la plupart des CMS proposent leurs plugins il est fortement conseillé de personnaliser ses pages AMP pour un rendu plus professionnel.

C’est ce que l’on nomme dans le métier le « mobile first ». Selon Statista :

«en 2016, 43,6% de l’ensemble du trafic de sites Web dans le monde provenait de téléphones portables, contre 35,1% l’année précédente.»

Il est vrai que l’importance de la conception Web adaptée aux mobiles n’a cessé d’augmenter depuis plusieurs années, et cette tendance ne semble pas ralentir.

Au cours de la première moitié de 2018, Google déploiera son nouvel index Mobile First, qui accordera beaucoup plus d’importance à la version mobile de votre site Web, en le positionnant en premier dans les résultats de recherche. Cela signifie que votre site Web doit avoir un design adapté aux mobiles.

Les pages mobiles accélérées (AMP) deviennent également très importantes. Si vous n’avez pas encore entendu parler de l’AMP, c’est une norme de codage open-source pour les éditeurs qui leur permet de charger rapidement leurs sites sur mobile. Les sites Web mobiles traditionnels peuvent être un peu lourds, mais l’AMP accélère l’expérience mobile en allégeant le code, en utilisant des ressources externes pour les fichiers multimédias et en exécutant des scripts en parallèle pour permettre le chargement instantané des pages.

Que vous soyez en train de concevoir un tout nouveau site ou de réaménager un site existant, l’AMP est un must pour 2018.

๑۩۩.. ..۩۩๑        ๑۩۩.. ..۩۩๑         ๑۩۩.. ..۩۩๑       ๑۩۩.. ..۩۩๑        ๑۩۩.. ..۩۩๑

 

En 2018, ce n’est donc peut-être pas sur l’apparence de votre site que vous devez vous concentrer, mais sur sa navigation.

Si vous parvenez à lier les deux, vous gagnerez sur tous les tableaux.

 

VOICI D’AUTRES IMAGES &PHOTOS REPRESENTATIVES DE VOS FUTURS DESIGN DE SITE INTERNET

 

Article rédigé par ChicetDesign Strategy

carte-de-visite

 

Page Facebook

Page Twitter

Page Linkedin

Publicités

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion /  Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion /  Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion /  Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion /  Changer )

w

Connexion à %s