olivier evrard

*********************
*********************

Spécimen typo (web)

Contexte

Vous allez réaliser, dans le cadre du cours d’infographie associé au cours de typographie, un site Web pour smartphone UNIQUEMENT. Ce site sera entièrement codé par vous-même. Le contenu de ce site sera la présentation de votre spécimen typographique étudié aux cours de typographie. Vous présenterez votre démarche avec texte, typographie, images, gif.s animé.s , vidéo.s. Ce support web sera développé, codé, évalué en infographie et analysé, critiqué et évalué en typographie.

Vous allez installer sur votre page web un module qui permettra de tester la typographie en ligne…

Contenu

Ce site devra contenir :

  • Votre dossier complet nommé comme ceci : nomdevotretypo ou ma_typo;
  • Le dossier devra être bien rangé (pas de fichiers de constructions genre .psd .ai .pdf,… )
  • 1 seule page HTML index.html + styles.css;
  • Un dossier « fonts »;
  • Un dossier « images »;
  • remplissez la balise <title> avec le nom de votre police;
  • 2 liens au dessus de votre page : un qui dit « précédent » (à gauche) l’autre « suivant » (à droite). Avec un # comme cible vide;
  • En niveau un le nom de votre typographie;
  • « Auteur : Prénom + Nom » en sous-titre du nom de la typographie (l’auteur.trice de votre typo);
  • « Utilisateur.trice : VotrePrénom + VotreNom »;
  • Utilisez UNIQUEMENT la typographie imposée en cours de typo + une typographie plus lisible pour les textes de vos démarches;
  • Le contenu texte sera votre démarche de recherche lié au projet de typo;
  • Une citation à mettre en exergue (blockquote);
  • Les images de vos recherches optimisées poids/qualité;
  • Ces images et/ou photos seront impérativement les vôtres;
  • Les images pourront être animées (gif);
  • Possibilité d’y intégrer de la vidéo;
  • Des éléments animés par jQuery et/ou par CSS;
  • Le module pour tester votre typo (il sera fourni et expliqué en classe);
  • Un lien en bas de la page qui renvoie vers le dessus de la page avec un scroll fluide (scroll top.js ou css animation);
  • Les mêmes 2 liens « précédent » (gauche) l’autre « suivant » (droite) du dessus mais cette fois en dessous de votre page dans le footer. Avec aussi un # comme cible vide dans un premier temps.

Vos sites seront réellement mis en ligne. Ils pourront donc être consulté via smartphone par le monde entier dans une typothèque que nous allons démarrer pour CVG. Vous devrez donc veiller à avoir une ergonomie et une lisibilité optimale. Le site devra aussi être optimisé au niveau du poids des images (module web export photoshop) – Test via le site d’analyse de Google : PageSpeed Insights. Vous devrez être à 90% minimum ;)

Design

Le contenu est un chose importante mais vous allez devoir travailler aussi le CSS de votre page afin de créer un univers en cohérence avec le spécimen typographique qui vous allez nous faire découvrir. Vous êtes graphistes, donc un soin tout particulier aux éléments de couleurs, de typographie, d’interlignage, de marges, d’images … doit être apporté.

Responsive

  • Votre page web sera travaillée en (っ◔◡◔)っ « mobile first »  ;
  • Un format en une seule colonne pour mobile;
  • en écran « desktop » le format reste « verticale mobile » avec l’utilisation du css max-width sur votre div principale, imaginons .global.
/* exemple */
@media all and (min-width: 550px){
/* Vos règles CSS pour les écrans plus grand que 550px ici */
.global{
max-width : 550px;
} }

Flexbox

Pour positionner vos liens « précédent » et « suivant », vous utiliserez l’outil CSS « flexbox » :

/* Exemple FLEXBOX */ 
.conteneur {
display: flex;
justify-content: space-between;
}

Module de test typo

Voici le code à mettre dans votre HTML et CSS pour que l’utilisateur puisse tester votre typographie avec le mot de son choix:

<!-- HTML -->
<input type="text" name="name" placeholder="Tapez votre texte ici">

/* CSS */
input{
   font-family: 'votreTypo';
   width: 100%;
   box-sizing: border-box;
}

Gestion typo

HTML

  • L’entité HTML &nbsp; (« non breaking space ») va nous permettre d’ajouter une espace simple dit espace « insécable » ;
  • L’entité HTML &ensp; (« en space ») va nous permettre de créer une espace double ;
  • L’entité HTML &emsp; (« em space ») va nous permettre de créer une espace quadruple ;
  • L’entité HTML &thinsp; (« thin space ») va nous permettre de créer un espace très fin (demi-espace).

CSS

  • Pour gérer l’interlignage, utilisez line-height;
  • Pour gérer l’espace entre les mots, utilisez word-spacing;
  • Pour gérer l’espace entre les lettres, utilisez letter-spacing;
  • Pour créer des colonnes : utilisez column-count, column-gap, column-rule;
  • Pour gérer la césure d’un text-align:justify, testez hyphens:auto (pas parfait) à condition de déclarer <html lang="fr"> dans le head de l’HTML.

Planning

  • 20-21/10 : briefing + warmup;
  • 27-28/10 : recherche + photos + codage;
  • 10/11 (B) : codage;
  • 11/11 (A) : congé;
  • 17/11 (B) : codage + démo Mamp ou Wamp + rendu intermédiaire TEAMS (fin cours) + évaluation;
  • 18/11 (A) : codage + démo Mamp ou Wamp;
  • 1/12 (B) : retour + FINALISATION;
  • 2/12 (A) : codage + rendu intermédiaire TEAMS (fin cours) + évaluation;
  • 8/12 (A+B) Bruxelles;
  • 9/12 (A) : retour + FINALISATION;
  • 15/12 (B) : B -> RENDU FINAL (sur TEAMS en fin de cours);
  • 16/12 (A) : A -> RENDU FINAL (sur TEAMS en fin de cours);
  • mise en ligne de vos sites sur Internet pour de vrai.

Priorité dans l’évaluation

  1. Expérience utilisateur « MOBILE » de la page web;
  2. Le graphisme (typos, images, espaces, mise en page, scroll,…);
  3. La narration, le contenu;
  4. Les effets arrivent vraiment en bas du classement d’importance…;
  5. ATTENTION déplacements de typos de type « marquee » ou autres TOTALEMENT interdits !

Évaluation

  • Ce projet comptera pour 60% du premier quadrimestre;
  • 20% étant étant les exercices réalisés en classe;
  • 20% étant votre rendu Processing pour la semaine d’évaluation (explication bientôt…).

Liens

Liens spécimen & typo

Liens code

Dossier de départ

*********************