SlideShare une entreprise Scribd logo
Les tendances du web design
2018
Livre blanc
De l’adoption massive de l’internet, la démocratisation du mobile à
l’avènement des objets connectés et la technologie immersive alliant
réel et virtuel, l’histoire du web design est en constante évolution.
Décryptons les dernières grandes tendances créatives qui font le web
d’aujourd’hui et de demain.
Les tendances du web design
2018
Livre blanc
1. Introduction 4
2. L’évolution du web design 6
3. Huit tendances du web design 10
# 1 Les navigations originales 10
# 2 Les écrans divisés 20
# 3 Les couleurs vives et les dégradés 25
# 4 La typographie 29
# 5 L'iconographie 32
# 6 Les animations et les micro-interactions 38
# 7 Les grilles et les colonnes 43
# 8 Les formes et les motifs 47
4. Conclusion 50
Sommaire
3
www.ametys.org
Introduction
1
Le web design se situe à la frontière entre la forme et la fonctionnalité.
Entre technologie et créativité, nombreux sont ceux qui ignorent sur
quel pied danser.
Nous parlons beaucoup aujourd'hui d'ergonomie et d'expérience
utilisateur, ces notions sont-elles pourtant identiques ?
Chez Ametys, nous vous proposons une méthode de conception web
associant plusieurs métiers aux préoccupations distinctes mais
complémentaires :
• Nos ergonomes conçoivent des interfaces en se focalisant avant
tout sur leur utilisabilité, sur leur utilité en se basant sur des
arguments rationnels.
• Nos UX designers intègrent les notions d’émotions, d’affect pour
proposer des interfaces, ou plutôt des expériences, toujours utiles
et utilisables mais aussi plus conviviales et plus désirables.
Cependant, face au tumulte des tendances créatives aujourd'hui, aux
nouveautés tant en termes de concepts que de solutions
technologiques, comment faire le bon choix ? Quelles sont les
orientations graphiques à privilégier aujourd'hui? Quels sont les
pièges à éviter ?
Ce livre n'a aucunement vocation à fournir une liste exhaustive des
tendances en web design.
Notre contribution est de vous aider à vous orienter dans votre
réflexion ergonomique et créative, de vous apporter quelques
ingrédients jugés utiles, à notre sens, et de vous aider à mieux
comprendre des concepts avec lesquels nous travaillons
quotidiennement.
Nous vous souhaitons une bonne lecture, en espérant qu’elle vous
soit agréable et utile.
5
www.ametys.org
L’évolution du web design
2
La conception web est une industrie en perpétuelle mutation. Elle
doit son évolution à la technologie.
L'internet des années 1990-début 2000, considéré comme le « web
statique » ou le « web 1.0 », est un réseau de sites simples dont le
contenu est rarement mis à jour et où l'interaction avec les
utilisateurs est très faible. Les premiers web design sont alors conçus
en fonction des limitations du HTML et contraignent fortement la
créativité.
L'avènement du web 2.0 (2003-2010), souvent appelé « web
participatif » ou « web social » pousse à la décomplexification des
technologies au profit de la simplicité d'utilisation.
L'utilisateur devient acteur, il créé et partage de l'information. La
conception est désormais centrée sur l'utilisateur.
Les web designers conçoivent des interfaces ergonomiques dans le
but de « civiliser » les pages web et familiariser les internautes à la
navigation web. Les graphiques et les boutons surdimensionnés, les
bulles et les ombres brillantes sont des exemples de graphisme de
l'époque.
Le skeuomorphisme se développe sous l'impulsion d'Apple de 2011 à
2012. Cette tendance consiste à donner à un élément de design
l’apparence de l’objet physique correspondant à son usage.
Le skeuomorphisme permet de guider et rassurer les utilisateurs
avec un design familier. Cette tendance joue sur l'affordance, c'est-à-
dire la capacité d'un objet à suggérer sa propre utilisation.
Les exemples les plus courants sont les icônes d'Apple pour IOS6
avec notamment le symbole du combiné téléphonique pour l'icône
Téléphone ou le symbole de l'enveloppe pour l'icône Mails.
7
www.ametys.org
Le Flat Design, courant opposé au skeuomorphisme, est apparu fin
2012, courant 2013 porté par Microsoft avec Windows 8 et Apple
avec IOS7.
Le constat est simple : le besoin de continuité et d'éducation au web
n'est plus une nécessité, l'avènement du mobile et l'appropriation
massive des technologies a bouleversé nos quotidiens.
Le Flat Design prend le parti du minimalisme et de la lisibilité. Il exclut
les effets de profondeur, d'ombre portée ou de reflets. Ces designs
sont plats, sans bordures, et privilégient l’efficacité, notamment dans
l’utilisation de l’espace.
Depuis 2014, le Material Design, initié par Google, s'est imposé. Ce
courant conserve les fondamentaux du Flat Design tout en apportant
du mouvement et de la perspective.
Il ajoute des formes géométriques, des ombres diffuses avec
plusieurs niveaux de profondeur.
En 2017, la tendance est aux hybrides, on parle de Semi Flat Design
ou Material Design Lite. Ce mouvement tend à apporter du volume
pour un aspect tridimensionnel avec des dégradés, des ombres
portées diffuses ou des ombres internes, des superpositions de
couches pour multiplier l'animation.
Un nouveau concept, porté par Microsoft, est né en 2017 : le Fluent
Design System. Il est basé sur 5 principes de design : la lumière, la
profondeur, le mouvement, le matériel, et l'échelle.
Ce courant apporte des effets de flous, des jeux de lumière et une
gestion de la profondeur des éléments superposés à l’écran.
8
www.ametys.org
9
www.ametys.org© Ametys
Télécharger l’intégralité du
livre blanc
www.ametys.org
Télécharger
Ametys
Ametys est née dans les années 2000 d'une équipe d'experts
passionnés des TIC et spécialisés dans les solutions de gestion de
contenus innovantes.
Depuis plus de 10 ans, nous accompagnons les établissements
d’enseignement supérieur, les administrations publiques et
collectivités locales dans la mise en place de leurs projets
numériques.
Avec nos solutions, les collectivités locales et les établissements
d’enseignement supérieur peuvent réaliser de nouvelles expériences
digitales, travailler et collaborer ensemble tout en utilisant une
technologie 100% open source répondant à leurs besoins métiers.
• Pôles métiers : Ametys Campus et Ametys Territorial
• Savoir-faire : Sites web, offre de formation, portails citoyens,
intranet collaboratif, stratégie digitale et web design
• Solutions : Ametys Portal, Ametys Workspaces, Ametys ODF
Solutions digitales pour
l’Education et les Collectivités locales
05 62 19 19 00
info@ametys.org
www.ametys.org

Contenu connexe

Tendances

Le webdesign au coeur du produit
Le webdesign au coeur du produitLe webdesign au coeur du produit
Le webdesign au coeur du produit
Fabien Berthoux
 
Les 10 Tendances Webdesign de 2014 by Vanksen
Les 10 Tendances Webdesign de 2014 by VanksenLes 10 Tendances Webdesign de 2014 by Vanksen
Les 10 Tendances Webdesign de 2014 by Vanksen
Vanksen
 
Les tendances des site web en 2015
Les tendances des site web en 2015Les tendances des site web en 2015
Les tendances des site web en 2015
Vincent Pereira
 
Petite introduction au flat design (et autres platitudes)
Petite introduction au flat design (et autres platitudes)Petite introduction au flat design (et autres platitudes)
Petite introduction au flat design (et autres platitudes)
i-breed et associés
 
Webdesign sites web et mobiles-tendances 2015
Webdesign sites web et mobiles-tendances 2015Webdesign sites web et mobiles-tendances 2015
Webdesign sites web et mobiles-tendances 2015
Olivier Dommange
 
Qu'est-ce que le design numérique ? Ebauche d'une réponse...
Qu'est-ce que le design numérique ? Ebauche d'une réponse...Qu'est-ce que le design numérique ? Ebauche d'une réponse...
Qu'est-ce que le design numérique ? Ebauche d'une réponse...
i-breed et associés
 
Mobile et Flashcode : Effet de mode ou moyens stratégiques ? | acti
Mobile et Flashcode : Effet de mode ou moyens stratégiques ? | actiMobile et Flashcode : Effet de mode ou moyens stratégiques ? | acti
Mobile et Flashcode : Effet de mode ou moyens stratégiques ? | acti
acti
 
Valtech - Mobilité : Passé, présent et futur...
Valtech - Mobilité : Passé, présent et futur...Valtech - Mobilité : Passé, présent et futur...
Valtech - Mobilité : Passé, présent et futur...
Valtech
 
Wif 2012 : programme des conférences et ateliers
Wif 2012 : programme des conférences et ateliersWif 2012 : programme des conférences et ateliers
Wif 2012 : programme des conférences et ateliersWif
 
Un site web responsive en une heure
Un site web responsive en une heureUn site web responsive en une heure
Un site web responsive en une heure
Raphaël Goetter
 

Tendances (10)

Le webdesign au coeur du produit
Le webdesign au coeur du produitLe webdesign au coeur du produit
Le webdesign au coeur du produit
 
Les 10 Tendances Webdesign de 2014 by Vanksen
Les 10 Tendances Webdesign de 2014 by VanksenLes 10 Tendances Webdesign de 2014 by Vanksen
Les 10 Tendances Webdesign de 2014 by Vanksen
 
Les tendances des site web en 2015
Les tendances des site web en 2015Les tendances des site web en 2015
Les tendances des site web en 2015
 
Petite introduction au flat design (et autres platitudes)
Petite introduction au flat design (et autres platitudes)Petite introduction au flat design (et autres platitudes)
Petite introduction au flat design (et autres platitudes)
 
Webdesign sites web et mobiles-tendances 2015
Webdesign sites web et mobiles-tendances 2015Webdesign sites web et mobiles-tendances 2015
Webdesign sites web et mobiles-tendances 2015
 
Qu'est-ce que le design numérique ? Ebauche d'une réponse...
Qu'est-ce que le design numérique ? Ebauche d'une réponse...Qu'est-ce que le design numérique ? Ebauche d'une réponse...
Qu'est-ce que le design numérique ? Ebauche d'une réponse...
 
Mobile et Flashcode : Effet de mode ou moyens stratégiques ? | acti
Mobile et Flashcode : Effet de mode ou moyens stratégiques ? | actiMobile et Flashcode : Effet de mode ou moyens stratégiques ? | acti
Mobile et Flashcode : Effet de mode ou moyens stratégiques ? | acti
 
Valtech - Mobilité : Passé, présent et futur...
Valtech - Mobilité : Passé, présent et futur...Valtech - Mobilité : Passé, présent et futur...
Valtech - Mobilité : Passé, présent et futur...
 
Wif 2012 : programme des conférences et ateliers
Wif 2012 : programme des conférences et ateliersWif 2012 : programme des conférences et ateliers
Wif 2012 : programme des conférences et ateliers
 
Un site web responsive en une heure
Un site web responsive en une heureUn site web responsive en une heure
Un site web responsive en une heure
 

Similaire à Livre blanc : Les tendances du web design 2018

Tendances Web 2014
Tendances Web 2014Tendances Web 2014
Tendances Web 2014
Antonio Eugenio
 
Tendances 2021
Tendances 2021Tendances 2021
Tendances 2021
Agence 50A
 
Metiers Design Numerique 2009
Metiers Design Numerique 2009Metiers Design Numerique 2009
Metiers Design Numerique 2009
designers interactifs
 
Nouvelles tendances ui ux avec notes
Nouvelles tendances ui ux avec notesNouvelles tendances ui ux avec notes
Nouvelles tendances ui ux avec notes
Concept Image
 
Site internet : les tendances pour 2014
Site internet : les tendances pour 2014Site internet : les tendances pour 2014
Site internet : les tendances pour 2014
Inaativ
 
Les 10 Tendances du Design d'interface en 2016
Les 10 Tendances du Design d'interface en 2016Les 10 Tendances du Design d'interface en 2016
Les 10 Tendances du Design d'interface en 2016
Idean France
 
L’accessibilité numérique est au cœur de la transformation digitale de Microsoft
L’accessibilité numérique est au cœur de la transformation digitale de MicrosoftL’accessibilité numérique est au cœur de la transformation digitale de Microsoft
L’accessibilité numérique est au cœur de la transformation digitale de Microsoft
Microsoft pour les PME
 
Conference webmarketing Inaativ 2014
Conference webmarketing Inaativ 2014Conference webmarketing Inaativ 2014
Conference webmarketing Inaativ 2014
Vincent Pereira
 
L’accessibilité numérique est au cœur de la transformation digitale de Microsoft
L’accessibilité numérique est au cœur de la transformation digitale de MicrosoftL’accessibilité numérique est au cœur de la transformation digitale de Microsoft
L’accessibilité numérique est au cœur de la transformation digitale de Microsoft
Patricia CHARRAIS-BOUVIER
 
CV // Julien Dumail
CV // Julien DumailCV // Julien Dumail
CV // Julien Dumailjuliendumail
 
L'e-marketing pour les TPE et les PME, les tendances pour 2014 !
L'e-marketing pour les TPE et les PME, les tendances pour 2014 !L'e-marketing pour les TPE et les PME, les tendances pour 2014 !
L'e-marketing pour les TPE et les PME, les tendances pour 2014 !
FIDAQUITAINE
 
L'emploi et les salaires du design interactif en France : enquête 2017
L'emploi et les salaires du design interactif en France : enquête 2017L'emploi et les salaires du design interactif en France : enquête 2017
L'emploi et les salaires du design interactif en France : enquête 2017
designers interactifs
 
Les 10 Tendances de l’Expérience Utilisateur en 2016
Les 10 Tendances de l’Expérience Utilisateur en 2016Les 10 Tendances de l’Expérience Utilisateur en 2016
Les 10 Tendances de l’Expérience Utilisateur en 2016
Idean France
 
La compétence numérique, un cadre de travail évolutif pour le design d'interf...
La compétence numérique, un cadre de travail évolutif pour le design d'interf...La compétence numérique, un cadre de travail évolutif pour le design d'interf...
La compétence numérique, un cadre de travail évolutif pour le design d'interf...
Vincent Beneche
 
Veille digitale
Veille digitaleVeille digitale
Veille digitale
MarouaChetmi
 
Catalogue Webedia Learning
Catalogue Webedia LearningCatalogue Webedia Learning
Catalogue Webedia Learning
Adrien Verseau
 
Catalogue Webedia Learning
Catalogue Webedia LearningCatalogue Webedia Learning
Catalogue Webedia Learning
Adrien Verseau
 
Internet et Mondes Virtuels.Fr
Internet et Mondes Virtuels.FrInternet et Mondes Virtuels.Fr
Internet et Mondes Virtuels.Fr
Nicolas Mas
 
Convergence et mobilité des contenus
Convergence et mobilité des contenus Convergence et mobilité des contenus
Convergence et mobilité des contenus
Vanksen
 

Similaire à Livre blanc : Les tendances du web design 2018 (20)

Tendances Web 2014
Tendances Web 2014Tendances Web 2014
Tendances Web 2014
 
Tendances 2021
Tendances 2021Tendances 2021
Tendances 2021
 
Metiers Design Numerique 2009
Metiers Design Numerique 2009Metiers Design Numerique 2009
Metiers Design Numerique 2009
 
Nouvelles tendances ui ux avec notes
Nouvelles tendances ui ux avec notesNouvelles tendances ui ux avec notes
Nouvelles tendances ui ux avec notes
 
Site internet : les tendances pour 2014
Site internet : les tendances pour 2014Site internet : les tendances pour 2014
Site internet : les tendances pour 2014
 
Les 10 Tendances du Design d'interface en 2016
Les 10 Tendances du Design d'interface en 2016Les 10 Tendances du Design d'interface en 2016
Les 10 Tendances du Design d'interface en 2016
 
L’accessibilité numérique est au cœur de la transformation digitale de Microsoft
L’accessibilité numérique est au cœur de la transformation digitale de MicrosoftL’accessibilité numérique est au cœur de la transformation digitale de Microsoft
L’accessibilité numérique est au cœur de la transformation digitale de Microsoft
 
Conference webmarketing Inaativ 2014
Conference webmarketing Inaativ 2014Conference webmarketing Inaativ 2014
Conference webmarketing Inaativ 2014
 
L’accessibilité numérique est au cœur de la transformation digitale de Microsoft
L’accessibilité numérique est au cœur de la transformation digitale de MicrosoftL’accessibilité numérique est au cœur de la transformation digitale de Microsoft
L’accessibilité numérique est au cœur de la transformation digitale de Microsoft
 
CV // Julien Dumail
CV // Julien DumailCV // Julien Dumail
CV // Julien Dumail
 
Projet et strategie
Projet et strategieProjet et strategie
Projet et strategie
 
L'e-marketing pour les TPE et les PME, les tendances pour 2014 !
L'e-marketing pour les TPE et les PME, les tendances pour 2014 !L'e-marketing pour les TPE et les PME, les tendances pour 2014 !
L'e-marketing pour les TPE et les PME, les tendances pour 2014 !
 
L'emploi et les salaires du design interactif en France : enquête 2017
L'emploi et les salaires du design interactif en France : enquête 2017L'emploi et les salaires du design interactif en France : enquête 2017
L'emploi et les salaires du design interactif en France : enquête 2017
 
Les 10 Tendances de l’Expérience Utilisateur en 2016
Les 10 Tendances de l’Expérience Utilisateur en 2016Les 10 Tendances de l’Expérience Utilisateur en 2016
Les 10 Tendances de l’Expérience Utilisateur en 2016
 
La compétence numérique, un cadre de travail évolutif pour le design d'interf...
La compétence numérique, un cadre de travail évolutif pour le design d'interf...La compétence numérique, un cadre de travail évolutif pour le design d'interf...
La compétence numérique, un cadre de travail évolutif pour le design d'interf...
 
Veille digitale
Veille digitaleVeille digitale
Veille digitale
 
Catalogue Webedia Learning
Catalogue Webedia LearningCatalogue Webedia Learning
Catalogue Webedia Learning
 
Catalogue Webedia Learning
Catalogue Webedia LearningCatalogue Webedia Learning
Catalogue Webedia Learning
 
Internet et Mondes Virtuels.Fr
Internet et Mondes Virtuels.FrInternet et Mondes Virtuels.Fr
Internet et Mondes Virtuels.Fr
 
Convergence et mobilité des contenus
Convergence et mobilité des contenus Convergence et mobilité des contenus
Convergence et mobilité des contenus
 

Plus de Ametys

Refonte intranet Open Source avec Ametys, retour d'expérience du Conseil Géné...
Refonte intranet Open Source avec Ametys, retour d'expérience du Conseil Géné...Refonte intranet Open Source avec Ametys, retour d'expérience du Conseil Géné...
Refonte intranet Open Source avec Ametys, retour d'expérience du Conseil Géné...
Ametys
 
Refonte intranet du Conseil Général de la Drôme avec le CMS open source Amety...
Refonte intranet du Conseil Général de la Drôme avec le CMS open source Amety...Refonte intranet du Conseil Général de la Drôme avec le CMS open source Amety...
Refonte intranet du Conseil Général de la Drôme avec le CMS open source Amety...
Ametys
 
Mettre en place un portail Internet / Intranet interfaçé avec son SI - CoTer ...
Mettre en place un portail Internet / Intranet interfaçé avec son SI - CoTer ...Mettre en place un portail Internet / Intranet interfaçé avec son SI - CoTer ...
Mettre en place un portail Internet / Intranet interfaçé avec son SI - CoTer ...
Ametys
 
Gestion multisites - Retours d'expérience et solutions avec le CMS Ametys - C...
Gestion multisites - Retours d'expérience et solutions avec le CMS Ametys - C...Gestion multisites - Retours d'expérience et solutions avec le CMS Ametys - C...
Gestion multisites - Retours d'expérience et solutions avec le CMS Ametys - C...
Ametys
 
Ametys - Integrer votre CMS à votre système d’information
Ametys - Integrer votre CMS à votre système d’informationAmetys - Integrer votre CMS à votre système d’information
Ametys - Integrer votre CMS à votre système d’information
Ametys
 
Social Media : 6 étapes pour réussir votre stratégie sur les médias sociaux
Social Media : 6 étapes pour réussir votre stratégie sur les médias sociauxSocial Media : 6 étapes pour réussir votre stratégie sur les médias sociaux
Social Media : 6 étapes pour réussir votre stratégie sur les médias sociaux
Ametys
 
10 astuces pour bien utiliser Twitter
10 astuces pour bien utiliser Twitter10 astuces pour bien utiliser Twitter
10 astuces pour bien utiliser Twitter
Ametys
 
Ametys CMS Java Open Source : Ergonomie & simplicité d'utilisation
Ametys CMS Java Open Source : Ergonomie & simplicité d'utilisationAmetys CMS Java Open Source : Ergonomie & simplicité d'utilisation
Ametys CMS Java Open Source : Ergonomie & simplicité d'utilisation
Ametys
 
IHM et ergonomie du CMS open source Ametys LTE
IHM et ergonomie du CMS open source Ametys LTEIHM et ergonomie du CMS open source Ametys LTE
IHM et ergonomie du CMS open source Ametys LTE
Ametys
 
Web accessibility with Ametys CMS
Web accessibility with Ametys CMSWeb accessibility with Ametys CMS
Web accessibility with Ametys CMS
Ametys
 
Intégrer votre catalogue de formation en ligne avec Ametys
Intégrer votre catalogue de formation en ligne avec AmetysIntégrer votre catalogue de formation en ligne avec Ametys
Intégrer votre catalogue de formation en ligne avec Ametys
Ametys
 
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...
Ametys
 
Principales fonctionnalités du CMS Ametys
Principales fonctionnalités du CMS AmetysPrincipales fonctionnalités du CMS Ametys
Principales fonctionnalités du CMS Ametys
Ametys
 

Plus de Ametys (13)

Refonte intranet Open Source avec Ametys, retour d'expérience du Conseil Géné...
Refonte intranet Open Source avec Ametys, retour d'expérience du Conseil Géné...Refonte intranet Open Source avec Ametys, retour d'expérience du Conseil Géné...
Refonte intranet Open Source avec Ametys, retour d'expérience du Conseil Géné...
 
Refonte intranet du Conseil Général de la Drôme avec le CMS open source Amety...
Refonte intranet du Conseil Général de la Drôme avec le CMS open source Amety...Refonte intranet du Conseil Général de la Drôme avec le CMS open source Amety...
Refonte intranet du Conseil Général de la Drôme avec le CMS open source Amety...
 
Mettre en place un portail Internet / Intranet interfaçé avec son SI - CoTer ...
Mettre en place un portail Internet / Intranet interfaçé avec son SI - CoTer ...Mettre en place un portail Internet / Intranet interfaçé avec son SI - CoTer ...
Mettre en place un portail Internet / Intranet interfaçé avec son SI - CoTer ...
 
Gestion multisites - Retours d'expérience et solutions avec le CMS Ametys - C...
Gestion multisites - Retours d'expérience et solutions avec le CMS Ametys - C...Gestion multisites - Retours d'expérience et solutions avec le CMS Ametys - C...
Gestion multisites - Retours d'expérience et solutions avec le CMS Ametys - C...
 
Ametys - Integrer votre CMS à votre système d’information
Ametys - Integrer votre CMS à votre système d’informationAmetys - Integrer votre CMS à votre système d’information
Ametys - Integrer votre CMS à votre système d’information
 
Social Media : 6 étapes pour réussir votre stratégie sur les médias sociaux
Social Media : 6 étapes pour réussir votre stratégie sur les médias sociauxSocial Media : 6 étapes pour réussir votre stratégie sur les médias sociaux
Social Media : 6 étapes pour réussir votre stratégie sur les médias sociaux
 
10 astuces pour bien utiliser Twitter
10 astuces pour bien utiliser Twitter10 astuces pour bien utiliser Twitter
10 astuces pour bien utiliser Twitter
 
Ametys CMS Java Open Source : Ergonomie & simplicité d'utilisation
Ametys CMS Java Open Source : Ergonomie & simplicité d'utilisationAmetys CMS Java Open Source : Ergonomie & simplicité d'utilisation
Ametys CMS Java Open Source : Ergonomie & simplicité d'utilisation
 
IHM et ergonomie du CMS open source Ametys LTE
IHM et ergonomie du CMS open source Ametys LTEIHM et ergonomie du CMS open source Ametys LTE
IHM et ergonomie du CMS open source Ametys LTE
 
Web accessibility with Ametys CMS
Web accessibility with Ametys CMSWeb accessibility with Ametys CMS
Web accessibility with Ametys CMS
 
Intégrer votre catalogue de formation en ligne avec Ametys
Intégrer votre catalogue de formation en ligne avec AmetysIntégrer votre catalogue de formation en ligne avec Ametys
Intégrer votre catalogue de formation en ligne avec Ametys
 
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...
 
Principales fonctionnalités du CMS Ametys
Principales fonctionnalités du CMS AmetysPrincipales fonctionnalités du CMS Ametys
Principales fonctionnalités du CMS Ametys
 

Livre blanc : Les tendances du web design 2018

  • 1. Les tendances du web design 2018 Livre blanc
  • 2. De l’adoption massive de l’internet, la démocratisation du mobile à l’avènement des objets connectés et la technologie immersive alliant réel et virtuel, l’histoire du web design est en constante évolution. Décryptons les dernières grandes tendances créatives qui font le web d’aujourd’hui et de demain. Les tendances du web design 2018 Livre blanc
  • 3. 1. Introduction 4 2. L’évolution du web design 6 3. Huit tendances du web design 10 # 1 Les navigations originales 10 # 2 Les écrans divisés 20 # 3 Les couleurs vives et les dégradés 25 # 4 La typographie 29 # 5 L'iconographie 32 # 6 Les animations et les micro-interactions 38 # 7 Les grilles et les colonnes 43 # 8 Les formes et les motifs 47 4. Conclusion 50 Sommaire 3 www.ametys.org
  • 5. Le web design se situe à la frontière entre la forme et la fonctionnalité. Entre technologie et créativité, nombreux sont ceux qui ignorent sur quel pied danser. Nous parlons beaucoup aujourd'hui d'ergonomie et d'expérience utilisateur, ces notions sont-elles pourtant identiques ? Chez Ametys, nous vous proposons une méthode de conception web associant plusieurs métiers aux préoccupations distinctes mais complémentaires : • Nos ergonomes conçoivent des interfaces en se focalisant avant tout sur leur utilisabilité, sur leur utilité en se basant sur des arguments rationnels. • Nos UX designers intègrent les notions d’émotions, d’affect pour proposer des interfaces, ou plutôt des expériences, toujours utiles et utilisables mais aussi plus conviviales et plus désirables. Cependant, face au tumulte des tendances créatives aujourd'hui, aux nouveautés tant en termes de concepts que de solutions technologiques, comment faire le bon choix ? Quelles sont les orientations graphiques à privilégier aujourd'hui? Quels sont les pièges à éviter ? Ce livre n'a aucunement vocation à fournir une liste exhaustive des tendances en web design. Notre contribution est de vous aider à vous orienter dans votre réflexion ergonomique et créative, de vous apporter quelques ingrédients jugés utiles, à notre sens, et de vous aider à mieux comprendre des concepts avec lesquels nous travaillons quotidiennement. Nous vous souhaitons une bonne lecture, en espérant qu’elle vous soit agréable et utile. 5 www.ametys.org
  • 7. La conception web est une industrie en perpétuelle mutation. Elle doit son évolution à la technologie. L'internet des années 1990-début 2000, considéré comme le « web statique » ou le « web 1.0 », est un réseau de sites simples dont le contenu est rarement mis à jour et où l'interaction avec les utilisateurs est très faible. Les premiers web design sont alors conçus en fonction des limitations du HTML et contraignent fortement la créativité. L'avènement du web 2.0 (2003-2010), souvent appelé « web participatif » ou « web social » pousse à la décomplexification des technologies au profit de la simplicité d'utilisation. L'utilisateur devient acteur, il créé et partage de l'information. La conception est désormais centrée sur l'utilisateur. Les web designers conçoivent des interfaces ergonomiques dans le but de « civiliser » les pages web et familiariser les internautes à la navigation web. Les graphiques et les boutons surdimensionnés, les bulles et les ombres brillantes sont des exemples de graphisme de l'époque. Le skeuomorphisme se développe sous l'impulsion d'Apple de 2011 à 2012. Cette tendance consiste à donner à un élément de design l’apparence de l’objet physique correspondant à son usage. Le skeuomorphisme permet de guider et rassurer les utilisateurs avec un design familier. Cette tendance joue sur l'affordance, c'est-à- dire la capacité d'un objet à suggérer sa propre utilisation. Les exemples les plus courants sont les icônes d'Apple pour IOS6 avec notamment le symbole du combiné téléphonique pour l'icône Téléphone ou le symbole de l'enveloppe pour l'icône Mails. 7 www.ametys.org
  • 8. Le Flat Design, courant opposé au skeuomorphisme, est apparu fin 2012, courant 2013 porté par Microsoft avec Windows 8 et Apple avec IOS7. Le constat est simple : le besoin de continuité et d'éducation au web n'est plus une nécessité, l'avènement du mobile et l'appropriation massive des technologies a bouleversé nos quotidiens. Le Flat Design prend le parti du minimalisme et de la lisibilité. Il exclut les effets de profondeur, d'ombre portée ou de reflets. Ces designs sont plats, sans bordures, et privilégient l’efficacité, notamment dans l’utilisation de l’espace. Depuis 2014, le Material Design, initié par Google, s'est imposé. Ce courant conserve les fondamentaux du Flat Design tout en apportant du mouvement et de la perspective. Il ajoute des formes géométriques, des ombres diffuses avec plusieurs niveaux de profondeur. En 2017, la tendance est aux hybrides, on parle de Semi Flat Design ou Material Design Lite. Ce mouvement tend à apporter du volume pour un aspect tridimensionnel avec des dégradés, des ombres portées diffuses ou des ombres internes, des superpositions de couches pour multiplier l'animation. Un nouveau concept, porté par Microsoft, est né en 2017 : le Fluent Design System. Il est basé sur 5 principes de design : la lumière, la profondeur, le mouvement, le matériel, et l'échelle. Ce courant apporte des effets de flous, des jeux de lumière et une gestion de la profondeur des éléments superposés à l’écran. 8 www.ametys.org
  • 10. Télécharger l’intégralité du livre blanc www.ametys.org Télécharger
  • 11. Ametys Ametys est née dans les années 2000 d'une équipe d'experts passionnés des TIC et spécialisés dans les solutions de gestion de contenus innovantes. Depuis plus de 10 ans, nous accompagnons les établissements d’enseignement supérieur, les administrations publiques et collectivités locales dans la mise en place de leurs projets numériques. Avec nos solutions, les collectivités locales et les établissements d’enseignement supérieur peuvent réaliser de nouvelles expériences digitales, travailler et collaborer ensemble tout en utilisant une technologie 100% open source répondant à leurs besoins métiers. • Pôles métiers : Ametys Campus et Ametys Territorial • Savoir-faire : Sites web, offre de formation, portails citoyens, intranet collaboratif, stratégie digitale et web design • Solutions : Ametys Portal, Ametys Workspaces, Ametys ODF
  • 12. Solutions digitales pour l’Education et les Collectivités locales 05 62 19 19 00 info@ametys.org www.ametys.org