Formation Design Web responsive

Contenu

Identifier les enjeux et le contexte propre du multi-écrans

• 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

Méthodes pédagogiques

8 participants maximum, un poste par stagiaire et un support de cours est remis pendant le stage. La formation est constituée d'apports théoriques, de démonstrations et de réflexions.

Formateur

Formateur expert en design d'interaction, spécialiste des nouvelles tendances médias.

Modalités de validation des acquis

Évaluation des acquis via un questionnaire. Attestation de fin de stage.