Content
- Els avantatges del prototipat
- Aplicacions de prototipatge
- 01. Divshot
- 02. Cavallet
- 03. UXPin
- Consideracions sobre el flux de treball
- Més fàcil del que era
- El futur del prototipatge
- T'ha agradat això? Llegiu-los!
Amb la majoria de llocs que ara responen de manera predeterminada, el prototipatge és una necessitat. Estem dissenyant i construint llocs que responguin a la
dispositiu utilitzat per visualitzar-los. Treballar o el més a prop possible del mitjà mitjançant el qual es consumiran els nostres dissenys només pot ser un avantatge per a nosaltres. Cada vegada és més fàcil fer-ho a mesura que les eines que tenim a l’abast es tornen més sofisticades.
Amb molt, la part més difícil de la feina d’un dissenyador és explicar adequadament idees i intencions als altres. Permetre que les persones puguin experimentar aquestes idees és una manera molt millor d’ajudar-les a entendre; em sembla especialment adequada la frase "mostrar, no explicar". Però no s’atura aquí. Prototipar el vostre disseny també us ofereix l’oportunitat de veure on funciona i no, provant, ajustant i ajustant a mesura que aneu.
Els avantatges del prototipat
Amb quina freqüència heu vist construir alguna cosa, tal com l’heu dissenyat, per descobrir que no és el que realment esperàveu o volíeu? En aquest moment, és massa tard.
Fa temps que crec que els dissenyadors haurien de codificar. Es pot obtenir una comprensió més profunda del disseny si se sap què passa a sota. Et fa ser un millor dissenyador i un disseny més rigorós. Com s’estructura un document és una decisió de disseny.
Però recentment he hagut de qüestionar aquesta creença. He començat a veure aplicacions que ofereixen alguns dels avantatges dels prototips HTML mitjançant una interfície d'arrossegar i deixar anar, que us permetrà passar d'una idea a interactuar amb aquesta idea i avançar-la relativament ràpidament. Sens dubte, el major avantatge i el que m'ha fet qüestionar la meva opinió és el fet que aquestes aplicacions fan que sigui tan fàcil prototipar d'una manera sensible.
Si primer aneu a dispositius mòbils, podeu canviar la mida de la pantalla a l’escriptori i veure el contingut i la reposició del contingut, si cal. Això simplifica enormement el procés i les consideracions que hauríem de tenir en compte a l’hora de dissenyar un lloc sensible. Però és un començament i un començament millor que una sèrie de telèfons i visuals de diferents mides.
Aplicacions de prototipatge
Al llarg dels anys, he provat moltes aplicacions amb l’esperança que m’ajudessin a apropar-me a la versió en directe del que estava dissenyant en aquell moment, sense trigar a codificar manualment un prototip. La resposta sempre va ser: no hi ha dreceres. Però ara que apareixen aplicacions per ajudar-vos a dissenyar i prototipar un lloc sensible, com us poden ajudar, i a quin us heu de fixar més?
Vegem tres aplicacions per considerar la possibilitat d’introduir el vostre flux de treball: Divshot, Cavallet i UXPin. A grans trets, tots tres fan el mateix: ajudar-vos a crear una pàgina arrossegant i deixant anar diversos elements estàndard.
El creador d’interfícies d’arrossegar i deixar anar Divshot i l’eina de disseny web del navegador Easel utilitzen Bootstrap com a marc base: assenyat, atesa la seva adopció meteòrica. Divshot també ha inclòs recentment la Fundació ZURB. L’eina UX / wireframing UXPin no es tracta només de prototipatge; podeu penjar personatges i altres artefactes per ajudar-vos a explicar la història del projecte.
01. Divshot
Arrossegar i deixar anar pot ser complicat amb Divshot: només us permet posar elements en una posició, que després s’adapta al DOM. Això pot ser restrictiu, però obteniu el codi de producció de Bootstrap que sustenta el disseny. Heu d’utilitzar Bootstrap i ajustar-lo al disseny, cosa que us permet afegir CSS personalitzat per ajustar el disseny visual.
En provar Divshot, em vaig trobar que passava temps a l’editor de codi integrat un cop establerta l’estructura inicial de la pàgina. Però no va trigar a establir aquesta estructura inicial i vaig poder esbossar ràpidament a la interfície. Una de les mancances és la manca d’opció d’enllaçar pàgines per crear un prototip que es pugui fer clic; per tant, haureu de descarregar-lo i, a continuació, crear enllaços entre fitxers. (Divshot planeja afegir la possibilitat d'enllaçar pàgines de l'aplicació en una versió futura).
Hi ha altres dues característiques destacables. Els controls de visibilitat de Divshot a l’inspector apliquen una classe als elements i permeten mostrar-los o amagar-los fàcilment en un dels quatre dispositius configurats per a vosaltres (telèfon, tauleta, escriptori i HD).
Després hi ha els temes. Divshot s’ha connectat a Bootswatch, mitjançant el qual podeu canviar ràpidament el tema que utilitzeu i fins i tot fer servir els vostres propis temes personalitzats. Aquesta funció de temes és senzilla en aquest moment, però tingueu en compte la potència que us podria proporcionar si connectés el tema personalitzat per al vostre client. Divshot costa entre 30 i 300 dòlars al mes.
02. Cavallet
El cavallet també utilitza Bootstrap. A diferència de Divshot, podeu "esbossar" a la interfície ràpidament sense utilitzar els elements de disseny. També podeu enllaçar pàgines de forma ràpida i senzilla a un prototip que es pot fer clic. Quan estigueu a punt per compartir alguna cosa amb el vostre equip o client, podeu fer-ho i obtenir comentaris mitjançant el mode de comentaris.
També em plantejaria utilitzar-lo per fer proves d’usabilitat de lo-fi: l’oportunitat de rebre comentaris d’aquesta manera és un dels majors avantatges del prototipatge. El cavallet també té suport per als equips. No tenir el vostre disseny lligat a una persona en particular només pot ser bo.
Un inconvenient amb el cavallet és la mida fixa del llenç per a la vista de l’escriptori, sobretot si voleu configurar el disseny perquè sigui completament fluid. Vaig trobar que l'amplada dels elements es fixava a la mida del llenç en lloc de a l'espai disponible del navegador. El cavallet costa entre 15 i 99 dòlars al mes.
03. UXPin
La interfície d’UXPin té més funcions que Divshot o Easel, cosa que la fa sentir com una aplicació més completa i completa. No esteu lligat a un marc CSS, així que tingueu llibertat per dissenyar completament sense les limitacions que us posin. Podeu configurar la vostra pròpia quadrícula i canviar entre unes quantes mides de pantalla diferents, afegint-ne d’altres perquè necessiteu molta flexibilitat.
Un cop hàgiu creat el prototip i l’heu compartit amb els membres de l’equip, poden comentar, respondre i resoldre consultes individuals. A diferència de la resta d'aplicacions, podeu crear iteracions que es puguin revisar i comentar. M’agrada com això posa de manifest el funcionament del disseny: documentar els elements que no funcionen és tan útil com documentar les coses que sí. Massa sovint només parem atenció a les coses que funcionen, oblidant d’explicar el viatge.
UXPin se sent realment centrat a explicar la història del projecte, proporcionant la possibilitat de penjar recursos extra no creats a l’aplicació, com ara persones, un llançament de projecte o una plantilla de marc de projecte. UXPin costa entre 12 i 89 dòlars al mes.
Consideracions sobre el flux de treball
Les tres aplicacions tenen lloc al meu flux de treball. Cobren molt terreny i els puc veure guanyant força. UXPin i Easel són fàcils de comprendre: si necessiteu alguna cosa que us ajudi a provar idees ràpidament, serien bons llocs per començar.
Si treballeu d’una manera més integrada, potser colze a colze amb un equip de desenvolupadors, i esteu considerant com els components s’ajusten de manera reutilitzable, podeu afavorir Divshot (sobretot si utilitzeu Bootstrap o Foundation). Puc veure equips integrats que milloren la capacitat d'enllaçar a un tema personalitzat.
Hi haurà desenvolupadors que diuen que hauríeu de construir el vostre propi marc. Però si podeu portar alguna cosa que hàgiu fet un prototip, provat i entregat a l’equip de desenvolupadors, que estarà encantat d’utilitzar-lo, per què no ho faríeu?
Més fàcil del que era
Aquestes tres aplicacions mostren que el prototipatge és molt més fàcil del que era. El nivell al qual l’agafeu és qüestió d’elecció. Dependrà del projecte, de l'equip i del temps que tingueu. Encara puc veure ocasions en què encara vull entrar al codi, de manera que tracteu aquestes aplicacions com una drecera al principi del procés.
A mesura que les eines que fem servir maduren, les barreres d’entrada disminuiran. T’atreveixo a dir-ho, però cada cop és més fàcil prototipar coses reunint diferents elements de llocs com jsFiddle i GitHub.
El futur del prototipatge
Cada aplicació té avantatges i desavantatges. Una cosa que em desconcerta d’aquestes aplicacions és que totes comencen amb l’escriptori per defecte en lloc de començar amb el mòbil primer.
Quan es dissenya d’aquesta manera, el contingut és una de les coses crucials, i cap d’aquestes aplicacions facilita l’obtenció de contingut just al principi del procés de disseny. Si els nostres dissenys han d’encarnar els principis que estem començant a viure, les eines que utilitzem han de ser construïdes amb ells. Potser un estat de pàgina per defecte seria una bona addició.
Tot i això, el prototipatge és cada vegada més senzill, és a dir, podeu provar i explicar les vostres idees de manera més eficaç, cosa que us donarà temps per centrar-vos en el disseny.
Gavin Wye és dissenyador d’experiències d’usuari sènior i actualment treballa per a Virgin Money.
Aquest article va aparèixer originalment al número 245 de la revista net.
T'ha agradat això? Llegiu-los!
- Descobriu el següent per a la realitat augmentada
- Errors CSS que tots els dissenyadors web han d’evitar
- Excel·lents exemples de navegació de llocs web
