Télécharger le programme MONTEURS, TRUQUISTES VIDéOS & SON au format PDF

Formation Responsive Web Design CPF

Design de site responsive

(13)

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.

Certifications associées

DiGiTT

Public

Toute personne qui désire concevoir ou designer des interfaces web responsive.

Durée

14 heures en présentiel sur 2 jours

Pré-requis

Une maîtrise d'un logiciel de graphisme ou de wireframing est un plus pour suivre cette formation.

Formateur

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

Méthode pédagogique

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.

Modalité de validation des acquis

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

Déroulé

JOUR 1

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

JOUR 2

APPRÉHENDER LES CONTRAINTES 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 RESPONSIVE

  • 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…)
Laurent J.
Un professeur très intéressant et passionné.
Suivie le 14/06/2018
Isabelle R.
Formateur excellent, Le formateur compétent et sympathique, connaissant bien mes problématiques, et ayant une connaissance concrète du monde de l'image grâce à ses activités annexes.
Suivie le 18/05/2018
Emmanuelle B.
On est pas trop nombreux ! Une approche du logiciel étape par étape très clair et logique.
Suivie le 18/05/2018
Sylvie G.
la clarté des explications et la disponibilité du formateur. Le fait d'être deux permet de mieux travailler. Formateur à l'écoute et clair dans ses explications.
Suivie le 18/05/2018
Danielle V.
sur mesure. tres intéressant
Suivie le 18/05/2018
Leslie G.
Formateur excellent, Le formateur compétent et sympathique, connaissant bien mes problématiques, et ayant une connaissance concrète du monde de l'image grâce à ses activités annexes.
Suivie le 08/09/2017
Sophie R.
Super, merci Christophe pour toutes ces astuces et de ta patience !
Suivie le 24/03/2017
Carine B.
explications / dynamisme du formateur Beaucoup d'exercices pratiques qui viennent compléter la théorie.
Suivie le 24/03/2017
Bruno G.
Très complet.
Suivie le 24/03/2017
Christophe M.
Bon niveau
Suivie le 27/01/2017
Delphine B.
Compétences et sympathie du formateur, lieu bien placé, Professionnalisme de l'organisation.
Suivie le 27/01/2017
Sébastien L.
Approche très pratique. Formation personnalisée.
Suivie le 27/01/2017
Hugo C.
disponible et très clair dans ses explications.
Suivie le 27/01/2017