Recursos prácticos diseño de apps

Diseño UX: herramientas y consejos para crear aplicaciones móviles

Cada vez son más demandados los conocimientos de Diseño UX (Experiencia de Usuario) a la hora de crear aplicaciones móviles. Tener los conocimientos suficientes como para ser considerado un profesional especializado en este campo es clave, ya que hay que tener en cuenta desde el número de pantallas hasta los posibles bugs que puedan surgir. 

Si un diseñador necesita crear una app para su cliente, deberá aplicar unas mínimas normas de diseño UX para que la app sea funcional y la experiencia de usuario sea óptima, afrontando el hecho de que, sin conocimientos de programación, tendrá que buscar soluciones que le faciliten el camino.

480interactive es una de ellas, ya que permite, además de crear apps sin programar, aplicar estas pautas de usabilidad de forma fácil. A continuación te mostramos sólo algunas consideraciones básicas referentes a este tema y que puedes aplicar con 480interactive.

1.Un mismo diseño para todos los dispositivos

Uno de los principales retos a los que se enfrentan muchos diseñadores durante la creación de su App es intentar adaptar una imagen o un vídeo que actúe como fondo a las medidas de su proyecto. Generalmente, la imagen se corta o no se ajusta a las medias correctas cuando lo visualizan en sus dispositivos móviles,lo cual puede acabar afectando a la experiencia de usuario. 

Con 480interactive este problema se soluciona ya que dispone de una funcionalidad, la “Maquetación multidispositivo“, con la que podrás adaptar tu proyecto InDesign a cualquier smartphone o tablet, independientemente de la resolución de pantalla que tenga. 

Maquetación-multidispositivo-480interactive

2.Recorrido amigable a través del contenido

En un diseño UX para móviles es esencial que los usuarios puedan explorar el contenido, pero también hay que estar seguros de que el recorrido que van a realizar les resulte cómodo.

Los elementos interactivos y botones de la aplicación han de tener un diseño amigable, con suficiente espacio entre ellos y ser claramente identificables para evitar confusiones. Con 480interactive es posible aplicar estos elementos a nuestros diseños en InDesign y que se reproduzcan sin problemas en el dispositivo móvil. 

3.El uso de iconos o metáforas representativas

Los iconos pueden ser una solución muy potente cuando trata de hacer la navegación móvil lo más cómoda posible. Cuando hay contenido oculto o desplegable, es importante utilizar iconos que animen al usuario a descubrir qué se esconde tras ellos, ya sea una flecha para pasar de página o un símbolo de 360º sobre una foto. 

Por tanto, los iconos han de ser representativos, fácilmente identificables por los usuarios y con una simbología clara. También deben de tener un alto contraste con el resto de elementos presentes en la pantalla para que destaquen y no pasen desapercibidos.

Este tipo de iconos o metáforas (Skeuomorphism) permiten a los usuarios comprender rápidamente el contenido y la funcionalidad de un elemento mediante el uso de un concepto que ya conocía previamente.  Con 480interactive es posible implementar tanto los iconos a nivel de diseño como las funcionalidades y efectos (mostrar, ocultar contenido como en la ficha de la imagen) que correspondan a cada uno de ellos.

Portal_porcelanite

4.Personalización de los colores.

El color es otro elemento de comunicación muy importante y que, a la hora de hacer que la experiencia de usuario sea positiva, juega un factor clave. Además del diseño del propio contenido, con 480interactive también podemos personalizar desde el icono que aparecerá en App Store y Google Play hasta los colores del quiosco en el cual se muestra nuestro contenido, manteniéndonos fieles a nuestra identidad corporativa o visual. 

Si aún no has probado 480interactive, descárgalo gratis ahora y empieza crear Apps sin programar.

Quizá te interese:

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

partner_footer

Plantilla para crear una app de Guía Informativa

Gastronómicas, sanitarias, corporativas o turísticas, la temática de una guía informativa es muy amplia. Sin embargo, todas ella tienen algo en común: comparten la necesidad de hacer que el usuario pueda acceder a la información que contienen de forma fácil y rápida.

Una forma de cumplir este objetivo es a través de las nuevas tecnologías, por lo que hoy te traemos esta plantilla gratuita para crear una app de guía de primeros auxilios.  

boton_plantilla_catalogo_480interactive

Incluye un tutorial donde conocerás paso a paso como se crean este tipo de apps, utilizando InDesign y el software 480interactive. Sin una línea de código y mediante un diseño que se adapta a cualquier dispositivo móvil

Y es que a la hora de consultar información, cada vez son más los usuarios que prefieren el formato digital al papel, principalmente por que pueden acceder a este tipo de contenido cómodamente a través de sus dispositivos móviles. Si sumamos el hecho de que hoy en día todo tiene cabida dentro de una aplicación, no es de extrañar que cada vez haya más contenido digitalizado.

Si tienes cualquier duda sobre esta plantilla o cualquier otro tema, recuerda que tienes disponible nuestro centro de soporte así como nuestro foro de usuarios, donde responderemos a tus preguntas y podrás consultar las de otros usuarios.

Quizá te interese:

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

partner_footer

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