SlideShare une entreprise Scribd logo
L E S
T E N DA N C E S :
F L AT D E S I G N
E T M AT E R I A L
D E S I G N
H A N N A H S E L L A M C L É M E N T G A L L E Y A U R É L I E N P I O T
Conception Artistique
EEMI 2017
27 Novembre
2017
SOMMAIRE
• Introduction
• Le Flat Design
• Le Material Design
• Les métiers du Webdesign
• Conclusion
INTRODUCTION
LES DERNIÈRES TENDANCES
2010 2011 2012 2013 2014 2015 2016 2017
Flat Design Material DesignSkeuomorphic design
SKEUOMORPHIC DESIGN
• Recherche de réalisme
• Jeux d’ombres et de lumières
• Couleurs variées, dégradés
• Attention portée aux détails
SKEUOMORPHIC DESIGN
• Simple à comprendre pour l’utilisateur
• Surcharge visuelle
• Créativité limitée au réalisme
• Lourd donc long à charger pour le web
Malheureusement pour lui, la recherche de réalisme a
mené le Skeuomorphisme à sa perte, en effet, cela a créé
une surcharge visuelle notamment pour les icônes
d’applications
DEPUIS 2012
• Néo retro
• Minimalisme
• Responsive Design
• Mise en avant de la typographie
• Menus déroulants
• Défilement infini
Les dernières tendances du webdesign proviennent
notamment de l’usage que les utilisateurs ont du web
comme la croissance de la navigation sur mobile
LE FLAT
DESIGN
PRÉSENTATION
• Philosophie du « Less is More »
• Rupture face au Skeuomorphic Design
• Retour à l’essentiel
• Design graphique minimaliste
• Intemporel
Le Flat Design arrive comme une épuration face au
Skeuomorphic Design le rendant presque
immédiatement obsolète
iOS 6 (skeuomorphic
design)
iOS 7 (flat design)
UTILISATION DU FLAT DESIGN
APPLICATIONS
Le Flat Design peut aussi être utilisé pour des CV, du street art,…
APPLICATIONS
Infographies
• Présentation claire
• Informations lisibles
• Schémas sobres
Le Flat Design a engendré
l’émergence des infographies qui
permettent de mettre en forme des
données de manière claire et
compréhensible
APPLICATIONS
McDonald’s
• Image plus légère
• Tentative de faire oublier la lourdeur de
leurs produits
Pendant longtemps, McDonald’s était
associé à de la nourriture lourde et grasse,
avec le Flat Design, l’entreprise tente
aujourd’hui de faire oublier cette image peu
valorisante
APPLICATIONS
Microsoft
Boutons en 3D remplacés
Solution Possible
Pour apporter une solution à ces
limites, on peut mélanger le Flat
Design et le Skeuomorphic Design
qui ne sont donc pas incompatibles
LIMITES
LIMITES
AVANTAGES
• Pas de superflu visuel ce qui réduit un maximum le bruit visuel. Indirectement cela
améliore la gestion de l'espace et résulte souvent à une amélioration de l'ergonomie
• Adaptable facilement quelque soit la thématique ou les fonctionnalités de l'interface
• Conception graphique généralement plus rapide. Les designers n'ont pratiquement
pas besoin de se concentrer sur des textures ou des effets
• Dans une application web, s'il n'y a pas de textures ou d'effets spécifiques alors le
chargement du site web sera normalement plus rapide
• Design potentiellement intemporel
INCONVÉNIENTS
• Le design peut sembler simpliste et non travaillé
• Design qui semble très digital et qui n'utilise pas d'analogie d'objet du monde réel. Il
est plus compliqué de reconnaître les éléments d'interaction
LE MATERIAL
DESIGN
PRÉSENTATION
• Présenté à la Google I/O de 2014
• Ajoute du réalisme et de la physique au Flat
Design
• Superposition de couches
Le Material Design est un concept introduit par
Google en 2014 basé sur 3 notions : la
métaphore, la hiérarchisation des informations
volontairement exagérée et le mouvement
APPLICATIONS
User Friendly
• Créer de l’interaction
avec l’utilisateur
• Le faire patienter
• Sert de feedback
APPLICATIONS
• Surtout pour les applications et
les sites web
• Menus déroulants
• Animations sobres et légères
POLYMER
• Framework
• Bibliothèque JavaScript
• Web Apps
• Open Source
LES MÉTIERS DU
WEBDESIGN
WEB DESIGNER
• Réalise la conception d’une interface web
• Elabore la maquette et produit les différents éléments graphique du site
• Conçoit l’identité visuelle et la charte graphique: typographie, animation
• Respect des contraintes ergonomiques
• Développer la fréquence du site web par des techniques de référencement
COMPÉTENCES REQUISES
• Maîtrise de divers outils de création graphique et multimédia (Illustrator,
Photoshop, Dreamweaver, After Effects, Indesign)
• Connaissance des outils de programmation et développement web (HTML,
XHTML, XML, CSS, W3C, Javascript)
• Bonnes notions en communication et en marketing
UX/UI DESIGNER
User Experience
Ressenti de l’utilisateur
Issue des sciences humaines
User Interface
Visuel
Au service de l’UX
COMPÉTENCES REQUISES
• Design visuel d’interfaces (Illustrator, Photoshop)
• Prototypage d’interfaces/d’interactions (Processing, Flash, Visual Basic, HTML, …)
• Maquettage web (bon niveau en HTML5, CSS3, JavaScript/jQuery)
• Développement web back-end : PHP/MySQL
MOTION DESIGNER
• Crée et manipule des images numériques
• Maîtrise des outils du multimédia et de l’animation (3D Maya, 3ds Max, flash,
dreamweaver)
• Maîtrise des logiciels de traitement de l’image et de graphisme Illustrator,
Xpress, Photoshop)
• Utilisation de la publication assistée par ordinateur (PAO)
• Maîtrise des techniques artistiques traditionnelles
INTERACTIVE DESIGN
• Softface créé par Bill Mogridi en 1984
• Feedback
• Mécanisme d’interaction entre le produit et
l’utilisateur
• Sert de communication entre l’utilisateur et
la machine
INTERACTIVE DESIGN
DÉVELOPPEUR FRONT-END
• Traduit et transpose les maquettes fournies par l’équipe graphique en langage
informatique
• Maîtrise des techniques de conception, de modélisation et d’architecture d’applications
• Utilisation des langages et outils de développement (algorithmique, PHP, SQL, Java,
ASP)
• Connaissance de l’environnement Web et XML
• Connaissance des normes et procédures de sécurité5. Maîtrise opérationnelle des
outils CMS (Content Management System), Framework, outils d’édition de code
DIRECTEUR ARTISTIQUE
• Conception :
• Charte graphique (identité visuelle)
• Maquettes, ou rough (croquis des éléments visuels essentiels) présentés au client
• Contact client (ou direction de l’entreprise) :
• Analyse des besoins graphiques, conseil
• Validation de chaque étape de la production
• Production :
• Réalisation ou supervision de l’équipe de production
• Vérification du respect de la demande exprimée, de la charte graphique, des contraintes
d’ergonomie et d’accessibilité
CSS DESIGN AWARDS
Récompenses accordées à des sites originaux, sources d’inspiration
NEWSLETTERS
• Webdesigner News
• Product Design Weekly
• 1 Design Per Day
• Webdesign Depot
• Designmodo
• Thrive
• Brian Lovin
Ces Newsletters apportent des idées d’inspiration, des
présentations des dernières tendances et de très beaux
exemples
ADOBE STOCK
Adobe Stock nous permet d’étudier une très grande quantité de Design et de
voir les tendances qui s’en dégagent
EXTENSIONS GOOGLE CHROME
CONCLUSION
SUPPORTS EEMI
Quatre couleurs différentes pour les métiers, frise technologique
SUPPORTS EEMI
Identité visuelle d’Aurore Market intégrée à celle de l’EEMI, utilisation de # colorés
SUPPORTS EEMI
Traitement vertical de la nomenclature des salles et de la présentation de l’enseignement
SOURCES
• www.eemi.com
• http://glossaire.infowebmaster.fr/flat-web-design/
• http://www.virtuozo.fr/flat-design-les-5-points-essentiels-pour-tout-comprendre/
• https://cabaroc.com/flat-design-mode-passagere-ou-tendance-durable/
• https://design.google/
• https://material.io/
• https://www.youtube.com/watch?v=isYZXwaP3Q4&t=1889s
• https://graphism.fr/comprendre-le-material-design-de-google/
• https://www.butterfly.com.au/blog/design/ui-design-a-history-of-web-design-trends

Contenu connexe

Similaire à Design Trends

Techniques d’UX & UI Design
Techniques d’UX & UI DesignTechniques d’UX & UI Design
Techniques d’UX & UI Design
Microsoft
 
Design et expérience utilisateur sous SharePoint 2013
Design et expérience utilisateur sous SharePoint 2013Design et expérience utilisateur sous SharePoint 2013
Design et expérience utilisateur sous SharePoint 2013
Microsoft
 
MobiliteaTime #5 : Responsive & Adaptive Design
MobiliteaTime #5 : Responsive & Adaptive Design MobiliteaTime #5 : Responsive & Adaptive Design
MobiliteaTime #5 : Responsive & Adaptive Design
USERADGENTS
 
Fiche-CHEF-DE-PROJET
Fiche-CHEF-DE-PROJETFiche-CHEF-DE-PROJET
Fiche-CHEF-DE-PROJET
Boris Michel
 
Responsive Web Design - BreizhCamp 2013
Responsive Web Design - BreizhCamp 2013Responsive Web Design - BreizhCamp 2013
Responsive Web Design - BreizhCamp 2013
Julien LE THUAUT
 
Présentation des métiers du design numérique, janvier 2009
Présentation des métiers du design numérique, janvier 2009Présentation des métiers du design numérique, janvier 2009
Présentation des métiers du design numérique, janvier 2009
designers interactifs
 
Web { Design Project } Management
Web { Design Project } ManagementWeb { Design Project } Management
Web { Design Project } Management
David Roessli
 
Après Coding4Fun, voici NUI4Fun !
Après Coding4Fun, voici NUI4Fun !Après Coding4Fun, voici NUI4Fun !
Après Coding4Fun, voici NUI4Fun !
Microsoft
 
UXD#5 - De l'importance de la conception centrée utilisateur
UXD#5 - De l'importance de la conception centrée utilisateurUXD#5 - De l'importance de la conception centrée utilisateur
UXD#5 - De l'importance de la conception centrée utilisateur
UXD Meetup
 
OnMap Visual Design pour modéliser les processus
OnMap Visual Design pour modéliser les processusOnMap Visual Design pour modéliser les processus
OnMap Visual Design pour modéliser les processus
Nomia
 
Vanessa i ref_2014
Vanessa i ref_2014Vanessa i ref_2014
Vanessa i ref_2014
Vanessa Ilmany
 
Réalité virtuelle Immersive pour la conception de postes de travail
Réalité virtuelle Immersive pour la conception de postes de travailRéalité virtuelle Immersive pour la conception de postes de travail
Réalité virtuelle Immersive pour la conception de postes de travail
Alexandre BOUCHET
 
Creation de maquettes virtuelles et de scénarios pour l'analyse et la prise d...
Creation de maquettes virtuelles et de scénarios pour l'analyse et la prise d...Creation de maquettes virtuelles et de scénarios pour l'analyse et la prise d...
Creation de maquettes virtuelles et de scénarios pour l'analyse et la prise d...
Consortech
 
Le webdesign orienté Business
Le webdesign orienté BusinessLe webdesign orienté Business
Le webdesign orienté Business
Khaled Djebloun
 
#Cours : Comment se définit et en quoi consiste l’#UX #Design
#Cours : Comment se définit et en quoi consiste l’#UX #Design#Cours : Comment se définit et en quoi consiste l’#UX #Design
#Cours : Comment se définit et en quoi consiste l’#UX #Design
Virginie Boullé
 
Webdesign Passe, Present et... Present Part1
Webdesign Passe, Present et... Present Part1Webdesign Passe, Present et... Present Part1
Webdesign Passe, Present et... Present Part1
bduverneuil
 
Evolution des métiers du design interactif
Evolution des métiers du design interactifEvolution des métiers du design interactif
Evolution des métiers du design interactif
designers interactifs
 
Good Morning UX #3 : Les fondamentaux du design UX
Good Morning UX #3 : Les fondamentaux du design UXGood Morning UX #3 : Les fondamentaux du design UX
Good Morning UX #3 : Les fondamentaux du design UX
Newflux UX/UI News
 
Formation : "Concevoir et promouvoir votre site internet" V3
Formation : "Concevoir et promouvoir votre site internet" V3Formation : "Concevoir et promouvoir votre site internet" V3
Formation : "Concevoir et promouvoir votre site internet" V3
Synerg'hetic
 

Similaire à Design Trends (20)

Techniques d’UX & UI Design
Techniques d’UX & UI DesignTechniques d’UX & UI Design
Techniques d’UX & UI Design
 
Design et expérience utilisateur sous SharePoint 2013
Design et expérience utilisateur sous SharePoint 2013Design et expérience utilisateur sous SharePoint 2013
Design et expérience utilisateur sous SharePoint 2013
 
MobiliteaTime #5 : Responsive & Adaptive Design
MobiliteaTime #5 : Responsive & Adaptive Design MobiliteaTime #5 : Responsive & Adaptive Design
MobiliteaTime #5 : Responsive & Adaptive Design
 
Fiche-CHEF-DE-PROJET
Fiche-CHEF-DE-PROJETFiche-CHEF-DE-PROJET
Fiche-CHEF-DE-PROJET
 
Responsive Web Design - BreizhCamp 2013
Responsive Web Design - BreizhCamp 2013Responsive Web Design - BreizhCamp 2013
Responsive Web Design - BreizhCamp 2013
 
Présentation des métiers du design numérique, janvier 2009
Présentation des métiers du design numérique, janvier 2009Présentation des métiers du design numérique, janvier 2009
Présentation des métiers du design numérique, janvier 2009
 
Web { Design Project } Management
Web { Design Project } ManagementWeb { Design Project } Management
Web { Design Project } Management
 
Après Coding4Fun, voici NUI4Fun !
Après Coding4Fun, voici NUI4Fun !Après Coding4Fun, voici NUI4Fun !
Après Coding4Fun, voici NUI4Fun !
 
UXD#5 - De l'importance de la conception centrée utilisateur
UXD#5 - De l'importance de la conception centrée utilisateurUXD#5 - De l'importance de la conception centrée utilisateur
UXD#5 - De l'importance de la conception centrée utilisateur
 
OnMap Visual Design pour modéliser les processus
OnMap Visual Design pour modéliser les processusOnMap Visual Design pour modéliser les processus
OnMap Visual Design pour modéliser les processus
 
Vanessa i ref_2014
Vanessa i ref_2014Vanessa i ref_2014
Vanessa i ref_2014
 
Réalité virtuelle Immersive pour la conception de postes de travail
Réalité virtuelle Immersive pour la conception de postes de travailRéalité virtuelle Immersive pour la conception de postes de travail
Réalité virtuelle Immersive pour la conception de postes de travail
 
Creation de maquettes virtuelles et de scénarios pour l'analyse et la prise d...
Creation de maquettes virtuelles et de scénarios pour l'analyse et la prise d...Creation de maquettes virtuelles et de scénarios pour l'analyse et la prise d...
Creation de maquettes virtuelles et de scénarios pour l'analyse et la prise d...
 
Offre Mobilité | 2013
Offre Mobilité | 2013Offre Mobilité | 2013
Offre Mobilité | 2013
 
Le webdesign orienté Business
Le webdesign orienté BusinessLe webdesign orienté Business
Le webdesign orienté Business
 
#Cours : Comment se définit et en quoi consiste l’#UX #Design
#Cours : Comment se définit et en quoi consiste l’#UX #Design#Cours : Comment se définit et en quoi consiste l’#UX #Design
#Cours : Comment se définit et en quoi consiste l’#UX #Design
 
Webdesign Passe, Present et... Present Part1
Webdesign Passe, Present et... Present Part1Webdesign Passe, Present et... Present Part1
Webdesign Passe, Present et... Present Part1
 
Evolution des métiers du design interactif
Evolution des métiers du design interactifEvolution des métiers du design interactif
Evolution des métiers du design interactif
 
Good Morning UX #3 : Les fondamentaux du design UX
Good Morning UX #3 : Les fondamentaux du design UXGood Morning UX #3 : Les fondamentaux du design UX
Good Morning UX #3 : Les fondamentaux du design UX
 
Formation : "Concevoir et promouvoir votre site internet" V3
Formation : "Concevoir et promouvoir votre site internet" V3Formation : "Concevoir et promouvoir votre site internet" V3
Formation : "Concevoir et promouvoir votre site internet" V3
 

Design Trends

  • 1. L E S T E N DA N C E S : F L AT D E S I G N E T M AT E R I A L D E S I G N H A N N A H S E L L A M C L É M E N T G A L L E Y A U R É L I E N P I O T Conception Artistique EEMI 2017 27 Novembre 2017
  • 2. SOMMAIRE • Introduction • Le Flat Design • Le Material Design • Les métiers du Webdesign • Conclusion
  • 4. LES DERNIÈRES TENDANCES 2010 2011 2012 2013 2014 2015 2016 2017 Flat Design Material DesignSkeuomorphic design
  • 5. SKEUOMORPHIC DESIGN • Recherche de réalisme • Jeux d’ombres et de lumières • Couleurs variées, dégradés • Attention portée aux détails
  • 6. SKEUOMORPHIC DESIGN • Simple à comprendre pour l’utilisateur • Surcharge visuelle • Créativité limitée au réalisme • Lourd donc long à charger pour le web Malheureusement pour lui, la recherche de réalisme a mené le Skeuomorphisme à sa perte, en effet, cela a créé une surcharge visuelle notamment pour les icônes d’applications
  • 7. DEPUIS 2012 • Néo retro • Minimalisme • Responsive Design • Mise en avant de la typographie • Menus déroulants • Défilement infini Les dernières tendances du webdesign proviennent notamment de l’usage que les utilisateurs ont du web comme la croissance de la navigation sur mobile
  • 9. PRÉSENTATION • Philosophie du « Less is More » • Rupture face au Skeuomorphic Design • Retour à l’essentiel • Design graphique minimaliste • Intemporel Le Flat Design arrive comme une épuration face au Skeuomorphic Design le rendant presque immédiatement obsolète iOS 6 (skeuomorphic design) iOS 7 (flat design)
  • 11. APPLICATIONS Le Flat Design peut aussi être utilisé pour des CV, du street art,…
  • 12. APPLICATIONS Infographies • Présentation claire • Informations lisibles • Schémas sobres Le Flat Design a engendré l’émergence des infographies qui permettent de mettre en forme des données de manière claire et compréhensible
  • 13. APPLICATIONS McDonald’s • Image plus légère • Tentative de faire oublier la lourdeur de leurs produits Pendant longtemps, McDonald’s était associé à de la nourriture lourde et grasse, avec le Flat Design, l’entreprise tente aujourd’hui de faire oublier cette image peu valorisante
  • 15. Solution Possible Pour apporter une solution à ces limites, on peut mélanger le Flat Design et le Skeuomorphic Design qui ne sont donc pas incompatibles LIMITES
  • 17. AVANTAGES • Pas de superflu visuel ce qui réduit un maximum le bruit visuel. Indirectement cela améliore la gestion de l'espace et résulte souvent à une amélioration de l'ergonomie • Adaptable facilement quelque soit la thématique ou les fonctionnalités de l'interface • Conception graphique généralement plus rapide. Les designers n'ont pratiquement pas besoin de se concentrer sur des textures ou des effets • Dans une application web, s'il n'y a pas de textures ou d'effets spécifiques alors le chargement du site web sera normalement plus rapide • Design potentiellement intemporel
  • 18. INCONVÉNIENTS • Le design peut sembler simpliste et non travaillé • Design qui semble très digital et qui n'utilise pas d'analogie d'objet du monde réel. Il est plus compliqué de reconnaître les éléments d'interaction
  • 20. PRÉSENTATION • Présenté à la Google I/O de 2014 • Ajoute du réalisme et de la physique au Flat Design • Superposition de couches Le Material Design est un concept introduit par Google en 2014 basé sur 3 notions : la métaphore, la hiérarchisation des informations volontairement exagérée et le mouvement
  • 21. APPLICATIONS User Friendly • Créer de l’interaction avec l’utilisateur • Le faire patienter • Sert de feedback
  • 22. APPLICATIONS • Surtout pour les applications et les sites web • Menus déroulants • Animations sobres et légères
  • 23. POLYMER • Framework • Bibliothèque JavaScript • Web Apps • Open Source
  • 25. WEB DESIGNER • Réalise la conception d’une interface web • Elabore la maquette et produit les différents éléments graphique du site • Conçoit l’identité visuelle et la charte graphique: typographie, animation • Respect des contraintes ergonomiques • Développer la fréquence du site web par des techniques de référencement
  • 26. COMPÉTENCES REQUISES • Maîtrise de divers outils de création graphique et multimédia (Illustrator, Photoshop, Dreamweaver, After Effects, Indesign) • Connaissance des outils de programmation et développement web (HTML, XHTML, XML, CSS, W3C, Javascript) • Bonnes notions en communication et en marketing
  • 27. UX/UI DESIGNER User Experience Ressenti de l’utilisateur Issue des sciences humaines User Interface Visuel Au service de l’UX
  • 28. COMPÉTENCES REQUISES • Design visuel d’interfaces (Illustrator, Photoshop) • Prototypage d’interfaces/d’interactions (Processing, Flash, Visual Basic, HTML, …) • Maquettage web (bon niveau en HTML5, CSS3, JavaScript/jQuery) • Développement web back-end : PHP/MySQL
  • 29. MOTION DESIGNER • Crée et manipule des images numériques • Maîtrise des outils du multimédia et de l’animation (3D Maya, 3ds Max, flash, dreamweaver) • Maîtrise des logiciels de traitement de l’image et de graphisme Illustrator, Xpress, Photoshop) • Utilisation de la publication assistée par ordinateur (PAO) • Maîtrise des techniques artistiques traditionnelles
  • 30. INTERACTIVE DESIGN • Softface créé par Bill Mogridi en 1984 • Feedback • Mécanisme d’interaction entre le produit et l’utilisateur • Sert de communication entre l’utilisateur et la machine
  • 32. DÉVELOPPEUR FRONT-END • Traduit et transpose les maquettes fournies par l’équipe graphique en langage informatique • Maîtrise des techniques de conception, de modélisation et d’architecture d’applications • Utilisation des langages et outils de développement (algorithmique, PHP, SQL, Java, ASP) • Connaissance de l’environnement Web et XML • Connaissance des normes et procédures de sécurité5. Maîtrise opérationnelle des outils CMS (Content Management System), Framework, outils d’édition de code
  • 33. DIRECTEUR ARTISTIQUE • Conception : • Charte graphique (identité visuelle) • Maquettes, ou rough (croquis des éléments visuels essentiels) présentés au client • Contact client (ou direction de l’entreprise) : • Analyse des besoins graphiques, conseil • Validation de chaque étape de la production • Production : • Réalisation ou supervision de l’équipe de production • Vérification du respect de la demande exprimée, de la charte graphique, des contraintes d’ergonomie et d’accessibilité
  • 34. CSS DESIGN AWARDS Récompenses accordées à des sites originaux, sources d’inspiration
  • 35. NEWSLETTERS • Webdesigner News • Product Design Weekly • 1 Design Per Day • Webdesign Depot • Designmodo • Thrive • Brian Lovin Ces Newsletters apportent des idées d’inspiration, des présentations des dernières tendances et de très beaux exemples
  • 36. ADOBE STOCK Adobe Stock nous permet d’étudier une très grande quantité de Design et de voir les tendances qui s’en dégagent
  • 39. SUPPORTS EEMI Quatre couleurs différentes pour les métiers, frise technologique
  • 40. SUPPORTS EEMI Identité visuelle d’Aurore Market intégrée à celle de l’EEMI, utilisation de # colorés
  • 41. SUPPORTS EEMI Traitement vertical de la nomenclature des salles et de la présentation de l’enseignement
  • 42. SOURCES • www.eemi.com • http://glossaire.infowebmaster.fr/flat-web-design/ • http://www.virtuozo.fr/flat-design-les-5-points-essentiels-pour-tout-comprendre/ • https://cabaroc.com/flat-design-mode-passagere-ou-tendance-durable/ • https://design.google/ • https://material.io/ • https://www.youtube.com/watch?v=isYZXwaP3Q4&t=1889s • https://graphism.fr/comprendre-le-material-design-de-google/ • https://www.butterfly.com.au/blog/design/ui-design-a-history-of-web-design-trends