Design graphique - Ophélie MANDRILLON

Les différents styles graphiques

• Pour un module e-learning
• Pour un serious game
• Autres styles

Ophélie MANDRILLON

Style Flat Design

Un style dynamique, moderne, sans effet de profondeur

Design plat : simplicité visuelle

• Fort contraste (couleurs vives/fond clair/pas de dégradé/pas de texture)
• lllustrations simplifiées mais expressives(forme géométrique/image sans relief/pictogramme-icônes simples/image vectorielle)
• Typographie simplifiée (police sans empattement/sans effet/hiérarchie taille & couleur)
• Navigation simplifiée (flèches)--> contenu accessible, attrayant et intuitif : compréhension immédiate, bonne mémorisation

Style Flat Design

Les critères de compatibilité

Public cible : Personne cherchant une interface claire, simple et accessible, adapté aux DYS Exemple de thématique de contenus : Concepts complexes car ce style permet de simplifier les idées (ex : développement web, principes de UX/UI, programmation). Support : Adapté pour tout support (responsive : application, tablette, site WEB, plateforme, diaporama, etc) Émotions : Simplicité | Clarté | EfficacitéErgonomie : Très bonne ergonomie grâce à la simplification de la navigation et des éléments plus compatibles sans relief.Tendance / Mode : Style très répandu depuis les années 2010, de nombreuses marques ont changé leur logo en prenant ce style (ex : google, apple)

Style Material Design

Conception matérielle

• Effets d'ombre (police, illustrations)

• Navigation dynamique (animations et transitions fluides)
• Couleurs primaires & secondaires (avec nuances, dégradés)

• Présentation structurée (colonnes, carte)
• Typographie simple (sans empattement, hiérarchisée)--> bonne expérience utilisateur, éléments réalistes

Style Material Design

Les critères de compatibilité

Public cible : Public assez large cherchant à allié l'ergonomique, l'interactif grâce aux éléments dynamiques et le réaliste grâce aux effets de profondeur (utile dans certains domaines comme l'architecture). Exemple de thématique de contenus : Support : Souvent sur support smartphone/tablette (application, site web, plateforme) Émotions : Dynamisme - Interactivité| Accessibilité | Modernité | Énergique.Ergonomie : Très bonne ergonomie, navigation facilitée par les animations.Tendance / Mode : Assez répandu, très utilisé pour les éléments sur téléphone.

Un style minimaliste "Less is more" Ledwig Mies Van der Rohe

Style Minimaliste

Conception très épurée

• Épuré (espaces vides, blanc)

• Pas de distraction visuelle (concentration sur le fonctionnel/ icônes très sobres)

• Peu de couleurs (palette restreinte, couleurs monochrone)

• Peu d'ombres et de profondeur
• Typographie simple (sans empattement, hiérarchisée)--> permet d'aller à l'essentiel, bonne clarté

Style Minimaliste

Les critères de compatibilité

Public cible : Public recherchant un design épuré et fonctionnel, souhait de montrer son expertise Exemple de thématique de contenus : Secteur du luxe, de la mode ou de la technologie. Support : Varié grâce à son ergonomie : application, site WEB, diaporama, etc Émotions : Professionnel - sérieux --> épuré ; Calme | Sénénnité --> contenu allégé Ergonomie : Très bonne ergonomie grâce à la simplicité en termes de navigation, de visuel, etcTendance / Mode : Se retrouve notamment dans le positionnement haut de gamme, installé depuis longtemps sur le marché.

Un style manuscrit avec des dessins, une police inspirée de l'illustration

Style Illustratif

Illustrations détaillées

• Beaucoup d'illustrations (personnages, concepts représentés par des illustrations, narration visuelle)

• Style personnalisé avec des dessins (dessiné à la main, personnages animés, caricature, bande dessinée --> illustrations parfois uniques)

• Police créative (ex : manuscrite)

• Diverses couleurs (couleur vives, motifs variés)

--> crée un ensemble immersif, ludique et captivant grâce à la diversité d'éléments visuels--> Permet de rendre des informations complexes plus accessibles

Style Illustratif

Les critères de compatibilité

Public cible : Adapté aux enfants grâce aux illustrations mais également aux plus grands / public dans le domaine artistique. Exemple de thématique de contenus : Visualisation de concepts / Sujet de sensiblisation pour les enfants / Frise chronologique, etc Support : Plus adapté sur ordinateur / livre (vidéo, jeux), affiche, application, infographie, diaporama Émotions : Ludique | Amusant | Parlant | Créatif | Imaginatif | Stimulant - EngagantErgonomie : Point faible (lillustrations : peut compliquer la lisibilité et la navigation)Tendance / Mode : A la mode notamment pour transmettre des informations aux enfants

Style Vintage

Un style ancien inspiré des années 60-80

Ambiance retro

• Typographie (police ancienne : avec empattement, police arrondie)

• Illustrations vieillies (texture papyrus, images abîmées, etc)

• Prédominance des tons marrons/beiges allié à des couleurs chaudes

--> Immersif, crée une ambiance

Style Vintage

Les critères de compatibilité

Public cible : Public ancien, ou intéressé par l'histoire, le retro, la culture, l'art. Exemple de thématique de contenus : Permet de créer un véritable univers pour du contenu historique ou pour créer une atmosphère particulière dans un serious game par exemple. Support : Application, site internet, vidéo, diaporama, etc Émotions : Authenticité | Nostalgie | Voyage dans le temps | ImmersifErgonomie : Point faible (aspect visuel moins fonctionnel)Tendance / Mode : Effet de mode, de retour depuis 2010.

Style High-Tech

Un style épuré, inspiré des technologies

Ambiance futuriste

• Couleurs froides + couleurs neutres (notamment le gris pour un effet métallique)

• Police moderne (style digital)

• Illustrations modernes (motifs digitaux/science/technologie/architecture, lumière, 3D, etc)

--> Crée une ambiance innovante, moderne et futuriste

Style High-Tech

Les critères de compatibilité

Public cible : Technophiles, gamers, entreprises high-tech, jeunes. Exemple de thématique de contenus : Technologies avancées, IA, présentation de produits innovants (ex : robotique), gaming Support : Adapté pour divers supports (webinaire, VR, AR, application avancée, LMS avec plugin ou technologie avancée, tableau blanc, diaporama) Émotions : Futuriste | Évolution - Progrès | Novateur | ModerneErgonomie : Bonne ergonomie (fluidité)Tendance / Mode : Très répandu dans le secteur des startups et dans le domaine technologique.

Style 3D

Un style réaliste

Immersif

• Figures 3D (animations, illustrations en 3D)

• Police moderne (pas d'empattement)

--> Permet des simulations, visualisations : une bonne immersion, un contenu parlant

Style 3D

Les critères de compatibilité

Public cible : Gamers, jeunes, public recherchant des expériences visuelles immersives (ex : réalité virtuelle/augmentée) et interactives (ex : animation 3D). Exemple de thématique de contenus : Animation 3D dans le médical, jeux éducatifs, simulation pour apprendre une nouvelle pratique, cours d'architecture, etc Support : Restreint : nécessite des technologies avancées (animation 3D : vidéo, image, etc) Émotions : Immersif | Réaliste | Interactif | CréatifErgonomie : Point faible : implémentation difficile sur les plateformes classiques. Une ergonomie spécifique doit être mise en place (adaptée à la navigation en 3D et à l’interaction immersive).Tendance / Mode : En croissance

Style gamifié

Un style dynamique et ludique

Jeux

• Éléments de jeu (Personnage, avatar, histoire)

• Compétition (défi, récompenses, enjeux)

• Illustrations nombreuses (Icônes colorés, etc)

• Niveau de progression (badge, score)

• Feedback immédiat
• Couleurs dynamiques

--> Suscite l'engagement, contenu motivant, ludique

Style gamifié

Les critères de compatibilité

Public cible : Public jeune / Attiré par les jeux, à la recherche d'interactivité, public qui a besoin d'un contenu motivant (ludique). Exemple de thématique de contenus : Adapté pour apprendre des pratiques répétitives ou des notions qui demandent un apprentissage continue (ex : langues étrangères). Support : Smartphone, tablette, ordinateur : application / LMS, etc. Émotions : Excitation | Motivation | Engagement.Ergonomie : Ergonomique avec une utilisation avec modération. L'interaction, la navigabilité et les feedbacks sont des éléments ergonomiques dans ce style.Tendance / Mode : Se développe de plus en plus dans divers domaines pour rendre les contenus plus attrayants.

Les autres styles graphiques

Hors e-learning et serious game

Style Inversé/Négatif

Style Hypnotique

Style art brut

Ces styles d'ordre plutôt artistique ne sont pas adapté à l'éducation et à l'apprentissage en terme de navigation, de compréhension, de lisibilité

Thank you!