interactividad InDesign

Diseño UI: ¿Qué son los botones interactivos de InDesign?

El diseño UI (User Interface)o diseño de interfaces es aquel tipo de diseño enfocado en la creación de una interfaz, ya sea gráfica o desarrollada por tecnologías como HTML, CSS, YUI, jQuery, etc para un sitio o página web o aplicación para web, móvil o tablet.

Este diseño atiende al diseño de textos, contenidos, organización visual de los elementos, la consistencia del mismo y demás recursos gráficos.

InDesign es uno de los programas de diseño más utilizados para el diseño de interfaces de aplicaciones móviles y permite, entre otras funcionalidades, añadir interactividad al contenido mediante el uso de botones interactivos.

Utilizar estos elementos es de gran utilidad ya que hacen del diseño de la App sea más atractivo visualmente.

¿Qué son los botones interactivos?

Los botones se pueden crear a partir de una imagen, una caja de texto o un marco rectangular vacío. Una vez convirtamos una imagen o marco a botón, podremos añadirle acciones para realizar distintas interactividades.

Acciones como “Ir a página“, “Ir a a primera página“, mostrar y ocultar botones y formularios o controlar la reproducción de un elemento de sonido de alguna forma (reproducirlo, pausarlo, etc.) son sólo algunas de las múltiples interactividades que puedes añadir a tu proyecto App mediante este tipo de botones y que son compatibles con 480interactive

¿Cómo se usan?

De forma que puedas comprobar su facilidad de uso, aquí te contamos brevemente como crear un botón interactivo.

Paso 1: Convertir un elemento en botón

En este ejemplo, vamos a convertir un marco rectangular vacío en un botón. Para ello, debes insertar un marco rectangular usando el botón Crear marco rectangular y seguir los pasos:

1. Con el marco seleccionado, abre el panel Botones y formularios. Si tienes ese panel oculto puedes activarlo desde: Ventana ⇒ Interactivo ⇒ Botones y formulario.

2. Desde el panel, elige el tipo «Botón» o pulsa el botón «Convertir a botón» Convertir a boton (situado en la parte inferior de panel).

3. Ponle un nombre para identificarlo con facilidad.

Paso 2: Añadir una acción

Una vez creado el botón, le añadiremos una acción para definir la interactividad. Como ejemplo, la acción que vamos a añadir será la de abrir una página web. Sigue estos pasos desde el panel Botones y formularios.

1. Normalmente usaremos el evento «Al hacer clic» para que la acción se realice al tocar el elemento. Selecciona ese evento.

2.Pulsa el botón «Añadir acción» Anyadir acción

3.Elige la acción que deseas añadir. En este ejemplo elegimos «ir a URL».

Anyadir accion

4. Finalmente configuramos los parámetros de la acción que hemos añadido. Dependiendo de la acción, los parámetros a configurar serán distintos. En este ejemplo, podemos indicar la URL que queremos abrir en el campo «URL».

3-url

Cómo aplicar estos botones al diseño de mi App

Si quieres aprender a crear y aplicar botones interactivos al diseño de tu App, en nuestro centro de soporte encontrarás tutoriales personalizados con toda la información que necesitas, instrucciones para crearlos paso a paso y acceso al foro de soporte para consultar tus dudas.

Nuevo curso de creación de Apps sin programar con 480interactive

Si eres diseñador y estas interesado en aprender a crear a tus propias apps sin programar, este curso es para tí. Un curso 100% online y flexible con el que podrás aprender a crear apps sin una línea de código utilizando tus herramientas de trabajo habituales: lenguaje HTML, PDFs, vídeos, etc… además de nuestro querido InDesign.Botón_curso_480interactiveEl curso online de creación de apps de 480interactive dará comienzo el próximo día 3 de noviembre hasta el día 8 de diciembre. Dividido en cómodos temas, el curso cuenta con material práctico (plantillas, recursos y casos prácticos) además de clases en vivo semanales y certificación oficial al finalizar el curso.

Su precio es de 99€ y puedes realizar su comprar a través de la web de 480interactive.

¿Necesitas más información?

Si deseas conocer más a fondo el curso, puedes descargar la Guía del curso de forma gratuita y contactar con nosotros para resolver cualquier duda que tengas.

Contacto_480interactive

Quizá te interese:

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

partner_footer

Levanta el vuelo con los cursos online de 480interactive

Titulo_curso_crear_apps-1

Las tostadas siempre caen al suelo por el lado de la mantequilla. Y los cursos de formación online siempre dejan la sensación de no haber servido para gran cosa. Pero aquí tienes la tostada que nunca cae del revés. Si eres diseñador y quieres alzar el vuelo, dar el toque de distinción que buscabas a tus servicios, diferenciarte, explorar nuevas vías para anticiparte al futuro, esta es tu oportunidad. Iníciate en el diseño de publicaciones interactivas en formato app para tablets, el formato editorial que se está consolidando a nivel internacional para transformar la manera de producir y consumir contenidos, generando una nueva experiencia en el usuario final y abriendo un enorme campo de posibilidades a nivel comercial. No te quedes atrás. Los cursos online de 480interactive son lo que buscabas: cuestan sólo 99 € y tienes a tu disposición tutores todos los días laborables para atenderte personalmente.

No te estamos contando milongas. Los han cursado decenas de diseñadores en España, México y Argentina, que ya están convirtiendo sus publicaciones diseñadas en Adobe InDesign en revistas y catálogos interactivos; libros, cómics y cuentos concebidos para tablet, presentaciones dinámicas de producto, apps corporativas y de eventos… Los cursos online de 480interactive están pensados para que puedas seguirlos de forma flexible, adaptados a tu disponibilidad. Son 100% prácticos desde el primer tema hasta el último, a través de video-tutoriales ágiles (abajo un ejemplo, sobre la rotación de imágenes), constantes ejemplos, plantillas para poder practicar y tres semanas de tutor y soporte técnico incluidos.Al final obtendrás tu diploma de conocimientos adquiridos.Los cursos online de 480interactive están divididos en tres niveles de conocimientos y prevén un Proyecto Final para ponerlos en práctica con un caso práctico. El itinerario completo tiene un precio de 99 € con acceso ilimitado a todos los materiales (incluye Nivel A, B1, B2, B3 y C). Y, para empezar, si ya estás dado de alta como usuario de 480interactive puedes acceder al Nivel A de manera gratuita para así dar el primer paso y asegurarte que te interesa. Te detallamos los contenidos, gestionados en un aula virtual con la plataforma Moodle:

· Nivel A. Aprende a utilizar Adobe InDesign y 480interactive para crear apps interactivas: definir el tamaño del documento, crear páginas, pasar de InDisign a app… Con ejemplos para que te inspires. 29,90 €.

· Nivel B. Aprende a utilizar las distintas herramientas interactivas de InDesign y 480interactive para aprovechar todas sus posibilidades:

· Nivel B1. Cómo aprovechar la interactividad de InDesign en tus proyectos. Precio por separado: 29,90 €.

· Nivel B2. Cómo utilizar las 480i Tags para conseguir los mejores efectos interactivos. Precio por separado: 29,90 €.

· Nivel B3. Los “Elementos Extra” para dar más interactividad desde 480i Manager, como galerías de imágenes, HTML o panoramas en 3D. Precio por separado: 29,90 €.

· Nivel C. Todos los pasos para configurar, personalizar y publicar tus apps en App Store y Google Play y monitorizar descargas y comportamiento de los usuarios en tu publicación. Precio por separado: 29,90 €.

· Proyecto Final. Descarga un completo catálogo interactivo para practicar tus conocimientos adquiridos. Se facilita la plantilla y todos los recursos necesarios para hacerlo.

 

imagen curso online 480interactive