Low-Tech Web Design

ロー・テック・ウェブ / 2018– / Style / Styles d'interface

Le style commence là où Kris De Decker et ses collaborateurs ont installé Low-tech Magazine sur un serveur alimenté par l'énergie solaire en 2018 et ont publié leur méthode. Les images tombent en noir et blanc à quatre niveaux de gris, aucune police web n'est chargée, et la hauteur de l'aplat coloré placé derrière la page indique la charge restante de la batterie. Le poids des données devient la première contrainte de la mise en page.

Les photographies sont réduites au noir et blanc à quatre niveaux de gris, le grain des points restant bien visible / La hauteur de l'aplat coloré derrière la page montre la charge restante et descend la nuit ou par mauvais temps / Aucune police web n'est chargée, le texte arrive donc en chasse fixe ou dans la police par défaut du navigateur / Chaque catégorie de contenu teinte la page d'une couleur fixe, le bleu #162DAB, le rouge #D11305 ou le vert #006951

Images sur la page d’origine

Entrée du dictionnaire

Usages idéaux
Construire une page d'article dix fois plus légère sans renoncer aux photographies, pour des lecteurs à faible énergie et faible débit · Communiquer l'état du système, la charge restante ou le temps de fonctionnement, par l'aspect de la page plutôt que par un affichage chiffré
Typographie
Ne charge aucune police web et compose en chasse fixe ou avec ce que le navigateur possède déjà, en tenant le texte dans une seule colonne d'environ 33rem.
Composition
Une colonne qui descend la page sans cadre décoratif, et les images peuvent dépasser la largeur du texte tant qu'elles pèsent moins que le fichier d'origine.
Matière
Convertis les images en tramage noir et blanc à quatre niveaux, ajoute la couleur ensuite par un filtre CSS selon la catégorie, et relie la hauteur d'un aplat de fond à l'état de l'alimentation.
Précaution
Imiter l'aspect du tramage en appliquant un filtre à des photographies en pleine résolution laisse le poids inchangé et donne une page lourde qui a seulement l'air légère.
Pour approfondir
2018年のHow to Build a Low-tech Website?本文(4階調のディザと静的生成の記述) / 同サイトのCSS変数(地の#FFF5D1と分類ごとの青・赤・緑) / ディザ表示と元画像を切り替えるトグルで、同じ写真の重さの差を確かめる

Entrées liées

Citer cette entrée

Le dictionnaire est fait pour être lié. Prenez la forme qui convient là où vous écrivez.

Link
https://indexstyle.org/fr/styles/low-tech-web
Markdown
[Low-Tech Web Design — IndexStyle](https://indexstyle.org/fr/styles/low-tech-web)
HTML
<a href="https://indexstyle.org/fr/styles/low-tech-web">Low-Tech Web Design — IndexStyle</a>

Revenir à sa position dans l’index