Propositions d'enseignement
Comprendre, manager et interagir avec les métiers du web : je me propose de partager à vos étudiants, de façon ludique et concrète, le fruit de 10 ans d'expérience, partagés entre les grands groupes, les startups et le travail indépendant.
Web & UX Design : concevoir
Intro design : (re-)voir les bases
- Couleurs et contraste
- Espacement et marges
- Les interdits : polices maudites, éléments étirés
Les briques d'une interface web
- Les 3 C : conteneur, colonnes, contenu
- Sections de base : header & navigation, heroes, features, footer…
- Paragraphes, images, citations, listes, boutons, carousels, alertes
- Modales et pop-ups
- "Call to Action" et Formulaires
- Vous aimerez aussi
Concevoir une arborescence
- Site vitrine / institutionnel
- Site à réservation simple
- E-commerce
- Media / Magazine
- Le parcours client (tunnel)
- Les pages d'atterrissage
- La checklist des pages ennuyeuses mais nécessaires
Faire une maquette
- Papier et crayon
- Outils grand public : PowerPoint, Google Slides
- Outils pro : Sketch, Figma, Adobe XD, Adobe Comp, InVision
- Stock : images, vidéos, icônes, polices…
- "Lorem ipsum" : le faux latin
- Approches mobiles / tactiles
Atelier : maquetter une page d’atterrissage avec un outil grand public de son choix.
Construire : le code et les outils
Initiation au développement web
- Vocabulaire : le développement back-end et front-end
- Le trio incontournable : HTML, CSS, JavaScript
- Outil pratique : l'inspecteur de Chrome
Découverte ludique : coder ensemble une page simple avec un éditeur de texte pré-installé sur l’appareil. Elle contient une image, un paragraphe, un lien vers le site de Vidal, et un bouton qui dit « Bonjour » quand on clique dessus.
Les CMS et les builders
- Wix et Jimdo : avantages et limites
- E-commerce : Prestashop et Shopify
- WordPress : le CMS qui fait tourner un tiers du web
Atelier : sur un site WordPress vide, créer l’arborescence d’un petit site vitrine (Home, About, Features, Contact). Construire la page d’accueil grâce à un builder.
Travailler avec les profils techniques et créatifs
Nos contraintes (sont les vôtres)
- Vitesse / Performance du site
- Compatibilité à travers les plateformes
- Tous les chemins mènent au SEO
Les défauts de nos qualités
- Profils créatifs : complexe de l'imposteur, perfectionnisme, épuisement créatif
- Profils techniques : complexe du sorcier, angoisse face aux pressions techniques, sentiment d'incompréhension, fatigue pédagogique, ne souhaite pas réparer votre imprimante
Bonnes pratiques
À éviter avec un designer
- "Je veux un site très simple comme Google"
- "Évite le rouge c'est la couleur du danger", ou l'obsession des symboles cachés
- "J'ai montré à mes neveux, ils ont pas compris"
- "Tout ça c'est subjectif, il est très bien ce mauve"
À éviter avec un tech
- "Le site il apparaît pas sur la première page de Google"
- Propos alarmistes et mal informés : "Le site marche plus / on a été hackés / toutes les données ont disparu"
- "Pourquoi c'est… ? C'est normal que… ?"
Bonnes pratiques pour signaler un problème
- Remarques contextualisées et précises (numéro de page, URL ou capture d'écran)
- Vérifier d'abord l'étendue du problème avant de paniquer : est-ce uniquement sur mon compte, uniquement sur mon appareil, uniquement sur ma connexion ?
Bonnes pratiques pour un pitch créatif et technique
- Indiquer le type de site souhaité, l'ampleur présumée et la deadline du projet. Annoncer au plus tôt les éventuelles contraintes techniques.
- Rassembler tous les éléments existants s'il y en a
- Avoir une idée du contenu réel ou probable des pages (pas une simple arborescence vide)
- Définir les objectifs du projet : présentation, vente, événement, rafraichissement du design ?
Atelier : je joue le rôle d’un client « confus » qui n’a pas clairement défini ses besoins en communication. Les étudiant-es incarnent des chefs de projet chargé-es de traduire mes besoins à un-e webdesigner en charge de sa réalisation.