Les fondamentaux de la création digitale et de l’UX/UI Design

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