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:
> [name=Tom Bucher] [time= Feb 25, 2021] [color=#ff4233]

## 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

| Papier | Écran |
| ---------- | ---------- |
| Lumière indirecte | Lumière directe |
| Disponible | Conditionné |
| Figé | Dynamique |
| Immuable | Modifiable |
| Statique | Responsive |
| Cm ou Mm | Pixel |
| Cmjn | Rvb |
| Synthèse soustractive | Synthèse additive |
| 300 dpi | 72 dpi |

### 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](https://labelloutre.fr/wp-content/uploads/2016/07/ecofont_ecofont_2.02_francais_282864.zip)
- 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](http://www.knowltonmosaics.com/)

[Guide Écoconception](https://eco-conception.designersethiques.org/guide/)

[Color Bot](http://www.whatimade.today/our-frst-reddit-bot-coloring-b-2/)

[Bot Writer](https://www.theguardian.com/commentisfree/2020/sep/08/robot-wrote-this-article-gpt-3)

[texte > image](https://openai.com/blog/dall-e/)

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](https://upload.wikimedia.org/wikipedia/commons/a/a5/Tsunami_by_hokusai_19th_century.jpg)
⇊
[à l'Ascii art](https://twilio-cms-prod.s3.amazonaws.com/images/ASCII-ukiyowaves2048-gray.width-1616.png)

transformé en png pour la prévisualisation

## Notes
:top: mettre en avant les différents workshops et les différents résultats obtenues

:watch: mettre à jour le site thesoftmachine