551314 - What does "pretty" mean to this Chrome page

Status: RESOLVED FIXED

(Mozilla Labs :: Design, defect)

Description

[Jinghua zhang]

We got the new wireframe for "All studies" chrome page from Faaborg and I made them into quick mock-ups (see attachment). It has most of important functions and interaction designs users want. 

What we need is to add the visual design layer on top of it. Jono will code the page in XUL, but he needs a example on how the page should look like with visual design. 

Please see if it makes sense and give some visual

Comment 1

[Jinghua zhang]

Attachment: mockups

Comment 2

[Jinghua zhang]

Attachment: 2nd pass of the mockup

2nd pass that categorizing information by participation (of studies) and learning (pieces of analysis conclusions). 

In this way, besides knowing the study status, pilots can also get the direct exposure to our results, which are just feeds from our website.

Comment 3

[Sean Martell]

Looks great.

I'm going to Photoshop the pages to show what they should look like, and I will also create the CSS styles for all the elements (buttons, form fields, etc)

Example for project specific CSS style: http://mozilla.seanmartell.com/bespin/index_login.html

I'll make a full Test Pilot CSS toolkit of common webpage elements for you to use.

Comment 4

[Sean Martell]

We are working on re-framing it using pretty much only XUL, so that it integrates better with the current Firefox UI and speaks in the same voice as Firefox (especially since we are considering adding it as an option in the Firefox installer).  So instead of Web design we need a small number of individual icons for use in chrome interfaces, created in each individual platform's style.

I'm pretty sure this is a complete list, but we might need to add some later:

-status bar icon (16x16)

-notification of "results ready to submit" (48x48)
-optional notification of "new study" (48x48)
-optional notification of "new results" (48x48)

-prefpane icon for "current studies" (32x32)
-prefpane icon for "completed studies" (32x32)
-prefpane icon for "what we learned" (32x32)

-generic study icon for the rich list view (if the study does not provide an icon) (32x32)

So only 7 icons, but in the 4 visual styles that we currently use for Firefox themes (Luna, Aero, Tango, Aqua):
http://people.mozilla.com/~faaborg/files/20080514-firefox3Themes/gears.png

here are the other Firefox windows shown for all platforms to use as a references:

http://people.mozilla.com/~faaborg/files/20080514-firefox3Themes/optionsComposite.png_large.png
http://people.mozilla.com/~faaborg/files/20080514-firefox3Themes/pageInfoComposite.png_large.png
http://people.mozilla.com/~faaborg/files/20080514-firefox3Themes/addonsManagerComposite.png_large.png

I might have messed up the color profiles on those though, so if you want to sample an exact color use the original files:

http://mxr.mozilla.org/mozilla-central/source/browser/themes/winstripe/browser/
http://mxr.mozilla.org/mozilla-central/source/toolkit/themes/winstripe/

http://mxr.mozilla.org/mozilla-central/source/browser/themes/pinstripe/browser/
http://mxr.mozilla.org/mozilla-central/source/toolkit/themes/pinstripe/

http://mxr.mozilla.org/mozilla-central/source/browser/themes/gnomestripe/browser/
http://mxr.mozilla.org/mozilla-central/source/toolkit/themes/gnomestripe/

Comment 5

[Sean Martell]

Attachment: 48x48 Notification Icons

Sorry for the message spam.  I keep forgetting about bugzilla.

As in the email: These are the basic concept, with OS specific palettes to follow.  I'm thinking we can run it with one full set for all first, and I can have the 4 OS flavours ready for a later alpha version.

Comment 6

[Sean Martell]

Attachment: Full set

- darkened study cover to have green elements pop.
- Added 32x32 icons and options for the 16x16 status bar icons with states.

Please review and add feedback here.  Thanks!

Comment 7

[Sean Martell]

Attachment: Final Selects

Comment 8

[Sean Martell]

I'm going to close this, any further design edits moving forward can be opened in a new bug.