The Visual Design of 2.7

Posted October 17, 2008 by Jen. Filed under User Interface.

It’s finally here, the moment you’ve all been waiting for! The long months of your tolerance and forbearance as you suffered through the inelegance of our hacked-together, leftover Crazyhorse interface are almost at an end. (Was it really that painful?)

The visuals you have been craving are finally finished enough to show, and have been approved by the lead developers. We hope you like them. Mad props to Matt Thomas and Andy Peatling for their visual talents. You can expect these designs to be extended to the rest of the 2.7 screens and implemented over the coming weeks.

So now that we finally nailed down the look, how’s it going to work? The menu system in particular has been the topic of discussion on the hackers and testers lists, so I thought I would take this opportunity to explain how we plan for it to work. As you know, one of the goals of 2.7 was to reduce the necessity to load new screens just to access sub-navigation menus; we wanted the most-used screens to be within a click or two at most. If you’ve been using the nightly builds, you got used to the arrow controls that allowed you to expand and contract the menus. Then you got used to the box-style with icons that not only opened and closed vertically, but could be minimized horizontally as well, leaving a remnant of icons to provide a kind of “advanced mode,” though you don’t need to be particularly advanced to use it. Now that we have real button styles (the icons are still placeholders, and we hope to have some new ones soonish), we’ve nailed down the menu functionality.

2.7 New Post Screen, Unfinished

2.7 New Post Screen, Unfinished

Each section header has three parts: the icon on the left, the blue link text, and the area to the right where an expansion arrow appears on hover or in expanded state. You can see that the arrow is contained in a small segment of the header, similar to the way the favorites menu is structured. If you click on this segment, the menu will expand to show the choices in that section. Click again to close the menu. Click on the blue link text and you will go directly to the screen for the first choice in that section, where the section menu will be opened to show you the other section choices. Double-click on the section icon and the menu will close horizontally, leaving the icon list visible. In this state, hovering over the icons will display the menus for each section, so you’re still only a click away from most screens. Double-click on an icon when the menu is closed this way and it will take you to the first screen in that section. The small arrows attached to the dividing lines between menu groups will also act as open/close toggles for using the horizontal collapse/expand function.

This variety of ways of using the menu system aims to accommodate both power user and novice alike. Clicking on blue link text like normal will bring the expected result for the novice, while the advanced user has more options for navigation that allow a more customized experience. We hope you like this result as much as we do, and you can expect to see it implemented in Trunk soon.

The image below is the new Dashboard style, for which I’ll save the explanations until early next week, but hopefully the preview will get you excited for the new design.

2.7 Dashboard

2.7 Dashboard

No Pings

RSS feed for comments on this post.

  1. […] just minutes ago, I noticed that Jane from Automattic posted the new images and details over at the WordPress development blog. Head on over there to see all the juicy details […]

    Pingback from WordPress 2.7 Admin Sneek-Peek | Webtrendblog.com on January 10, 2009

  2. […] The Visual Design of 2.7 […]

    Pingback from WordPress 2.7 “Coltrane” « Nisseposten on January 11, 2009

  3. […] https://wordpress.org/development/2008/10/the-visual-design-of-27/ […]

    Pingback from WordPress « St Pauls Bay Primary School ICT’s Blog on January 22, 2009

  4. […] What sort of changes can you look forward to in version 2.7? Glad you asked! Most of the changes are to the administration interface, so your blog readers shouldn’t see much of a difference. For a detailed outline of what version 2.7 does, take a look at this page. And for a thorough review of how the admin panel has changed with the new version, check out this post. […]

    Pingback from 2.0 toolbox » WordPress upgrade next week on February 13, 2009

  5. […] new interface that makes it extremely easy to use for the average Joe.  Not only does it look really awesome, but it gives users the ability to customize almost all of its elements.  For example, on the new […]

    Pingback from WordPress 2.7 | TutWow on March 12, 2009

  6. […] The Visual Design of 2.7 […]

    Pingback from WordPress 2.7 “Coltrane” | Yansen's Blog on March 15, 2009

  7. […] watching TED videos on my Apple TV while browsing the web with Em sleeping on the couch beside me. I just finished Garrett Lisi’s talk titled […]

    Pingback from shawncampbell » Archive » Quantum Fascination on April 4, 2009

  8. […] I had installed to make the old admin more usable, I wanted to have a play around with the new WordPress 2.7 Admin style. Unfortunately, it didn’t take me long to find a whole raft of things I didn’t like […]

    Pingback from WordPress 2.7 and Fluency Admin 2 Plugin » milliAmp on May 9, 2009

  9. […] 10月17日、WordPress Blogにおいて、次期バージョンにあたる2.7のデザインが公開されました。今回のバージョンアップではユーザビリティを向上させることがひとつの目的で、1~2画面遷移以内でほぼすべての操作を可能にするとしています。 ■ 作成画面 […]

    Pingback from WordPress 2.7 – ニューデザイン公開! | Technolog.jp on July 24, 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.


%d bloggers like this: