Alephbeth

Démo du fonctionnement d'un wireframe de la bibliothèque de typographies.
DÉBUT VIDEO

• • de 0 à 7 secondes : Animation d'entrée du mot alephbet scindé en aleph et beth qui arrivent respectivement de la gauche vers la droite pour le premier et de la droite vers la gauche pour le second, puis sortie de ceux-ci.
  
• • de 7 à 13 secondes : clic sur le bouton « Parcourir les polices »
• • de 13 secondes à 17 secondes : interface du catalogue composé en partie haute d'un header qui comprend un icône burger, le logo abrégé de AlephBet et à droite un icône pour passer d'un mode light en mode dark. Sous ce header se trouve une barre de recherche puis un bouton afficher/masquer les filtres et enfin la liste des polices avec la possibilté d'afficher en mode liste ou mode carte. Par défaut les filtres sont affichés. Clic sur le bouton « Masquer les filtres »
• • de 17 à 23 secondes : Suite au clic précédent le libellé du bouton change en « Afficher les filtres ». Clic de nouveau sur le bouton pour afficher Les filtres. Les filtres présents et ouverts par défaut sont « Classification » et « Propriété ». Clic sur le premier, puis le second pour simuler le fonctionnement plier/déplier.
• • de 23 à 33 secondes : Clic sur l'icone affichage en mode liste avec scroll vers le bas puis retour en haut de la liste. Nouveau clic sur l'icône symbolisant l'affichage en mode carte
• • de 33 à 39 secondes : Le curseur se déplace de nouveau sur le haut et pointe vers le filtre « Classification ». Ce dernier est composé de : Sans serif, Serif, Display, Cursive, Mono. Clic sur Serif puis sur les autres. la liste des polices se met à jour automatiquement
• • de 39 à 55 secondes : Le curseur se déplace de nouveau sur Serif et clic sur ce dernier. Le curseur se délace cette fois-ci sur « Propriétés » et le curseur déplace le slider « Nombre de styles ». Ce slider comporte deux boutons circulaires permettant de choisir des plages. Par exemple de 6 à 10 styles. Pour l'exemple, la plage choisi est au maximum et affiche 47 styles. La liste des typographies se met à jour en conséquence. Retour du premier bouton du slider au départ. La liste affiche maintenant toutes les polices ayant entre 1 et 47 styles.
• • de 55 à 59 secondes : Léger scroll vers le bas et clic sur la carte de la typographie Antique Olive. La page de typographie choisie s'affiche à l'écran avec la liste des 11 familles qui en font partie. Chaque famille s'affiche sous la forme d'une carte ou liste avec le nom de la famille, un texte d'exemple (« The quick brown fox jumps over the lazy dog ») et un « bouton on/off » pour télécharger la famille.
• • de 59 secondes à 1'05 : Clic sur le bouton télécharger de la 1e famille de la police Antique Olive, une fenêtre s'ouvre au dessus (la partie en dessous se « retrouve voilée » et inaccessible). Cette fenêtre comporte le titre de la police de caractère Antique Olive, le nom du créateur Roger Excoffon, le nombre de styles (11). Pour chaque style une case à cocher est présente et à la toute fin un bouton « télécharger ». Clic sur la case à cocher de la 2e famille qui passe à l'état actif puis clic de nouveau sur cette même case à cocher qui devient vide puis clic sur la 1e case à cocher déja cochée qui devient par conséquent décochée. Fermeture automatqiue de la fenêtre puisque qu'aucune case n'est maintenant cochée.
• • de 1'05 à 1'18 : Retour à la page de la police Antique Olive. Le curseur se déplace vers le haut de l'interface et clic sur l'icone du mode d'affichage en haut à droite. Le thème change passant d'un mode light à un mode dark. Clic sur le bouton télécharger de la 1e famille de la police Antique Olive, une fenêtre s'ouvre au dessus (la partie en dessous se « retrouve voilée » et inaccessible). Cette fenêtre comporte le titre de la police de caractère Antique Olive, le nom du créateur Roger Excoffon, le nombre de styles (11). Clic sur la croix de fermeture de la fenêtre en haut à droite de celle-ci. Passage de nouveau en mode light via le clic en haut à droite de l'interface.
• • de 1'18 à 1'20 : Clic sur le logo abrégé de AlephBeth, retour à la page d'accueil de l'application.

FIN VIDÉO