Livrable·s parent·s

Détails

Aujourd’hui, l’aspect graphique d’une application est essentiel et est un facteur déterminant pour se démarquer de ses concurrents, mais surtout pour proposer aux utilisateurs finaux une solution qui leur convient autant que possible.

Vous définirez ainsi une identité visuelle pour votre application, tout en restant cohérent avec le sujet. Pour manifester une certaine qualité professionnelle, vous pouvez également reprendre cet aspect graphique dans vos différents livrables : documents, présentations, etc.

🎨 Aspect graphique

Vous devrez d’abord rappeler les contraintes définies sur l’aspect graphique et l’exploitation de l’application web. Certaines de ces contraintes doivent impérativement être énoncées dans le dossier de conception, d’autres sont trop techniques et ne concernent que votre façon de développer, donc elles ne seront pas prises en compte.

Rappelez-vous que ce dossier est un livrable que vous pouvez être amenés à présenter à des clients. Ils ont donc des attentes sur l’aspect graphique que vous prévoyez mettre en place et voudront avoir ces informations à disposition.

Le fait de ne pas donner suffisamment d’informations sur l’aspect graphique est un énorme risque pour un projet ; vous n’êtes pas à l’abri que le client vous demande de revoir complètement cet aspect, à vos frais…

Charte graphique

Il est important de définir les couleurs et d’autres éléments graphiques (polices d’écriture, librairie d’icônes, etc.) afin de faire vivre votre application et de la rendre plus agréable à utiliser. Ces couleurs doivent être cohérentes entre elles et ne pas être trop aggressives pour l’acuité visuelle des utilisateurs.

  • N’oubliez pas le sujet du projet et le client à l’origine de la demande. Il a sûrement déjà sa propre identité graphique qu’il voudra réutiliser dans le cadre de son application.
  • Vous pouvez vous inspirer de sites comme Color Hunt ou Adobe Color pour trouver des palettes de couleurs.
  • Gardez en tête que les couleurs ont un sens et une signification.
  • Parfois, le plus simple reste le plus efficace. Par ailleurs, un design sombre peut être plus agréable pour les yeux et moins énergivore pour les appareils mobiles.
  • Faites attention à l’accessibilité du web sur les couleurs, les contrastes, les polices d’écriture, la taille, etc.

Maquettes

Vous devrez définir des maquettes pour votre application afin de visualiser l’aspect graphique de votre application et ainsi avoir un modèle à suivre lors du développement. C’est aussi l’occasion de tester votre charte graphique et de voir si elle est cohérente et agréable à utiliser.

  • Vous pouvez utiliser des outils comme Figma, Adobe XD ou encore draw.io.
  • Vous pouvez aussi vous inspirer de sites comme Material Design ou Bootstrap pour trouver des composants graphiques.
    • Il est conseillé d’utiliser des librairies ou frameworks CSS pour votre développement, donc faites en sorte que vos maquettes puissent être réalisées avec ces choix techniques.
  • Vous pouvez tout à fait fournir des maquettes sous forme de dessins et schémas (à la main ou sur ordinateur).
    • Ce n’est pas vos compétences de designer qui sont évaluées, mais votre réflexion et votre anticipation de l’aspect graphique de votre application.
    • Faites en sorte qu’elles soient lisibles et exploitables.
  • Il ne sera pas nécessaire de fournir l’entièreté des pages de l’application, mais faites en sorte d’en fournir suffisamment pour avoir une vision globale de l’application.
    • Il n’est pas forcément nécessaire de fournir les maquettes de chaque page “Liste”, puisqu’elles sont souvent similaires.

✅ Notation

  • La note de cette partie sera définie selon les points suivants :
    • Bonne compréhension des attentes graphiques.
    • Pertinence des choix auprès du sujet et du client.
    • Qualité et la cohérence de la charte graphique.
    • Propositions de vos maquettes.