Cette année, on replace le visiteur au centre des préoccupations. La beauté ne fait pas tout, il faut désormais se concentrer sur l’expérience de navigation, l’interaction et la convivialité des sites internet.

Gilles Déléris, cofondateur de l’agence W, explique ainsi « moins de couleurs, mais des couleurs plus vivantes, moins de signes, mais des univers en mouvement… ». Il s’agit aujourd’hui « en employant des recettes plastiques économes, de limiter la production de stimulis dans des environnements saturés, de contenir les flux de données qui rythment nos existences, d’accompagner la mutation de nos sociétés vers une économie de l’immatériel. »

Les grandes tendances web design de 2018

Repensez la typographie :

Jouez avec les mots comme vous le faites avec les images. C’est le moment d’oser. Remplacez une image trop lourde par une typo artistique. Travaillez vos titres et faites des en-têtes dynamiques pour accueillir vos visiteurs comme il se doit.

■ Cassez la linéarité des titres.
■ Jouez avec l’espacement des lettres.
■ Mixez différents types de typographie – un titre en Serif et un sous-titre en Sans Serif. Faites des essais sur le site Fontpair.
typography

Delphine Bommelaer, directrice de création design et contenus de , remarque que « des applications simples et pratiques se développent, démocratisant l’accès au dessin de caractère. » Un phénomène grâce auquel « la typographie se libère, et c’est tant mieux ! Créer une titraille, travailler la typo comme une image, en posant des contrastes étonnants, des décalages de proportions inattendus, est devenu possible. Dans une époque où le temps de création est largement sous-estimé, les budgets plus contraints, où finalement tout pousserait à une standardisation molle, c’est un bonheur. »

Guide Typographie

On décore :

Le style minimaliste est désuet, l’heure est à la vie. Outre l’aspect esthétique, en ajoutant un élément, vous attirez l’attention de vos lecteurs sur un contenu particulier. En 2018, les formes géométriques et les icônes sont à placer stratégiquemen. Ajoutez une flèche colorée pour indiquez l’objectif de l’entreprise. C’est un léger twist sans effort qui fera de l’effet.

■ Soulignez un texte ou un slogan en l’encadrant.
■ Mettez l’accent sur un prix ou une promotion.
■ Décorez un site avec un motif unique.
■ Créez des boutons originaux ou des icônes pour les différentes catégories.
nouvelle-boutique.png

On Scrolling

Fini le passage d’une page à l’autre en cliquant sur une catégorie, on s’oriente désormais vers le scrolling (faire défiler les pages avec la souris). C’est l’influence de notre utilisation accrue des mobiles et nos habitudes de navigation sur les réseaux sociaux.

 ■ Le menu : la barre horizontale qui se trouve en haut de la page reste une bonne pratique. Il peut-être remplacé par un menu hamburger, plus discret et plus facile à intégrer au design.

 ■ On déstructure le contenu. On n’hésite pas à créer des mises en pages originales et uniques en leur genre. Pour autant le design doit rester esthétique. On opte pour l’option « désordre organisé » qui donne un aspect de flou artistique, mais qui au final reste très travaillé. Pour cela, on joue avec les tailles et les alignements, la mise en page asymétrique et les types de contenus dans un même endroit : textes, vidéos, images. Attention, plutôt que de décontenancer les internautes, nous devons susciter la curiosité.

Animez le site :

Le mot qui émerge cette année est la micro interaction. De petites actions que peuvent feront interagir le visiteur avec le contenu – liker une page et cliquant sur un pouce et en le faisant changer de couleur, survoler des étoiles pour noter un article ou un produit. Ces interactions sont immédiates et ne demandent aucun effort de la part de l’utilisateur.

On intègre des vidéos et des animations cinemagraph :

Les films s’affichent partout sur le Net. Tout d’abord parce qu’ils permettent de garder l’audience attentive pendant longtemps, mais aussi parce que, tout comme les images, ils jouent sur les émotions des visiteurs.

cusine-cinemagraph-02

Pour créer un Cinemagraph : chargez votre vidéo, choisissez un arrêt sur image qui définira la partie statique de votre réalisation, puis sélectionnez les zones clés qui resteront animées tout au long de la durée du cinémagraph.

3d-video2
Applications : Cinemagraph Pro ou MaskArt-Cinemagraph.

Les images 3D 

Alors que les logiciels de motion design et de 3D ne cessent de se moderniser, Tristan Macherel rappelle que la 3D a toujours de beaux jours devant elle. Elle tendrait même à reprendre vivement sa place alors que le flat design décline. « Les agences de design intègrent de nouveaux outils d’imagerie 3D qui leur ouvrent les portes d’une nouvelle esthétique beaucoup plus riche en détails et permettant ainsi de transmettre des messages plus variés. Cette créativité doit rester optimiste et généreuse ! »
ss_still_foodanddrink

La tendance Gradient et Néon

soft-gradients-preview

«Les couleurs intenses donnent déjà du relief aux interfaces utilisateur, mais les tons vifs vont les rendre encore plus lumineuses. Les utilisateurs vont voir beaucoup plus de palettes de couleurs éclatantes, de ton sur ton et de dégradés audacieux dans les interfaces utilisateur » explique Nick Babich, développeur chez Adobe.

art-quentin-deronzier-07

Les illusions d’optique, la profondeur et le dédoublement :

6d5d5948879171f0cc6660421d1e3bbc.jpg1c61f1df2a24a4d4803a501ba14b94a5-e1515186631152.jpg

Le Handmade :

Cette tendance graphique revient à quelque chose de plus traditionnel en valorisant les beaux-arts comme le remarque Pierre-Alain Mondello. « Typo vraiment manuscrite, pâte à modeler, encre de chine, linogravure, etc. On met en avant l’artiste et on laisse gentiment les illustrations flat aux banques d’images gratuites. » Avis partagé par Babel qui nous envoie quelques visuels supplémentaires.

handmade-babel1

Les teintes écrans

Delphine Bommelaer souligne l’adoption de plus en plus fréquente de grands aplats de couleurs lumineuses, voire fluorescentes « Les teintes RVB chargées en lumière disent sans anecdote l’intégration de la culture digitale au modèle de l’entreprise. Partout les écrans fleurissent, dans chaque main bien sûr, mais au coin de la rue aussi. Et l’édition ancre plus encore sa valeur dans l’objet, dans sa durabilité, et dans la qualité de sa façon. »

Le marbre et le terrazzo

Après un regain de popularité dans les années 80 avec le mouvement Memphis, il semble que le Terrazzo ressuscite à nouveau et vienne inspirer les designers.
papeterie_effet_mouchete_normann_copenhagen

Ultra Violet : couleur de l’année 2018

ultra-violet-pantone

Après Greenery, c’est UltraViolet, une nuance de pourpre cosmique et spirituelle qui a été élue pour représenter la couleur de l’année 2018.

pantone-color-of-the-year-2018-tools-for-designers-graphics174.jpg

Ultra Violet offre une complexité et une nuance qui fait appel à notre désir d’originalité. En design graphique, cette couleur donne de la dimension et elle est souvent utilisée par des marques visionnaires, notamment dans la conception de packagings dans le luxe et la beauté, ainsi que par des personnalités et des artistes cherchant à se démarquer.

art-quentin-deronzier-feature.jpg

Nuancier PANTONE 2018 :

la règle des 60-30-10 : la couleur maîtresse doit couvrir 60 % de votre site. La deuxième couleur vient contraster la première et couvre 30 % du site. Son rôle est d’attirer l’attention sur certaines parties. Les 10 % restants sont couverts par une troisième couleur dont le rôle est d’accentuer des éléments stratégiques comme des boutons d’appel à l’action.
pantone-color-of-the-year-2018-palette-attitude

Material Design : un concept Google

Les 25 et 26 juin 2014, la ville de San Francisco a accueillie la grande conférence de Google I/O. Le 25 juin, Google a présenté le portage du système d’exploitation Android sur les mobiles, les télévisions, les montres, les objets connectés.

Google a également profité de cette occasion pour introduire le Material Design, un design destiné dans un premier temps aux applications mobiles avant d’être étendu à l’ensemble de ses applications.

Le Material Design est un ensemble de règles s’appliquant à l’interface graphique des logiciels et des applications. Ce concept a pour objectif de garantir la facilité d’utilisation des applications Android afin de les rendre plus simples, plus épurées et plus intuitive.

Le Material Design

  • Il répond à une action de l’utilisateur par un mouvement,
  • Il uni le monde réel au monde digital,
  • Le material design est pensé de manière plus académique que le Flat Design,
  • Il s’appuie sur le réalisme et la physique.

Le Flat Design

  • Il s’inscrit dans la continuité du skeuomorphisme,
  • C’est une solution au responsive design,
  • Il permet la rapidité et la légèreté,
  • Il permet la simplification et la lisibilité.

layering
Guide Google Material Design
Interface Material Design
Color Tool
Couleur de l’année 2017 :
banniere-1