875985 - Make the devhub look like the consumer pages

Status: RESOLVED WONTFIX

(Marketplace Graveyard :: Developer Pages, defect, P4)

Description

[Matt Basta [:basta]]

It's weird and jarring to developers to go between the consumer pages and the devhub because they look (and work) nothing like one another.

We need mockups to make one look like the other.

Comment 1

[Tony Santos [:tsmuse]]

This is being addressed as part of a larger project with the branding team to create a "Developer Brand" and then adapt that to make it feel like Dev hub is a developer brand property, but also part of Marketplace.

Comment 2

[Bram Pitoyo [:bram]]

Attachment: DevHub - home - 01

This mockup visualizes the DevHub’s top page that’s been styled to match the consumer-facing Marketplace.

Notable changes:
* Font switched to Feura Sans
* Page background no longer have noise. It’s plain #f1f1f1
* White highlight areas have 10px border-radius
* Header is 90px high, with a different drop-shadow under it
* Header navigation font-size is 15px

Unsure changes:
* Base font size is increased to 15px, but I haven’t checked as to how this will impact the administration interface
* For the same reason, all header font sizes remains unchanged for now
* Base text color should be #333 rather than #444. Once again, I haven’t checked how this will impact the rest of DevHub yet
* Button style is kept blue, green and red for now. The consumer site uses a white and a blue, and I want to make sure that changing colors won’t cause any funny behavior (e.g. the “Delete” button colored green)
* Footer is styled just like the header, but with the drop-shadow above it. This makes the footer area looks funny, so I want to find a better solution to this problem

Comment 3

[Bram Pitoyo [:bram]]

Attachment: DevHub - documentation - 01

This mockup visualizes one of DevHub’s documentation page that’s been styled to match the consumer-facing Marketplace.

Notable changes:
* Article background no longer has a border-radius nor shadow
* Article paragraph font-size is upped to 15px

Unsure changes:
* Sidebar article navigation looks murky, but the consumer side of Marketplace doesn’t have anything resembling it. It’ll be replaced with a design that has more contrast

Comment 4

[Bram Pitoyo [:bram]]

The mockups attached so far lacks the correct navigation text on the header. See attachment 780835 [details] for the right values (and the old design, unfortunately, because it was done last month). It uses a combination of header and sidebar.

Comment 5

[Tony Santos [:tsmuse]]

Let's take a new look at this to see if we can update the color pallets so the dev pages look like the consumer pages.

Comment 6

[Wil Clouser [:clouserw]]

the redesign was de-prioritized again :-/

However, this is a part of that.  No need to keep this open.