Evangelion Countdown Timer
Notas de proceso mientras construyo mi versión de la cuenta regresiva más icónica de mi vida.
Última actualización -> 2021-06-27
¿Qué es Evangelion?
Evangelion es una serie de anime del genéro ciencia ficción con una trama confusa y psicológica transmitida originalmente entre octubre de 1995 y marzo de 1996.
Leer más en Wikipedia ->
Ver Evangelion en Netflix ->
Proyecto
Ilustrar en Figma mi propia versión de una de las pantallas más icónicas de la serie.
Imagen: Twitter
Checklist / Roadmap
Nice to have
Proceso
Googlear
Googleé los siguientes términos:
- cuenta regresiva evangelion vectores
- timer evangelion vectores
- evangelion countdown vector
- evangelion timer vector
- evangelion figma
No encontré ninguna versión en vectores de la pantalla que quiero hacer.
Mis reacciones:
😞 -> Tenía la esperanza de encontrar algo lindo, por lo menos para inspirarme.
😄 -> Tengo la oportunidad de hacer algo hermoso que tengo en la mente hace muchos años.
También busqué en la comunidad de Figma y la palabra evangelion no trae ningún resultado.
Referencias
Al tener en claro lo que quiero hacer, mi moodboard es bastante sencillo:
- Una captura de pantalla de la serie que ví en este tweet
- Una captura de pantalla de este video
Mapeo
Para facilitarme la tarea, uso la referencia de frente que, si bien no es la original de la serie, me permite mapear los elementos rápidamente.
No me sorprende que la grilla parezca aleatoria.
Detecto 6 contenedores y 16 elementos, aproximadamente.
También veo que 5 elementos son palabras en japonés. Voy a tratar de buscar qué dicen. Mis opciones son: replicar los kanjis como gráfico o traducirlos a inglés.
Tipografía
Sans Serif
(Tipografía de lo se lee en Inglés)
A simple vista, la tipografía que usan en la serie original parece ser Helvetica y la internet opina lo mismo.
Yo decidí usar Inter, que me parece más adecuada y me gusta pensarla como la Helvetica de la web actual.
Kanjis
(Tipografía de lo que se lee en Japonés)
Primero pensé en dibujar los kanjis a mano pero finalmente decidí usar tipografía.
Para usar tipografía, tenía que entender los kanjis que se ven en la referencia, así que empecé por buscar los dos más grandes usando Google Translate para traducir la palabra INTERNAL al Japonés.
El resultado fue exitoso.
INTERNAL se tradujo a 内部. Se ve como en la referencia, todos contentos.
Con las otras frases no tuve tanta suerte:
ACTIVE TIME REMAINING se tradujo a 残りのアクティブ時間 y
MAIN ENERGY SUPPLY SYSTEM se tradujo a 主なエネルギー供給システム. Me quedaba una diferencia de 4 kanjis en cada caso.
En este momento me dí cuenta de que me iba a hacer falta entender los kanjis y, si bien Google me podía ayudar, el Japonés es un idioma muy complejo y sentí que el proyecto se podía bloquear por mucho tiempo.
En este punto volví a mi idea original de dibujar los kanjis, pero las referencias de la pantalla de cuenta regresiva que encontré no me daban un ángulo correcto para poder redibujar los símbolos.
Además, a esta altura ya quería usar tipografía y los kanjis correctos, sin errores. Después de todo, este proyecto es un gusto que me estoy dando y usar las palabras originales me parecía absolutamente necesario 🤓.
Me acordé que @alemohamad tenía kanjis en su nombre de Twitter y, siendo que es contemporáneo, desarrolla y diseña, aposté a que sería el indicado para ayudarme mandándole un DM para que vea en algún momento.
Resulta que Ale estaba con tiempo así que no solo me ayudó a descifrar los kanjis sino que hasta casi compramos la tipografía original usada en Evangelion...
Después nos calmamos y nos conformamos con tener a alguien con quien compartir packs de stickers de Evangelion en Telegram.
Con respecto a la tipografía, encontré una muy noble y parecida a la original en Adobe Fonts.
Números
Encontré esta fuente de DaFont que por ahora sirve. Quizá más adelante le haga leves modificaciones.
Resumen de tipografías usadas
- Sans Serif -> Inter (Google)
- Kanjis -> VDL-V7Mincho U (Adobe Fonts)
- Números -> DJB Get Digital (DaFont)
Color
Dado que el naranja y rojo podía tomarlos de la referencia, me centré en el fondo.
A simple vista parece una suerte de espectro visible del espectro electromagnético así que básicamente tomé este gradient y modifiqué los valores hasta que me pareció que se asemejaba a la referencia.
Probablemente vaya tocando los colores en las siguientes etapas.
Responsabilidad
Si estás leyendo esta nota y querés alentarme a completar el proyecto o hacerme algún comentario, mandame un reply o DM en Twitter ->