SlideShare une entreprise Scribd logo
1  sur  27
Télécharger pour lire hors ligne
Les tendances

du web design
Mercredi 11 février – Centre de Culture Numérique – Strasweb
Hiwelo ! C’est qui ?
Damien Senger

Webdesigner fonctionnel

en freelance
Type-nerd!
@damiensenger

hi@hiwelo.co
c’est moi ! ;)
Un premier combat :

Technique vs. graphique
Côté technique, tl;dr
• Smartphones, tablettes, smartwatches, consoles de jeu, télévisions,
réfrigérateurs, …

➜ nécessité d’un design adaptatif
• Adaptation de la forme du site au contexte

➜ responsive web design
• Adaptation de la forme et du contenu au contexte

➜ adaptive web design
Merci à @WalterStephanie pour l’infographie !
1.

Le flat design et ses enfants
Le flat design, déjà.
• Toujours plus plat et minimal.
• Designs colorés et frais.
• Il s’impose du site web jusqu’à l’interface physique.
• On arrête d’imiter la réalité,

on se focalise sur les usages.
• Mise en avant de la typographie et des contenus textuels ou images.
– Flat design
« Less is more. »
Le material design
• Axé principalement applicatif mobile et desktop.
• Des couleurs également vives et fraîches, mais plus saturées.
• Un retour des ombrages, pour marquer la perspective.
• Des interactions plus fortes : menus cachés, micro-interactions, etc.
• Mise en avant d’icônes simples et optimisées à tous les usages.
– Material Design
« La Google touch! »
De grandes images, très grandes !
• Mêlées à la typographie, c’est le retour de grandes images.
• Là où le web perd en originalité, il gagne souvent en qualité visuelle.
• Une part plus importante laissée à l’immersion 

dans l’univers offscreen d’un produit, d’une société, etc.
« Cheese! »
Le minimal design
• L’essentiel, et rien d’autre.
« Fromage. »
– le minimal design
Le flat peut-il être artistique ?
• La réponse est oui.
• Le flat a réintroduit la géométrie comme un élément de jeu artistique.
• On y trouve souvent, sous forme d’infographie, des choses originales.
• C’est l’avènement des icônes et des petits éléments créatifs d’interaction.
« Kandinsky, le retour. »
– le geometric design
Les grilles dynamiques
• Le web en mode pinterest.
• Permet un nouveau mode de navigation :

une vue différente des éléments dans le temps,

une plus grande part laissée à la découverte.
• Permet également une meilleure articulation des contenus entre eux.
• L’idée de construire les contenus briques par briques.
« Les mecs, on a besoin d’un maçon là… »
Flat design vs. skeuomorphisme :

un conflit dépassé depuis bien longtemps
Le mix « skeuomorflat »
• Un peu de flat, et un peu de réalisme.

Un cocktail plutôt agréable !
• ollysorsby.co.uk
• bagigia.com
• www.downgraf.com
Le rétro design
• Mêler les codes graphiques du rétro, aux interactions du web actuel :
• http://www.agence-belle-epoque.fr/
• http://www.rftbmeatco.com/
• http://www.goglazed.com/
Enfin, il existe également des
variantes de construction
Les sites « one page »
• Permet de laisser une plus grande place au storytelling.
• Permet d’afficher un maximum d’informations sur un sujet unique au
sein d’une même page, avec une articulation par bloc.
• Ce sont des sites optimisés pour la navigation tactile généralement.
• http://www.dreamingwithjeff.com/
• http://2015.extralagence.com/
Les navigations alternatives
• Les technologies web permettent aujourd’hui plus de créativité

grâce à des navigations atypiques ou alternatives.
• http://www.thielfellowship.org/
• http://redhilllavender.com.au/
• http://www.fiveminutes.gs/
Le scroll horizontal
• Pour changer du traditionnel scroll vertical, 

de plus en plus de sites choisissent de mettre en place une navigation
horizontale laissant plus de place aux frises ou récits ancrés 

dans le temps.
• http://omnisense.net/
• http://www.digibrand.lv/
• http://lesberges.paris.fr/en/explore/
Bon, maintenant …

À vous !
Voilà, c’est fini !

Merci de votre a ention :)
Si vous avez des questions, des remarques, des avis ou quoique ce soit :
@damiensenger

(et surtout n’hésitez pas !)

et sinon : hi@hiwelo.co

Contenu connexe

Tendances

Tendances (20)

2016 Création Refonte Site
2016 Création Refonte Site2016 Création Refonte Site
2016 Création Refonte Site
 
Le monde de Google, SEO et outils de productivité
Le monde de Google, SEO et outils de productivitéLe monde de Google, SEO et outils de productivité
Le monde de Google, SEO et outils de productivité
 
Rédaction web et référencement naturel - la Licence Pro de Mulhouse
Rédaction web et référencement naturel - la Licence Pro de MulhouseRédaction web et référencement naturel - la Licence Pro de Mulhouse
Rédaction web et référencement naturel - la Licence Pro de Mulhouse
 
Qu'est-ce qu'un bon site web touristique - conférence
Qu'est-ce qu'un bon site web touristique - conférenceQu'est-ce qu'un bon site web touristique - conférence
Qu'est-ce qu'un bon site web touristique - conférence
 
Siteweb Mini
Siteweb MiniSiteweb Mini
Siteweb Mini
 
Etourisme : être présent efficacement sur le web
Etourisme : être présent efficacement sur le webEtourisme : être présent efficacement sur le web
Etourisme : être présent efficacement sur le web
 
Accessibilité sur le web : astuces et bonnes pratiques pour des sites accessi...
Accessibilité sur le web : astuces et bonnes pratiques pour des sites accessi...Accessibilité sur le web : astuces et bonnes pratiques pour des sites accessi...
Accessibilité sur le web : astuces et bonnes pratiques pour des sites accessi...
 
PERSONAL BRANDING : 5 ETAPES POUR CONSTRUIRE ET MAÎTRISER VOTRE PRÉSENCE DIGI...
PERSONAL BRANDING : 5 ETAPES POUR CONSTRUIRE ET MAÎTRISER VOTRE PRÉSENCE DIGI...PERSONAL BRANDING : 5 ETAPES POUR CONSTRUIRE ET MAÎTRISER VOTRE PRÉSENCE DIGI...
PERSONAL BRANDING : 5 ETAPES POUR CONSTRUIRE ET MAÎTRISER VOTRE PRÉSENCE DIGI...
 
A4 otamp enrichir_site_web
A4 otamp enrichir_site_webA4 otamp enrichir_site_web
A4 otamp enrichir_site_web
 
Critique du site Kazari
Critique du site KazariCritique du site Kazari
Critique du site Kazari
 
Module de sensibilisation : médias sociaux et sites d'avis
Module de sensibilisation : médias sociaux et sites d'avisModule de sensibilisation : médias sociaux et sites d'avis
Module de sensibilisation : médias sociaux et sites d'avis
 
Atelier Numérique les bases d'un bon référencement-office de tourismet-val de...
Atelier Numérique les bases d'un bon référencement-office de tourismet-val de...Atelier Numérique les bases d'un bon référencement-office de tourismet-val de...
Atelier Numérique les bases d'un bon référencement-office de tourismet-val de...
 
Internet en entreprise - octobre 2012
Internet en entreprise - octobre 2012Internet en entreprise - octobre 2012
Internet en entreprise - octobre 2012
 
Atelier numérique Creation d'un site-interne sous Jimdo-office de tourisme-sa...
Atelier numérique Creation d'un site-interne sous Jimdo-office de tourisme-sa...Atelier numérique Creation d'un site-interne sous Jimdo-office de tourisme-sa...
Atelier numérique Creation d'un site-interne sous Jimdo-office de tourisme-sa...
 
Le Contenu, pilier principal du Référencement Naturel
Le Contenu, pilier principal du Référencement NaturelLe Contenu, pilier principal du Référencement Naturel
Le Contenu, pilier principal du Référencement Naturel
 
Création de son site Internet
Création de son site InternetCréation de son site Internet
Création de son site Internet
 
Le graphisme d'un site internet !
Le graphisme d'un site internet !Le graphisme d'un site internet !
Le graphisme d'un site internet !
 
Le web marketing ou comment bien communiquer sur la toile
Le web marketing ou comment bien communiquer sur la toileLe web marketing ou comment bien communiquer sur la toile
Le web marketing ou comment bien communiquer sur la toile
 
Créer son site internet en 3 étapes
Créer son site internet en 3 étapesCréer son site internet en 3 étapes
Créer son site internet en 3 étapes
 
Atelier Numérique - Créer son site web avec Jimdo - 2016
Atelier Numérique - Créer son site web avec Jimdo  - 2016Atelier Numérique - Créer son site web avec Jimdo  - 2016
Atelier Numérique - Créer son site web avec Jimdo - 2016
 

En vedette

En vedette (11)

Typographie pour le Web
Typographie pour le WebTypographie pour le Web
Typographie pour le Web
 
Architecture de site web
Architecture de site webArchitecture de site web
Architecture de site web
 
Audit de site web
Audit de site webAudit de site web
Audit de site web
 
Chriffres sur l'utilistation du numérique - CCI Alsace
Chriffres sur l'utilistation du numérique - CCI AlsaceChriffres sur l'utilistation du numérique - CCI Alsace
Chriffres sur l'utilistation du numérique - CCI Alsace
 
060 arborescence
060   arborescence060   arborescence
060 arborescence
 
Initiation au CSS
Initiation au CSSInitiation au CSS
Initiation au CSS
 
JavaScript
JavaScriptJavaScript
JavaScript
 
La gestion de projet internet en 10 slides (+bonus)
La gestion de projet internet en 10 slides (+bonus)La gestion de projet internet en 10 slides (+bonus)
La gestion de projet internet en 10 slides (+bonus)
 
Ergonomie web : Les étapes pour la création d'un site web
Ergonomie web : Les étapes pour la création d'un site webErgonomie web : Les étapes pour la création d'un site web
Ergonomie web : Les étapes pour la création d'un site web
 
Les 4 phases du management de projet
Les 4 phases du management de projetLes 4 phases du management de projet
Les 4 phases du management de projet
 
La gestion de projet web en 15 étapes
La gestion de projet web en 15 étapesLa gestion de projet web en 15 étapes
La gestion de projet web en 15 étapes
 

Similaire à Les tendances du webdesign

Connectez-vous !
Connectez-vous !Connectez-vous !
Connectez-vous !
Ulrich Fischer
 
AubeLebelBOOK FRENCHTECH
AubeLebelBOOK FRENCHTECHAubeLebelBOOK FRENCHTECH
AubeLebelBOOK FRENCHTECH
Aube Lebel
 
Médiation Numérique Montpellier
Médiation Numérique MontpellierMédiation Numérique Montpellier
Médiation Numérique Montpellier
Laurent Magnac
 

Similaire à Les tendances du webdesign (20)

Les réseaux sociaux en BM/BU/MD : maîtriser leurs langages et leurs codes 2/3
Les réseaux sociaux en BM/BU/MD : maîtriser leurs langages et leurs codes 2/3Les réseaux sociaux en BM/BU/MD : maîtriser leurs langages et leurs codes 2/3
Les réseaux sociaux en BM/BU/MD : maîtriser leurs langages et leurs codes 2/3
 
Les réseaux sociaux en bibliothèques : maîtriser leurs langages et leurs code...
Les réseaux sociaux en bibliothèques : maîtriser leurs langages et leurs code...Les réseaux sociaux en bibliothèques : maîtriser leurs langages et leurs code...
Les réseaux sociaux en bibliothèques : maîtriser leurs langages et leurs code...
 
Les réseaux sociaux en BM/BU : maîtriser leurs langages et leurs codes 2/3
Les réseaux sociaux en BM/BU : maîtriser leurs langages et leurs codes 2/3Les réseaux sociaux en BM/BU : maîtriser leurs langages et leurs codes 2/3
Les réseaux sociaux en BM/BU : maîtriser leurs langages et leurs codes 2/3
 
Les réseaux sociaux en BM/BU : maîtriser leurs langages et leurs codes 2/3
Les réseaux sociaux en BM/BU : maîtriser leurs langages et leurs codes 2/3Les réseaux sociaux en BM/BU : maîtriser leurs langages et leurs codes 2/3
Les réseaux sociaux en BM/BU : maîtriser leurs langages et leurs codes 2/3
 
Les réseaux sociaux en bibliothèques : maîtriser leurs langages et leurs code...
Les réseaux sociaux en bibliothèques : maîtriser leurs langages et leurs code...Les réseaux sociaux en bibliothèques : maîtriser leurs langages et leurs code...
Les réseaux sociaux en bibliothèques : maîtriser leurs langages et leurs code...
 
Les réseaux sociaux en BM/BU : maîtriser leurs langages et leurs codes 2/3
Les réseaux sociaux en BM/BU : maîtriser leurs langages et leurs codes 2/3Les réseaux sociaux en BM/BU : maîtriser leurs langages et leurs codes 2/3
Les réseaux sociaux en BM/BU : maîtriser leurs langages et leurs codes 2/3
 
Design Windows 8: Retours d'expérience
Design Windows 8: Retours d'expérienceDesign Windows 8: Retours d'expérience
Design Windows 8: Retours d'expérience
 
Vitrine virtuelle
Vitrine virtuelleVitrine virtuelle
Vitrine virtuelle
 
« Design » n'est pas un gros mot
« Design » n'est pas un gros mot« Design » n'est pas un gros mot
« Design » n'est pas un gros mot
 
Maitriser les codes du web design
Maitriser les codes du web designMaitriser les codes du web design
Maitriser les codes du web design
 
Les réseaux sociaux en bibliothèques : maîtriser leurs langages et leurs code...
Les réseaux sociaux en bibliothèques : maîtriser leurs langages et leurs code...Les réseaux sociaux en bibliothèques : maîtriser leurs langages et leurs code...
Les réseaux sociaux en bibliothèques : maîtriser leurs langages et leurs code...
 
Prospective du livre papier connecté et interactif
Prospective du livre papier connecté et interactifProspective du livre papier connecté et interactif
Prospective du livre papier connecté et interactif
 
2015 cours-projet web-infonum-part2
2015 cours-projet web-infonum-part22015 cours-projet web-infonum-part2
2015 cours-projet web-infonum-part2
 
Connectez-vous !
Connectez-vous !Connectez-vous !
Connectez-vous !
 
Tendance webdesign 2016
Tendance webdesign 2016Tendance webdesign 2016
Tendance webdesign 2016
 
Book graphisme Benjamin Tournay
Book graphisme Benjamin Tournay Book graphisme Benjamin Tournay
Book graphisme Benjamin Tournay
 
Tendances 2021
Tendances 2021Tendances 2021
Tendances 2021
 
AubeLebelBOOK FRENCHTECH
AubeLebelBOOK FRENCHTECHAubeLebelBOOK FRENCHTECH
AubeLebelBOOK FRENCHTECH
 
Design Trends
Design TrendsDesign Trends
Design Trends
 
Médiation Numérique Montpellier
Médiation Numérique MontpellierMédiation Numérique Montpellier
Médiation Numérique Montpellier
 

Plus de StrasWeb

Wikipédia pour les étudiants
Wikipédia pour les étudiantsWikipédia pour les étudiants
Wikipédia pour les étudiants
StrasWeb
 
Initiation à SPIP
Initiation à SPIPInitiation à SPIP
Initiation à SPIP
StrasWeb
 

Plus de StrasWeb (20)

Initiation au référencement
 Initiation au référencement Initiation au référencement
Initiation au référencement
 
Construire et prototyper rapidement un concept d’application mobile
 Construire et prototyper rapidement un concept d’application mobile Construire et prototyper rapidement un concept d’application mobile
Construire et prototyper rapidement un concept d’application mobile
 
Les MOOC, apprendre autrement grâce à Internet
 Les MOOC, apprendre autrement grâce à Internet Les MOOC, apprendre autrement grâce à Internet
Les MOOC, apprendre autrement grâce à Internet
 
Écriture collaborative : est-on plus intelligents à plusieurs ?
Écriture collaborative : est-on plus intelligents à plusieurs ?Écriture collaborative : est-on plus intelligents à plusieurs ?
Écriture collaborative : est-on plus intelligents à plusieurs ?
 
Wikipédia pour les étudiants
Wikipédia pour les étudiantsWikipédia pour les étudiants
Wikipédia pour les étudiants
 
E-marketing pour les débutants
E-marketing pour les débutantsE-marketing pour les débutants
E-marketing pour les débutants
 
Utiliser les réseaux sociaux pour communiquer
 Utiliser les réseaux sociaux pour communiquer Utiliser les réseaux sociaux pour communiquer
Utiliser les réseaux sociaux pour communiquer
 
Licences libres : utopie ou modèle économique ?
 Licences libres : utopie ou modèle économique ? Licences libres : utopie ou modèle économique ?
Licences libres : utopie ou modèle économique ?
 
Le web, c’est 99 % de typographie.
Le web, c’est 99 % de typographie.Le web, c’est 99 % de typographie.
Le web, c’est 99 % de typographie.
 
Jquery - introduction au langage
Jquery - introduction au langageJquery - introduction au langage
Jquery - introduction au langage
 
L'auto hébergement
L'auto hébergementL'auto hébergement
L'auto hébergement
 
Initiation au php
Initiation au phpInitiation au php
Initiation au php
 
Naviguer en sécurité
Naviguer en sécuritéNaviguer en sécurité
Naviguer en sécurité
 
Introduction aux principes du Responsive Web Design
 Introduction aux principes du Responsive Web Design Introduction aux principes du Responsive Web Design
Introduction aux principes du Responsive Web Design
 
Héberger son site web
Héberger son site webHéberger son site web
Héberger son site web
 
Découverte des licences libres
Découverte des licences libresDécouverte des licences libres
Découverte des licences libres
 
Découvrir WordPress
Découvrir WordPressDécouvrir WordPress
Découvrir WordPress
 
Initiation au JavaScript
Initiation au JavaScriptInitiation au JavaScript
Initiation au JavaScript
 
Initiation au HTML
Initiation au HTMLInitiation au HTML
Initiation au HTML
 
Initiation à SPIP
Initiation à SPIPInitiation à SPIP
Initiation à SPIP
 

Les tendances du webdesign

  • 1. Les tendances
 du web design Mercredi 11 février – Centre de Culture Numérique – Strasweb
  • 2. Hiwelo ! C’est qui ? Damien Senger
 Webdesigner fonctionnel
 en freelance Type-nerd! @damiensenger
 hi@hiwelo.co c’est moi ! ;)
  • 3. Un premier combat :
 Technique vs. graphique
  • 4. Côté technique, tl;dr • Smartphones, tablettes, smartwatches, consoles de jeu, télévisions, réfrigérateurs, …
 ➜ nécessité d’un design adaptatif • Adaptation de la forme du site au contexte
 ➜ responsive web design • Adaptation de la forme et du contenu au contexte
 ➜ adaptive web design
  • 5. Merci à @WalterStephanie pour l’infographie !
  • 6. 1.
 Le flat design et ses enfants
  • 7. Le flat design, déjà. • Toujours plus plat et minimal. • Designs colorés et frais. • Il s’impose du site web jusqu’à l’interface physique. • On arrête d’imiter la réalité,
 on se focalise sur les usages. • Mise en avant de la typographie et des contenus textuels ou images.
  • 9. Le material design • Axé principalement applicatif mobile et desktop. • Des couleurs également vives et fraîches, mais plus saturées. • Un retour des ombrages, pour marquer la perspective. • Des interactions plus fortes : menus cachés, micro-interactions, etc. • Mise en avant d’icônes simples et optimisées à tous les usages.
  • 10. – Material Design « La Google touch! »
  • 11. De grandes images, très grandes ! • Mêlées à la typographie, c’est le retour de grandes images. • Là où le web perd en originalité, il gagne souvent en qualité visuelle. • Une part plus importante laissée à l’immersion 
 dans l’univers offscreen d’un produit, d’une société, etc.
  • 13. Le minimal design • L’essentiel, et rien d’autre.
  • 15. Le flat peut-il être artistique ? • La réponse est oui. • Le flat a réintroduit la géométrie comme un élément de jeu artistique. • On y trouve souvent, sous forme d’infographie, des choses originales. • C’est l’avènement des icônes et des petits éléments créatifs d’interaction.
  • 16. « Kandinsky, le retour. » – le geometric design
  • 17. Les grilles dynamiques • Le web en mode pinterest. • Permet un nouveau mode de navigation :
 une vue différente des éléments dans le temps,
 une plus grande part laissée à la découverte. • Permet également une meilleure articulation des contenus entre eux. • L’idée de construire les contenus briques par briques.
  • 18. « Les mecs, on a besoin d’un maçon là… »
  • 19. Flat design vs. skeuomorphisme :
 un conflit dépassé depuis bien longtemps
  • 20. Le mix « skeuomorflat » • Un peu de flat, et un peu de réalisme.
 Un cocktail plutôt agréable ! • ollysorsby.co.uk • bagigia.com • www.downgraf.com
  • 21. Le rétro design • Mêler les codes graphiques du rétro, aux interactions du web actuel : • http://www.agence-belle-epoque.fr/ • http://www.rftbmeatco.com/ • http://www.goglazed.com/
  • 22. Enfin, il existe également des variantes de construction
  • 23. Les sites « one page » • Permet de laisser une plus grande place au storytelling. • Permet d’afficher un maximum d’informations sur un sujet unique au sein d’une même page, avec une articulation par bloc. • Ce sont des sites optimisés pour la navigation tactile généralement. • http://www.dreamingwithjeff.com/ • http://2015.extralagence.com/
  • 24. Les navigations alternatives • Les technologies web permettent aujourd’hui plus de créativité
 grâce à des navigations atypiques ou alternatives. • http://www.thielfellowship.org/ • http://redhilllavender.com.au/ • http://www.fiveminutes.gs/
  • 25. Le scroll horizontal • Pour changer du traditionnel scroll vertical, 
 de plus en plus de sites choisissent de mettre en place une navigation horizontale laissant plus de place aux frises ou récits ancrés 
 dans le temps. • http://omnisense.net/ • http://www.digibrand.lv/ • http://lesberges.paris.fr/en/explore/
  • 27. Voilà, c’est fini !
 Merci de votre a ention :) Si vous avez des questions, des remarques, des avis ou quoique ce soit : @damiensenger
 (et surtout n’hésitez pas !)
 et sinon : hi@hiwelo.co