f.cat Manifest · Edició 1
Principis · 9 punts6 minuts de lecturaOctubre de 2026

Fer menys coses, i fer-les bé.

Faig webs i eines petites: horaris, cartelleres, catàlegs, un campus. Abans de publicar-ne cap, la repasso amb aquests nou principis. No són teoria: cada un ve amb exemples que pots tocar, fets amb peces reals de f.cat.

Francesc Pinyol SantsalvadorDissenyo i programo f.cat
i els projectes que hi pengen.

Principi primer

Útil

Primer, que serveixi.

Tot comença amb una pregunta que em faig jo mateix i que cap web no em respon bé. Si la resposta és a sis pàgines diferents, amagada darrere de menús o en un PDF, hi ha feina per fer. Si una eina no estalvia temps a algú, no surt.

A la pràctica

  1. Començo per la pregunta, no per la tecnologia.
  2. La resposta ha de ser a la primera pantalla, sense registres ni passos previs.
  3. Si jo no ho faria servir cada setmana, no ho publico.
Cada projecte de f.cat respon una pregunta concreta. Clica’n qualsevol.

Principi segon

Només el necessari

Treure fins que no sobri res.

La perfecció s’assoleix no quan ja no hi ha res a afegir, sinó quan ja no queda res a treure.Antoine de Saint-Exupéry, Terra d’homes (1939)

Mira la figura 2: la pantalla d’horaris.cat amb les sortides de Ferrocarrils a plaça de Catalunya, i al damunt tot el que moltes webs hi afegirien. Abans de veure el teu tren t’hauries de treure de sobre un bàner, una finestra, un xat i un anunci. Res d’això respon la pregunta.

Afegir és fàcil; treure costa, perquè cada peça té algú que la defensa. Però cada cosa que hi ha a la pantalla competeix amb la que de debò importa.

A la pràctica

  1. Cap finestra emergent, cap butlletí, cap «descarrega l’app».
  2. Estadístiques sense galetes, així no cal cap bàner.
  3. Cada botó i cada dependència han de justificar per què hi són.
  • Anunci
  • Bàner de l’app
  • Xat
  • Notificacions
  • Butlletí
  • Galetes
horaris.cat amb el que sobra a sobre. Prem el botó i torna-ho a posar.

Principi tercer

Minimalista

Un sistema que cap en una targeta.

Minimalista no vol dir buit: vol dir poques regles, aplicades sempre igual. Tot el sistema visual de f.cat és a la figura 3. Una sola tipografia en dos pesos, blanc, negre i un vermell que només surt quan cal mirar alguna cosa.

Com menys peces, més fàcil és que tot encaixi, i més fàcil és per a qui ho mira entendre què és important.

A la pràctica

  1. Un sol color d’accent, i gastat amb compte.
  2. L’espai buit separa les coses; no calen caixes ni línies de més.
  3. Si un estil nou no es pot reutilitzar, segurament sobra.
Tipografia
AaInter 800 · títolsAaInter 300 · text
Color
Negre#000000
Blanc#FFFFFF
Vermell#FF4444
Recompte
1tipografia2pesos1accent2temes
L’espècimen complet de f.cat. Aquesta pàgina fa servir una línia pròpia a posta.

Principi quart

Net

Ordenat per dins i per fora.

El que es veu net per fora ho està perquè per dins també ho està. La figura 4 és codi real de f.cat, tal com és: el botó «Restaura» del menú de configuració.

Un codi endreçat és el que permet canviar coses d’aquí a un any sense por de trencar-ne cap altra.

A la pràctica

  1. Noms que diuen què fan, en català si cal.
  2. Comentaris que expliquen el perquè, no el què.
  3. Una sola manera de fer cada cosa.
shared/config.jsJavaScript
/* Torna-ho tot a com estava de fàbrica. Passa per «desa» i «aplica», que són1   els mateixos camins que quan es clica cada opció: així no hi ha cap estat   que només es pugui assolir des d'aquí. */var restauraTot = function () {  for (var nom in PREFS) {    if (!Object.prototype.hasOwnProperty.call(PREFS, nom)) continue;    desa(nom, PREFS[nom].defecte);2    aplica(nom, PREFS[nom].defecte);3  }  sincronitza();};
  1. 1El comentari diu per què es fa així, no què fa cada línia.
  2. 2Noms curts i en català: desa, aplica. Es llegeix com una frase.
  3. 3Restaurar fa el mateix camí que clicar: un sol camí, cap sorpresa.
Fragment de shared/config.js, sense retocar.

Principi cinquè

Curt

Noms que es diuen d’una tirada.

El nom és el primer tros de la interfície. S’ha de poder dir en veu alta, escriure sense dubtar i recordar l’endemà. Per això els dominis formen part del producte, començant per aquest mateix: f.cat.

Quan es pot, el domini acaba la paraula: cotx.es es llegeix «cotxes» i rellotg.es, «rellotges». El nom i l’adreça són la mateixa cosa, i no cal explicar res.

A la pràctica

  1. Si l’has de lletrejar per telèfon, és massa llarg.
  2. Sense guions, sense números que es puguin confondre.
  3. El mateix criteri per als textos: frases curtes, una idea cada una.
f.cat
www.horaris-de-transport-de-catalunya.com

↑ un domini llarg inventat, per comparar

cotx.eses llegeix «cotxes»
cinem.es«cinemes»
càmer.es«càmeres»
rellotg.es«rellotges»
Dominis reals de f.cat: l’extensió acaba la paraula.

Principi sisè

Accessible

Per a tothom, des del primer dia.

Una web que només funciona amb ratolí, bona vista i una pantalla gran deixa gent fora sense adonar-se’n. L’accessibilitat no és una capa que s’afegeix al final: es decideix quan es tria un color, quan es posa nom a un botó, quan s’anima una cosa.

A la pràctica

  1. Text principal amb contrast AAA, en tema clar i en tema fosc.
  2. Tot es pot fer amb el teclat, amb un focus que es veu.
  3. Si el sistema demana menys moviment, tot es queda quiet.

Contrast

Text gris sobre blanc 2:1 · no
El text de f.cat 18,7:1 · AAA

El mínim recomanat és 4,5:1. Llegir no hauria de costar esforç.

Lector de pantalla

<button aria-label="Configuració"> «Configuració, botó»

Un botó amb només una icona té igualment un nom que es pot dir en veu alta.

Teclat

Tab passa al següent · Esc tanca

El focus sempre es veu, i cap menú no et deixa atrapat.

Tres decisions petites que fan que f.cat es pugui fer servir de més maneres.

Principi setè

Responsiu

Qualsevol pantalla.

Moltes visites arriben des d’un mòbil, i sovint amb una sola mà. Per això tot es dissenya des del telèfon i després s’eixampla. No és una versió reduïda: és la mateixa web, que es reorganitza.

A la pràctica

  1. Mai desplaçament horitzontal, de 320 píxels en amunt.
  2. Zones tàctils grans i lluny de les vores.
  3. Cada imatge es serveix a quatre mides, i el navegador tria.
375 px
Carregant la portada…
És el principi de la portada de f.cat de debò, no una captura. Arrossega i mira com es reorganitza.

Principi vuitè

Ràpid

Abans que te n’adonis.

La velocitat també és disseny. Una pàgina que triga és una pàgina que no s’arriba a llegir, sobretot amb mala cobertura. Les xifres de la figura 8 no són promeses: les ha mesurat el teu navegador ara mateix, mentre carregava aquesta pàgina.

A la pràctica

  1. HTML estàtic: la pàgina ja és feta quan la demanes.
  2. Imatges en WebP, a quatre mides perquè el navegador triï la justa.
  3. Cap framework si no cal; les fonts, servides des de casa.
—mil·lisegons ha trigat aquesta pàgina a carregar-se al teu dispositiu
Aquesta pàgina— kB
Una pàgina web mitjana, en mòbil≈ 2.000 kB
—peticions
—fonts
0frameworks

Mitjana: HTTP Archive, Web Almanac 2024. Les dades d’aquesta pàgina compten tot el que s’ha descarregat fins al final de la càrrega.

Mesura en directe amb la Navigation Timing API.

Principi novè

Configurable

A la teva manera.

Cadascú llegeix diferent: amb poca llum, amb ulleres, amb el mòbil a tota brillantor o amb mal de cap. Per això tot f.cat es pot ajustar des de la roda de configuració de la portada.

Prova-ho aquí mateix. El canvi s’aplica a l’instant a tota aquesta pàgina, es guarda en aquest navegador i et segueix per la resta de f.cat.

A la pràctica

  1. Per defecte, el que digui el sistema (tema, moviment).
  2. Cap preferència no demana registrar-se.
  3. Un botó per tornar-ho tot a com era.
Tema
Lletra
Mida
Moviment
Vista prèvia

El text s’adapta a tu, i no al revés.

Es guarda només en aquest navegador.
Els mateixos controls que el menú de la portada.

Si un projecte no compleix els nou, encara no està acabat.

Francesc PinyolOctubre de 2026

Veure els projectes →hola@f.cat