Animación y Diseño Web

No es ningún secreto que la Animación y Diseño Web bien utilizados enriquecen notablemente el diseño de cualquier página web, sea cual sea su temática. Pero en que consiste la animación en una web y que tipo de animaciones existen?. Aquí veremos las herramientas profesionales más importantes para crear animaciones y algunos ejemplos de diseños web que destacan por sus animaciones.

En cualquier diseño web puede incluirse la animación de cualquier elemento gráfico. Pero hay que diferenciar entre la animación provocada por el visitante y una animación programada, es decir, si pasa el ratón por un elemento HOVER, este se puede animar mediante css o javascript, ya que el visitante interactuará con la página.  Podemos incluir, mediante códigos, animaciones que hagan la experiencia más intuitiva y de una respuesta inmediata al movimiento del ratón, ya que inequivocamente reconocemos que ese elemento esta enlazado y podemos hacer click.

Otro ejemplo es el efecto Parallax o animación Parallax donde también se requiere la interacción con el visitante, esta animación genera ritmo, potencia el contenido y ayuda a sorprender al usuario. Pero también existen animaciones que no precisan la interacción del visitante, por ejemplo los cargadores o loaders, sirven para entretener mientras se carga el contenido, a veces hasta hipnotizan y permiten retener unos segundos antes de que cargue todo el contenido. Algunos buenos ejemplos puedes encontrarlos aquí NJ(L.A.) Socialmood. También los Slideshow son una forma creativa, original pero sobre todo efectiva de mostrar muchas fotografías o imágenes sin saturar el diseño.

Con la retirada de Adobe Flash Player para el desarrollo de sitios web, se hace más complicado crear una animación optima para nuestra web. Y la cosa se complica cuando la navegación se hace desde un dispositivo móvil o tablet, pero existen herramientas muy útiles para facilitarnos el trabajo. Una de las que más utilizamos en Basicum es la proporcionada por Google Web Designer para crear diseños atractivos e interactivos basados en HTML5 y gráficos en movimiento que pueden ejecutarse en cualquier dispositivo.

Estas son las herramientas más potentes y profesionales para crear animaciones web…

Adobe Edge animate

Es una herramienta de diseño interactivo y movimiento web que permite a los diseñadores introducir contenido animado en sitios web utilizando estándares web tales como HTML5, JavaScript y CSS3. A nuestro parecer es el más completo, fácil e intuitivo para aquellos que hemos trabajado alguna vez con Flash o editores de vídeo como Premier, Final Cut, etc.

Su precio es por suscripción mensual y existen versiones para Mac  y Windows.

Google web designer

Está en fase BETA y permite la creación de contenido animado en HTML5. Lo bueno que tiene es que es gratuito. Además, se pueden ajustar los estilos CSS y permite tocar código HTML y Javascript desde una ventana del mismo programa. Para exportar la animación, genera un código limpio y en su medida bastante bien estructurado. Por el lado negativo, hay que decir aún esta en beta y tiene algunos fallos a la hora de realizar animaciones de textos.

Su precio es gratuito y existen versiones para Mac  y Windows.

Tumult Hype

Es una de las herramientas más potentes que existen en el mercado. Solo disponible para Mac, es el software idóneo para gente que no tiene feeling con el mundo de la programación. Dispone de muchos recursos gratuitos que podemos utilizar para no dedicar mucho tiempo a nuestras animaciones.

Desde su web oficial puedes descargar una versión de prueba de 30 días .

Sencha Animator

Esta es otra de las herramientas más completas que existen en el mercado y podría establecerse como el competidor directo de Hype. Es una de los más completas, y su forma de crear las animaciones es muy parecida a Adobe Edge y Hype. Desde esta herramienta, aparte de crear nuestras animaciones, podemos crear juegos, banners interactivos, etc. Lo que menos nos gusta de esta aplicación es su elevado precio y  los problemas a la hora de previsualizar cambios en las propiedades de los objetos en los diferentes puntos de la animación. Aquí tenéis una relación de clientes que trabajan con esta aplicación.

Animación y Diseño Web

Hay miles de blogs por ahí HTML5, no sólo quieren publicar sitios web HTML5 sino los que son simplemente increíbles y únicos. Cada uno tiene su propio estilo y yo quería escribir la variedad de estilos de animación y diseño web que están disponibles con HTML5.

Estoy seguro que te sorprenderás de ver qué se puede hacer en el diseño web con HTML5 y CSS3.

He recogido algunos sitios que creo que son visualmente increíbles, tanto por su animación js como por el diseño web … disfruta y eres libre de compartir!

Animación y Diseño Web ipoe collection

Creo que los efectos de iluminación fuera de la vela en este impresionante sitio web, que aporta mucho a un sitio tan básico y realmente lo distingue y lo hace único.


Diseño web Creativo

Esto no sólo es el mejor vídeo de snowboard que he visto, su página web está muy bien también, tiene todos los efectos impresionantes de desplazamiento HTML5 excelente Animación y Diseño Web, de lo mejor que puedas imaginar, échale un vistazo creo que te gustará!


Diseño web estilo comic

Este es uno los sitios más interesantes de los HTML5 que he visto, su animación interactiva que muestra realmente lo que puedes hacer con HTML5/CSS3. Cuando vi por primera vez habría apostado que estaba hecho en flash, pero no también se puede hacer Animación y Diseño Web con código.

Animación Web html5

De nuevo aquí es otro ejemplo de un sitio web HTML5 con expcelente Animación y Diseño Web impresionante, hay muchos sitios como este por ahí, pero todos hechos en FLASH, resulta sorprendente hacer un sitio web totalmente animada en HTML5!


Animación diseño páginas web

Este es un sitio agradable cartera limpia, me gusta mucho la forma en que utiliza HTML5 aquí es limpio y sencillo, y añade algo de ‘pop’ y la singularidad en el sitio. Nada sobra, un diseño web sencillo y limpio.


Diseño Creativos con animación

Este es probablemente el sitio HTML5 primera vez que vi, y sigo pensando que es sorprendente, muchos sitios web han intentado esta “animación de desplazamiento HTML5”, pero yo todavía no creo que nadie haya dado en el clavo tan bien como este sitio. Esta es una visita obligada para inspirarte con la Animación y Diseño Web.


Diseño Web Automoviles

Este sitio tiene un poco de todo en él, un buen ejemplo de un ‘simple’ sitio de estilo de HTML5. Me encanta este sitio, probablemente debido a que el Lamborghini se destaca muy bien en el fondo negro, no podría quedar mejor en mi opinión. Por decir algo crítico, le falta algo de animación y movimiento, pero en cuanto al diseño web está excelente, muy profesional


Diseño Web alternativo a flash

Aquí hay otra página web HTML5 flashlike, los fondos son muy únicos y están bien trabajados los estilos. Súper sencillo, pero funciona, por un mini sitio o una página de destino (si usted todavía usa las mismas) por qué no utilizar un efecto como este en vez del flash.

 

0 comentarios

Dejar un comentario

¿Quieres unirte a la conversación?
Siéntete libre de contribuir

Deja un comentario

Tu dirección de correo electrónico no será publicada.