Les 10 Tendances Webdesign pour 2014 by Vanksen

0 %
100 %
Information about Les 10 Tendances Webdesign pour 2014 by Vanksen
Design

Published on March 14, 2014

Author: solangederrey1

Source: slideshare.net

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 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

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 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

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

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 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

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  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 … 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 … 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 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 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 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

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

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. 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 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 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 …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 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.

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 », 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 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 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 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 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 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 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 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 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

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 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 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 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 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 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

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 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 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 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 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 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 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 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

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-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 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 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 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 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 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 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’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 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 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 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 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 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 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.

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é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 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 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 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

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 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

Add a comment

Related presentations

Related pages

Les 10 Tendances Webdesign de 2014

L’équipe création de Vanksen vous livre ses 10 prédictions en termes de tendances webdesign pour l’année 2014. L’année 2014, en matière de ...
Read more

10 Webdesign Trends for 2014 - Vanksen

... for the year 2014. The year 2014, in web design, ... its new study “ 10 Webdesign Trends for 2014 ... Vanksen’s latest studies: Tendances ...
Read more

Les 10 tendances webdesign par Vanksen

Présentation sur les 10 tendances 2014 du Web design à l’occasion d’AgoraCMS le 24/04/2014. ... Tango fait appel à Vanksen pour la mise en...
Read more

Culture RP » Les 10 Tendances Webdesign de 2014

... interne de l’agence Vanksen sur les 10 tendances du web design en ... de 2014 pour le webdesign? L’agence Vanksen éclaire nos lanternes ...
Read more

WDT15 - obsedo

10 tendances web design // flat design // graphique // photogÉnique //minimal // gÉomÉtrique // grille // dynamique // material // couleur // fluide ...
Read more

Quel avenir pour le Web Design en 2014 ? Top 10 des tendances

... répertoriant les 10 tendances les plus fortes du Web Design pour 2014 : ... Les 10 Tendances Webdesign de 2014 by Vanksen from Vanksen . Articles;
Read more