Responsive Web Design.

  • Lieu :
    METZ
  • Date :
    Sur demande
  • Durée :
    14 heures
  • Tarif de la formation :
    1100 HT
  • Référencé datadock

    Datadock certifie la qualité des organismes. Seuls ces centres vous permettent de bénéficier d'un financement pour votre formation.

  • Éligible CPF

    Vous pouvez utiliser vos heures CPF pour suivre une formation.

  • Codes CPF :

  • Pré-requis :
    Une maîtrise d'un logiciel de graphisme ou de wireframing est un plus pour suivre cette formation.
  • Formation certifiante

  • Public concerné :
    Toute personne qui désire concevoir ou designer des interfaces web responsive.
  • Cette formation est exclusivement réalisée à distance

OBJECTIFS :


  • 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 :

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 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?)

 

CONTACTER LE CENTRE Ziggourat

Les champs E-mail ne sont pas identiques

Les champs E-mail ne sont pas identiques

Le numéro de téléphone renseigné permettra à l’organisme de vous contacter :

Votre adresse e-mail et votre numéro de téléphone sont collectés dans le but de vous répondre et uniquement à cette fin (voir Conditions Générales d'Utilisation)

Je souhaite qu'ICI Formation et ses partenaires me tiennent informé·e de mes droits CPF et de l'actualité de la formation professionnelle.

* Les champs avec une astérisque sont obligatoires

TOUTES LES FORMATIONS SUR LE THèME Internet, Web et Réseaux sociaux