11
Les 10 tendances
webdesign de 2014
2
La créativité
est contagieuse,
faites-la tourner.
Albert Einstein
3
LES 10 TENDANCES WEBDESIGN
DE 2014 BY
1. LA MOBILITE
CHANGE TOUT
2. LE SCROLL ET LES
SITES MONOPAGES
3. MOINS DE
BLABLA
...
1. La mobilité change tout
4
5
MOBILITÉ
Aujourd’hui , de plus en plus d’individus se
connectent à Internet en mobilité grâce
aux smartphones, tablettes...
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 ...
4MILLIONS
7
C’est le nombre de possesseurs de smartphones
français qui ont également une tablette.
La croissance des table...
8
Nécessité de s’adapter aux différentes
résolutions et tailles d’écrans en termes de :
 Design : adapter à un écran plus...
MOBILITÉ = UNE INFLUENCE GLOBALE
9
Il ne s’agit plus simplement « d’adapter » ou même
de « décliner » le design d’un site ...
10
 Des solutions pour un design adapté à tous les devices
 Du contenu qui va à l’essentiel : moins de texte, place au v...
11
… pour une adaptation à tous les
terminaux de manière plus
simple et à moindre coût
(comparé au développement de
plusie...
12
… pour s’adapter à une taille
d’écran où le texte est plus
compliqué à lire et mettre
en avant les informations de
faço...
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 t...
14
Le mobile influence les sites sur desktop…
… comme le site Travel Alberta où la
navigation ressemble fortement à celle
...
15
Tout le contenu nécessite d’être repensé !
Consultez sur notre blog le compte-rendu du très intéressant ouvrage « Strat...
2. Le scroll et les sites monopages
16
17
Toujours influencé par le mobile et sa
navigation tactile, le scroll s’est développé sur
un grand nombre de sites web.
...
18
Ne pas oublier cela dit les sites multipages,
qui sont bien plus adaptés lorsque le contenu
du site est conséquent.
Les...
19
Exemples de sites monopages en scroll
http://bit.ly/1dHk9OL
Le webdesign mise sur les sites en scroll et « one page »
2...
20
Exemples de sites monopages en scroll
Le webdesign mise sur les sites en scroll et « one page »
2. Le scroll et les sit...
21
Exemple en double-scroll
Le scroll n’est pas seulement vertical :
en biais, horizontal ou même en
double-scroll, les si...
3. Moins de blabla
22
23
Oui et Non !
On essaye d’en dire moins pour ménager
le lecteur et lui donner l’information essentielle
qu’il recherche....
24
On prend exemple sur Apple qui en
dit tout autant que ses concurrents
sur ses produits mais qui sait les
mettre en avan...
25
Le contenu peut être simplifié par la datavisualisation
La datavisualisation ainsi que les
pictogrammes permettent de m...
26
…ou par les pictogrammes
Le dire oui, mais le dire de manière attractive
3. Moins de blabla
Les pictogrammes permettent...
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, ...
4. Place à l’image
28
29
L’image est pleine de sens et attractive.
Cette tendance est pleinement liée à la tendance n°3
« Moins de blabla », dan...
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 « p...
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...
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 graphiq...
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...
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 cliqu...
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 e...
36
La tendance des « blurred images » se développe
La tendance du « blurred design »
est très présente au niveau de ces
gr...
37
Le travail de l’image
L’image prend également
toute son importance
lorsqu’elle est travaillée :
mixée avec de la typo, ...
5. La vidéo comme valeur ajoutée
38
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...
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...
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 sit...
42
Vidéo en pleine page : d’autres exemples
Site de piscines avec vidéo plein écran
pour « plonger » dans l’univers.
Site ...
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 trou...
6. Le flat design
44
45
Skeuo-quoi ? !
Pour ceux qui ne connaissent pas, le skeuomorphisme
(ou « realism ») est un terme définissant un élément...
46
Apple a souvent influencé nos directions artistiques ces
dernières années, notamment avec le skeuomorphisme.
L'année pa...
47
Preuve de l’influence du flat design, Apple a
décidé d’abandonner son skeuomorphisme
pour s’adapter à cette tendance av...
48
Des sites tout en aplat
6. Le flat design
SKEUOMORPHISME VS FLAT DESIGN
49
Bien comprendre la différence entre ‘flat design’ et ‘realism’
Ce site explique visuellement la différence entre ces de...
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://...
51
Variation du flat design : le long shadow design pour donner de la profondeur
Des sites tout en aplat
On voit également...
7. La typographie, star du webdesign
52
53
Finis les standards au niveau de la typographie,
on apercevra de plus en plus des typos
personnalisées, réalisées sur-m...
54
Au grand bonheur des designers, les fonts de
toutes sortes deviennent compatibles avec
les navigateurs. Google Chrome e...
55
La typo, bien plus que des lettres : un rendu visuel plein de sens
Les fonts permettent d’ajouter un côté
plus unique a...
56
La typo, bien plus que des lettres : un rendu visuel plein de sens
Plus de typos personnalisées
7. La typographie, star...
57
La typo, bien plus que des lettres : un rendu visuel plein de sens
La typo apporte plus de dynamisme aux
images avec le...
58
Autres exemples de compositions typographiques :
Plus de typos personnalisées
7. La typographie, star du webdesign
http...
59
Plus de typos personnalisées
7. La typographie, star du webdesign
http://bit.ly/1er05jC
http://bit.ly/MKXI58
60
Plus de typos personnalisées
7. La typographie, star du webdesign
http://bit.ly/1aUJOIP
8. Le webdesign géométrique
61
62
L’utilisation des formes géométriques dans le webdesign
8. Le design géométrique
On remarque encore et toujours
l’utili...
63
L’utilisation des formes géométriques dans le webdesign
http://bit.ly/1m7x1rB
8. Le design géométrique
64
L’utilisation des formes géométriques dans le webdesign
8. Le design géométrique
65
L’utilisation des formes géométriques dans le webdesign
http://bit.ly/1jx716U
8. Le design géométrique
9. Le parallaxe et les sites animés
66
67
Donner une dimension immersive et évènementielle
9. Le parallaxe et les sites animés
Le parallax scrolling a fait une
e...
68
Donner une dimension immersive et évènementielle
9. Le parallaxe et les sites animés
Sur ce site d’Ana Safroncik,
la te...
69
Donner une dimension immersive et évènementielle
9. Le parallaxe et les sites animés
Sur le site de No leath, tous les ...
70
Donner une dimension immersive et évènementielle
9. Le parallaxe et les sites animés
D’autres sites ne s’arrêteront
pas...
71
Donner une dimension immersive et évènementielle
9. Le parallaxe et les sites animés
Ce site de Jack Daniel’s fait déco...
10. La navigation synchronisée
72
73
Une expérience multi-devices
10. La navigation synchronisée
Depuis quelques années déjà,
"Google experiment" arrive
fré...
74
Une expérience multi-devices
Le site d’Adidas – Nitrocharge your game est une
expérience digitale où l’on peut découvri...
75
Sur le site Justareflektor, Arcade Fire propose de
découvrir son nouveau clip en interagissant avec le site
grâce à son...
76
Une expérience multi-devices
Le site Racer consiste à parcourir un circuit
réparti sur plusieurs smartphones et
tablett...
Rendez-vous en 2015 pour faire le point sur
77
nos prédictions et les évolutions futures !
Merci de votre attention
N’hésitez pas à nous contacter
Benelux
Jérémy Coxet
jcoxet@vanksen.com
+352 48 90 90
France
Xavie...
Prochain SlideShare
Chargement dans…5
×

Les 10 Tendances Webdesign pour 2014 by Vanksen

6 076 vues

Publié le

Publié dans : Design
0 commentaire
12 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
6 076
Sur SlideShare
0
Issues des intégrations
0
Intégrations
185
Actions
Partages
0
Téléchargements
0
Commentaires
0
J’aime
12
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Les 10 Tendances Webdesign pour 2014 by Vanksen

  1. 1. 11 Les 10 tendances webdesign de 2014
  2. 2. 2 La créativité est contagieuse, faites-la tourner. Albert Einstein
  3. 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 4
  5. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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
  16. 16. 2. Le scroll et les sites monopages 16
  17. 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. 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. 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. 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. 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
  22. 22. 3. Moins de blabla 22
  23. 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. 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. 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. 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. 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.
  28. 28. 4. Place à l’image 28
  29. 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. 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. 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. 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. 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. 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. 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. 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. 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
  38. 38. 5. La vidéo comme valeur ajoutée 38
  39. 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. 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. 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. 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. 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
  44. 44. 6. Le flat design 44
  45. 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. 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. 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. 48 Des sites tout en aplat 6. Le flat design SKEUOMORPHISME VS FLAT DESIGN
  49. 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. 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. 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
  52. 52. 7. La typographie, star du webdesign 52
  53. 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. 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. 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. 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. 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. 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. 59 Plus de typos personnalisées 7. La typographie, star du webdesign http://bit.ly/1er05jC http://bit.ly/MKXI58
  60. 60. 60 Plus de typos personnalisées 7. La typographie, star du webdesign http://bit.ly/1aUJOIP
  61. 61. 8. Le webdesign géométrique 61
  62. 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.
  63. 63. 63 L’utilisation des formes géométriques dans le webdesign http://bit.ly/1m7x1rB 8. Le design géométrique
  64. 64. 64 L’utilisation des formes géométriques dans le webdesign 8. Le design géométrique
  65. 65. 65 L’utilisation des formes géométriques dans le webdesign http://bit.ly/1jx716U 8. Le design géométrique
  66. 66. 9. Le parallaxe et les sites animés 66
  67. 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. 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. 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. 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. 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.
  72. 72. 10. La navigation synchronisée 72
  73. 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. 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. 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. 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. 77. Rendez-vous en 2015 pour faire le point sur 77 nos prédictions et les évolutions futures !
  78. 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

×