web design · le diable 03 est dans les détails si le minimalisme est une tendance majeure qui...
TRANSCRIPT
Web Design
Les tendances automne - hiver 2018
Pas de baisse de température dans le web design après l’été, le thermomètre des tendances 2018 est à la hausse et la rentrée s’annonce caniculaire ! Les anciennes problématiques techniques (adaptabilité, qualité visuelle, rapidité de navigation…) laissent le champ libre à la créativité.
Dans ce domaine, si on devait retenir un mot d’ordre à la mi-2018, ce serait sans doute la cohérence. Les inspirations de ces dernières années prennent forment et se rejoignent pour faire naître ou renaître des sites toujours plus vivants, visuels, interactifs, mais surtout des sites qui ont du sens. Le design s’allie au contenu et devient média. Les nouvelles tendances sont pensées, créées et développées pour l’utilisateur, en particulier dans le e-commerce qui adopte les dernières tendances du digital.
L’union du contenu et du design
En 2018, les designers réussissent la symbiose de l’écrit et du visuel, de telle manière que le design reflète tout à fait l’information fournie au fil des pages.
Du Material Design au Material Theming
Du
Ma
Ter
iaL
De
sig
n a
u M
aTe
ria
L Th
eM
ing
01
En 2014, Google lançait le Material Design, un langage comprenant tout un ensemble de règles dédiées aux designers et développeurs pour créer des interfaces cohérentes entre toutes les plateformes.
Souvent considéré comme le flat design de Google notamment pour ses aplats de couleurs et ses représentations épurées et minimalistes, ce langage visuel synthétise les principes classiques du design avec l’innovation technologique. Le Material Design est un langage du mouvement, mettant l’accent sur des transitions fluides et cohérentes qui renforcent la facilité d’utilisation et les interactions entre interface et utilisateur.
Du
Ma
Ter
iaL
De
sig
n a
u M
aTe
ria
L Th
eM
ing
01Dropbox Business est un exemple typique d’adoption du Material Design : un site web utilisant une seule palette de couleurs avec un arrière-plan en noir et blanc.
Cliquez sur l’image pour voir le site
Du
Ma
Ter
iaL
De
sig
n a
u M
aTe
ria
L Th
eM
ing
01En mai 2018 apparaît le Material Theming, une nouvelle version du Material Design avec des règles plus flexibles, qui s’adaptent à l’univers de chaque projet. La liste de composants et interactions disponibles avec le Material Design a été remplacée par la notion de thème, à adapter et transformer. Google propose alors un univers graphique personnalisable ainsi que des composants revisités (floating button, top bar, backdrop…), pour pallier à la rigidité du Material Design.
Le passage par Google du Material Design au Material Theming marque une évolution dans la manière même de concevoir sur le web et répond aux besoins de flexibilité des designers qui ne se contentent pas de mettre en page l’information, mais ont pour mission de faire coïncider design et contenu, afin de représenter tout à la fois une marque, son activité et sa philosophie de manière claire et attractive.
L’illustration sur-mesure
L’iL
Lust
ra
tio
n s
ur
-me
su
re
02
En 2018, l’un des éléments les plus tendances en design digital est sans aucun doute l’illustration. Et peu importe ses liens organiques avec l’impression, l’illustration s’avère d’une grande utilité en web de-sign lorsqu’il s’agit de représenter des concepts abstraits, impossibles à résumer en une seule image.
Le collage, qu’il soit fait main ou sur ordinateur, donne un aspect plus tactile au design. Il permet également de condenser plusieurs idées en une seule illustration, comme sur le site web 10*17, qui présente en 10 jours les albums préférés de 26 artistes. Avec ses mélanges de styles, de formes et de couleurs, le collage est une tendance qui a pris de l’ampleur en 2018 et qui devrait continuer de titiller la créativité des web designers ces prochains mois.
L’iL
Lust
ra
tio
n s
ur
-me
su
re
02Le collage, qu’il soit fait main ou sur ordinateur, donne un aspect plus tactile au design.
Cliquez sur l’image pour voir le site
L’iL
Lust
ra
tio
n s
ur
-me
su
re
02Auparavant utilisée principalement dans le gaming, l’illustration 3D se répand pour fait entrer l’utilisateur dans l’univers du site web.
Auparavant utilisée principalement dans le gaming, l’illustration 3D se répand pour fait entrer l’utilisateur dans l’univers du site web.
Cliquez sur l’image pour voir le site
L’iL
Lust
ra
tio
n s
ur
-me
su
re
02Créer un univers web pour des produits ou tout élément visuellement existant ne relève pas de l’impossible.
Mais comment faire pour représenter avec créativité une activité de conseil, une philosophie ou une technologie avancée ?
L’illustration abstraite se renouvèle, se complexifie, s’approfondit. Attention à ne pas confondre illustration et formes utiles pour votre site web. L’illustration abstraite prend une place particulière sur le site comme dans les yeux de ses utilisateurs.
L’iL
Lust
ra
tio
n s
ur
-me
su
re
02Placée au rang d’œuvre digitale, elle doit attirer l’intérêt et peut poser question. Elle synthétise la marque ou son activité décrite au fil des pages.
Cliquez sur l’image pour voir le site
L’iL
Lust
ra
tio
n s
ur
-me
su
re
02
La bande dessinée n’est pas réservée à l’univers des enfants, bien que ces derniers soient devenus les chouchous des développeurs. La bande dessinée permet de présenter un service ou un process comme on raconte une histoire, de manière ludique et intuitive.
Avec des techniques d’illustration toujours plus inventives et hybrides, il n’y a plus aucune raison de se limiter à une photographie standard dénichée sur une plateforme de partage d’images. A chaque activité son illustration adaptée !
Cliquez sur l’image pour voir le site
Le D
iab
Le e
sT D
an
s L
es
Dé
TaiL
s
03Le diable est dans les détails
Si le minimalisme est une tendance majeure qui continue de faire autorité, il peut cohabiter avec une série de détails qui permettent au site web de se différencier tout en originalité.
Le D
iab
Le e
sT D
an
s L
es
Dé
TaiL
s
03
Ainsi les icônes informatives renferment du contenu
complémentaire offert à l’utilisateur désireux d’en
savoir plus.
Cliquez sur l’image pour voir le site
Le D
iab
Le e
sT D
an
s L
es
Dé
TaiL
s
03En 2018, on retient donc une équation simple : contenu = design. Le design illustre, anime, divertit… et le design nous parle !
De petites figures géométriques entre les éléments informatifs d’une page lui donnent très facilement du mouvement. Elles peuvent également servir d’éléments thématiques dans l’intégralité du site. Cliquez sur l’image pour voir le site
Quand le design devient média
Quand design et contenu se confondent, tout élément visuel doit à la fois attirer l’utilisateur et le conduire en un temps record vers l’information. Les meilleurs web design de 2018 ne laissent rien au hasard pour stimuler nos nerfs optiques.
Désordre et démesure
Dé
so
rD
re
eT
Dé
Me
su
re
04
Sur le web, la couleur est sans doute le premier élément remarqué par les utilisateurs. Jouer avec des couleurs vives, c’est tendance et cela permet de capter l’attention et de générer des émotions positives.
Les couleurs vives sont devenues un véritable vecteur d’engagement, mais leur utilisation doit respecter certaines règles simples pour ne pas obtenir l’effet inverse, à savoir une lecture difficile et désagréable qui ferait fuir l’utilisateur. Ainsi on utilisera les couleurs vives avec parcimonie et de préférence en complément d’autres tons foncés ou neutres, pour souligner un contenu ou mettre en avant une interaction.
Typographie XL
Dé
so
rD
re
eT
Dé
Me
su
re
04en 2018, on n’hésite pas à déstructurer les mots avec une typographie XL, un lettrage large et espacé, des polices en caractères gras et des combinaisons de polices avec et sans empattements (serif).
Les mots de grandes tailles en caractères gras donnent de la personnalité au texte et lui permettent d’exister parmi une multitude d’images et d’animations.
Dé
so
rD
re
eT
Dé
Me
su
re
04Une large typographie peut être soulignée par des couleurs vives, afin de donner de la structure à toute la page. Ainsi les mots sont sublimés !
Cliquez sur l’image pour voir le site
Dé
so
rD
re
eT
Dé
Me
su
re
04Caractères gras et empattements forment la combinaison gagnante de 2018, avec pour mot d’ordre l’alternance. Ainsi dans un même bloc de texte se côtoient polices avec et sans empattements, tons neutres et couleurs vives, pictogrammes et emojis.
Les designers chouchoutent leur typographie, jouent sur l’italique et la largeur des caractères, soulignent et
surlignent, y ajoutent des animations jusqu’à ce que le texte
devienne média.
Cliquez sur l’image pour voir le site
04Dans la course à l’attraction visuelle, les web designers n’hésitent pas à bouleverser les codes et à proposer des mises en page déstructurées dont l’originalité vient surprendre les utilisateurs habitués aux structures plus standard. On oublie l’alignement des éléments pour privilégier le décalage et la superposition.
Attention cependant aux excès de désordre qui risquent de rendre
l’information difficile à découvrir, en particulier lorsque le contenu
est dense.
Cliquez sur l’image pour voir le site
Le tout animé
Le T
ou
T a
niM
é
05
En 2018, exprimer ses idées de manière rapide et créative est un must pour répondre à la demande d’utilisateurs pressés et assoiffés de contenus.
L’infographie était déjà devenue un incontournable sur le web, il ne restait plus qu’à l’animer ! Neoman nous le prouve tant sur le fond que sur la forme, avec son infographie animée énumérant 13 raisons pour lesquelles nos cerveaux y sont accros, avec la dose d’effets visuels idéale pour guider nos yeux jusqu’à la démonstration finale…
05Les données n’ont jamais été aussi attirantes qu’avec le data storytell-ing. Ajoutez-y une dose d’animation et vous êtes assurés de garder vos utilisateurs confortablement assis devant votre site web. Ainsi le site « 100 ans de tour » propose une narration interactive de données animées, sans qu’on s’emmêle les pédales.
Les animations offrent une infinité de possibilités de donner du
mouvement au contenu, de guider l’utilisateur et surtout de continuer
à capter son attention tout au long de la navigation.
Cliquez sur l’image pour voir le site
L’utilisateur, acteur majeur des nouvelles tendances
Les utilisateurs sont au coeur des préoccupations des web designers, qui rivalisent de créativité pour susciter leur intérêt et conserver leur attention.
La géométrie au service de la navigation
La g
éo
Mé
Trie
au
se
rv
iCe
De
La
na
vig
aTi
on
06
Avec la variété des contenus disponibles et la multiplicité des appareils et des formats, la navigation est un élément toujours plus important dans le succès d’un site web. Le design peut être utilisé de manière à rendre la navigation plus rapide et agréable.
Nos petites figures géométriques et les formes (arrondies, obliques ou géométriques), petites comme grandes, sont virtuellement intéressantes et servent tout à la fois de guides visuels et de boutons icônes pour l’utilisateur. Sans nécessairement s’engager sur un thème 100% géométrique, en 2018 les formes variées, encastrées et superposées permettent de diriger l’attention de l’utilisateur vers les zones essentielles d’un site web.
La g
éo
Mé
Trie
au
se
rv
iCe
De
La
na
vig
aTi
on
06
Cliquez sur l’image pour voir le site
La g
éo
Mé
Trie
au
se
rv
iCe
De
La
na
vig
aTi
on
06En toute simplicité, les lignes droites viennent séparer l’écran en plusieurs parties pour en structurer le contenu et le rendre lisible en quelques secondes. Cliquez sur l’image pour voir le site
La g
éo
Mé
Trie
au
se
rv
iCe
De
La
na
vig
aTi
on
06
Des lignes larges captent l’attention de l’utilisateur et, lorsqu’elles se
croisent, entraînent son regard vers des points précis.
Cliquez sur l’image pour voir le site
Toujours plus d’interactivité
Tou
jou
rs
pLu
s D
’inTe
ra
CTi
viT
é
07
Les développeurs et web designers s’allient pour rendre les utilisateurs acteurs de leur navigation.
La tendance en 2018 est de donner le pouvoir à l’utilisateur en adaptant le concept de personnalisation de contenu possible sur les réseaux sociaux avec la newsfeed. Il peut choisir le contenu qu’il verra apparaître, pas seulement par filtres avancés mais désormais par quizz ! Un exemple avec le site du film LadyBird qui propose un quizz et fait apparaître un extrait du film en fonction des réponses de l’utilisateur.
Tou
jou
rs
pLu
s D
’inTe
ra
CTi
viT
é
07
Cliquez sur l’image pour voir le site
Tou
jou
rs
pLu
s D
’inTe
ra
CTi
viT
é
07
Les boutons d’action trouvent une nouvelle fonction en 2018. Ils ne servent plus simplement à ajouter un article au panier ou à aller vers une autre page en lien avec le contenu visualisé (plus d’infos…).
On pourrait les appeler boutons de transitions car ils donnent à l’utilisateur le sens de la visite tout en lui laissant la main sur la poursuite du parcours.
Cliquez sur l’image pour voir le site
Tou
jou
rs
pLu
s D
’inTe
ra
CTi
viT
é
07
Besoin d’un composant magique pour créer la surprise et offrir une expérience ludique et engageante ? Les micro-interactions, ces petites animations ou réponses virtuelles qui apparaissent lorsque l’utilisateur effectue certaines actions, sont hyper tendance en 2018. Elles génèrent des réactions, expliquent des fonctions et divertissent l’audience.
Cliquez sur l’image pour voir le site
Web design et e-commerce, une relation de plus en plus sérieuse
Les tendances en web design sont intégrées de plus en plus rapidement par les sites de e-commerce, qui sont parfois créateurs d’inspirations.
au plus près du consommateur
au
pLu
s p
rè
s D
u C
on
so
MM
aTe
ur
08
Le visiteur de site de e-commerce a une obsession : trouver la perle rare en un temps record.
Bonne nouvelle, le quizz n’est pas réservé aux sites de film ! On le retrouve dans
sa version e-commerce avec le lunettier Warby Parker, qui permet de filtrer des modèles sur la base de quelques ques-
tions relatives à la forme du visage et aux préférences esthétiques du visiteur.
Cliquez sur l’image pour voir le site
au
pLu
s p
rè
s D
u C
on
so
MM
aTe
ur
08
En e-commerce, qui dit visiteur dit taux de conversion. Bien designer et développer son processus de paiement est essentiel. En 2018, on choisit soigneusement les fonctions (connexion visiteur, vérification de l’adresse avec Google...) et on multiplie les moyens de paiement. Les textes courts, les images et les boutons viennent simplifier le process.
Cliquez sur l’image pour voir le site
Des vitrines en ligne tendance
De
s v
iTr
ine
s e
n L
ign
e T
en
Da
nC
e
09
Les sites de e-commerce ont bien compris que l’impact visuel était l’un des facteurs majeurs du web design. Après être passés par la case Material Design, certains de ces sites figurent parmi les pépites du web design en 2018.
Un nombre croissant de sites de e-commerce optent pour un contenu épuré, quitte à limiter le nombre de produits présentés sur chaque page. Ces derniers ne sont plus bloqués dans leurs petits cadres alignés. Les modèles s’approprient les pages, à tel point que le site web de Zara a pris des allures de magazine. La présentation des produits y est déstructurée, sans que l’on s’y perde.
De
s v
iTr
ine
s e
n L
ign
e T
en
Da
nC
e
09
Cliquez sur l’image pour voir le site
De
s v
iTr
ine
s e
n L
ign
e T
en
Da
nC
e
09En 2018, certains e-shops mono-brand prennent des allures de sites d’agences digitales, avec une typographie affirmée et une thématique graphique soignée.
Cliquez sur l’image pour voir le site
De
s v
iTr
ine
s e
n L
ign
e T
en
Da
nC
e
09
Cerise sur le gâteau, la navigation est animée et interactive ! La customisation des produits sans chargement de nouvelle page, les icônes rotatives ou encore la présentation 3D des produits créent une expérience d’achat unique.
Cliquez sur l’image pour voir le site
La symbiose entre évolution technique et création visuelle,
2018 est donc l’année de la symbiose entre évolution technique et création visuelle, grâce à des web de-signers qui ne se contentent pas de relever les défis posés par la multiplication de supports toujours plus complexes, mais redoublent également d’ingéniosité pour surpasser les attentes digitales des utilisateurs.
Êtes-vous prêt à passer votre activité sur le web à la vitesse supérieur ?Prenons rendez-vous tout simplement
raphaël hatemAvenue Edouard Dapples, 381006 [email protected] : +41 (0)79 605 86 66