Le pourquoi de Feitio

Avant toute couleur ou composant, une idée : des interfaces qui montrent le soin de celui qui les a créées et la volonté d'avancer.

D'où il vient

Feitio est un vieux mot portugais pour la façon dont quelque chose est fait, à la main. Un blazer sur mesure a du feitio ; un meuble a du feitio. Il s'agit de la main qui l'a fait, pas seulement du résultat.

Le système a été décidé de zéro, choix par choix, en regardant : seize brouillons, chacun répondant à une question, conservés du premier au dernier. Le chemin lui-même est devenu partie intégrante du système.

L'idée : un atelier vivant

Feitio se situe entre deux images : la banc de celui qui fait des choses à la main, avec soin et les traces du travail, et un atelier rempli de personnes et de mouvement, pressé de faire advenir des choses. Humain, jamais technique. Chaleureux, jamais solennel.

En lui naissent trois valeurs, qui disent quoi faire, et trois "nevers", qui disent où ne pas aller. Chaque règle du système provient d'une d'elles ; lorsqu'une règle ne couvre pas un cas, ils décident.

Trois valeurs

Raffinement

Le soin apporté aux détails que personne ne demande. Quelques éléments, chacun parfaitement fini. Si cela n'aide pas, il disparaît.

Pourquoi : un écran avec moins de choses, toutes bien placées, est moins fatigant et plus rapide à comprendre. Le raffinement ne réside pas dans ce que vous ajoutez, mais dans ce que vous enlevez.

Où cela se manifeste : une seule famille typographique (Alegreya) ; une échelle de sept espaces ; peu de rôles de couleurs ; un trait d'encre de 1px ; aucune ombre floue.

Processus

Les traces du travail restent visibles lorsqu'elles aident à la compréhension : ce qui a changé, pourquoi, et ce qui vient ensuite.

Pourquoi : une interface qui cache comment elle est arrivée demande une confiance aveugle. Montrer le processus, avec mesure, traite les gens comme capables de comprendre.

Où cela se manifeste : les coins légèrement irréguliers, comme du papier coupé à la main ; les icônes dessinées, où chaque jointure est formée par deux traits croisés ; l'historique des brouillons, conservé.

Énergie

L'orange est le mouvement. Il indique où quelque chose se produit : l'action principale, ce qui vient de changer, ce qui nécessite une attention.

Pourquoi : l'énergie n'est pas du bruit. Une couleur forte ne l'est que lorsqu'elle est rare ; garder l'orange pour l'action fait en sorte que l'écran indique le chemin tout seul.

Où cela se manifeste : un bouton orange par écran ; du papier qui arrive comme un découpage posé sur la table ; aucun changement d'état qui survient de manière brutale.

Trois "nevers"

Les valeurs indiquent où aller ; les « jamais » marquent le bord du chemin. Chacun est une tentation commune qui pourrait éloigner Feitio de l'idée.

Vibes tech

Pas de néon, d'écrans sombres lumineux, de grilles terminales ou de polices mono décoratives. Le sentiment est celui d'un atelier, pas d'une salle de serveurs : le look « tech » dit « c'est compliqué » avant même un mot.

Convolué

Une colonne, une idée par bloc, peu de types de composant. Si quelque chose a besoin d'explication pour être utilisé, c'est faux : chaque élément supplémentaire est une décision de plus pour quiconque regarde.

Bruit

L'orange apparaît rarement, donc elle compte. Le mouvement ne répond qu'à une action, et au plus un moment par page arrive spontanément. Quand tout crie, rien n'est entendu.

Humaniste

Humaniste signifie fait pour les personnes et avec une marque humaine : typographie née de la calligraphie, papier chaleureux et couleurs d'encre, dessin avec une main légèrement tremblante, texte écrit pour la personne.

Dans Feitio, cela devient des choix que vous pouvez voir : un orange vif ; des coins légèrement irréguliers ; des icônes dessinées à la main ; l'ombre dure du papier collé.

Mobile first

Aujourd'hui, la plupart des gens accèdent à Internet via un smartphone. Ainsi, chaque écran Feitio naît sur mobile (téléphone et tablette) et grandit vers l'ordinateur, jamais l'inverse.

• Le mobile est conçu en premier. L'écran large gagne des colonnes et une navigation latérale ; le switch suit la largeur de la boîte dans laquelle le composant se trouve, pas celle de la fenêtre.
• L'objectif principal vient en premier, sans défilement.
• Cibles de 40px, avec des espaces entre elles : un doigt n'est pas un curseur.
• Rien ne dépend du survol.
• Jusqu'en 4K : le contenu a une mesure et reste centré, et la rétroaction d'une action apparaît là où elle s'est produite.
• L'écran appartient au contenu : ce qui n'est pas utilisé tout le temps reste rangé dans un coin.

Juste assez de JavaScript

Feitio utilise JavaScript là où il rend l'écran meilleur : le menu déroulant, l'ouverture animée, une réponse sans rechargement. Il n'a pas besoin de fonctionner sans lui. Ce qui reste dehors est l'excès : une grande bibliothèque pour un petit effet, un script sur chaque page par habitude, tout l'écran construit dans le navigateur alors que le serveur le livrerait prêt. Avant d'écrire un script, vérifiez si le navigateur ne le fait déjà.

Lorsque la règle est silencieuse

Aucune documentation ne couvre tout. Lorsqu'un cas n'est pas écrit, ces phrases tranchent :

Lorsqu'on doute, enlevez-le.

Si vous ne pouvez pas dire ce que fait un élément pour la personne, on le retire.

Le mot bat l'icône.

L'image aide à la reconnaissance ; le texte explique.

La clarté bat la personnalité.

Le style de Feitio ne coûtera jamais de compréhension.

Ne procédons que si cela aide.

Montrer le chemin est pour la compréhension, non pour la décoration.

Le pouce décide.

Si ce n'est pas faisable d'une main, ce n'est pas encore prêt.

L'accessibilité n'est pas optionnelle.

Si une belle idée laisse quelqu'un de côté, elle change.

Le domicile et les façades

Feitio a un domicile : le thème crème et orange, de jour comme de nuit. Pour le travail à l'extérieur, comme une page de boutique, il emprunte sa structure avec une autre façade : seuls les couleurs changent. L'orthographe, la forme, l'espace et le mouvement restent ceux de Feitio. Quand un projet demande plus que d'autres couleurs, il est fait en dehors du système.