Formation Design et ergonomie mobile

Designez un site responsive dans un environnement multiplateforme : stratégie et ergonomie mobile, design, expérience utilisateur et gestion de projet web orienté vers le mobile.

Public

Cette formation s'adresse aux designers et directeurs artistiques qui souhaitent apprendre les bases de la conception mobile et responsive, aux chef de projet et communicants ayant à intervenir sur un projet de site web mobile mais peu familiers avec le code et la technique ainsi qu'à toute personne nécessitant d'intervenir sur des décisions de design sans disposer de toutes les maquettes mobiles.

Objectifs

Comprendre les enjeux de la mobilité au niveau de l’ergonomie, du design et de la gestion de projet que ce soit sur de l’applicatif ou du site web, et proposer à son client la solution la mieux adaptée pour son projet.

La formation théorique est accompagnée de plusieurs exercices de mise en pratique. Nous aborderons la hiérarchisation et priorisation de contenus, le prototypage papier et l’analyse de sites. Durant les deux jours, un atelier de création d’un site optimisé mobile nous servira de fil conducteur pour la mise en application des bonnes pratiques et techniques. Attention, il n'y aura pas de code à produire durant cette formation.

Prérequis

Connaissances en design et outils graphiques, comprendre le fonctionnement de base d'un site (HTML pour la structure, CSS pour la mise en forme, sans forcément savoir coder pour autant) est un plus.

Moyens pédagogiques

Dans le cas de sessions inter-entreprises, à Strasbourg ou à Paris, la formation est dispensée dans les salles pédagogiques adaptées à des apprentissages informatiques : capacité de 1 à 7 personnes, équipement informatique fourni pour chacun des stagiaires, vidéo-projecteur et paperboard.

Suivi et appréciation des résultats

L'exécution physique de l'action de formation est suivie à l'aide de feuilles de présence émargées par demi-journée par les stagiaires et le formateur.

État des lieux de la mobilité

  • Acteurs et OS sur le marché
  • Comprendre les comportements utilisateur sur mobile

Application, site dédiée, site responsive, adaptive, mais de quoi on parle au juste ?

  • L’application dédiée : avantages et limites
  • Le site mobile dédié : avantages et limites
  • Le site responsive “ au chausse pied ”
  • Le responsive “ mobile first ”
  • Stratégies mixtes pour une transition en douceur

Définition du besoin et lancement du projet

  • Challenge : expliquer le responsive aux décideurs, les piège à éviter
  • Définition du projet en amont
  • Contraintes mobiles sur le cahier des charges
  • Inventaire de composants et fonctionnalités qui impacteront la mobilité

Ergonomie et bonnes pratiques générales de conception mobile

  • S'adapter aux autres contraintes de l’appareil (survol, tailles de zones au touch, typographie, etc.)
  • Designer pour les gestes et les interactions
  • Étude de cas pratique
  • S’approprier les capacités des appareils (APIs HTML5, géolocalisation, icône d'accueil, etc.)

Comprendre son utilisateur : méthode de conception centrée utilisateur

  • Persona
  • Mise en pratique

Architecture d’information et parcours utilisateur

  • Choisir un système d’architecture d’information adapté à son besoin
  • Modéliser le parcours utilisateur

Gestion et organisation des contenus

  • Modèle et inventaire de contenus
  • Stratégie de priorisation des contenus en fonction de la taille du média
  • Créer du contenu adaptatif et réutilisable : Systèmes de gestion de contenu, créateurs webs, etc.

Chorégraphie de contenu : mise en page fluide basée sur la taille du navigateur

  • Notion de points de rupture (breakpoints)
  • Exemples de ré-agencement de contenu illustrés
  • Le dilemme de la sidebar
  • Création d’un graphique de points de rupture pour communiquer le responsive aux développeurs (zoning)

Adaptation des points bloquants de l’interface

  • Wireframe de points bloquants : communiquer les éléments complexes d’interface à différentes tailles
  • Concevoir un menu de navigation adapté au mobile : menu simple, à plusieurs niveaux et architecture complexe
  • Les tableaux responsive
  • Cartes, carrousels et sliders
  • Les onglets sur mobile
  • Améliorer les éléments de formulaire sur mobile
  • (Bonus : La gestion de la publicité en responsive)
  • Ressources utiles pour trouver de l’inspiration d’éléments complexes

Outils de prototypage : pour une conception plus flexible

  • Pourquoi prototyper
  • Prototypes papier et tests
  • Prototypes cliquables
  • Prototypes HTML/CSS : designer le responsive directement dans le navigateur

Design Modulaire : vers de nouvelles façons plus flexibles de concevoir un design multi-supports

  • Design modulaire et consignes de redimension
  • Artboards (Photoshop / Sketch / Illustrator) : vers une évolution de nos outils de conception
  • Guide des styles : le document de communication indispensable entre les équipes

Tests et recette : étape importante du processus de design

  • Outils de live reload pour tester et recetter plusieurs appareils en même temps
  • Priorisation des corrections de bugs
  • Recette graphique : communication designer / développeur

Exemples de diaporamas de la formation

Besoin d'un financement ?

Une formation est un investissement, pour mieux vous permettre de vous former, des possibilités de financement vous sont proposées.

Voir les différents financements

À la suite de cette formation, nous vous recommandons :

Témoignages

Ils ont aimé

La formatrice maitrise parfaitement son sujet. Je regrette nullement d'avoir suivi cette formation, car j'ai pu y apprendre des techniques de travail que je vais pouvoir utiliser pour la refonte de notre site.
La formation répond à toutes les questions que je me suis posé initialement ... et bien plus encore "j'aimerais concevoir un site optimisé pour les mobiles, que faut-il prévoir, quelles sont les étapes pour y parvenir, comment gérer ce projet, par quoi vais-je commencer ?" Ce que j'ai apprécié ce sont les compétences pédagogiques et professionnelles de Stéphanie la formatrice, ses petits ateliers de mise en pratique très créatifs, en appliquant des méthodes plutôt originales et incroyablement efficaces, pour au final obtenir une ergonomie de site pour mobile, fonctionnelle et exploitable. Deux jours de formation, durant lesquels sont partagés d'importants flux d'informations pertinentes à un rythme soutenu, dans la bonne humeur et dans une structure d'accueil confortable et très sympathique.

Validez vos connaissances avec la certification HTML / CSS Alsacréations

La Certification “HTML/CSS” Alsacréations est une validation de vos acquis d'intégrateur ou développeur front-end. Elle est un gage de compétences, vous permet de vous auto-évaluer et peut être mise en avant sur votre CV : votre score reflète des compétences professionnelles spécifiques que les employeurs apprécient.

Envie de connaître la date
de nos prochaines formations ?

Calendrier des formations

Nous contacter

Téléphone : 09 54 96 50 50 Adresse e-mail : contact alsacreations point fr

Alsacréations
10 Place du Temple Neuf
67000 Strasbourg, France