Low-Tech Web Design vs Solarpunk
ロー・テック・ウェブ / ソーラーパンク
Low-Tech Web Design comes from UI Expression and Solarpunk from Visions of the Future. One is style and the other aesthetic. They are reached for with different intent, which is the fastest way to tell them apart.
Low-Tech Web Design
The style starts where Kris De Decker and his collaborators moved Low-tech Magazine onto a solar powered server in 2018 and published how they had built it. Images drop to black and white with four levels of grey, not one web font is loaded, and the height of the colored field behind the page reports how much charge the battery has left. Data weight becomes the first constraint on the layout.
Solarpunk
Refuses to oppose nature and technology, painting a bright future that is tended by hand.
| Low-Tech Web Design | Solarpunk | |
|---|---|---|
| Era | 2018– | 2000s– |
| Family | UI Expression | Visions of the Future |
| Kind | Style | Aesthetic |
| Cues | Photographs are reduced to black and white with four levels of grey, the dot grain left plainly visible / The height of the colored field behind the page shows remaining battery charge and falls at night or in bad weather / No web font is loaded at all, so text arrives in a monospace or the browser's own default / Each content category paints the page a fixed color, blue #162DAB, red #D11305, or green #006951 | Green and sunlight / Local handwork / Renewable technology / Community |
| Best used for | Building an article page an order of magnitude lighter without giving up its photographs, for readers on thin power and thin bandwidth · Reporting a system's state, such as remaining charge or uptime, through the look of the page itself rather than a readout | Talking about ecology through possibility, not guilt · Concrete futures where people and technology coexist |
| Type | Load no web font; set in a monospace or whatever the browser already has, and hold the text to a single column around 33rem wide. | A humane sans with handwritten notes |
| Composition | One column running down the page with no decorative frames; images may exceed the text column in size as long as they weigh less than the original file. | Arrange plants, people and devices as a circulating relation |
| Material | Convert images to four level black and white dither and add color afterwards with a CSS filter per category, then tie the height of a background field to the power supply. | Leaf green, solar yellow, wood, glass, copper |
| Caution | Copying the dithered look by running a filter over full resolution photographs leaves the payload untouched, producing a heavy page that only looks light. | Don't just add plants. Imagine the systems of resources, labor and community. |