“Las opiniones, hechos e interpretaciones expresadas en esta publicación, que no han sido sometidas a revisión editorial o de otro tipo, son de exclusiva responsabilidad de sus autoras y pueden no coincidir con las de Adalab.”
Cuando nos propusieron en AdaLab escribir nuestro primer artículo técnico, quise hacerlo sobre algo que ayude a otras personas. Como acabo de terminar mi primera animación (un monstruillo muy simpático que os animo a conocer), tengo unos consejos estupendos que estoy deseando compartir con vosotr@s.
1. Lo primero que tienes que saber es que puedes hacerlo
En serio, empiezas por algo muy básico como pintar un círculo, y poco a poco ¡te sale algo! Es una maravilla.
Tampoco creas que necesitas unos conocimientos de diseño impresionantes. Si tu fuerte no es la creatividad visual, puede que seas muy buen@ haciendo algo más funcional, como este cicloide interactivo (es hipnótico).
2. Cómo superar el miedo al lienzo en blanco
Yo lo primero que hago es pintar el fondo de un color. El que sea, da igual. Ya verás que ahora es más fácil :)
No te agobies pensando que tienes que hacer algo muy bueno desde el principio, empieza por algo pequeñito y poco a poco ve añadiendo cosas. ¡Y no abras varios frentes a la vez a no ser que quieras volverte loca! En general, es una buena idea pensar en la estructura de tu proyecto y dibujarla en un papel, como siempre nos recuerda nuestro profe Chuck!.
Siempre puedes buscar inspiración en otras animaciones de CodePen, y si todavía no te decides, puedes centrar tu proyecto en probar una propiedad de CSS con la que quieras coger práctica, o que sirva a otr@s para entender cómo funciona, como este codepen sobre el selector hover.
3. Vas a aprender un montón
Como que las animaciones y la propiedad z-index no se llevan muy bien.
Para empezar, aprovéchate de tus conocimientos sobre HTML para la web (por ejemplo, para hacer más manejable el posicionamiento de unos elementos respecto a otros).
Constantemente te verás buscando documentación para hacer algo, y aprenderás un montón. Hay muchas páginas que explican cómo hacer formas con CSS (círculos, triángulos…). Mi recomendación aquí es que no uses código que no entiendas, porque lo importante no es el resultado, y porque tu código te sería mucho más difícil de manejar. Haz cosas que estén a tu alcance y pregunta por las que todavía no entiendas :)
4. Trabaja con un controlador de versiones
En este tipo de proyectos más visuales, donde tu pequeña creación puede cambiar tanto de un día para otro (te viene la inspiración y añades algo que no tenías planeado, pero luego no te gusta y lo quitas, después te da por cambiar los colores, y luego los tamaños…) es muy recomendable usar un controlador de versiones. Yo he trabajado en un repositorio en GitHub y después he subido el resultado final a CodePen, porque para la difusión esta última plataforma funciona mucho mejor.
5. ¡No tengas miedo de compartir tu creación!
Siéntete orgullos@ de tu dibujillo, y compártelo sin miedo, pues siempre habrá alguien a quien le guste y que pueda aprender algo nuevo.
¡Muchas gracias por leerme!
Espero ver tus creaciones pronto. Enséñamelas anda, no te hagas de rogar (este es mi twitter, también puedes seguirme 🧙♀️).
