HzMycelium ???

Enfin du design !!

Ici c'est la page qui présente tout le côté design autour du projet de diplôme (on parlera pas de python)
Y'a beaucoup de choses à lire donc le menu est utile pour naviguer :

• L'idée principale
• les templates disponibles
• construire les templates
• Le site web
• L'arborescence
• L'ASCII dans les fichiers config

Idée principale

HzMycelium / HertzMycelium : **mycélium = rapport au souterrain (underground) et aux liens entre les artistes, à l'évolution tentaculaire de la scène. Hertz = inclure le son dans le nom, sans préciser quelle scène (au début je voulais un rapport au rap, mais la scène visée s'est un peu élargie)

Emprunter aux esthétiques de la demoscene des codes et des concepts comme les fichiers NFO / la documentation en ASCII art
==> j'utilise une fonte sur MoebiusXBIN (newschool-hf) pour représenter les "racines", le mycélium (cf.problème dans la partie arborescence)

Pour la fonte j'ai fait quelques tests, je voulais une police à sérifs pour contraster avec l'ASCII, et éviter de trop tomber dans le cliché des polices en pixels.
Pour l'instant je choisis la Wondertype qui remplit bien ces critères en plus d'avoir un petit look moderne/alternatif avec ses lettres qui bavent.
Petit inconvénient : elle n'a pas d'italique ni de gras, mais je vais trouver d'autres options pour les remplacer (en couleur etc)

Templates

Cette semaine (30 mars - 3 avril) j'ai été à fond sur le design des templates que les artistes pourront utiliser pour générer leur site. Évidemment c'est réalisé sur Photoshop pour l'instant, c'est juste à l'état de maquettes. Les prochaines semaines je me mets à fond sur rendre ces maquettes fonctionnelles en web, et ça va pas être facile parce qu'il y a toute la partie javascript (pour les players audios et les images random) à faire marcher.

À retenir pour chaque template :
J'ai dû prendre en compte la faisabilité technique de ces templates par rapport à l'utilisation par les artistes, donc jouer avec des paramètres réduits et plutôt stricts. Sur une même template, les seules choses qui changent d'un artiste à l'autre sont les couleurs (une pour le fond, une pour la police, une principale et une secondaire), et la police (5 disponibles pour l'instant, 3 "basiques" et 2 plus extravagantes).

Polices disponibles :
- Wondertype (sérif "pixellisé" mais discret, la même que pour le site de présentation)
- Inter Semibold (Helvetica mais sous licence libre),
- GNF (vraie font pixel cette fois, il m'en fallait une forcément)
- La Machine Company (machine à écrire, pour les audacieux·ses)
- MBA Slice mono (encore une font pixel mais beaucoup plus expressive)

Ça donne ce genre de paramètres :

Il y a pour l'instant 3 choix de templates :

HYPHE (la plus simple, template de base)
Elle reprend l'utilisation de l'ASCII présent dans la DA générale du projet, pour faire une sorte de template "par défaut" liée à HzMycelium (je réfléchis à intégrer des racines en ASCII aussi mais pas encore sûr).

Pas encore sûr du scroll pour accéder à tous les morceaux, il est de toute façon trop haut là j'agrandirai la zone dédiée aux morceaux, mais je voulais que la description apparaisse au moins un peu au bas de l'écran.
Pas encore convaincu non plus par les boutons en ASCII sur le player tout en bas, peut être que je vais devoir faire une exception sur le style pour le rendre plus conventionnel ?

Version sans les photos.

Dès que l'utilisateur·ice joue un morceau, les photos viennent s'empiler une par une aléatoirement sur le site. Normalement il y a un bouton pour reset les photos mais j'ai oublié de le mettre (il y est sur la template d'après)

PSILO (la template chaotique)
Inspirée des pages/blogs du début du web avec des gradients, des ombres, des marges approximatives,

L'esthétique early web est pas encore très bien retranscrite, parce que c'est assez compliqué de bien la répliquer sur Photoshop (qui l'eût cru). Je pense que ce sera encore plus poussé quand je ferai la vraie page web.
Les 2 polices plus extravagantes (milieu et droite) sont vraiment plus adaptées à cette template en particulier, même si elles fonctionnent aussi sur les autres.
Y'a encore des détails à modifier, surtout les boutons et icônes (téléchargement, partage, player en bas) pour qu'ils collent à l'ensemble, là ils sont trop lisses.

Version sans les photos

Avec un empilement de photos plus chaotique façon album/cartes postales. Idéalement attrapables et bougeables autour un peu comme ça

SPORE (la template épurée)
Cette template laisse le plus de place possible à l'exploration des images, en gardant une interface la plus minimale possible.
Pour la partie images j'hésite encore entre ce nuage de photos et ce canevas infini. Ça va sûrement dépendre duquel j'arrive à reproduire, surtout que le code nuage de photos n'est pas récupérable contrairement au canevas.

Ici pas besoin de versions avec/sans photos, tout est déjà là

Construire les templates

Depuis 1-2 semaines (début/milieu avril) je suis passé sur la mise en forme web des maquettes pour les rendre fonctionnelles.
J'ai pu écarter très vite une grosse inquiétude concernant ma capacité à faire fonctionner un player audio et à le styliser, puisque j'ai trouvé la librairie AmplitudeJS qui est hyper simple et pratique à utiliser, en plus d'avoir une documentation et des exemples qui aident beaucoup.

Le plus gros problème actuellement va être de faire fonctionner la partie image. Sur les templates Hyphe et Psilo ça devrait aller puisque l'accumulation aléatoire je sais faire, mais sur la template Spore c'est beaucoup plus compliqué, l'exemple de canevas infini (cf plus haut) est en fait en Node.js. J'y connais rien et une petite heure d'investigation me permet de conclure que ça a l'air absolument infernal.

Pour l'instant je pense passer sur les autres templates en attendant de discuter avec Julien sur ce sujet, sur Spore le gros du travail est fait, il y aura juste quelques ajustements à faire, notamment sur les questions d'UI/UX.
Le plus long c'est surtout de vérifier que la template supporte plein d'utilisations différentes (photo d'artiste ou cover non carrée, descriptions et titres super longs...). Pour ça je pense qu'une fois que j'en aurai 2 de prêtes j'irai chercher des artistes pour discuter avec eux de ce qui manquerait ou qu'il faudrait retoucher.

Page album version paysage

Version mobile (désolé pour la qualité)

Page d'accueil version paysage

Et version mobile

Le site web

Il est hébergé sur les Ateliers web pour que tout le monde puisse le visiter, je l'actualise petit à petit en faisant des backups à chaque gros changement.

En partant du principe que le nom HertzMycelium / HzMycelium / HzM va rester, parce qu'il faut que j'avance et que j'aurai du mal à trouver mieux, j'ai dessiné un logo typographique en ASCII sur MoebiusXBIN, toujours inspiré par les logos de la demoscene etc :

J'ai ajouté quelques détails esthétiques au site pour pousser le visuel qui était assez basique (et pas encore au top mais je creuse petit à petit) :
- effet d'obscurité et de lampe torche (désactivable avec un bouton parce que c'est pas hyper pratique à la longue) -> underground, souterrain, fouiller, découvrir
- nouvelles racines avec la fonte newschool_hf, la même que sur le schéma de l'arborescence -> plus cohérent et mieux que les racines ASCII avec les caractères unicodes pas très élégantes.

C'est la vitrine du projet, c'est par là que les utilisateur·ices vont découvrir/accéder à l'outil. Dessus je vais pouvoir résumer le but de cet outil, mon intention, développer une identité graphique, et aussi avoir une page spécialement dédiée à la documentation (= comment utiliser le générateur de A à Z, du téléchargement à l'hébergement du site).

À noter : j'ai choisi d'écrire tous les textes de présentation, la documentation etc de manière un peu moins formelle, plus "parlée", ça convient mieux au public visé, pas besoin d'en faire des caisses et je trouve que ça rend l'outil plus accessible, moins corporate en tout cas.

Arborescence

Problème :(
La fonte que j'utilise sur MoebiusXBIN pour faire les racines est inutilisable ailleurs (rejetée en HTML). Il ya bien une option "Export Font" sur Moebius, mais ça donne un fichier .F16 (j'ai fait des recherches, fonts en 16pixels utilisables sur des trucs ANCIENS genre les DOS tout ça), ou je la télécharge directement à la source sur un site obscur, mais là c'est un fichier .xb et c'est à peu près pareil.

J'ai à peu près tout essayé avec ces 2 extensions, convertir etc, mais le problème c'est que c'est des fichiers raster (je crois que c'est le terme), et qu'il faudrait du vectoriel (ttf, otf), donc aucun moyen à part en retraçant la fonte à la main et là c'est pas ma priorité...

C'est un peu dommage parce que j'aurais bien aimé l'utiliser directement sur le web, là je vais être obligé d'en faire des png exportés depuis MoebiusXBIN et c'est beaucoup plus rigide à utiliser (aussi parce que les options d'export de Moebius sont limitées = pas de choix de résolution donc les png exportés sont assez petits).
À la place pour l'instant j'utilise les caractères Unicode (les gros carrés là) mais c'est pas du tout le même effet.

ASCII

Toujours inspiré par la demoscene (mais merci Julien pour l'idée), les fichiers config dans lesquels les artistes rentrent leurs infos peuvent aussi porter des éléments graphiques. Puisqu'on ne peut pas définir la police utilisée, il faut utiliser des caractères Unicode universels, donc toujours cette série de carrés.
Malheureusement (ça rentre aussi dans la série des problèmes), l'affichage n'est pas super sur le bloc notes de Windows, je suis encore en train de réfléchir à une façon de contourner cette limitation (mais je suis en train de me demander si je vais pas devoir faire avec...).

Je pourrais écrire un paragraphe pour justifier le choix d'utiliser l'ASCII, mais cette citation le fait déjà très bien. En gros toutes les raisons qui motivent la création de ce projet de diplôme se retrouvent dans cet état d'esprit.

L'attrait pour l'art en ASCII ne vient peut-être pas de la nostalgie qu'il transmet, mais de ce qu'il représente : les idéaux d'un «cyberespace». C'est un désir nostalgique de ces jours pré-internet où les sociétés n'avaient pas encore pris le contrôle de nos quotidiens digitaux, et où la communauté pouvait encore s'organiser elle-même.
Traduit depuis l'article d'Adel Faure sur Velvetyne

Les racines ASCII dans le bloc notes par défaut sur Windows = écart entre les lignes, pas super...

Les racines ASCII dans Notepad++, une version améliorée du bloc notes, mais à télécharger donc pas possible du côté utilisateur·ices, pas juste pour visionner des ASCII correctement.