1

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
BL...
4

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

MOBILE = MULTIPLICITÉ DES ÉCRANS
Néces...
1. La mobilité change tout
L’année 2014 est marquée par l’influence de la mobilité

MOBILITÉ = UNE INFLUENCE GLOBALE
Il ne...
1. La mobilité change tout
L’année 2014 est marquée par l’influence de la mobilité

MOBILITÉ = LES CHANGEMENTS
 Des solut...
1. La mobilité change tout

11

L’année 2014 est marquée par l’influence de la mobilité

Développement des sites en respon...
1. La mobilité change tout
L’année 2014 est marquée par l’influence de la mobilité

Du contenu beaucoup plus visuel …
… po...
1. La mobilité change tout
L’année 2014 est marquée par l’influence de la mobilité

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

Le mobile influence les sites sur desk...
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 repen...
16

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

LE SCROLL
Toujours influenc...
2. Le scroll et les sites monopages
Le webdesign mise sur les sites en scroll et « one page »

LE SCROLL
Ne pas oublier ce...
2. Le scroll et les sites monopages
Le webdesign mise sur les sites en scroll et « one page »

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

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

Exemple en double-scroll

L...
22

3. Moins de blabla
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...
3. Moins de blabla

24

Le dire oui, mais le dire de manière attractive

EN 2014, MOINS DE BLABLA !
On prend exemple sur A...
3. Moins de blabla

25

Le dire oui, mais le dire de manière attractive

Le contenu peut être simplifié par la datavisuali...
3. Moins de blabla

26

Le dire oui, mais le dire de manière attractive

…ou par les pictogrammes
Les pictogrammes permett...
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, An...
28

4. Place à l’image
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 t...
4. Place à l’image

30

Le dire en image !

De plus en plus de sites avec un background en image
Le webdesign 2014 sera so...
4. Place à l’image
Le dire en image !

De plus en plus de sites avec un background en image

http://bit.ly/1okfVFr

http:/...
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 p...
4. Place à l’image
Le dire en image !

De plus en plus de sites avec une large image en background

Le site de Sagmeister ...
4. Place à l’image
Le dire en image !

De plus en plus de sites avec une large image en background

Le menu est ici cliqua...
4. Place à l’image
Le dire en image !

De plus en plus de sites avec une large image en background

Le site de Winshape es...
4. Place à l’image

36

Le dire en image !

La tendance des « blurred images » se développe
La tendance du « blurred desig...
4. Place à l’image

37

Le dire en image !

Le travail de l’image
L’image prend également
toute son importance
lorsqu’elle...
38

5. La vidéo comme valeur ajoutée
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...
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...
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 d...
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

...
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èteme...
44

6. Le flat design
6. Le flat design

45

Des sites tout en aplat

LE SKEUOMORPHISME EST DÉJÀ LOIN
Skeuo-quoi ? !
Pour ceux qui ne connaissen...
6. Le flat design

46

Des sites tout en aplat

PLACE AU FLAT DESIGN, ENCORE EN 2014
Apple a souvent influencé nos directi...
6. Le flat design

47

Des sites tout en aplat

PLACE AU FLAT DESIGN, ENCORE EN 2014
iOS6

iOS7

Preuve de l’influence du ...
6. Le flat design
Des sites tout en aplat

SKEUOMORPHISME VS FLAT DESIGN

48
6. Le flat design
Des sites tout en aplat

Bien comprendre la différence entre ‘flat design’ et ‘realism’

Ce site expliqu...
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

ht...
6. Le flat design
Des sites tout en aplat

Variation du flat design : le long shadow design pour donner de la profondeur
O...
52

7. La typographie, star du webdesign
7. La typographie, star du webdesign
Plus de typos personnalisées

LA TYPO, PLUS QUE DES LETTRES
Finis les standards au ni...
7. La typographie, star du webdesign
Plus de typos personnalisées

LA TYPO, PLUS QUE DES LETTRES
Au grand bonheur des desi...
7. La typographie, star du webdesign
Plus de typos personnalisées

La typo, bien plus que des lettres : un rendu visuel pl...
7. La typographie, star du webdesign
Plus de typos personnalisées

La typo, bien plus que des lettres : un rendu visuel pl...
7. La typographie, star du webdesign
Plus de typos personnalisées

La typo, bien plus que des lettres : un rendu visuel pl...
7. La typographie, star du webdesign
Plus de typos personnalisées

Autres exemples de compositions typographiques :

http:...
7. La typographie, star du webdesign

59

Plus de typos personnalisées

http://bit.ly/MKXI58

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

http://bit.ly/1aUJOIP

60
61

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

On remarque
encore et toujours
l’utilisa...
8. Le design géométrique
L’utilisation des formes géométriques dans le webdesign

http://bit.ly/1m7x1rB

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

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

http://bit.ly/1jx716U

65
66

9. Le parallaxe et les sites animés
9. Le parallaxe et les sites animés
Donner une dimension immersive et évènementielle
Le parallax scrolling a fait une
entr...
9. Le parallaxe et les sites animés

68

Donner une dimension immersive et évènementielle

Sur ce site d’Ana Safroncik,
la...
9. Le parallaxe et les sites animés
Donner une dimension immersive et évènementielle
Sur le site de No leath, tous les pro...
9. Le parallaxe et les sites animés
Donner une dimension immersive et évènementielle

D’autres sites ne s’arrêteront
pas a...
9. Le parallaxe et les sites animés
Donner une dimension immersive et évènementielle

Ce site de Jack Daniel’s fait découv...
72

10. La navigation synchronisée
10. La navigation synchronisée
Une expérience multi-devices

Depuis quelques années déjà,
"Google experiment" arrive
fréqu...
10. La navigation synchronisée
Une expérience multi-devices

Le site d’Adidas – Nitrocharge your game est une
expérience d...
10. La navigation synchronisée
Une expérience multi-devices

Sur le site Justareflektor, Arcade Fire propose de
découvrir ...
10. La navigation synchronisée
Une expérience multi-devices

Le site Racer consiste à parcourir un circuit
réparti sur plu...
77

Rendez-vous en 2015 pour faire le point sur

nos prédictions et les évolutions futures !
Merci de votre attention
N’hésitez pas à nous contacter
Jean-Marc Liacy et son équipe
Artistic Director
jmliacy@vanksen.co...
Upcoming SlideShare
Loading in...5
×

Les 10 Tendances Webdesign de 2014 by Vanksen

112,926

Published on

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

Published in: Design
15 Comments
268 Likes
Statistics
Notes
No Downloads
Views
Total Views
112,926
On Slideshare
0
From Embeds
0
Number of Embeds
148
Actions
Shares
0
Downloads
0
Comments
15
Likes
268
Embeds 0
No embeds

No notes for slide

Transcript of "Les 10 Tendances Webdesign de 2014 by Vanksen"

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

×