Objectifs
- Comprendre les principes du Responsive Web Design.
- Concevoir des interfaces adaptées aux différents appareils.
- Appliquer les bonnes pratiques d'ergonomie, d'accessibilité et d'UX.
- Structurer des maquettes responsives à l'aide d'outils de conception.
- Anticiper les contraintes techniques liées aux différents écrans.
Compétences visées
- Concevoir des interfaces Web responsives adaptées aux usages actuels.
- Adapter une interface aux différents formats d'écran et modes d'interaction.
- Structurer une maquette responsive selon les bonnes pratiques du Web.
- Intégrer les principes d'ergonomie, d'accessibilité et d'expérience utilisateur.
- Collaborer efficacement avec les équipes de développement lors de la conception d'interfaces.
Pré-requis
Une connaissance des outils de création graphique ou de conception d'interfaces constitue un plus. Des notions de HTML et CSS sont recommandées pour mieux appréhender les contraintes techniques.
Quel profil ?
Cette formation s'adresse aux webdesigners, UX/UI Designers, intégrateurs Web, graphistes, chefs de projet et à toute personne souhaitant concevoir des interfaces adaptées aux différents supports numériques.
Formations associées
Au programme de la formation
Concevoir des interfaces Web responsives
Introduction
- Définir la notion de Responsive Web Design
- Observer des sites web responsive « primés »
- Rappeler les règles fondamentales du design visuel sur écran
- Distinguer internet, du web et des autres applications (e-mail, apps…)
- Définir les notions d'accessibilité, d'ergonomie, d'UX et d'UI design
- Nommer les zones et les composants types d’une interface
Identifier les enjeux du contexte multi-écrans
- Identifier le contexte multi-écrans, les différentes familles et tailles d'écran
- Examiner les statistiques de consultation du web sur les différents terminaux
- Comprendre la notion de fragmentation mobile (devices, OS, navigateurs)
- Décrire les spécificités des différents devices (taille, résolution, interactivité, usage, performance)
- Appréhender les enjeux essentiels d'une expérience tactile et mobile
- Décrire les principales règles de l'ergonomie d’interface (ISO 9241)
ATELIER 1 - Analyser des sites web responsives
- Identifier les points de rupture, les comportements de la grille, des composants
- Evaluer les bonnes et mauvaises pratiques en responsive web design
- Identifier les grandes tendances de l'UI design
- Évaluer les bénéfices et limites du Responsive
Concevoir des interfaces web responsive
- Comparer le responsive web aux sites mobile dédié, apps, progressive apps, …
- Décrire les principes du Web Responsive Design (grille et media fluide, media queries)
- Différencier les possibilités d’adaptation : statique, liquide, adaptatif, responsive
- Identifier les différents layouts et design patterns spécifiques responsive
- Déterminer le comportement fixe ou fluide de la grille et des éléments
- Appréhender le Mobile First « amélioration progressive » vs le Desktop First « dégradation élégante »
- Différencier les notions de zoning, wireframes, mockup et prototypes
Appréhender les contraintres techniques
- Différencier le Web front-end et Web back-end et le rôle de leur langage
- Lister les éléments d'interface courant du Web (JQuery UI, JQuery mobile)
- Appréhender les unités fluides (%, em, rem, vw, vh, vmin, vmax)
- Appréhender les techniques de design fluide : float, BFC, table-cell, calc()
- Appréhender les grilles fluides (frameworks, CSS3 Grid Layout, CSS3 Flexbox)
- Appréhender les tailles de devices (viewport, screen-width, device width, pixel ratio)
- Lister les principaux frameworks CSS Responsive (Boostrap, Semantic UI, Foundation…)
ATELIER 2 - Designer des interfaces web responsives
- Comparer les différents outils de design (Adobe, Figma,…)
- Organiser l'architecture de son fichier pour les différents devices
- Utiliser les systèmes de grille conformes à CSS dans la structuration d'une maquette
- Construire les composants et gérer leur transformation en fonction du device
- Prendre en compte les problématiques des différentes densités d’écran
- Générer les assets (.jpg, .png, .svg, …) et appréhender le fonctionnement des Web fonts
- Partager son projet avec les différentes parties-prenantes (client, développeur…)
Comment se déroule la formation ?
Chaque notion est abordée de manière concrète, puis appliquée à travers des exercices et des cas pratiques. Les groupes sont limités à 8 participants pour favoriser les échanges et permettre un accompagnement adapté à chacun.
Un support pédagogique est remis à l'issue de la formation pour retrouver facilement les notions abordées.
Comment les acquis sont-ils évalués ?
En fin de parcours, une évaluation permet de mesurer l'atteinte des objectifs pédagogiques. Selon la formation, elle peut prendre la forme d'un questionnaire, d'un exercice pratique ou d'une certification.
Le suivi est formalisé par une feuille d'émargement et une évaluation des compétences.
Autres formations de la même catégorie
Apprenez les fondamentaux du HTML5 et du CSS3 afin de créer des pages Web modernes, structurées, responsives et conformes aux standards du Web.
Approfondissez votre maîtrise du HTML5, du CSS3 et de JavaScript afin de concevoir des interfaces Web modernes, responsives et interactives.
Apprenez les fondamentaux de JavaScript afin de créer des pages Web interactives, manipuler le DOM et développer vos premières fonctionnalités côté client.
Approfondissez votre maîtrise de JavaScript en découvrant la programmation orientée objet, les design patterns et les techniques utilisées dans le développement d’applications Web modernes.
Apprenez les fondamentaux de PHP et MySQL pour créer des sites Web dynamiques, traiter des formulaires et exploiter une base de données.
Approfondissez votre maîtrise de PHP et MySQL afin de développer des applications Web plus robustes, maintenables et évolutives.
Apprenez à développer un thème WordPress personnalisé en exploitant le système de templates, les contenus dynamiques, les Custom Post Types et les champs personnalisés.
Apprenez à intégrer une maquette HTML/CSS dans WordPress et à concevoir un thème personnalisé conforme aux standards du Web et à l’architecture du CMS.
Apprenez à développer des plugins WordPress sur mesure afin d’ajouter des fonctionnalités fiables, sécurisées et adaptées aux besoins d’un projet.
Apprenez à développer et personnaliser une boutique PrestaShop en créant des modules, des hooks, des contrôleurs et des fonctionnalités adaptées aux besoins métier.
