EADS 2009 – All rights reserved Graphisme – Design d’interfaces Olivier Cartaux – ISPF41 Concepteur Multimédia

EADS 2009 – All rights reserved Sommaire Introduction 1.Fonctions générales du graphisme 2.Buts et apports pour les projets 3.Quand? Quelles interventions? 4.Méthode de travail 5.Exemples de réalisations

EADS 2009 – All rights reserved Introduction Le point de départ de cette présentation est un constat :

EADS 2009 – All rights reserved Le graphisme est intégré au sein d’EADS, présentant une image forte … Un guide d’identité disponible sur l’intranet défini l’image de la société. Le graphisme est utilisé dans : - Les brochures - Les Présentations PowerPoint - Le courrier, cartes de visites - Le site Internet - Etc.

EADS 2009 – All rights reserved Mais dans les projets rencontrés …

EADS 2009 – All rights reserved Absence de mise en page

EADS 2009 – All rights reserved Problème de lisibilité

EADS 2009 – All rights reserved Graphisme dépassé

EADS 2009 – All rights reserved Le « Fait maison »

EADS 2009 – All rights reserved Problème de compréhension

EADS 2009 – All rights reserved A noter : –Le client et l’utilisateur sont expérimentés (applications Internet, avancées technologiques) –Le visuel est le premier ressenti d’un projet : Il donne au client sa première opinion sur un projet –Le graphisme est un atout face à la concurrence (pour les mêmes fonctions on choisira l’application la plus attractive) Il semble donc important de faire un point sur les apports du graphisme dans les projets.

EADS 2009 – All rights reserved 1.Fonctions générales du graphisme Le graphisme est un domaine large touchant tous les métiers. Pour cette présentation, on parlera principalement de design d’interfaces. Les fonctions du graphisme sont : –Attirer le regard –Mettre en page –Identifier –Signaler –Particularités pour l’écran (Technologies utilisées, animations, Limitations : résolutions d’écran, compression d’image) –Particularités des projets d’entreprises (recherche du fonctionnel, de la performance, de la pérennité) Le graphisme n’est pas que « dessiner » ou « rendre beau » : On s’appuie sur des éléments (objets) et des principes (concepts) pour concevoir, mettre en forme, améliorer un produit

EADS 2009 – All rights reserved 2.Buts et apports pour les projets Être en phase avec l’image de la société EADS –Le client s’attend à un certain niveau en faisant appel à nous Plaire au client –Attirer : Professionnalisme face à la concurrence –Rassurer : Montrer qu’il y a une démarche établie –Fidéliser : Impliquer le client dans le processus de création Être utile à l’utilisateur final –Simplifier, homogénéiser, rendre plus utilisable Contribuer à améliorer un projet –satisfaction d’une équipe, fierté d’un produit.

EADS 2009 – All rights reserved 3.Quand? Quelles interventions? a)Avant le projet –Appels d’offres –Présentations commerciales

EADS 2009 – All rights reserved b)Dans l’idéal : être intégré au départ du projet Aide à la conception et à la compréhension du projet 3.Quand? Quelles interventions?

EADS 2009 – All rights reserved

Création d’une identité visuelle du projet 3.Quand? Quelles interventions?

EADS 2009 – All rights reserved

Charte graphique

EADS 2009 – All rights reserved c)Sinon : En cours de projet –Mise à jour d’une charte existante –Intégration du style graphique sur certaines technologies (css, templates cms, themepack java) –Validation de l’intégration du graphisme 3.Quand? Quelles interventions?

EADS 2009 – All rights reserved Définition de l’intervention (logo, charte, maquettage, skin): limites et planning 4.Méthode de travail

EADS 2009 – All rights reserved Prise de brief (souvent sans le client) : comprendre la demande –Contexte –Problématique –Objectifs –Cible –Message –Contraintes –Planning 4.Méthode de travail

EADS 2009 – All rights reserved Récupération de l’existant ou de ressources 4.Méthode de travail

EADS 2009 – All rights reserved

Maquettage Validations et modifications par itérations 4.Méthode de travail

EADS 2009 – All rights reserved Livrables : –Maquettes images –Images prédécoupées et icônes –Charte graphique (ou guide) pour aider à l’intégration

EADS 2009 – All rights reserved 5.Quelques Exemples de réalisations

EADS 2009 – All rights reserved Icônes

EADS 2009 – All rights reserved Logos

EADS 2009 – All rights reserved Recce Engine

EADS 2009 – All rights reserved

Splash Screen Pharos

EADS 2009 – All rights reserved Mise en page Pharos

EADS 2009 – All rights reserved SIMS : Avant intervention

EADS 2009 – All rights reserved SIMS : Après intervention