747526 - Design for MMO page

Status: RESOLVED FIXED

(Marketing :: Design, task)

Description

[Dan Horner]

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.7; rv:12.0) Gecko/20100101 Firefox/12.0
Build ID: 20120411064248

Steps to reproduce:

Hi Ty, please can you add the PSD for the MMO landing page here?

Thanks

Comment 1

[Ty Flanagan]

Attachment: Marketplace Homepage - Opening Soon Promo

Comment 2

[Matej Novak [:matej]]

Hey Dan, seeing this in layout I just have one question: Where does "Shore your feedback" link to?

Comment 3

[Ty Flanagan]

PSD can be grabbed here:  http://mozilla.tyflanagan.com/artwork/Marketplace/Moz_Marketplace_Store_Promo.psd.zip

Comment 4

[Wil Clouser [:clouserw]]

I'm told you want this to go out with the marketplace in 2 days.  This is an unconfirmed bug with questions in it that no one has answered.  Tara - what's the status of this?

Comment 5

[Potch [:potch]]

I can run with what's there.

Comment 6

[Justin Scott [:fligtar]]

Dan's out traveling today. What's there is good, with the modification that the button should go to https://wiki.mozilla.org/Marketplace/Mozillian_Preview which will have both testing instructions and feedback channels, so maybe make the label "Test & Give Feedback"

Comment 7

[Matej Novak [:matej]]

Yup, that looks good to me. Just please change the capitalization:

Test & give feedback

Dan, does that work for you?

Comment 8

[Tara (musingt)]

Hey guys.  Sorry but this page wasn't discussed with me, so aside from the information in this bug (and the final PSD attached) I don't have much more to add.  Seems like Justin answered the main question here (thanks!) regarding the link, and the CTA is fine as long as it's aligned with how we're asking for feedback elsewhere.  Wil, were there other questions that you needed help with? For some reason when Dan files bugs it goes to "unconfirmed" by default.  It wasn't meant to imply anything other than the fact that I forgot to change the status to "new".

Comment 9

[Tara (musingt)]

Hey guys, are we good to go here or waiting for Dan (or someone) to provide input/next steps?

Comment 10

[Christopher Van Wiemeersch [:cvan]]

(In reply to Tara (musingt) from comment #9)
> Hey guys, are we good to go here or waiting for Dan (or someone) to provide
> input/next steps?

It's live on https://marketplace-dev.allizom.org/ (after you log in)

Comment 11

[Ty Flanagan]

Attachment: Marketplace Homepage - Opening Soon Promo - Visual QA Differences

Just took a look at the live version of the page. I noticed that there are several layout inconsistencies between the PSD and live version. I have attached an animated GIF which demonstrates what Im referring to. (Give the image 2secs to switch)

Is this something we can easily fix? I would really like for image, text and buttons to be closer together and properly sized as per the original design. Something else to point out – the background looks quite a bit more saturated within the live version versus the PSD. Backgrounds elements seem to be missing the gradient subtleties along the edges of the different toned content areas.

Thoughts?

Comment 12

[Matej Novak [:matej]]

Also, please lowercase the S in "Opening soon," as per the original.

Comment 13

[John Slater]

Huge +1 for comment #11...it's very important that the live versions of the pages match the PSDs as they were designed.

Comment 14

[Sean Martell]

Yeah, a +1 here too.

I've coded out the button and tile interactions here: http://people.mozilla.org/~smartell/marketplace/style/

Looking at the current site, the hovers and button states don't match.  Could we get that interaction code in there?

Also, looks like some of the glyphs (menu top right glyph as an example) weren't cut with proper transparency. They're designed matching the specs of the glyphs in the browser, so we need to be consistent there.

Comment 15

[John Slater]

Web team, how can we address the issues Ty and Sean brought up in the above comments?

Comment 16

[Potch [:potch]]

(In reply to John Slater from comment #13)
> Huge +1 for comment #11...it's very important that the live versions of the
> pages match the PSDs as they were designed.

There's some polish things we need to do to bring the page more in line with the original mockups- i.e. tightening up the top promotional area on the homepage, The site has a responsive layout, we've been working off the tablet-desginated PSDs. Some things (specifically content width) will vary based on the browser size.

Some of the button styles have been tricky (CSS quirkiness) in some places, but we have the buttons as designed on the detail page presently, and I intend to globalize that style once I get those quirks worked out.

We've been heads-down working to prepare for the launch, and a number of functional bugs in the UI have taken precedence over visual polish adjustments. I look forward to bringing things closer in line with Sean's snazziness in the next few weeks as time permits.

Comment 17

[John Slater]

Thanks Potch...good to hear that, and let us know how we can help. Can we set up an informal system where the designer of a page (Ty in this case, but Sean in many other Marketplace ones) does a quick round of visual QA before it goes live?

Comment 18

[Wil Clouser [:clouserw]]

(In reply to John Slater from comment #17)
> Thanks Potch...good to hear that, and let us know how we can help. Can we
> set up an informal system where the designer of a page (Ty in this case, but
> Sean in many other Marketplace ones) does a quick round of visual QA before
> it goes live?

We're working with the UX and UR teams on a workflow.

Comment 19

[John Slater]

Sounds great. Please keep Sean and I in the loop on how that turns out.

Comment 20

[Potch [:potch]]

Here's the button update: 

https://github.com/mozilla/zamboni/commit/b314d85

Comment 21

[Potch [:potch]]

some more homepage stuff

https://github.com/mozilla/zamboni/commit/e3888a9