Design Web Responsive : Conception graphique

Les sites internet doivent s'adapter aux multiples résolutions d'écrans des utilisateurs, vous devez alors définir des maquettes qui s'adaptent aux différents formats. Notre programme de formation Photoshop : maquettes responsives vous enseignera les meilleures méthodes de travail sur Photoshop pour présenter des maquettes utilisables proposant une solution graphique pour chaque format.

Durée 2 jours soit 14.00 heures de formations de 9h30 à 18h00.

Qualité 8 stagiaires par session maximum. 1 poste Mac ou Windows par stagiaire. Support de cours accessible en ligne.

Public Graphiste, webmaster, directeur artistique, chef de projet, ou toute personne en charge de création de maquettes graphiques pour en web.

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.

Pré-requis Maîtrise de Photoshop et Illustrator

Design Web Responsive : Conception graphique

1 - L'évolutions des normes du Web

  • Evolutions des normes et multiplications des terminaux
  • Les résolutions Web, mobile, tablette et TV
  • Adaptation du contenant pour un même contenu
  • Mode paysage et portrait

2 - Méthodologie d'adaptation

  • La philosophie Mobile-First
  • Travailler en @2x
  • Les bonnes pratiques UI et UX pour du Responsive Web Design

3 - Préparation d'une maquette responsive

  • Une nouvelle conception du design
  • Apprendre les nouvelles contraintes
  • Penser flexibilité

4 - Les outils créatifs

  • Penser ergonomie et lisibilité
  • Visualiser sa maquette en temps réel
  • Création de livrables en cas multiples via les instantanés Photoshop
  • Concept de dégradation maitrisée / amélioration progressive
  • Penser à l'évolution future

5 - Adaptabilité du contenu 

  • Mobile first
  • Notion des profils côté serveur
  • Un contenu "unique" mais adapté, filtré, converti
/srv/datadisk01/home/formation/site3