WEB
DESIGN ET INTERFACE
support de cours
Automne 2024
Notre horaire: lundi 14h30 – 17h30
Local: B2.30
Professeure
Suzanne Roy
B1.01
Échéancier
26/08
01
Présentation du plan de cours
[Powerpoint]
“Se connaître” – formulaire à remplir
La petite histoire du web
[Powerpoint]
Les étapes de création d’un site web
La structure de l’information + le premier site web
[Powerpoint]
Map mapping / structure web: Bubbl.us
Les couleurs par Adobe
Temps d’atelier pour construire le site MOI sur weebly
(à terminer durant la semaine!)
– mon site weebly – mon vrai site
Vos sites: kenya | jessika | samuel | christopher | henri | julius | bellicia | mikhail |maxime | julia
09/09
02
Le prototypage avec Figma
MON SITE XD (de l’an dernier)
utilisation de la grille – les animations – L’interface – UI – XP
Pour aller plus loin: tutoriel: crash course (1h) – les bases
* * ATTENTION: Le prochain cours est le 12 septembre – horaire du lundi ! * *
À FAIRE
Site Figma (5%)
– consignes –
12/09
03
Atelier XD – Histoire interactive
Début du projet Histoire interactive | faux exemple | ressources
Pour scénariser: bubbl.us
Les projets d’il y a deux ans
Les projets de l’an dernier
HISTOIRES INTERACTIVES de l’an dernier
Chloé et Adèle | Silya | Joyce et Jarod | Louis | Gaël | Fiona, Misha & Maïka | Sarah | Hang Yu et Qizheng | Zihan | Quentin et Carl | Danaé et Jennifer | Toby
À FAIRE
L’histoire interactive (10%)
– consignes –
16/09
04
Éléments xd: le slider – les ressources xdguru
Travail sur le prototype APP – fiche à remplir
Exemples de pages/app XD:
Sienna et Béa: Musico
Zach: Motors
Natalia: Thrift
– app dating
– livre de recettes
– Alveole
– Film streaming
Les APPS de l’an dernier:
Lucas | Tianshun |Edouard | Daniel | Zongyan | Philippe | Haewon | Ann | Atlana & Elisabeth | Matias & Julien
À FAIRE
Remise de
l’histoire interactive
03/10
05/06
Atelier – APP
À FAIRE
Conception et création de l’APP
– consignes –
Remise le 3 octobre !
07/10
07
WordPress: l’interface, les thèmes, les extensions
Powerpoint
Exercice: mini site WP
Le cycle du web: structure, droits des images, écriture web, SEO.
Comment bonifier un site? Le rendre vraiment utile?
Votre site
www.mediasnumeriques.org/
(suivi de votre prénom)
www.mediasnumeriques.org/prenom/wp-admin/
(pour se connecter)
Login: votre prénom (sans accent, sans espace)
Pass: vive2024ALC**
À FAIRE
14/10
07
Atelier WordPress
RAPPEL DES ÉTAPES powerpoint
Des sites à regarder. Quoi voir? Quoi analyser?
Meilleurs sites: Awwwards – CSS design award – FWA – Webby
Redesign – le bon, le bon, l’utile? [beau site | tendances 2020 | minimaliste]
Les 50 pires design de sites en 2020.
À FAIRE
Remise du site WP
consignes
Début du landing/redesign
– consignes –
– étapes / planif –
Analyse des 2 sites web
– document à remplir –
17/10
08/
09
Atelier WordPress
DIVI
Clé du groupe: a840f2db6b095267b51d5507ff27a60e1dda36c7 (nom: idmuse)
Autres éléments “pro” pour Divi:
– divi express (m’écrire le no du composant désiré)
– divi plugins (m’écrire le nom du composant)
18/11
10/
13
Début du site final – choix du thème – structure de l’information
Divi
Design de l’interface
Ajout d’interactivité
Des plugins “ludiques”?
– 6 weird WP Plugins
– 16 fun plugins
– 10 plugins for fun
À FAIRE
Site final (15%)
28/11
14
Construction du portfolio (wordpress)
et préparation à l’examen final
CONSIGNES PORTFOLIO
(à remettre avant l’examen)