¿Qué es el diseño UI?

Por cuestiones ajenas a mi, hace no mucho me quede sin trabajo, por lo que he empezado la búsqueda de un nuevo trabajo como diseñador UI | UX. Por si no lo saben me dedico principalmente a esto, si, para muchos les sorprenderá porque la gran mayoría llega aquí es por el SEO pero esa es mi función secundaria, ya que vivir del SEO es depender de una segunda persona (Google) que no importa cuanto pueda estar preparada un día puede cambiar las algoritmos y todo lo que sabíamos se va al traste. A diferencia del diseño UI y UX que aunque va evolucionando día con día no esta regido por el capricho de una empresa. Pero me dado cuenta de que muchos no saben que es el UI. Así que aprovechare esto para hablar un poco de lo que me dedico ya que curiosamente mucha gente no entiende que es esto, ya que en la búsqueda de empleo veo que piden muchas cosas que no pertenecen a esta área, esperando que esto ayude a entender que es y que no es UI.

¿Qué es el UI?

UI significa User Interface o interfaz de usuario. La interfaz es todo lo que vemos en cualquier software o aplicación. El diseño de UI es eso, diseñar la interfaz que va a usar un usuario en un aplicación o software. Forma parte muy importante del proceso de desarrollo de software y están involucradas varias personas. Explicare cual es el proceso de diseño UI en el desarrollo de software para que quede mas claro pondré un de ejemplo creado por mi equipo, por temas de confidencialidad no puedo mostrar todo el sistema solo elementos por separado.

Imagen 1. Ejemplo de interfaz de usuario.

La composición no es casual, para llegar a este acomodado de elementos es mediante una investigación de experiencia de usuario (UX), esto no es ocurrencia esta fundamentada en investigación que puede cualitativa como cuantitativa, no me meterá mas ya que entraría en el tema de que es diseño UX (que explicare mas a detalle en otra entrada), solo hay que saber que la composición fue realizada (y probablemente testeada) basada en una investigación.

Imagen 2. Ejemplo de diagrama de flujo.

Imagen 3. Ejemplo de Wireframe.

Esta investigación es entregada al UI, esta compuesta por Wireframe que son bocetos (estos pueden ser en papel o mas elaborados depende de como trabaje) en donde se ven donde va a ir cada cosa y como es el flujo del sistema. Cuando me refiero al flujo del sistema, hablo de como va a ir las pantallas y como debe funcionar dependiendo de la interacción. Ya con todos estos elementos el diseñador empezara a diseñar. Para esto crea una guía de UI donde definirá todos los elementos del sistema como son colores, tipografía, iconografía, botones, etc.

Imagen 4. Ejemplo de elementos de UI.

Teniendo estos elementos ya se empieza a diseñar basado en el Wireframe, normalmente a estas alturas ya se definió todo, fue aprobado por el cliente o por lo menos de manera interna, por lo que no debería de haber cambios en el flujo del sistema ni la composición (a menos pase algo catastrófico). Ya se empieza a diseñar la interfaz como debería de verse, las imágenes como los textos suelen ser simulaciones de lo que contendrá.

Imagen 5. Programas de Xd.

Esta puede ser diseñada en diferentes programas, yo uso Adobe Xd porque es el que estoy mas familiarizado por usar durante toda mi vida laboral la paquetería de adobe, pero hay otros programas como Sketch, Invision o Figma, todos tienen sus ventajas y desventajas, yo recomiendo usar el que mejor se adapte a las necesidades de tu equipo (como mi caso fue Xd). Terminado este prototipo se presenta al cliente donde se ven los cambios, este prototipo puede tener o no interacción depende de nueva cuenta como trabaje tu equipo (en algunos proyectos mostramos interacción y en otros no). Terminado esto se entrega a desarrollo donde ya se van a encargar de toda la programación, aquí puede que haya cambios ya que en desarrollo puede que se presenten casos que el diseño como se tenía contemplado no pueda desarrollarse por x o y circunstancia, también puede que se necesite mas pantallas por lo que el trabajo del diseñador UI no acaba hasta que el proyecto este terminado.

¿Qué no es un diseñador UI?

No es un diseñador gráfico. Un diseñador gráfico primero se centra en el aspecto gráfico sobretodo, todo lo demás pasa a un segundo termino como la experiencia de usuario o como va a interactuar. No es un desarrollador, es muy importante que el UI sepa como funciona al código ya que le permitirá transmitir mejor el mensaje a los desarrolladores, pero el no programa, el encargado es un desarrollador front-end, si estas usando una app y la vez medio extraña es porque muy probablemente que la interfaz fue hecha por un desarrollador sin ayuda o conocimientos de UI. No es diseñador UX, el diseñador UI puede ser el mismo que hizo el UX pero no es regla, hay muchos casos que el diseño UX lo hizo alguien que no estudio algo relacionado al diseño, si no psicología o algo afín.

Esto básicamente es lo que el diseño UI, espero en unos días subir la segunda parte que es el UX, algo que es mas complejo por lo que quise ir a lo sencillo primero.