Diseño del Menú de Ceibal-Chess

Uno de los elementos en los que intenté hacer más énfasis durante la presentación de Ceibal-Chess fue como prácticamente todos los elementos del programa se fueron desarrollando en forma incremental e iterativa, donde partíamos realizando una implementación simple de una idea que nos parecía buena, y luego la íbamos refinando de a poco en varias iteraciones, hasta llegar a una versión que nos dejara satisfechos.

Este fue el caso para el diseño del menú del programa, el cual permite al usuario (niño) seleccionar el modo en el cual jugar, ver quién realizó la aplicación o bien, salir de ella.

Durante las primeras 3 semanas del proyecto, el desarrollo se enfocó principalmente en el ajedrez mismo: dibujado del tablero y de las piezas, implementación de las reglas del juego, interacción con el usuario e integración con la Inteligencia Artificial. En aquellos tiempos, el juego debía configurarse mediante línea de comandos o bien editando el código.

A medida que las diversas áreas del “core” comenzaron a alcanzar un determinado nivel, se comenzó a implementar una versión inicial del menú, la cual pueden ver en la siguiente figura:

From Ceibal-Chess

El menú se dibujaba completamente por código, utilizando las primitivas de pygame. En esta primer fase nos interesaba que el menú estuviera y se pudiera utilizar para configurar el juego. La parte visual tomó un segundo plano, si bien era claro que necesitábamos mejorar el aspecto.

Tras contactar a Jurema -nuestra diseñadora (¡que importante es siempre tener un diseñador!)- comenzamos a disponer de imágenes y arte que pudiéramos utilizar para mejorar el aspecto visual. En esta segunda fase simplemente se intentó mapear el arte sobre el menú, realizando las adaptaciones al código necesarias.

El resultado fue menos que óptimo, si bien mejoraba la apariencia.

From Ceibal-Chess

Como bien mencionó Jurema, las diferencias se debían principalmente a la desconexión entre el diseño y el código. El código debía realizar varias adaptaciones al arte para ajustar sus tamaños, reduciendo mucho su calidad. Se puede notar especialmente en los bordes del fondo violeta del menú, el cual era inicialmente más ancho que alto y el programa debía estirarlo verticalmente para que cubriera el tamaño que el menú tenía. Esto causaba que los bordes se vieran borroneados.

Para la siguiente versión, del menú fue importante basarnos en las omisiones de la fase anterior para corregir los desvíos. Algo tan simple como especificar el tamaño que el menú ocupa en pixels ya permite coordinar esfuerzos entre las distintas disciplinas (programación y diseño) para generar un mejor producto.

From Ceibal-Chess

Se determinó el tamaño que la imagen de fondo debía tener para evitar tener que estirarla, así como se estableció que el texto de los botones estaría centrado, no estilo viñetas. Asimismo se agregó un complemento blanco al fondo del menú, el cual mejora mucho la apariencia.

En este punto ya sabíamos que el menú nos gustaba así, y habiendo establecido su apariencia general, una cuarta iteración nos llevó a la versión actual del menú donde principalmente se agregaron detalles que “endulzan el ojo” (eyecandy). Probamos varias ideas, pero siempre respetando la evolución realizada en las fases anteriores. En este caso decidimos experimentar haciendo trasparente el fondo violeta del menú, el cual le da un mayor sentido de integración con el resto de la aplicación.

From Ceibal-Chess

En esta imagen también puede verse que se centró verticalmente el texto dentro del fondo de los botones.

Probablemente se disponga de una fase más de experimentación, buscando agregar detalles visuales al menú, pero conservando el resultado logrado a través de las distintas iteraciones.

Cabe destacar que el menú ya era funcional desde su primera versión, pero el proceso iterativo permitió producir algo que además de ser útil, fuera lindo a la vista. Este es un ejemplo de como partiendo de una versión sencilla algo que aparece para subsanar una necesidad puntual (“necesitamos un menú”), se puede ir iterando haciendo leves mejoras hasta llegar a una versión funcional y además agradable. Este siempre ha sido el espíritu detrás de este proyecto.

Recuerden que pueden bajar el último snapshot de Ceibal-Chess desde:

• http://code.google.com/p/ceibal-chess