Due Thursday, Jan 31
5.1 App Architecture Map
Soon we will be moving into the layout and design of the app version of your magazine. However, before you dive into the nuances of layout, you need to have an understanding of the architecture behind the navigation of your app. As you know there are big differences between how a user navigates through a printed magazine versus a website versus an interactive application. The organization and experience of how the user navigates the content should be tailored to the medium.
To do this, you will first map out the architecture of your app. In essence, this is an infographic that shows the connections of the content in your app. You are probably familiar with website maps that are commonplace in the process of web design. These are usually represented by a map made of labeled screen proportioned boxes connected by a network of lines, representing the different click paths from which a user can navigate. In a similar spirit, the architecture of an interactive app needs to mapped. However, whereas website maps only have one action for the user to initiate navigation (a click), apps have a vast array of taps, swipes, dragging, pinches, etc. This will pose another challenge as you create your architecture map: how to communicate the method of navigation.
Below, I am including a website map of a site I worked on years ago. Also, I am including several examples of app architectures I found.
5.2 App Content Placement Wireframes
As you are working on the architecture map, you should also develop some wireframes of several screens of your map. These do not need to be developed layouts, rather a basic layout of labeled boxes that suggest placement of content. There are two ways you can do this. If you like, you can incorporate it into your architecture map, as seen in some examples below. If you don’t integrate them into the map, then you can show them separately.
JCCC :: Advanced Design Practice 
