TENDANCE

2

web design2014

TENDANCE

3

web design2014

en 11 points

4

Se débarrasser des effets de profondeur, éviter le superflu, fini le skeumorphisme.

Il se caractérise par des aplats de couleurs sobres.

I l s ’ a g i t d ’ u n s t y l e minimaliste.

FLAT DESIGN

http://www.flatvsrealism.com/

FLAT DESIGN VS. REALISM

EXEMPLE

Un site pour apprendre la différence entre le flat et le skeumorphisme (design réaliste).

5

Expérimenter et pousser d a n s s e s d e r n i e r s retranchement les typos en jouant sur l’écartement des lettres, les tailles des polices, la variétés des formes...

Elles créent le dynamisme et la personnalité d’un site sobre en permettant la hiérarchisation des contenus.

TYPOGRAPHIE

http://babadum.com/

BABDUM

EXEMPLE

Apprendre une langue en s’amusant. Ce site trouve sa personnalité et son originalité dans le traitement des typos qui contraste avec le design simple des arrières-plans et éléments graphiques.

6

L e m e n u e s t d e v e n u tellement intuitif avec l'essor des terminaux mobiles qu'il n'est plus nécessaire de l'afficher.Le gain de place de ce type de menu sert à ne pas "polluer" le message visuel.

Plus complet qu’un menu classique, le menu déroulant apporte une plus grande clarté quant à la structure d ’ u n s i t e , p o u r q u e l’internaute s’y retrouve plus simplement.

MENU DÉROULANT

http://www.somosdedo.com/

SOMOS DEDO

EXEMPLE

Site d’agence en navigation horizontale pourvu d’un menu déroulant inspiré des menus de sites mobile.

7

Avec le flux Facebook, Pinterest, Instagram et les usages de navigation issus du mobile, les internautes o n t m a i n t e n a n t p l u s l’habitude de scroller que de cliquer pour consulter du contenu.

Les sites doivent permettre l ’ a c c è s a u x c o n t e n u s seulement en scrollant.

DÉFILEMENT INFINI

http://www.getstrikr.com/

GET STRIKR

EXEMPLE

Site de la bière Carlsberg avec scrolling infini, vidéo background, effet de parallaxe et animation au scroll. Il retrace les événements qui se sont déroulés sur Twitter pendant la diff d’un match de foot pour promouvoir l’app foot de la marque.

8

Fini les images fixes en fond. La vidéo permet d’amener outre du dynamisme, un discours de marque ou un storytell ing propice à la diffusion d’un message plus précis.

L a t e c h n o H T M L 5 , l a compression des vidéos et la généralisation du haut débit s u r t o u s l e s d e v i c e s p e r m e t t e n t d é s o r m a i s d’utiliser la vidéo partout où c’est nécessaire.

BACKGROUND VIDEO

bit.ly/1bix0J3

Firestorm

EXEMPLE

Un web-reportage autour d’une catastrophe naturelle. Un site en scroll vertical. Un témoignage poignant réalisé grâce une succession de vidéos.

9

Un français sur deux se connecte désormais depuis s o n m o b i l e s e l o n Médiamétrie en décembre 2013.

On ne peut plus oublier les devices mobiles lorsqu’on conçoit un site web. Celui-ci doit alors s’adapter au support ut i l i sé pour le consulter. C’est le propre du responsive design.

RESPONSIVE DESIGN

http://www.hugeinc.com/

HUGE INC

EXEMPLE

Un design adaptatif à tous les supports. Les encarts se redimensionnent et se placent automatiquement les uns en dessous des autres en fonction de la taille des écrans.

Desktop

Mobile

10

2014 est l’année de la simplification. Faciliter l’accès à l’information principale en un minimum de temps est le nouvel enjeu du web.

Moins il y a d’éléments qui distraient l’internaute, mieux c’est. Les couleurs en font partie, moins il y en a, plus elles sont communes, mieux c’est.

Adieu les dégradés de bleu... privilégiez les classiques.

COULEUR SIMPLE

http://www.sydneystockholm.com.au/

SYDNEY STOCKHOLM

EXEMPLE

Une agence qui a un message principal à faire passer en un minimum de temps. Elle emploie alors une home vide construite autour d’un fond d’une couleur primaire et d’un texte en blanc. Résultat : on ne voit que le message.

11

Les pages en défilement infini, la volonté de ne plus cliquer et le développement de la techno du parallaxe permettent maintenant de créer des animations sans recourir à une action de l’internaute.

Avec les animations activées au scroll, l’internaute peut créer des interactions avec un site sans rien faire d’autre q u e n a v i g u e r . C e s an ima t i ons pe rme t t en t d'aiguiller l’oeil du visiteur s u r l e s i n f o r m a t i o n s primordiales à délivrer.

ANIMATION AU SCROLL

http://www.akita.co.uk/computing-history/

COMPUTING HISTORY

EXEMPLE

Un voyage dans le temps autour de l’histoire des ordinateurs en une seule page en scrolling infini. Des éléments narratifs qui apparaissent au scroll et une direction artistique épurée pour ne privilégier que l’histoire à raconter.

12

La tendance au zapping des internautes ne faiblit pas en 2014, au contra i re e l le s’accroit. Aujourd’hui le con tenu do i t ê t re p lus attrayant que jamais et le texte ou les photos ne suffisent plus.

La meilleure solution pour délivrer un message devient alors la micro-vidéo.

Avec l’apparition de Vine les i n t e r n a u t e s v e u l e n t consommer des v idéos courtes. Un site doit répondre à ces attentes pour délivrer son message.

+ DE VIDÉOS

https://glass.eleks.com/

GOOGLE GLASS

EXEMPLE

Les google glass, une innovation encore méconnue dans son usage. La marque doit faire preuve de pédagogie pour entrer ce produit dans le quotidien des gens et créer le besoin. La vidéo, courte en background full screen, aide à cela...

13

L’infographie, ce long jpeg qui délivre des données s t a t i s t i q u e s p a r d e s graphiques, camemberts et autres diagrammes est une tendance déjà présente depuis plusieurs années sur le web.

En 2014, l’infographie n’est plus un simple jpeg mais un site complet, avec lequel on p e u t i n t e r a g i r s u r l e s données pour en savoir plus.

INFOGRAPHIE INTERACTIVE

http://www.evolutionoftheweb.com/

L’ÉVOLUTION DU WEB

EXEMPLE

Un site consacré à l’évolution du web, de ses technos et navigateurs en une timeline. L’internaute pourra actionner divers hotspot pour faire apparaitre du contenu complémentaire.

14

Le premier constat qui n’est plus à faire est que le scroll est moins compliqué que le clic. Le 2nd est qu’une longue page est un atout majeur pour simplifier la navigation. Les sites à page unique voient alors le jour. Leur atout : ils chargent l’ensemble du contenu en une seule fois.

Généralement le site à page unique propose une barre de navigation classique ou une timeline cliquable permettant a u v i s i t e u r d ’ a c c é d e r immédiatement au contenu dés i r é v i a un s ys t ème d’ancre.

SITE À PAGE UNIQUE

http://www.mydirtydesk.com/

MY DIRTY DESK

EXEMPLE

Site portfolio d’un web designer. Nul besoin d’une multitude de pages pour montrer son travail. Une seule longue en scrolling vertical est suffisante.

15

Pour délivrer un message commercial, de sensibilisation ou d’image, un site peut raconter une histoire. Le site est alors construit, dans son arborescence comme dans son expérience de navigation, autour d’un schéma narratif classique emprunté au récit.

Situation initiale, élément déclencheur, pér ipét ies, résolution et fin, on verra en 2014 apparaitre des sites de m a rq u e o u d e p ro d u i t proposant tous les éléments constitutifs d’une «brand adventure».

STORYTELLING

http://www.cabletv.com/the-walking-dead

THE WALKING DEAD

EXEMPLE

Une page unique, une navigation au scroll avec animation et parallaxe, un mouvement horizontal de la caméra pour raconter une histoire de manière interactive autour de la série. Un site proche du jeu et de la BD interactive.

TENDANCES

16

2014quelles sont leset pour vous... ?

parlons-en : Grégoire LacosteResponsable stratégie digitaleglacoste@nineteengroupe.fr

NineteengroupeTwitter @nineteengroupe