3. 3
LES 10 TENDANCES WEBDESIGN
DE 2014 BY
1. LA MOBILITE
CHANGE TOUT
2. LE SCROLL ET LES
SITES MONOPAGES
3. MOINS DE
BLABLA
4. PLACE
A L’IMAGE
5. LA VIDEO COMME
VALEUR AJOUTEE
6. LE FLAT
DESIGN
7. LA TYPOGRAPHIE,
STAR DU WEBDESIGN
8. LE WEBDESIGN
GEOMETRIQUE
9. LE PARALLAXE ET
LES SITES ANIMES
10. LA NAVIGATION
SYNCHRONISEE
5. 5
MOBILITÉ
Aujourd’hui , de plus en plus d’individus se
connectent à Internet en mobilité grâce
aux smartphones, tablettes et même
« phablettes » (smartphones aux écrans
plus larges, entre un smartphone et une
tablette).
L’année 2014 est marquée par l’influence de la mobilité
1. La mobilité change tout
6. 7MILLIARDS
6
C’est le nombre de téléphones mobiles dans le monde,
dont 48 millions en France.
72%
C’est le pourcentage de Français ayant navigué sur le
web via leur mobile en 2013 (contre 55% en 2012 et
40% en 2011). A l’échelle mondiale, il y a plus de
mobinautes que d’internautes.
LE MOBILE
L’année 2014 est marquée par l’influence de la mobilité
1. La mobilité change tout
7. 4MILLIONS
7
C’est le nombre de possesseurs de smartphones
français qui ont également une tablette.
La croissance des tablettes (encore peu répandues
par rapport aux mobiles : 14% des adultes français),
est 4 fois plus forte que celle des smartphones
à leur lancement.
4FOIS+RAPIDE
LA TABLETTE
L’année 2014 est marquée par l’influence de la mobilité
1. La mobilité change tout
8. 8
Nécessité de s’adapter aux différentes
résolutions et tailles d’écrans en termes de :
Design : adapter à un écran plus petit est une contrainte
majeure en terme de création pour le mobile par exemple
Développement : s’adapter à tous les terminaux demande
beaucoup plus d’optimisation en développement web
Navigation : le tactile et la taille d’écran des mobiles
et tablettes demandent de penser une ergonomie différente
Contenu : l’utilisateur en mobilité veut du contenu
accessible plus rapidement, simplement, sans élément
perturbateur qui vienne troubler sa lecture
MOBILE = MULTIPLICITÉ DES ÉCRANS
L’année 2014 est marquée par l’influence de la mobilité
1. La mobilité change tout
9. MOBILITÉ = UNE INFLUENCE GLOBALE
9
Il ne s’agit plus simplement « d’adapter » ou même
de « décliner » le design d’un site web sur les
terminaux mobiles mais de repenser le
webdesign dans sa globalité en fonction de
cette influence mobile.
En 2014, le processus de création « mobile
first » qui consiste à penser avant tout son
site sur mobile pour l’adapter sur le web
(desktop), se développe considérablement.
L’année 2014 est marquée par l’influence de la mobilité
1. La mobilité change tout
10. 10
Des solutions pour un design adapté à tous les devices
Du contenu qui va à l’essentiel : moins de texte, place au visuel
Des accès simplifiés pour un temps de chargement moins long et une
expérience rapide
Une ergonomie repensée pour trouver l’information recherchée du
premier coup
Une nouvelle façon de naviguer plus « touchscreen friendly »
L’année 2014 est marquée par l’influence de la mobilité
MOBILITÉ = LES CHANGEMENTS
L’année 2014 est marquée par l’influence de la mobilité
1. La mobilité change tout
11. 11
… pour une adaptation à tous les
terminaux de manière plus
simple et à moindre coût
(comparé au développement de
plusieurs applications)
Le responsive design consiste
à développer un site qui s’adapte
à l’outil avec lequel il est lu.
En savoir + :
http://bit.ly/1bmVMWI
Développement des sites en responsive design …
http://bit.ly/1hb7jjU
L’année 2014 est marquée par l’influence de la mobilité
1. La mobilité change tout
12. 12
… pour s’adapter à une taille
d’écran où le texte est plus
compliqué à lire et mettre
en avant les informations de
façon plus attractive.
Du contenu beaucoup plus visuel …
http://bit.ly/1lBaqjn
L’année 2014 est marquée par l’influence de la mobilité
1. La mobilité change tout
13. 13
Une navigation repensée pour le tactile
L’année 2014 est marquée par l’influence de la mobilité
1. La mobilité change tout
14. 14
Le mobile influence les sites sur desktop…
… comme le site Travel Alberta où la
navigation ressemble fortement à celle
des tablettes. L’internaute clique
et déploie différentes parties en
« lames » pour accéder à l’information
qu’il recherche uniquement.
L’année 2014 est marquée par l’influence de la mobilité
1. La mobilité change tout
15. 15
Tout le contenu nécessite d’être repensé !
Consultez sur notre blog le compte-rendu du très intéressant ouvrage « Stratégie
de contenu mobile » de Karen McGrane : http://bit.ly/1bs65ur
L’année 2014 est marquée par l’influence de la mobilité
1. La mobilité change tout
17. 17
Toujours influencé par le mobile et sa
navigation tactile, le scroll s’est développé sur
un grand nombre de sites web.
Avec les techniques d'optimisation d'images,
du scrolling et encore une fois l'expérience mobile,
les sites monopages vont encore être les
stars de cette année!
Le webdesign mise sur les sites en scroll et « one page »
2. Le scroll et les sites monopages
LE SCROLL
18. 18
Ne pas oublier cela dit les sites multipages,
qui sont bien plus adaptés lorsque le contenu
du site est conséquent.
Les sites monopages s’utilisent pour
rendre un site attractif à l’œil, agréable à
la navigation, avec un contenu simplifié et très
visuel : inutile donc si la vocation première de
votre site est de donner un volume important
d’informations !
Le webdesign mise sur les sites en scroll et « one page »
2. Le scroll et les sites monopages
LE SCROLL
19. 19
Exemples de sites monopages en scroll
http://bit.ly/1dHk9OL
Le webdesign mise sur les sites en scroll et « one page »
2. Le scroll et les sites monopages
20. 20
Exemples de sites monopages en scroll
Le webdesign mise sur les sites en scroll et « one page »
2. Le scroll et les sites monopages
21. 21
Exemple en double-scroll
Le scroll n’est pas seulement vertical :
en biais, horizontal ou même en
double-scroll, les sites font preuve de
créativité.
Ici le site est en double-scroll
c’est-à-dire que lorsque que vous
scrollez avec votre souris, les deux
parties défilent dans les sens opposés.
Testez vous-même :
http://www.fadeoreddy.com/
Le webdesign mise sur les sites en scroll et « one page »
2. Le scroll et les sites monopages
23. 23
Oui et Non !
On essaye d’en dire moins pour ménager
le lecteur et lui donner l’information essentielle
qu’il recherche.
On en dit tout autant mais en mettant
en scène son discours pour qu’il soit plus
digeste et attractif : moins de texte, place
à l’image, aux pictogrammes, aux illustrations,
aux démonstrations, aux vidéos, à la datavisu…
Le dire oui, mais le dire de manière attractive
3. Moins de blabla
EN 2014, ON SE TAIT ?
24. 24
On prend exemple sur Apple qui en
dit tout autant que ses concurrents
sur ses produits mais qui sait les
mettre en avant, aller à
l’essentiel et hiérarchiser les
informations tout en misant sur
le visuel et le design comme
principal attrait.
Le dire oui, mais le dire de manière attractive
3. Moins de blabla
EN 2014, MOINS DE BLABLA !
25. 25
Le contenu peut être simplifié par la datavisualisation
La datavisualisation ainsi que les
pictogrammes permettent de mettre en
scène un texte pour que certaines
informations ressortent plus que d’autres
et pour créer un ensemble visuellement
esthétique, en comparaison à un simple
pavé de texte.
Le dire oui, mais le dire de manière attractive
3. Moins de blabla
http://bit.ly/1djnwji
26. 26
…ou par les pictogrammes
Le dire oui, mais le dire de manière attractive
3. Moins de blabla
Les pictogrammes permettent
d’expliquer différentes étapes ou
de catégoriser visuellement
un texte. Explicite et directement
visible, il met en avant le contenu.
http://bit.ly/1jwkmfU
27. 27
L’image pour le dire mieux qu’un texte
Le dire oui, mais le dire de manière attractive
3. Moins de blabla
Sur ce site, Android
réussit à raconter toute
l’histoire de sa marque
et de ses différents
systèmes d’exploitation
sans avoir besoin de
texte, uniquement avec
d e s i l l u s t r a t i o n s
représentant les noms
de ses OS « Donut »
« Cupcake », tout passe
par l’image.
Un site qui réussit le
pari de raconter un
historique de marque
de manière attractive.
29. 29
L’image est pleine de sens et attractive.
Cette tendance est pleinement liée à la tendance n°3
« Moins de blabla », dans une volonté d’aller à l’essentiel.
On voit de plus en plus de sites avec une image en
background, de très bonne qualité.
Cette image d’introduction du site prend une place
importante, rend le site très visuel et épuré.
Sans oublier l’influence d’Instagram ou encore
Pinterest qui joue son rôle dans le développement de
l’image comme nouveau moyen de communiquer.
La 3D sera également à l’honneur en cette année
2014, offrant un rendu de très haute qualité pour mettre
en avant produits et univers de marque.
Le dire en image !
4. Place à l’image
L’IMAGE AU CŒUR DU WEBDESIGN
30. 30
De plus en plus de sites avec un background en image
Le webdesign 2014 sera sous
le signe de l’image de qualité,
en « plein écran » sur les sites.
4. Place à l’image
Le dire en image !
http://bit.ly/1aUCPjghttp://bit.ly/NC94JV
31. 31
4. Place à l’image
Le dire en image !
http://bit.ly/1okfVFr http://bit.ly/1hbDFLd http://bit.ly/1iOH6Vs
De plus en plus de sites avec un background en image
32. 32
4. Place à l’image
Le dire en image !
Ce site met bien en avant le produit en misant sur
le côté visuel et très graphique en pleine page.
De plus en plus de sites avec un background en image
33. 33
De plus en plus de sites avec une large image en background
4. Place à l’image
Le dire en image !
Le site de Sagmeister & Walsh dispose d’images aléatoires.
Le menu figure directement sur les images.
34. 34
De plus en plus de sites avec une large image en background
4. Place à l’image
Le dire en image !
Le menu est ici cliquable directement dans l’image.
35. 35
De plus en plus de sites avec une large image en background
4. Place à l’image
Le dire en image !
Le site de Winshape est composé de grandes images qui varient
avec un filtre apposé sur les images, à la mode « Instagram ».
36. 36
La tendance des « blurred images » se développe
La tendance du « blurred design »
est très présente au niveau de ces
grandes images « fond d’écran »
qui figurent en entrée de site.
On appelle « blurred images »
ces grandes images sur lesquelles est
apposé un flou important, en général
de tons très doux, pastels.
Elles colorent et remplissent le site tout
en apportant un côté épuré.
Les images « blurred » prennent moins
de temps à charger car nécessitent une
taille de fichier moins importante
qu’une photo standard.
4. Place à l’image
Le dire en image !
http://bit.ly/1eQ21IK http://bit.ly/MbTW54
37. 37
Le travail de l’image
L’image prend également
toute son importance
lorsqu’elle est travaillée :
mixée avec de la typo, coupes
géométriques, fondus avec
plusieurs images…
Elle exprime ainsi un univers
et véhicule une ambiance bien
particulière.
4. Place à l’image
Le dire en image !
http://bit.ly/1aUELbA
39. 39
De la même manière que l’image,
la vidéo prend une place plus importante en
webdesign pour un contenu plus aéré, visuel
et attrayant.
Selon Cisco, la vidéo représenterait
90% du trafic web en 2017.
D’après Social Media Examiner, 76% des
annonceurs prévoient d’augmenter
leur production de vidéo.
Autant dire qu’elle sera la star de cette année,
à favoriser pour mettre en avant un concept,
un produit ou les valeurs d’une marque.
La vidéo parle mieux qu’un texte ou une image
5. La vidéo comme valeur ajoutée
LAVIDÉO:90%DUTRAFICWEBEN2017
40. 40
Vidéo en pleine page
On la voit de plus en plus en
pleine page des sites pour
animer et dynamiser ou
pour remplacer des textes
d’explication qui mettent
plus de temps à être lus.
Un point non négligeable de la
vidéo : les internautes sont
plus enclins à partager sur
les réseaux sociaux une
vidéo d’explication produit
plutôt qu’un texte.
Le site de Qcamera est animé avec une
vidéo en pleine page comme explication
du produit.
La vidéo parle mieux qu’un texte ou une image
5. La vidéo comme valeur ajoutée
41. 41
Vidéo en pleine page
Tout le background du site Any.do est animé en vidéo
pour véhiculer une ambiance spécifique au site.
La vidéo parle mieux qu’un texte ou une image
5. La vidéo comme valeur ajoutée
42. 42
Vidéo en pleine page : d’autres exemples
Site de piscines avec vidéo plein écran
pour « plonger » dans l’univers.
Site du Film Gravity pour immerger
l’internaute dans le film.
La vidéo parle mieux qu’un texte ou une image
5. La vidéo comme valeur ajoutée
43. 43
100% vidéo
Ce site de Puma mise complètement sur la vidéo : le background est lui-même une vidéo,
dans laquelle se trouve deux autres vidéos d’explications.
La vidéo parle mieux qu’un texte ou une image
5. La vidéo comme valeur ajoutée
45. 45
Skeuo-quoi ? !
Pour ceux qui ne connaissent pas, le skeuomorphisme
(ou « realism ») est un terme définissant un élément de
design qui reproduit de manière ornementale un élément
qui était nécessaire dans l’objet d’origine. Cette tendance a
été démocratisée par le design des interfaces Apple qui
étaient reproduites sous la forme des objets physiques
pour donner plus facilement des repères à l’utilisateur.
Exemples : La galerie d’ebooks sous forme de bibliothèque, les
mémos en texture « post-it », les boutons au design métallisé… ou
encore dans la navigation qui s’inspirait des réflexes physiques
(tourner la page d’un ebook par exemple).
Des sites tout en aplat
6. Le flat design
LE SKEUOMORPHISME EST DÉJÀ LOIN
46. 46
Apple a souvent influencé nos directions artistiques ces
dernières années, notamment avec le skeuomorphisme.
L'année passée c'était au tour de son concurrent
Windows, avec des couleurs en aplats et des
icônes simplissimes : premier OS à appliquer
le « flat design ».
Le flat design puise sa force dans les années 60 et veut
que le design du site soit mis à plat en enlevant
toutes les « fioritures » . Pas de dégradés, pas de
textures, pas d’ombres portées, etc.
Des sites tout en aplat
6. Le flat design
PLACEAUFLATDESIGN,ENCOREEN2014
47. 47
Preuve de l’influence du flat design, Apple a
décidé d’abandonner son skeuomorphisme
pour s’adapter à cette tendance avec son
iOS 7. L’interface revisite les années 80,
avec des dégradés aux couleurs flashy.
Ce changement a d’ailleurs créé une
véritable polémique en 2013.
Le flat design sera encore la grande
tendance webdesign de 2014 !
Des sites tout en aplat
6. Le flat design
PLACEAUFLATDESIGN,ENCOREEN2014
iOS6 iOS7
48. 48
Des sites tout en aplat
6. Le flat design
SKEUOMORPHISME VS FLAT DESIGN
49. 49
Bien comprendre la différence entre ‘flat design’ et ‘realism’
Ce site explique visuellement la différence entre ces deux tendances qui se sont
opposées pendant l’année 2013 : http://www.flatvsrealism.com/
Des sites tout en aplat
6. Le flat design
50. 50
De plus en plus de sites influencés par le flat
Des sites tout en aplat
6. Le flat design
http://bit.ly/1m7tUA1 http://bit.ly/1djO8ke
51. 51
Variation du flat design : le long shadow design pour donner de la profondeur
Des sites tout en aplat
On voit également l’apparition de
la tendance « long shadow » qui
consiste simplement à appliquer
une ombre longue aux éléments
et qui apporte de la profondeur
au flat design.
6. Le flat design
53. 53
Finis les standards au niveau de la typographie,
on apercevra de plus en plus des typos
personnalisées, réalisées sur-mesure, qui se
suffisent à elles-mêmes pour véhiculer un univers
et des significations.
Plus de typos personnalisées
7. La typographie, star du webdesign
LA TYPO, PLUS QUE DES LETTRES
54. 54
Au grand bonheur des designers, les fonts de
toutes sortes deviennent compatibles avec
les navigateurs. Google Chrome et Firefox ont
toujours cherché des solutions pour améliorer
le rendu visuel et l'apparition de ces nouvelles
typographies. Malheureusement, bon nombre
d'autres navigateurs ont pris le train en marche
un peu plus tard et notamment Internet
Explorer, navigateur le plus répandu au monde.
Mais l'évolution suit son cours et les web
fonts de base seront certainement sur le
banc de touche sous peu.
Plus de typos personnalisées
7. La typographie, star du webdesign
LA TYPO, PLUS QUE DES LETTRES
55. 55
La typo, bien plus que des lettres : un rendu visuel plein de sens
Les fonts permettent d’ajouter un côté
plus unique aux créations, d’exprimer
sa personnalité de marque, son
positionnement, un message ou des
valeurs.
Plus de typos personnalisées
7. La typographie, star du webdesign
http://bit.ly/1fgkEQY http://www.valentinagallo.us/site/
56. 56
La typo, bien plus que des lettres : un rendu visuel plein de sens
Plus de typos personnalisées
7. La typographie, star du webdesign
http://bit.ly/1jx5EVS
57. 57
La typo, bien plus que des lettres : un rendu visuel plein de sens
La typo apporte plus de dynamisme aux
images avec les ‘mix and match’ (fait
de mixer plusieurs fonts pour un rendu
artistique).
Plus de typos personnalisées
7. La typographie, star du webdesign
http://bit.ly/N5qUEfhttp://bit.ly/1kBJCle
58. 58
Autres exemples de compositions typographiques :
Plus de typos personnalisées
7. La typographie, star du webdesign
http://bit.ly/MbZrR0 http://bit.ly/1eTVJ9xhttp://bit.ly/1fYSlbp
59. 59
Plus de typos personnalisées
7. La typographie, star du webdesign
http://bit.ly/1er05jC
http://bit.ly/MKXI58
60. 60
Plus de typos personnalisées
7. La typographie, star du webdesign
http://bit.ly/1aUJOIP
62. 62
L’utilisation des formes géométriques dans le webdesign
8. Le design géométrique
On remarque encore et toujours
l’utilisation des formes géométriques
dans le webdesign, anguleuses ou
arrondies, les formes sont à l’honneur
et viennent embellir les mises en pages
de sites et travailler les rendus d’images.
67. 67
Donner une dimension immersive et évènementielle
9. Le parallaxe et les sites animés
Le parallax scrolling a fait une
entrée en force il y a maintenant
2 ans et continuera certainement sur
sa lancée en 2014.
Avec cette technique, les images en
arrière plan bougent plus
doucement que celles en premier
plan, créant ainsi un effet de
profondeur et d’immersion.
Basée sur le principe des jeux-vidéos,
cette technique apporte énormément
de dynamisme aux sites.
Les possibilités sont multiples et nous
pensons qu'encore de nombreuses
surprises pourraient pointer le bout
de leur nez cette année !
Parallax qui donne de la profondeur avec les
produits en mouvement sur le site de Rimmel
68. 68
Donner une dimension immersive et évènementielle
9. Le parallaxe et les sites animés
Sur ce site d’Ana Safroncik,
la technique de parallax est utilisée
pour dynamiser la lecture, en
scrollant, les images apparaissent
au fur et à mesure pour donner
plus de caractère au site.
69. 69
Donner une dimension immersive et évènementielle
9. Le parallaxe et les sites animés
Sur le site de No leath, tous les produits
sont mis en avant grâce au mouvement
que produit le parallaxe, le contenu du
site va à l’essentiel pour une lecture
dynamique et attractive.
70. 70
Donner une dimension immersive et évènementielle
9. Le parallaxe et les sites animés
D’autres sites ne s’arrêteront
pas au simple parallax scrolling
et iront jusqu’à développer des
sites entièrement animés et
interactifs.
Ces sites ont plutôt une vocation
évènementielle et ludique,
ils ont pour but d’immerger
complètement l’internaute dans
une expérience engageante.
Cela permet d’attirer l’attention
et d’inciter l’internaute à rester
plus longtemps sur le site.
http://bit.ly/1hbOvB4
71. 71
Donner une dimension immersive et évènementielle
9. Le parallaxe et les sites animés
Ce site de Jack Daniel’s fait découvrir aux internautes l’univers féérique de l’alcoolier
à l’occasion de Noël, un site tout en animations, pour une immersion totale dans les
différentes facettes de la marque.
73. 73
Une expérience multi-devices
10. La navigation synchronisée
Depuis quelques années déjà,
"Google experiment" arrive
fréquemment avec de nouvelles
prouesses techniques qui vont
à coup sûr changer le web
de demain, et par conséquent
donner envie aux designers
de créer différemment.
Une des nouvelles techniques
qui a marqué les esprits est la
navigation synchronisée
avec son mobile ou sa
tablette.
Google Chrome l'a présentée avec son site Super
Sync Sports.
Le principe est de scanner un QR code ou de se
rendre directement à l'URL spécifique avec son
smartphone, le lien se fait automatiquement et
la magie opère !
74. 74
Une expérience multi-devices
Le site d’Adidas – Nitrocharge your game est une
expérience digitale où l’on peut découvrir les joueurs
sponsorisés par Adidas, admirer la chaussure sous
tous ses angles et jouer au jeu en multi-écrans
avec l’iPhone, ou seulement sur la version desktop.
10. La navigation synchronisée
75. 75
Sur le site Justareflektor, Arcade Fire propose de
découvrir son nouveau clip en interagissant avec le site
grâce à son mobile.
Une expérience multi-devices
10. La navigation synchronisée
76. 76
Une expérience multi-devices
Le site Racer consiste à parcourir un circuit
réparti sur plusieurs smartphones et
tablettes (5 maximum). Pour accélérer, il suffit
de toucher l’écran de son terminal.
10. La navigation synchronisée
77. Rendez-vous en 2015 pour faire le point sur
77
nos prédictions et les évolutions futures !
78. Merci de votre attention
N’hésitez pas à nous contacter
Benelux
Jérémy Coxet
jcoxet@vanksen.com
+352 48 90 90
France
Xavier Lesueur
xlesueur@vanksen.com
+331 55 33 89 00
Suisse
David Pihen
dpihen@vanksen.com
+41 22 306 49 90
Contactez-nous
vanksen.fr
twitter.com/vanksen
facebook.com/vanksen
pinterest.com/vanksen
Solange Derrey
Chargée des études digitales
sderrey@vanksen.com
+33 1 55 33 89 17
Jean-Marc Liacy et son équipe
Artistic Director
jmliacy@vanksen.com
+352 48 90 90 226
