Universitat Oberta de Catalunya

Diseño de la interfaz de un software de gestión del color para la industria cerámica

Asignatura: TFG-Creatividad Gráfica, Grado en Multimedia

Consultor y profesor: Pere Báscones Navarro / Laia Blasco Soplon

Cuando empece con el TFG tenía claro que quería hacer algo relacionado con el trabajo que estaba realizando en una pequeña empresa que había creado hacia poco tiempo atrás.

Tenía la necesidad de crear la interfaz de un software que estábamos desarrollando para dicha empresa, junto al Instituto de Tecnología Cerámica, ITC, www.itc.uji.es así que pensé que sería buena idea aunar sinergias y decidí que iba a realizar el TFG creando la interfaz de dicho software.

Quería realizar un trabajo que cambiara el aspecto de la interfaces que se estaban utilizando hasta este momento en los software de gestión del color, así que parte del proceso consistió en la búsqueda de documentación sobre las tendencias gráficas en interfaces.

Una de las dos tendencias más implantadas. En este caso vemos el ejemplo de Skeuomorfing.
Una de las dos tendencias más implantadas. En este caso vemos el ejemplo de Skeuomorfing.
Una de las dos tendencias más implantadas. En este caso vemos el ejemplo de Flat-design.
Una de las dos tendencias más implantadas. En este caso vemos el ejemplo de Flat-design.

Etapas y retos

Una de las primeras etapas a realizar fue la definición de los objetivos principales, que fueron los siguientes:

    • Creación de un diseño de interfaz para el nuevo software Krome Ceramics, que transmita de forma visual, el lenguaje del sector cerámico.
    • Creación de una presentación para la promoción del sistema Krome Ceramics, que incluya las nuevas ventajas y funcionalidades del mismo y a la vez transmitir y potenciar la marca Digit-S.
    • En ambos casos, será también objetivo prioritario y fundamental en el desarrollo del proyecto aplicar la innovación y la creatividad en el desarrollo de los puntos anteriores, como elementos base sobre los que se vertebrará la idea.

En una primera fase se diseñó la arquitectura de la aplicación, esto se realizó con el programa OmniGraffle, que ha sido utilizado en todo el trabajo del TFG, para los flujos de trabajo y para los wireframes.

Vemos el flujo general de trabajo del programa:

Figura 3

A continuación de definieron las pantallas que se iban a diseñar, que fueron las más importantes de la aplicación y se realizaron los diseños en Lo-Fi.

Para ello han sido tenidos en cuenta los estudios sobre el diseño de interfaces. En este punto cabe resaltar el libro Diseño Inteligente.100 cosas sobre la gente que cada diseñador necesita saber.

En la imagen siguiente, podemos ver una de esas pantallas, que incluyo aquí por ser una de las más significativas y que le da el carácter cerámico a la aplicación:

Wireframe de la pantalla Nuevo MD
Wireframe de la pantalla Nuevo MD

Seguidamente realice el test de usuarios, presentándoles una versión de la pantallas en Hi-Fi, con ellas realice la simulación de las acciones que se debían realizar.
Quizá hubiese sido mejor realizar una simulación con un programa del tipo Mockflow, tal y como me recomendó mi consultor.

Las conclusiones de esta etapa fueron aplicadas al diseño diminutivo de la interfaz en Hi-Fi.

En esta fase, también se tuvieron en cuenta la documentación que se busco respecto a la tendencias actuales en interfaces, tal y como ya ha sido mencionado anteriormente.

También se hizo un estudio sobre el estilo gráfico y se definieron los colores, elementos gráficos e iconos que serán utilizados en las diferentes pantallas.

Tanto este trabajo, como el diseño final de las pantallas fueron realizadas en Adobe Illustrator.

Medidas
Medidas
Color del texto
Color del texto
Paleta de color
Paleta de color
Medidas de los iconos
Medidas de los iconos
Elementos gráficos
Elementos gráficos

Ya con todos elementos definidos, pasé al diseño final de las pantallas definitivas, que como explicaba anteriormente están diseñadas con Adobe Illustrator.

Esta fue la fase definitiva la conclusión del proyecto y en la que se aplicaron todos los conceptos desarrollados durante todas fases de desarrollo.

Pantalla de Modulo Decorativo
Pantalla de Modulo Decorativo

Conclusiones

Este proyecto, como ya ha sido explicado con anterioridad, estaba enfocado a conseguir una interfaz gráfica para un software de gestión del color para la decoración digital en en sector cerámico.

Ello ha llevado a la necesidad de realizar, no solo un análisis de las tendencias en cuanto a diseño de interfaces que en este momento se están dando en este tipo de productos, o de cualquier otro que pueda ser aplicado en este desarrollo, si no también a realizar un estudio, tal y como se presenta en el resultado de este trabajo, sobre todo el desarrollo del programa, para que la interfaz fuera aplicable a las necesidades del mismo.

Para ello, se han debido desarrollar los apartados de la Arquitectura de la Información y de Usabilidad, dos puntos que le han aportado envergadura al proyecto y sin los cuales no hubiese sido posible, llegar a un diseño optimo del mismo.

Ha sido un reto importante la inclusión de estos dos puntos mencionados, pero los resultados conseguidos permiten decir, que ha valido la pena, puesto que ha mejorado ostensiblemente la idea inicial, aportando solidez a la propuesta y permitiendo que el resultado se ajuste mucho más a los objetivos planteados.

Finalmente añadir que la posibilidad de realizar este proyecto me ha permitido replantear algunos conceptos que pensaba claros antes de empezar, como por ejemplo el estilo gráfico de la interfaz y eso creo que ha enriquecido mucho el resultado final.

Un comentario

Deja un comentario

  1. Hola Joaquín,

    Muy interesante el artículo. Si bien entendí se trata del desarrollo de una aplicación para escritorio y no de una web, y aquí me surge una duda referente a la programación de la GUI, ¿se llevó a cabo usando algún tipo de framework? o ¿podrias hablar de la librería gráfica que se utilizó?

    Muchas gracias

    Responder

Deja un comentario