But:

Ce cours a pour objectif d’approfondir les connaissances en développement de design d’interface en tenant compte des supports-écrans et d’appliquer leur connaissance dans de petits projets pratiques.

Mode d’enseignement:

Le cours est dispensé sous forme de théorie accompagnée de petits exercices pratiques en lien avec cette dernière. Il ne faut en aucun cas faire un projet qui se déroule sur l’ensemble du semestre.

Objectifs, compétences:

(L’étudiant est capable de:):

• Concevoir les aspects visuels en réponse à une demande de design selon un concept-cadre.
• Appliquer les règles de la microhiérarchie.
• Définir les animations adéquates à l’ergonomie de l’interface, les concevoir et les appliquer (effet volume, transitions, parallaxe, etc.).
• Gérer une hiérarchie visuelle complexe à un niveau local (Ex.: billet Facebook, carte Twitter).
• Gérer les contraintes visuelles et techniques.
• Appliquer la grille typographique et les principes d’unité et de variation.
• Utiliser adéquatement la couleur selon l’identité visuelle et les contraintes ergonomiques.
• Définir la palette de couleur et s’y tenir.
• Appliquer le principe des contrastes et des couleurs d’accent.
• Définir et appliquer adéquatement un choix de typographie selon des critères de lisibilité, de communication.
• Différencier les technologies de la typographie du web, leurs services, leurs formats.
• Choisir et définir les design patterns.
• Décrire les patterns les plus communs et leurs usages.
• Décrire et comparer les avantages et les inconvénients les plus communs des patterns.
• Argumenter le choix d’un pattern.
• Concevoir des étiquettes, dialogue, des boutons d’action, des icônes.
• Rédiger les textes des interfaces.
• Concevoir un prototype interactif.
• Concevoir un flux d’interaction complet.
• Tester des prototypes.
• Analyser un test d’utilisation.
• Concevoir un design responsive.
• Appliquer des variations de formats.
• Définir les technologies d’application : Natif, HTML, hybride.
• Définir les comportements UI ( input: Scroll, drag drop, click,etc. Feedback: hover, clicked, touched, animation).
• Analyser le marché / concurrence / images de marque.
• Analyser le public cible.
• Établir une synthèse de l’analyse.
• Proposer divers axes de communication.
• Proposer les supports de communication adéquats.
• Établir un concept de communication.
• Prendre en compte la fonction de chartes graphiques.

Exemple d’exercice:

• Analyser un brief et concevoir une proposition de design d’une application multiplatforme.
• Partager son analyse d’un design avec le reste de la classe.
• Pratiquer la recherche et le développement.
• Réaliser un dossier d’avant-projet.

Annexe:

Design-écran, UI, UX 2

Référence au plan de formation:

• 1 / 1.1 / 1.1.8 / 1.4 / 1.4.3 /
• 2 / 2.1 / 2.1.1 / 2.1.2 / 2.1.3 / 2.2 / 2.2.1 / 2.2.2 / 2.2.3 / 2.2.4 / 2.2.5 / 2.2.6 / 2.2.7 /
• 3 / 3.2 / 3.2.1 / 3.3 / 3.4 / 3.5 /