Para un proyecto clave en mi formación como diseñador web, se nos encomendó desarrollar una página web responsiva utilizando principios de diseño adaptativo, específicamente con Tiny Tweaks, para asegurar que los elementos se ajustaran fluidamente a diferentes resoluciones de pantalla. La temática era libre, y mi elección fue un nicho que me apasiona: los RPG (juegos de rol) indie de horror. Este proyecto me permitió fusionar mi interés por el género con la aplicación de técnicas de diseño web y animación para crear una experiencia inmersiva.
Concepto y Elementos Clave del Diseño Web
El objetivo era construir una página que no solo fuera funcional y adaptativa, sino que también capturara la atmósfera inquietante de los RPG de horror independientes. Implementé varios elementos para lograr esta inmersión:
- Diseño Responsivo con Tiny Tweaks: La base técnica del sitio se centró en asegurar que los contenedores y el contenido se adaptaran automáticamente al tamaño de la pantalla del usuario.
- Ilusión de Movimiento con Edición de Imágenes: Un aspecto clave para crear la atmósfera deseada fue la manipulación de imágenes para dar la ilusión de movimiento. A través de la edición y la animación sutil de objetos específicos, logré que ciertos elementos en la página parecieran cobrar vida o moverse ligeramente.
Ilustración y Estilo Visual
Para uno de los elementos visuales centrales, utilicé la imagen de una chica con un vestido blanco. Es importante mencionar que esta ilustración es un calcado de un personaje que obtuve de internet.
Un aspecto importante fue también las paredes al darle la oscuridad para dar sensación de profundidad y que fuera una habitación tridimensional. Aparte de darle la ilusión del ojo estuviera parpadeando fue poner varias imágenes del parpado del ojo como lo es con el “Gato amarillo” que aparece a la derecha saludando al usuario.
Aprendizajes y Resultado Final
El proyecto de la página web «RPG Indie» fue una excelente oportunidad para poner en práctica mis conocimientos sobre diseño web responsivo y animación CSS. Me permitió explorar cómo la combinación de una estructura de código flexible y elementos visuales dinámicos puede crear una experiencia de usuario memorable y temática.
