: Creating a Flowchart for Wireframes I am kind of new to wireframing, so I might have the wrong conceptions here, but I would like to create a flowchart showing how different wireframes of an
I am kind of new to wireframing, so I might have the wrong conceptions here, but I would like to create a flowchart showing how different wireframes of an app are related to each other. The thing is, it is getting quite messy:
as you might be able to tell it already is quite messy and I am still missing some connections ...
Is there a better way to depict the relation of wireframes (maybe flowcharts are out and theres something cooler) or are there some other tricks to it, like only showing certain cases (buying something, getting information on X, logging in, etc.) and therefore reducing the number of connections that are relevant for a particular case?
Thanks in advance! :)
More posts by @YK2262411
2 Comments
Sorted by latest first Latest Oldest Best
Technically all pages of the wireframe will be interconnected, which will complicate the diagram. I can't quite read the page names in the illustration provided, it looks like it might be a shopping site.
I would break it down into one illustration displaying all the page types or site tree.
Then a seperate diagram for each user flow/journey. For a shopping site you might have the following journeys.
User manage account
User checkout
User add product to cart
Admin manage products
Admin manage orders
etc
Like in the following examples.
User Checkout
User Manage Account
Admin Manager
Usually in flow charts the little diamon/square on a 45 angle represents a user decision or split in the flow. Ignore the first diamond in the user manage account diagram, I should have taken that out.
The trick i use for network graphs is I open them in some automated layout tool like. yEd or Graphwiz. This way I get a good starting point for a minimally overlapping graph.
Terms of Use Create Support ticket Your support tickets Stock Market News! © vmapp.org2024 All Rights reserved.