What does "pretty" mean to this Chrome page



9 years ago
9 years ago


(Reporter: jzhang, Assigned: smartell)




(5 attachments)



9 years ago
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

9 years ago
Created attachment 431487 [details]

Comment 2

9 years ago
Created attachment 431771 [details]
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

9 years ago
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

9 years ago
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):

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


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




Comment 5

9 years ago
Created attachment 436278 [details]
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

9 years ago
Created attachment 436487 [details]
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

9 years ago
Created attachment 436571 [details]
Final Selects

Comment 8

9 years ago
I'm going to close this, any further design edits moving forward can be opened in a new bug.
Last Resolved: 9 years ago
Resolution: --- → FIXED
You need to log in before you can comment on or make changes to this bug.