Què és un Sistema de Disseny i per a què serveix

Què és un Sistema de Disseny?

Un Sistema de Disseny és un conjunt d’elements dissenyats i desenvolupats de manera modular i reutilitzables a múltiples pantalles. Per exemple, els botons del nostre producte o servei, que haurien de tenir una uniformitat que es mantindrà al llarg de totes les pantalles (mateixa mida, mateix color, mateixa interacció, etc). Té el seu origen a l’Atomic Design de Brad Frost.

Els elements que formen part del Sistema de Disseny es creen, guarden i documenten per separat del prototip del nostre producte o servei. La manera de fer això és molt variada i depèn dels objectius del projecte i de les necessitats de l’equip.

El més habitual és realitzar els components en un programa de prototipat (com Figma), amb una documentació, i un codi dels components, preparat per reutilitzar.

A Itequia realitzem la part del disseny amb Figma, igual que el prototipat del producte digital, de manera que aquests mateixos components seran els que s’utilitzin en el prototipat amb el mateix programa, agilitzant el procés.

Quins beneficis té fer un Sistema de Disseny?

  • Aportarà uniformitat a un projecte, ja que tots els elements recurrents seran iguals. Això és bo tant per als usuaris o clients, que gaudiran d´una bona experiència d´usuari, com per a les persones involucrades en el projecte, que estaran sincronitzades i informades.
  • A la llarga, estalviarà temps de disseny i desenvolupament, perquè no caldrà dissenyar cada botó des de zero cada cop que hi hagi una pantalla on hi hagi botons.

Un punt important a tenir en compte és que els Sistemes de Disseny requereixen una inversió de temps a l’inici, que es veurà recuperada a mesura que el producte avanci i maduri.

Posarem un exemple: una app mòbil, que llança una versió mínima (amb poques funcions) i que conforme van passant els mesos, afegeix noves funcions. Amb cada actualització, es necessitaran noves pantalles amb elements com ara botons, formularis, etc. Doncs en cas de tenir un Sistema de Disseny, no s’haurà de dissenyar o desenvolupar cada botó des de zero, sinó que es reutilitzaran a les pantalles que els necessitin.

Així, la inversió inicial de crear el Sistema de Disseny es veurà recuperada amb escreix amb el temps que s’estalviarà en fases posteriors del projecte, on els elements ja estaran dissenyats.

A més, un Sistema de Disseny és un document viu, al qual es poden afegir nous elements o actualitzar els existents a mesura que el projecte va creixent. Per tant, també necessitaran un manteniment, però és un temps mínim comparat amb la tasca d’haver de crear cada element des de zero cada vegada que es necessiti.

Quins components hauria de tenir el meu Sistema de Disseny?

Depèn de les necessitats del teu projecte. Alguns components molt comuns són els botons, formularis, navegació, cards, taules, icones, etc.

Abans d’abordar la creació (o modificació) d’un Sistema de Disseny, cal fer una llista de tot allò que creguem que podrem necessitar. Hauria de ser una llista força completa, encara que no passa res si s’oblida alguna cosa; el document pot (i ha de) ser revisat segons vagi madurant el producte.

En aquest prototip podeu veure un petit exemple d’alguns components bàsics, així com la seva interacció. Recomanem posar-ho a pantalla completa per a una millor visualització.

Sistemes de Disseny existents

No sempre cal crear un Sistema de Disseny des de zero. Depenent de les necessitats del projecte, és possible utilitzar Sistemes de Disseny ja creats, amb àmplia documentació i codi preparat per fer-se servir. És possible també utilitzar un Sistema de Disseny existent com a base i fer-hi modificacions (per exemple, canviar la tipografia, colors, mides, etc) per aconseguir un aspecte visual més únic, sense haver de fer-ho tot des de zero.

Bootstrap 

Bootstrap és la biblioteca de codi front end (és a dir, codi ja escrit perquè qualsevol persona el pugui utilitzar en els seus projectes) més utilitzada. A la seva pàgina, teniu exemples de tots els seus elements, perquè es puguin veure totes les opcions i interaccions possibles, i on es pot aconseguir el codi de cadascun.

Sistema-de-diseño-Bootstrap-Ejemplos-Itequia-Design

 

Els punts forts de Bootstrap són la quantitat d’elements i variacions que té, i la seva llarga trajectòria com a biblioteca (llançada el 2011), el que fa que molts desenvolupadors la coneguin. Això és un punt important a considerar a l’hora d’escollir una biblioteca ja creada, ja que una biblioteca amb poc recorregut, documentació o persones que la coneguin podrà incrementar els temps.

Hi ha també UI Kits de Bootstrap per utilitzar a Figma, que porten exactament els mateixos components, però preparats per utilitzar en aquest programa.

Sistema-de-diseño-Bootstrap-Itequia-Design

 

Per a quins projectes és adequat un Sistema de Disseny?

És adequat crear-ne un quan s’està treballant en una pàgina o producte digital que existirà a mitjà-llarg termini, sobretot si es preveu que haurà de créixer o madurar.

És adequat també en projectes en què estan involucrades persones de múltiples departaments, ja que és un punt en comú per a persones de diferents especialitats, on cadascuna obté la informació que és rellevant per a la seva feina.

No és adequat per a projectes curts on els elements es dissenyen i usen una sola vegada, o on l’estil canvia completament cada vegada que s’actualitza. Per exemple, una landing publicitària que es faci servir una única vegada per a una acció concreta que utilitzi elements de marca diferents dels habituals no seria adient crear un Sistema de Disseny.

Siguin quines siguin les necessitats del teu projecte, pots contactar amb nosaltres i t’ajudarem en el disseny del teu producte o servei.

Registra't a la nostra newsletter​

    En què et podem ajudar?