- Périmètre
- Design et développement du site
- Lieu
- Le Caire, Égypte
- Secteur
- Production de films et studio créatif
- Engagement
- Projet publié
- Par
- Bigad Elsherif, fondateur d’Appstruct
Un studio dont l’argument est le goût
Good Stuff est un studio créatif indépendant et une société de production de films au Caire. Il réalise des publicités, des clips et des films de marque, et travaille la photographie, la vidéo par IA, les effets visuels et la post-production. Sa propre formule : « certified good taste », un bon goût certifié, classé et tamponné par un Département du bon goût qui n’existe pas.
Cette plaisanterie est le brief. Le site d’une société de production se juge comme ses films : en quelques secondes, à l’impression, par des gens dont le métier est de fabriquer des images. Une grille de vignettes bien rangée aurait montré le travail sans rien dire de ceux qui le font. Le site devait être lui-même une pièce du travail du studio, tout en laissant un producteur trouver un film, un nom de client et une adresse e-mail sans avoir à jouer le jeu.
Visiter le site
L’idée
Un seul objet porte tout le site : le smiley.
Le logo est une fenêtre
Sur le premier écran, le smiley du studio est découpé dans la page et les films passent à travers, entre les deux moitiés du nom. La marque n’est pas posée sur le travail ; elle est faite du travail. Elle réagit au pointeur, et la page le dit en trois mots : move, click, hold.
Un court métrage avant le site
La première visite s’ouvre sur un générique piloté par le défilement : un visage boudeur tracé en jaune sur noir, une liste de mauvaises idées, puis une page qui vire au jaune et retourne la moue. Il dure quatre scènes, il est présenté comme tel, et un bouton pour le passer attend dans le coin celui qui venait chercher un numéro de téléphone.
Chaque section est un objet que l’on manipule
Les films sont un mur de téléviseurs avec des chaînes. Les services sont des touches de piano reliées au clavier. Le processus tient en quatre formulaires officiels. Les photogrammes sont des livres sur une étagère. Chaque section emprunte un objet à un plateau ou à un bureau, si bien que la structure d’un site de studio assez classique - travaux, services, processus, galerie, contact - ne se lit jamais comme telle.
Ce que nous avons fait
Cinq décisions portent l’essentiel du travail.
Le défilement comme tête de lecture
La page d’accueil est longue à dessein, et le défilement la pilote comme une tête de lecture pilote une timeline : l’ouverture débouche sur la bobine, la bobine tourne, un timecode s’égrène dans le coin. Chaque séquence est épinglée sur une distance fixe : elle se joue à la vitesse du visiteur et s’arrête quand il s’arrête.
Neuf films, un seul écran
La section des films est un grand téléviseur entouré de huit petits. Cliquer sur un petit poste change de chaîne ; cliquer sur le grand active le son. Le client, le titre, le type et l’année s’affichent à l’écran comme un bandeau d’antenne : l’information dont un producteur a besoin est sur l’image elle-même.
Une bibliothèque pour les photogrammes
Trente et un photogrammes sont rangés comme des dos de livres sur deux étagères, chacun avec un titre. En tirer un l’ouvre en grand, avec précédent et suivant. Une grille de photographe aurait été plus rapide à construire et aurait ressemblé à toutes les autres ; l’étagère donne à chaque image un nom et une place.
Une seconde salle pour les expériences
Le travail en IA vit sur sa propre page, Fix in Post, construite comme un téléviseur en bois avec un magnétoscope : on choisit une cassette, on pousse les curseurs, l’image répond. Il est tenu à l’écart des films de commande, pour que ce qui a été tourné et ce qui a été généré ne se confondent jamais.
Le même site sur téléphone, refait pour un pouce
Sur téléphone, la navigation descend dans une barre en bas de l’écran, le mur de téléviseurs devient un seul poste, et les jeux de pointeur deviennent des touchers. Rien ne dépend du survol.
Sur téléphone
La plupart des liens vers le site d’un studio arrivent par un message ou un fil, sur un téléphone. La mise en page y est un design à part entière : les mêmes sections, les mêmes plaisanteries, dimensionnées et ordonnées pour une main.
Le processus, et la sortie
Joueur en surface, simple en dessous
Un site aussi animé est d’ordinaire invisible pour tout ce qui n’exécute pas ses scripts. Celui-ci est construit pour ne pas l’être.
- —Chaque page est servie en HTML achevé. Le texte de la page d’accueil, la liste des films, celle des clients et les coordonnées sont dans le document avant qu’un script ne s’exécute.
- —Chacun des neuf films a sa propre page, où les faits sont écrits en phrases : ce que c’est, pour qui il a été fait, l’année, la durée, et un lien pour le voir.
- —La page d’accueil se termine par une courte section « at a glance » en prose ordinaire : ce qu’est le studio, où il se trouve, ce qu’il fait, ses films choisis et ses clients.
- —Les données structurées sont générées au build à partir du même fichier de données que les pages : le balisage ne peut pas s’écarter de ce qui est à l’écran.
- —Le sitemap recense chaque affiche de film et chaque photogramme. Le robots.txt accueille nommément moteurs de recherche et assistants IA, et un llms.txt résume le studio et renvoie à chaque film.
- —Le mouvement est facultatif. Le générique peut être passé, un lien d’évitement mène droit au contenu, et les pages de film fonctionnent comme de simples documents.
Not an agency. Not quite an art club.
Où en est le projet
En ligne sur goodstuffstdz.com, avec neuf films, trente et un photogrammes et la liste des clients du studio.
Le site crédite Appstruct comme le partenaire qui l’a construit, dans sa section services et dans son pied de page.
Chaque film peut être atteint, lu et lié sans que l’animation ne tourne.
