{"id":284,"date":"2021-08-02T11:35:37","date_gmt":"2021-08-02T09:35:37","guid":{"rendered":"https:\/\/www.swash-formation.fr\/?post_type=formation&#038;p=284"},"modified":"2026-04-10T15:12:37","modified_gmt":"2026-04-10T13:12:37","slug":"product-designer-entre-branding-web-et-creation-interfaces-utilisateurs","status":"publish","type":"formation","link":"https:\/\/www.swash-formation.fr\/formation\/product-designer-entre-branding-web-et-creation-interfaces-utilisateurs\/","title":{"rendered":"Product designer&nbsp;: entre branding Web et cr\u00e9ation d&rsquo;interfaces utilisateurs"},"template":"","domaine":[12],"motcle":[63,39,23,21],"metier":[52],"etiquette":[],"type_ra":[80],"logiciel":[],"class_list":["post-284","formation","type-formation","status-publish","hentry","domaine-formation-ux-ui-webdesign","motcle-experience-utilisateurs","motcle-inspiration","motcle-interface","motcle-tendances","metier-directeur-artistique","type_ra-inter","no-post-thumbnail"],"acf":{"FOR_Format":"80","FOR_SousTitre":"De la compr\u00e9hension du m\u00e9tier au design d\u2019interfaces, appr\u00e9hender les comp\u00e9tences li\u00e9es au d\u00e9veloppement de produits ou services num\u00e9riques","FOR_Jours":2,"FOR_Heures":14,"FOR_Duree":"14 heures collectives","FOR_DureeTxt":"2 jours \/ 14 heures","FOR_Prix":"","FOR_Ref":"W01 (Formation intra \/ sur mesure)","FOR_Niveau":"Approfondissement","FOR_PrixComplet":"sur demande","FOR_PrixCourt":"sur demande","FOR_Support":"","FOR_ProgPdf":"","FOR_Intervenants":"","FOR_Comp":"<p><span style=\"font-weight: 400;\">Imaginer et d\u00e9cliner une direction artistique puis la d\u00e9ployer, via la cr\u00e9ation d\u2019\u00e9l\u00e9ments d\u2019interfaces et une r\u00e9flexion sur son usage, dans le cadre d\u2019une conception Web centr\u00e9e utilisateurs (UI).<\/span><\/p>","FOR_Obj":"<ul>\r\n\t<li>Organiser des cahiers de tendance d'inspiration UI et Branding<\/li>\r\n\t<li>D\u00e9cliner une identit\u00e9 adapt\u00e9e \u00e0 un service en ligne<\/li>\r\n\t<li>\u00c9laborer les pages cl\u00e9s d'un site (landing page, page produit, contact\u2026)<\/li>\r\n\t<li>Partager son travail avec les diff\u00e9rents acteurs du projet<\/li>\r\n<\/ul>","FOR_Valider":"<ul>\r\n\t<li>votre projet et le contexte de votre demande pour co-construire le programme d\u00e9finitif<\/li>\r\n\t<li>le format\u00a0: pr\u00e9sentiel et\/ou distanciel<\/li>\r\n\t<li>le tarif\u00a0: calcul\u00e9 selon le temps de pr\u00e9paration, les moyens \u00e0 mobiliser, le nombre de jours, le lieu de la formation\u2026<\/li>\r\n\t<li>*la dur\u00e9e\u00a0: \u00e0 confirmer selon les pr\u00e9requis et les objectifs \u00e0 atteindre par les apprenants<\/li>\r\n<\/ul>","FOR_5Raisons":"","FOR_Public":"<p>Cette formation s\u2019adresse aux directeurs artistiques et aux graphistes.<\/p>","FOR_Prerequis":"<p><span style=\"font-weight: 400;\">Il est n\u00e9cessaire de poss\u00e9der une culture en Webdesign pour suivre cette formation.<\/span><\/p>","FOR_Programme":"<h3 class=\"chapitre\">Organiser des cahiers de tendance d'inspiration UI et Branding<\/h3>\r\n<ul>\r\n\t<li>Appr\u00e9hender les diff\u00e9rentes mani\u00e8res de s'inspirer quotidiennement<\/li>\r\n\t<li>Cr\u00e9er des mots-clefs li\u00e9s au projet pour optimiser sa recherche<\/li>\r\n\t<li>Comparer et utiliser les bons outils (Pinterest, Behance, Dribbble\u2026) pour organiser sa veille cr\u00e9ative<\/li>\r\n\t<li>Mettre en place des moodboards comment\u00e9s pour pr\u00e9parer son branding<\/li>\r\n<\/ul>\r\n<div class=\"exo\"><em>-&gt; Partage d\u2019exp\u00e9riences \/ Analyse des meilleurs sites d'inspiration \/ Analyse de sites remarquables \/ Collecte et organisation de visuels<\/em><\/div>\r\n<h3 class=\"chapitre\">D\u00e9cliner une identit\u00e9 adapt\u00e9e \u00e0 un service en ligne (marque, conseil, ecommerce\u2026)<\/h3>\r\n<ul>\r\n\t<li>Analyser et \u00e9valuer le brief client pour le parall\u00e9liser avec les besoins \/ l\u2019exp\u00e9rience utilisateurs<\/li>\r\n\t<li>Initier une direction artistique bas\u00e9e sur les grands principes du Design \u00e9motionnel<\/li>\r\n\t<li>Pr\u00e9senter efficacement sa DA au client : parfaire son argumentaire et anticiper la critique<\/li>\r\n<\/ul>\r\n<div class=\"exo\"><em>-&gt; Exercice : mettre en place des styles graphiques et concepts d'identit\u00e9 de marque qui serviront au futur design syste<\/em>m<\/div>\r\n<h3 class=\"chapitre\">\u00c9laborer les pages cl\u00e9s d'un site (landing page, page produit, contact\u2026)<\/h3>\r\n<ul>\r\n\t<li>Cr\u00e9er les wireframes bas\u00e9s sur le brief client<\/li>\r\n\t<li>Tester diff\u00e9rents outils <span style=\"font-weight: 400;\">(Figma et \/ ou Sketch et \/ ou XD)<\/span> pour r\u00e9aliser l'UI (boutons, menu, formulaires\u2026)<\/li>\r\n\t<li>Mettre en place les bases d'un design system pour aider les futurs int\u00e9grateurs<\/li>\r\n\t<li>Finaliser les pages<\/li>\r\n<\/ul>\r\n<div class=\"exo\"><em>-&gt; Exercice : cr\u00e9er les pages de contenu dans le respect de la direction artistique et de l'UI\u00a0<\/em><\/div>\r\n<h3 class=\"chapitre\">Partager son travail avec les diff\u00e9rents acteurs du projet<\/h3>\r\n<ul>\r\n\t<li>Instaurer une m\u00e9thode efficace pour communiquer avec les d\u00e9veloppeurs et le client<\/li>\r\n\t<li>Synth\u00e9tiser le design system au travers d'un guide de style (style guide) document\u00e9<\/li>\r\n\t<li>Exporter les diff\u00e9rents assets qui faciliteront l\u2019int\u00e9gration Front-end<\/li>\r\n<\/ul>\r\n<div class=\"exo\"><em>-&gt; Exercice : <b><i>initier la cr\u00e9ation d\u2019un design system,\u00a0<\/i><\/b>utiliser les diff\u00e9rentes solutions de partage en ligne et optimiser ses fichiers pour l\u2019export<\/em><\/div>","FOR_Profil":"<p><span style=\"font-weight: 400;\">Directeur artistique \/ Product Designer avec plus de 10 ans d'exp\u00e9rience en enseignement.<\/span><\/p>","FOR_Ressources":"<ul>\r\n\t<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Supports de cours d\u00e9mat\u00e9rialis\u00e9s<\/span><\/li>\r\n\t<li><span style=\"font-weight: 400;\">Inscription au <a href=\"https:\/\/les-swashers.swash-formation.fr\" target=\"_blank\" rel=\"noopener\">forum des swashers<\/a><\/span><\/li>\r\n<\/ul>","FOR_ModPres":"<h4>Parcours p\u00e9dagogique :<\/h4>\r\n<p><span style=\"font-weight: 400;\">Questionnaire de positionnement <span class=\"flechD\">\u276f<\/span> 2 jours pr\u00e9sentiels continus<\/span><\/p>\r\n<h4>M\u00e9thode p\u00e9dagogique :<\/h4>\r\n<p><span style=\"font-weight: 400;\">Expositive + d\u00e9monstrative : expos\u00e9s th\u00e9oriques, d\u00e9monstrations, mise en pratique, analyse collective, feedbacks personnalis\u00e9s, mentorat<\/span><\/p>\r\n<h4>Moyens techniques :<\/h4>\r\n<ul>\r\n\t<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">1 poste par participant (Mac ou PC, selon votre choix), avec les logiciels utiles, fourni par nos soins<\/span><\/li>\r\n\t<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Poste de l\u2019intervenant reli\u00e9 \u00e0 un grand \u00e9cran ou vid\u00e9oprojecteur<\/span><\/li>\r\n<\/ul>","FOR_ModDist":"<h4>Parcours p\u00e9dagogique :<\/h4>\r\n<div class=\"exo\"><span style=\"font-weight: 400;\">Questionnaire de positionnement <span class=\"flechD\">\u276f<\/span> 2 classes virtuelles discontinues (2 x 1 jour) <span class=\"flechD\">\u276f<\/span> Exercices intersessions\u00a0<\/span><\/div>\r\n<h4>M\u00e9thode p\u00e9dagogique :<\/h4>\r\n<p><span style=\"font-weight: 400;\">Expositive + d\u00e9monstrative : expos\u00e9s th\u00e9oriques, d\u00e9monstrations, mise en pratique, analyse collective, travail individuel inter-sessions, feedbacks personnalis\u00e9s, mentorat<\/span><\/p>\r\n<h4>Moyens techniques :<\/h4>\r\n<ul>\r\n\t<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Classes virtuelles cr\u00e9\u00e9es par nos soins<\/span><\/li>\r\n\t<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Chaque apprenant participe \u00e0 la session avec son ordinateur, connect\u00e9 \u00e0 Internet et \u00e9quip\u00e9 :<\/span><br \/>\r\n<ul>\r\n\t<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">d\u2019un micro et d\u2019une cam\u00e9ra<\/span><\/li>\r\n\t<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">des logiciels : <a href=\"https:\/\/www.figma.com\" target=\"_blank\" rel=\"noopener\">Figma<\/a> et \/ ou <a href=\"https:\/\/www.sketch.com\" target=\"_blank\" rel=\"noopener\">Sketch<\/a> et \/ ou <a href=\"https:\/\/www.adobe.com\/fr\/products\/xd.html\" target=\"_blank\" rel=\"noopener\">Adobe XD<\/a><\/span><\/li>\r\n\t<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">d\u2019un double \u00e9cran (recommand\u00e9 mais non n\u00e9cessaire)<\/span><\/li>\r\n<\/ul>\r\n<\/li>\r\n<\/ul>","FOR_Eval":"<ul>\r\n\t<li><span style=\"font-weight: 400;\"> Validation des acquis pendant la formation gr\u00e2ce \u00e0 des mises en situation et des exercices pratiques<\/span><\/li>\r\n\t<li>Suivi d'acquisition des objectifs p\u00e9dagogiques par l'intervenant<\/li>\r\n\t<li><span style=\"font-weight: 400;\"> \u00c9valuation \u00e0 chaud (remplie en fin de <\/span><span style=\"font-weight: 400;\">formation) et \u00e0 froid (\u00e0 60 jours)<\/span><\/li>\r\n<\/ul>","for_pourquoi":"","FOR_PlanCond":1,"FOR_PlanDist":null,"FOR_PlanPres":null,"for_tag-new":false,"for_tag-update":false},"_links":{"self":[{"href":"https:\/\/www.swash-formation.fr\/sw-connect\/wp\/v2\/formation\/284","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.swash-formation.fr\/sw-connect\/wp\/v2\/formation"}],"about":[{"href":"https:\/\/www.swash-formation.fr\/sw-connect\/wp\/v2\/types\/formation"}],"wp:attachment":[{"href":"https:\/\/www.swash-formation.fr\/sw-connect\/wp\/v2\/media?parent=284"}],"wp:term":[{"taxonomy":"domaine","embeddable":true,"href":"https:\/\/www.swash-formation.fr\/sw-connect\/wp\/v2\/domaine?post=284"},{"taxonomy":"motcle","embeddable":true,"href":"https:\/\/www.swash-formation.fr\/sw-connect\/wp\/v2\/motcle?post=284"},{"taxonomy":"metier","embeddable":true,"href":"https:\/\/www.swash-formation.fr\/sw-connect\/wp\/v2\/metier?post=284"},{"taxonomy":"etiquette","embeddable":true,"href":"https:\/\/www.swash-formation.fr\/sw-connect\/wp\/v2\/etiquette?post=284"},{"taxonomy":"type_ra","embeddable":true,"href":"https:\/\/www.swash-formation.fr\/sw-connect\/wp\/v2\/type_ra?post=284"},{"taxonomy":"logiciel","embeddable":true,"href":"https:\/\/www.swash-formation.fr\/sw-connect\/wp\/v2\/logiciel?post=284"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}