4.3. Rough first two layouts


Creating roughs of your first two layouts in InDesign. Remember, these layouts should be organized  to make sense for an interactive environment. They should also consider navigational elements for several layers of navigation. Type sizing and styling considerations may change to fit the space of a screen and design elements need to be positioned and sized according to how a user’s finger’s might interact with them. For example, if a user is meant to push a button to advance then it can’t be too small to tap with a finger.

When we refer to each “layout” in this assignment, we are not necessarily talking about only one screen per layout. Because you are designing for an interactive environment, you not be trying to jam your content onto one screen view. Content can be paced and stepped out across multiple pages that you navigate to, or be revealed as you scroll or swipe. You may begin by developing two screen views for each “layout”, one for the initial view when you arrive at that piece of content and one view of how that content looks as you scroll, click or swipe.

Keep in mind, it will be necessary to design the same screen in multiple states for our next steps. For example, show what a slide-out or pop-up looks like both when in use and when retracted. Don’t worry about alternative formats or sizes for now.

Suggestions for those screens:

Table of Contents: likely the first app screen you see after the cover, this will set a precedent for the content organization and navigation within your app. You will need to use those other content headlines you pulled from other magazines here to show all the possible content of your issue. You might show a navigational breakdown of sections here. For example,Time magazine has many sections: Politics, World, Technology, Business, Arts and Life. The Arts section has a top page that overviews further division within that section: Books, Music, Theatre, Movies, Exhibitions, etc.

One of your Featured Articles: primary page and a subsequent page of the article.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s