La importancia de la calidad de los entregables de diseño UX

Cuando comenzamos un nuevo proyecto desde el rol de diseñador UX/UI, existe un proceso entero por el cual avanzar, hay ocasiones en las que cubrimos todas las etapas del trayecto y otras, por las características intrínsecas del propio proyecto, o por factores externos, en las que no es necesario. Sin embargo, todos estos hitos tienen la misma importancia y ayudan a alcanzar la siguiente fase de forma exitosa, y los entregables de diseño UX forman parte de este proceso.  

Hagamos un breve recorrido por todas estas etapas. La primera fase es la de inception: el objetivo aquí es recopilar toda la información previa referente al proyecto, hablar con el equipo de negocio y obtener sus requerimientos, mantener una reunión con desarrollo y entender la capacidad y limitaciones de la tecnología. 

La segunda fase es la llamada conceptualización: lo que pretendemos en esta parada es ordenar, catalogar y priorizar los requisitos que harán que nuestro diseño tenga una buena usabilidad, y al mismo tiempo cumplamos con los objetivos del cliente, sin olvidar adaptarnos a la tecnología que tenemos disponible. Para ello podemos servirnos de diagramas de flujo para entender el journey map de nuestros usuarios, entre otras herramientas. 

Continuamos con las fases de diseño: primero realizaremos wireframes que testearemos con cliente e iteraremos si es necesario, para después pasar a la fase del diseño visual. 

Una vez llegados a esta etapa podríamos pensar que nuestro trabajo termina aquí. Sin embargo, nada más lejos de la realidad, nuestro trabajo continúa con el handoff. 

El handoff es la fase de traspaso del proyecto: en este momento hemos de entregar nuestro diseño al equipo de maquetación y desarrollo para que lo conviertan en una realidad digital. 

Este traspaso debe ser impecable, hemos de facilitar al equipo receptor toda la información pertinente al diseño que debe implementar. Para asegurarnos de que estamos traspasando un archivo que reúne las mejores condiciones, nos podemos apoyar en una serie de tips o consejos para chequear que nuestro entregable cumple con todas las especificaciones de calidad.

Un solo archivo de diseño

El primer consejo útil es que tengas todo recogido en un mismo archivo de diseño (dentro de Figma o de la herramienta que tú prefieras), y que utilices las páginas necesarias para que el proceso resulte comprensible, es posible que tengas una primera página con la documentación, seguida de otra página que contenga el diagrama de flujo, también deberías tener una para los wireframes y otra para el diseño. 

Te recomendamos diferenciar entre el diseño para formato escritorio y el diseño para móvil, teniendo cada uno de ellos en una página diferente. Aunque esta última división dependerá del tamaño del proyecto. Si hablamos de una aplicación modesta podrían estar juntos perfectamente, ya que sería más sencillo mantener la coherencia entre los flujos y se podrían comparar con facilidad. Sin embargo, cuando manejamos grandes diseños con multitud de flujos y de pantallas, se hace difícil utilizar una sola página para ambos.

Nombra tus capas, grupos y frames

Cuando diseñamos hemos de tener muy presente que nuestro archivo cambiará de manos en algún momento, ya sea por el handoff a desarrollo o porque otro compañero diseñador se haga cargo del mismo. 

Por este motivo, hemos de ser muy rigurosos nombrando las capas, grupos y frames que el documento pueda contener para facilitar a quien coja el testigo la comprensión de lo qué está viendo sin necesidad de realizar un esfuerzo para descifrarlo. Recuerda utilizar nombres claros, descriptivos y concisos, evita los espacios entre palabras y huye de los acentos, símbolos o caracteres especiales.

Usa elementos corporativos

Antes de comenzar a diseñar deberás tener una guía de estilo bien definida, que incluya una serie de estilos tipográficos, paleta o paletas de color, componentes, retículas, y ciertos recursos como iconos, ilustraciones o imágenes. 

Tu diseño seguirá estos patrones previamente establecidos y así conseguiremos mantener la coherencia y la cohesión de la marca.

Ver también: Sistemas de diseño, ¿qué son y por qué son tan importantes?

No diseñes sólo el happy path

Es importante tener bien presente qué sucederá durante todos los flujos, si hemos definido correctamente los diagramas de flujo en etapas anteriores tenemos el camino prácticamente trazado, sin embargo hemos de plasmarlo en pantallas. No siempre todo va según lo esperado, hay veces que una búsqueda no arroja resultados, existen los estados vacíos, y a lo largo del proceso pueden surgir errores, ya sean humanos o tecnológicos. 

Diseñemos todas las casuísticas. No olvidemos recopilar los mensajes tanto de éxito como de error pertinentes.

Utiliza textos reales

No siempre tenemos acceso al contenido final de nuestro diseño, sin embargo, lo tengamos o no intentemos utilizar textos lo más cercanos a la realidad posible. Puede suceder que nuestro diseño se malogre si hemos calculado mal los espacios, podemos pensar que un texto va a ocupar un par de líneas y cuando vemos el producto desarrollado ese par de líneas suben a diez. Algo muy similar puede tener lugar si el lenguaje final de la aplicación diseñada, cambia.

Revisa el modo de color

Este punto aplica dependiendo del formato del diseño. Para un diseño digital cuya finalidad es interactuar con él a través de una pantalla, la herramienta de trabajo te va a permitir variar entre sistemas de colores luz (HEX, RGB, CSS, HSL, HSB) hay una relación directa entre estos sistemas y visualmente no apreciarás el cambio. 

¿Qué sucede si nuestro diseño está destinado a ser impreso? En este caso, el modo de color será CMYK. Y asegurarnos de que usamos el modo de color correcto será primordial para obtener buenos resultados.

Recopila todos tus assets

Es posible que al diseñar hayamos utilizado iconos, logotipos, ilustraciones o imágenes. A estos recursos los llamamos assets, y el primer paso para convertirlos en un entregable es optimizarlos para después agruparlos.

Cuando hablamos de assets vectoriales facilitaremos el recurso en formato SVG. Podemos realizar la exportación directamente desde nuestra herramienta de trabajo, el siguiente paso sería utilizar alguna aplicación externa de fácil acceso que nos permita optimizar estos archivos SVG.

En el caso de imágenes o elementos no vectoriales, deberemos utilizar los formatos JPG o PNG, éste último en el caso de que se necesite que el recurso tenga fondo transparente. Usaremos herramientas de optimización externas al igual que hicimos con el formato SVG.

Documenta

Este paso es opcional y está directamente relacionado con la naturaleza del proyecto. Es posible que sea necesario crear documentación extra que facilite el handoff, pero también cabe la posibilidad de que nuestro diseño sea lo suficientemente completo que se explique por sí mismo.

Con todos los puntos anteriores, crea una checklist

Finalmente, te recomendamos encarecidamente que para no olvidar repasar todos los puntos anteriores antes de entregar tu diseño, crees una checklist donde vayas marcando cada uno de ellos según los verifiques. Te facilitará el trabajo y evitará que pases algo importante por alto.

Finalizar un proyecto de diseño UX/UI es un proceso que combina meticulosidad y visión estratégica. Desde la fase de inception, pasando por la conceptualización y diseño, hasta el crucial handoff, cada etapa contribuye al éxito del proyecto.

No solo hay que diseñar con el usuario en mente, sino también hay que preparar y entregar el diseño de una manera que facilite su implementación técnica. La creación de wireframes, el diseño visual, y la meticulosa preparación para el handoff son pasos que requieren una atención detallada y un enfoque enfocado en la calidad y coherencia. 

Al asegurar que cada elemento, desde los nombres de las capas hasta la optimización de los assets, está claramente definido y organizado, los diseñadores UX/UI trazan el camino para una implementación sin fisuras que respeta la visión original y satisface las necesidades del usuario final. 

Este enfoque holístico, además de mejorar la experiencia del usuario, también fortalece la colaboración entre diseño y desarrollo, culminando en productos digitales que son tanto funcionales como estéticamente agradables.

---

Foto de portada de Zane Lee en Unsplash.