Feliz Navidad! Ya se acaba el año y no queríamos dejar pasar la oportunidad de felicitaros las fiestas a todos los que hacéis posible que SiloCreativo siga creciendo. Gracias a vosotros que leéis y seguís este blog, a los usuarios de nuestras plantillas de WordPress y a todos los compañeros que contaron con nosotros para compartir un proyecto. Gracias de corazón por estar a nuestro lado y dejarnos formar parte de vuestros diseños e ideas 😀
Y para felicitar las fiestas que mejor que una felicitación interactiva! Desde la ciudad flotante hemos preparado una paisaje que va cambiando según el tamaño de tu navegador, todo muy responsive (ya sabéis lo que nos gusta el diseño responsive). Y por supuesto todo diseñado en base a una ilustración siguiendo el estilo de las que solemos compartir con vosotros. Aquí la podéis ver.
Además hemos incluido un par de regalitos que esperamos que os gusten. ;D
Como hemos diseñado nuestra felicitación navideña.
Este año queríamos hacer algo relacionado con SVG. Vamos a hablar mucho en los próximos meses de este formato vectorial, muy útil para trabajar con gráficos en formato web y que complementará el listado que hicimos sobre formatos de imagen para web. Una de las mayores ventajas es que al trabajar en base a vectores en vez de pixels, el contenido del svg es totalmente escalable a todas las resoluciones sin perder nada de calidad.
Además nos permite diseñar sin preocuparnos si la pantalla va a ser retina o que tipo de densidad de pixel tiene. Con SVG no tendremos problemas de visualización en dispositivos que utilicen este tipo de pantalla, como los últimos iPhones.
Así que nos pusimos manos a la obra comenzando primero con el diseño de la ilustración. Necesitábamos crear un paisaje donde algunos elementos fueran desapareciendo a medida que la pantalla se iba haciendo más pequeña. Así que optamos por tres escenas, con elementos muy similares pero que fueran cambiando de tamaño y posición según nos interesara.
Para la ilustración usamos Illustrator, con una mesa de trabajo de medidas definidas (son las medidas que después vamos a usar en CSS) y bien ordenado por capas (estas capas se convertirán en los futuros identificadores de CSS). Con un diseño flat de la parte superior y low poly en la parte inferior, hay que definir muy bien las propiedades de exportación de Illustrator para el formato SVG, con el objetivo de obtener un código lo más limpio posible y ligero.
Trabajando con SVG en la web
Una vez exportado, tenemos que abrir el archivo SVG con nuestro editor de código, en nuestro caso Atom, y comprobar que todo está ok además de eliminar varias líneas que añade Illustrator y que no nos sirve de nada. Y en este punto nos encontramos con dos opciones, o bien añadir el svg como elemento externo (usando un elemento img, picture o similar) o bien integrar el código dentro del HTML. Optamos por esta segunda opción.
La justificación es que queríamos añadir clases y animaciones en el CSS. Podíamos haber mantenido el archivo SVG y añadirlas ahí, pero para ser más ordenados, mejor todo en la hoja de estilos del CSS y poder editar todo desde un solo archivo y trabajar con las mismas mediaquieries.
Las animaciones son sencillas y suaves, y todas realizadas en CSS. La ciudad flotante tiene un translate en vertical que se repite hasta el infinito, dando ese efecto de flotación que parece estar suspendido en el aire. Otro ejemplo es el de las ventanas de las casas de la ciudad, que cambian de color al amarillo, dando la sensación de apagado y encendido. También el muñeco de nieve tiene un pequeño balanceo (que es en realidad una rotación tomando como eje su base)…
Para cerrar esta parte, un fondo que se fuera moviendo y simulara la caída de copos de nieve, también diseñado en el mismo archivo y exportado como un SVG.
Tipografías, textos y extras.
Ya solo quedaba elegir una buena tipografía de las que comentábamos recientemente en este artículo y redactar los textos de felicitación, esto último es lo más difícil! Si supierais las veces que hemos modificado el texto no os lo creeríais.
Por último un pequeño efecto para poder cerrar la carta y dejar un pequeño sobre cerrado a la derecha y un aviso de que puedes redimensionar la ventana de tu navegador para ver que le pasa a la ciudad flotante. ¿Ya lo has visto? Esperamos que os guste!
Que paséis unas felices fiestas!
Esto de hacer las plantilla interactivas requiere aprendizaje y de paso se obtiene la experiencia. Terminando ya casi el año, y viendo como se interactúa en general con las personas, debo decir que la comunicación es otra habilidad, que ayuda a los diseñadores gráficos en su trabajo porque llegan con el cliente acerca de lo que el cliente está esperando y si están en el camino correcto o no.
!Feliz año nuevo a todos en esta comunidad!