Prototipo

¿Qué es un prototipo?

Si buscamos la definición de prototipo en el internet nos encontramos con esto:

Screen Shot 2018-04-16 at 9.59.06 AM

Basado en esa definición entonces un prototipo en Adobe XD es cuando tomamos nuestra maqueta, le añadimos interactividad y la compartimos con amistades y hasta el cliente para que tenga una visualización de cómo va a funcionar o moverse su aplicación entre página y página. De este modo obtenemos comentarios y correcciones del trabajo realizado hasta el momento.

Screen Shot 2018-04-16 at 9.55.43 AM

Modo de diseño.

Screen Shot 2018-04-16 at 9.55.30 AM

Modo de prototipo.

Durante el proceso de aprendizaje con Adobe XD, notamos que debajo de la barra del menú principal, vemos que la aplicación tiene en su parte superior derecha, dos secciones: una de “Diseño” y otra de “Prototipo“. Usamos la sección de diseño para crear nuestra maqueta y tenemos disponible todas las herramientas de diseño de Adobe XD. Cuando comenzamos a crear interactividad en nuestra maqueta, para visualizar su funcionamiento; la sección de prototipo reduce sus herramientas a dos: la flecha de selección y la lupa. Un atajo en el teclado, entre ambas secciones, es presionando la tecla de “Control” + “Tab” cada vez que deseemos diseñar y probar, diseñar y probar.

Screen Shot 2018-04-16 at 9.42.36 AM

Al momento de seleccionar la sección de prototipo en nuestra maqueta; Adobe XD nos muestra un primer mensaje en pantalla enseñándonos cómo vamos a darle interactividad a la maqueta. Este proceso se lleva acabo entrelazando “wires” o cables entre aquel objeto el cual deseemos que sea un activador y su destino.

Algo muy importante para recordar es que Adobe XD utiliza la posición de tus “artboards” para nombrar o seleccionar el “Home Screen” como la primera página o pantalla a mostrarse en tu maqueta. Recuerda que no es lo mismo que tu nombres tu propio “Home Screen” en tus “artboards“; a que Adobe XD nombre la pantalla que es el “Home Screen” de la aplicación. La formula que utiliza el programa es: “Top most” o “Left most” o sea la página más alta que acomodes en la parte superior de tu maqueta o la página más alta que acomodes a la izquierda del programa.

Screen Shot 2018-04-16 at 10.33.39 AM

En el ejemplo de arriba notarás que el “Artboard – 4“; Adobe XD lo seleccionará como el “Home Screen” de la aplicación debido a su posición en la maqueta. La misma se encuentra más a la izquierda y más sobre el “Artboard – 1“; aunque el mismo se haya diseñado último en todo el proceso. El “Home Screen” se identifica con una pestaña gris y dentro de ella una casita blanca. Cuando seleccionas la casita, el recuadro cambia de color gris a color azul. Este color te indica que se sleccionó y se activó el “Home Screen“.

Digamos que deseas mostrarle a tu cliente en Japón una sección del prototipo pero no deseas mostrarle toda la maqueta. Esto lo puedes lograr seleccionando la página deseada a ser mostrada como primera y luego activando la casita de “Home Screen”. Cuando el cliente abre la maqueta, la misma le abrirá en esa sección y podrá interactuar solo con esa seccción. Nota – “teniendo en cuenta de que no exista un botón que interactue con la página que no deseas que el cliente vea”.

Screen Shot 2018-04-16 at 10.47.22 AM

Página #1 es el “Home Screen” de la maqueta.

Screen Shot 2018-04-16 at 10.47.30 AM

Página #3 es ahora el nuevo “Home Screen” de la maqueta.

En las dos imágenes superiores notarás unas líneas azules entre página y página; esto son los “wires” o cables que entrelazan a cada página y crean la interactividad. En el próximo post hablaremos sobre ellos.

“¡Hasta luego!”.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión /  Cambiar )

Google photo

Estás comentando usando tu cuenta de Google. Cerrar sesión /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión /  Cambiar )

Conectando a %s