No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Curso de Adobe XD

Curso de Adobe XD

Ricardo Mendi

Ricardo Mendi

Creación de Flujos de Navegación en Wireframes de Alta Fidelidad

13/21
Recursos

¿Cómo plasmar el estilo del mood board en wireframes de alta fidelidad?

Crear un proyecto digital exitoso implica transformar visiones en realidades tangibles. Un elemento esencial de este proceso es el desarrollo de wireframes de alta fidelidad, los cuales trasladan el look and feel definido en el mood board a estructuras más detalladas. El mood board, como vimos, es la fuente de inspiración que -al plasmarlo en wireframes- permite que el diseño cobre vida en cada pantalla y funcionalidad.

¿Qué cambios se hacen en los wireframes de baja fidelidad?

  • Aplicación del diseño: Al trabajar desde el mood board, los wireframes de baja fidelidad evolucionan hacia maquetas detalladas que reflejan el estilo diseñado. Esto incluye la adición de colores, tipografías y formas específicas que definen la estética de la aplicación.
  • Interactividad inicial: En esta fase se incluyen las primeras interacciones, permitiendo visualizar cómo se comportarán los elementos al ser utilizados.

¿Cómo se ordenan y conectan las pantallas?

Nombrar correctamente cada pantalla es clave, ya que facilita crear un flujo de trabajo ordenado. Las pantallas deben tener nombres descriptivos como "home", "menú principal" o "detalle de libro". Luego, se procede a enlazarlas para crear un flujo de navegación coherente.

Al conectarlas, se debe:

  • Hacer uso de transiciones: Seleccionar el tipo adecuado, como 'tap' o 'drag', dependiendo de la interacción deseada.
  • Asegurar transiciones lógicas: Mantener la consistencia y naturalidad al moverse entre pantallas.

¿Qué importancia tiene un flujo de navegación bien estructurado?

El flujo de navegación es fundamental para garantizar una experiencia de usuario fluida y coherente. Aquí es donde se logra conectar las pantallas de manera que el usuario pueda entender intuitivamente cómo moverse dentro de la aplicación.

¿Cómo se visualiza y verifica el flujo de navegación?

Con las herramientas de prototipado, como Adobe XD, se puede simular la navegación y comprobar que todas las transiciones funcionan. Esto brinda la oportunidad de:

  • Identificar problemas: Probar el flujo ayuda a detectar errores o áreas de mejora antes de la implementación final.
  • Ajustar interacciones: Optimizar las transiciones para que sean lo más orgánicas posible.

Consejos para mejorar la usabilidad

El diseño centrado en el usuario requiere considerar aspectos de usabilidad que permitan una experiencia intuitiva:

¿Cómo evitar que el usuario se sienta acorralado?

Un buen diseño debe permitir que el usuario avance y retroceda en la navegación sin problemas. Incorpora elementos como flechas de retroceso que lleven al usuario a la pantalla anterior, promoviendo una navegación fluida.

¿Por qué es clave un inicio claro en el flujo?

Identificar de dónde nace el flujo es vital. Marcar la pantalla de inicio (como 'home') asegura que se reconoce el punto de partida y proporciona una referencia visual del esquema de navegación.

¿Qué sigue después de completar el flujo?

Practicar y experimentar con diferentes configuraciones de flujo afianza el conocimiento adquirido. Jugar con los tiempos de transición y descubrir nuevas opciones dentro del panel de propiedades enriquece la calidad del proyecto.

Finalmente, se abre un campo de oportunidades al interactuar con colegas y compañeros mediante comentarios y aportaciones. Esto no solo mejora el producto, sino que enriquece el proceso cognitivo y la evolución profesional. No dudes en mostrar tu trabajo, pues cada paso es un avance hacia el dominio del diseño digital.

Aportes 26

Preguntas 4

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

comparto una pagina de iconos gratuitos, donde es muy fácil agregarlos a los archivos adobe Xd . Solo le damos clic y se copia automaticamente. ya solo le damos pegar en nuestro archivo.

https://tablericons.com/

Otro plus, es que puedes conectar tu dispositivo móvil a tu ordenador e instalar la APP de Adobe Xd. & ver el flujo e interacciones de tu diseño directamente desde tu celular. Esto hace que parezca ya una aplicación 100% realizada. Aunque solo esté realizada en diseño. ( Yo así realicé mis presentaciones a los de mi equipo)

Creo que hubiera quedado perfecto alguna clase o referencia a un curso donde se enseñe a crear las imagenes de los íconos ya que en lo personal se me complica crearlos.

Pienso que el panel de prototipado esta perfecto, se realiza todo de forma muy intuitiva y no esta sobrecargado de opciones que lo puedan hacer algo complejo. 😃

Lo bueno de Adobe Xd a diferencia de otras apps, es que sus animaciones (Sin importar que tan pesadas sean) están muy bien optimizadas. He logrado ver locuras que parecen estar hechas en motion graphics pero en realidad solo es adobe Xd

Yo e hecho mis diseños de illustrator los arrastro a XD igual que las imágenes, me esta encantando mucho este curso!! 🥰

Experimentando con textos, colores, formas diferentes! 😃

EN EL CREATIVE CLOUD EL XD FUNCIONA PERFECTO.
* Mood Board de alta fidelidad en el ejemplo: * Home * Menú principal: que leer, autores, favoritos, recomendar. * Libros * Detalle de libro * Detalle del autor *  Que hacer con todas estas pantallas: enlazarlas y crear un flujo. Esto lo creamos en la sección de diseño, ahora pasamos a prototipo. * Mi botón de acceder, al pararme encima genera una flecha la cual genera una línea que une con la siguiente, todo esto es de práctica y de organización. * en el panel de propiedades puede elegir una animación para personalizar mi trabajo, en este caso hay varias opciones que generan transición tenemos que escoger la masa adecuada a nuestro proyecto. * Tanto botones, recuadros con símbolos, pequeños textos que podemos convertir en una especie de link los podemos enlazar unos con nosotros teniendo en cuenta nuestro flujo de la app. * En botón Flow número uno podemos seleccionarlo, y nos daremos cuenta todas nuestras casillas que están enlazadas. * En Play veremos nuestro flujo de Navegación de nuestro proyecto app.
Que bonito sentí ver la pagina "funcionar", ya quiero hacer la mía!
![](https://static.platzi.com/media/user_upload/image-9e1979ed-90d1-4366-a737-172ebd3e352f.jpg)
![](https://static.platzi.com/media/user_upload/Proyecto%201-2428c247-71b9-44db-b705-572366e0507c.jpg)

pero al seleccionar se puede en cualquier parte del la siguiente pagina me refiero al jalar la flecha en prototipe

Amé esta clasee, me encanta, ya quiero hacer la mía ❤️

Mi aporte de prototipado:

Wow increible esta clase, me encantó.

¡Brutal!

Que buena explicación

Me esta encantando la aplicación, es super intuitiva y el curso muy bien explicado