Découvrez les tendances webdesign de l'année 2014 selon Vanksen. This presentation is also available IN ENGLISH, here : https://fr.slideshare.net/Vanksen/10-webdesign-trends-for-2014

1. 1
Les 10 tendances
webdesign de 2014

2. 2
La créativité
est contagieuse,
faites-la tourner.
Albert Einstein

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

4. 4
1. La mobilité change tout

5. 1. La mobilité change tout
L’année 2014 est marquée par l’influence de la mobilité
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).
5

6. 1. La mobilité change tout
L’année 2014 est marquée par l’influence de la mobilité
LE MOBILE
7 MILLIARDS
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.
6

7. 1. La mobilité change tout
L’année 2014 est marquée par l’influence de la mobilité
LA TABLETTE
4 MILLIONS
C’est le nombre de possesseurs de smartphones
français qui ont également une tablette.
4 FOIS + RAPIDE
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.
7

8. 1. La mobilité change tout
L’année 2014 est marquée par l’influence de la mobilité
MOBILE = MULTIPLICITÉ DES ÉCRANS
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
8

9. 1. La mobilité change tout
L’année 2014 est marquée par l’influence de la mobilité
MOBILITÉ = UNE INFLUENCE GLOBALE
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.
9

10. 1. La mobilité change tout
L’année 2014 est marquée par l’influence de la mobilité
MOBILITÉ = LES CHANGEMENTS
 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 »
10

11. 1. La mobilité change tout
11
L’année 2014 est marquée par l’influence de la mobilité
Développement des sites en responsive design …
… 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
http://bit.ly/1hb7jjU

12. 1. La mobilité change tout
L’année 2014 est marquée par l’influence de la mobilité
Du contenu beaucoup plus visuel …
… 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.
http://bit.ly/1lBaqjn
12

13. 1. La mobilité change tout
L’année 2014 est marquée par l’influence de la mobilité
Une navigation repensée pour le tactile
13

14. 1. La mobilité change tout
L’année 2014 est marquée par l’influence de la mobilité
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.
14

15. 1. La mobilité change tout
L’année 2014 est marquée par l’influence de la mobilité
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
15

16. 16
2. Le scroll et les sites monopages

17. 2. Le scroll et les sites monopages
Le webdesign mise sur les sites en scroll et « one page »
LE SCROLL
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!
17

18. 2. Le scroll et les sites monopages
Le webdesign mise sur les sites en scroll et « one page »
LE SCROLL
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 !
18

19. 2. Le scroll et les sites monopages
Le webdesign mise sur les sites en scroll et « one page »
Exemples de sites monopages en scroll
http://bit.ly/1dHk9OL
19

20. 2. Le scroll et les sites monopages
Le webdesign mise sur les sites en scroll et « one page »
Exemples de sites monopages en scroll
20

21. 2. Le scroll et les sites monopages
Le webdesign mise sur les sites en scroll et « one page »
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/
21

22. 22
3. Moins de blabla

23. 3. Moins de blabla
23
Le dire oui, mais le dire de manière attractive
EN 2014, ON SE TAIT ?
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…

24. 3. Moins de blabla
24
Le dire oui, mais le dire de manière attractive
EN 2014, MOINS DE BLABLA !
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.

25. 3. Moins de blabla
25
Le dire oui, mais le dire de manière attractive
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.
http://bit.ly/1djnwji

26. 3. Moins de blabla
26
Le dire oui, mais le dire de manière attractive
…ou par les pictogrammes
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. 3. Moins de blabla
Le dire oui, mais le dire de manière attractive
L’image pour le dire mieux qu’un texte
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
des illustrations
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.
27

28. 28
4. Place à l’image

29. 4. Place à l’image
29
Le dire en image !
L’IMAGE AU CŒUR DU WEBDESIGN
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.

30. 4. Place à l’image
30
Le dire en image !
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.
http://bit.ly/NC94JV
http://bit.ly/1aUCPjg

31. 4. Place à l’image
Le dire en image !
De plus en plus de sites avec un background en image
http://bit.ly/1okfVFr
http://bit.ly/1hbDFLd
http://bit.ly/1iOH6Vs
31

32. 4. Place à l’image
Le dire en image !
De plus en plus de sites avec un background en image
Ce site met bien en avant le produit en misant sur
le côté visuel et très graphique en pleine page.
32

33. 4. Place à l’image
Le dire en image !
De plus en plus de sites avec une large image en background
Le site de Sagmeister & Walsh dispose d’images aléatoires.
Le menu figure directement sur les images.
33

34. 4. Place à l’image
Le dire en image !
De plus en plus de sites avec une large image en background
Le menu est ici cliquable directement dans l’image.
34

35. 4. Place à l’image
Le dire en image !
De plus en plus de sites avec une large image en background
Le site de Winshape est composé de grandes images qui varient
avec un filtre apposé sur les images, à la mode « Instagram ».
35

36. 4. Place à l’image
36
Le dire en image !
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.
http://bit.ly/1eQ21IK
http://bit.ly/MbTW54

37. 4. Place à l’image
37
Le dire en image !
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.
http://bit.ly/1aUELbA

38. 38
5. La vidéo comme valeur ajoutée

39. 5. La vidéo comme valeur ajoutée
La vidéo parle mieux qu’un texte ou une image
LA VIDÉO : 90% DU TRAFIC WEB EN 2017
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.
39

40. 5. La vidéo comme valeur ajoutée
La vidéo parle mieux qu’un texte ou une image
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.
40

41. 5. La vidéo comme valeur ajoutée
La vidéo parle mieux qu’un texte ou une image
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.
41

42. 5. La vidéo comme valeur ajoutée
La vidéo parle mieux qu’un texte ou une image
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.
42

43. 5. La vidéo comme valeur ajoutée
La vidéo parle mieux qu’un texte ou une image
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.
43

44. 44
6. Le flat design

45. 6. Le flat design
45
Des sites tout en aplat
LE SKEUOMORPHISME EST DÉJÀ LOIN
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).

46. 6. Le flat design
46
Des sites tout en aplat
PLACE AU FLAT DESIGN, ENCORE EN 2014
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.

47. 6. Le flat design
47
Des sites tout en aplat
PLACE AU FLAT DESIGN, ENCORE EN 2014
iOS6
iOS7
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 !

48. 6. Le flat design
Des sites tout en aplat
SKEUOMORPHISME VS FLAT DESIGN
48

49. 6. Le flat design
Des sites tout en aplat
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/
49

50. 6. Le flat design
50
Des sites tout en aplat
De plus en plus de sites influencés par le flat
http://bit.ly/1m7tUA1
http://bit.ly/1djO8ke

51. 6. Le flat design
Des sites tout en aplat
Variation du flat design : le long shadow design pour donner de la profondeur
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.
51

52. 52
7. La typographie, star du webdesign

53. 7. La typographie, star du webdesign
Plus de typos personnalisées
LA TYPO, PLUS QUE DES LETTRES
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.
53

54. 7. La typographie, star du webdesign
Plus de typos personnalisées
LA TYPO, PLUS QUE DES LETTRES
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.
54

55. 7. La typographie, star du webdesign
Plus de typos personnalisées
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.
http://bit.ly/1fgkEQY
http://www.valentinagallo.us/site/
55

56. 7. La typographie, star du webdesign
Plus de typos personnalisées
La typo, bien plus que des lettres : un rendu visuel plein de sens
http://bit.ly/1jx5EVS
56

57. 7. La typographie, star du webdesign
Plus de typos personnalisées
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).
http://bit.ly/1kBJCle
http://bit.ly/N5qUEf
57

58. 7. La typographie, star du webdesign
Plus de typos personnalisées
Autres exemples de compositions typographiques :
http://bit.ly/1fYSlbp
http://bit.ly/MbZrR0
http://bit.ly/1eTVJ9x
58

59. 7. La typographie, star du webdesign
59
Plus de typos personnalisées
http://bit.ly/MKXI58
http://bit.ly/1er05jC

60. 7. La typographie, star du webdesign
Plus de typos personnalisées
http://bit.ly/1aUJOIP
60

61. 61
8. Le webdesign géométrique

62. 8. Le design géométrique
L’utilisation des formes géométriques dans le webdesign
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.
62

63. 8. Le design géométrique
L’utilisation des formes géométriques dans le webdesign
http://bit.ly/1m7x1rB
63

64. 8. Le design géométrique
L’utilisation des formes géométriques dans le webdesign
64

65. 8. Le design géométrique
L’utilisation des formes géométriques dans le webdesign
http://bit.ly/1jx716U
65

66. 66
9. Le parallaxe et les sites animés

67. 9. Le parallaxe et les sites animés
Donner une dimension immersive et évènementielle
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
67

68. 9. Le parallaxe et les sites animés
68
Donner une dimension immersive et évènementielle
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. 9. Le parallaxe et les sites animés
Donner une dimension immersive et évènementielle
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.
69

70. 9. Le parallaxe et les sites animés
Donner une dimension immersive et évènementielle
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
70

71. 9. Le parallaxe et les sites animés
Donner une dimension immersive et évènementielle
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.
71

72. 72
10. La navigation synchronisée

73. 10. La navigation synchronisée
Une expérience multi-devices
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 !
73

74. 10. La navigation synchronisée
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.
74

75. 10. La navigation synchronisée
Une expérience multi-devices
Sur le site Justareflektor, Arcade Fire propose de
découvrir son nouveau clip en interagissant avec le site
grâce à son mobile.
75

76. 10. La navigation synchronisée
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.
76

77. 77
Rendez-vous en 2015 pour faire le point sur
nos prédictions et les évolutions futures !

78. Merci de votre attention
N’hésitez pas à nous contacter
Jean-Marc Liacy et son équipe
Artistic Director
jmliacy@vanksen.com
+352 48 90 90 226
Contactez-nous
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
Solange Derrey
Chargée des études digitales
sderrey@vanksen.com
+33 1 55 33 89 17
vanksen.fr
twitter.com/vanksen
facebook.com/vanksen
pinterest.com/vanksen