Tuesday, 12 March 2013

Responsive // App Navigation Flow Chart

As one of the area's I am covereing in this collab brief is the App, and as I have never designed an App before or even know where to start, I thought it would be a good idea, to not worry to much about the design of the app and how the visuals look, but instead focus on how the app would work, how it would navigate and what areas will lead to what other areas.

It was suggested when we had a crit with Fred that as our ideas are more concept driven than visually driven, we would aim to propose our concept as best as we can so we get accross our main ideas while still not focusing too heavily on the design aspect.

It is quite a complicated task I have found to design an app, especially for the first time, this challenge is starting to become a little daunting.

but as I have already outlined what areas are needed on the app, I am now at the stage of researching how others have created their App Navigation Flow chart. to see how they have just focused on the concept rather than visual design.



I want to try and keep the visuals of the flowchart as simple and understandable as possible, but as some of the pages can be linked from several areas i will have to try and lay it out in such a way that their is not too many crossing arrows and lines, because if the concept of the app is lost, or not understood then our entire concept would be effected.

These examples both above and below, are quite simple, and visually not that exciting, but the idea of the simplicity is something I will try to follow.. However the direction of the criss crossing arrows on the example above, does create a little too much confusion.



Even though this seems to all be in Japanese so I don't understand what the app is trying to do, I do still really like how it has been laid out, the use of different colours to indicate different things is a useful tip, i also like how the app has a starting and an end point, with the app separated into different sections,



This Hierarchical Navigation Model below, is the most similar to the flowchart I would like to produce, by splitting the model into these section (granted with some altercations) it would create the simplest and most understandable model.  I still do not want to make it too boring though, so I still visually want to make it pop. but the design will be consistent with that of the remaining concept boards we will produce.



No comments:

Post a Comment