démarche
démarche
01
03/12/2021 -> 17/01/2022
création d’un site provisoire
Novembre 2021, à l’occasion de notre séminaire annuel, nous avons décidé de changer de nom. Collectif Bam deviendra Praticable.
À l’issue de cette semaine de réflexion, nous avons réalisé un mini-site internet présentant le nouveau nom accompagné d’un texte, diffusé aux proches du studio.
02
08/02/2022 -> Aujourd’hui
gestion de projet
Nous souhaitions faire nous-même notre site. Une répartition du travail était alors nécessaire, car nous sommes à la fois « client et prestataire » de notre projet. L’équipe fut donc constituée d’un « client » attentif aux besoins du studio et aux contenus à publier, d’une cheffe de projet concentrée sur l’organisation, d’un designer et d’un développeur pour la conception et la réalisation.
03
14/02/2022 -> 11/03/2022
analyse
Une fois organisés, nous devions examiner notre ancien site , celui de Collectif Bam. Ce diagnostic fut élaboré par un travail de décomposition des différents éléments qui le structurent. Nous l’avons accompagnés d’observations critiques essentielles à l’écriture du texte. Des entretiens ont été aussi menés, afin d’identifier les différents outils numériques utilisés, les observations et critiques existantes, les pratiques désirées avec notre nouveau site internet, etc.
La documentation d’un projet est inhérente à la démarche de design. Cette phase de diagnostic s’est donc intéressée aussi aux différents outils que nous utilisons pour travailler et que nous pourrions connecter à notre site. Nous commencions à entrevoir la base technique de notre site.
Cet exercice auto-critique génère naturellement un esprit de travail, des principes et des idées. Nous nous sommes donc penchés sur la structure et la composition du site. Comment est-il fait ? De quoi est-il composé ? Que permet-il de faire ? Quelles sont les options proposées ? Comment sont-elles présentées ?
04
01/03/2022 -> 18/03/2022
intention
Nous questionnons généralement les demandes qu’on nous adresse, notamment sur le plan philosophique. Cela donne lieu à des réflexions, des discussions entre nous. Nos positions philosophiques sont lisibles non seulement dans nos “notes d’intentions”, que demandent les appels à projet, mais au-delà elles s’incarnent dans nos propositions elles-mêmes, à travers leurs dimensions formelle, économique et technique.
Cette fois, nous avions des idées en souffrance. Des vues quant au numérique, quant au design et que notre site ne mettait pas franchement en œuvre. Nous avions par ailleurs des intuitions formelles, des bouts de code, des vieux dessins. Nous devions (nous) structurer. Et pour ce faire définir la fonction du site. Quelle est-elle au juste ? Que doit-il permettre ?
Nous ne voulions pas d’un site « vitrine », telle qu’une vitrine de magasin. En faire un support de communication n’est pas notre ambition. Nous avions en tête un site modifiable aux formes simples, sobres et froides. Un site sans fioriture, avec de l’espace. Un site qui ne (se la) raconte pas, qui permet de (se) présenter dans le plus simple appareil.
Présenter, voilà ce qu’en un mot nous souhaitions pouvoir faire. Présenter des projets, des maquettes, du code, du texte, des images… bref pouvoir présenter au sens strict. Mais, qu’est ce qu’un site peut présenter ? Quelle différence entre représenter et présenter ? Toutes ces questions nous ont amenées à l’écriture d’un texte fondateur, intitulé « Qu’est ce que présenter ? » . Il réunit quelques réflexions et intentions motrices pour le design de notre site.
05
23/03/2022 -> 12/04/2022
expérimentations techniques
Nous voulions faire de notre site un véritable outil de travail permettant de documenter nos projets, de faire des présentations diverses et convenir à des différents moments de travail. Nous avons expérimenté des connexions aux outils numériques que nous pratiquons déjà, en utilisant par exemple des iframes et des APIs , Application Programming Interface en Anglais. Nous avons d’ailleurs prototypé une extension Firefox fonctionnelle basée sur l’ API de Notion , permettant d’envoyer des blocs Notion vers une page praticable et de les convertir en blocs praticables pour bénéficier des capacités propres à notre site.
Nous ne sommes pas allé au-delà de l’expérimentation pour le moment. Cela nous a permis de vérifier certaines hypothèses en matière de faisabilité technique. Ces hypothèses dessinent en quoi pourrait consister ce que le designer John Maeda imaginait sous le nom de bodyless CMS .
06
06/04/2022 -> 12/04/2022
parti-pris
Le site doit pouvoir présenter différents contenus et médias, tels des blocs. Les pages du site doivent pouvoir accueillir ces blocs, tel un espace de travail. Enfin, quelques boutons doivent permettent la prise en main et l’accès aux diverses options, tel une interface de contrôle. Ainsi, nous pouvions penser la structure notre site. Nous avons donc élaboré une grande variété de schémas afin de visualiser et imaginer les différents types de blocs et leurs interactions, les options proposées par le site, les liens possibles entre les blocs, etc… En résumé, nous avions trouvé les fondamentaux de notre site, à savoir des espaces, des blocs et une interface.
Il s’avère que des amis du studio ont développé un projet similaire : culturesvisuelles.org . Le site de ce groupe de recherche a la particularité d’être construit à partir d’espaces et de blocs. Une fois connecté, l’interface de cultures visuelles présente diverses options d’édition, aussi bien en back qu’en front. Ce site nous est donc apparu comme un fork , une bifurcation potentielle. En faire une variation nous a permis à la fois de gagner du temps et de contribuer au projet. Partir de l’existant, contribuer et mettre en commun sont des principes méthodiques fondateurs du studio. Cette démarche se poursuit encore aujourd’hui avec une réflexion en cours sur la mise en place d’une librairie praticable.
07
23/05/2022 -> 03/06/2022
premières esquisses
À ce stade, nous nous sommes concentrés sur la mise en forme des blocs, de l’espace et de l’interface de contrôle. L’exercice consistait à concevoir les options possibles du site et leurs présentations. Nous ne devions pas définir les pages du site, mais les fonctions qui permettent de faire des pages. Nous dessinions assez rapidement les blocs et l’espace. En revanche, le design de l’interface de contrôle, avec l’ensemble des options fut un exercice beaucoup moins évident. Nous souhaitions une présentation égalitaire et évolutive des différentes possibilités. De plus, nous cherchons à réduire la distinction habituelle entre « producteur » et « consommateur ». Bien souvent, il y a d’un côté la partie visible du site qu’on appelle le front et d’un autre les coulisses que l’on nomme le back. Nous ne voulions pas de cette disposition. Nous ne devions pas contraindre le design par des anticipations d’usage. Ainsi, l’interface devait présenter toutes les options de manière égale et à tout moment.
08
03/06/2022 -> 10/09/2022
maquettes
Notre démarche fut empirique. Nous avancions dans le design de l’interface au fur et à mesure, d’un dessin à un autre. De nos premières esquisses aux maquettes définitives, nous avons travaillé sur le même fichier Figma tout au long du projet. Le travail consistait à améliorer sans cesse les différents blocs (texte, image, vidéo, représentants, etc). Comment créer un bloc ? Comment le modifier ? Nous dessinions dans le détail. Les choix graphiques se sont réalisés naturellement dans la mise en forme des éléments du site. Par exemple, les blocs ne peuvent techniquement être dimensionner qu’avec la bordure droite et de manière horizontale. Il fallait donc dessiner la bordure droite des blocs. Pour se faire, nous nous sommes inspirés des réglettes de mise en page présentes dans les logiciels de traitement de texte. En résumé, la forme devait convenir à la possibilité technique. De longues réflexions ont été menées sur le design de l’interface de contrôle. Nous avons imaginé de nombreuses fonctions, comme pouvoir filtrer les blocs, changer les compositions de pages, télécharger du contenu, éditer et ajouter du texte, etc… L’enjeu fut de les organiser, de faire une structure capable de les ranger et d’en accueillir des nouvelles.
09
13/09/2022 -> Aujourd’hui
appareil design
À ce stade du projet, le design des blocs est stabilisé. Nous avions alors un ensemble de composants et de styles. Nous décidions de les extraire dans des fichiers dédiés pour faciliter leurs utilisations. Cela permet par exemple de les utiliser, comme une charte graphique, pour la création de nouveaux documents. Nous avons donc créé un premier fichier Figma, intitulé « Design graphique » dans lequel se trouve tous les styles et éléments graphiques fondamentaux.
Le second fichier, nommé « Appareil design » est le system design de Praticable. Il réunit tous les composants (blocs et autres) utilisés pour notre site internet et d’autres documents. Les deux fichiers sont liés entre eux. Ils permettent aussi de documenter le projet, en présentant des indications et autres informations utiles. Au fond, l’enjeu de ce travail est d’harmoniser les différentes éléments (noms, tailles, proportions, etc) et les deux librairies (design graphique et appareil design).
liens [Figma]
10
30/08/2022 -> Aujourd’hui
développement
(en cours de documentation)