899752 - Makeover the header using "flat design"

Status: VERIFIED FIXED

(Marketplace Graveyard :: Consumer Pages, defect, P3)

Description

[Christopher Van Wiemeersch [:cvan]]

On particular phones with particular displays the light contrast + gradient makes the header disappear at particular angles. Michael wanted to make the header gradient darker and flatter. Let's do that.

Comment 1

[Christopher Van Wiemeersch [:cvan]]

Here are some possible treatments for mobile and desktop:

Mobile:
http://cl.ly/image/1G2B3l2a3x44
http://cl.ly/image/1N0J1z2Q2e2U

Desktop:
http://cl.ly/image/0S1R2S0i3v2z
http://cl.ly/image/0z3s032o2I2p

Michael is going over a few more options.

Comment 2

[Michael Maslaney [:mmaslaney] ([e-mail])]

Updated header Mock:
https://www.dropbox.com/s/04sxaegn6lj1kie/Marketplace_Header-Chrome_v2.zip


Header Prototype:
https://www.dropbox.com/s/x7f5mcp0zc9xzcq/Marketplace_Header_Interaction.key


Let's go over this at the collections meeting.

Comment 3

[Michael Maslaney [:mmaslaney] ([e-mail])]

Attachment: Header_2a.png

Mocks:

https://www.dropbox.com/s/aqc62pbyqpbzrv0/Marketplace_Header-Chrome_v3.zip


I prefer option a or b, what do you think? Option a might be the safest.

Comment 4

[Michael Maslaney [:mmaslaney] ([e-mail])]

Attachment: Header_2b.png

Option b

Comment 5

[Michael Maslaney [:mmaslaney] ([e-mail])]

Attachment: Header_2c.png

Option c

Comment 6

[Christopher Van Wiemeersch [:cvan]]

https://github.com/mozilla/fireplace/commit/99320cc

Comment 7

[Iulian Timis]

Verified as fixed in https://marketplace-dev.allizom.org/ on FF26 (Win 7) and MP-dev app (Unagi)
Postfix screencast http://screencast.com/t/VduNdu7dxR
Closing bug.