Make - Redesign Navigation for "Play / Edit / Data" Paradigm about webmaker-android

[xmatthewx]

Here's an alternative paradigm for Nav and App management. We peel back the surface or flip the page to reveal and access the nuts and bolts.

1. flip or peel to "edit" // 2. click or swipe down for menu // 3. flip or peel to "play"

Using the bottom corner, the user's app feels like its own thing while still giving prominence to the ecosystem. The flip-side gives plenty of room for a clear menu, adaptable for the different users (owners, non-owners). I added a couple menu item ideas. Take 'em or leave 'em.

(A nice animation could move the logo position from screen 1 to 2, and the name from 2 to 3.)

[thisandagain]

I'm really liking the use of depth to make it clear that the brand / navigation is "behind" the app from a messaging standpoint. In particular, the first option seems like a really good starting point as it is in a position that is simultaneously unlikely to conflict with the app and is great ergonomically.

[xmatthewx]

Great. Revised and clarified below.

[mhanratty]

Awesome work! I too really like how the navigation is below the app rather then above or on the same layer. Also really dig the use of the logo and how it subtly identify's the app as an app maker app.

I did a little riff on the design. The logo is in the corner and when you tap on it, the menu options rise from the bottom so that the user can tap "Share," "Remake" etc. with her thumb. Not sure I represented it well in my sketch but I imagine the logo semi-circle as recessed so it appears that it is below the app layer and there is a space fit to your thumb (kinda like what you see in dictionaries, remember those! http://image.shutterstock.com/display_pic_with_logo/78395/78395,1168311480,8/stock-photo-side-of-dictionary-with-thumb-tabbed-index-2453123.jpg)

[thisandagain]

Really digging the simplicity of this approach @mhanratty! Will mockup.

[thisandagain]

@xmatthewx Did you find a vector of that flat webmaker logo?

[thisandagain]

Representation of the "play / edit / data" tabs extending the status bar to ensure that the nav isn't confused as part of the "app":

[xmatthewx]

@thisandagain -- really interesting idea to break the frame and visual merge with the status bar.

@mhanratty -- I was always a big fan of those die cut dictionary tabs. Interesting and maybe less hokey than a turned corner.

Sabrina posted the flat logo vectors to dropbox. I'm a fan, though I'm not sure if they're officially a part of the brand.

[mhanratty]

Comment here or on redpen: https://redpen.io/rjbf8dd4fd3f93f9f1

Menu in lower right corner. Not sure I have the visual design quite right. Would love feedback!

[xmatthewx]

Looking nice. Seems like the logo should either be in front or flat, ... or ... if the logo is behind the app like a dictionary tab, then maybe the app could slide away to reveal the menu behind (like a typical drawer menu on android).

[xmatthewx]

Does this menu need an item to view & edit your profile? #36

[mhanratty]

Good question! For now I think we will just take you home and you can navigate to the profile from their. We might, however, need "Settings" in this menu once we have them :)

[mhanratty]

Updated:
• Changed Webmaker logo back to red
• Took on inner shadow on logo
• Reorder menu items
• Made "Report Inappropriate" red

[thisandagain]

👍