Hace unos años estudié un master de ilustración que duró 3 años, en los últimos 6 meses tuvimos que hacer un proyecto final que consistía en hacer una especie de libro de arte de un proyecto ficticio. En mi caso hice un proyecto en torno a un libro infantil ilustrado llamado "Mas allá de la lavadora"

Este proyecto lo hice en 2020 ¿Y por qué lo subes ahora, 5 años después? Pues por qué se me olvido hacerlo en su momento, y por qué hace 5 años no existía esta web jaja

La verdad es que me gusta revisitar este proyecto, trabaje muchísimo en él y estoy orgulloso de lo que hice. Obviamente, a día de hoy podría hacerlo mejor, pero gracias a este gran esfuerzo que hice en su día soy el artista que soy hoy.

La portada que veis para presentar el proyecto es un re-dibujo de la que hice en su día, me apetecía darle un pequeño homenaje. Desde ahora todo lo que veréis es trabajo que hice en 2020.

La idea principal del libro era que una niña y su gato viajaran a través de una lavadora a un mundo de fantasía el cual estaría poblado de criaturas hechas de calcetines.

Esta idea surgió con una experiencia de mi infancia donde más de una vez me encontraba a mi gato durmiendo dentro de la lavadora.

Aquí os voy a dejar algunas de las páginas del proyecto, son muchísimas asi que solo pondré unas pocas que si no, esto es eterno jaja

Como podéis ver hice tanto diseño de personajes, como de fondos, también realice ilustraciones completas e ilustre algunas páginas del libro. Del libro en principio hice el storyboard completo, por la falta de tiempo no pude ilustrarlo entero, pero sí hice algunas páginas terminadas.

Finalmente, os voy a dejar pro aquí un vistazo rápido a todas las páginas que componían el proyecto, que eran unas 112 en total. Como decía al principio, estoy muy orgulloso de lo que hice en su día.

¡Muchas gracias por ver hasta aquí!

Halla por 2020, en plena pandemia, Victor Reiner me propuso mi y a unos amigos jugar un one-shot de Dragones y Mazmorras. Ese supuesto one-shot terminó durando casi 2 años. Tras esa campaña hemos jugado y terminado muchas más, con diferentes masters e historias.

¿Por qué os estoy contando todo esto? Pues porque 5 años después de esa campaña me he decidido a hacer un libro de arte del mismo. La razón de hacerlo es, por una parte, para recopilar todos los dibujos que hice en su día, y por otra, para no olvidar esa historia.

Con los años queramos o no se nos van olvidando las cosas, más aun si seguimos llenando nuestra cabeza de nuevas campañas con sus respectivas historias, así que la mejor manera de no olvidarlo es hacer un libro que nos ayude a recordarlo.

Con esta idea en mente, en enero de este mismo año me puse a trabajar en ello, abrí Indesing y me puse a escribir y a añadir todos los dibujos que hice en su día. Pero no solo me quede con los dibujos antiguos, sino que para acompañar momentos importantes de la historia, decidí hacer nuevas ilustraciones.

También le pedí al resto de jugadores y al máster, que aportaran su granito de arena, escribiendo sobre sus personajes, sobre momentos concretos de la historia y comentarios aquí y allá.

El libro con la tontería empezó a tener muchas páginas y al final entre hablar de los personajes, contar toda la historia, el epílogo y añadir las ilustraciones que no encajaban, en otro lado el libro termino teniendo 120 páginas.

Maquetar todo eso fue entretenido a la par que estresante, repase una y mil veces el texto para que no tuviera errores, añadía y cambiaba la disposición de las ilustraciones varias veces hasta estar a gusto con el resultado.

Hacer todo esto (en mi tiempo libre) me ha llevado aproximadamente 6 meses y sinceramente estoy muy contento con el resultado.

Ahora bien, ¿se ha quedado todo en un pdf olvidado en una carpeta de mi ordenador? ¡Para nada! Pude imprimir este libro en tapa dura y con un tamaño de un A4 en horizontal.

Desde ahora mis compañeros y yo podremos revisitar esta campaña siempre que queramos, ya que nos acompaña siempre en nuestras estanterías.

Por último me queda añadir que este es el primero de muchos libros, ¡estad atentos a mis siguientes publicaciones!

¡Os dejo con un video del librito!

Cuando estaba en el master de ilustración, uno de los consejos que me dieron para mantener una rutina de dibujo era coger un cuaderno y apuntar una cosa aleatoria en cada página (lo ideal es que esto lo hiciera otra persona) y cada día dibujar lo que hubiera en la página.

Este consejo me resulto muy útil para mantener esa rutina, para tener siempre algo que dibujar, y sobre todo tener algo diferente que dibujar. Pues es muy fácil caer siempre en lo mismo por temor a hacerlo mal o por simple costumbre. Al final este consejo se lo doy también a mis alumnos, pero algunos de ellos trabajan solo en digital, por lo que de ahí vino la idea de diseñar una app que supla el cuaderno.

El concepto de Sketch With Me! es ese, cada día que entres en la app te dará una idea de dibujo y tú podrás dibujarlo en tradicional y subir una foto o podrás dibujarlo en la propia app. La app se llama "Skecth with me!" no solo porque suene bien, sino por la idea del "sketch", o sea ser, boceto. La app incentiva más trabajar en ideas rápidas para soltar la mano, más que en trabajos superacabados. Aunque al final eso dependerá de cada persona como quiera hacerlo.

Tras todo este texto comentando la idea, empecemos a hablar con el diseño, y lo primero pues el logotipo. Aunque es verdad es mas un lettering del nombre de la app.

En general, la idea del diseño es que sea algo simple para que no haya demasiadas distracciones. Por eso los colores que predominan son en escala de grises junto con algún color de acento en azul.

Principalmente, plantee esta app para usarla desde el móvil, ya que es algo que tenemos siempre a mano y que encima los más jóvenes suelen usar mucho para dibujar. Por lo que nuevo un diseño mobilefirst y luego, cuando ya tenía los wireframe en alta, hice el responsive para tablet y pc.

Antes de hacer los wireframe en alta, hice una versión en baja en un cuaderno y luego otra en media ya en Figma. El cual en verdad luego no cambio mucho cuando lo traspase a la versión en alta. Ajuste alguna cosilla, los colores y añadí las imágenes.

Por último me quedaría añadir, que todos los dibujos de bocetos que veis por en los diseños han sido hechos por mí. Me lo pasé muy bien dibujando gatos con sombrero!

En fin, sin mucho más que decir, muchas gracias por ver hasta aquí, y nos vemos en el siguiente proyecto!

Hace un tiempo diseñé una baraja de póquer, a la cual le podéis echar un vistazo por aqui, y me gusto mucho todo el proceso y sobre todo, ver el resultado final. Desde entonces tuve el gusanillo de hacer mi propio tarot, pero un tarot requiere muchísimo más trabajo que una baraja de poquer y además no sabía sobre qué hacerlo.

Tras darle mil y una vueltas me decanté por hacerlo de las campañas de rol (Dragones y Mazmorras) en las que había participado y así añadir a todos los personajes posibles, tanto los míos como los de mis compañeros.

El Tarot cuenta con 22 Arcanas mayores, más luego las 56 de las Arcanas menores. En un principio solo iba a hacer las arcanas mayores, pero ya que me ponía hacia la baraja entera. Fue todo un viaje pensar que personaje iba a ocupar cada carta, tenía que elegirse bien para que tuviese sentido con el significado de las cartas.

Con el diseño de las arcanas mayores he intentado basarme en los diseños clásicos y añadir los elementos que la hacen reconocible. No he podido hacerlo en todas, pero sí en la mayoría, aunque llevándomelo a mi terreno, por supuesto.

Tras acabar esta 22 cartas tocaba lanzarse a hacer las aracnas menores, que no son otra cosa que cada palo de una baraja típica española junto con su jota, caballo, rey y reina.

Para cada palo quise que representara un objeto importante de alguna de las campañas, siendo:

Oros: una máscara de dragón dorada.

Copas: un bol que se utilizaba para mandarle ojos a un dios de la muerte.

Espadas: una espada de que su filo es de luz.

Bastos: un bastón de una calavera roja y atestado de plantas.

Como detalle extra, quise que hubiera una diferencia de color en pares: copas y bastos tienen el rojo y espadas y oros tienen el dorado.

Finalmente, quedaba la parte tocha de diseñar de cada palo que eran la figuras. En este caso quise hacer como las cartas clásicas y hacer el diseño del personaje en medio cuerpo e invertido. Pese a que ambas partes parecen iguales, tienen una pequeña diferencia. ¿Podrías ver todas las diferencias?

Finalmente, solo quedaban por hacer el diseño del reverso de las cartas y la caja. Para la caja simplemente tomé el diseño de la carta de La muerte, el diseño del reverso y le añadí el Lettering y algún detalle extra.

Para el reverso aproveche el diseño de Radiante que Flipas, que es el grupo de rol que tengo con mis amigos, y lo use como base para hacer el diseño.

En fin, muchas gracias por ver hasta aquí, este ha sido de los proyectos que más tiempo me han llevado, pero a la vez de los que más orgullo estoy. ¡Ojalá os haya gustado verlo tanto como a mí hacerlo!

Hace unos años, Victor Reiner y yo montamos nuestro pequeño estudio de videojuegos al cual llamamos CocidoWare. En su momento hice un logotipo que para lo que se iba a usar era suficiente, pero actualmente, tras otra Ludum Dare exitosa y embarcados en un nuevo proyecto de videojuego más ambicioso, he decidido darle una vuelta al logo para que sea más profesional.

En un principio queríamos mantener el amarillo, pero que todo sea amarillo es problemático para la visibilidad del mismo y tome la decisión de añadir un azul para darle contraste gracias a ser su complementario y a usar un tono oscuro.

Con la paleta decidida toco hacer muchos bocetos con diferentes ideas hasta dar con la que más nos gustaba, al final los decantamos por la versión más tontorrona y divertida eligiendo al que es un personaje con el estilo de animación de los años 20.

Ya con el logo decidido me lo llevé el Illustrator y allí le di caña para que quedara bien bonito y también le añadí el texto. Estamos bastante contentos con el resultado y tenemos ganas de verlo en nuestros próximos videojuegos.

¡Muchas gracias por leer hasta aquí y nos vemos a la próxima!

Una vez más me he apuntado a una Game Jam con Victor Reiner, en esta ocasion ha sido la Ludum Dare 56 con la temática "Tiny Creatures".

Por si alguien no lo sabe, una Game Jam es un evento donde se reúnen los desarrolladores para realizar un videojuego en un espacio muy corto de tiempo, en este caso eran de 72 horas. Otra parte esencial es que las Game Jam van en torno a un tema, que se suele revelar al instante que empieza la Jam. En el caso de la Ludum Dare, hay una lista previa con diferentes posibilidades del tema que van saliendo a votación, pocos días antes ale la lista final, que se queda entre 10-20 posibles temas.

Por lo tanto, cuando el viernes a las 12 de la noche revelaron el tema de Tiny Creatures ya teníamos algunas ideas sobre la mesa. Por lo tanto, cogimos la que más nos gustaba y empezamos a darle caña. La idea giraba en torno a hacer un juego en vista isométrica sobre un ratón que quiere robar comida sin que los dueños de la casa le pillen

Para empezar hice unos assets rápidos y sencillos para que Victor los pudiera usar de base para poder hacer su parte de programación. Luego, según iban saliendo las cosas se iban sustituyendo todo hasta llegar al resultado final.

Tras esto tocaba buscar un estilo visual que funcionase y fuera resultón. Para mí es muy importante la paleta de color y fue de las primeras coas que determiné. Luego con eso claro realice varios bocetos de los mapas que íbamos a meter para asi poder darle caña a los assets definitivos.

Estoy bastante contento con como han quedado los assets, en principio todo ha quedado como quería a excepción de las paredes y los suelos, los cuales daban problemas luego a la hora de crear los mapas en Godot. Por esa razón al final no pude poner diferentes colores para las paredes como había pensado en los bocetos, pero bueno al fin y al cabo esto es una Jam y hay muy poco tiempo para hacer todo y toca sacrificar cositas.

Igual decidir hacer un juego en isométrica 2D no fue la idea más brillante cuando ni Víctor ni yo teníamos la experiencia en ello, por mi parte no solo tuve problema con las paredes, sino con los personajes. Una vista isométrica implica dibujar al personaje en muchas direcciones, con el ratón no tuve demasiado problema, ya que al ser tan pequeño le hice directamente sin patas, por lo que no tiene mucha animación que digamos. El problema vino con los personajes humanos, me curré el movimiento andado de un personaje en todas las direcciones, el cual al final tuvo que ser descartado debido a que iba a ser un problema implementarlo en el videojuego....

Al final simplemente añadimos los humanos en una posición fija que hacían un ligero movimiento para mirar en otra dirección, pero bueno, aunque se perdieran muchas horas de tiempo en ello, al menos me sirvió para aprender.

AH! También hice los assets de la comida que se podía comer el pequeño Mouky, tenía que haber de 3 tipos distintos de tamaños y por supuesto, tenía que haber un churro.

Además de todos los assets para mí, es muy importante que la interfaz quede bonica, ya que le da mucho empaque al videojuego. Hay cosas que me gustaría haber pulido más, pero siendo una Jam el tiempo es limitado y da para lo que da, aun así, estoy muy muy contento con el resultado final.

Si has leído hasta aquí imagino que te apetecerá echarle un vistazo al videojuego, así que te dejo por aquí un enlace para que puedas disfrutarlo!

https://victor-reiner.itch.io/sneaky-mouky

Ya era hora de tener un logotipo bien chulo que me represente. Hacía unos años realicé un logo (más bien era solo el imagotipo) que era lo que está utilizando hasta ahora, pero estaba un poco pocho y ya le tocaba una renovación.

La verdad es que la idea antigua me gustaba y no quería perderla, así que he trabajado sobre ella para poder mejorarla. Esa idea consistía en dos cuernos entrelazados. ¿Y por qué dos cuernos? Pues porque siempre dibujo a mi avatar con ellos. (Me dibujo con cuernos por qué me gustan los Onís y es como si fuera uno :D)

Lo que más ha cambiado con respecto al logo antiguo es que ahora he añadido mi nombre. Para mis ilustraciones suelo usar el pseudonimo de "Shubi" que es con lo que las firmo, pero con los años he ido usando cada vez más mi nombre real. Aunque bueno, no me apellido Lápiz, ¡eso es una fusión de mis dos apellidos Lanas y Pizarro!

Sí, lo de Lápiz ha sido pura casualidad. En verdad no me gustan tanto los lápices, soy más de portaminas 👀

En fin, sigamos, con el imagotipo en sí lo único que hice fue hacerlo más correcto para que quedase más redondo y para que se formase una doble espiral. Las que tienen los cuernos de manera individual y la que forman al juntarse.

Lo siguiente fue buscar una tipografía que me gustase para usarla de referencia (y para poder usarla aquí y allá), poner muchas guías y trazar mis propias letras.

Sí, no hay mucha diferencia, es solo un poco más limpia y correctita. Es que la Organic Brand me gusta mucho y no quería cambiarla mucho.

Por último, ya solo me queda mostraros una diapositiva donde se ve bien bonito todo, con la paleta de color, el concepto y demás.

Estoy bastante contento con el resultado final, pudiendo mantener la idea original pero mejorándola. Quién sabe, igual en unos años la vuelvo a cambiar, pero de momento esto me representa y eso es lo que importa.

¡Muchas gracias por ver hasta aquí!

Vengo con un nuevo proyecto, en esta ocasión es algo un poco distinto a lo que suelo hacer. Generalmente, intento pensar en alguna idea para alguna aplicación o página web, pero esta vez quería hacer algo más práctico, así que me animé a diseñar como sería una página web de un instituto.

¿Y por qué una página web de un instituto? Pues la idea me vino porque en mi anterior trabajo tuve que diseñar una web para becas universitarias y dentro de ella se mostraban distintas universidades. Al ser temas internacionales investigué sobre las webs de dichas universidades, y la mayoría tenían unos diseños bastante chulos (y siempre con el tema del deporte por delante, están como locos cons us mascotas universitarias jaja). Entonces me puse a ver lo que teníamos aquí en España, pero en vez de universidades con institutos, y la mayoría dejan mucho que desear. Tienen un diseño muy antiguo y la información es bastante complicada de ver, no son nada llamativas y es cuanto menos tedioso navegar por ellas.

Así que de esta manera nació el IES Caleidoscopio, un supuesto instituto que cuenta con la modalidad de artes, entre otras. Por qué ya que voy a hacer algo de esto, que menos que sea con algo que me recuerde al bachillerato que hice.

Con un nombre como Caleidoscopio, el logo tenía que recordar de alguna manera recordara uno. Para ello tomé mi iPad y con él, Procreate y las reglas de simetría me puse a diseñar. Tras un montón de pruebas terminé con la que acabó de mostraros. Como es un instituto de artes quería que tuviera varios colores, así que me decante por el morado, verde y naranja, ya que conforman una tríada muy agradable.

Hablando de los colores, pese a que en el logo hay 3 colores, el principal es el morado y el que más se puede ver a lo largo de toda la web. Los otros dos los he usado más como un acento en según que momentos.

Para el diseño de la página web he tomado de base el Ies Grande Covian (Estudie aqui!) para la información a mostrar, sobre todo porque yo no sé qué asignaturas existen ahora, como funciona la educación hoy en día, al final como cambian todo cada 4 años es un caos. También tomé de referencia el Ies Puerta bonita por su diseño, además de varias de algunas universidades estadounidenses o inglesas.

Os dejo por aquí algunas de las páginas que diseñe:

Esta vez me apeteció darle cariño a la parte del prototipado, así que os muestro un video dónde se puede ver como funcionaria la web:

Pues con esto sería todo, ha sido un proyecto sencillo pero muy divertido de hacer. Seguramente en un futuro haga más proyectos del estilo, donde tome algún tipo de web como por ejemplo una tienda o un evento de algún tipo y haga mi propia versión.

Muchas gracias por leer hasta aquí, y nos vemos a la proxima.

My culinary chronicle es una app que cumple la misma función que ese cuaderno viejo, donde apuntas todas las recetas, pero mucho más cómodo y con más fusiones (menos mal que tiene más funciones que un cuaderno que si no ya me dirás tu vaya birria de aplicación).

En verdad quería hacer algo bastante sencillo, mi intención es tener una app para recopilar tus recetas, algo propio y no una de estas aplicaciones donde se recopilan cientos de recetas de todo tipo que guardas en favoritos con la esperanza de hacer algún día (spoiler, no lo haces). Con My culinary chronicle apuntas tus recetas propias, esas albóndigas tan ricas que hace tu abuela, ese pollo al ajillo que hace tu madre o el secreto del asado que hace tu tío en su cumpleaños.

Con este dicho, voy a contarte como he diseñado esta app.

Empezando con lo más importante, un buen research, me descargué un montón de app del estilo, algunas cumplían lo que yo buscaba y otras se desviaban por el camino. Al final me decanté por estudiar estas 4 opciones, hice apuntes de lo que más me gustaba de cada una (también de aquello que no me gustaba) y con toda la información recopilada ya estaba listo para el siguiente paso.

Ahora tocaba ponerse con los wireframes, en esta ocasión los hice directamente en media, ya que tenía bastante clara la idea y me apetecía chapurrear ya de una con el Figma. Dentro de que son en media intente ser cuidadoso para que me diera una imagen lo más clara posible del acabado final.

Pues con todo esto hecho ya solo quedaba ponerse con los wireframe en alta, pero antes, como siempre, hay que pensar en una buena paleta de color. Esta vez es bastante sencilla, tomando el naranja como color protagonista y sin un color secundario, ya que lo veia innecesario en esta ocasión.

También aproveché antes de hacer los wireframes en hacer el logo, sé que no es tan importante hacerlo en este punto, pero me gusta trastear con ideas y bocetos, me sirve también para despejarme un poco de pintar pantallas y así estar más fresco para los siguientes pasos.

¡Por fin llegamos a los diseños finales! Mi intención ante todo era hacerla sencilla, ya que la idea es que resulte fácil de usar. Con My culinary Chronicle aparte de añadir recetas, puedes hacer listas de la compra y hacerte un menú semanal. Todo esto con la posibilidad de poder imprimir todo lo que hagas en la app para poder darle esa receta de frisuelos a tu amigo o poder imprimirte el menú semanal para colgarlo de la nevera y que lo vea toda la familia.

¡Oh no! Uno de los wireframes era tan largo que ha roto una de las diapositivas. Bueno, mientras que no se caiga creo que no pasa nada, ¿no? Llevad casco por si acaso.

Bueno, pues esto sería todo por este proyecto. Es algo sencillo, pero que me apetecía hacer, la idea de hacerlo vino de que estaba buscando una app para guardar mis recetas y ninguna de las que vi me convencía. Así que lo que dicen, si algo no existe, hazlo tú.

Pero vaya que esto solo existe en mi Figma así que creó que seguiré apuntando las recetas en un cuaderno que se cae a cachos.

Muchas gracias por leer hasta aquí y hasta la proxima :D

La galería de las Letras es un proyecto que surgió un poco sobre la marcha, no tenía esta idea y fue todo gracias a un curso que realice en Udemy.

Me animé a hacer un curso porque hasta ahora el único programa que había sido para diseñar los wireframes y demás elementos fue con Figma, pero quería saber utilizar más programas. Fue ahí cuando vi el curso de Carlos Arturo sobre Adobe XD. En un principio iba a ser solo aprender a usar la herramienta, pero dentro del propio curso tenía un proyecto para hacer una web sobre venta de libros. Fue ahí cuando me decidí a no solo seguir el curso, sino a tratar de darle personalidad y un sabor propio a la web.

Así que de esta manera nace "La galería de las LETRAS" la cual la centre en libros infantiles debido a que por mi parte de ilustrador he ilustrado varios libros y quería poder meter por ahí las portadas. Además de que podía tratar de hacerla más alegre y con colores cálidos y acogedores.

Para el logo la verdad es que me quede con la primera idea, una vez decidido el nombre tenía claro que la parte de "letras" iba a ser simulando los típicos cubos que utilizan los niños con letras grabadas.

Guía de Estilo

En esta ocasión solo voy a destacar el color, ya que es donde más he puesto de mi parte, debido a que buena parte del proyecto es bastante parecido al del curso.

Me decanté por rosas y amarillos para darle un toque alegre y amigable, aunque usando tonos no demasiado saturados para evitar que resalten por encima de las portadas de los libros.

Wireframes

Como esta vez estaba siguiendo para casi todo un tutorial directamente hice todo en alta, tanto la versión web como la móvil.

Como he comentado antes, las portadas que se ven son de proyectos personales de ilustración de libros infantiles, alguno de ellos podéis verlos por la web. También he añadido portadas falsas para rellenar, donde básicamente he cogido ilustraciones mías que veía que podían encajar como portada de un libro infantil.

Finalmente, os dejo por aquí los wireframes de la versión móvil.

Conclusiones

Me ha gustado mucho poder hacer un pequeño proyecto mientras aprendía a usar el Adobe XD, me ha resultado bastante fácil de utilizar y no he tenido mucho problema para aprender el programa. Al final casi todos los programas de adobe se parecen entre ellos y en cuanto sabes usar alguno el resto se aprende rápido. Ahora bien, me gusta mucho más utilizar Figma, es más cómodo y tiene más opciones.

No descarto emplear el Adobe XD para algunos proyectos y seguiré aprendiendo a usar el programa, pero eso, de momento, soy más de Figma.

Sheep Timer es un pequeño proyecto que me animé a hacer por puro gusto, quería hacer algo más pequeño y sencillo que no me llevara mucho tiempo y que fuera bonito. El "pomodoro" es una técnica de estudio donde te divides los ratos de concentración y de descanso en unos intervalos de tiempo específicos.

Lo primero que hice fue pensar en las posibles ideas de estética para el pomodoro, entre ellas tenía la típica de una planta que va creciendo, una gamba que estudia en un escritorio (por la gracia de cuando estamos estudiando nos encorvamos sobre la mesa) e incluso una referencia de los Simpson con los dragones chinos. Al final me decanté por la idea de una oveja a la que le va creciendo la lana y al final de la sesión, la "esquilas" y la lana que recopiles será una referencia para las estadísticas y poder ver cuanto has estudiado.

La idea es que puedas tenerlo en cualquier plataforma para poder usarlo en cualquier momento y de la mejor forma que se adapte a tu forma de trabajar/estudiar.

Guía de estilo

En esta ocasión no hay una gran cantidad de paletas de color, ya que lo que más llama la atención del color es el de las ilustraciones como tal.

Como he comentado antes, lo que más peso tiene son las ilustraciones, que aunque sean sencillas, ayudan a empacar bien todo y a crear un ambiente agradable.

Wireframes

Como siempre realice algunos wireframe en baja a boli en un folio y una vez hechos me lance directamente a los wireframe en alta, ya que en esta ocasión hacer los media me iba a retrasar más que otra cosa.

Para los wireframe en alta hice algunas variaciones para las versiones móvil, tableta y pc.

Y con esto ya he acabado de enseñar este pequeño proyecto, ha sido muy divertido y relajante de hacer, tengo ganas de hacer más cositas del estilo en un futuro.

Horocopia es una idea de Victor Reiner (el programador) el cual hace unos años hizo un bot de Twitter que estaba programado para subir horóscopos diarios. Tras conseguir bastantes seguidores nos animamos a hacer la app para aprovechar los posibles usuarios. El bot de Twitter y la app funcionan con una base de datos de los que se sacan los horóscopos diarios.

Research

Para el research comencé por investigar bien como funciona el horóscopo, los diferentes signos zodiacales y que caracterizaba a cada uno de ellos. También me di un paseo por la playstore y di con multitud de app que hacían lo mismo y otras que expandían los conocimientos y hablaban sobre cartas astrales y numerología. Así que con toda la información recopilada comencé a diseñar.

Guía de estilo

En su momento, cuando se hizo el Twitter yo realice unos diseños para que fuera más bonito y los he usado de base para el estilo general de la app.

Como en muchas ocasiones empezamos por la paleta de color, en esta ocasión me quise centrar en platas, dorados y azules marinos. He utilizado estos tonos, ya que el dorado y el plateado son colores que evocan a algo mágico y místico, mientras que los azules marinos nos recuerdan al cielo nocturno.

Seguimos con los diseños que hice de cada signo del zodiaco, tanto su versión simple como una más compleja. También hice las constelaciones que pertenecen a cada signo. Todo está hecho con una línea no excesivamente gruesa y con los bordes redondeaos para dar una sensación más amigable y cercana.

Finalmente, hice algunas ilustraciones cell shading y un poco minimalistas de los planetas y los elementos. A la hora de hacer los elementos los hice enmarcados en un círculo para que en el momento de tener todo junto armonizaran bien todo lo que hay en pantalla.

Wireframes

Antes de lanzarme a Figma siempre me gusta trastear un poco con boli bic y papel para poner unas primeras ideas sin preocuparme de márgenes, layouts y demás.

Con los wireframe en baja hechos es hora de ponerse con la versión en media, ya pensando más claramente donde va a ir cada elemento, la tipografía y su tamaño, y también ver si voy a necesitar hacer un icono. En esta ocasión los hice directamente con el fondo en negro debido a que tenía claro que en la versión final quería que tuviera un fondo oscuro, y de esta manera podía tener una visión más clara de como iba a quedar.

Con todo este trabajo hecho, ya solo queda la parte más divertida que es darle caña a los wireframe en alta y al prototipado.

En un futuro la app comenzará su desarrollo en la parte de programación, el día que esté publicada os pondré un enlace por aquí. Sin mucho más que decir, muchas gracias por leer hasta aquí.

La idea de Roll Counter nace un día cuando Victor Reiner (el programador) siendo máster de rol, en una partida presencial no tenía manera de controlar la vida de todos los enemigos de manera cómoda. Las app de contadores que había en la playstore eran demasiado básicas y tenían un límite de contadores que se podían añadir.

Así que con el pensamiento de “si algo no existe hazlo tu mismo” comenzamos a idear la app. Al principio iba a centrarse solo en llevar la cuenta de la vida de los personajes, pero ya que nos poníamos quisimos añadir varias secciones más para poder gestionar los espacios de conjuros, los rasgos de clase y raza y los objetos.

Research

Con todo esto en mente nació Roll Counter. Como es una app sencilla, el research se quedó en ver qué tipo de apps había en el mercado, hay varias por la play store, pero todas pecan de lo mismo, que es limitarte el número de contadores que puedes añadir.

De manera más especifica, hay algunas apps para gestionar tu ficha de personaje de rol, pero no conseguí dar con ninguna que hiciera lo que nosotros queríamos hacer.

Finalmente, tuve que repasar algunas cosas de la parte específica de rol, que concretamente nos centramos en Dragones y Mazmorras, por lo que estuve mirando bien qué razas, monstruos y objetos había para poder hacer las ilustraciones de los iconos que acompañarían a alguno de los contadores.

Guía de estilo

Siempre me gusta empezar pensando en los colores y en esta ocasión me decanté por usar de colores primarios unos azules desatúrdaos, debido a que a cada contador se le podrá asignar un color, por lo tanto, de esta manera no habrá una saturación de colores.

Realice multitud de ilustraciones para poder acompañar a los contadores y así poder distinguir mejor a que corresponde cada contador.

En esta ocasión tuve que realizar solo unos pocos iconos para representar los tipos de contador y alguna cosita más. Para todo lo demás utilicé el paquete de microsoft.

Terminando con la guía de estilo os enseño algunos de los componentes que poblaran la aplicación.

Wireframes

Aunque os haya enseñado primero la guía de estilo, en verdad lo comencé con los wireframes en baja. Los hice en un folio y directamente a boli para no andar borrando y corrigiendo mil veces. Pues solo quería ir pensando en unos primeros conceptos.

Tras tener unas ideas más o menos claras me puse con los wireframes en media tratando de colocar todo de una manera más definitiva.

Finalmente, solo quedaba hacer los wireframe en alta con su correspondiente prototipado.

Desarrollo

Con todo el diseño hecho, Victor Reiner comenzó con el desarrollo de la app, durante el mismo nos dimos cuenta de algunos pequeños errores que había en el diseño y lo fuimos ajustando para que todo funcionara mejor. Asimismo, cuando hubo una primera versión hecha, tanto yo como unos amigos estuvimos testeándola para comprobar si había algún fallo. Esto nos ayudó mucho a terminar de pulir la app, aun así, esto sigue siendo una primera versión, es posible que en un futuro haya mejoras y añadidos.

Finalmente, aquí tenéis la app para que podáis usarla, tiene puesta una restricción de edad para mayores de 18 porque ha sido la única manera en la que san google nos permita subirla. No entendemos el porqué de esto, pero bueno, mejor esto a que se quede sin subir.

Roll Counter - Apps on Google Play

Role counters for players. Enhance your role playing experience!

Apps on Google PlayVictor Reiner Apps

Actualmente, independizarse es una tarea titánica, pues los precios de los alquileres están por las nubes y los sueldos son de risa, por no hablar de las mil exigencias que necesitas para poder alquilar un piso.

Por lo tanto, la mayoría de gente joven, y no tan joven, necesitan encontrar gente con la que poder compartir los gastos de alquiler. Parece algo fácil, pero no lo es. Al final cada persona es un mundo y es común acabar discutiendo porque tu compañero de piso te deja la cocina hecha un desastre o por qué siempre te lo encuentras con su pareja dándose demasiado amor en las zonas comunes.

Siempre he visto a gente intentando encontrar compañero de piso por Twitter y pues, no es lo más cómodo del mundo que digamos. Así que me puse a investigar que plataformas había en el mercado que pudiesen ayudar en esta búsqueda.

Fase 1: Research

Competencias Directas e Indirectas

Tras mirar que había en el mercado di con multitud de plataformas para encontrar piso en alquiler. La mayoría tienen una sección para poder buscar una habitación. Pero del mismo modo, la mayoría se centra principalmente en describir el alojamiento o la habitación y pocas dan detalles sobre los compañeros de piso.

La que más destaca en la búsqueda de compañeros de piso es Badi, la cual cuenta con bastantes filtros y puedes saber quien vive en la casa y conocer sus gustos o intereses.

Aun así, había algunas partes donde sentía que se podía aportar un poco más, pero antes de lanzarme a diseñar nada realice unas encuestas y entrevistas para poder entender mejor con que problemas se han encontrado las personas que están buscando piso o compañero de piso.

Encuestas y Entrevistas

De las encuestas entendí que lo más importante para los usuarios es poder conocer bien al futuro compañero de piso y poder establecer unas normas y reglas que se cumplan.​

Además, podemos ver que la mayoría no había usado antes una plataforma para buscar compañero de piso y aquellos que la han usado sienten preocupación por la falta de verificación de los usuarios.

De las entrevistas saque que la mayoría de los entrevistados habían utilizado principalmente plataformas como Idealista o Fotocasa para buscar piso. También usan web, para ver mejor las fotos, como la app, para poder acceder a los anuncios en todo momento.

A la hora de tener que compartir piso con desconocidos, todos prefieren conocer bien antes a la otra persona para valorar si la convivencia será factible.​ Prefieren vivir sin parejas y sin niños, por otro lado, son más permisivos con los animales.

A la mayoría les gustaría disponer de un blog que les ayudase con la convivencia, poder tener a mano plantillas o excells para gestionar las tareas o gastos de la casa.

Con toda la información que saque de la investigación la tire en el Affinity Map para poder ver todo de un vistazo.

Fase 2: Conceptualización e Ideación

Tras toda la fase de research llegamos a la de conceptualizaciñon e dieacion donde empecé a pensar cuál iba a ser mi propuesta de valor. ¿Qué podía hacer yo para destacar sobre las demás app?

Para poder dar con las respuestas a esa pregunta, realice varios canvas para poder entender bien a donde iba a ir mi plataforma.

Canvas

Con el Lean UX Canvas pude ver a qué problemas tendré que enfrentarme y a sus posibles soluciones, con el Buissnes Model Canvas entendí cuál podría ser el modelo de negocio para que esto pudiera salir adelante y con el UX Strategy Blueprint pude vislumbrar en que se iba a enfocar mi plataforma.

Además de los Canvas, gracias a los Problem statemen, los Jobs to be Done y los User Story pude terminar de entender las necesidades y problemas que tendré que cubrir con mi proyecto.

User personas

Para poder enfocar bien el proyecto cree a varios User personas y así tener un ejemplo de los posibles usuarios que tendrá mi plataforma. Asi que aqui os los presento:

Realice user personas con los tres tipos de usuarios que tendrá la plataforma: Inquilinos que buscan a un nuevo compañero de piso, personas que buscan un piso compartido donde vivir y propietarios que quieres encontrar a los inquilinos ideales.

Para poder profundizar en las necesidades de cada User Persona realicé los Empathy Map lo que me ayudo a simpatizar con cada uno de ellos.

Con todo esto pude meter en el Value Proposition Canvas las necesidades de los usuarios y las propuestas que mi plataforma puede ofrecer.

Costumer Journey Map

De los User Persona más interesantes realice unos Costumer Journey Map para ir haciéndome una idea de como iba a ser el "viaje" de un usuario al utilizar la plataforma. De esta manera, encuentre opciones de mejoras en ciertas partes del proceso.

Aprovechando mis dotes artísticas para el Costumer Journey Map de "La cachivaches" decidí añadir un storyboard para ver el proceso de manera más visual y clara.

Fase 3: Arquitectura de información y diseño de interacción

Con toda la información que he recabado y teniendo unas ideas y bases claras, os presento a RUMI.​

El nombre viene del término "Roomie" o "Roomates" del Inglés, que significa "Compañero de piso".​

​Para el logo me he basado en el tejado de una casita y dos personas bajo ella, dándose un pequeño abrazo para así reforzar la idea de encontrar compañeros de piso o Rumis, con los que te lleves bien.

Propuesta de Valor

Antes de seguir es importante tener claro cuál va a ser la propuesta de valor de Rumi. Y son dos ideas principales:

1. Rumi se centra en que encuentres a tu compañero de piso ideal, por lo tanto, cuenta con una gran personalización de los usuarios, además de poder filtrar por características de los usuarios y buscar por compatibilidad.​
2. Quiero que Rumi se quede contigo después de que encuentres a tu compañero de piso, y para ello ayudara en la convivencia, proporcionando herramientas para organizar las tareas del hogar y los gastos, además de un blog con consejos y ayuda para la convivencia.​

Guía de estilo

Para los colores me he decantado por los verdes y marrones para crear un ambiente hogareño y acogedor. Con los colores de acento he usado los azules y amarillos para que generaran contraste, pero sin alejarse de la idea principal.

Se necesitaron muchos iconos para poder representar partes de la casa, normas, estilo de vida y alguna cosita más. Me decidí por hacer los iconos con una línea fina y con los bordes redondeados para originar un aspecto elegante a la par que amigable.

Para ayudar a la experiencia de usuario, dibujé varias ilustraciones, desde cosas sencillas a cosas más complejas, para poder apoyar a explicaciones y tareas.

Con la tipografía me decidí por la Roboto por su fácil legibilidad y por la familiaridad que se tiene con ella.

Finalmente, os muestro algunos de los botones, cajas de texto y demás componentes que veremos por la aplicación.

Sitemap

El sitemap se divide en 5 grandes secciones: Buscar, Mensajes, Subir Anuncio, Convivencia y Perfil

Wireframes

Para tener una idea más clara de como iban a ir los elementos en cada pantalla, hice unos wirefremes en media en escala de grises. Aunque luego en el diseño final muchas cosas cambiaron me ayudo mucho a ver qué elementos quería meter en cada sitio.

Diseño final

Pues con todo el trabajo que se ha hecho hasta ahora solo queda ver el resultado de todo el esfuerzo realizado. He diseñado la app del movil aunque para esta plataforma hay una intención de que estuviera también en web.

Si queréis poder explorar mejor la app os comparto el prototipo de Figma:

Conclusiones

Si has llegado hasta aquí quería agradecerte por ver este post hasta el final. Rumi has sido mi proyecto final para la Bootcamp de Upgrade Hub y le he dedicado mucho tiempo y esfuerzo.

He aprendido muchísimo haciéndola y estoy bastante contento del resultado. Así que espero que os haya gustado a vosotros también.

Inside the planet es un videojuego que nació con la Ludum Dare 47 donde la temática fue "Stuck in a loop". Con esta temática y junto con Victor Reiner y Roberto Moreno como programadores nació Inide the planet. Un videojuego donde Moku, nuestro protagonista, está siempre corriendo hacia la derecha dando vueltas al planeta y tendrá que llevar unas bolitas amarillas a su destino, mientras esquiva a los enemigos.

Como el juego nos gustó mucho, al acabar la Ludum Dare, decidimos darle caña y publicarlo en la playstore.

Aparte de diseñar los assets y los sprites de los personajes, hice la interfaz manteniendo los colores principales, siendo estos los turquesas y los amarillos.

Finalmente, os enseño por aquí algunas pantallas del videojuego.

La version de la app store nos la tiraron pero podeis jugarlos por itch-io

https://victor-reiner.itch.io/inside-the-planet-full?ref=cocidoware.com