youtube(pp).com

No soy partícipe de la piratería, nunca me ha gustado; pero este herramienta en la web la veo interesante digamos para un viaje! Digamos que nos vamos de viaje para Canada o Europa o a cualquier parte del mundo; hasta una simple visita en auto a Ponce; vamos a estar por lo menos 2 horas dentro del auto, o si visitamos al doctor y en su sala de espera, vamos a estar unas tres horas; no te gustaría ver algunos videos entretenidos que te distraigan la mente. Quizás en donde estes no hay buena señal para tu celular y el doctor no u oficina no tiene Wifi gratis! ¿Qué te parece entonces llenar o colocar en tu iPad o celular videos para esos momentos? Te recomiendo youtubepp.com ; ¿YouTubePP? Si; así como lo lees. ¿Cómo funciona?

Primero debes de visitar cualquier video que te agrade en YouTube; seleccionas su «link» y cuando abres una nueva ventana en tu explorador de internet; escribes en el «search» youtubepp.com te salé la página de y2mate.com. En esa página te sale una barra en la que puedes pegar el vínculo copiado de Youtube y presionas el botón de «Start» el cual te va a mostrar una vista previa del video que deseas bajar a tu computadora y puedes escoger los formatos que más te agraden para guardar y ver luego.

En este caso, seleccioné el mp4 a 360p; luego presionas el botón verde de «Download» y listo! el video comienza a descargarse en tu computadora.

Repito… no soy partícipe de la piratería pero para ciertos momentos es bueno tener par de viejitos para entretenerse en momentos de mala señal.

Una vez el video bajado puedes ver el video en «Quicktime Movie» o cualquier otro programa que permita el formato mp4; que hoy día es universal en todas las plataformas.

¡Espero les agrade el grupito de hoy!

¡Buenas tardes!

Recuerda! solo escribes youtubepp en internet y listo!

Anuncio publicitario

Entrega de archivos

Ayer te explique por qué tienes que exportar cada página bien ordenada e identificada; debido a lo que estas viendo en la imagen inferior. Imagina buscar dentro de este directorio; que contiene 253 documentos; la gráfica del «Username» a 3x!; y no deseas tener a un programador enfogonado contigo; jejejejej.

Ahora vamos a exportar cada página.

Dentro de Adobe XD seleccionas la primera página y seleccionas File/Export/Selected… o «Command + e«. En este primer ejemplo verás que ya exporté a cada página el formato .PNG. Cada página la identifiqué en Folders enumerados desde 00- hasta 11- + el nombre de la página. Observa la siguiente imagen. Cada página; dependiendo de lo que contenga en su interior; graba archivos desde 1x a 3x de cada uno. Por eso es bueno tener un PDF impreso de cada página para visualizar cada imagen exportada.

Cuando deseas exportar a PNG te recomiendo usar estos parámetros…

Cuando desees exportar a JPG te recomiendo usar estos parámetros… y

Cuando desees exportar a SVG te recomiendo usar estos parámetros… (Recuerda que los archivos SVG los puedes abrir también en Adobe Illustrator.)

Ahora te preguntarás: ¿Para qué es el Export Batch; el cual está desactivado?

¿Recuerdas el panel de Layers? ¿Recuerdas el icono que aparece cada vez que el «mouse» hace un «roll over» sobre cada layer? Ese icono de «share» sirve para cuando un día recibes la llamada del programador y te dice: —Vale, perdí o dañé la imagen del botón de la página de Home; el botón de solicitar servicio y el botón de Regresar de la página de Gracias»; ¿Me los puedes enviar otra vez?

¡No problem!

Rápidamente abres el panel de «layers«; buscas en tu maqueta los objetos que te solicitó el programador; y cada vez que seleccionas uno; en los «layers» se va a sombrear el objeto seleccionado. Ahora con el «mouse» de tu computadora activas ese botón de «Batch Export» para cada objeto, y si deseas cambiarle el nombre el objeto o «Layer» lo puedes hacer también en estos momentos.

Botón sin nombre.

Botón con nombre nuevo.

Una vez estes listo para exportar los botones solicitados, solo debes de presionar «Export Batch» o «Shift + Command + e«; creas un folder nuevo y luego el formato adecuado o solicitado: PNG; SVG o JPG.

En este caso cree un folder con el nombre de «solicitados» y dentro del mismo guardé la exportación.

Como podrás ver cada botón fue exportado en sus distintos tamaños.

Al final del camino comprimes todos los archivos en un archivo .ZIP; buscas un disco externo y entregas tu maqueta al programador.

Archivo .ZIP; tamaño 139 MB.

Ahora bien ¿cuál es el próximo paso? I have no idea! jejejejejejej eso deseo saber yo! Me gustaría que algún programador me dijera o me ayude a ver la luz al final del camino. A mi entender un programador usa el programa que mejor le sirva para programar y crear aplicaciones para iOS o Android OS. Los que programan para iOS suelen usar el programa llamado «Xcode 9«; con el lenguaje «Swift 4«. En este link encontrarás más información de ese mundo: https://developer.apple.com. Para ser un «Developer» debes de tener una licencia a mi entender, en fin ese mundo es todo un tema distinto. Así que si eres Programador y deseas mostrarnos cómo llevas un prototipo a una aplicación final para aprobación y distribución estoy a tu disposición para compartir ese conocimiento y requisitos.

Espero te haya gustado esta serie de escritos relacionados a la creación de una maqueta y prototipo usando Adobe XD. Juega con XD; tiene muchas probabilidades de diseño con herramientas sencillas y deja tu comentario en los escritos para ayudarte con cualquier pregunta que tengas al respecto.

Eso fue todo por el momento; visita nuevamente el link del prototipo y compártelo con un programador que conozcas para ver si logramos pasar juntos a la siguiente faceta.

https://xd.adobe.com/view/7f784932-20f1-4fed-a748-15c7a4b86882

Embed Code:

https://xd.adobe.com/embed/7f784932-20f1-4fed-a748-15c7a4b86882

¡Buen fin de semana!

PD: a ver que nos inventamos ahora!…

Tipos de exportación

La pregunta ahora es; ¿cómo le entrego la maqueta a un «Developer«?; y quizás; ¿qué usa el Programador y qué necesita que yo como Diseñador le entregue?

Como Diseñador debes de entregarle varios formatos al Programador para que le dé vida a tu maqueta pero más aún debes de darle un cariño enorme a los detalles de tu maqueta para que el Programador no se pierda y debes de trabajar junto a el para hacerle la vida más fácil; a no ser que el mismo te diga: «Lo siento, trabajo solo; no me llames; yo te llamo«… jejejejejejejej…

Anyway; vamos a separar esta sección en pequeñas secciones para hacer la entrega más llevadera. Primero vamos a mencionar que a un programador se le debe de entregar todos o algunos formatos que voy a mencionar a continuación, al momento de hacer tu exportación del trabajo.

Vas a exportar tu maqueta en los formatos:

1. PDF (Portable Document Graphic) — Compartir el documento completo.
2. SVG (Scalable Vector Graphic) — Compartir elementos gráficos, logos e iconos.
3. PNG (Portable Network Graphic) — Compartir imágenes con transparencias.
4. JPEG (Joint Photographic Expert Groups) — Compartir imágenes fotográficas.

Exportemos primero el PDF de la maqueta; seleccionaremos File / Export / All Artboards.

Adobe XD nos preguntará en dónde deseamos guardar el PDF?; vamos a crear un nuevo Folder en nuestra computadora, preferiblemente adjunto a nuestro proyecto; seleccionamos el formato; escogemos todas las páginas como un solo PDF o separadas las páginas; y presionamos el botón de Export All Artboards.

Como resultado obtenemos un PDF con todas las paginas de nuestra maqueta. Este documento lo podemos hasta imprimir para comentar con el programador.

Mi documento pesó unos 238 MB; así que pueden imaginar los tamaños que podemos obtener de maquetas que sus diseños son enormes! OK esa fue la parte más fácil; pero ahora viene lo interesante. La maqueta que diseñamos tiene unas doce páginas y cada página contiene fotos, iconos, textos, vectores agrupados, etc, etc. Mi consejo en este momento es que si durante el proceso de diseño no te has detenido a nombrar adecuadamente tus layers; te aconsejo que te tomes un tiempo para nombrarlos adecuadamente.

¡Ready! OK…

Vas a empezar a exportar cualquier formato de tu preferencia; sea el PNG, sea el JPG o sea el SVG. Lo que necesitamos es que exportes página por página, y que cada vez que exportes página por página; que nombres los folder de cada página que van a contener los elementos de cada una. Comencemos por la primera página!

Esta página se llama «Splash» y la misma contiene un rectángulo (vector), color azul turquesa; el texto o palabra «studio» con la fuente San Francisco; y el logo JRV es una imágen blanca en formato PNG. Asi que tenemos: vectores (el cuadrado), una fuente, y una imágen en pixeles en PNG. Si seleccionas solo el nombre «Splash» al tope de la página y lo exportas digamos como un PNG; vas a obtener un folder con el diseño de la página «Splash» en su totalidad pero en 3 archivos (.png) de tamaños distintos. ¿Por qué? por que Adobe XD siempre exporta la maqueta en esos tres tamaños debido a los distintos tamaños de pantallas que existen hoy día. 1x es para pantallas Non-Retina o Non-HIDPI; 2x y 3x son para las pantallas Retina Display en adelante. Hoy día existen pantallas que tienen una densidad exagerada de unos 400% (xxxhidpi).

Voy a tomar otro ejemplo; escojamos la página de «Password«… selecciona con el ratón de tu computadora haciendo un click y arrastrando desde arriba hasta abajo. Verás que todo se marca; todo queda al descubierto. La foto de fondo, la imagen del teclado iOS, los textos de username y password con sus respectivas líneas.

Seleccionas File/Export/Selected o «Command +e«; luego crear un folder con el nombre de password y seleccionas el formato PNG; para iOS y que guarde todos los diseños empezando desde el 1x como se muestra en la siguiente imagen.

Luego seleccionas el botón de Export; buscas el folder donde guardaste el archivo y notarás todo lo que guardó. Aquí es que notamos la ausencia de nombrar adecuadamente los layers y las imágenes durante el proceso de diseño. Por ejemplo vemos la foto de fondo con su nombre de compra de iStockphoto.com. Observa que tiene la original como 1x; aunque no lo dice; luego @2x; y finalmente @3x. Observa los tamaños que van desde 1.8MB la de 1x; 7MB la de 2x; y 14.5MB ;a de 3x.

Quizas no tengas aún el ojo para ver los detalles pero la imágen 1x se ve media borrosa; la 2x se vé más sharp en los detalles y la 3x es más grande. Aquí te dejo las tres fotos, tocalas para que se abran y trata de ver la diferencia. Orejita, notarás la diferencia en el brillo de las hojas de los árboles.

1x

2x

3x

Siguiendo este patrón se guarda el rectángulo opaco del centro el cual difumina la foto; y lo mismo sucede con las palabras Username y Password con la línea y la imagen del teclado iOS; todo en 1x; 2x; y 3x. De haber nombrado el grupo del Username y el Password debidamente no hubieramos obtenido esos nombres alocados de «Symbol 1 – @ 2x«. Recuerden nombrar correctamente y adecuadamente todo lo que utilicen en sus maquetas. Esta página solamente pesa 24.7MB.

Terminemos por hoy hasta aquí y mañana continuaremos realizando lo mismo exportando las demás páginas usando los formatos restantes, pero esta es la temática a realizar con todas las páginas. Salvar cada una en su propio Folder para tener todo bien organizado.

¡Buenas Noches!

Detalles del Diseño

Antes de enviarle al programador tu prototipo, tienes la opción de enviarle un «link» en el cual el programador puede ver con exactitud las medidas y espacios que hay entre cada imagen u objeto colocado en tu maqueta; tanto colores como estilos. Toda esta información el programador la usa para programar, digamos en Xcode de Apple, la maqueta diseñada.

Luego de enviarle el «link«, el programador lo abre, digamos en Chrome o Safari, y comienza a ver página por página el diseño. Cuando selecciona cada elemento puede notar que se marcándoselo unas líneas guías rosadas las cuales le muestran el espacio sea en px; dp; o pt.

NOTA: La unidad de medición para iOS es en pt; la unidad de medición para Web es en px; y la unidad de medición para Android es en dp. Para los «artboards» creados costomizables es tambien px.

Estas siglas significan:

• pt = Puntos (1/72 de una pulgada, basado en el tamaño físico de la pantalla).
• px = Pixeles actuales en la pantalla.
• dp = Densidad de un pixel independiente (Unidad abstracta que está basada en la densidad física de la pantalla).

 ¡Usen las medidas de pixeles!; es más fácil.

Regresando a los parámetros del diseño…

Puedes notar que la columna derecha te muestra información de lo que selecciones a tu izquierda; por ejemplo; seleccioné la palabra Ver del botón para la sección de Diseño Web; notarás unas líneas guías rosas marcando la distancia hasta los márgenes de la pantalla y el tamaño del recuadro que compone la palabra Ver. El recuadro mide 36 px X 29 px; la distancia o ubicación en la pantalla es 294 px en el cuadrante X; y 464 px en el cuadrante Y. Puedes notar el estilo de la fuente; tamaño; alineamiento; color; opacidad; hacia qué apunta al tocar; transición; velocidad y duración. En fin toda una gama de detalles que solamente necesita saber un programador para poder poner a correr tu prototipo. Todo objeto tiene un parámetro distinto y el programador puede copiar esta información para usar en su trabajo como «developer».

En el próximo «post» hablaremos de cómo entregarle al programador toda esta información.

¡Buen provecho!

¿Algún comentario?

Cuando compartimos nuestros prototipos en la internet, toda persona que tenga el link; tenga o no tenga un «Adobe ID» pueden abrir el «link» en cualquier navegador de internet, entrar con sus credenciales, sea de Adobe o como un visitante y hacer comentarios sobre cada página del prototipo. Si notas bien en la imagen inferior, debajo del área donde escribes los comentarios, hay un ícono de un «pin» o tachuela y con ella puedes colocarle un número a tu comentario y colocar ese número en el lugar de el cual estes escribiendo un comentario. De esta forma el creador del prototipo puede seleccionar el número y ver qué persona le hizo el comentario y poder responderle.

Te preguntarás, ¿Cómo el diseñador sabe que alguien le dejó un comentario? El diseñador va a recibir un e-mail de Adobe, dejándole saber que hay comentarios en su prototipo; adicional recibirá una alerta en su «Creative Cloud» y cuando abrá las alertas podrá ver los comentarios realizados.

Bueno; términamos con la sección de probar, compartir y comentar; ahora en los próximos «post» hablaremos sobre cómo preparar tu maqueta para entregarla al programador o «Developer» para que haga su parte del proceso; la más importánte!; sin programador, no hay programa!

¡Buenas noches!

«Share»

Antes de hablarte de cómo podemos compartir nuestro prototipo en la «web«; quiero aclarar un punto que toqué ayer el cual creó un poco de dudas. Mencioné que cuando seleccionas el botón de «Preview on Device» y tienes tu iPad y tu iPhone conectados a la computadora ambos con el cable USB de cada uno; podías ver tu prototipo en vivo y hasta editarlo en vivo. Todo esto es cierto pero debes saber y entender que si la aplicación o maqueta que estas diseñando es para iPhone, pues en tu iPhone la verás al 100% de la pantalla; como Dios manda!, pero en tu iPad verás también la versión iPhone pero no a «full screen«; se apreciará al 1x de su resolución. Para que se agrande y cubra la pantalla del iPad completa; esos son otros «veinte pesos«, como dicen por ahí! Ya ese detalle de zoom a 2x le corresponde al «Developer«. Si deseas ver tu aplicación en formato iPad, debes de diseñarla también en tamaño para iPad.

Un  ejemplo de esto es la aplicación de «Credit Karma«; la cual fue creada para iPhone; (¡Desconozco si están trabajando con una nueva!); y si la utilizas en tu iPad, vas a ver que no cubre la pantalla completa; solo la puedes usar a 1x de su tamaño; pero tienes la opción de agrandarla a 2x de su tamaño, presionando el botón que se encuentra al pie del iPad. Si deseas cubrir todas las bases, debes de diseñar también tu aplicación en tamaños para tabletas.

Aplicación «Credit Karma» a 1x de su tamaño.

Aplicación «Credit Karma» a 1x de su tamaño.

Aplicación «Credit Karma» a 2x de su tamaño.

Aclarado ese detalle, hablemos ahora del botón de «Share«.

Cuando deseas compartir tu prototipo con clientes o amistades o el mundo entero, solo debes de presionar el último botón de la parte superior derecha de Adobe XD. Cuando lo seleccionas puedes publicar tu prototipo en tu espacio personal en la nube de Adobe; también puedes publicar los detalles de medidas, color y estilos para que el «Developer» se le haga más fácil programar la aplicación, utilizando el nuevo update en Beta nombrado «Publish Design Specs«; y una vez arriba en la nube, puedes manejar los prototipos subidos; como borrar prototipos viejos.

Antes de enviar por email o mensaje de texto el link creado del prototipo; puedes darle un nombre nuevo; seleccionar si permites comentarios; que se abra a pantalla completa o que le muestre a tus clientes los puntos a tocar para una navegación sencilla. Adicional puedes abrir el «link«; copiar el «link» para distribuirlo y hasta usar el código para mostrar tu prototipo en tu página de internet.

En el siguiente link puedes visitar el prototipo que hemos estado trabajando; navegar por el mismo y hasta puedes hacer tus comentarios.

LINK: https://xd.adobe.com/view/6788452e-9bff-4542-a599-b7009e4dda50

¡Disfruta la trillita y deja tus comentarios!

 

«Device Preview»

Otra forma de la que podemos ver y probar nuestro prototipo es conectando un celular (iPhone o Android) con su cable USB a la computadora en donde estemos diseñando nuestra maqueta. Pero antes debemos de instalar en nuestros dispositivos; sea iPad o iPhone la aplicación Adobe XD. Encontrarás más información desde este link en Adobe.com; https://www.adobe.com/products/xd.html#mobile.

Luego de que la aplicación esté instalada, presionarás el botón en forma de ícono de celular que se encuentra en la parte superior derecha en tu computadora.

Si no tienes tu celular conectado a tu computadora te mostrará un mensaje como el anterior y te indicará también en dónde puedes bajar la aplicación de Adobe XD para tu dispositivo. Adobe XD tiene la habilidad de que puedes ver tu maqueta en diferentes dispositivos simultáneamente. Digamos tienes una maqueta con diseños para iPhone y iPad; pues una vez todos los dispositivos estén conectados; en esta ventana los verás a todos y listos para probar tu prototipo.

Luego de instalar la aplicación en tu dispositivo; debes de «loguearte» en ella con el usuario y la clave de acceso de tu Adobe Creative Cloud; también puedes usar Facebook o Google, de no tener cuenta con Adobe; pero mi consejo es siempre tenerla.

Al activar la aplicación de Adobe XD, verás el «Splash Screen» de Adobe; luego una carga en porciento de tu prototipo y finalmente aparece la página que seleccionastes como el «Splash Screen» de tu prototipo. En el video que te mostré al tope de este escrito me verás jugando con la aplicación. Recuerda que mientras tengas el celular conectado a tu computadora; podrás mover y editar tu maqueta y los cambios se reflejan en el celular en vivo; no tienes que salvar el archivo; ni cerrar ni volver a abrir la aplicación.

Oto modo de ver y compartir tu prototipo es salvandolo en el espacio que te dá Adobe en la nube para guardar y sincronizar tus trabajos. Todo usuario con la licencia del Creative Cloud de Adobe tiene 100GB de espacio en la nube.

Cuando Adobe se sincroniza con tu computadora; crea un «foulder» o «atajo» en tu ventana del «Finder» para acceso inmediato. Guarda tu maqueta en ese foulder y tendrás acceso a todos tus trabajos desde todas tus aplicaciones móbiles de Adobe y computadoras.

Regresando a Adobe XD en tu computadora; otro modo de ver tus prototipos en tu celular es usando el botón de «Share» donde puedes publicar y compartir un vínculo directo desde tu espacio en el Creative Cloud en Adobe.

Con el prototipo guardado en la nube; puedes abrir el mismo con la aplicación del celular de Adobe XD sin tener que estar conectado a tu computadora con el cable USB. La aplicación en el celular puedes ver los «art boards» por separado; puedes compartir un vínculo en las redes sociales, copiar y enviar solo una pantalla y hasta pedirle a la aplicación que te ayude a identificar los «hotspots» para fácil navegación del prototipo. Este detalle se activa cada vez que presionas erroneamente en la pantalla de tu celular; Adobe XD te indica dónde seleccionar correctamente marcando los lugares correctos en color azul tenue intermitente.

Por hoy dejemoslo hasta aquí!; mañana hablaremos un poco más de compartir el vínculo  de tu prototipo con amistades y clientes.

¡Buenas noches!

Jugando con XD

Luego de jugar un rato con Adobe XD le añadí páginas necesarias para darle sentido a la aplicación; notarás que al final obtuve una telaraña de cables los cuales te muestran como corre la interactividad en la navegación de sus páginas. En el diseño agregué cinco páginas por cada servicio; una explicación del mismo, una foto relacionada y un botón de solicitud del servicio. Cuando el cliente presiona el botón, pasa a una página donde el cliente coloca su información de contacto y luego al enviar el correo electrónico vemos una página de «agradecimiento«. Todas las páginas tienen una navegación sencilla en la que puedes regresar a la página anterior o salir por completo. En el siguiente video puedes ver cómo se aprecia la navegación en el «Desktop Preview«.

Nota: Solo en la Mac puedes grabar la navegación del prototipo; el mismo se graba sin audio y en formato MP4.

Tengo entendido que en la plataforma de Windows puede que tengas que ingeniártelas tu mismo para poder grabar en video el prototipo; quizás lo puedas hacer con un «screen recording» directo en la pantalla; pero no te lo puedo asegurar. ¡No uso Windows! jejejejeje…

¡Si eres usuario de Windows, déjame saber si funciona o no!

En el proceso de diseño, la maqueta va creciendo más y más; por ende el archivo de XD también.

UPDATE:

— No me quería retirar por hoy, no sin antes compartir con ustedes el «Embed Code» y el «link» que nos facilita Adobe XD para compartir la maqueta en nuestras páginas web. Luego, en el próximo «post» les dejo saber cómo damos con este código. Disfruten la navegación.

 https://xd.adobe.com/embed/6788452e-9bff-4542-a599-b7009e4dda50?fullscreen

LINK:

https://xd.adobe.com/view/6788452e-9bff-4542-a599-b7009e4dda50?fullscreen

 

Uniendo cables en Adobe XD

Cuando comenzamos a darle vida al prototipo; utilizaremos unos cables o «wires» que le dicen al programa de dónde a dónde corre la navegación entre las páginas diseñadas.

Cuando seleccionamos la primera página vamos a ver una pestaña azul con una flecha blanca. Al seleccionar esta flecha blanca y arrastramos el ratón de la computadora vamos a notar que arrastramos un cable azul, el cual podemos conectar en cualquier otra página u objeto.

Cuando el cable está conectado al próximo punto vamos a ver una ventana flotante en la cual básicamente podemos programar el destino; la transición; el movimiento; y la duración de la transición. Más adelante durante el proceso de programación, si deseas volver a una página a re programar algo que no te agradó; puedes seleccionar el destino o la salida del cable y cambiar estos parámetros de igual forma en que los programaste en un principio.

Notarás también que aunque tus páginas se compongan de objetos agrupados puedes utilizar la tecla de «Command» o seleccionar más de una vez con el ratón de la computadora hasta entrar al objeto deseado. En mi opinión es más fácil usar la tecla «Command» + «click«.

En la siguiente imagen acomodé la primera página un poco hacia abajo para que puedan apreciar el cable que también sale desde el logo JRVstudio y el destino de ambos cables es la siguiente página llamada «Home«. Si deseamos eliminar o cortar un cable para que no se ejecute; sencillamente lo seleccionamos y lo sacamos hacia afuera; como si desenchufaras un cable de la electricidad de la pared de tu casa.

Ahora lo que debes de realizar es jugar con interconectar el prototipo y analizar los movimientos y tiempos entre cada ventana. Como notarás, en mi diseño tuve que duplicar la página de «Password» por que para que salga el teclado debo primero seleccionar el lugar donde voy a escribir. Por tal motivo conecté un cable desde el botón de «Welcome» a una página sin teclado y luego al tocar el espacio para escribir el «Username» y «Password«; aparece por disolvencia la página de el teclado; dándonos la sensación de que solo apareció el teclado. Recuerda jugar con los parámetros del tiempo.

 

Si notas el menú de los segundos contiene unos parámetros pero con el teclado puedes escribir los segundos que le convenga más al movimiento. en este caso le escribí (punto-dos) .2 segundos. También recuerda que desde la primera vez que programas estos parámetros, ellos se quedan igual para los próximos y si deseas tener distintos parámetros debes de cambiarlos con cada página a programar.

Una vez programada la maqueta, presiona «Command» + «enter» para comenzar a probar el prototipo en la ventana del «Desktop Preview«. Aquí te muestro la grabación de este primer modelo. El círculo blanco transparente que notas en el video es el ratón de la computadora, comportándose como si tocaras la pantalla de tu celular con tu dedo.

En el video notarás los movimientos programados para el prototipo. Unos fueron movimientos disolventes y otros fueron movimientos de derecha o izquierda. También notarás que al momento que llegamos al final de las páginas diseñadas no tenemos un icono de retorno o no nos movemos a otras páginas debido a que no hemos continuado con el diseño de la maqueta. Nos hemos concentrado en estas primeras páginas. Una maqueta puede tener un sin número de páginas. Por el momento les deseo mostrar cómo funciona esta primera experiencia entrelazando páginas y cables. Jueguen con la programación, añadan más páginas a sus diseños y nos veremos en el próximo post donde probaremos nuestra maqueta en un iPhone.

¡Hasta luego!

 

 

Prevista de escritorio con Adobe XD

En la parte superior derecha de XD existen cuatro botones importantes:

1. Zoom
2. Device Preview
3. Desktop Preview
4. Share

Por el momento hablemos del tercer botón; el «Desktop Preview«. Cuando activamos este botón se abre una ventana flotante la cual nos muestra la maqueta de tal forma, como si estuviéramos usando el celular para interactuar con nuestra aplicación. También puedes activar esta ventana con los atajos de tu teclado «Command» + «return» o «enter«. Esta ventana tiene la habilidad de mantenerse abierta aún mientras trabajas en arreglos o cambios en la maqueta. Cada vez que tocas un «artboard«; la ventana de Preview en el escritorio nos muestra o se actualiza con la imagen de la ventana en uso y todo arreglo se actualiza al instante. La misma tiene la habilidad de grabar un video de la interactividad de la maqueta. Digamos que ya tienes tu maqueta vinculada con todos los botones enlazados y deseas grabar un video para enviarlo al cliente o amistades para que puedan apreciar cómo se comportaría la maqueta una vez un programador le da vida.

Con la ventana de vista previa «Preview» puedes grabar las acciones de la maqueta.

Si presionas el botón superior que se encuentra al lado de los segundos 00:00; la ventana comenzará a grabar todo lo que tocas y mueves con el teclado o ratón de tu computadora. Te preguntarás; ¿Con el teclado?; Si no tienes la maqueta vinculada aún, puedes usar las teclas de flechas en tu teclado para navegar de izquierda a derecha en ambas direcciones, por toda la maqueta. En el siguiente video pueden ver como logro navegar por la maqueta usando solamente el teclado de la computadora.

 

Este video luego puede ser parte de una presentación final al momento de venderle la idea de la aplicación al cliente. Esta ventana muestra, a mi entender, muchas probabilidades de uso. Si regresamos un poco al principio de este escrito te preguntarás y que hace la sección de Zoom; Device Preview y Share? Con el botón de zoom puedes acercarte y alejarte mientras trabajas con la maqueta; y hasta puedes entrar los valores con tu teclado.

Zoom.

Con el botón de «Device Preview» puedes ver tu maqueta usando tu celular  e interactuar con la misma como ti la misma estuviera ya programada por un «Developer» o «Programador«; siempre y cuando tengas instalado en tu celular la aplicación de Adobe XD que encuentras en Adobe.com.

Device Preview.

Nota: Recuerda instalar esta aplicación en tu celular para los próximos escritos.

Adobe XD para iPhone.

Con el botón de «Share» puedes enviarle una copia a tus amigos o colegas con los que estas trabajando la aplicación para que naveguen y vean tu maqueta y recibas un «Feedback» o sugerencias de ellos. Este botón usa tu espacio en la nube de Adobe.com; te suministra un «link» o vínculo para que distribuyas. Recuerda que todo aquel que obtenga el vínculo puede ver tu trabajo secreto! jejejejeje, mucho cuidado a quién lo repartes.

Share.

¡Mañana comenzaremos a vincular nuestra maqueta!

¡Buenas noches!