Contraintes et possibilités d'un design graphique lowtech | Futur antérieur

tags: Futur antérieur Outil de publication design lowdesign détruire/transmettre plan

Last edited:
Tom Bucher Feb 25, 2021

Délimiter les contraintes et les possibilités d'un design graphique à bas coût carbone imprimé et numérique

Impression vs. Numérique

Les différents supports de la connaissance du papier à l’écran, entre similitudes et faux semblant

Gestes possibles pour l'impression

À première vue les gestes d'une conception graphique à bas impact sur papier serait les suivants (liste non-exhaustive)

Forme

• Réduire la taille de l'ouvrage
• Imprimer en une seul couleur
  • Quelle est la nuance la moins nocive? (TBD)
  • …
• Imprimer le moins possible sur le support
  • On peut utiliser ecofont
  • Privilégier une typo light
  • Grossir les trames d'impression
  • …
• Mettre plus de contenu dans une page
  • Réduire l'interlettrage et l'interlignage
  • Réduire le corps de la typographie
  • Coder le texte (exemple QR code, cf. test sur L'homme qui plantait des arbres, de Jean Gionno)
  • …

Contenu

• Soustraction
  • Supprimer des mots (bout de mots ou totalité)
  • Supprimer des lettres (bout de lettres ou totalité)
  • Supprimer les images en ne laissant que légende et crédit
  • …

Gestes possibles pour le numérique

À première vue les gestes d'une conception graphique à bas impact sur écran serait les suivants (liste non-exhaustive)
Support

• Limiter la taille et la résolution des écrans
• Limiter le nombre de requête
• Privilégier un stockage en local et mettre à disposition sur le web les métadonnées et géolocalisation des fichiers volumineux
• Choisir un hébergeur "vert"
• Utiliser une électricité "verte"
• Eliminer les fonctionnalités non essentielles
• Limiter le CSS
• Limiter les scripts
• Privilégier les sites web statiques puis les sites web générés (Jekyll)

Forme

• Privilégier le noir et limiter au maximum le blanc
• Privilégier une typographie light sur fond noir et bold sur fond blanc
• Privilégier des typos systèmes
• Éliminer les animations js et css

Contenu

• Réduire le nombre de médias (images, vidéos, sons)

• Limiter le poids des images, vidéos, sons

  • Compresser

    • jpg
    • png
    • webp
    • mozjpeg
    • h.265
    • mpeg
    • …

  • Dégrader

    • Trames
    • Ascii art
    • Glitch
    • Roman-photo (ne garder qu'une image sur 24/25 / sec)
    • Descritption (ne garder que les métadonnées d'une œuvre)

• Soustraction

  • Supprimer des mots (bout de mots ou totalité)
    • Caractère typographique effaçant les petits mots qui ne sont pas vecteur de sens
    • Caractère typographique masquant le haut des mots ou le bas dépendant des montantes et descendante
    • Caractère typographique changeant les mots pour des synonymes plus court
  • Supprimer des lettres (bout de lettres ou totalité)
    • Création d'un caractère typographique réduisant les lettres à sa plus simple forme (sans fioriture, dont la surface est la plus petite possible, évidé etc.)
    • Création d'un caractère typographique où il manque des bouts en fonction du mot et/ou de la phrase
  • Supprimer les images en ne laissant que légende et crédit
  • …

Ressources

https://collectif.greenit.fr/ecoconception-web/115-bonnes-pratiques-eco-conception_web.html

http://www.ecometer.org/rules/

ascii art:
https://manytools.org/hacker-tools/convert-images-to-ascii-art/

trames:
http://paperjs.org/examples/division-raster/
https://scriptographer.org/scripts/raster-scripts/object-raster/

References

Ken Knowlton

Guide Écoconception

Color Bot

Bot Writer

texte > image

https://beta.openai.com/

Exemples

La Grande Vague de Kanagawa, Hokusai, 1830 ou 1831, Estampe japonaise, Gravure sur bois, 25,7 × 37,91 cm
poids estimé : ± 22g
⇊
poids estimé web (jpg): 2,25 mB = 0,25 gCO2e = 0,5 Wh
⇊
poids en ascii: 10 ko = 0,01 mB = 0,001 gCO2e = 0,002 Wh

du jpeg
⇊
à l'Ascii art

transformé en png pour la prévisualisation

Notes