Aquest programari d’Adobe ens permet als dissenyadors crear un enllaç per a clients i desenvolupadors, on es visualitza el disseny i la interactivitat directament des del navegador, sense necessitat d’instal·lar ni descarregar res. Aquest enllaç s’actualitza cada vegada que es produeixen canvis, i l’usuari només ha de recarregar la pàgina per veure’ls. El contingut que es mostra en aquest enllaç correspon a la taula de treball del dissenyador dins del programari (de fet, cada pantalla correspon a una taula de treball i totes aquestes taules estan contingudes en un únic fitxer amb extensió .xd)

Aquest enllaç es pot generar de dues maneres diferents: Compartir per revisió o compartir per desenvolupament.

Per què necessitem dos enllaços diferents per visualitzar el mateix disseny?

L’enllaç per a revisió, com indica el nom, ens és útil perquè el client revisi i validi la proposta de disseny. Només veurà el disseny o prototip interactiu (sense imatges descarregables ni dades innecessàries). Per tant, pot visualitzar la proposta des del navegador d’escriptori o mòbil de manera ràpida i fluida. També permet comentaris per pantalla que poden enviar-se com a convidat o creant un ID d’Adobe (fet que recomanem, ja que ens enviarà una notificació per correu quan hi hagi nous comentaris i el control del feedback serà molt més àgil i concret).

L’enllaç per a desenvolupadors té el mateix aspecte que l’enllaç per a revisió, però afegeix la funcionalitat “Veure especificacions” (una mena d’inspector). Aquí és on comença la part interessant per al desenvolupador. Des d’aquí, podrà veure, copiar o descarregar els recursos necessaris a nivell d’estils (colors, tipografies, mides, formes, imatges, etc.) per transformar de manera fidel el prototip de disseny en una pàgina web o aplicació navegable.

Especificacions generals d’una pantalla d’Adobe XD

• Detalls de pantalla
  Mida en píxels de la finestra i del disseny.
• Actius
  Resum de tots els recursos descarregables: imatges bitmap o vectorials (JPG, PNG, SVG, fins i tot PDF).
  Quan descarreguem un JPG o PNG, trobarem dues carpetes segons la resolució (1x, 2x), útil per a pantalles retina.
• Colors
  Resum dels colors utilitzats a la pantalla; en fer clic al quadre de color, el seu valor hexadecimal es copia automàticament al porta-retalls (es pot canviar entre Hex, RGBA i HSLA).
• Estils de caràcter
  Resum de tots els estils de text utilitzats, amb nom de la tipografia, pes, mida i color (es pot canviar entre px, pt i dp).
• Quadrícula de disseny
  Serveix per activar o desactivar la graella utilitzada. Es mostra superposada sobre el disseny i es pot ajustar-ne l’opacitat per a més comoditat.
  S’especifiquen les propietats de la graella si el dissenyador les ha activat prèviament (columnes, amplada del medianil, amplada de columna, marges i opacitat).

Especificacions concretes d’un element a Adobe XD

En fer clic sobre un element, apareixeran les seves propietats a la columna de la dreta, que canvien segons el tipus d’element seleccionat (caixes de text, imatges, formes vectorials).

Aquesta és la manera com comprovem que amb un sol enllaç podem traspassar tot el projecte al desenvolupador, evitant enviar-li un paquet ple de carpetes amb imatges i icones difícils d’ubicar. Si el desenvolupador necessita un icona, simplement farà clic sobre ell a la pantalla i el descarregarà. Potser no és tan útil en un projecte nou, però sí en un amb petits canvis. Tot i això, això no eximeix els dissenyadors de preparar un paquet d’imatges JPG o PNG. Tot i que XD permet especificar si dissenyem en x1 o x2, o exportar recursos des del programa, l’optimització d’imatges per a descàrrega no és gaire eficient pel que fa al pes. Per tant, és recomanable preparar les imatges més grans (generalment les fullscreen) a Photoshop o amb una eina de compressió amb pèrdua mínima de qualitat. (A Adobe XD Feedback ja han proposat aquesta millora.)

Caixes de text

En seleccionar una caixa de text, es mostren les següents especificacions:

• Text
  S’indica l’amplada i l’alçada de la caixa, la posició X i Y a la pantalla i els graus de rotació.
• Estils
  Dins d’una mateixa caixa podem tenir més d’un estil; aquí es detallen tots (normalment no més de 3 o 4). Si fem clic a una selecció més profunda, es mostra només l’estil seleccionat dins la caixa.
  Les seves propietats són: nom de la tipografia, mida (en px, pt o pd), alineació, espaiat entre caràcters, espaiat entre línies i espaiat de paràgraf.
• Aparença
  Color i opacitat del text en Hex, RGBA o HSLA, amb còpia automàtica al porta-retalls en fer clic.
• Contingut
  Mostra el text complet de la caixa, sense format, amb còpia automàtica al porta-retalls en fer clic.
• CSS
  D’una banda es mostren les “Layout Properties” (margin top, margin left, etc.) i de l’altra les “UI Properties” (font, letter-spacing, text-decoration, etc.)
  També es poden copiar automàticament.

Imatges

• Traçat o imatge
  S’indica l’amplada i l’alçada, la posició X i Y a la pantalla i els graus de rotació.
• Aparença
  Opacitat (a l’espera que s’afegeixin altres propietats de fusió d’imatges com Multiplicar, etc.).
• Actiu
  Nom del fitxer descarregable i opcions disponibles: JPG, PNG, SVG o PDF.
• CSS
  Es mostren les “Layout Properties” (margin top, margin left, etc.) i les “UI Properties” (border-radius, opacity, etc.).

Formes

• Traçat
  S’indica l’amplada i l’alçada, la posició X i Y a la pantalla i els graus de rotació.
• Aparença
  Opacitat, color i mida del traç, tipus d’extrem (p. ex. arrodonit) i tipus d’unió (p. ex. arrodonida).
• Actiu
  Nom del fitxer descarregable i opcions disponibles: JPG, PNG, SVG o PDF.
• CSS
  Es mostren les “Layout Properties” (margin top, margin left, etc.) i les “UI Properties” (border-radius, opacity, etc.).
  Si la forma no és massa complexa, en lloc de descarregar l’asset, es pot dibuixar amb codi gràcies a la seva traducció CSS:

1background: transparent linear-gradient(46deg, #FFAF00 0%, #D98B1A 84%, #EBBE24 100%) 0% 0% no-repeat padding-box;2box-shadow: 0px 0px 6px #1D0628;3opacity: 1;

Si és un vector complex o agrupat, apareix l’asset enllaçat.

1background: transparent url('img/ic_tic.png') 0% 0% no-repeat padding-box;

De moment, el que més troben a faltar els nostres desenvolupadors és algun tipus de regla o eina rectangular per mesurar píxels concrets. Adobe XD mostra la distància entre elements i la seva mida quan passem per sobre, però a vegades no és suficient i, per qualsevol motiu, necessiten mesurar alguna cosa exacta. Per sort, Adobe ja té en compte aquesta petició.

Per part dels dissenyadors, estalviem molt de temps en marcar espais, detallar petits elements i crear guies d’estil per a cada paràgraf.

Adobe XD davant dels seus competidors

S’ha escrit molt sobre la batalla XD vs Sketch (serà èpica) i altres eines de wireframing o validació de prototips (com Figma, Mockflow, Marvel, Moqups, InVision, Canva, Wireframe.cc, entre moltes altres).

En aquest article no pretenc enumerar avantatges i inconvenients de XD respecte d’altres eines ni convertir ningú en un fan d’Adobe. És el programari que utilitzem i que trobem còmode, senzill i net d’utilitzar. Normalment es parla del punt de vista del dissenyador/a, així que m’ha semblat interessant explicar algunes utilitats d’aquest programari des del punt de vista del desenvolupador (amb permís per usurpar-los la identitat durant una estona 😄).

Més sobre Adobe XD

Adobe Experience Design és un editor de gràfics vectorials desenvolupat per Adobe. Aquesta eina s’utilitza per dissenyar, crear prototips UX/UI i wireframes de pàgines web i aplicacions mòbils. A més, permet integració amb Jira, Slack, Zeplin, Microsoft Teams, ProtoPie, Avocode, Sympli i Kite App. També admet (des de la vista del dissenyador) nombrosos connectors de tercers (la majoria gratuïts) que amplien les funcionalitats i creen un ecosistema molt interessant.

El llançament inicial va ser l’octubre del 2015 i està en evolució constant gràcies al sistema de feedback dels usuaris: Adobe XD Feedback: Feature Requests & Bugs. Des de llavors, Adobe actualitza mensualment el programari amb les propostes més votades, així que cada mes esperem com un caramelet les novetats i millores que arriben.

I si no sabem com fer alguna cosa, al seu blog oficial ens ho expliquen.

#adobexd#maquetació#prototipatouxui#wireframing