Creación de Diagramas de Flujo para Diseño de Aplicaciones
Clase 8 de 22 • Curso de Diseño para Developers
Contenido del curso
- 2

Desarrollo de la creatividad para diseño y aplicaciones web
02:59 - 3

Conceptos Básicos de Composición en Diseño Gráfico
03:45 - 4

Responsive Design: Metodologías y Prácticas Esenciales
04:12 - 5

Accesibilidad Web: Mejores Prácticas y Consejos Básicos
05:11 - 6

Creación de un Brief para Aplicaciones de Restaurantes
03:40
- 10

Diseño UI: Estilos Visuales y Diferencias con UX
01:10 - 11

Creación de Mood Boards para Aplicaciones Visuales
01:46 - 12

Psicología del Color y su Aplicación en Diseño Web
03:35 - 13

Creación de Paletas de Color para Aplicaciones
03:28 - 14

Selección y Uso de Tipografías en Diseño Web
05:02 - 15

Creación de Grillas Responsivas con CSS Grid y SASS
05:24 - 16

Desarrollo de Aplicaciones Web con Componentes Reutilizables
02:52 - 17

Implementación de Themes en Aplicaciones Web con CSS y SAS
04:38 - 18

Selección y uso adecuado de imágenes para la web
06:15 - 19

Uso Eficiente de Animaciones y Videos en Páginas Web
06:37 - 20

Repaso y Construcción Final de Aplicación Web en React
09:33
¿Qué son los diagramas de flujo en el diseño VX?
Los diagramas de flujo en el diseño VX son herramientas esenciales que nos permiten visualizar y estructurar la interacción del usuario con una aplicación o sitio web. A partir de un brief, traducimos los requerimientos en componentes tangibles que reflejan los objetivos principales del proyecto. En el ejemplo siguiente, un objetivo era dar a conocer los productos, y este se traduce en una sección de menú y promociones. Otro objetivo era incrementar la presencia en línea, lo cual se aborda mediante una activación de redes sociales y la inclusión de un componente de redes sociales en la página.
¿Cómo se estructuran los diagramas de flujo?
Menú y promociones
Una de las secciones primordiales del diagrama de flujo es el menú, que incluye categorías como:
- Hamburguesas
- Bebidas
- Acompañamientos
- Postres
Pedidos en línea
Esta sección permite al usuario seleccionar productos y avanzar en el proceso de compra, incluyendo:
- Resumen del pedido
- Datos de envío
- Mensaje de confirmación
Contacto y sucursales
Aquí el usuario puede encontrar información de contacto importante, como:
- Teléfono
- Dirección
- Sucursales
Páginas externas
Dentro del sitemap, también se consideran enlaces a páginas externas como:
- TikTok
- Plataforma de pagos
¿Cuál es la utilidad de los flujos de usuarios?
Los flujos de usuarios, o user flows, son diagramas más complejos que detallan los pasos necesarios para completar tareas específicas dentro de una aplicación o sitio web. Por ejemplo, en un flujo diseñado para un usuario que completa un pedido en línea, este flujo podría seguir estos pasos:
- Inicio en la página principal.
- Navegación a la sección de menú.
- Consulta del detalle de producto.
- Adición del producto al pedido.
- Visualización del resumen del pedido.
- Proceso de pago y envío de datos.
Si los datos son correctos, el usuario accede a una plataforma de pagos y recibe una confirmación. En caso contrario, el flujo incluye pantallas de error para corregir datos antes de intentar nuevamente.
¿Por qué es importante crear diagramas de flujo?
Claridad y organización: Facilitan la identificación de componentes y pantallas necesarias, como el inicio, el detalle de producto o mensajes de error y confirmación que podrían olvidarse durante el diseño.
Inventario de pantallas: Permiten contar cuántas pantallas o componentes necesitamos diseñar para lograr una experiencia de usuario completa y fluida.
Guía para wireframes: Sirven como base para desarrollar wireframes, proporcionando una estructura clara y detallada del proyecto.
Flexibilidad: Puedes crear tantos flujos como consideres necesarios, para adaptar mejor el diseño a los objetivos del cliente.
La creación de diagramas de flujo es un paso fundamental y estratégico en el diseño VX, ya que determina la arquitectura y funcionalidad de la aplicación. Además, es una herramienta invaluable para ahorrar tiempo y recursos al prever las necesidades de diseño desde la concepción del proyecto.