Formateur Ziggourat

Les fondamentaux de la création digitale, le design d'interface et ses outils

Cette formation vous permet d'identifier les enjeux stratégiques et créatifs du numérique, d'appliquer les concepts créatifs propres au Web, au mobile, au Social Media et à l'Internet des objets, d'utiliser des méthodes de conception centrée utilisateur, d'identifier et d'utiliser les outils de design d'interface, d'identifier et d'utiliser une méthodologie optimisée dans la construction des fichiers, d'optimiser le workflow et d'exporter et de partager vos projets UX/UI Design.

35 heures sur 5 jours

à Paris & à distance
(Zoom, Google Meet, etc.).
Nous nous engageons à vous répondre dans un délai de 48h

Devis sur demande

Etudions ensemble vos options de financement
Contactez-nous pour monter votre dossier !

QUALIOPI

8 stagiaires maximum par session.
Découvrez les autres engagements qualité qui font la marque de Ziggourat Formation

Objectifs de la formation

Les fondamentaux de la création digitale, le design d'interface et ses outils

Identifier les enjeux stratégiques et créatifs du numérique
Appliquer les concepts créatifs propres au Web, au mobile, au Social Media et à l'Internet des objets
Utiliser des méthodes de conception centrée utilisateur
Identifier et utiliser les outils de design d'interface
Identifier et utiliser une méthodologie optimisée dans la construction des fichiers
Optimiser votre workflow
Exporter et partager vos projets UX/UI Design

Pré-requis

Maîtrise de son environnement informatique et du web.

Pour qui ?

Directeurs artistiques, directeurs de création, concepteurs-rédacteurs, créatifs ou toute personne souhaitant comprendre les enjeux actuels de la créativité numérique.

Avoir suivi

Aucun programme supplémentaire n'est requis pour suivre cette formation.

Au programme

Qu'est-ce que le numérique ?

  • Définir le terme numérique (donnée numérique vs analogique)
  • Définir Internet, le Web, l'hypertexte et le RichMedia
  • Définir les notions d'interaction et d'interface
  • Définir et différencier les notions d'accessibilité, ergonomie, UI design et UX design
  • Définir et différencier les termes Web 2.0, Web participatif, Web collaboratif et Web social
  • Définir les notions de Web squared, d'Internet des objets
  • Envisager la création numérique en tant que dispositif média global et connecté

Le processus de création numérique

  • Décrire les étapes de conception d'un dispositif numérique
  • Identifier les étapes du processus créatif numérique
  • Envisager la communication de marque ou produit d'un point de vue expérientiel
  • Envisager les tendances en création visuelle (flat, typographic, geometric, emotional design)
  • Identifier les atouts de la création Rich Media (interactivité, immersion)
  • Décrire la création de dispositifs crossmedia et transmedia (digital storytelling)

Le Web et la création RichMedia

  • Décrire les principes de base de HTML (standards, balises, hyperliens, métadonnée)
  • Décrire le fonctionnement d'un site Web (relation client/serveur, front-end, back-office, BDD)
  • Différencier les technologies Flash et HTML 5
  • Définir la notion d'API et décrire le fonctionnement de l'OpenData
  • Identifier les éléments d'interface et effets de JQuery UI et de JQuery mobile
  • Identifier les possibilités créatives de HTML5, CSS3, JavaScript, Webkit

La création mobile

  • Identifier les enjeux d'une présence mobile
  • Différencier la création d'une application native, d'un site Web mobile et d'une Web app
  • Identifier les principaux devices mobiles (matériel et OS)
  • Identifier les enjeux essentiels d'une expérience tactile et mobile
  • Décrire les mécaniques d'utilisation des différents capteurs et sources de données
  • Décrire les mécaniques de géolocalisation et de réalité augmentée
  • Identifier les éléments UX et UI des principales OS mobiles (iOS, Android, Windows 8)
  • Décrire les GUIs des différentes OS mobiles (iOS, Android, Windows 8)

Le Web social

  • Situer le rôle du consom'acteur dans une stratégie de communication blogosphère
  • Définir les différents types de media sociaux et leurs mécaniques communautaires
  • Décrire les mécanismes de la propagation virale de l'information (réseaux sociaux)
  • Décrire la logique de diffusion et de partage de contenus Youtube, Pinterest, Instagram, Tumblr et envisager leur utilisation comme relais ou renforcement d'une campagne
  • Décrire les mécaniques du référencement SEO, SEA, SMO (SEM)
  • Définir la notion de Longue Traîne
  • Identifier la structure des APIs Facebook, GoogleMap et envisager leurs applications créatives
  • Décrire la logique sociale de Facebook et Facebook Page (autonarration, partage, sérendipité, publication)

Découvrir les outils de design d'interface

  • Décrire les outils et leurs principaux usages : illustration vectorielle, UX Design (wireframe), UI Design
  • Identifier les fonctionnalités principales des différents outils
  • Découvrir les dernières actualités du logiciel
  • Nommer et explorer les différentes zones de l’interface
  • Connaître les conventions d’usage dans les outils de design

Designer des formes pour des interfaces web/app

  • Créer des espaces de travail (frames) et des calques
  • Insérer des formes prédéfinies, créer des formes personnalisées
  • Sélectionner, positionner, transformer, supprimer des éléments : taille, couleurs fond et contour, dégradés, motifs, transformation, rotation…
  • Ajouter des effets : ombre interne ou externe, flou
  • Maîtriser et modifier les courbes de Bézier
  • Utiliser les opérations booléennes (union, subtract, intersect, exclude)
  • Utiliser les masques
  • Ajouter et agencer des titres, des paragraphes
  • Importer et éditer des éléments vectoriels (logo, icône, illustration…) et matriciels (image)

Acquérir une méthodologie dans la construction de fichiers

  • Organiser son projet de l’UX à l’UI : web design vs app mobile
  • Acquérir une bonne convention de nommage (fichiers, pages, frames, calques, styles, composants…)
  • Mettre en place des grilles (grid, columns, rows) et des repères
  • Mettre en place des styles de forme, de texte, d'effets, de grille partagés
  • Créer des composants et exploiter les fonctionnalités de l’override (textes, images, composants imbriqués)
  • Exploiter les contraintes de redimensionnement
  • Ajouter et gérer des librairies partagées par plusieurs documents
  • Organiser ses composants
  • Profiter des ressources et modèles externes
  • Profiter des plugins et services complémentaires indispensables

Créer un prototype avec des animations de transition

  • Définir la première frame du prototype
  • Créer des connexions entre les différents écrans
  • Maîtriser les différentes possibilités d'interactions et d'animations
  • Ajouter un lien externe

Acquérir une méthodologie optimisée dans la construction de fichiers (niveau avancé)

  • Organiser son projet de l’UX à l’UI : web design vs app mobile
  • Acquérir une bonne convention de nommage (fichiers, pages, frames, calques, styles, composants…)
  • Mettre en place des grilles (grid, columns, rows) et des repères
  • Mettre en place des styles de forme, de texte, d'effets, de grille partagés
  • Créer des composants et exploiter les fonctionnalités de l’override (textes, images, composants imbriqués)
  • Exploiter les contraintes de redimensionnement
  • Ajouter et gérer des librairies partagées par plusieurs documents
  • Organiser ses composants
  • Profiter des ressources et modèles externes spécifiques à chaque outil
  • Profiter d’une sélection des meilleurs plugins et services spécifiques à chaque outil

Optimiser votre workflow avec une sélection des meilleurs plugins 

  • Disposer de faux contenu (textes et images)
  • Accéder directement aux banques d'images et d'icônes
  • Créer et importer des contenus personnalisés (textes et images)
  • Mettre à jour le contenu importé
  • Renommer, réorganiser les calques et frames en masse
  • Automatiser les transformations des éléments sur les différents devices
  • Automatiser les positions des éléments en fonction du contenu

Créer un prototype avancé avec des animations

  • Maîtriser les différentes possibilités d'interactions et d'animations
  • Différencier Navigate To, Open Overlay et Swap With
  • Créer un système de navigation à plusieurs niveaux

Exporter et partager son projet

  • Visionner ses écrans sur un mobile
  • Exporter ses écrans en fichiers pdf, jpg et png ou sur le cloud
  • Exporter les éléments pour la production (code et assets)
  • Profiter des options de collaborations
  • Exporter les éléments sur Zeplin

Méthode pédagogique

8 participants maximum, un poste par stagiaire et un support de cours est envoyé en fin de stage (vidéos tutorielles et/ou support spécifique). La formation est constituée d'apports théoriques, de démonstrations et de mises en pratique basées sur des exercices applicatifs et/ou ateliers.

Accessibilité

Cette formation est accessible aux personnes en situation de handicap.

Modalité de validation des acquis

Évaluation continue via des exercices applicatifs et/ou des ateliers de mise en pratique. Évaluation en fin de stage par la complétion d'un questionnaire et/ou d'une certification officielle issue du Répertoire Spécifique. Émargement quotidien d'une feuille de présence (en présentiel ou en ligne). Complétion par le formateur/la formatrice d'un suivi d'acquisition des objectifs pédagogiques. Remise d'une attestation individuelle de réalisation.

Obtenir des informations

sur une prochaine session
Aucune session n'est programmée.
Contactez-nous pour définir librement vos propres dates
Demander le programme
S'inscrire directement

Responsable de formation

Participants

Participant
retirer ce participant
Ajouter un participant

Financement

Comment souhaitez-vous financer cette formation ?


Modalités

Souhaitez-vous du distanciel ou du présentiel ?



Envoyer l'inscription
Merci, un conseiller vous contacte rapidement !
deco validation Ziggourat
J’accepte que Ziggourat collecte et utilise les données personnelles renseignées dans ce formulaire dans le but de recevoir une offre commerciale en accord avec notre politique de données personnelles.