Memela - una aplicación para dibujarPortafolio
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.
Saludos Mark, muy buen proyecto y bastante divertido debo decir. Keep up the good work!
Teaser de un proyecto en el que estoy trabajando:
http://memela.com/100/
Lo primero que se me vino a la mente al jugar con Memela, fue recordar a un apreciado colega que dijo alguna vez "La calidad de un diseñador se mide por lo que hace" (o algo así). Todo un "doer".
Está muy chido. No me jaló la "repintada" al regresar a la liga,pero supongo que fue porque lo estuve usando en FireFox (parece un problema en la manera en la que estás guardando y redibujando los "meme-pixeles"). En IE no jaló :p
No entendí lo del menú radial, si Memela es para dibujar, a meeeenos que en su próxima versión ya incluyas selección/clustering por color para activarlos como vínculos a otros canvas, aumentar la "resolución" y entonces hacer prototipos en Memela. Súper! Ya lo estaré esperando. Oh, creo que te referías a brindar el menú en forma radial. No importa, haz un Memela linked-animation version de cualquier forma :D
Saludos y que continúes con el proyecto!
La verdad es que es muy chevere y entretenido. me demore bastante, casi como una hora manoseandolo, full recomendado.
Creo que también quisieras algunas recomendaciones y pues si tengo algunas sugerencias.
No hay un botón de guardar tus creaciones ni para volver a editar tus creaciones http://memela.com/182/ por ejemplo no pude corregir esto que paso.
O de descargar en buena resolución para posibles y futuros proyectos de diseño.
El control tiene solo un paso de retroceso.
Pero a pesar de todo fue una buena forma de perder el tiempo, en el mejor de los sentidos, claro. Si es posible me gustaría que me mandaras la versión terminada.
Una tipo en este estilo me suena mucho.
Como se pierde el tiempo con el juguete este...
Ayuda pido a Juegos anonimos.
Saludos.
Juan
Me ha gustado mucho Memela, todavía tengo un juego de estos de mi sobrina y a veces hago formas para relajarme o evadirme, qué bien poderlo tener siempre a mano en Internet para poder jugar.
Enhorabuena :)
Excelente idea. La paleta de colores que utilizas es increíble!
Gracias
Muy bueno tu blog! Gracias por compartirlo!
Que recuerdos!! el fisico lo tuve yo de joven! jeje gran post :P
Hola buenas,navegando me he encontrado con tu blog y te doy mi sincera enhorabuena por la originalidad aportada y el contenido de calidad.
El proyecto Memela es muy entretenido creía que estaba hecho con flash,luego he visto el codice y lo he flipao con tu permiso lo he compartido en el feisbuk.
El post de utilizar los atributos de upper para no liarla en los titles con el rss detalle que no conocía, thanks.
Un saludo.
De pequeño tenía uno yo tambi´ne
hols chamacos
Están desapareciendo tus pixeles. En memela siempre se pinta, la goma en realidad es el color del fondo.
what's means?
yes! its De pequeño tenía uno yo tambi´ne.
es elcolor del fondo.
Bonito juguete, no conocía ni siquiera el de los años 70's (a pesar de mi edad), pero parece una fuente de inspiración y una herramienta digital para artistas. Yo también espero que compartan algunas creaciones hechas con este juguete.
Pues me parece una idea muy original, ademas ahora lo retro esta de moda.
Podria tener mucho exito
HOLA. Tu programa me parece genial creo que es una manera muy básica de trabajar el diseño y puedes lograr buenas cosas.
Voy a armar un proyecto de creatividad para alumnos de universidad y les pediré que experimenten con este software ¿qué te parece? Trabajo con ellos y creo fielmente en que al inicio de sus estudios deben trabajar con elementos básicos que les exijan usar aplicaciones limitadas, si lo podemos decir de alguna manera, pero versátiles.
Excelente proyecto.
Por cierto, en Google Chrome funciona muy bien.
Pufff! Esta buena esta app!
Definitivamente le dara una prueba a memela!
Saludos!
Muy interesan te gracias por la publicación seguiremos mirando
Mark, vives?
Los felicito siguán publicando
Muy interesante gracias y siguán publicando
Gracias siguán publicando felicitaciones buena publicación
Esta información es muy valiosa gracias y sigan publicando
Hola estuve revisando tu blog y me parece muy interesante y entretenido, sobre todo que la información es detallada y precisa, espero que sigas posteando más temas para informarnos y comentar.
Muy buena información! sigue posteando contenido tan interesante
Gracias siguán publicando felicitaciones buena publicación
Excelente proyecto, definitivamente una muy buena iniciativa, éxitos.
Pues he probado la herramienta, y tengo que darte la enhorabuena.
Saludos
iPad! iPad! iPad!
Yo de pequeño tenía una tabla así, y ahora que soy padre me da gusto encontrar esta aplicación para poder enseñársela a mis hijos y que dejen liberar su imaginación.