retour-formations

Responsive Web Design

14h

1320 €

logo-cpf

Design de site responsive

target

objectifs

Cette formation vous permet d'identifier les enjeux du contexte multi-écrans, de pratiquer la conception d'interfaces web responsive, d’en appréhender l’environnement technique, et d’appliquer les bonnes pratiques de l'ergonomie et du design d’interfaces sur les différents terminaux. Cette formation est destinée à toute personne qui désire concevoir ou designer des interfaces web responsive

Programme

  • 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, Sketch, Figma, Axure…) - 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…)


Je crée
mon profil

C'est parti !