Aprenent el procés de Disseny a Codi
Encara que no siguis dissenyador i mai hagis fet servir software de disseny, pots igualment llançar productes que compleixin la seva funció i estiguin ben dissenyats. Els passos que et guiaré es poden dividir en tres parts: Planificació Disseny Codi No és ni de bon tros un procés d'UX complet, però et permetrà agafar…
Encara que no siguis dissenyador i mai hagis fet servir software de disseny, pots igualment llançar productes que compleixin la seva funció i estiguin ben dissenyats.
Els passos que et guiaré a continuació es poden dividir en tres parts:
- Planificació
- Disseny
- Codi
No és ni de bon tros un procés d’UX complet, però et permetrà agafar el teu propi disseny i fer-lo realitat.
1. Planifica’l
En la teva fase inicial de planificació necessites saber el teu objectiu, i què vols aconseguir amb el teu projecte.
Quan saps per a quin propòsit estàs construint la teva app o el teu producte, necessites saber qui l’utilitzarà.
Hauries de pensar en el teu públic de tres maneres diferents.
>Qui: Demografia, edat, gènere, professió, etc.
>On: En quin entorn faran servir el teu producte.
>Què: El tipus de dispositiu amb el qual utilitzaran el teu producte.
Agafa aquesta informació i deixa que influeixi en les teves decisions mentre dissenyes.
El següent pas és fer un diagrama de flux bàsic, és a dir, veure com l’usuari passa pel teu producte, pas a pas, en lloc de simplement programar-ho directament.
Quan fas un diagrama de flux evites cometre errors que et forcen a tornar enrere i fer grans canvis. Un exemple d’un diagrama de flux que he fet servir a Quipu es mostra a sota per donar-te una idea aproximada, però si vols aprofundir-hi — aquí tens un vídeo que explica el procés fent servir Sketch.
L’última part de la planificació és definir una definició funcional de cada pàgina del teu producte. És un document que serà la teva documentació o base de coneixement sobre què fa cada pantalla, què mostra, i quines rutes i accions es poden prendre des d’allà.
Així que si estàs construint una app, hauries de tenir una pàgina amb la següent informació per a cada interfície:
Nom de la vista (o el mòdul) –> El propòsit de la pàgina –> Informació completa –> Informació parcial –> Informació en llista –> Rutes/accions.
Si vas fer bé el teu diagrama de flux, la documentació dependrà en gran mesura d’aquest diagrama de flux.
2. Dissenya’l
La cosa més important com a dissenyador novell o treballant en un projecte que tu mateix has programat, és fer servir patrons establerts.
No hi ha cap raó per reinventar la roda una altra vegada.
Un lloc on pots trobar preguntes i respostes per a la majoria de problemes és ux.stackexchange.com. És similar a stackoverflow.com, però per a disseny, i sabem la importància que té això per a la majoria de dissenyadors, així que no tinguis por de buscar inspiració i ajuda de gent amb més experiència.
Després comença amb el teu wireframing. Tradueix el teu flux i definició funcional a una pantalla de baixa fidelitat que contingui tot excepte l’acabat de disseny. En altres paraules, centra’t en tenir totes les rutes, accions, botons i continguts correctes abans de fer-ho bonic.
Una de les coses més importants del procés de disseny és dissenyar-lo com el programaries. Recomano fer servir Sketch, però fes servir qualsevol software amb el qual estiguis còmode, com Illustrator o Photoshop.
Dissenyar com ho programaries simplement vol dir fer servir contenidors transparents sense emplenar per imitar contenidors i wrappers. També fes servir convencions de noms per a capes i grups tal com faries mentre programes els teus components.
- Si vols veure exemples fets amb Sketch, mira aquí.
L’última cosa que vull mencionar en termes de disseny és fer servir els principis de l’Atomic Design, que és una manera de dissenyar interfícies que amplia el que hem estat cobrint a la part de “Dissenyar-ho com ho programaries” més amunt.
Parla d’estructurar el teu disseny, i definir-lo en àtoms (colors, tipografies, formes) i formar molècules fent-los servir (botons, inputs, llistes etc..), per finalment fer organismes. Un organisme llavors es converteix en una plantilla. Per exemple, una barra de navegació que té un menú, una barra de cerca i un logo (unes quantes molècules).
3. Programa’l
Com a dissenyador no t’ensenyaré a programar, la majoria de vosaltres probablement sou programadors més talentosos que jo, així que només mencionaré el software que hauries de fer servir per ajudar-te a obtenir tots els estils CSS que necessitaràs.
Zeplin.io és un software que agafa dissenys de Sketch, exporta estils CSS i et dona totes les mides, marges, paddings, vores que necessites per traduir el teu disseny a codi sense perdre la qualitat i el nivell de detall en el qual has treballat tan dur.
Si has seguit l’atomic design, i has dissenyat com ho programaries, aquest procés és senzill, ràpid i amb un mínim d’errors.
Puc dir honestament que a Quipu, on faig el disseny, aquesta és l’eina que més temps m’ha estalviat de totes les que he trobat. Va reduir dràsticament tant el cost com el temps dedicat a traduir l’aparença de les nostres apps i website a tots els navegadors.
Llegeix també:
Per què hauries d’orientar el disseny UX/UI cap a zombis
Aquest article el va escriure el media manager a itnig, Sindre Hopland, basat en la presentació del lead designer a Quipu, Kamil Jura.