2.4 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;
Un « favicon », c’est la mini image (16px sur 16px) qui s’affiche dans l’onglet de votre page web;
1 lien au dessus de votre page avec le texte « <- typothèque » et le href: /index.html;
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) – cela en lien cliquable (href : la page de la 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);
Utilisez un export .svg à partir d’Illustrator pour vos blocs typos (svg est vectoriel donc nickel chrome frère);
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 pour télécharger votre dossier typo (<a href="matypo.zip" download>télécharges ma typo ici</a>)
Un lien en bas de la page (genre texte top, haut de page, une flèche,…) qui renvoie vers le dessus de la page avec un scroll fluide (scroll top.js ou css animation);
1 lien en bas de votre page (dans le footer) avec le texte « <- typothèque » et le href: /index.html;

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 à 80% environ ;)

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é.

Ergonomie

Votre site devra être optimisé pour être évalué sur le smartphone école à savoir un Redmi Note 10 Pro. Il faudra toutefois qu’il s’affiche sans erreur sur iPhone.

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;

}
    }

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;
   outline: none;
}
input:focus{
   border-color: yellow;
}

Gestion typo

HTML

L’entité HTML   (« 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   (« 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.
Pour des suite de lettres qui s’adaptent à votre page : word-wrap: break-word;

Planning

23-24/10 : briefing + warmup;
6-7/11 : codage + rendu intermédiaire 1 sur Teams;
13-14/11 : codage + test sur Mamp ou Wamp;
20-21/11 : codage + rendu intermédiaire 2 sur Teams (fin cours) + évaluation;
27-28/11 : retour + finalisation;
4-5/12 : FINALISATION;
11-12/12 : FINALISATION;
18-19/12 : RENDU FINAL (sur TEAMS en fin de cours);
mise en ligne de vos sites sur Internet pour de vrai sur :
https://typotheque.saint-luc.net

Priorité dans l’évaluation

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

olivier evrard

2.4 Spécimen typo (web)

Contexte

Contenu

Design

Ergonomie

Responsive

Module de test typo

Gestion typo

HTML

CSS

Planning

Priorité dans l’évaluation

Évaluation

Liens

Liens spécimen & typo

Liens code

Dossier de départ