Adobe XD Prototipado fácil 1 Índice INTRODUCCIÓN ADOBE XD DISEÑO Prototipado, conceptos básicos. Crear un proyecto Herramientas Interfaz general Assets Artboards Componentes Tipos de presentación Repeat Grid Scrolls PROTOTIPO PREVIZUALIZAR Linkear Artboards Ejecutar previews Interacciones Compartir PLUGINS LINKS DE RECURSOS Overlay 2 Prototipa do El prototipado se utiliza como una muestra temprana de diseño para obtener feedback y experimentar rápidamente nuevas ideas. ¿Para qué sirve el Prototipado? • Limita los gastos de desarrollo. • Probar conceptos de diseño. • Probar la usabilidad del producto. Los prototipos generalmente se crean con una mezcla de bocetos, wireframes o mockups. Los prototipos dependen de los plazos del proyecto y son representaciones del diseño. El prototipado sirve como un mecanismo para obtener comentarios de los usuarios de manera temprana y rápida sobre el diseño, el cual se puede iterar para hacer que el producto sea mejor. 3 BOCETOS El boceto se usa en las primeras etapas del proceso de diseño para obtener nuevas ideas para el producto. Se suelen hacer de manera rápida y sin detalles para poder crearlos en cantidad y ser descartados si es necesario. Tipos de presentación WIREFRAMES Son representaciones de diseños centrados principalmente en el diseño del contenido, como un esqueleto. MOCKUPS Es un diseño prácticamente finalizado que incluye detalles de color, tipografía, contenido, etc. Parece el producto final, pero sin las interacciones. PROTOTIPO Los bocetos, wireframes y maquetas son solo diseños, para que sea más funcional necesitamos agregar interacciones, lo que mostrará el comportamiento y flow de la app. Cualquier etapa de diseño puede verse favorecida por la creación y testeo de prototipos, que varían según la instancia de diseño en la que se encuentre la aplicación. 4 Adobe XD Crear un proyecto Abrir el programa o tocar en el botón de HOME y elegir el tipo de dispositivo para el proyecto o armar uno personalizado. Esto define el tamaño de la pantalla que usaremos. Desde Add-ons se accede a UI KITs, extensiones y plugins que facilitan el trabajo. 6 Interfaz general 1. Menú General 2. Página principal 3. Pantalla de diseño 4. Pantalla de Prototipado 5. Compartir Prototipo 6. Barra de Herramientas 1 6 Dibujo de formas geomértricas E F C. Dibujo de formas libres D. Textos E. Artboards/Mesas de trabajo F. Zoom 9. Extensiones 11 12 13 14 15 C B. Capas 5 B D 8. 4 10 Selección Assets 3 A A. 7. 2 10. Panel Activo 7 11. Nombre de archivo/versionador 12. Colaboradores 8 9 13. Previsualizar en el celular 14. Previsualizar en la computadora 15. Panel de propiedades 7 Artboards Son el espacio de trabajo que definen el tamaño de pantalla/dispositivo. Se pueden modificar como cualquier otro objeto, moverse, renombrar, pintar el fondo, etc. Para seleccionarlo tocar en el nombre (que es editable). Para crear uno nuevo, seleccionar la herramienta Artboard y hacer click en cualquier parte del fondo de trabajo. Todo lo que quede fuera del artboard no se verá al ejecutar el prototipo. Si un elemento es más grande que el artboard, solo se ve lo que esté dentro del artboard, a menos que esté seleccionado. Desde las propiedades se pueden activar grillas y customizarlas para usarlas de guía en la construcción de la interfaz 8 Diseño 9 Herramientas Son los elementos básicos para crear la interfaz. Podemos usar formas, la pluma y texto. Para dibujar una forma, usar las herramientas haciendo click + drag. Modificarlas tirando de los bordes y ángulos, o rotándolo de las esquinas. La PLUMA nos permite dibujar una figura libre creando punto por punto y modificando las curvas con los HANDLERS. Todos los objetos se pueden agrupar, enmascarar o convertir en Componentes reutilizables. Si necesito ordenar los elementos para que uno esté encima de otro puedo hacerlo desde la lista de Layers o desde el menú contextual – Arrange. 10 Assets Panel para guardar recursos reutlizables a modo de librería. Se pueden guardar COLORES, ESTILOS DE TEXTO y COMPONETES. Seleccionar un elemento o artboard y desde el panel de ASSETS, presiono el botón + para agregarlo a la librería correspondiente 11 Componentes Seleccionar un elemento y desde el panel de ASSETS, presiono el botón + para agregarlo a la librería. Para agregar una instancia, arrastrarlos desde la lista al espacio de trabajo. Para editar todas las instancias automáticamente debo hacerlo desde el objeto MASTER o desde la lista de componentes. Si actualizo cualquier otra instancia modifico solo esa, de manera que pueda hacer cambios que no sean estructurales, como una etiqueta de texto, sin afectar a todos. 12 Repeat grid Es una manera rápida de crear grillas de una mismo elemento. Seleccionar un ítem formado por un único objeto o varios elementos, apretar el botón REPEAT GRID y extender el área. Los elementos no deben ser componentes. Se puede ajustar el espacio entre ítems. Al editar un ítem se actualizan todos automáticamente. Se pueden rellenar automáticamente los elementos arrastrando un TXT con lista de datos, o varias imágenes. 13 Scrolls Extender el artboard hasta incluir todo el contenido y setear el Viewport height del tamaño que queremos que se vea en pantalla. Puede ser el tamaño de toda la pantalla o solo un área determinada. Desde la pestaña de Prototipo se pueden FIJAR elementos que no queremos que scrolleen, como barras o botones flotantes. 14 Prototipo Linkear artboards Desde el modo PROTOTYPE, seleccionar un objeto o artboard y arrastrar la flecha hasta otro artboard. Para seleccionar un objeto dentro de un grupo usar CTRL+CLICK. Para cambiar el artboard que será la pantalla inicial del prototipo, ir a la pestaña prototipo y tocar en el íconos de la CASA que aparece arriba a la izquierda. Se pueden simular cambios de estado o microinteacciones duplicando un artboard y cambiando solo el elemento con el que interactuamos y lo linkeamos. 16 Interacciones Las interacciones pueden ser accionadas por: • Tiempo • Tap/click • Drag • Teclas o controles • Voz Las acciones que dispara pueden ser: • Transición (varias opciones) • Animación (parametreable) • Overlay (varias opciones) • Diálogo • Pantalla anterior Si duplicamos un elemento con interacción desde el modo PROTOTIPO, la interacción se mantiene. Las interacciones también pueden copiar y pegarse independientemente. 17 Overlay Es una acción que muestra otro artboard sobre el actual. Al tocar afuera desaparece. Puede contener interacciones. Ideal para popups y menús flotantes. 18 Previsualizar Ejecutar previews Al tocar el botón de PLAY se ejecuta el prototipo en el desktop. Para verlo en el celular, descargar la app y ejecutarla. Si la app está guardada en la nube se actualiza automáticamente. Con el teléfono conectado a la computadora se pueden ver los cambios en vivo. En el celular, al tocar 3 veces permite ver el menú contextual y activar la opción de SUGERENCIA SOBRE PUNTOS que muestra los hotspots interactivos cuando se toca algo estático. 20 Compartir Se compartirán todos los artboards relacionados a la HOME (seteada en PROTOTYPE MODE). Los artboards que no se exportarán aparecen grisados. Desde el panel de propiedades se general los links y los diferentes modos de compartir. El mismo link se puede actualizar cambiando el modo o también puede crearse un link diferente. 21 Plugins Utilizar plugins Los PLUGINS nos permiten generar contenido preexistente para agilizar y elevar nuestros diseños, por ejemplo, con fotos, íconos, paletas de colores, fotos, pero principalmente, KITs de UI por plataforma y formato, controles de accesibilidad, etc. Desde el panel podemos agregar nuevos o utilizar los que tenemos instaldos. Cada plugin funciona de manera diferente. Hay que explorar. 23 Links TUTORIALES https://www.youtube.com/channel/UC48fSJKMFBka3Zl0u7DGf0A OFFICIAL ADOBE XD STARTING COURSE https://helpx.adobe.com/es/xd/tutorials.html OFFICIAL ADOBE YOUTUBE CHANNEL https://www.youtube.com/user/AdobeCreativeCloud/videos MORE TUTORIALS https://www.youtube.com/user/IceflowStudios/search?query=adobe+xd https://www.youtube.com/user/ForeverDansky/search?query=adobe+xd Max Ciaccio User Experience Engineering Specialist Diseñador multimedia [email protected] 25 Gracias. 26