Hay una frase de Charles Darwin que define muy bien el momento que se vivió hace algunos años en el mundo del diseño web: "No es la más fuerte de las especies la que sobrevive y tampoco la más inteligente. Sobrevive aquella que más se adapta al cambio".
Con la irrupción del UX/UI en el mundo del diseño web (en realidad llevaba muchos años pero no estaba de moda) muchos diseñadores gráficos y web se renovaron en diseñadores UX/UI, que al final es lo que hay que ir haciendo: renovarse o morir.
Cuando yo comencé mi renovación (más bien una ampliación) lo que mas me costo fue adaptar una metodología de trabajo y seleccionar las herramientas necesarias para desarrollar mi trabajo de una forma más fluida.
En este artículo no entraremos en herramientas de frontend como Sublime, Codepen, etc.. es básico saber front (HTML, CSS, XML, JavaScript), cualquier buen diseñador debe conocerlo, para saber sus limitaciones o bondades a la hora de realizar un diseño.
Llaves inglesas para UX (User Experience)
Cuando trabajas con UX lo que más te gusta es hacer wireframes, pruebas intentando sacar las mejores ideas que extraes del comportamiento del usuario (El trato con los usuarios puede ser directo, bien sea con pruebas directas con usuarios, entrevistas cualitativas, etc.. o de forma indirecta, con Heat Maps, Test a/b, etc…), además siempre tienes que probar y modificar sin descanso.
Hay que diferenciar claramente un wireframe de un mockup, el primero sería simplemente un esquema sin estilos tipográficos, color o diseño acabado. Se basaría en su funcionalidad, comportamientos, etc.., mientras que un mockup ya incluiría la funcionalidad y pruebas de diseño.
Para esto no hay nada mejor que los programas para hacer wireframes (un lápiz y un papel también sirve, ¡pero que sea papel reciclado!).
Una de las mejores herramientas para hacer wireframes es Balsamiq por su gran versatilidad y multitud de opciones, tened en cuenta que esta herramienta es de pago. Una alternativa free seria Mockflow, la cual cuenta con numerosas herramientas con sus limitaciones en el modo free, pero suficiente para empezar sin tener que pagar.
Como alternativas a los antes mencionados, que no debemos descartar, tendríamos: (Cuidado con sus descripciones que ahí entra en juego el departamento de Marketing, y ese es un terreno que hoy no pisaremos. ¡Gente del Marketing os quiero!)
- Gomockingbird: Maqueta una aplicación y muestra lo que es importante: la idea, la información y la interacción.
- UXPin: UXPin es utilizado por los mejores equipos de diseño en el planeta.
- PencilProject: Pencil se construyó con el fin de proporcionar una herramienta de prototipado gratuita y de código abierto que la gente puede instalar y utilizar para crear wireframes fácilmente.
Tened en cuenta que con la mayoría de estas herramientas podemos desarrollar tanto wireframes como mockups. Pero claro está ahí entra en juego la parte de UI y la vena de diseñador maniático que quiere por todos los medios entregar mockups con diseños perfectos.
Y si tengo en cuenta después de escribir esto, que no todo el mundo considera trabajo del UX la parte de wireframes (con esto no estoy diciendo que no tengan razón), ya que se puede considerar que estas diseñando la interfaz, pero no suelo estar de acuerdo con lo que piensa todo el mundo, y mi experiencia me dice que el UX debe de estar presente y participativo en el proceso de wireframe, para lo cual necesita las herramientas antes mencionadas.
Martillos para UI (User Interface)
Aquí entramos en el diseño de interfaces, un maravilloso mundo en el que todo el mundo de tu empresa va a opinar y querer participar, y de verdad, deja que participen. Esto te va a aportar mucho sobre lo que pensar y al final, es experiencia de usuario.
Para mi esta parte implica distribución de los elementos, su diseño, sus interacciones y todos los detalles que se te puedan ocurrir, sin duda para mi es la parte más divertida, más creativa, pero ya os digo es mi opinión.
Aquí también tenemos un abanico de herramientas muy amplio, desde herramientas online, APPs de escritorio, etc… Como siempre tenemos versiones de pago y free, aquí dependerá del bolsillo de cada uno a la hora de elegir.
Podemos poner algunos ejemplos de estas herramientas como son:
Proto: Crear prototipos totalmente interactivos que se ven y funcionan exactamente igual que tu aplicación. No se requiere saber código. Sin lugar a dudas para mi una de las herramientas más completas para el diseño de APPs.
MarvelAPP: El diseño simple, la creación de prototipos y la colaboración. Una herramienta magnífica, con una versión free bastante completa, tanto para Apps como para Webs.
Invision: Diseña mejor, más rápido y juntos. Líder mundial en la creación de prototipos, colaboración y plataforma de flujo de trabajo. herramienta muy potente, con una versión free decente, y con grandes posibilidades en la versión de pago.
Pero sintiéndolo mucho me sigo decantando por herramientas mucho más completas como Sketch que genera un abanico de posibilidades muy extenso, ya sea para web (mobile, desktop), para trabajar una APP.
Aún con todo lo visto, yo no trabajo ya con ninguna de las anteriores, y he pasado todo mi trabajo UI a la utilización de Adobe XD y Photoshop. Sencillamente mi workflow “Atomic Photoshop Design” está basado en Photoshop, y desde que sacaron Adobe XD se esta adaptando muy bien con este nuevo programa.
Con Adobe XD puedo hacer cualquier tipo de diseño, ya sea mobile, desktop o APP. Además puedo compartir enlaces de preview con mi equipo de trabajo, cada vez se entiende mejor con el resto de la familia. Este programa está aún en fase beta, pero las actualizaciones y mejoras son constantes. Además Adobe está muy atento a las opiniones de los usuarios en este programa.
Herramientas complementarias
Desde luego todo esto no es suficiente, y muchas veces se olvida que el diseño no termina cuando lo entregas, luego siempre hay que controlar la implementación del mismo por los desarrolladores. En la parte web y mobile es fácil, ya que siempre vas a tener una URL para poder visualizarlo, o en su defecto, podrás descargarte el proyecto y correrlo en local.
Cuando trabajamos en el diseño de una APP hay varias formas de controlar el trabajo de los desarrolladores, pero para mi los métodos más cómodos, y que más abanico de posibilidades me abre es trabajar con “emuladores”, a falta de un buen Device Lab.
Estos simuladores también te servirán para probar una web en multitud de dispositivos sin arruinarte en el intento.
Estamos hablando de Genymotion y Xcode, emuladores de Android y Apple respectivamente. El primero nos da la posibilidad de emular cualquier dispositivo que use Android, permitiéndonos así instalar una apk de la APP, y con Xcode tendremos la posibilidad de emular todos los dispositivos de Apple.
Conclusión
Existe un abanico muy grande de herramientas que pueden ser aprovechadas para nuestros fines, al final quien tiene que definir esas herramientas sois vosotros mismos y vuestro workflow, en este artículo solo he querido compartir con vosotros las herramientas que yo uso o he usado en algún punto de mi vida.
Probad todas sin miedo, que todas tienen versiones de prueba, y evaluad cual es la que mejor se adapta a vuestro workflow.