El món del disseny digital està en constant evolució i, per seguir sent competitiu, és essencial mantenir la coherència visual a totes les plataformes i dispositius. Aquí és on entren les fitxes de disseny. Aquestes petites unitats de disseny, encara que sovint es passen per alt, tenen un paper essencial per crear experiències d'usuari harmonioses i efectives.

Què és un token de disseny?

Les fitxes de disseny són valors estandarditzats que representen els elements bàsics d'un sistema de disseny.
Com a recordatori, a sistema de disseny és un repositori que reuneix tots els components d'un projecte digital. Aquests permeten dissenyar una lògica coherent en tota la producció i guiar tots els equips implicats en el disseny d'una interfície.
Les fitxes de disseny es poden utilitzar per definir colors, tipus de lletra, mides, marges, espais en blanc i altres elements de disseny. Aquestes són eines potents que poden ajudar a millorar consistència i qualité disseny, així com la col·laboració entre dissenyadors i desenvolupadors.
En lloc d'utilitzar un valor, fem servir el testimoni. Això us permetrà tenir només una pàgina amb totes les fitxes introduïdes i poder confiar en a font única.

Exemple d'un testimoni d'un color:

En aquest nivell, un disseny de testimoni s'assembla una mica als estils figma ou Dibuix (colors, tipus de lletra, ombres, etc.) però amb moltes més possibilitats i molta més flexibilitat. Un testimoni de disseny s'utilitza més sovint per als colors, la mida, els marges, l'opacitat, les vores, etc.

Per tant, en comptes de tenir:

tindríem:

El disseny del token ens ho permet canviar el valor sobre la marxa des de “{primària}” si cal, sense haver de tornar a les diferents línies.
A més, en cas de Sistema de disseny multimarca, això també permet tenir-ne només un una i única pàgina per editar per canviar l'estil.
L'ideal és tenir el mateix nom en els estils del nostre programari de disseny per a una major consistència i simplicitat quan handoff entre dissenyadors i desenvolupadors.
Tanmateix, l'ús de fitxes de disseny com a part integral d'un sistema de disseny és molt més que això. També permeten a major escalabilitat, millor comunicació entre equips i, per tant, millor presa de decisions.

Els dos tipus de fitxes de disseny

• Tokens primitius
  Els tokens primitius són valors bàsics sistema de disseny. Inclouen colors, tipus de lletra, mides de lletra, marges, espais en blanc i altres elements de disseny. Les primitives de testimoni s'emmagatzemen normalment en un format de dades estandarditzat, com ara JSON, CSS ou YAML. Això fa que els dissenyadors i desenvolupadors els puguin compartir i utilitzar fàcilment.
• Fitxes semàntiques
  Les fitxes semàntiques són combinacions de fitxes primitives que tenen un significat específic en el sistema de disseny. Per exemple, un testimoni semàntic podria ser un color específic utilitzat per a un botó d'ordres o un tipus de lletra específic utilitzat per al títol d'una pàgina. Els fitxes semàntics us permeten crear un disseny coherent i homogeni, i simplificar la col·laboració entre dissenyadors i desenvolupadors.

Les primitives i la semàntica són dos elements essencials d'un sistema de disseny. Ho permeten definir els elements bàsics dissenyar-los i organitzar-los perquè siguin fàcils de trobar i utilitzar. Mitjançant l'ús de fitxes, els dissenyadors i desenvolupadors poden crear interfícies coherents i d'alta qualitat de manera més ràpida i senzilla.

Els avantatges dels fitxes de disseny

• consistència
  Les fitxes de disseny responen, entre altres coses, a a problema empresarial : com garantir la identitat gràfica de la marca amb un mínim de fricció?
  En cas d'un canvi en els fonaments (un rebranding per exemple), els fitxes de disseny permeten desplegar ràpidament aquestes modificacions.
  Els estils s'unifiquen a tots els productes i plataformes.
• Reutilitzabilitat
  Les fitxes de disseny es poden reutilitzar en un o més productes, la qual cosa permetestalviar temps i recursos en desenvolupament. Els desenvolupadors recuperen les fitxes directament en lloc d'haver de crear nous estils cada vegada.
  Les fitxes de disseny eviten l'escriptura de valors en el codi.
• Mantenibilitat
  Les fitxes de disseny faciliten el manteniment del projecte perquè ho permeten actualització ràpida d'estil. Com? Els tokens són dades que contenen un nom i un valor que estan centralitzats.
  Simplement modificant el valor d'un testimoni, com ara el color d'un botó principal, això afectarà tots els botons de l'aplicació/lloc en una sola intervenció! Així, els desenvolupadors poden mantenir més fàcilment els estils de projecte fins i tot quan evolucionen les opcions de disseny.

Els límits de les fitxes de disseny

• Les eines no estan preparades
  Com que el format de fitxes de disseny no està definit, ningú encara s'ha posat d'acord sobre com utilitzar-los. Cada equip i empresa ho té el seu propi funcionament i el seu propi llenguatge. Actualment el W3C actualment està treballant en un format que resolgui aquest problema. Però de moment convé conformar-se amb les eines disponibles i les seves limitacions. Figma ha indicat que està treballant en aquest tema, però probablement aquesta funció no es publicarà abans de finals d'any.
• Una desacceleració del flux de treball
  Troba un nomenclatura entesa per tothom és una autèntica recerca del Sant Grial. A més, com qualsevol sistema, haurà d'evolucionar segons un bon nombre de paràmetres. A això s'afegeix el complexitat de la documentació i temps necessari per escriure-ho. Els equips especialitzats en Disseny System encara no estan molt estesos, i això és encara més cert per a les persones que es dediquen a redactar documentació.
  La mínima modificació d'una d'aquestes primitives pot generar nombroses actualitzacions que cal tenir en compte.
  Tenir una visió general del sistema és essencial a l'hora d'implementar fitxes de disseny.
  L 'la implementació és complexa i requereix un esforç de base important, però estic convençut que aquest enfocament està molt més que compensat pels beneficis exponencials que pot aportar.

Conclusió

Els fitxes de disseny són entitats amb un nom i una nomenclatura específics que emmagatzemen dades indivisibles (com l'espaiat o el color, per exemple). Tots són valors necessaris per a la construcció i manteniment del sistema. Utilitzem aquests valors en lloc de "codificar-los" al codi per garantir el màxim flexibilitat, homogeneïtat i escalabilitat a través dels diferents productes i experiència... També són agnòstics i haurien de funcionar en qualsevol plataforma.
Però sobretot representen una metodologia i no només “variables”. Permeten que qualsevol sistema de disseny creixi a totes les plataformes, dispositius i productes que pugui tenir una marca. La part variable és només una gota a l'oceà.

Emportar

• Les fitxes de disseny no només emmagatzemen informació, sinó també també transmetre informació.
• S'utilitzen per indicar el valors primitius, però el seu veritable potencial es revela quan s'utilitzen Documentació dels components de la IU.
• Són semblants a a metodologia i una manera de construir un sistema complex.

Recursos per anar més enllà

• Fitxes en sistemes de disseny: 10 consells per arquitecte i implementar decisions de disseny per a tothom: Llegeix aquí 
• Disseny de fitxes més enllà dels colors, la tipografia i l'espaiat: Llegeix aquí

 

 

 

Alexandre Caillé, UI & Design System Lead a UX-Republic