UX/UI, Ergonomie et Webdesign

Objectifs

• Cette formation Design Web Responsive vous permet d'identifier les enjeux et le contexte propre aux multi-écrans
• Pratiquer la conception d’interfaces Web Responsive
• Appliquer les bonnes pratiques de l’ergonomie et de l’UI Design sur les différents terminaux

Programme

IDENTIFIER LES ENJEUX ET LE CONTEXTE PROPRE DU MULTI-ECRANS

• Identifier le contexte multi-écrans
• Examiner les statistiques de consultation du web sur les différents devices
• Décrire les spécificités et contraintes des différents devices
• Décrire les règles fondamentales du design visuel sur écran
• Définir les différentes familles et tailles d’écran
• Définir la notion de Web Responsive Design
• Savoir nommer les zones et éléments d’interface
• Identifier les enjeux essentiels d’une expérience tactile et mobile
• Évaluer les bénéfices et les limites du Responsive

ATELIER 1

• Analyser de sites responsive « primés »
• Evaluer les bonnes et mauvaises pratiques en responsive web design

DESIGNER DES INTERFACES WEB

• Définir les notions d’accessibilité, d’ergonomie et d’UX design
• Connaître les méthodes de conception centrée utilisateur
• Différencier les notions de zoning, de wireframes et de mockup
• Lister et décrire les principales règles de l’ergonomie d’interface (ISO 9 241)
• Identifier les grandes tendances de l’UI design

IDENTIFIER LES LANGAGES WEB FRONT-END

• Identifier les parties statiques et dynamiques de l’interface
• Différencier le Web front-end et Web back-end
• Identifier les principales méthodes de développement Web front-end
• Identifier le rôle des langages HTML, CSS et JavaScript
• Décrire les apports de HTML 5 et CSS 3 dans la conception d’interface riche
• Identifier les éléments d’interface courant du Web (JQuery UI, JQuery mobile)
• Décrire le fonctionnement des Web fonts
• Identifier les APIs HTML 5 orientées mobile et leurs possibilités
• Différencier le web mobile, des applications mobile native ou hybride

DESIGNER DES INTERFACES WEB RESPONSIVE

• Décrire les principes du Web Responsive Design (grille et media fluide, media queries)
• Savoir définir les points de rupture
• Examiner les théories de « Mobile First », «Tablet First ».
• Identifier les différents layout et design patterns spécifiques responsive
• Utiliser les systèmes de grille conformes à CSS dans la structuration d’une maquette
• Déterminer le comportement fluide ou fixe de la grille et des éléments
• Déterminer le comportement du contenu et des médias
• Lister les spécificités de l’ergonomie tactile et de l’ergonomie mobile
• Organiser l’architecture de sa maquette en fonction du device et de la modification d’état des éléments d’interface
• Utiliser des outils de test d’une intégration responsive

ATELIER 2

• Concevoir les maquettes pour desktop, tablette et smartphone d’un site Web responsive
• Appliquer les méthodes de conception centrée utilisateur
• Appliquer les règles d’architecture de documents propres au Web
• Appliquer les systèmes de grille conformes à CSS