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
É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%)