If you’ve been using 2.7, you know the style we’re looking for. Since this is just a design brush-up, we’re not looking for a style overhaul, or big departure from what we have. Think eyelift, not facelift. That said, you are free to experiment. The fonts we’ve been using include Helvetica, Arial, and Georgia, though you are not restricted to these choices. As you put together your submission, keep these words in mind: subtle, elegant, and clean.
1. Screen Options and Help need to go somewhere. When we were talking about the possibility of doing this, we considered flipping the tabs up into the header, below the Howdy/Log out links, since the favorites menu would be dropping down into the space where these tabs are currently. There is no requirement for where these need to go, just that they go somewhere that having the actionable layer slide out would look good and be easy to find/access.
2. The current navigation is divided into sections: Dashboard, Content, and Utilities. This serves to break up the nav so it’s not a long list of links, something that the majority of survey respondents in 2.7 preferred. You’ll see in Matt’s comp below that he has taken out these divisions. If a participating designer can find an elegant way to keep the divisions and make the menu feel less heavy, I would prefer it, especially since once plugins start adding to the menu, it gets even heavier. Don’t forget that your design will also need to work with the collapsed-nav mode, when it’s just icons and no words.
3. Feel free to play with fonts. Any choices you make in this regard should result in the admin feeling light and airy, but not spindly, and need to be easy to read. Keep accessibility in mind.
4. You can also play with the colors/grays/shading/gradients, but you must make sure there is a visual hierarchy that makes it clear what nav section you are in, what screen you are on, and where the user should look first. Make sure there’s enough contrast for accessibility compliance.
The current admin panel:
Mark’s initial mockup:
Matt T’s mockup:
We’re providing Matt’s .psd file for you to work from. Please do not create your own file and submit that, since if your design is chosen but your file isn’t in the right format, we won’t have time to let you fix it. Just edit over the layers. The file contains layers for both the current navigation and Matt’s proposed nav variation, so you have access to both styles as a starting point. Download the .psd.
We’re so excited to see what ideas people have!