De diseño gráfico a UI/UX: una guía práctica
En esta guía te explicaré cómo puedes empezar a hacer la transición de diseño gráfico a UI/UX.
No es un listado genérico que puedas encontrar en cualquier artículo: lo he escrito tomando mi propia experiencia como referencia, porque yo también empecé en diseño gráfico.
Ah, y abajo de todo te doy 3 pasos que puedes tomar a partir de hoy para empezar a tirar del hilo y reencauzar tu camino hacia el sector tecnológico 😏
¡Empecemos!
Antes de nada: mi camino en formato breve
Permíteme que te ponga en un poco en contexto con mi historia: en 2008 empecé a estudiar diseño gráfico (después de hacer un año de la carrera de Turismo).
No te creas que tenía una visión súper clara de qué era el diseño: ni siquiera me había planteado que eso era una profesión como tal. Y de hecho me matriculé en esa escuela porque había una asignatura de marketing, no por las de retoque fotográfico o tipografía 😅
Cuando acabé en 2010 tenía muy claro que quería «hacer páginas web», que lo mío era pensar en pixeles, pantallas y resoluciones y no en milímetros, formatos de papel y tipos de impresión.
Pero claro, una cosa es decidirlo y la otra, encontrar el camino.
Similitudes entre diseño gráfico y UI/UX
Aunque es posible que ahora no lo veas muy claro, la verdad es que ya has recorriendo una buena parte del camino.
Conocimientos de diseño
Si previamente has estudiado diseño gráfico es muy probable que ya tengas muy integrados los conocimientos básicos en cuanto a tipografías, espaciados, teoría del color, uso de retículas, diferencias entre formatos, la importancia de la estética, la capacidad de solucionar problemas… así que por este lado no sufras.
Preparación de entregables
Aunque de otra manera que en el diseño UI/UX, también te habrás encargado en algún momento de preparar el diseño para «salir a producción». Esto es, preparar los artes finales, hacer las comprobaciones con el cliente u otros perfiles senior, enviarlos a la imprenta y ver y validar las pruebas de impresión, entre otras tareas.
Comunicación con otros perfiles
Y por extensión, también estarás acostumbrad@ a trabajar con perfiles distintos al tuyo: clientes, impresores, proveedores de papeles, tintas y acabados, etc.
Así que fíjate en lo que ya tienes: los conocimientos básicos, la costumbre de preparar el diseño para producir y la habilidad de comunicarte con perfiles ajenos al tuyo y al diseño.
No está tan mal, ¿no? 🙂
Diferencias entre diseño gráfico y UI/UX
Sin ningún orden en particular, estas son las diferencias más grandes que he encontrado al hacer el salto de una especialidad —no encuentro otra palabra mejor— a otra.
Herramientas del día a día
El conjunto de herramientas que utilizarás es bastante diferente: mientras que en el diseño gráfico se utiliza mayoritariamente Photoshop, Illustrator e InDesign, en UI/UX se suele utilizar Sketch, Figma, Framer, Invision y Zeplin, entre otras.
Flujo de trabajo
Aquí es donde encontré la diferencia principal. Mientras que en diseño gráfico invertía mi tiempo entre entender el brief y prácticamente diseñar directamente, en UI/UX el proceso de diseño es más extenso.
Según en qué empresa trabajes puede tener estos pasos o quizás solo te ocupas de una parte, pero a rasgos generales podríamos sintetizarlo en:
- Entender (de verdad) el problema
- Elaborar una hipótesis
- Contenido, wireframes y prototipos
- Diseñar
- Acompañar al equipo de desarrollo
- Validar —o no— la hipótesis, haciendo test
Entender al usuario
En general, en UI/UX se intenta comprender al usuario de forma más profunda que en el diseño gráfico. Esto es así porque en digital diseñamos para que algo sea utilizado e interactuable, mientras que en el diseño «tradicional» el diseño tiene una labora más estática, comunicativa y estética.
Ojo que no estoy diciendo que en UI/UX no se comunique o no se tenga en cuenta la estética, solo apunto que la mayor parte de los esfuerzos está en cómo se utiliza y funciona aquella página web o aplicación.
El diseño no es estático
Pienso que, con diferencia, este es el punto más crucial. Si antes te decía que tienes mucho ganado porque ya tienes los conocimientos de diseño, hay un aspecto en concreto que tendrás que olvidar: el diseño estático.
Personalmente me costó bastante dejar de pensar en páginas web como si fueran carteles. Me quedaba encallada en el «pixel perfect» y no me daba cuenta de que lo que importa es la experiencia (más sobre esto en este artículo).
Y por extensión se me olvidaba —a quién quiero mentir, todavía me pasa— pensar en los distintos estados que tendrá un botón, un elemento del formulario, cómo se verá el aviso de confirmación o de error…
Lo que diseñamos en el entorno digital está vivo y existe en muchísimas plataformas, tamaños y resoluciones diferentes. Y además tiene que responder a las interacciones del usuario y a distintos flujos y objetivos.
Terminología de negocio
Desconozco si esto sucede de una forma tan acusada en general, pero lo cierto es que durante los últimos años he tenido que aprender muchos conceptos de negocio, como objetivos de empresa, números y métricas que se observan, disciplinas que se mezclan mucho más entre sí… y además, claro está, saber aplicarlos al diseño —que a su vez tiene el usuario como foco principal—.
Cuando trabajaba en el estudio de packaging prácticamente no pensaba en todo esto: el cliente venía porque tenía una necesidad concreta —por ejemplo, vender un nuevo producto— y planteábamos una propuesta en base a lo que ya habían hecho previamente y lo que había funcionado en anteriores ocasiones.
3 pasos que puedes seguir para empezar
- Familiarízate con los programas. Regístrate en Figma y empieza con el plan gratuito. Verás que no hay mucha diferencia con la suite de Adobe. Lo mismo con Invision, Zeplin… haz pruebas y aprende dónde está cada funcionalidad.
- Copia. En este artículo escribí más en detalle sobre este punto, pero en resumen: fíjate en cómo se construyen las aplicaciones que más utilizas en tu día a día. Observa cómo son las pantallas, qué retícula hay detrás, cuando y como salen las alertas, cómo es el flujo que sigue el usuario… Eso sí: copia, pero no lo pongas en tu portfolio. Copia para practicar.
- Si te llama más la parte de investigación, empieza a familarizarte con los básicos del UX Research. Prueba con amigos y familiares y experimenta cómo es el proceso.
Pensarás que estos tres pasos son sencillos, pero son los que te ayudarán a empezar a tirar del hilo. Son los que seguí yo en su momento, quizás porque no tenía muchos recursos económicos para apuntarme a mil cursos.
Si te preocupa el proceso de trabajo que se sigue en digital, lo irás descubriendo a medida que vayas realizando los pasos que te comentaba antes. Te darás cuenta de qué paso va primero y qué te funciona mejor a ti. Por si te sirve como referencia, este es mi proceso de diseño habitual 🙂
Apuntes finales
Esto que voy a escribir es posible que sea aquello que llaman unpopular opinion, pero te lo digo igual: de entrada no te recomendaría tirarte de cabeza a estudiar otra carrera, posgrado o máster. Lo más importante ya lo tienes, que son los conocimientos de diseño. Experimenta primero y cuando tengas una idea de hacia qué «lado» quieres enfocarte, busca los estudios que te ayuden.
Con este texto que acabas de leer no pretendo hacer una lista exhaustiva de los pasos a seguir, principalmente porque depende mucho de tus conocimientos previos y de dónde querrás trabajar… pero sí quiero que veas que hacer la transición de diseño gráfico a UI/UX no es tan complejo como pueda parecer: una vez tienes claro qué conocimientos ya tienes y cuáles te faltan, es cuestión de ir haciendo tu camino.