Objectifs :

  • Disposer de bases et d’outils solides en Webdesign.
  • Connaître le workflow complet d’une maquette Web Responsive.
  • Comprendre le code pour sublimer son design
  • Connaître les tendances et les incontournables
  • Gérer un projet Web sereinement
  • Comprendre l'Ux & l'Ui

Pré requis :

Connaître les techniques et outils classiques d’un logiciel de PAO comme Photoshop.

Public :

Personne disposant d’une certaine expérience dans la création graphique et qui souhaite évoluer sereinement dans le monde du web avec ses spécificités propres.

Exemple : graphiste dans le domaine du print (ou chef de projet) vous souhaitez comprendre les règles et les étapes d’un projet web notamment avec la préparation et la création de maquette. Vous voudriez devenir autonome dans ce milieu et améliorer le dialogue dans une équipe ou avec des prestataires / clients.

PLAN DE FORMATION : 2 JOURS

Journée 1

1. Mis en bouche

  • C’est quoi un site Web ?
  • Un Webdesigner vous dites ?
  • Les outils d’un Webdesigner

2. Ux vs Ui Design

  • Définitions
  • Exemples et démos concrets
  • Pourquoi ils sont indissociables et facilement confondables
  • Leurs rôles au cours de cette formation

3. Feuille de route

  • Site Web : toutes les étapes
  • Un bon cahier des charges
  • Le Design Sprint
  • Le Brief pour le Webdesigner
  • Rôle du Webdesigner
  • Investir & éduquer le client
  • Print VS Web

4. Ux Design : les fondations du Design

  • Explications & Buts : en quoi l’Ux Design est important
  • Prototypes & Co : zoning, storyboard, wireframe, mockups...
  • Les logiciels & outils
  • Gérer les différents supports web : desktop, tablette & mobile
  • Ux pour le web : les classiques d’une interface ergonomique
  • Les dernières tendances en Ux web
  • Vocabulaire spécifique (persona..)

5. Initiation à un Ux Design Responsive

  • Le workflow complet : du papier au prototype
  • Quels livrables attendus ?
  • Maquettes : Illustrator vs Adobe Xd (Démo)
  • Prototypes : Adobe Xd vs Invision (Démo)
  • Travailler en collaboration
  • Tester son Ux Design en live : desktop, tablette, mobile
  • Checklist, livraison & validation
  • TP : créer rapidement un prototype sous Adobe Xd et Invision en collaboratif (sources fournies)

6. Ui Design : la façade du Design

  • Définition
  • Ui designer = Web designer ?
  • WorKflow complet : du prototype au design final
  • L’Ux : notre plan de bataille
  • Éviter la feuille blanche
  • Partir directement de l’Ux : bonne idée ?
  • Sketching : le papier et le crayon
  • Mood Board : exemples et comment en créer
  • À l’aventure compagnon !

7. Les tendances 2017 & styles graphiques

  • Les transitions et les animations
  • Les micros-Interactions et UI Motion
  • Les exhausteurs de (bon) goût
  • Qualité du contenu : textes, vidéos & photos
  • Typographie & couleurs
  • Story Telling et web immersif
  • Le Material Design
  • Flat Design : vers l’overdose ?
  • Le skeuomorphisme
  • Tour d’horizon des styles graphiques existants
  • Liste complète pour trouver l’inspiration et faire de la veille

Journée 2

8. Les types de sites et leurs spécificités

  • Site Corporate
  • Intranet
  • Site institutionnel
  • Blog / Magazine
  • One Page
  • E-Commerce
  • Les Originaux & sur-mesure
    (PortFolio, Vitrine...)
  • Responsive / Adaptatif / Fluidité

9. Tour d’horizon des logiciels du moment

  • Pourquoi s’y intéresser
  • Affinity Photo & Designer
  • Sketch & Adobe Xd
  • Adobe Animate & After Effects
    (Ui / Ux Motion)
  • Photoshop : indétrônable ?
  • Le combo gagnant

10. Les Méthodes indispensables

  • Gestion de l’espace et de l’alignement.
  • Taille & gestion des polices dans le web
  • Les tailles des maquettes web
  • Designer en pensant au coding :
    avoir l’esprit flex
  • Les grilles : s’en servir correctement
  • Les images : gestion du HiDP (Rétina)
  • Les Art Boards (Plan de travail)
  • Le Mobile First
  • Utiliser un fichier (psd, ai..) dans plusieurs compositions
  • Utilisation raisonnée des objets dynamiques
  • Un site VR (réalité augmentée)
  • Les raccourcis claviers
  • Les filtres qui aident
  • TP : création d’une maquette web responsive

11. Ressources indispensables

  • Les polices
  • Les images
  • Les vidéos
  • Les icônes & illustrations
  • Les palettes de couleurs
  • Les templates : bons et mauvais côtés
  • Listing des ressources de qualités
    (gratuites & payantes)

12. Les parties spécifiques d’un webdesign

  • Navigations
  • Diaporama
  • Boutons
  • Header / Footer
  • Contenu
  • Formulaire
  • Bannière Web
  • Micro interactions et événements souris

13. Animation dans le web

  • Pourquoi ça devient incontournable
  • GIF Animé vs Fichier Vidéo
  • Créer un GIF Animé avec Photoshop

14. Gestion et livraison de notre projet

  • Les Checkpoints indispensables
  • Présenter et partager élégamment et efficacement vos travaux (avec et sans Invision)
  • Comment exporter – à la main - votre design pour l’intégration HTML/CSS/JS (type de livrable, SVG....)
  • Faciliter la transition entre le graphiste et le développeur avec « Zeplin »
  • Cheklist avant livraison

15. Bye le design, bonjour le Code !

  • Une question de savoir vivre
  • HTML/CSS/JS : les grands principes
  • Arguments de chocs pour un Designer
  • Une veille boostée : utiliser les technologies front-end pour être plus créatif
  • Comment inspecter / déconstruire un site en ligne
  • Un mot sur les CMS
  • TP : Intégration rapide d’un design web basique (fichiers et code source fourni)

Conclusion

CE QUE VOUS ALLEZ FAIRE / NE PAS FAIRE

Ce que vous ferez :

  • Acquérir une méthode de travail pour optimiser le Workflow et mener un projet Web & Responsive sereinement : en solo ou en équipe.
  • Découvrir un panel d’outils et de logiciels : du « From Scratch » à la livraison finale.
  • S’initier à tous les domaines d’un projet web : Ux, Ui, Design, intégration & livraison des maquettes.
  • Faire un tour d’horizon complet des tendances actuelles dans le web ainsi que des différents styles graphiques.
  • Savoir où trouver l’inspiration, les ressources et faire une veille efficace.
  • Découvrir les moodboards, les storyboards, les prototypes pour mieux cerner l’attente des clients et éviter les fausses routes graphiques.
  • Valoriser son bagage print dans le web en comprenant les différences et similitudes de chacun.
  • Inspecter et décortiquer du code HTML/CSS/JS pour comprendre le côté technique et sublimer ses designs.
  • Comprendre la différence entre l’Ux & l’Ui Design et utiliser le multimédia dans ses projets : son, animation, vidéo, réalité augmentée...
  • Connaître l’environnement web dans sa globalité pour définir le rôle de chaque corps de métier.
  • Vérifier et préparer son design avant la livraison.

Ce que vous ne ferez pas :

  • Pas d’initiation à Photoshop ou autres logiciels de PAO : les outils et techniques de bases doivent être acquis pour les travaux pratiques.
  • Une formation dédiée uniquement à Photoshop et au design web. Cette formation se veut plus englobante et se destine à des personnes demandeuses de connaissances plus que de pratique.
  • Apprendre les langages HTML/CSS/JS. Dans cette formation, une simple présentation et une explication de bout de code sur différents exemples seront abordés.
  • Pas de Ux Design poussé. Une formation dédiée y est consacrée. Ici, « seule » une démo sera montrée ainsi qu’une pratique rapide.
DURÉE ET LIEU

Horaires :

De 9h30 à 17h30 avec une pause déjeuner de 12h30 à 13h30
soit 7 heures de formation par jour.

Lieu de formation :

Nos formations se déroulent en plein centre historique de la belle ville de Nantes à La Rosière.
la Rosière d'Artois - 35 Rue de la Rosière d'Artois - 44100 Nantes.

Petit déjeuner & Repas gourmand du midi inclus.
6 Stagiaires maximum par session

DATES ET TARIF

Les prochaines dates de formation :

Sur demande : n'hésitez pas à contacter Marine !

Le tarif de la formation :

  • 950€ HT pour les 2 jours de formations.

Petit déjeuner & Repas gourmand de midi inclus.
6 Stagiaires maximum par session

Contacter Marine pour toute demande d'inscription ou d'informations complémentaires.

FORMATION INTRA-ENTREPRISE

Nos formateurs peuvent également se déplacer dans vos locaux. En fonction de vos besoins, nous vous accompagnons dans votre démarche.

Consultez Marine pour plus d’informations !

FINANCEMENTS

Vous souhaitez connaitre les possibilités de financement de votre formation ?

Financement Formation Professionelle
Simon Kern - Bar à Formations

"J'aime travailler sur le côté visuel d'un projet digital mais il est essentiel de comprendre toutes les étapes de créations d'un site Internet pour gérer au mieux son projet et son planning. C'est dans cette optique que mon DVD "Techniques de l'image pour le webdesigner" a été fait, dans le même esprit que cette formation."

Simon Kern, Web | Graphic | Motion Designer