Workshop à propos des tendances graphiques qui ont jalonnées ces dernières années

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

3. INTRODUCTION

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

8. LE FLAT
DESIGN

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)

10. UTILISATION DU 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

14. APPLICATIONS
Microsoft
Boutons en 3D remplacés

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

16. 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

19. LE MATERIAL
DESIGN

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

24. LES MÉTIERS DU
WEBDESIGN

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

31. INTERACTIVE DESIGN

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

37. EXTENSIONS GOOGLE CHROME

38. CONCLUSION

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