Contenido del curso
Entender los Fundamentos del diseño
- 2

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

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

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

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

Creación de un Brief para Aplicaciones de Restaurantes
03:40 min
Aprender sobre Diseño Experiencia de usuario
Aprender sobre Diseño de interfaz de usuario
- 10

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

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

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

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

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

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

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

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

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

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

Repaso y Construcción Final de Aplicación Web en React
09:32 min
Conclusiones
Mentoría Expert
Creación de Diagramas de Flujo para Diseño de Aplicaciones
Resumen
¿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.