Stéréoscopie - Police, Logo et Interface

Compte rendu - Police

ConsignesRéaliser la police, en bas de casse et en capitales, en romain avec les chiffres et les signes de ponctuation principaux. La police créée est destinée à des adultes pour une publication sur écran.

Thème du projetDans le cadre de la formation Licence 3 PSM de l’UFR STGI de Montbéliard, il est demandé aux étudiants de créer une brique pé-dagogique.

Le thème que j’ai choisi pour ma brique pédagogique est le sujet de la Stéréoscopie. Le principe de la stéréoscopie est de faire voir à chaque oeil une image décalée par rapport à l’autre de sorte que l’homme puisse voir en relief une image.

ObjectifsVisuellement parlant, si l’on veut représenter le principe stéréosco-pique, on peut imaginer une sorte d’écho dans une image, ou de dédoublement d’une image.

Afin de transposer cet effet à une police pour qu’elle soit lisible et visible, on ne peut pas se contenter de la dédoubler. Cependant, l’objectif est de créer un volume et un écho.

ContraintesLa publication étant sur écran et destinée à des adultes, j’ai choisi une police sans empâtement de type Antique ou bâton de la classi-fication Thibaudeau comme éxigé.

Pour augmenter la lisibilité, je n’ai pas utilisé de style italique ou gras.

RecherchesDans un premier temps, j’ai réalisé des croquis avec l’idée de doublure. Dans un deuxiè-me temps j’ai cherché une po-lice existante qui pourrait cor-respondre à mes attentes. J’ai ainsi trouvé la police Odessa LET qui a la particularité d’être dou-blée par un trait fin.

Odessa LETOn retrouve en partie l’effet recherché. Cependant la doublure sur tous les caractères me semble de trop, d’autant plus que la doublure n’est presque plus lisible avec une taille de police normal (12 pt).

ModificationsA l’aide d’illustrator, j’ai fait ma première série de modifications qui consiste à supprimer les traits plus fin pour les caractères en bas de casse.

Pour les capitales, je n’ai pas effectué de changement dans cette première série de modifications.

Importation dans FontCreatorJe n’ai pas utilisé le site de FontS-truct pour réaliser ma police car il est nécessaire pour cela de refai-re entièrement chaque caractère avec des formes bien précises et non pas avec les tracés vecto-riels.

J’ai utilisé FontCreator, disponible sur internet en version d’évalua-tion de 30 jours.

Une fois ma police importée dans FontCreator, j’ai travaillé sur le nombre de points de mon tracé pour chaque police. J’ai ainsi créé des irrégularités afin de rendre la police un peu plus manuscrite. Ainsi, avec les doublures pour les capitales, on a l’impression d’un mouvement et d’une dimension dans la police.

La hauteur de l’oeil a été défini dans ce logiciel, elle est de 260. (Hauteur qui, après coup, est trop petite car pour avoir une même hauteur d’oeil que pour la police Arial en taille 12pt, il faut se mettre en taille 24 pt.)

Un espace de 50 a été ajouté à droite de chaque caractère pour les caractères en bas de casse et de 75 pour les capitales.

Police Finale

Yoann PIERRE - L3 PSM Montbéliard - 2008 / 2009 - Compte rendu sur la création de police en REPM

Stéréoscopie

montantescapitales

hauteur d'oeil

base

descendantes

m

ontantes

mo nta ntesc

apitales

hauteur d'oeil

base

d

escen

d

antes

montantes

capitales

hauteur d'oeil

base

descend

antes

montantes

capitales

hauteur d'oeil

base

descend

antes

montantes

capitales

hauteur d'oeil

base

descend

antes

montantes

capitales

hauteur d'oeil

base

descend

antes

montantes

capitales

hauteur d'oeil

base

descend

antes

montantes

capitales

hauteur d'oeil

base

descend

antes

montantes

capitales

hauteur d'oeil

base

descend

antes

montantes

capitales

hauteur d'oeil

base

descend

antes 01234

56789&

é()'-è_[`]$*% ! ?/\

Compte rendu - LogoConsignes

Proposer un logo pour votre brique pédagogique. Il comprendra obligatoirement une lettre dont la police est celle que vous avez inventée.

RappelLe thème que j’ai choisi pour ma brique pédagogique est le sujet de la Stéréoscopie.

ObjectifsDe la même manière que pour la police, le logo doit jouer sur la profondeur et le volume, tout en sachant que la stéréoscopie est une image plate à la base !

ContraintesLa publication étant sur écran, le logo sera principale-ment utilisé en couleur RVB.

Pour réaliser un travail plus complet, j’ai fait la déclinai-son complète des couleurs suivant les différents sup-ports possibles : couleurs couchées, couleurs non-cou-chées, couleurs noir et blanc et couleurs RVB.

Le nomLe nom de la brique pédagogique sera tout simplement le nom du thème : la Stéréoscopie. Cependant, le logo prendra en compte le nom sans son déterminant ce qui permettra l’imagination de l’utilisateur d’étendre le terme sous différentes notions : principe de la stéréoscopie, la vision stéréoscopique, etc...

Le fondLa présence du fond permet tout d’abord de créer un support sur lequel vient se poser la lettre. De plus, ce fond rappelle aussi l’image en tant que support pour la stéréoscopie.

Pour adoucir le fond, j’ai arrondi le coin inférieur droit, dans le prolongement de la courbure du S. Cela per-met de l’alléger et de le rendre moins agressif tout en gardant une forme assez carrée pour retrouver la forme d’une brique, référence à la brique pédagogique.

Le caractèreLe caractère que j’ai choisi pour mon logo est le caractère S, pour la simple raison que c’est la première lettre du mot stéréos-copie, mais pas uniquement !

En effet, la lettre S est, schématiquement parlant, composée de deux demi-cercles décalés. Ainsi on retrouve quelque peu le double élément comme dans le principe de la stéréoscopie : deux images décalées.

Le reliefJe ne voulais pas tomber dans le cliché et faire un vulgaire S en relief parce que la stéréoscopie permet de voir en relief ! J’ai plutôt projeté une sorte d’ombre tout en créant un homologue du S. Ainsi, on a une légère impression de relief et de décalage.

Le fond possède lui aussi un écho mais de couleur blanche de sorte que sur fond de couleurs, on puisse voir correctement le support (voir les déclinaisons sur fond de couleurs).

Variante avec nom completLorsque cela est possible, on peut ajouter le reste du mot sté-réoscopie au logo, avec la police spécialement créée. Il n’est cependant pas nécessaire que le nom complet soit automatique-ment présent.

Process Black U Cool Gray 2 U Pantone 376 U

couleurs du logo

logo couleurs non-couchées

Process Black C Cool Gray 2 C Pantone 376 C

couleurs du logo

logo couleurs couchées

R :151 V : 190 B :13 R :237 V : 237 B : 238 R : 0 V : 0 B : 0

couleurs du logo

logo couleurs RVB

Process Black Uà 100%



couleurs du logo

logo noir & blanc

100 %

taille du logo - Stéréoscopie

50 %

25 %

Déc

linai

son

sur f

ond

de c

oule

urs

Brique PédagogiqueInterfaceoctobre 2008 - PSM Montbéliard - octobre 2008 - PSM Montbéliard - Yoann PIERRE - octobre 2008 - PSM Montbéliard - octobre 2008 - PSM Montbéliard - octobre 2008 - PSM Montbéliard - octobre 2008 - PSM Montbéliard - octobre 2008


Les boutons « suivant » et « précédent » permettent de passer d’un sous-découpage à l’autre, l’apprenant contrôe entièrement la situation.

Le format horizontal étiré permet de pouvoir position-ner correctement côte à côte deux fenêtres d’information : pratique pour multiplier les canaux d’apprentissages.

Le sujet que j’ai souhaité traiter dans le projet an-nuel de la brique pédagogique est la stéréoscopie.

Tout d’abord, il est nécessaire de prendre en comp-te que ma brique pédagogique fonctionnera dans un navigateur internet. Ainsi, mon projet intégrera des éléments extérieurs (barre d’outils du naviga-teur par exemple) d’un point de vue de l’interface globale affichée à l’écran. De plus, l’espace envi-ronnant la partie principale sera de taille différente suivant la résolution de l’écran.

Les templates ci-contre de l’interface sont compo-sés de contenus factices de sorte à avoir un maxi-mum d’éléments que l’utilisateur pourrait rencon-trer au cours de cette brique pédagogique.

Le format choisi est un format horizontal, dans un cadre, de sorte à ne pas utiliser de scrollbar. Ce choix nécessite des explications succintes et bien structurées. Ainsi, l’apprenant ne passe pas trop de temps au même endroit, gage de motivation et d’encouragement pour continuer.

Les couleurs utilisées dans l’interface sont sobres. Elles sont composées en majorité de variance de gris, seul le vert du logo est repris à certains endroits bien spécifiques qui donnent des informations sur l’état du système : état de survol de bouton précé-dent et suivant, indicateur d’étape dans le module (les ronds en haut à gauche du cadre), etc...De cette façon, l’utilsation des variances de gris permet d’avoir une grande gamme de couleurs, tout en restant harmonisée avec l’interface.

Le relief et les ombres sonts importants. Ils permet-tent de retraduire l’illusion de la stéréoscopie : la vision en volume depuis un support papier.

Chaque sous-découpage de chaque module est indiqué par un rond. Les ronds trans-parents correspondent à ceux qui ne sont pas terminés.

Utilisation de la police créée : « stereoscopie » pour les ti-tres de chaque sous-décou-page. La police de texte sera simplement l’arial.


Offrir à l’utilisateur de pouvoir basculer le support de la brique pédagogique en stéréoscopie ou non, n’apporte pas grand intérêt dans le processus d’ap-prentissage (sans compter le temps passé et les difficultés techniques à la mise en place d’un tel support). C’est pourquoi, j’utilise plusieurs effets d’ombres et de reliefs dans mon interface.

La brique pédagogique ayant une arborescence semi-linéaire (l’utilisateur choisit un module et le poursuit généralement jusqu’à la fin), je ne souhai-te pas réaliser une présentation de l’arborescence identique à celle d’un site internet. De ce fait, j’ai fondé la navigation de ma brique pédagogique. Une barre principale dans les rubriques qu’elle pro-pose, mais dissimulée telle une barre secondaire : l’utilisateur n’a pas besoin de voir ces informations durant son apprentissage.Lorsque l’utilisateur approche la souris de la barre en haut de l’écran cette barre descend, à la ma-nière d’un volet déroulant.

N’ayant pas encore entièrement défini toutes mes rubriques, les icones utilisées dans ce template sont elles-aussi factices mais reprennent l’esprit que je souhaite leur donner. Chaque rubrique est donc constituée d’un couple icone + texte de sorte qu’il soit le plus vite perçu et assimilé par le l’appre-nant : il ne doit pas faire d’effort pour se diriger mais uniquement pour améliorer ses connaissances.

Pour finir, le logo correspond à la version longue proposée dans le précédent exercice. Je l’ai placé sur le bord gauche afin qu’il ne puisse pas changer l’équilibre de la mise en page tout en étant toujours visible, même si la barre de navigation est ouverte.

La barre permet d’afficher des informations de tous ty-pes pour informer au mieux l’utilisateur, par exemple : l’heure, etc...

Chaque utilisateur s’enregis-tre pour suivre la formation, ainsi, il peut voir dans cette rubrique son évolution.

Par simple survol de la souris, la barre se déroule ou se ren-roule à la guise de l’utilisateur.


Les templates présentés ici sont des possibilités de mise en page de la «préface» de l’application.

Lorsque l’utilisateur arrive sur la première page, il peut directement entrer ses iden-tifiants pour ne pas perdre de temps et commencer rapidement le module. Si c’est la première fois qu’il vient, il est contraint de passer par la présentation du projet de la brique pédagogique sans pour autant devoir la lire... il garde le contrôe du dérou-lement des opérations avec les boutons suivant et précédent.

Il s’en suit l’inscription. Une fois faite, il peut accéder la brique et avoir un suivi per-sonnalisé de son évolution.

Le contenu de la barre de navigation est inexistant ou du moins réduit car l’utilisa-teur ne peut pas accéder à des contenus de formation à cet endroit.

Notons la mise en situation des indicateurs d’étapes du module qui s’allument au fur et à mesure de la position de l’utilisateur dans la «préface».

Documents

Stéréoscopie - Police, Logo et Interface