¿Quién sabía que Adobe CC podía estructurar alambres?

Wireframing es un paso importante en el diseño de cualquier interfaz de usuario, ya sea un sitio web, una aplicación o un producto de software. Sin distracciones en forma de imágenes, colores, tipografía, estilos y efectos, puede concentrarse más en definir la jerarquía del contenido y la experiencia del usuario.

Hacer wireframes y prototipos de baja fidelidad lo ayudará a probar e iterar antes y con más frecuencia en el proceso. Los wireframes de baja fidelidad permiten a los diseñadores trabajar más rápido y desarrollar productos que encantarán a los usuarios.

Hay muchas herramientas de wireframing diferentes para elegir en la naturaleza. El que elija dependerá de sus preferencias personales y estilo de flujo de trabajo.

Al igual que muchos diseñadores que han pasado al diseño digital desde el mundo de la impresión, soy un experto en aplicaciones de Adobe como Illustrator, InDesign y Photoshop. Puedo usarlos de manera eficiente e intuitiva desde cualquier lugar y en cualquier momento (incluso si alguien me despierta en medio de la noche y se niega a darme una taza de café).

No es sorprendente que estas versátiles aplicaciones también se hayan convertido en las herramientas que utilizo para hacer diseño visual web y de aplicaciones. Por lo tanto, para que mi flujo de trabajo sea más eficiente, también los uso para estructurar alambres.

Con cada proyecto, generalmente empiezo a diseñar haciendo bocetos muy aproximados en papel, o en la pantalla de mi iPad o teléfono inteligente si no estoy cerca del escritorio de mi oficina. Estos bocetos están ahí para centrar mis pensamientos sobre el concepto elegido; el cliente probablemente nunca verá ninguno de ellos. Cuando me siento seguro de que mi idea funciona, paso al wireframing. Usualmente uso Adobe Illustrator e InDesign combinados: Illustrator para crear la mayoría de los elementos del kit de interfaz de usuario e InDesign para el wireframe en sí.

Explicaré un proceso paso a paso sobre cómo incorporar también esas herramientas en su flujo de trabajo de creación de esquemas más adelante en este artículo, pero antes de entrar en detalles, permítame mostrarle las fortalezas y debilidades de usar InDesign como una herramienta principal de creación de esquemas. .

Los pros y los contras de usar Adobe InDesign como una herramienta de estructura alámbrica y creación de prototipos

Desde hace algún tiempo, Adobe InDesign no solo ha sido una aplicación de autoedición, sino que también se ha utilizado ampliamente para la publicación digital y la creación de EPUB. También hay varias razones por las que es una herramienta adecuada para el wireframing:

• Páginas maestras : puede aplicar rápida y consistentemente elementos de diseño global como navegación, encabezados, pies de página, etc. usando páginas maestras. Puede crear tantas páginas maestras como necesite y, además, una maestra puede basarse en otra.
• Compatibilidad con cuadrícula sólida : le permite crear y aplicar fácilmente diferentes tipos de cuadrículas, columnas complementarias, guías horizontales y verticales para crear módulos y subcuadrículas para una mayor complejidad y precisión.
• Diseños alternativos : permite estructuras alámbricas para múltiples dispositivos y orientaciones en el mismo archivo.
• Bibliotecas CC : genera una biblioteca de diferentes activos reutilizables, como objetos, colores, caracteres y estilos de párrafo de uso común. Cree activos en InDesign, Illustrator o Photoshop, o con la aplicación móvil Adobe Capture, lo que prefiera.
• Capas : proporciona la capacidad de organizar, agrupar, mostrar/ocultar y bloquear/desbloquear objetos y contenido de forma selectiva en la estructura alámbrica. Cada página de un documento de InDesign de varias páginas tiene el mismo número y orden de capas. Todos los cambios que realice en las capas se reflejarán en todas las páginas, como la visibilidad, el orden de apilamiento o la eliminación.
• Estilos y tablas : brinda un control total sobre el aspecto de su texto, objetos y tablas mediante el uso de estilos de InDesign. Los estilos pueden heredar unos de otros, lo que brinda la capacidad de aplicar en cascada el formato deseado fácilmente en todo el documento. Crear y dar formato a las tablas para usarlas como elementos de contenido de estructura alámbrica o incluso ayudantes con fines de diseño es muy simple.
• Integración de Typekit : en maquetas de alta fidelidad, puede usar cualquiera de las fuentes de Typekit que se sincronizan con el escritorio.
• Interactividad y animaciones : puede utilizar las funciones integradas de interactividad y animación de Adobe InDesign para crear diferentes estados de elementos de diseño web o de aplicaciones para la creación de prototipos de interacción. La mayoría de las personas usan estas funciones al crear revistas para soluciones de publicación digital y exportar EPUB de diseño fijo, pero también son adecuadas para la creación de prototipos.
• Opciones de exportación : InDesign puede exportar las estructuras alámbricas y los prototipos que cree en una variedad de formatos. Los PDF interactivos probablemente serán su formato de elección en la mayoría de los casos, pero también puede usar la función Publicar en línea para convertir su documento a HTML interactivo, que se puede ver en los navegadores móviles y de escritorio modernos. Desafortunadamente, no tiene mucho control sobre la exportación mediante Publicar en línea y los archivos exportados se alojan en servidores de Adobe. Puede compartir la URL del prototipo con su cliente o incrustarla en su sitio. Para más control y exportación directa a HTML5, puede usar la extensión in5 de Ajar Productions.

Adobe InDesign tiene muchas ventajas para ser utilizado como herramienta de creación de prototipos y estructura alámbrica, pero también tiene algunas desventajas:

• Falta de plantillas y elementos de estructura alámbrica predefinidos : dado que InDesign no está destinado a ser una herramienta de estructura alámbrica, debe crear y preparar plantillas y activos de objetos usted mismo. (Le mostraré cómo manejar este paso más adelante en este artículo). La buena noticia es que la mayor parte de este trabajo se realizará solo una vez y, después de unas pocas horas de trabajo, estará listo para poner en marcha su Estructura alámbrica de InDesign. Además, hay una gran cantidad de activos y kits de estructura alámbrica que puede descargar de Internet, por lo que no es necesario que dibuje todo usted mismo.
• Las funciones de interactividad y animación son limitadas : aunque puede conectar páginas fácilmente y agregar algo de interactividad y animaciones, el proceso a veces puede llevar mucho tiempo. Algunas de las herramientas de interacción simples no son muy intuitivas. Si no ha utilizado las funciones de interactividad de InDesign, deberá superar una pequeña curva de aprendizaje antes de poder aplicarlas de manera eficiente.
• Los documentos de InDesign no se pueden exportar directamente como archivos PSD en capas : si realiza su diseño visual en Adobe Photoshop y desea tener elementos de estructura alámbrica separados para crear su diseño, primero deberá exportar sus estructuras alámbricas a PDF. Luego, deberá abrir el PDF en Illustrator y exportarlo nuevamente como un PSD en capas. Las personas que trabajan en Mac también pueden usar un script gratuito escrito por Rob Day para guardar archivos de InDesign como un PSD en capas.

Una buena preparación del wireframe es la mitad del trabajo

Comience por afinar su entorno de trabajo. Si aún no tiene un espacio de trabajo guardado en Illustrator e InDesign para este tipo de trabajo, cree uno. En Illustrator, comience con el espacio de trabajo web predefinido y adáptelo a su gusto: cierre los paneles que no usa con frecuencia, asegúrese de abrir los que usará y luego organícelos para adaptarlos a su estilo de trabajo.

Cuando haya terminado, guarde el espacio de trabajo eligiendo Ventana > Espacio de trabajo > Nuevo espacio de trabajo... Haga lo mismo en InDesign utilizando el espacio de trabajo de Publicación digital como punto de partida.

Ensamblaje de estructuras alámbricas/maquetas/kits de prototipos

Un flujo de trabajo de creación de esquemas eficaz con Illustrator e InDesign requiere que invierta algo de tiempo en crear primero el kit de activos de la interfaz de usuario. Desde la introducción de Adobe Creative Cloud, las bibliotecas CC son la mejor manera de almacenar todos los componentes de su kit de interfaz de usuario.

Puede crear una o más bibliotecas con fines de creación de prototipos y estructura alámbrica. Por ejemplo, puede crear una biblioteca para estructuración de sitios web, otra para aplicaciones de iOS, una tercera para aplicaciones de Android, etc.

Para crear una biblioteca de Adobe CC, abra el panel Bibliotecas y seleccione Crear nueva biblioteca en el menú de hamburguesas del panel. Los activos que coloque en las bibliotecas se pueden crear y utilizar en diferentes aplicaciones móviles o de escritorio de Adobe en todos los dispositivos en los que inicie sesión con su ID de Adobe. Eso significa que puede comenzar con el proyecto en su iPad o iPhone, continuar en su computadora de escritorio en la oficina y hacer cambios de última hora en la computadora portátil de su hogar con los mismos activos disponibles en todos los dispositivos.

Si trabaja como parte de un equipo más grande, los activos de la biblioteca se pueden compartir entre los miembros del equipo. Las bibliotecas pueden contener colores, gráficos, estilos de capa (solo Photoshop) y estilos de párrafo y carácter. Agrega activos en las bibliotecas haciendo clic en el botón correspondiente en la parte inferior del panel Biblioteca CC con el elemento respectivo seleccionado. También puede agregar activos gráficos arrastrándolos directamente desde su mesa de trabajo al panel Bibliotecas.

Los activos de las bibliotecas están organizados por categorías. Siga las buenas prácticas y cambie el nombre de cada activo con un nombre significativo. Se pueden realizar búsquedas en las bibliotecas, y encontrar un activo escribiendo el comienzo de su nombre le ahorrará mucho tiempo más tarde, especialmente cuando tiene muchos elementos diferentes en sus bibliotecas. Para cambiar el nombre de un activo, haga doble clic en él y escriba uno nuevo.

Creación de componentes de kit de estructura alámbrica

Aunque Adobe InDesign tiene algunas herramientas de dibujo básicas que son bastante similares a las de Illustrator, Illustrator es una opción mucho mejor para dibujar varios elementos en su estructura alámbrica. Como regla general, cree todos los elementos del kit que requieran un dibujo más complejo que las formas geométricas básicas en Illustrator. Cree elementos más simples que contengan texto que deberá cambiar en el diseño, como botones simples, en InDesign.

Para empezar, haga una lista de todos los elementos que necesitará en la estructura alámbrica, como elementos de navegación, elementos de página que incluyen imágenes, cuadros de video y cuadros de texto, íconos, avatares, elementos de formulario y todos los demás elementos de la interfaz. Una vez completada su lista, puede dirigirse a Illustrator e InDesign para crear esos elementos.

Empiece por crear un nuevo documento para los componentes de la estructura alámbrica o del kit de maquetas. Vuelva a verificar que elija Web/Perfil de dispositivos en Illustrator o Web/Intención de publicación digital en el cuadro de diálogo Nuevo documento. Esto garantiza que los píxeles se utilicen como unidades y que el modo de color se establezca en RGB.

Haga que los activos del kit de estructura alámbrica sean lo más simples posible porque necesitan dar pistas visuales rápidas de lo que representan sin ser demasiado detallados. Debes usar paletas de colores muy limitadas, preferiblemente algunos tonos de gris. Acentúe visualmente los elementos que son más importantes coloreándolos con tonos más oscuros o dándoles un mayor contraste.

Para maquetas o prototipos de mayor fidelidad, cree kits de interfaz de usuario con elementos más detallados que utilicen la paleta de colores respectiva de cada proyecto. Para acceder fácilmente a las paletas de colores, agréguelas a las bibliotecas CC.

Activos de Adobe Illustrator en bibliotecas CC

Los activos que agrega a las bibliotecas desde Illustrator están vinculados de forma predeterminada (desde Adobe CC 2015). Eso significa que cuando modifica un recurso de biblioteca en Illustrator, los cambios se reflejan en todas las instancias utilizadas. Si desea agregar un recurso no vinculado al documento, presione la tecla opción/alt mientras lo arrastra desde el panel.

Cuando utilice activos de Illustrator vinculados en InDesign, tendrán un pequeño icono de nube en la esquina superior izquierda cuando el documento se visualice en modo Normal. Todos ellos también se enumeran en el panel Vínculos. Si modifica un recurso de biblioteca en Illustrator, los cambios en el documento de InDesign no se realizarán automáticamente. El ícono de la nube se reemplazará con un ícono de signo de exclamación de vínculo modificado, y deberá actualizar estos vínculos.

Los recursos de InDesign que coloca en un documento de InDesign no están vinculados. Esto significa que puede editar instancias independientemente del original, y cuando se modifica el activo original, esos cambios no se reflejan en los activos que ya se han colocado en el diseño.

Considere esas propiedades al crear estructuras alámbricas: agregue activos a la biblioteca desde Illustrator cuando suponga que necesitarán modificarse y actualizarse globalmente, o agréguelos desde InDesign cuando sepa que querrá modificarlos individualmente. Tenga en cuenta que también puede crear gráficos en Illustrator, copiarlos y pegarlos en InDesign y luego modificarlos si es necesario antes de agregarlos a la biblioteca como un recurso de InDesign.

Si olvida qué activo gráfico se crea con qué aplicación, mire el lado derecho de cada elemento en el panel Biblioteca mientras usa Mostrar elementos como una lista.

Flexibilidad de Adobe InDesign con contenido y copia

Para asegurarse de que puede cambiar fácilmente la copia y la tipografía en sus estructuras alámbricas, cree contenedores de texto en InDesign. InDesign tiene una buena función para llenar cuadros de texto con texto de marcador de posición. Cuando dibuje un cuadro de texto, haga clic con el botón derecho en él y elija Rellenar con texto de marcador de posición.

Agregue cuadros de texto a la biblioteca de Adobe como cualquier otro elemento gráfico arrastrándolos. Cuando utilice esos activos de texto más adelante como parte de su diseño de estructura alámbrica, puede modificar el cuadro de texto, así como su contenido en su estructura alámbrica.

Considere también crear elementos de interfaz de usuario de botón en InDesign. Para crear un botón, cree un marco de texto, escriba el texto y luego use Objeto > Opciones de marco de texto para definir el espaciado entre recuadros. Ajuste la justificación vertical del texto dentro de un cuadro eligiendo la opción deseada del menú desplegable Alinear.

Cambie a la pestaña Tamaño automático y elija el tamaño automático apropiado (que probablemente sería Solo ancho) y un punto de referencia conveniente. Si no desea permitir que InDesign divida su texto en más de una línea, marque la opción Sin saltos de línea.

Usar recursos existentes

Hay una gran cantidad de kits de interfaz de usuario de creación de prototipos y estructura alámbrica de Adobe Illustrator disponibles en Internet que puede comprar o incluso descargar de forma gratuita si desea una solución lista para usar. Tal vez ya tenga elementos que pueda desenterrar de sus proyectos terminados. Abra esos documentos, modifique los elementos creados previamente según sea necesario y colóquelos en sus respectivas bibliotecas.

Si está diseñando para una plataforma en particular, por ejemplo, una aplicación de iOS o Android, asegúrese de leer detenidamente sus pautas de interfaz humana y utilizar los recursos adecuados. Puede ser conveniente tener elementos de interfaz de usuario que sean específicos para varias plataformas en su kit.

No se concentre demasiado en tratar de dar cuenta de cada activo o estado futuro en sus bibliotecas antes de comenzar con el proceso real de creación de esquemas. Puede agregar activos a sus bibliotecas más tarde y desarrollarlos a medida que avanza.

Creación de plantillas de estructura alámbrica de InDesign

Queda un paso de preparación más importante: cree plantillas de InDesign que usará para hacer estructuras alámbricas. Comience por crear un nuevo documento con la intención de publicación web o digital y defina los tamaños de página apropiados para las pantallas para las que está diseñando.

Dado que se recomienda que utilice algún tipo de cuadrícula para diseñar sus elementos de estructura alámbrica, configure los márgenes y cree una cuadrícula de columnas estableciendo el número deseado de columnas y el espacio de canaleta. Puede cambiar esa configuración más tarde desde Diseño > Márgenes y columnas con su página (o páginas) maestra respectiva seleccionada en el panel Páginas.

Si necesita guías horizontales y guías verticales complementarias, créelas manualmente o cree una cuadrícula adicional utilizando Diseño > Crear guías. Al crear una cuadrícula, es útil utilizar una de las herramientas de calculadora de cuadrícula en línea, como Gridulator.

También puede crear plantillas adicionales para fines de presentación con maquetas de dispositivos como marco para sus estructuras alámbricas. Dado que un documento de InDesign se puede vincular a otro, puede crear estructuras alámbricas en un documento de InDesign y luego colocarlo en otro para presentaciones.

Aunque pueda parecer complicado al principio, en realidad es un flujo de trabajo muy simple y efectivo. Mantener los wireframes reales en un documento separado hace que sea más fácil continuar construyendo desde wireframes aprobados hasta un diseño visual pulido.

También es sencillo crear plantillas listas para presentaciones en las que colocar wireframes, agregar etiquetas y comentarios, y poder mostrar su mejor solución al cliente. Cuando realice modificaciones en un archivo de estructura alámbrica, simplemente actualícelo como cualquier otro enlace en un documento de presentación y ¡ta-daaa! Todos los cambios están en su presentación también.

En el panel Capas, puede preparar capas separadas para diferentes tipos de contenido: elementos de la interfaz de usuario, funciones interactivas, gestos, etiquetas y notas. Si necesita más capas para un proyecto específico, podrá agregarlas fácilmente en cualquier momento durante el proceso de estructuración.

Cuando haya terminado de crear, guarde sus plantillas como archivos de plantilla InDesign.indt. Después de guardar todas las plantillas que necesita, finalmente está listo para comenzar a realizar wireframes de manera eficiente.

Construcción de estructuras metálicas

Lo primero es lo primero: comience con la página maestra. Arrastra todos los elementos globales que serán iguales en todas las pantallas de tu proyecto desde la biblioteca. Si está diseñando un sitio web, estos suelen ser encabezados con un logotipo, navegación y pie de página. Como puede crear más de una página maestra y pueden heredar unas de otras, puede aprovechar las páginas maestras anidadas.

Por ejemplo, según el proyecto, puede crear una página maestra para un elemento de la interfaz de usuario, como una ventana emergente modal o de diálogo, y luego crear nuevos maestros basados ​​en el primer maestro, modificando solo los elementos que deben ser diferentes.

No puede seleccionar, cambiar o eliminar elementos maestros en páginas de documentos normales a menos que haga clic en ellos mientras mantiene presionadas las teclas Comando/Control + Mayús para anular el maestro. Una vez que se anula su elemento, puede cambiar cualquiera de sus parámetros o eliminarlo por completo del diseño.

Tenga en cuenta que incluso cuando anule el elemento, los parámetros que no haya cambiado se heredarán del maestro. Por ejemplo, si anula un elemento cambiando su color, su tamaño no cambiará ya que todavía está conectado al maestro. Además, si lo cambia en la página maestra, también se modificará en el elemento que anuló anteriormente.

Al insertar páginas adicionales en su documento de estructura metálica, recuerde basarlas en su respectivo maestro. Si necesita cambiar el patrón de las páginas que ya están en el diseño, selecciónelos en el panel Páginas, haga clic con el botón derecho y elija Aplicar patrón a las páginas. Utilice los activos de la biblioteca y organícelos con las guías inteligentes y las opciones de alineación para crear los diseños finales de estructura alámbrica de la interfaz de usuario.

Si está creando diseños para más de un tamaño de pantalla, cree diseños alternativos desde Diseños > Crear diseño alternativo o el panel Páginas. Puede usar reglas de diseño líquido al crear diseños alternativos para adoptar automáticamente elementos de página de un tamaño y orientación a otro, o puede controlarlos manualmente. Para aplicar y probar las reglas de diseño líquido, utilice la herramienta Página o abra el panel Ventana > Interactivo > Diseño líquido.

Agregar interactividad

Adobe InDesign tiene un montón de funciones de interactividad que puede aprovechar al crear estructuras alámbricas o prototipos. Las características que incluirá dependerán del formato final que necesitará para sus esquemas, prototipos o presentaciones.

Si está exportando como PDF, la interactividad será limitada, pero al menos puede hacer que los enlaces entre pantallas funcionen utilizando el panel de hipervínculos para crearlos. Seleccione el elemento que desea que se comporte como un vínculo y haga clic en el icono Nuevo hipervínculo. En el menú desplegable Vincular a, elija Página e ingrese el número de página deseado. Repite esa acción en todos los elementos que quieras que se comporten como enlaces entre las pantallas.

También puede agregar hipervínculos a los objetos que residen en las páginas maestras, lo que puede ahorrar mucho tiempo. Cree enlaces en la página maestra una vez y funcionarán en todas las pantallas de su documento.

Puede crear botones a partir de cualquier gráfico, texto, imagen o grupo de elementos. Para crear un botón a partir de un objeto seleccionado, utilice el panel Ventana > Interactivo > Botones y formularios y haga clic en el icono Convertir en botón.

Los botones pueden tener diferentes estados creados para apariencias normales, dinámicas y de clic. Para agregar estados de rollover o clic a los botones, haga clic en ellos en el panel Botones y edite la apariencia del botón para cada estado. Para agregar una acción a un botón, haga clic en un signo más y selecciónelo de la lista. Tenga en cuenta que las acciones en SWF/EPUB no funcionarán en PDF interactivos.

Para crear elementos emergentes, seleccione Mostrar/ocultar botones y formularios. Para ocultar los botones hasta que se activen, marque la opción Oculto hasta que se activen. Puede incluir objetos de varios estados en un PDF interactivo, pero solo si primero los exporta como SWF y luego los vuelve a colocar en el diseño de InDesign para exportarlos a PDF. Este flujo de trabajo es tedioso y los archivos PDF no se pueden ver correctamente en todos los lectores de PDF, así que trate de evitarlo a menos que sea realmente necesario.

Si desea convertir su documento en un prototipo HTML mediante la función Publicar en línea de InDesign CC 2015, puede utilizar muchas más opciones interactivas, como animaciones, objetos multiestado y acciones de botones múltiples, incluidos todos aquellos destinados a la exportación SWF/EPUB.

Puede agregar animaciones simples usando el panel Animación y eligiendo uno de los ajustes preestablecidos integrados en el menú desplegable y configurando sus propiedades. Un objeto puede tener solo una animación aplicada, pero si necesita agregar más, agrupe su objeto con un cuadro vacío y use la nueva animación en ese objeto recién creado.

Para los elementos de la interfaz de usuario que requieren mostrar diferentes estados, cree un objeto de varios estados. Cree un objeto separado para cada estado. Los objetos pueden ser un solo elemento (imagen, cuadro de texto, gráfico) o un grupo de diferentes elementos. Abra el panel Ventana > Interactivo > Estados del objeto, seleccione todos los objetos que creó para el objeto multiestado y haga clic en el botón Nuevo en la parte inferior del panel.

Después de crear su objeto de varios estados, deberá crear botones para pasar de un estado de objeto a otro. Las acciones Ir al estado siguiente o Ir al estado anterior revelan el estado específico del objeto con la acción Ir al estado.

Si desea tener un marco desplazable en su estructura alámbrica/prototipo, la forma más fácil de crear uno es utilizando la extensión Universal Scrolling Frames de Ajar Productions. Después de descargar e instalar la extensión, puede usarla como un panel de InDesign. Para un marco desplazable, deberá crear contenido y un marco para un contenedor.

El contenido desplazable puede ser un marco de texto, una imagen o varios elementos agrupados. Cuando haya terminado de crear el contenido y el cuadro contenedor, seleccione el contenido y Editar > Cortar. Luego seleccione el contenedor y pegue el contenido dentro usando Editar > Pegar en. Seleccione el contenedor y, utilizando Universal Scrolling Frames, ajuste la dirección de desplazamiento deseada.

Al combinar botones, objetos de varios estados, animaciones y marcos desplazables, puede lograr una rica experiencia interactiva. Para probar la interactividad en InDesign, use el panel de vista previa de interactividad de EPUB. Puede obtener una vista previa de una sola página o de todo el documento. Amplíe el panel de vista previa según lo necesite.

Si no ha utilizado las funciones interactivas de Adobe InDesign, prepárese ya que, al principio, hay una pequeña curva de aprendizaje. Pero con un poco de práctica y algo de prueba y error, los dominarás rápidamente.

Exportación de documentos terminados

Cuando haya terminado de crear los wireframes y los archivos de presentación, todo lo que queda es mostrar sus grandes ideas al cliente de la mejor manera posible. Para ese propósito, deberá exportar sus esquemas en un formato que su cliente pueda obtener una vista previa. Aunque los archivos de InDesign se pueden exportar en una variedad de formatos, probablemente utilizará PDF interactivo o la función Publicar en línea si prueba prototipos funcionales de baja o alta fidelidad. Para guardar como un PDF interactivo, elija Adobe PDF (Interactivo) en el menú desplegable Formato en el cuadro de diálogo Exportar y ajuste las propiedades según sea necesario. No olvide marcar Formularios y Medios si hay elementos interactivos que desea incluir. Los clientes pueden ver esquemas en formato PDF en el Adobe Reader gratuito y escribir todos sus comentarios en ese mismo archivo.

También puede usar un documento PDF exportado desde InDesign para crear un prototipo de InVision (o alguna otra herramienta que admita archivos PDF). Si su herramienta de creación de prototipos estándar, tal vez Marvel, no puede importar un PDF, exporte sus páginas de estructura metálica de InDesign como imágenes JPEG o PNG.

Para exportar un prototipo HTML interactivo que se puede ver en navegadores modernos en diferentes dispositivos, vaya a Archivo > Publicar en línea, o haga clic en el botón Publicar en línea de la Barra de aplicaciones. Una vez que el documento se prepara para su publicación en línea y se carga, puede copiar una URL del documento para compartir con las partes interesadas y comenzar el proceso de revisión. También puede incrustar el prototipo publicado en su sitio.

Una desventaja de la función Publicar en línea es que no tiene ningún control adicional sobre la exportación y los archivos siempre se almacenan en los servidores de Adobe. Además, sigue siendo una función de vista previa y no puede estar seguro de en qué dirección la desarrollará Adobe, o incluso si se suspenderá.

Una vez que su estructura alámbrica/prototipo se exporta, es hora de que comience el proceso de prueba, revisión e iteración.