Approfondissement

Product designer : entre branding Web et création d’interfaces utilisateurs


De la compréhension du métier au design d’interfaces, appréhender les compétences liées au développement de produits ou services numériques
2 jours / 15 heures
Prix : 1 350 € HT
Réf. : W01
(14 heures collectives + 1 heure de mentorat distanciel)

Compétences visées

Imaginer et décliner une direction artistique puis la déployer, via la création d’éléments d’interfaces et une réflexion sur son usage, dans le cadre d’une conception Web centrée utilisateurs (UI).

Objectifs

  • Organiser des cahiers de tendance d'inspiration UI et Branding
  • Décliner une identité adaptée à un service en ligne
  • Élaborer les pages clés d'un site (landing page, page produit, contact…)
  • Partager son travail avec les différents acteurs du projet

Public concerné

Cette formation s’adresse aux directeurs artistiques et aux graphistes.

Prérequis

Il est nécessaire de posséder une culture en Webdesign pour suivre cette formation.

Programme

Organiser des cahiers de tendance d'inspiration UI et Branding

  • Appréhender les différentes manières de s'inspirer quotidiennement
  • Créer des mots-clefs liés au projet pour optimiser sa recherche
  • Comparer et utiliser les bons outils (Pinterest, Behance, Dribbble…) pour organiser sa veille créative
  • Mettre en place des moodboards commentés pour préparer son branding
-> Partage d’expériences / Analyse des meilleurs sites d'inspiration / Analyse de sites remarquables / Collecte et organisation de visuels

Décliner une identité adaptée à un service en ligne (marque, conseil, ecommerce…)

  • Analyser et évaluer le brief client pour le paralléliser avec les besoins / l’expérience utilisateurs
  • Initier une direction artistique basée sur les grands principes du Design émotionnel
  • Présenter efficacement sa DA au client : parfaire son argumentaire et anticiper la critique
-> Exercice : mettre en place des styles graphiques et concepts d'identité de marque qui serviront au futur design system

Élaborer les pages clés d'un site (landing page, page produit, contact…)

  • Créer les wireframes basés sur le brief client
  • Tester différents outils (Figma et / ou Sketch et / ou XD) pour réaliser l'UI (boutons, menu, formulaires…)
  • Mettre en place les bases d'un design system pour aider les futurs intégrateurs
  • Finaliser les pages
-> Exercice : créer les pages de contenu dans le respect de la direction artistique et de l'UI 

Partager son travail avec les différents acteurs du projet

  • Instaurer une méthode efficace pour communiquer avec les développeurs et le client
  • Synthétiser le design system au travers d'un guide de style (style guide) documenté
  • Exporter les différents assets qui faciliteront l’intégration Front-end
-> Exercice : initier la création d’un design system, utiliser les différentes solutions de partage en ligne et optimiser ses fichiers pour l’export

Profil de l’intervenant

Directeur artistique / Product Designer avec plus de 10 ans d'expérience en enseignement.

Les + de Swash

Ressources

Image
étapes:
Chaque participant bénéficie de 6 mois d'abonnement à étapes (3 numéros)
Image
Tuto.com
Chaque participant bénéficie de 3 mois d'abonnement à tuto.com

Partager :

Modalités en présentiel

Parcours pédagogique :

Questionnaire de positionnement 2 jours présentiel continus Mentorat distanciel (1 heure en tête à tête avec l'intervenant)

Méthode pédagogique :

Expositive + démonstrative : exposés théoriques, démonstrations, mise en pratique, analyse collective, feedbacks personnalisés, mentorat

Moyens techniques :

  • 1 poste par participant (Mac ou PC, selon votre choix), avec les logiciels utiles, fourni par nos soins
  • Poste de l’intervenant relié à un grand écran ou vidéoprojecteur

Modalités en distanciel

Parcours pédagogique :

Questionnaire de positionnement 2 classes virtuelles discontinues (2 x 1 jour) Exercices intersessions  Mentorat distanciel (1 heure en tête à tête avec l'intervenant)

Méthode pédagogique :

Expositive + démonstrative : exposés théoriques, démonstrations, mise en pratique, analyse collective, travail individuel inter-sessions, feedbacks personnalisés, mentorat

Moyens techniques :

  • Classes virtuelles créées par nos soins
  • Chaque apprenant participe à la session avec son ordinateur, connecté à Internet et équipé :
    • d’un micro et d’une caméra
    • des logiciels : Figma et / ou Sketch et / ou Adobe XD
    • d’un double écran (recommandé mais non nécessaire)

Évaluation

  • Validation des acquis pendant la formation grâce à des mises en situation et des exercices pratiques
  • Suivi d'acquisition des objectifs pédagogiques par l'intervenant
  • Évaluation à chaud (remplie en fin de formation) et à froid (à 60 jours)

Dernière mise à jour le 19 septembre 2022