Memela creada por @doctoraw
Nota introductoria: no lo he probado en Internet Explorer, pero estoy casi seguro de que no funciona. Por el momento es un proyecto personal y no tengo interés en hacerlo funcionar bajo IE. Si necesitas una recomendación Google Chrome proporciona la mejor experiencia.
La semana pasada lancé memela, una aplicación web para dibujar inspirada en Lite-Brite, un juego de los 70's en el que colocabas pines sobre una caja de luz para crear un dibujo luminoso. Este es el juguete:
Te recomiendo que te pases primero por memela primero para que este texto tenga sentido.
Comencé creando una réplica de Lite-Brite, con pines en 3d que creaban halos de luz, en una paleta de siete colores y bajo una retícula de 44 × 32 pines. Ya estaba bastante avanzado cuando me di cuenta de que las limitaciones del juego original no aplican al mundo digital--sería como si la interfaz Skype fuera un teléfono de rueda. Y para ser sincero, sólo podías crear mierda.
Así que comencé de nuevo con una serie de preceptos:
Cuando das click sobre el lienzo, siempre debe pintar algo
Las aplicaciones para dibujar están basadas en modos, cuando seleccionas el pincel estás en modo de dibujar, cuando seleccionas el lazo estás en modo de selección, y cuando seleccionas la goma estás en modo de borrar. Esto es bastante poderoso, pero es muy desconcertante cuando no puedes cambiar el cursor para indicar el modo. Comienzas a hacer click esperando pintar pero, ups! Están desapareciendo tus pixeles. En memela siempre se pinta, la goma en realidad es el color del fondo.
Extendiendo esta filosofía, aún cuando pintas sobre el mismo color verás cambios. Si pintas una pared y pasas la brocha dos veces sucede lo mismo. Además le da un aire analógico imperfecto bastante chulo.
La paleta de colores debe de estar a la mano y en contexto
No sé qué pasa con las aplicaciones de dibujo y retoque, pero la paleta de colores siempre está escondida, a pesar de que es una de las herramientas más utilizadas. Además, se abre en una ventana nueva, completamente fuera del contexto de la imagen.
Seguramente habrás ajustado el color de un texto sobre fondo oscuro, solo para descubrir que el color que elegiste no se parece en nada a lo que querías. Con el tiempo aprendes a elegir el color en relación a lo que ves en tu lienzo y no a lo que ves en el selector de color.
Adicionalmente, quería limitar la paleta de colores, no puedes elegir colores muy oscuros, porque borrarías los grises que te sirven de guías. Fue difícil de implementar pero aprendí mucho en el proceso.
Los colores que has usado recientemente deben de estar a la mano
Otra de mis frustraciones con las herramientas de dibujo es que no tienes los colores que has usado recientemente a la mano. Pones un texto en naranja, cambias el color, pero luego lo quieres reutilizar el naranja y ups! tienes que elegirlo con el gotero, pero como el texto está antialiaseado te da un color distinto, y tienes que copiar los valores numéricos o hacer zoom y seleccionar el pixel que no tiene antialias.
El teclado no es un ciudadano de segunda clase en las aplicaciones web
Si implementas atajos de teclado en tu aplicación web, es posible que solo el 5% de tus usuarios lo utilice. Pero será el 5% de tus usuarios más intensivos y estarán agradecidos. Además es relativamente fácil de implementar, y en un aplicación de dibujo no interfiere con la función normal del teclado (introducir texto).
Deshacer es algo que vale la pena implementar
Otra cosa que se hecha mucho de menos en las aplicaciones web es el deshacer. Aza Raskin explica el caso en Never use a warning when you mean undo.
¿Y para qué sirve?
Tengo pensado usarlo como un espacio dónde hacer experimentos de interfaz. Por ejemplo, he querido escribir acerca de menús radiales, pero ya no creo en escribir cosas que no puedes demostrar, así que Memela es un buen espacio para implementarlo, por ejemplo.
Pero Memela está inspirado en un juguete, y es un juguete también. Así que úsalo para divertirte, y si creas algo que te guste, compártelo en los comentarios. Sólo tienes que dar click en "Share your creation" y copiar el enlace.