Avant d'explorer en janvier les bonnes pratiques pour différencier et rendre interactifs nos espace de cours, nous nous attarderons aux règles d'un design web efficace. Quels choix typographiques effectuer? Comment construire une palette de couleur réussie? Comment découper l’information et en organiser les éléments? 
CLIQUEZ POUR PARTICIPER!​
L'espace numérique de cours: design!
/avec Yvan Tétreault a à la co-animation!

Une seconde partie portait sur les qualités d'interactivité et de différenciation pédagogique d'un espace de cours. 

Contenus de la formation
  • Choix typographiques: caractéristiques des principales familles de polices et trucs pour les mélanges efficaces.
  • Images et fonds colorés: taille et position des images, superposition texte et image, ambiance et lisibilité dans le choix des couleurs.
  • Utilitaires et banques d'images.
  • Découpage conceptuel de l’information.
  • Principes visuels de l’organisation des éléments: la méthode PARC (Proximité, Alignement, Répétition, Contraste).
  • Exemples inspirants de design web.
  • Clinique de design de vos espaces de cours.
​
Rappel
Et pour augmenter l'intérêt de votre espace de cours... 
Retour au menu des formations
​

Notes collectives de la partie théorique de l'atelier 2016

Utilitaires et banques d'images

L'outil de material design pour choisir les couleurs d'une palette, une à la fois: http://coolors.co
Un autre outil de palettes de couleurs: https://www.colorcodehex.com/0089d2/

Identifier les couleurs d'une image: http://www.colorexplorer.com/imageimport.aspx 
Aussi: http://html-color-codes.info/colors-from-image/

Images inspirantes libres de droits: pixabay.com 
Images du quotidien libres de droits: flickr creative commons
Images encyclopédiques libres: wikimedia.com 
Banque d'icônes: flaticon.com
Banques d'images vectorielles libres: http://blogs.articulate.com/rapid-elearning/12-websites-free-vector-images-e-learning/ 
Sainte-Anne: logos

Modèles Google Slides prêts pour Screencast-o-Matic

Photo
Fond #1
Photo
Fond #2
Photo

Exemple d'utilisation du fond #2

La clinique

Exemples inspirants de design web

Rappel: pour mettre ses contenus en ligne... 
  • Consultez nos pages pour Moodle, pour ChallengeU. Google Classroom, les sites web Google Sites, Weebly et Wix sont aussi des valeurs sûres en éducation.
  • Apprivoisez l'enregistreur d'écran Screencast-o-Matic et l'outil de personnalisation des vidéos du web Edpuzzle.
  • Recourez à Canva et Genial.ly pour expliquer par l'image et y rajouter du multimédia.