TP CDUI CCP 3 - Réaliser, améliorer et animer des sites web

Comprendre l’UX design

Les principes de conception

• Le feedback
• Affordance et mapping
• Le guidage
• La découverte progressive
• Homogénéité et anticipation de l’erreur
• La narration

Le design thinking

• Définition
• Les méthodes d’idéation

Exercice

• Atelier d’idéation basé sur la refonte d’un site.

Architecturer l’information

• L’arborescence
• Croquis
• Zoning
• Wireframe
• Storyboard
• Les grilles
• Les types d’interface
• Sens de lecture
• Zone de flottaison
• Fil d’Ariane
• Zoning de bloc
• L’usage des textes et pictogrammes
• Hiérarchie textuelle et SEO
• Les formulaires

Réaliser un prototype le prototype

• Définition
• Les 4 étapes
• L’anticipation

Les bases du projet

• La stratégie
• Devices et checkpoints
• Veille fonctionnelle
• L’innovation
• Les personas
• La taxonomie
• L’user flow
• Le mockup
• Le prototypage
• Le design
• Le maquettage / Test utilisateur

Exercice

• Appliquer la méthodologie vue précédemment pour la homepage d’un site ecommerce. De la stratégie jusqu’au croquis.

Prototyper avec Adobe XD

Découvrir Adobe XD

• Découverte de l’interface
• Utiliser les plans de travail
• Dessiner des formes
• Plan de travail responsif
• Comprendre les actifs
• Comprendre les composants
• Créer un prototype ou un wireframe
• Animer son prototype

Exercice

• Réaliser un prototype à partir du croquis ébauché.

Concevoir une application

Exercice 1 : Stratégie et définition des objectifs

• La stratégie
• Les devices
• Les veilles fonctionnelles
• Les personas
• La taxonomie
• L’user flow

Exercice 2 : Ébauche graphique de 3 pages (croquis) 

Exercice 3 : prototypage sur Adobe XD au format mobile

Présentation et architecture

Présentation de l’UI Design

• Définition
• Son rôle
• Les enjeux
• Les grandes tendances du Web
• L’expérience utilisateur

L’architecture

• Comprendre les devices et les checkpoints
• Composer à partir d’un wireframe
• Utiliser des grilles
• Penser en Responsive design
• Organiser son PSD

Construction d’un site one page

• Header, navigation, contenu et footer

Exercice

• Recomposer et adapter un site en One page initialement conçu pour les desktops pour une déclinaison en application mobile.

Colorimétrie et polices

Colorimétrie

• Définition
• L’usage des couleurs
• Le cercle chromatique
• Les types de combinaisons
• Les contrastes
• Le langage des couleurs Adobe color CC et autres outils indispensables

Polices

• Définition
• Différence entre Police, Font et Typographie
• Les grandes familles typographiques
• Bien choisir ses polices
• Règles typographiques
• Google fonts et autres outils indispensables

Logotype

• Comment créer un logo

Exercice

• Création d’un logo à l’aide des Google fonts et d’Adobe Color CC

Iconographie

• Définition
• Hiérarchie des composants visuels
• Les neurones miroirs – Jouer avec les connotations
• Jouer avec les connotations

Exercices

• Analyses d’images (connotations et dénotations)
• Trouvez le bon visuel pour le bon environnement

Réaliser un e-mailing

Anatomie d’un e-mailing

• Définition
• Contraintes techniques
• Architecturer efficacement son E-mailing
• Découverte de Mailchimp

Exercice

• Vous serez en charge de réaliser la maquette d’un emailing avec Adobe Photoshop et Mailchimp

Réaliser des bannières en GIF animés

• Définition d’une bannière
• Les formats standards
• Optimiser votre déclinaison
• Animer votre bannière sur Photoshop
• Bien exporter vos bannières
• Découverte de Google Webdesigner

Exercice

• Réalisation d’un jeu de 3 bannières

Maquetter une application

Exercice

• Réalisation d’une maquette d’application mobile de 3 pages à partir d’un prototype ou de wireframes

Initiation au html5 Css 3

• Une petite histoire du web (Les acronymes web)
• Les spécifications du HTML5
• Les éditeurs : Sublim-text ou Notepad++
• Installation de EMMET (Zencoding google)
• Les balises et leurs attributs
• Structure de base d'une page HTML5
• L'enregistrement des fichiers et création de la racine des pages URL relatif ou absolu
• Doctypes et normes W3C
• Balises de type in line et block
• Balises de structuration HTML 5
• Compatibilité entre les navigateurs (Librairie js : Modernizr)
• Nouvelles balises HTML5
• Exercices de rappel

Organiser les éléments texte

• Les titres
• Les paragraphes
• La mise en valeurs
• Les liens hypertext
• Affichages des sources image
• Créer des listes et son usage (UL, OL, LI et DL, DT, DD)
• Faire un tableau
• Les balises génériques : div, span et leur usage (balises TABLE, TR, TD, TBODY, THEAD, TH, attributs colspan et rowspan)
• Les formulaires en html 5 : nouveaux attributs pour les inputs

 Les règles CSS2 et CSS3

• Notion de feuille de style en cascades
• Où écrit-on le CSS ? : link,style type et style scoped
• Les sélecteurs html
• Les différents types de sélecteur css : classe, id et pseudo-classe
• Attributs de sélecteur
• Préfixe pour les navigateurs.
• Importation de la police et les possibilités de compatibilité css3 (@font-face)
• Framework : font-squirrel pour l'optimisation d'affichage de la police importé
• Introduction aux différentes unités : px, pt, %, em et rem
• La notion de boite et présentation du modèle de boite
• Gestion des couleurs : notion exadécimal, rgb et rgba
• Utilisation du Framework : Flat-Ui et google material design, colorZilla
• Propriété supplémentaire css : les border, padding, margin et box-sizing
• Float, clear left, right et both
• Background, background-image, background-color et background-size
• Framework font-awesome pour l'application des icônes codés en css
• Exercices pratique de rappel

Les prérequis à l’utilisation de WordPress 

• Comment fonctionne un site web ? 
•  Qu’est-ce que WordPress ? 
• Quelles sont les étapes de création d’un site WordPress ? 
• De quoi a-t-on besoin pour créer un site WordPress ? 
• Quelques conseils avant de démarrer

Installer WordPress sur son ordinateur avec local by Flywheel 

• Pourquoi réaliser un site dans un environnement de travail local ? 
• Comment installer et déployer WordPress avec Local by Flywheel ? 

Comprendre l’administration de WordPress 

• Quelle est la différence entre le back office et le front office de WordPress ?
• Comment se présente le back office ? 
• Quels sont les fichiers qui composent un site WordPress ? 

Effectuer les réglages de base d’un site WordPress 

• Définir les règles d’utilisation du site web 
• Personnaliser son profil d’administrateur 
• Administrer les utilisateurs du site web 

Créer un site simple à l’aide des fonctionnalités de base de WordPress 

• Importer des contenus multimédias dans la bibliothèque 
• Définir des catégories et des sous catégories d’articles 
• Créer et publier des articles 
• Créer et publier des pages 
• Créer et organiser un menu de navigation 
• Créer des liens hypertexte 
• Les bases de la personnalisation graphique 
• Enregistrer son site et le partager à l’aide de Local by Flywheel 

Créer un site complexe en utilisant un thème et des plugins 

• Créer un nouveau site WordPress à partir d’un blueprint Local by Flywheel 
• Installer un thème WordPress 
• Personnaliser la page d’accueil de son thème 
• Personnaliser les autres pages du site 
• Installer des extensions
• Présentation de l’outil de code CSS additionnel 
• Tester son site WordPress 

Publier un site WordPress sur le web 

• S’inscrire à un service d’hébergement web (ex : OVH) 
• Transférer un site web d’un serveur local à un serveur web avec All-In-One WP
• Migration Vérifier que la migration s’est bien déroulée 
• Obtenir un certificat SSL 
• Rendre le site visible auprès des moteurs de recherche
• Ressources pour améliorer son site 
  • Les meilleurs plugins du moment 
  • Les sites indispensables 
• Installer et manipuler les fichiers de WordPress manuellement 
  • De quoi a-t-on besoin pour installer un site WordPress manuellement ? 
  • Installer WordPress manuellement sur son ordinateur 
  • Migrer son site vers un serveur web 
• Aller plus loin 
  • Conseils pour entretenir son site 
  • Conseils pour progresser

Revue du site internet et stabilisation

• Inscription du site sur l’hébergeur
• Implantation des différents graphisme et animation
• Stabilisation du site pour un usage effectif

Enrichir son site Web

• Changer de thème et réaliser la maintenance de son site internet en toute autonomie

Aller plus loin

• Appréhension des différents pluggin de Wordpress
• Implanter les pluggin supplémentaires choisis
• Gérer la sécurité du site