Du flat design au responsive en passant par les sites mono-page, ce slideshare de l'agence Nineteengroupe retrace les 11 tendances du webdesign en 2014.

2. TENDANCE
web design
2
2014

3. TENDANCE
web design
2014
en 11 points
3

4. FLAT DESIGN
EXEMPLE
Se débarrasser des effets de
profondeur, éviter le superflu,
fini le skeumorphisme.
FLAT DESIGN VS. REALISM
Un site pour apprendre la différence entre le flat et le
skeumorphisme (design réaliste).
Il se caractérise par des
aplats de couleurs sobres.
Il s’agit d’un style
minimaliste.
http://www.flatvsrealism.com/
4

5. TYPOGRAPHIE
EXEMPLE
Expérimenter et pousser
dans ses derniers
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.
BABDUM
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.
http://babadum.com/
5

6. MENU DÉROULANT
Le menu est devenu
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.
EXEMPLE
SOMOS DEDO
Site d’agence en navigation horizontale pourvu d’un menu
déroulant inspiré des menus de sites mobile.
http://www.somosdedo.com/
Plus complet qu’un menu
classique, le menu déroulant
apporte une plus grande
clarté quant à la structure
d’un site, pour que
l’internaute s’y retrouve plus
simplement.
6

7. DÉFILEMENT INFINI
Avec le flux Facebook,
Pinterest, Instagram et les
usages de navigation issus
du mobile, les internautes
ont maintenant plus
l’habitude de scroller que de
cliquer pour consulter du
contenu.
EXEMPLE
GET STRIKR
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.
http://www.getstrikr.com/
Les sites doivent permettre
l’accès aux contenus
seulement en scrollant.
7

8. BACKGROUND VIDEO
Fini les images fixes en fond.
La vidéo permet d’amener
outre du dynamisme, un
discours de marque ou un
storytelling propice à la
diffusion d’un message plus
précis.
La techno HTML5, la
compression des vidéos et la
généralisation du haut débit
sur tous les devices
permettent désormais
d’utiliser la vidéo partout où
c’est nécessaire.
EXEMPLE
Firestorm
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.
bit.ly/1bix0J3
8

9. RESPONSIVE DESIGN
EXEMPLE
Un français sur deux se
connecte désormais depuis
son mobile selon
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 utilisé pour le
consulter. C’est le propre du
responsive design.
HUGE INC
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.
http://www.hugeinc.com/
Desktop
Mobile
9

10. COULEUR SIMPLE
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.
EXEMPLE
SYDNEY STOCKHOLM
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.
http://www.sydneystockholm.com.au/
Adieu les dégradés de bleu...
privilégiez les classiques.
10

11. ANIMATION AU SCROLL EXEMPLE
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.
COMPUTING HISTORY
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.
http://www.akita.co.uk/computing-history/
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
animations permettent
d'aiguiller l’oeil du visiteur
sur les informations
primordiales à délivrer.
11

12. + DE VIDÉOS
La tendance au zapping des
internautes ne faiblit pas en
2 0 1 4 , a u c o n t r a i re e l l e
s’accroit. Aujourd’hui le
contenu doit être plus
attrayant que jamais et le
texte ou les photos ne
suffisent plus.
EXEMPLE
GOOGLE GLASS
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...
https://glass.eleks.com/
La meilleure solution pour
délivrer un message devient
alors la micro-vidéo.
Avec l’apparition de Vine les
internautes veulent
consommer des vidéos
courtes. Un site doit répondre
à ces attentes pour délivrer
son message.
12

13. INFOGRAPHIE
INTERACTIVE
L’infographie, ce long jpeg
qui délivre des données
statistiques par des
graphiques, camemberts et
autres diagrammes est une
tendance déjà présente
depuis plusieurs années sur
le web.
EXEMPLE
L’ÉVOLUTION DU WEB
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.
http://www.evolutionoftheweb.com/
En 2014, l’infographie n’est
plus un simple jpeg mais un
site complet, avec lequel on
peut interagir sur les
données pour en savoir plus.
13

14. SITE À PAGE UNIQUE
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.
EXEMPLE
MY DIRTY DESK
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.
http://www.mydirtydesk.com/
Généralement le site à page
unique propose une barre de
navigation classique ou une
timeline cliquable permettant
au visiteur d’accéder
immédiatement au contenu
désiré via un système
d’ancre.
14

15. STORYTELLING
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.
EXEMPLE
THE WALKING DEAD
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.
http://www.cabletv.com/the-walking-dead
Situation initiale, élément
d é c l e n c h e u r, p é r i p é t i e s ,
résolution et fin, on verra en
2014 apparaitre des sites de
marque ou de produit
proposant tous les éléments
constitutifs d’une «brand
adventure».
15

16. ?
et pour vous... 2014
quelles sont les TENDANCES
parlons-en :
Nineteengroupe
Grégoire Lacoste
Twitter @nineteengroupe
Responsable stratégie digitale
glacoste@nineteengroupe.fr
16