Proyecto: Creación de Wireflow

¡Saludos a todos!
He ideado un sistema de librería (Librazi) con 9 wireframes y un menú lateral compartido por todos los wireframes que sirve de eslabón en el flujo. Primero les mostraré el esquema general, luego cada uno de los wireframes y por último un esquema mostrando el detalle del wireflow:

Esquema general:

Wireframes:

1. Inicio:
   

   

2. Todos los libros:
   

   

3. Detalle Tema:
   

   

4. Best Selleres:
   

   

5. Los más vendidos:
   

   

6. Autores:
   

   

7. Autores del mes:
   

   

8. Detalle Autor:
   

   

9. Menú temático:
   

   

10. Detalle del libro:
    

    

Detalle del wireflow:

Saludos, quiero compartir con ustedes el proceso de wireflow para la plataforma Domestika, haciendo el ejercicio de wireflow, para una tarea tan simple como es buscar un curso, normalmente al navegar hacemos uso de las categorías y las diferentes clasificaciones que nos brinda en portal, el inconveniente esta cuando ingreso de la siguiente manera al - Cursos / ilustración / Detalle curso, si quisiera regresar a la lista de cursos por categoría solo lo puedo hacer con la opción back del explorador, o desde el sitio dando clic en Cursos, pero pierdo el contexto de mi búsqueda, por eso decidí agregar un componente de breadscrumb que primero, me de el contexto de donde me encuentro, y hacia donde podría regresar

Ejercicio Wireflows proyecto Expertos.

Seguro tiene errores pero hice mi mejor esfuerzo, creo que debo plantear mejor el site map, espero que a alguien le servida de ayuda.

Este es un procedimiento confuso para los usuarios de un sitio con el que trabajo. Exploré la secuencia de pasos y descubrí que es porque hay dos caminos para hacerlo, y consta de muchos pasos.

Sitio Biblioteca digital Bogotá.
Tarea: encontrar un libro.

Si le es de ayuda a alguien, les dejo este Wireflow kit que me encontré, les ayudará mucho, seguramente.

Wireflow de proceso Hazte socio de BiblioGam

Wireflow youtube

Para web y android
Productora de animación
Acción: Quiero contactarlos para que me ayuden a animar un comercial

Es un ejemplo Muy Basico 😃

Espero que haya quedado bien mi ejercicio (No sé si whimsical lo deja ver bien pero…en un lado está el el flujo y en el otro ya el wireflow como tal)

https://whimsical.com/WaprX9hnnwXKgafGz7mWYW

Aquí esta mi Wireflow

Wireflow para la busqueda de un producto especifico, en este caso una blusa.

Es un proyecto inmobiliario. Lo hice en Figma

💁🏽‍♀️ Hola!
Para el principal sitemap que realicé, el wireflow es:

Buenas que recomiendan para un E-commerce que diariamente tiene muchos productos nuevos asi como tambien eliminan algunos, para que se cree dinámicamente ya que tiene mas de 500.000 productos y 4.000 categorías, se podría con un script o cual seria la mejor forma?

Hola!
Como el sitio que elegi para rediseñar las tareas eran muy muy basicas decidi intentar hacer un Wireflow de una app ficticia para telefono(tambien me sirvio como practica en figma ya que lo hice todo yo) … la tarea que debe realizar el usuario en esta app es seleccionar un articulo de favoritos y comprarlo.
Queria hacer un trabajo mas completo y agregar posibles errores de pagina etc. pero creo que era demasiado trabajo para una principiante en figma como yo xd.
.
.
.
![](

.
.
.
![](

.
.
.
![](

.
.
.

.
.
.
![](

.
.
.

.
.
.

.
.
.

.
.
.

.
.
.

.
.
.

.
.
.

.
.
.

.
.
.

En la pagina del RUNT una de las tareas mas habituales es consultar la información acerca de uno mismo o una persona en el sistema (expedición de la licencia, multas, etc. Para ese caso hay 2 formas para llegar directamente desde Home, una forma mas compleja añadiedo 2 niveles mas desde la zona de “Ciudadano”, y otra mas compleja todavía desde la navegación.

Para este ejercicio elegí un sitio web que recientemente tuve que examinar para contestar una encuesta; el sitio es de Cristina Jáuregui, psicóloga y terapeuta.

La interacción que realicé es bastante sencilla:
obtener información acerca de sus conferencias para parejas.

Existen 2 formas de llegar a esta sección:

1. Del home al seleccionar la categoría de conferencias -> te lleva a un resumen de los temas que ofrece y en cada tema tenemos un botón que lleva a la single con la información específica.

2. Situados en el home, podemos revisar directamente que la categoría de Conferencias tiene 3 subcategorías: parejas y familia, escuela para padres, laborales y cada una te llevaría a la single específica.

Reto parte 2:
Yo escogí Dafiti. Hice el ejercicio buscando una chaqueta de Jean, realice los pasos pero al final no encontré el producto utilizando la ruta. Sin embargo, por el buscador la encontré súper rápido. Descubrí que tienen un error en los tags o filtros. ya que en los filtros me colocan a escoger número de talla, pero en el producto está etiquetado por letra (S,M, L).
Paso 1. Home.

Paso 2. busco por femenino

Paso 3. chaquetas y abrigos y luego filtré por mi talla

Paso 4. No encontré la chaqueta

Utilizando el buscador encontré lo siguiente:

Hola!
Presento el ejercicio realizado.
Saludos!

Wireflow del proceso de buscar una película en Star+
![](

Quisiera saber opiniones acerca de mi wireflow de mi pagina de portafolio estoy abierto a feedbaks

https://www.figma.com/file/bLsgQTuRucfOBAuj0zU1K7/ThinkiGrow?node-id=1249%3A1519
les comparto mi gran wireflow para proyecto de emprendimiento

En mi conclusión este sería el Wireflow que maneja Airbnb. Su navegación de Búsqueda, Lista de producto y detalle del producto.

Les comparto el Wireflow de la Clinica donde normalmente me atiendo.

El proceso de compra para la pág. que escogí está bastante sencillo, pero si le haría un cambio.

Le quitaría un paso que creo innecesario:

wireflow
sitio web del banco exterior
tarea: Encontrar una agencia.

wireflow actual:

Wireflow mejorado:

si desean ver el trabajo completo aquí les dejo el pdf
https://drive.google.com/file/d/1H-lz7NlQk2S9wQb82PkF9yKk5T19mKNP/view?usp=sharing

espero su feedback de como podría mejorar el wireflow

Comparto mi ejercicio… la tarea es consultar resultados con un buscador y también poder cerrar sesión o regresar al tablero principal (home).

Reto: encontrar tela dacrón unicolor para uniforme de enfermera en la pagina Casatextil.

Tarea: programar una cita.
Inicialmente realice el flujo de wire frame segun la pagina la Veterinaria escogida.

Analizando lo anterior tienen diferentes maneras de llegar pero con paginas diferentes, se encuentra información repetida y es difícil ir depurando la información. Por eso propongo el siguiente flujo básico.

wireflow search en spotify

Una vez que tengas los wireframes diseñados con alguna herramienta como Sketch, os recomiendo usar . Es una plataforma que facilita a los equipos de diseño de productos digitales a crear, actualizar y comunicar diagramas de flujo de usuarios de manera eficaz y eficiente.

Wireflow: buscar libro.

https://app.moqups.com/4QmuEO5H2h/view

yo utilizo mockups para hacer todo el wireflow de mis sitios

no tengo muy claro si lo hice bien o no.

Hola a todos,

les comparto mi propuesta para encontrar el mapa curricular de la carrera que cursé, considero importante esto puesto que mi escuela te permite inscribirte a la materia que quieras sin considerar si se necesitan conocimientos previos de otra materia.

Creo que es importante poder disponer de esta información, ya sea buscándolo como tal o con el contexto de que lo puedes necesitar al momento de revisar tu trayectoria académica, a continuación muestro las dos maneras de acceder a la información.

Esquema General:

Wireframes:

1. Página Principal (previamente iniciada sesión)

2. Información Académica

3. Mapa Curricular

4. Alumno

5. Estado General

6. Trayectoria

Wireflow:

El WireFlow de Spotify es muy sencillo, sin cambiar de página puedo encontrar de todo.

![](

![](

Tarea: Encontrar un par de sneakers en específico.

Para este ejercicio elegí un sitio en el que estoy trabajando y la mejor manera de hacerlo fue guiarme por el ejemplo anexo ya que no tengo mucha experiencia en el tema.

Prefiero hacer el ejercicio una vez hayamos visto bien detalladamente los wireframes, ya que al ser los wireflows flujos de pantallas es importante conocer el como se diseñan justamente los wireframes

Con un libro en especifico para que el ejercicio sea mas adecuado

muy buen contenido muchas gracias

muchas gracias por la guía

Muy buen trabajo.

Hola grupo les adjunto mi ejercicio es basado al anterior en una tienda naturista

En mi casi estoy trabajando en el rediseño del Sitio de Subway Colombia, para el ejercicio del Wireflow escogí el flujo de compra de un sandwich.

Mi aporte…

Excelente ejercicio. Me gusta mucho este curso.
Adjunto el link para ver el wireflow

![](

![](

Por acá comparto un pequeño flujograma que me permitirá de alguna forma generar el wireflow de una app de facturación

Hola a todos
Para mi proyecto me encargue de una pagina web de una industria de empaques con la finalidad de que el ultimo paso del usuario sea cotizar, durante su navegación en productos siempre incluyo los de más servicios y sectores de la empresa para que siempre se puedan dirigir directamente a lo que necesitan, ya en los productos siempre en marco los de más productos y sub-categorías para que el usuario pueda moverse rápido y fácil por los otros productos ofrecidos, ya en el producto seleccionado muestro la posibilidades dar mas opciones que le pueda interesar al usuario.