Diseño UI

Entregables de diseño a desarrollo

Diseño 5 min. de lectura

Si eres diseñador/a UI, deberás comunicarte efectivamente con tus compañeros desarrolladores/as. ¿Qué aspectos debes tener en cuenta en cada etapa de diseño? ¿Cómo facilitas el trabajo interdisciplinario? Descubre aquí algunos elementos básicos para trabajar eficientemente en equipo.

Entregables de diseño a desarrollo por Blog IDA.

Me gustaría iniciar este artículo hablando sobre el trabajo con equipos multidisciplinarios. Enfatizar en la importancia de la empatía al momento de trabajar con distintos perfiles de profesionales. Porque cuando diseñamos y tenemos que hacer el traspaso de nuestro trabajo a otras áreas, como a la de desarrollo, la empatía se refleja.

Cuando realizas tu labor pensando en el otro, pensando en diseñar de la forma más clara, tienes que asegurarte de traspasar tu sitio/app de la forma más cómoda posible. Esto lo hacemos cada día, para que los equipos o el desarrollador asignado al proyecto, pueda trabajar de forma cómoda y sin dudas que impidan un trabajo fluido y que este afecte la productividad.

Ahora bien hay que definir lo que es un entregable o un traspaso a desarrollo. Este es el proceso final de la etapa de diseño y la que da inicio a la etapa de Front. En esta entregamos el material necesario para que el desarrollador haga su parte. Lo que en el día a día llamamos “frontear”. 

Uno de los elementos que debemos considerar al momento de diseñar, son las hojas o guías de estilo. A continuación les contaré la importancia de éstas.

Hojas o guías de estilo bien organizadas y documentadas

En las hojas o guías de estilo se espera encontrar todos los detalles gráficos del proyecto. Además, debe ser un espacio en el cual se imparten reglas y prácticas que el diseñador le sugiere al desarrollador, e incluso lo que se debe y no hacer. 

La creación temprana de estas herramientas puede ser en un comienzo una tarea adicional que no muchas veces es considerada, ya que el equipo se encuentra involucrado en otra labor, la cual es el diseño de interfaz. Sin embargo, la implementación de las hojas o guías de estilo en las fases iniciales del proyecto, pueden suponer una disminución en los tiempos de trabajo del proyecto.  

Una hoja o guía de estilo es fundamental durante el proceso de diseño y desarrollo. Ayuda al equipo a tener un mejor trabajo colaborativo, sobretodo cuando consideramos que en los proyectos muchas veces existe más de una persona a cargo de este.

Procura cumplir con los siguientes puntos: 

Consistencia Visual

Es algo fundamental a la hora de diseñar una interfaz. Es por esto que esta hoja o guía de estilo nos ayudará a crear un diseño coherente que refleja un lenguaje visual común. Por ejemplo, una definición de las paletas de colores que se utilizarán en el diseño, a definir la tipografía y los distintos estilo de texto que van a existir dentro de este diseño, definir el pading que se utiliza en las cajas contenedoras de elementos, íconos en sus distintas versiones y formato correspondiente SVG*, etc.), esto nos  ayudará a desarrollar una experiencia de usuario unificada.

Colaboración

En unos puntos más arriba hice énfasis en el aporte que entregan estas hojas o guías de estilo al trabajo colaborativo. Estas ayudan a que un equipo de trabajo mantenga la consistencia del proyecto, y además apoya la productividad. Eliminando dudas y evitando las preguntas repetidas e innecesarias en algunos casos. 

Legibilidad de los estilos en CSS

Antes de entregar un diseño al área de desarrollo se debe realizar un análisis de nuestro producto, esto consiste en asegurarnos de que el diseño se vea realmente como nosotros lo pensamos.

Consolidación

Es perfecta para que tanto diseñadores como desarrolladores dejen sus comentarios, referencias, dudas. Así no perdemos el tiempo revisando diferentes notas, y cuestionándonos si esto se hizo o no. Así, una vez más optimizamos tiempos de trabajo. 

Orientación para nuevos miembros del equipo

En un proyecto puede colaborar más de una persona y muchas veces pueden ir rotando. Por esta razón, son importantes como un documento de anclaje para reducir la cantidad de inducciones a nuevos miembros del equipo. Las conversaciones de seguimiento de los productos desarrollados podrán ser más productivas. 

Realiza siempre tu guía de estilo

Para concluir, debemos considerar siempre realizar una hoja o guía de estilo independiente del tiempo que esta nos tome. De esta forma podemos realizar un trabajo más fluido con nuestros desarrolladores. Además, nunca olvidar realizar un QA de diseño, este consiste en probar los tamaños de tipografía que se especifican en algún sitio ya existente. De esta forma podrás revisar su proporción, tamaño, etc. 

Considerando todas estas opciones, evitaremos que el desarrollador trabaje al “ojo porciento”.

*SVG: (Scalable Vector Graphics) formato vectorial muy útil para su uso online por su flexibilidad y capacidad de ofrecer gráficos de alta calidad.

 

Referente:

La guías de estilo en el diseño web (UI/UX) – FMKR

Acerca del Autor

Investigamos las tendencias en proyectos y estrategias digitales para complementarlas con nuestra experiencia en artículos informativos. Nuestro objetivo es aportar al desarrollo del área, discutiendo la efectividad de las tecnologías y técnicas aplicadas.

Agregar un comentario