«Vull una cosa moderna» és probablement la frase que més vegades he sentit en una primera reunió. El problema és que modern significa coses diferents per a cada persona: per a uns és un degradat de colors, per a altres una animació en fer scroll, per a altres simplement que no s’assembli a la web que tenen ara.

Val la pena separar dues coses que sovint es confonen. Una és la moda: recursos que avui són a tot arreu i d’aquí a tres anys daten un projecte amb una precisió incòmoda. L’altra és el disseny web modern de debò, que té a veure amb com està construïda la pàgina i aguanta bastant millor el pas del temps.

Aquest article va del segon.

Els cinc trets d’un disseny web modern

1. Una retícula que es nota encara que no es vegi

El primer que separa un disseny treballat d’una plantilla emplenada és la retícula. No pas els colors: la retícula.

Un disseny modern fa servir una estructura clara de columnes i un sistema d’espaiat coherent, de manera que els marges, els salts entre blocs i les alineacions responen a una lògica i no a allò que quedava bé en aquella pantalla concreta. El resultat és una pàgina que es llegeix amb calma encara que el visitant no sàpiga explicar per què.

Quan aquesta estructura no existeix, es nota de seguida: els blocs semblen enganxats l’un sota l’altre, els espais canvien sense motiu i el conjunt transmet improvisació.

2. Tipografia amb jerarquia real

La tipografia fa la major part de la feina en un disseny contemporani. I no es tracta de triar una lletra bonica, sinó de construir una escala.

  • Pocs cossos, amb salts clars entre ells.
  • Contrast de pes entre titular i text, no només de mida.
  • Una amplada de línia que permeti llegir sense cansar-se: entre 60 i 75 caràcters funciona bé en escriptori.
  • Interlineat generós al cos de text.

Una web amb dues famílies tipogràfiques ben utilitzades es veu més actual que una amb sis i diverses mides arbitràries.

3. Espai en blanc tractat com a material

L’espai buit no és espai desaprofitat: és el que dona aire al contingut i dirigeix la mirada. En els projectes que envelleixen millor, l’espai es decideix igual que es decideix un color.

Aquí apareix una tensió habitual. La temptació és omplir la primera pantalla amb tot el que és important per por que ningú baixi. A la pràctica, una primera pantalla que diu una sola cosa amb claredat funciona millor que una que intenta dir-ne cinc.

4. Moviment amb intenció

L’animació és el tret que es degrada més ràpid quan es fa servir per decoració. Un disseny modern l’empra per explicar alguna cosa: on soc, què acaba de canviar, quina relació té aquest element amb l’anterior.

Tres regles que apliquo en qualsevol projecte amb animació i 3D:

  • Si en treure l’animació la pàgina s’entén igual, probablement sobra.
  • Durades curtes. Per damunt de mig segon el moviment es percep com a lentitud.
  • Respectar prefers-reduced-motion. Hi ha persones per a qui el moviment és un problema real, no una preferència estètica.

5. Velocitat, que també és disseny

Una web que triga quatre segons a pintar el titular no és moderna, per molta cura que s’hagi posat en la retícula. El rendiment forma part de la percepció de qualitat, i avui és a més un factor de posicionament.

Els tres punts que tenen més pes a la pràctica són la mida de les imatges, la quantitat de tipografies carregades i el nombre d’scripts de tercers. Sobre això vaig escriure amb més detall a optimització de velocitat web.

El que envelleix malament

Per contrast, aquests recursos solen datar un projecte en poc temps:

  • Carrusels automàtics a la portada, que a més gairebé ningú mira més enllà del primer plafó.
  • Efectes de paral·laxi aplicats a tot el document.
  • Ombres i bisells pronunciats en botons i targetes.
  • Vídeos de fons pesants que competeixen amb el text que tenen a sobre.
  • Fotografia de banc genèrica, que fa que dues empreses del mateix sector semblin la mateixa empresa.

Cap no és un error en si mateix. El que els converteix en problema és fer-los servir com a substitut d’una idea.

Com saber si la teva web necessita actualitzar-se

Una comprovació ràpida, sense eines:

  1. Obre la portada al mòbil i compta quants gestos necessites per entendre a què es dedica l’empresa.
  2. Llegeix el titular en veu alta. Si podria ser a la web de qualsevol competidor, el problema no és visual.
  3. Mira la pàgina en una pantalla gran. Si el contingut s’estira fins a ocupar tota l’amplada sense control, falta retícula.
  4. Cronometra quant triga a aparèixer el primer text llegible.

Si en fer aquest repàs apareixen dos senyals o més, la feina probablement no sigui un rentat de cara sinó un redisseny amb l’estructura revisada.

Un apunt final

Els projectes que aguanten millor no són els que van incorporar més recursos del moment, sinó els que tenien una idea clara de què volien dir i van fer servir el disseny per dir-ho. Es pot comprovar en qualsevol recopilació de webs premiades de fa cinc anys: les que continuen funcionant són les que van apostar per una estructura sòlida i una veu pròpia.

Si estàs valorant renovar la web de la teva empresa i vols una lectura honesta de per on començar, al diagnòstic revisem junts l’estructura, el missatge i les decisions tècniques abans de parlar de disseny.