WordPress.org

Ready to get started?Download WordPress

Guidelines for 2.8 navigation design

Posted April 25, 2009 by Jen Mylo. Filed under .

Style Guidelines

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.

UX Considerations

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.

Reference Screenshots

The current admin panel:
Current 2.7 Dashboard

Mark’s initial mockup:
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!

4 Pings

RSS feed for comments on this post. TrackBack URI

  1. [...] just read that WordPress is holding a design challenge for a brush-up of the current administration administration interface for the upcoming version 2.8. [...]

    Pingback from WP 2.8 Design Challenge: to free or not to free? - Jeremy Visser on April 26, 2009

  2. [...] UX and design guidelines for this mini-project are posted here (so as not to clog up anyone’s feed reader with big graphics). Read through the UX stuff, check out the comps Matt Thomas mocked up last night (with absolutely no notice, for the record). Use the .psd as your base, and when it’s time to submit your ideas, make a .jpg or .png and post a link to it in the comments on this post. (Note: Only comments containing a link to a design submission using this format will be approved. For general discussion about this design challenge or any of the submissions, please head into the #wordpress-dev IRC channel.) [...]

    Pingback from Design Tweaks: Who’s In? (An idea in three acts) on May 29, 2009

  3. [...] UX and design guidelines for this mini-project are posted here (so as not to clog up anyone’s feed reader with big graphics). Read through the UX stuff, check out the comps Matt Thomas mocked up last night (with absolutely no notice, for the record). Use the .psd as your base, and when it’s time to submit your ideas, make a .jpg or .png and post a link to it in the comments on this post. (Note: Only comments containing a link to a design submission using this format will be approved. For general discussion about this design challenge or any of the submissions, please head into the #wordpress-dev IRC channel.) [...]

    Pingback from Design Tweaks: Who’s In? (An idea in three acts) | LEHSYS Blogger News on June 6, 2009

  4. [...] UX and design guidelines for this mini-project are posted here (so as not to clog up anyone’s feed reader with big graphics). Read through the UX stuff, check out the comps Matt Thomas mocked up last night (with absolutely no notice, for the record). Use the .psd as your base, and when it’s time to submit your ideas, make a .jpg or .png and post a link to it in the comments on this post. (Note: Only comments containing a link to a design submission using this format will be approved. For general discussion about this design challenge or any of the submissions, please head into the #wordpress-dev IRC channel.) [...]

    Pingback from Design Tweaks: Who’s In? (An idea in three acts) | Word Press Magazine on July 15, 2009

See Also:

For more WordPress news, check out the WordPress Planet.

There’s also a development P2 blog.

To see how active the project is check out our Trac timeline, it often has 20–30 updates per day.

Categories

%d bloggers like this: