WARNING: Intense discussion of the open-source design of the WordPress website software lies ahead. I will literally discuss shades of grey. People uninterested in WordPress and its future should probably learn more about snuggies instead.
I updated my WordPress SVN Trunk installation today and noticed a huge change to the admin screens that had just been committed. The header and footer of the admin section had been switched from basically black to a very light grey color. This change was committed as a work in progress, so people would see it and work towards a final solution.
Fig 1. Old admin header color on top, current SVN version below.
Overall I support this change and think it looks better, but the exact shade of grey in the background didn’t match the gradients in similar UI elements (the dashboard sections and screen options buttons) so I worked out a different light-grey graphic to use as a background that would match. Here is a screenshot of how it should look if this light grey is used in the final WP 3.0 release, I think it is pretty solid and shouldn’t make anyone cry.
Fig 2. WP-Admin with darker but still light-grey heading and footer. Pretty okay.
I remembered a conversation on the WP UI dev blog where another middle-grey option was proposed but didn’t get a lot of attention. I really liked the darker grey version in JohnONolan‘s original mockup so I worked out a full page screenshot using the darker shade of grey that I thought worked better and added them to the trac ticket about the header change.
Here’s the one I think would work the best, dark grey to match the active heading in the sidebar (in this case the “Dashboard” section heading).
Fig 3. Nice dark WordPress Admin screen, how it should be.
Here is one giant image with both of them so you can compare. Instead of images like this I like to open two versions in seperate tabs in my browser than jump back and forth to decide which I prefer.
Fig 4. Side-by-Side comparison of light and dark grey proposals for admin header and footer.
I’m hoping the dark one can get implemented because it has a lot of nice features that the lighter version lacks:
- It is not a big change from the old version, so people will be inherently less upset about it.
- It brackets the whole UI nicely and preserves the high-contrast from the old design.
- It avoids a page where 90% of the chrome matches each other pefectly. I think the dark grey is important to keeping the look neat, and having only one element in the page with that color (the active sidebar heading) make it look unbalanced.
Feedback welcome, what do you think? If you want to support/flame me the trac ticket about it is probably the best place, so that your input affects the final decision.
