839665 - IA changes for devhub design section

Status: RESOLVED FIXED

(Marketplace Graveyard :: Developer Pages, defect)

Description

[Fred Wenzel [:wenzel]]

In bug 832531, Tony proposes an iteration on the devhub IA.

Tony, please give some guidance on the specific changes to happen to the design section.

Comment 1

[Tony Santos [:tsmuse]]

Attachment: Changes to the content page template's navigation

This is a change to the sidebar navigation that needs to happen for all content pages in Devhub to allow users to be able to navigate the new deeper sitemap.

Comment 2

[Tony Santos [:tsmuse]]

Here are the proposed content changes and details for the overall IA changes to devhub for MWC:

Current page: Your App's elevator pitch
Changes: 

page title to "Concept: A great app"

Re org page: remove elevator pitch section. New order should be
* "What is the purpose of your app?" 
* "Focus on one main use case"
* "How will people use your app?"
* "Concentrate on a few key features"
* "Your app in it's most basic form"(title changed from "Your app in the most basic form"

=====
Current page: "Design Principles"
Changes:

page title to "Design Fundamentals"

=====
New Page: UI Guidelines
content:
There's no "right way" to design a user interface, but there are plenty of ways to make your app less fun and easy to use. With this in mind, the following sections can help avoid making some of the most common UI mistakes, setting you on the path to making an app that is a joy to use no matter what platform it's running on.

Intro to Responsive Design (link to: https://developer.mozilla.org/en-US/docs/Web_Development/Mobile/Responsive_design)
One app, multiple screens. How do you make a UI that looks and works as great on a smartphone as it does on the desktop? Learn how to design and build UIs that change to fit your user's screen.

Responsive Navigation Patterns ( link to new Responsive Nav Patterns page)
Need some help designing your app's navigation? These patterns are a great place to start.

UI Guidelines for Firefox OS (link to new FFOX UI guidelines page)
Want to make your app look and feel like it's a Firefox OS native? These guidelines will show you how. 

=====
New Page: Responsive Nav Patterns
content: 
Current content from "Design Patterns" page, minus the "intro to responsive design" section.

=====
New Page: UI Guidelines for Firefox OS
content:
Content to come from current effort by FFOS design team to document the FFOS UI.
=====

Comment 3

[Fred Wenzel [:wenzel]]

Assigning to Jen; Some of this is not yet ready to go (in particular, the UI Guidelines). Those will go on MDN though and we'll just link to them.

If you need more info, please bug us :)

Comment 4

[Jen Fong-Adwent [:ednapiranha]]

Tony, Fred - are the UI Guideline external links ready yet? I assume two are external to MDN (Intro to responsive design and UI Guidelines for Firefox OS) and then one is internal. If this is correct, I think I only need the link to the "UI Guidelines for Firefox OS" one.

Comment 5

[Fred Wenzel [:wenzel]]

(In reply to Jen Fong-Adwent [:ednapiranha] from comment #4)
> Tony, Fred - are the UI Guideline external links ready yet? I assume two are
> external to MDN (Intro to responsive design and UI Guidelines for Firefox
> OS) and then one is internal. If this is correct, I think I only need the
> link to the "UI Guidelines for Firefox OS" one.

Your assumption is right.

Bug 835566 is the UI guidelines, and that hasn't landed yet. I commented on that bug to find out the status. Thanks!

Comment 6

[Jen Fong-Adwent [:ednapiranha]]

Tony, I'll need a quick mock for the UI Guidelines landing page as discussed. Thanks!

Comment 7

[Jen Fong-Adwent [:ednapiranha]]

merged https://github.com/mozilla/zamboni/commit/bead081654d8b708a51f180d8d777dc078834122