Notes collectives enrichies de Benoit Petit, atelier de design d'espace de cours 19 janvier 2016

Notes collectives

Notes collectives enrichies de Benoit Petit, atelier de design d'espace de cours 19 janvier 2016

Notes collectives

Ce qui est d’intérêt collectif

Notes de Marika et de Gabrielle

Notes de Bona et de Allison <3

Notes de Kim

Notes de Mathieu

Notes de Marc


Ce qui est d’intérêt collectif

Règles de base: une organisation régulière.

Donc, faire le deuil de son trop plein d’originalité. Faire des « petits tas » d’éléments. On aime un design épuré, le « rien ».

Il y a une différence entre le texte à voir, et le texte à lire, par exemple, on survole les grands titres des journaux.

  • Choix typographiques: caractéristiques des principales familles de polices et trucs pour les mélanges efficaces.

Si on peut, chercher à avoir du contrôle sur le corps de la police (sa taille, le « type size », en points comme dans Word), l’interlignage (dit « leading », en points aussi), et l’interlettrage (« tracking »).

Dans un titre, l’interlignage devrait être aussi réduit que possible, sans se toucher. Pareil pour l’interlettrage. Mieux vaut miser sur la taille que le gras. Les intertitres seront gras et petits, pour que la graisse fasse contraste. Rechercher un gras intense.

Le texte à lire devrait avoir environ 55 caractères, ou entre 40 et 70.

Dans le web, c’est le contraire de l’imprimé : les polices sans empattements (sans serif, à la arial) vont mieux au texte, et les polices avec serif pour les titres (Times New Roman)

  • Images et fonds colorés: taille et position des images, superposition texte et image, ambiance et lisibilité dans le choix des couleurs.

Le « white cube » est à privilégier : un fond blanc. Et de grosses images. Aller contre sib réflexe d’image de taille moyennes. Les jouer très grosses.

Chercher des images qui offrent de larges zones de transition, de vide.

 

  • Découpage conceptuel de l’information.

Regrouper les informations semblables.

Le « scroll » n’est plus un tabou 

  • Principes visuels de l’organisation des éléments: la méthode PARC (Proximité, Alignement, Répétition, Contraste).

 

PROXIMITÉ : Principe qui dit que les éléments similaires doivent être groupés (les groupes doivent être indépendants et loin des autres groupes)

ALIGNEMENT : Les groupes doivent être relation sur la page (centré ou à gauche favorise le dynamisme) Ex : texte centré et texte à gauche. GAUCHE ET GAUCHE = dynamisme!

 

RÉPÉTITION : Utiliser toujours le même type de présentation (sous-titre toujours en gras!) AUCUN CHANGEMENTS sans raison

CONTRASTE : Utilisation du GRAS

Dans le web, deux manières d’aligner les choses, soit centré soit à gauche. Notre formateur suggère d’aligner tout à gauche.

Rechercher l’uniformité dans les intertitres tous pareils, dans les titres, etc.


Notes de Marika et de Gabrielle

Notes

Valeur ajoutée des TIC

Questions

Principes de base

  • Se démarquer par la qualité plutôt que l’originalité : viser la simplicité et la clarté.
  • MINIMALISME
  • Catégoriser les éléments, rassembler
  • Ne pas avoir peur de laisser du «vide» : Épurez !

Éléments de base

  • Typographie
  • Différencier texte à voir VS texte à lire

Paramètres à choisir/ajuster

  • taille (type size)
  • interligne (leading)

                        *Interligne solide = standard entre l’interligne et la taille

  • interlettrage (tracking)

Dans un titre, l’interlignage ne devrait jamais être plus haut que le solide. Dans le meilleur de cas, il faut chercher à diminuer au maximum l’interlignage et l’interlettrage (le plus proche possible, sans que tout se touche!)

Éviter le gras dans les titres. Privilégier le gros.

Texte à lire :

largeur de texte (colonne) à privilégier, environ 40-70 caractères de large (viser 55)

Ne pas faire de trop longues lignes !  

Utiliser le gras dans les sous-titres à l’intérieur du texte. (privilégier les contrastes)

Différencier police avec empattement ou non (Times VS Arial)

À l’écran : titre : empattement / texte : sans empattement

Papier : inverse….

  • Images

Privilégier le fond blanc pour que les couleurs ressortent mieux. (Attention au noir qui alourdi le site…)

Quelques grosses images sont plus efficaces que plusieurs petites.

Méthode PARC

Proximité

Alignement (Centré ou aligné à gauche...»

Répétition

Contraste

Ce que je garde

Ce que je délaisse

Ce que j’aimerais développer

Outil de tempête d’idées : http://www.tricider.com/ 

Image design pour identifier les séquences de grammaire


Notes de Bona et de Allison <3

Notes

Valeur ajoutée des TIC

Questions

  • Tricider pour des votes (refresh manuel)
  • Simplicité et clarté VS esthétique
  • Caneva comme outil de montage photo

  • Texte à voir:
  • Interlignage: Moins d’espace possible entre les lignes
  • Interlettrage: Les lettres doivent être collées autant que possible
  • Serif
  • Titre grand et pas gras, sous-titre gras
  • Texte à lire: Inverse du texte à voir
  • Pour une colonne: 70 caractères au maximum
  • Plus simple de faire tomber la page plus bas que de faire des multi-colonnes. La solution est d’élargir les marges (Éviter les colonnes larges)
  • Sans serif

  • L’image est-elle belle VS disposition de l’image
  • Parc: Proximité, alignement, répétition et contraste. Comment on peut regrouper nos éléments pour que, visuellement, les groupes sont indépendants les uns des autres.
  • Alignement au centre vs à gauche

Ce que je garde

Ce que je délaisse

Ce que j’aimerais développer


Notes de Kim

Notes

Valeur ajoutée des TIC

  • simplicité/clarté d’une présentation versus son originalité
  • minimaliste, chaque qui est là est vraiment là pour une raison

Principes de base

Éléments de base

Organisation

Typo

Texte à voir

  • Gros titre, ce qui attire l’attention.
  • Corps/taille/type size.
  • Interlignage/leading.
  • Interlettrage/ tracking.

Texte à lire

  • Corps 12-14-10
  • Utliser l’interlignage proprosé
  • Largeur du texte (40 à 70 caractères/ colonne).
  • Jouer avec les marges.

Méthode PARC

Proximité

  • se questionner sur les catégories d’informations qui sont les payantes pour aider l’apprenant à se diriger sur notre site.
  • Placer nos éléments en grands groupe

Alignement

  • Alignement centré; les différents blocs d’informations
  • Mettre les choses à gauche

Répétition

  • un design qui se répète

Contraste

  • sur la taille, la grosseur, le style, le corps.

Image

  • Fond blanc lorsqu’il y a beaucoup d’image/ plus de contraste.
  • Interrompre le fil/texte avec de grosses images.
  • Question de jugement.
  • Si on a du contenu visuel, il faut le jouer plus gros.
  • Zone de transition visuelle, placer le texte où ça ne nuira pas à la présentation
  • Est-ce que l’image choisie est bonne pour la présentation?
  • 7 items dans un menu
  • Motivation des élèves au top
  • À long terme, économie de temps.

Ce que je garde

Ce que je délaisse

Ce que j’aimerais développer

  • éviter de vouloir remplir tout l’espace; mieux regrouper.
  • L’esthétique de mon site, le rendre plus convivial.
  • Mes séquences sur Challenge U soient plus attrayantes pour les élèves.


Notes de Mathieu

Notes

Valeur ajoutée des TIC

Questions

Pour un titre (texte à voir)

  • Minimiser l’espace entre les lettres (interlettrage ou tracking)
  • Minimiser l’interlignage (leaping)
  • plisser les yeux (les lettres doivent presque se toucher sans toutefois se toucher)
  • Pas besoin d’être gras (privilégier mince)

Pour le texte à lire

  • 55 caractères de largeur optimal
  • 40 à 70 caractères à viser
  • contraste entre sous-titres et texte très important

Faire apparaître l’index normalement en bas de page en appuyant sur un bouton dans le menu?

PARC
Proximité -> éléments similaires devraient être rapprochés

Alignement

Répétition

Contraste

flat icon

Ce que je garde

Ce que je délaisse

Ce que j’aimerais développer


Notes de Marc

Notes

Valeur ajoutée des TIC

Questions

Flat design, conçu pour les sites mobiles avant tout. Revenu de la publicité mobile.

Responsive design : la page web s’adapte à la forme et grosseur de l’écran.

 

Yvan Thériault : prof du collégial de philosophie, prof infographie Collège Ahuntsic.

 

Principes de base : Pourquoi c’est beau et bien fait? Métaphores culinaires J : « qu’est-ce qui fait qu’un hod-dog est un bon hot-dog? Son originalité? Non! Un vrai hot-dog tel que connu ».

 

 

De même, la mise en page ne devrait pas être si originale, mais de qualité!

SIMPLICITÉ ET CLARTÉ  doivent être visés!

 

Ensuite, comme une pizza, les ingrédients sont répartis également sur la pâte à pizza sans occuper toute la surface de la page. En somme, on fait de petit tas de nos affaires/informations, et on laisse beaucoup de blanc.

 

 

Les éléments de base sont les typographies et les images.

 

 

TYPO :

 

Texte à voir : TITRES : Mettre titre gros, plus gros que le texte; interlignage le plus réduit sans que les lignes se touchent. Inter lettrage le plus court possible sans se toucher.

 

Si on doit changer de ligne dans le titre : Il faut que ça fasse sens. Grand mais pas gras car il est grand! COMIC SANS peut être beau dans un titre UNIQUEMENT car difficile à lire.

 

Texte à lire : LE CONTENU : 12 ou 14 points; interlignage 120% corps 10 interlignage 12 : par défaut trop grand! Règle de base corps par défaut 12-14, interlignage 12-14, et ne jamais toucher à l’inter lettrage. Largeur de colonnes entre 40-70 caractères par ligne ou 55-70 caractères de large. Standard web, 1 colonne et on ajuste les marges en les augmentant. La page est donc plus longue!

 

Le contraste entre le titre et le texte à lire

Les sous-titres doivent se démarquer : la police doit avoir 2 variantes (italique et gras)

 

Ne pas prendre de polices avec empattements (TIMES) rendent la lecture plus facile lorsque imprimé  (fait plus chic)        VS    sans (ARIAL - HELVETICA) mieux pour l’écran!

 

WEB police sans empattement (ARIAL) et aussi pour les titres, look plus classique

Meilleur éventail de gras pour maximiser le contraste

 

 

Design réussi :                                                    

 

 

 

Si la page est longue, insérer un index (table des matières) sur le web on insère une liste/rubrique de sujet en haut!

 

Insérer un menu de bas d’écran, pour faciliter la navigation.

 

LE MIEUX C’EST D’AVOIR LE MINIMUM ET VISER CLARTÉ ET MINIMALISME, peu de couleur de fond et organisé (comme FACEBOOK)

 

 

CORPS du caractère (type size) : TAILLE :

INTERLIGNAGE (leading) : distance entre les lignes : Solide (a même valeur que le corps)

36 lettres et 36 ligne à l’autre

 

INTERLETTRAGE (tracking) : ajusté pour le texte à lire

 

WIX ET WEEBLY (bons outils web)

 

 

IMAGES et rien à mettre par-dessus

Pour faire ressortir les images (white cube), pour apprécier l’image et non l’environnement

Beaucoup d’image = Fond blanc pour favoriser le contraste

Plus frais et aéré

 

Un fond NOIR : donne également du contraste mais donne une ambiance plus négative

 

Couleur = originalité et ce n’est pas visé!

 

Petites images avec du texte… moins efficace que de grosses images!

Mieux une grosse image que de petites images

Le texte peut être interrompu par de grosses images

Le contenu visuel doit jouer plus gros que petit!

 

Image et texte par-dessus? Dans les zones de transition visuelle (là où il y a du contraste)

On doit trouver un espace où il n’y a pas d’action visuelle (et ne va pas nuire à l’image)

 

Présentation : l’image doit avoir beaucoup d’espace pour insérer du texte (beaucoup de vide) (le sujet au centre de l’image? NON. À gauche ou droite OUI, car plus de vide.

 

 

ORGANISATION :

Méthode PARC : PROXIMITÉ, ALIGNEMENT, RÉPÉTITION & CONTRASTE

 

PROXIMITÉ : Principe qui dit que les éléments similaires doivent être groupés (les groupes doivent être indépendants et loin des autres groupes)

ALIGNEMENT : Les groupes doivent être relation sur la page (centré ou à gauche favorise le dynamisme) Ex : texte centré et texte à gauche. GAUCHE ET GAUCHE = dynamisme!

 

RÉPÉTITION : Utiliser toujours le même type de présentation (sous-titre toujours en gras!) AUCUN CHANGEMENTS sans raison

CONTRASTE : Utilisation du GRAS

 

 

 

 

Ce que je garde

Ce que je délaisse

Ce que j’aimerais développer


Notes de

Notes

Valeur ajoutée des TIC

Questions

Ce que je garde

Ce que je délaisse

Ce que j’aimerais développer


Notes de

Notes

Valeur ajoutée des TIC

Questions

Ce que je garde

Ce que je délaisse

Ce que j’aimerais développer


Notes de

Notes

Valeur ajoutée des TIC

Questions

Ce que je garde

Ce que je délaisse

Ce que j’aimerais développer


Notes de

Notes

Valeur ajoutée des TIC

Questions

Ce que je garde

Ce que je délaisse

Ce que j’aimerais développer


Notes de

Notes

Valeur ajoutée des TIC

Questions

Ce que je garde

Ce que je délaisse

Ce que j’aimerais développer


Notes de

Notes

Valeur ajoutée des TIC

Questions

Ce que je garde

Ce que je délaisse

Ce que j’aimerais développer


Document est partagé par le service national du RÉCIT – domaine du développement de la personne – www.recitdp.qc.ca