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
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.
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.
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/
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.
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!
I'm going to close this, any further design edits moving forward can be opened in a new bug.
Status: NEW → RESOLVED
Last Resolved: 9 years ago
Resolution: --- → FIXED
You need to log in before you can comment on or make changes to this bug.