TENDANCE

web design

2

2014
TENDANCE

web design

2014

en 11 points

3
FLAT DESIGN

EXEMPLE

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

FLAT DESIGN VS. R...
TYPOGRAPHIE

EXEMPLE

Expérimenter et pousser
dans ses derniers
retranchement les typos en
jouant sur l’écartement des
let...
MENU DÉROULANT
Le menu est devenu
tellement intuitif avec l'essor
des terminaux mobiles qu'il
n'est plus nécessaire de
l'a...
DÉFILEMENT INFINI
Avec le flux Facebook,
Pinterest, Instagram et les
usages de navigation issus
du mobile, les internautes
...
BACKGROUND VIDEO
Fini les images fixes en fond.
La vidéo permet d’amener
outre du dynamisme, un
discours de marque ou un
st...
RESPONSIVE DESIGN

EXEMPLE

Un français sur deux se
connecte désormais depuis
son mobile selon
Médiamétrie en décembre
201...
COULEUR SIMPLE
2014 est l’année de la
simplification. Faciliter l’accès
à l’information principale en
un minimum de temps e...
ANIMATION AU SCROLL EXEMPLE
Les pages en défilement
infini, la volonté de ne plus
cliquer et le développement
de la techno d...
+ 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. Auj...
INFOGRAPHIE
INTERACTIVE
L’infographie, ce long jpeg
qui délivre des données
statistiques par des
graphiques, camemberts et...
SITE À PAGE UNIQUE
Le premier constat qui n’est
plus à faire est que le scroll
est moins compliqué que le
clic. Le 2nd est...
STORYTELLING
Pour délivrer un message
commercial, de sensibilisation
ou d’image, un site peut
raconter une histoire. Le si...
?

et pour vous... 2014

quelles sont les TENDANCES

parlons-en :

Nineteengroupe

Grégoire Lacoste

Twitter @nineteengrou...
Les 11 tendances du webdesign en 2014
Prochain SlideShare
Chargement dans…5
×

Les 11 tendances du webdesign en 2014

2 324 vues

Publié le

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.

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

Aucun téléchargement
Vues
Nombre de vues
2 324
Sur SlideShare
0
Issues des intégrations
0
Intégrations
29
Actions
Partages
0
Téléchargements
52
Commentaires
0
J’aime
3
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Les 11 tendances du webdesign en 2014

  1. 1. TENDANCE web design 2 2014
  2. 2. TENDANCE web design 2014 en 11 points 3
  3. 3. 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
  4. 4. 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
  5. 5. 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
  6. 6. 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
  7. 7. 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
  8. 8. 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
  9. 9. 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
  10. 10. 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
  11. 11. + 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
  12. 12. 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
  13. 13. 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
  14. 14. 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
  15. 15. ? et pour vous... 2014 quelles sont les TENDANCES parlons-en : Nineteengroupe Grégoire Lacoste Twitter @nineteengroupe Responsable stratégie digitale glacoste@nineteengroupe.fr 16

×