por Omar Benyakhlef | Diseño de páginas web, Diseño Web
Seguramente más de una vez habrás tenido que crear un gif animado transparente. El resultado es muchas veces desastroso, porque los bordes suelen pixelarse incluso a máxima resolución.
Existe desde hace tiempo una solución, aunque todavía no está muy implantada por culpa de las incompatibilidades con navegadores, el png animado.
El formato de archivo APNG es muy superior en todos los aspectos al gif animado. Soporta imágenes 24 bits y más de 16 millones de colores, mientras que el formato GIF, al soportar 8 bits, está limitado a 256 colores. La diferencia pues es enorme.
Además, el PNG animado, no sólo soporta la transparencia total, sino también la parcial (por capas).
DIFERENCIAS EN VELOCIDAD fps
Otra gran diferencia, es que mientras la velocidad máxima en un gif animado es de 10 frames por segundo, en un APNG, la velocidad es ilimitada. He creado esta animación básica, en los dos formatos, a la izquierda el APNG a 20 frames por segundo y a la derecha el gif animado a su máxima velocidad, 10 fps. La diferencia es notable.
DIFERENCIAS DE CALIDAD
Veamos qué sucede cuando le pedimos algo más a la animación, y metemos por ejemplo en lugar de un color plano, un degradado. A la izquierda el APNG y a la derecha el Gif Animado. Como podéis apreciar, al meter transparencia, el gif animado pierde mucha calidad y se pixela.
COMPATIBILIDAD CON NAVEGADORES
La duda principal es saber ¿qué navegadores soportan un png animado?. Firefox fue el primero en soportar este formato, pero hoy en día también es compatible con Chrome, Safari y Opera. Una vez más el problema nos lo encontramos con Internet Explorer o Microsoft Edge, que no reproducen este formato. ¿Para cuándo unos estándares de compatibilidad entre navegadores?. En estos casos la única solución que se me ocurre sería meter una imagen alternativa (gif animado) para cuando detectemos este tipo de navegador. Tenéis todas las compatibilidades en Can I use.
¿Solución?, detectar con una función el navegador y mostrar una imagen alternativa para aquellos que no son compatibles.
HERRAMIENTAS GRATUITAS PARA CREAR UN PNG’s ANIMADOS
Si utilizas Photoshop, puedes utilizar el plugin apngasm.
Tienes varias herramientas gratuitas:
Así que esperemos que algún día los navegadores dejen de ir cada uno por su lado y confluyan en unos estándares que nos permitan no volvernos locos a la hora de diseñar y maquetar.
por Omar Benyakhlef | Descargas, Diseño Web
Las animaciones a través del movimiento del scroll de una página, son en mi opinión, una de las herramientas que mejor nos permiten llamar la atención del usuario.
Utilizando estos efectos, podemos hacer todo tipo de animaciones, desde las más complejas, hasta movimientos de lo más discretos, todo siempre dependiendo del producto que tengamos que vender. En cualquier caso, los efectos interactivos con el scroll, lo que nos permiten como usuario, es tener un control sobre la página del que rara vez solemos disfrutar. Los contenidos no se muestran sin más, gracias a esa interactividad con la profundidad del scroll, podemos controlar la aparición de contenidos, imágenes o animaciones cuando nosotros queramos, incluso echar hacia atrás para ver cómo se ha producido ese efecto.
Esa interacción también promueve la viralización de nuestras páginas, por lo que, como he dicho al principio, siempre teniendo en cuenta el tipo de producto que estamos vendiendo, recomiendo 100% el uso de estas interactividades, al usuario le va a agradar y a nosotros nos permite desarrollar algo más nuestra creatividad.
EJEMPLOS
MAKE YOUR MONEY MATTER.
Una impresionante web en el que se cuenta el funcionamiento de un producto a través de una historia.
VER EJEMPLO
EVERY LAST DROP
Otro producto vendido a través de una historia bien ilustrada, otro claro caso de cómo la información va a ser mejor aceptada por el usuario y como decía al principio del artículo, muchas probabilidades de que sea compartida tu página.
VER EJEMPLO
PORSCHE EVOLUTION
En este caso podemos ver cómo ha solucionado Porsche su web para mostrar la evolución de sus vehículos a lo largo de los años y de la música, todo con un efecto parallax activado por el scroll.
VER EJEMPLO
PEUGEOT HYBRID
Si además eres capaz de mostrar tu información con ilustraciones como estas, el éxito está asegurado…
VER EJEMPLO
CLOSER
Esta web la puedes navegar como cualquier otra, a través de su menú, o la puedes recorrer entera haciendo scroll. Todo tipo de animaciones para tomar ideas.
VER EJEMPLO
COLOR OF THE YEAR
Una web muy visual. A través del color y de tipografías que van cambiando según profundizamos en el scroll.
VER EJEMPLO
MELANIE DAVEID
Lo interesante de esta web es observar cómo los contenidos están divididos en dos columnas y cómo una columna espera a la segunda para seguir mostrando contenido, todo ello por supuesto con la ayuda del scroll.
VER EJEMPLO
BAGIGIA
Esta web es antigua, pero la coloco en este listado, para mostrar cómo a través del scroll van cargando distintas imágenes para recrear una animación de un objeto, dando una sensación 3D
VER EJEMPLO
DESCARGAR CÓDIGO
Una de las mejores galerías, podéis ver todos los efectos posibles en http://scrollmagic.io/examples/index.html
Todo tipo de efectos con textos
Una librería tanto para web y móvil. Permite establecer un easing personalizado, rotaciones 3D, …
Librería JS con timelines para generar animaciones mucho más suaves.
Animaciones para transformaciones de escala, rotaciones, animaciones 3D,…
Compatible con cualquier tipo de dispositivo, y perfecto para hacer una demostración de un producto realizando un 360 grados cuando el usuario hace scroll.
Pasa con el scroll de sección en sección con diversos tipos de animaciones
He colocado esta galería porque además de ser un menú muy vistoso y útil, nos muestra cómo van cambiando los puntos según avanzamos en el scroll
Detecta la dirección del scroll mostrando una capa arriba o abajo.
Muy interesante, permite el desplazamiento desigual entre columnas al hacer scroll.
por Omar Benyakhlef | Diseño de páginas web, Diseño para móviles, Diseño Web, Fuentes, Usabilidad
La tipografía siempre ha ocupado un lugar preferente en el diseño gráfico. Además de ser básica para destacar el mensaje que queremos comunicar, también nos sirve para establecer una jerarquía dentro de ese mensaje.
Esta guía pretende dar indicaciones básicas para poder hacer un uso correcto enfocado al diseño web y de web Apps.
(más…)
por Omar Benyakhlef | Diseño de páginas web, Diseño para móviles, Diseño Web, Google, Usabilidad
Cada vez son mayores las exigencias de las páginas web que diseñamos. Imágenes más grandes y pesadas o efectos que hacen más atractiva la experiencia usuario, hacen que sea indispensable comprobar si esa experiencia que estamos buscando no nos devuelva justo lo contrario, es decir, una página que tarda mucho en cargar y que como resultado nos da una tasa de abandono cada vez mayor. Nos gusta navegar y la oferta es inmensa, si un sitio nos hace esperar acabamos por abandonarlo antes de que cargue.
(más…)
por Omar Benyakhlef | Android, Diseño para móviles, Diseño Web, iPhone, Mobile, Usabilidad
Una de las especificaciones técnicas que tenemos en cuanta al analizar un teléfono es la densidad de píxeles de su pantalla. La densidad de píxeles es una unidad que se mide en píxeles por pulgada ppp o ppi en inglés (pixels per inch), nos indica la calidad de una pantalla y es fundamental a la hora de realizar un diseño para móviles.
Las pantallas de alta densidad tienen más píxeles por pulgada que las de baja densidad. Esto provoca que los elementos de una interfaz de usuario de las mismas dimensiones de píxeles, aparecen más grandes en las pantallas de baja densidad y más pequeños en las pantallas de alta densidad.
(más…)
por Omar Benyakhlef | accesibilidad, Diseño para móviles, Diseño Web, Fuentes, Google, iPhone, Usabilidad
El año 2017 fue denominado por Google como“El año de los móviles” en base a su informe anual Consumer Barometer 2017. Por primera vez en la historia, el uso de Internet en dispositivos móviles registraba un porcentaje superior al 50 % en los 63 países incluidos en el estudio. España es en este sentido uno de los países más “adictos” a su uso, un 91% de los usuarios online se conecta a través de su Smartphone, los mismos que Hong Kong o en Singapore.Un 64% ve vídeos online y un 79% utiliza su móvil para realizar búsquedas, una de las cifras más altas del mundo, muy por encima de la media mundial que es del 65%.
Estos datos son suficientemente relevantes como para prestar una mayor atención al diseño web móvil, especialmente a las tipografías utilizadas. Desgraciadamente nuestra labor como diseñadores web viene condicionada en la mayoría de las ocasiones por las guías de estilo establecidas por nuestros clientes.
El uso correcto de la tipografía en el diseño web móvil es fundamental en la usabilidad y experiencia del usuario, veamos lo que dicen los expertos sobre cómo mejorar este uso en dispositivos móviles. (más…)
