cours design d’interfaces et intégration web
Design Web
plan de cours | remise de travaux | documents
Informations
Échéancier
SEMAINES
01-02
Introduction au cours
Présentation du plan de cours et du mode de fonctionnement des ateliers
Évolution du web
Qu’est-ce qu’un site web? Quels sont les critères à considérer dans l’évaluation d’un site web? Quelles sont les étapes de production d’un site web? lien 1 | lien 2 | powerpoint
Structure de votre site: bubbl.us
Technique
Interface de Dreamweaver
Éléments de base d’une page en HTML + CSS + publication en ligne
Travaux à remettre
Projet 1: Premier site web fait “à la main” – Qui suis-je? (27 janvier – 5%) consignes | powerpoint
* Création d’un blogue de production | portfolio
Outil au choix weebly | wix | wordpress | webflow
* * voir cette réflexion intéressante sur le portfolio
SEM
03-06
Théorie
Qu’est-ce qu’un CMS? (portail wordpress)
Quelques CMS à connaître: webflow, weebly, wix, wordpress
Notions autour de la base de données (le contenant versus contenu)
Écriture web: bien écrire un article | écriture web | autre article | une image vaut…
Les outils de référencement (titre + mots clés + SEO)
Le web et les couleurs | UX design | La prolifération des écrans (et des tailles): article
Sites: don’t click it | pollock | infuriating examples | wavesilk | * awwwards
Mauvais design: 10 bad web design examples | 50 examples
* attention à ce que vous mettez en ligne : bonzai kitten | petit slingly
Les rires du net: perdu | dernière page
Technique
Mini introduction à After Effects (10 fév)
Intégration web d’éléments interactifs
À voir: body movin | tutoriels AE + Lottie | showcase (les exemples peuvent se clôner)
Avec WordPress: divi documentation | elementor docs
Travaux à remettre
Projet 2: site webflow ou wordpress (24 février – 5%)
Projet 3: partage de 2 sites intéressants avec justification (10 février – 5%) consignes
Projet 4: site useless (9 mars – 5%)
* voir useless websites
* Remise du portfolio démarré (3) 17 février
SEMAINES
07-10
Théorie
Ergonomie des interfaces
Types d’interfaces (et note sur les réseaux sociaux)
Technique
XD – création d’un prototype mobile | tutoriel | tutos youtube |
Éléments: Plugins XD | Templates xd guru | Templates freebie sui | freebies supply
Travaux à remettre
Projet 5: interface app (30 mars – 15%)
10 “écrans” interactifs – ergonomique + intention + sketch + commentaire critique
* checkpoint portfolio (3)
SEMAINES
11-12
WordPress + DIVI
Différences entre wordpress.com et wordpress.org
Étapes d’installation de wordpress
Les plugins + les thèmes + le gratuit + le payant
Technique
CMS + éléments pro (DIVI)
Travaux à remettre
Projet 6: site pro avec structure détaillée (20 avril – 20%)
* checkpoint portfolio (4)
Travail final
Projet 7: APP ou site compagnie (équipe) – en lien avec le cours d’infographie (4 mai – 15%)
* examen final (20%)