Et comptem per què no dissenyaríem mai un producte sense un sistema de disseny

Els sistemes de disseny permeten organitzar i establir les bases que donaran coherència al producte. A més, són el mitjà a través del qual aconseguim un llenguatge únic perquè tots els membres de l'equip treballin de forma col·laborativa i es fomentin les bones pràctiques.

Com a agència de disseny de producte digital, és habitual que ens trobem amb projectes que no compten amb sistema de disseny. De fet, el més usual és que les empreses ens contactin després d'haver invertit infinitat d'hores a intentar evolucionar el seu producte sense obtenir els resultats esperats, en un procés complex, tediós i frustrant.

Aquest escenari ens ha motivat a escriure aquest article en què us contarem les bondats i beneficis d'un bon sistema de disseny, basant-nos en experiències reals, i us explicarem com afrontem aquestes situacions des de l'agència.

En el desenvolupament d' un producte digital es veuen involucrats molts perfils diferents: departament de producte i màrqueting, dissenyadors, desenvolupadors, etc.

Per a una òptima coordinació i planificació, és imprescindible comptar amb eines que permetin abordar les tasques diàries d' una forma organitzada i estructurada.

Doncs bé, el sistema de disseny és com els fonaments d' una casa, és allò que senti les bases per construir una visió comuna i estratègica, establint normes i recopilant llibreries de recursos reutilitzables, fent possible l' escalabilitat i el creixement eficient d' aquest mateix. Interessant, ¿veritat?

Primera fase: una bona immersió per aagafar els reptes i compartir aquest fascinant journey

Per al desenvolupament d'aquest tipus de projectes, on vas interactuar amb diferents capes i departaments d'una empresa, és vital integrar-se al màxim amb tota l'estructura del projecte. A Lúcid considerem fonamental establir i acordar una metodologia de treball col·laborativa amb el client, en la qual totes les parts participin de manera activa de tot el procés de disseny.

La primera fase és la d'immersió, on ens coneixem una mica més amb els clients, ens fan partícips dels seus reptes com a empresa, els seus insights i ens donen context sobre el projecte. En aquestes sessions compartim tot el nostre coneixement amb ells i elles: els traslladem i expliquem el valor diferencial d'un bon disseny de producte i els detallem totes i cadascuna de les diferents fases d'aquest journey que vam transitar com a equip.

Els compartim les nostres eines de treball, com Notion i Figma (sense les quals no podríem viure 😉 ), que ens permeten treballar de forma col·laborativa, aconseguint la implicació de totes les parts que formen el projecte. Això ens permet portar la comunicació al següent nivell, coordinant i millorant la productivitat de l'equip.

Així mateix, en aquestes sessions conjuntes avaluem la documentació de la qual partim: anàlisi funcional, sistema de disseny, valors de marca, objectius principals, casos d' usos, etc., per després baixar els requeriments, identificar els objectius, definir escenaris i user persones.

Quan els equips ja estan alineats per començar a treballar, és moment de mesurar esforços i capacitat. Comencem!

Elements bàsics del llenguatge visual, les bases d' una gran estructura escalable

Un cop entenem els reptes, tenim tota la documentació recopilada i les eines de treball definides, toca estructurar tots els elements que formen la base del sistema visual del producte: famílies tipogràfiques; jerarquies; colors corporatius primaris, secundaris i terciaris; colors neutres; iconografia, etc.

Definició d' un sistema de disseny atòmic: la llibreria de recursos UI sense la qual no podrem viure

Quan ja tenim definits els elements bàsics, arriba el moment de crear components a través d' un sistema de disseny atòmic. Aquest sistema, que estableix la creació de components de més senzills a més complexos, s' organitza en cinc nivells: àtoms, molècules, organismes, templers i pàgines.

L'objectiu d'aquest step és aconseguir una llibreria UI, és a dir, un catàleg de components que podrem utilitzar de manera repetitiva en la interfície. Aquests components han de tenir estats de comportament i complir estàndards, i cadascun d' ells ha d' anar acompanyat d' una explicació en la qual s' indica quan i com s' ha de fer servir.

Els espais: un element de vital importància per a una experiència consistent i organitzada

Una escala d' espais ben organitzada aporta més consistència visual en la interfície i ens proporciona agilitat en els processos de creació de components: paddings, margins, posicions i distància entre elements.

Grid, layout i breakpoints: definim el comportament del producte per al sinfí de resolucions de pantalla del mercat

La creació d'un sistema de retícules (grid) que s'adapten a l'ample de pantalla estableix l'esquelet o l'estructura bàsica de la interfície. Això ens permet controlar i alinear tots els continguts per generar un sistema més consistent i una millor experiència.

El comportament del layout es defineix a través de breakpoints, que són les mesures estàndards que defineixen l' ample de pantalla i l' adaptació òptima del disseny de contingut.

Així és com treballem els sistemes de disseny a Lúcid. Per a nosaltres són una eina imprescindible per generar patrons d'èxit, assegurar màxima qualitat en el teu producte, millorar la imatge de la teva marca, evitar errors i crear una experiència d'usuari única i memorable.

I és que un sistema de disseny no aplica únicament a la creació i implementació, a futur també ajuda a la planificació i organització de canvis i l'escalabilitat i evolució del teu producte en el mercat.

Tens un producte digital i t'identifiques amb algun dels punts que hem tractat en aquest post?

El teu equip necessita assessorament i unificar un pensament estratègic per al desenvolupament d'un producte digital?

Posa't en contacte amb nosaltres i buscarem la solució més adequada a les necessitats del teu equip.

Subscríeu-vos a la newsletter per conèixer el nostre enfocament sobre les tendències del moment
¡Fet! Ja estàs a la llista
Oops! Something went wrong while submitting the form.