725068 - [Marketplace] visual design theme for market place app

Status: RESOLVED FIXED

(Marketing :: Design, task)

Description

[Bryan Clark (DevTools PM) [:clarkbw]]

The Marketplace / Apps team needs a visual design direction for the Marketplace HTML mockups which inform the Marketplace implementation.

We're looking for an overall direction that we could extend ourselves down to deeper pages as needed for the MWC demo.  I'll be filing further bugs for the other main pages that are needed by Beta release time; this request is solely for the MWC time frame.


Current HTML Mockup ( http://clarkbw.net/tmp/bootstrap2/apps/ ) using the Twitter bootstrap ( http://twitter.github.com/bootstrap/ ) framework

Comment 1

[Tara (musingt)]

Thanks Bryan.  

To confirm, do the links above capture the elements you need for Sean to theme as an initial "style guide" that you can then apply to MWC demo as needed?  And with that in mind, are you looking for Sean to take those wireframes / mockups and skin them? or did you need something else?  Just wanted to make sure the deliverables are clear.

Also, what would be your deadline here for design handoffs?  It seems like Sean will be doing some work, which you'll take and apply to the actual demos (or other / related assets for MWC) so I just want to make sure we're clear on deadlines.

Thanks.  Looking forward to seeing those other bugs and seeing these pages come to life.

* assigning to Sean
* cc-ing Pete and Josh
* Josh, cc-ing you so you can stay apprised of the latest theming as it relates to your work.

Comment 2

[Bryan Clark (DevTools PM) [:clarkbw]]

Yes and No?  We're moving toward some interactive mockups we use for the MWC demo and can start doing some user testing with.

I'm hoping that these pages provide the inspiration needed for Sean to create a main page "style guide" that we can apply to the HTML.  The wireframes and HTML mockups vary in certain places as we are exploring some ideas.

Here's a list of the "required items" I have so far for each page.  The wireframes or HTML mockups may differ but should be including these items.

* Main Page
** Featured Apps ( in a carousel or listed )
** Featured Collections ( in a carousel or listed )
** App Category browsing

* Category Page (for browsing)
** Featured Apps within that category
** Featured Collections within that category
** Listing of Apps that match the category

* Search Results Page
** Featured App related to search result
** Featured Collection related to search result
** Listing of Apps that match the search

* Details Page
** App Install & Share Button
** App Information ( Description, Image, Developer, Overall Rating, Designed For Devices )
** App Screenshots / Videos
** Collections that list the App
** Featured Apps similar to the shown App
** App reviews from Marketplace users

re: Deadline we'd love a style guide as soon as possible.  We'll take that guide and apply it to the site to fulfill our demo requirements.  I'm filing the other bugs now for those required pages above.


Further inspiration:

Details Page: http://clarkbw.net/tmp/bootstrap2/apps/details.html

Frank's Main Page w/ Collections: http://flee.com/mozilla/

Comment 3

[Sean Martell]

Hey all,

Just a heads up I'm building out a skinned homepage and detail page today to cover most of the elements.  Basing the styles on http://people.mozilla.org/~smartell/sandstone/, but a variant of that (not the same color scheme or background)

I've been temporarily testing some styles thanks to our glorious new dev tools :)  Will update here with something to share later this afternoon.

Comment 4

[Sean Martell]

One question I do have is which homepage do I focus on? The one in the bug description or Frank's main page?

Thanks!

Comment 5

[Sean Martell]

So I built out a PSD along the grid of Bootstrap and had a go at skinning the elements as seen in the top main page.  I got rid of the top bar to make it more open. It's technically there, just at 0% opacity.

base - http://cl.ly/0c2D0z122c2O0v333d2P/o

if we can inject gradients with PNG or CSS - http://cl.ly/1p2P3Y3l1x0o1Z0G2s3e/o

alt (with bar) - http://cl.ly/151H0b121C171q2O221c/o

As stated above, that sandstone page has links to the fonts and shows some examples of style thta could be adapted to match this mockup now if need be.

Let me know your thoughts and I can tweak and make a PSD availabale as soon as we're in a happy place.

Comment 6

[Josh Carpenter [:jcarpenter]]

Just chiming in after a few days at an offsite: Sean, that's looking gorgeous.

Comment 7

[John Slater]

+1 from me! Would be great to hear from the Marketplace guys, of course.

Comment 8

[Bryan Clark (DevTools PM) [:clarkbw]]

This is great! We're starting to incorporate some of this in our designs ( http://clarkbw.net/tmp/bootstrap2/apps/ ).  I'm realizing now that I could have just created a Mozilla.less file that changed all the settings from the original bootstrap to match the Sandstone look and kept much of the existing framework alone.

Comment 9

[Tara (musingt)]

Hey guys,  I'm not fully updated on the activities around this bug.  Has Sean finished design work covering the scope of this bug? or are we keeping this open?  Please advise.  Thanks.

Comment 10

[John Slater]

Sean is working on it this week...we should keep it open.

Comment 11

[Sean Martell]

Hey all,

Here's a ZIP with the homepage, browse, and detail page PSDs for tablet. This should be a good start on the stylesheets and I'll confirm sizes/gutters/spacing/etc in a document shortly.

http://people.mozilla.org/~smartell/marketplace/marketplace-tablet-PSDs.zip

Ping me on the ol' IRC with any questions.

Comment 12

[Sean Martell]

Squashing old bugs. This has been resolved. \o/