01 de 09
Com aconseguir-se començar amb UXPin
A mesura que avançem en el disseny mòbil, el disseny d'aplicacions i el disseny sensible, s'ha centrat cada vegada més en UX (User Experience) i en wireframing , prototips interactius i maquetes. Hi ha un munt d'eines destinades a aquest nínxol i executa la gamma completa de gegants complexos, carregats de característiques a poc a poc i amb prou feines útils. Una de les eines que més m'ha cridat l'ull és UXPin, simplement perquè va ser desenvolupada per dissenyadors per a dissenyadors.
Abans de continuar ... una advertència. Si el vostre és una organització que prefereix posseir el programari, llavors UXPin no és per a vosaltres. Tot el treball realitzat en aquesta aplicació es fa al navegador i els projectes que deseu es desen al vostre compte.
Per començar amb UXPin, inicieu un navegador i aneu a UXPin. A partir d'aquí, podeu inscriure's en una prova gratuïta o organitzar un pla mensual segons la vostra necessitat prevista. El procés d'inscripció és bastant senzill i una vegada que heu configurat el vostre nom d'usuari i contrasenya, ja esteu preparat per començar.
02 de 09
Com iniciar un projecte a UXPin
Quan inicieu la sessió, arribeu al Tauler i, a partir d'aquí, podeu decidir crear un nou marc wireframe, un nou projecte mòbil o un projecte de disseny web de resposta. També hi ha complements per a UXPin que us permetran portar els vostres projectes de Photoshop o Sketch. Per a això, com vaig a crear un pancarta amb algun text i afegir un botó de correu electrònic a la pancarta. Per aconseguir això, he seleccionat Crea un nou marc wireframe.
03 de 09
Com s'utilitza la interfície UXPin
La superfície del disseny es divideix en quatre àrees. A la zona negra de l'esquerra hi ha una sèrie d'eines que us permeten tornar al tauler, obriu els elements que utilitzareu, obri el panell Elements intel·ligents, cerqueu elements, afegiu notes a la pàgina i afegiu membres de l'equip. A la part inferior hi ha un botó que obre un breu tutorial, un altre que us permet accedir al vostre compte i un altre que accedeix a les preguntes més freqüents, us farem preguntes i fins i tot us facilitarem comentaris.
A la zona blava al llarg de la part superior hi ha una sèrie d'eines i propietats. Els botons més foscos del costat dret us permeten fer iteracions al vostre disseny, ajustar la configuració del projecte, compartir la pàgina i fer una simulació a la pàgina del navegador.
El panell Elements és on agafeu els bits i peces per a la superfície de disseny, designeu el vostre projecte i afegiu o elimineu pàgines.
La biblioteca Elements és una sorpresa agradable per als dissenyadors UX. Aquest desplegable us permet triar entre 30 biblioteques que van des d'iOS a Android Lolipop. A més, teniu accés als elements Bootstrap i Foundation juntament amb les icones Font Awesome, les icones gestuals per a mòbils i una col·lecció de Social Widgets.
04 de 09
Com afegir un element a una pàgina UXPin
Per començar, he arrossegat l'element Box a la superfície del disseny i, quan allibero el ratolí, s'obre el quadre Propietats . El botó Propietats us permet assignar un nom a l'element i establir l'alçada de l'element i els valors de posició. També podeu afegir farcit a l'element, arrodonir les cantonades i ajustar-ne l'opacitat. Si feu clic al botó Color de fons s'obre un selector de color RGBA.
També podeu assignar una font, un límit i un patró a l'element seleccionat. The Lightning Bolt us ofereix la possibilitat d'afegir interactivitat a un element seleccionat.
05 de 09
Com afegir i formatejar text a UXPin
Per afegir text, arrossegueu l'element de text a la superfície de disseny i introduïu el text. Feu clic al botó Propietat de text per obrir les propietats del tipus de lletra i formatear el text. Si necessiteu un bloc de text fictici, afegiu un element de text i feu clic al botó GENERATE LOREM IPSUM a les propietats del tipus de lletra.
06 de 09
Com afegir una imatge a una pàgina UXPin
Hi ha algunes maneres d'aconseguir aquesta tasca. Podeu utilitzar l' eina d'imatge a la barra d'eines, afegir un element d'imatge de la biblioteca o simplement arrossegar i deixar anar una imatge des del vostre escriptori a l'element de la superfície del disseny tal com es mostra a dalt.
07 de 09
Com afegir un botó a una pàgina UXPin
Tot i que hi ha un element Button, introduint " Botó " a l'àrea de cerca , com es mostra a dalt, obre tots els botons que es troben a totes les biblioteques. Arrossegueu el que us funcioni a la superfície del disseny i utilitzeu les propietats per canviar el color, la font i fins i tot el radi de la vora. Per canviar el text dins del botó, feu clic una vegada al text i introduïu el text nou.
08 de 09
Com afegir la interactivitat a una pàgina UXPin
Això no és tan complicat com pot aparèixer per primera vegada. Per a l'entrada de correu electrònic, he afegit un element d'entrada, el va redimensionar, va introduir el text i formateó el text. Amb l'element d'entrada seleccionat, feu clic al botó Propietats i, quan apareguin les propietats de l' element, feu clic al botó Visibilitat : el globus ocular, a l'extrem superior dret del plafó.
Seleccioneu el botó i feu clic al botó Interaccions (Lightning Bolt) a les propietats. Quan s'obre el quadre Interaccions, seleccioneu Nova interacció. Seleccioneu Feu clic a desplegable desplegable. A l'àrea Acció, seleccioneu Show Element. Ara se us preguntarà quin element es mostrarà. Feu clic una vegada a la pistola i feu clic a l'element d'entrada. Amb l'element identificat, ara podeu determinar si voleu o no animar l'element. En aquest cas, he decidit mostrar fàcilment la caixa d'entrada amb el valor de durada predeterminat de 300 ms.
També vull que el botó mous uns 65 píxels a la dreta quan es faci clic. Vaig seleccionar el botó, va obrir el tauler d'interaccions i vaig seleccionar Nova interacció . He fet servir aquestes configuracions:
- Desencadenador : feu clic
- Acció: Moure's
- Moure direcció : 65 px en l'eix x
- Animació : lineal
- Durada: 300 ms
Per eliminar una interacció, seleccioneu l'element i obriu el panell Interaccions. Seleccioneu la interacció al tauler i feu clic a la Paperera per esborrar-la.
09 de 09
Com provar la vostra pàgina a UXPin
A causa del fet que esteu treballant en el navegador, les proves són morts senzilles. Feu clic al botó Simular disseny . La pàgina s'obrirà al navegador i podràs provar el camí. També hi haurà un panell afegit al costat esquerre de la pàgina que permeti comentaris, un Mapa del lloc si hi ha diverses pàgines, proves d'usabilitat, compartició en directe, edició i retorn al tauler.
A la part inferior de la pàgina hi ha un altre petit panell que us permet mostrar els elements interactius, mostrar o ocultar comentaris i compartir l'enllaç del projecte amb els altres.