diseño publicación digital

Descubre cómo añadir una portada animada a tu artículo HTML

La tecnología avanza cada día más y hemos de estar atentos a todas las novedades que se producen para poder obtener el máximo partido de ellas. En el caso del diseño editorial, existen numerosas herramientas y recursos con las que hacer de las publicaciones digitales algo sorprendente y diferente. Podemos ser mucho más creativos que en el caso de las ediciones impresas, utilizando recursos como el de las interactividades, vídeos o animaciones que nos permitirán no sólo mejorar la experiencia de usuario sino también aumentar el engagement con nuestros lectores, entre otras ventajas.

Uno de los mayores errores que se comenten es querer reproducir con total exactitud en Internet la versión impresa de la revista. Los artículos son los mismos, pero es la forma de contar las historias es la que hace diferente cada publicación. ¿Por qué no utilizar las herramientas que tenemos a nuestro alcance para destacar? ¿Por qué quedarnos en las revistas digitales cuando podemos hacer apps de publicaciones interactivas? 
 
Por todo ello, hoy hablamos de cómo añadir una portada animada a tu artículo HTML. Una portada que se reproducirá antes de verse el artículo como tal y que se podrá omitir deslizando con el dedo o al cabo de un tiempo, como prefieras. En este tutorial, además de mostrarte los pasos a seguir , encontrarás un ejemplo de portada animada para que puedas probarla tú mismo.

Ejemplos de publicaciones con  portada animada

Portada_NewyorkerLos medios de comunicación tradicionales hace ya tiempo que comenzaron a utilizar recursos digitales en sus ediciones online. Una de las revistas más prestigiosa del mundo, “The New Yorker”, destacó hace años por su originalidad dando vida a una de sus portadas en la edición digital, cuya imagen se publicó tanto en su página web como en las aplicaciones móviles. Aunque era un sencillo gift, supuso un gran paso hacia la adaptación digital y plantó la semilla de la innovación en el sector editorial. 

Tras esta portada animada vinieron muchas más y hoy en día es un recurso muy utilizado para dotar de dinamismo  e interactividad a las publicaciones digitales. Si quieres ver algún ejemplo más, EDRevista, la app de la revista “Enfermería en Desarrollo” que ha sido desarrollada con la tecnología de 480interactive, incluye este tipo de efectos en las portadas de sus publicaciones.

Sorprende al usuario desde la primera página

¿Te imaginas comenzar tu revista o publicación con una portada de revista que parezca sacada de un anuncio? Al dotar de este tipo de efectos a nuestras publicaciones conseguimos sorprender al usuario desde el primer momento e incentivarle a descubrir que más sorpresas se esconden en las siguientes páginas de la publicación. 

En este tutorial te mostramos como trabajar con lenguaje HTML y así poder adaptarlo como portada animada. Es muy recomendable seguir todos los pasos para tener claro cómo funcionan los artículos HTML y tener los archivos necesarios para añadirle la portada a continuación. Además, dentro del tutorial también podrás descargar una portada animada de prueba para comprobar el resultado final. 

Botón-tutorial

El juego que aporta la interactividad de una revista digital al usuario en una tablet no tiene límites, ofreciendo un mundo de posibilidades tanto para el editor, como para el cliente además del anunciante. Recordemos que los anuncios en las revistas digitales no son una página estática, sino que se pueden dotar de interactividad y hacer que el usuario dedique parte de su valioso tiempo a interactuar con el anuncio. ¿Qué mejor manera de vender una marca?

portadaanimada_ok

Si quieres aplicar mayor interactividad a tus publicaciones digitales así como crear tu propia app de revista, recuerda que puedes encontrar este y muchos otros tutoriales como recursos prácticos en el centro de soporte de 480interactive.

Fuentes del artículo:

Quizá te interese:

Descarga gratis 480interactive y empieza a crear tus propias apps sin programar

partner_footer

El reto de diseñar para las nuevas publicaciones MCX, más accesible que nunca

“En papel piensas en dos dimensiones; en el formato app pasas a pensar en audio, vídeo, interactividades, efectos… es mucho más versátil, tienes muchísimo más con lo que jugar; en realidad es más difícil para el diseñador, pero es un reto mucho más bonito, porque el resultado es claramente superior. Los diseñadores debemos de atrevernos a salir del QuarkXPress…”. Con esa claridad de ideas resume Luismi Abad, uno de los diseñadores de la agencia de creatividad Complot de Madrid, uno de los cambios más importantes que se están produciendo en el sector de la edición en los últimos tiempos: el que están viviendo en primera persona los profesionales del diseño gráfico y la maquetación. De hecho, la nueva generación de publicaciones MCX (Mobile Content Experience), tienen como una de sus principales características el cambio de paradigma en el diseño.

Conforme explicábamos recientemente, las nuevas publicaciones digitales en formato app están protagonizando una revolución en lo que se refiere tanto al continente como al contenido. Y precisamente la nueva experiencia que suponen para el usuario tiene su primera razón de ser en el diseño funcional, que se diferencia de la web por la cercanía, por los movimientos que realiza de forma táctil: pulsar, deslizar, pellizcar, palpar, agitar… Al mismo tiempo que el lector de estas nuevas publicaciones se siente más cómplice con esa interactividad real que le ofrece la tablet, siguiendo un itinerario más personalizado por los contenidos, el diseñador también tiene mayor control porque puede ofrecer una experiencia mucho más completa que en una publicación impresa.

Y el cambio de paradigma se hace más accesible, prácticamente transparente, con una herramienta como 480interactive, que permite hacer el tránsito de Adobe InDesign a publicación digital en formato app con un software y un sencillo sistema de etiquetas muy fáciles de dominar. La distancia entre el diseño tradicional en papel a la creación de nuevos contenidos en app interactiva es ahora más fácil de recorrer que nunca y los resultados tan sorprendentes como la imagen animada, el rasca o los efectos de sonido.

Sobre todo, porque el reto de diseñar con este cambio de chip es, en realidad, una adaptación necesaria al uso espontáneo y natural que de manera creciente hacen cada vez más lectores de tablets. Algo que es especialmente llamativo en los niños, que utilizan los gestos de navegación en las apps de una forma absolutamente intuitiva, dejando atrás a ratones y punteros.

Quizá te interese:
cursos_footer
partner_footer