As a continuation of the work begun in core for 3.6, I’d like to present you with the first iteration of the MP6 plugin. (Contents may have shifted or settled in shipping.) As it says on the tin, this is not intended for the general public, just for savvy WordPress enthusiasts eager to preview or contribute to a re-imagination of our collective home, wp-admin.
From the base of what was in trunk 3.6 last week, here’s what’s new:
- A visual treatment for the toolbar and menubar that visually unifies the two and reduces clutter.
- Flatter visual styling, with square corners, for tables and grouping elements like
.postbox. - Increased saturation of the traditional WP blue (old vs new comparison: http://cl.ly/image/1X2G3X1Y0y2g ).
- A splash of color to denote the current menu item. (gasp)
- Removed the burnt orange hover state in favor of a lighter blue.
- Single-color icons are now served via an icon font, making them load instantly and look crisp at any zoom factor. (The speed is noticeable on slower connections, like Gogo.) We can also use these for mobile apps.
- Consistent typography for all operating systems by including the Open Sans web font. (Cognizant of complications embedding this could entail.)
- Added padding between links in the menu for easier touch navigation, important as the majority of internet interaction will happen on touch devices within a few years.
- Lightened the page background using white backgrounds for grouping elements and a gray background for the body.
- Removed the large header icons for a cleaner look at the top of the page. Reduce, reuse, recycle.
“Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away.” — Antoine de Saint-Exupery
This week included contributions from MT, Joen, Ben, and Otto.
It’s worth noting that we don’t anticipate to support an alternative admin style (blue) like the current admin does, but the simpler visual language and icon font makes it infinitely more flexible for people to customize the color scheme of their admin.
There will be office hours on Monday with MT to discuss next week’s iteration, and then version 0.3 will come out March 15th. Come by with ideas, ruminations, rants, soliloquies, haiku, hex codes, complaints, beard grooming tips, and bike sheds. We plan to continue doing weekly iterations, to try at least one new thing per week, until it’s ready for core. The only constant is change.
Justin Sainton 12:41 am on March 9, 2013 Permalink
I think I’m in love.
Joey Kudish 12:51 am on March 9, 2013 Permalink
Nice! I really like the direction this is headed in. You mention office hours on Monday but not what time it’s at
Jerry Bates (JerrySarcastic) 12:56 am on March 9, 2013 Permalink
Looks great!
Mel Choyce 12:59 am on March 9, 2013 Permalink
Wow, I mean, wow. It looks stunning. Definitely an incredible start. There’s a lot of things I love immediately love about this: the reversed arrows on the admin menu, the “almost flat” styles on the container elements, the updated typography… Looking forward to meeting on Monday!
Mel Choyce 2:40 am on March 10, 2013 Permalink
I was playing around and made some small changes, so I threw those into a quick patch if anyone wants to check it out: http://cl.ly/code/3Q1A0m1n2u3c/mp6.diff
Lachlan MacPherson 1:00 am on March 9, 2013 Permalink
Wow! Although the darker toolbar and menu is initially jarring (only due to the difference) I think its perfect for putting focus on the content! Really like how it sections the content from the admin items.
I’m also loving the Open Sans font, but would love to see experimenting with a bigger font size. 13px just seems way to small.
Matt Thomas 1:05 am on March 9, 2013 Permalink
Hi guys — let’s meet at 9am Pacific/1pm Eastern/17:00 UTC.
Matt Thomas 2:02 am on March 9, 2013 Permalink
How do I get time zones wrong? 9am Pacific, 1pm Eastern, 1800 UTC.
Matt Thomas 2:03 am on March 9, 2013 Permalink
Ok. One more time. 10am Pacific, 1pm eastern, 1800 UTC. Walking away from the keyboard now.
Jose Castaneda 2:06 am on March 9, 2013 Permalink
We forgive you.
Ipstenu (Mika Epstein) 4:56 am on March 10, 2013 Permalink
You’re my TimeZone Screwup Twin
Mark Jaquith 7:39 am on March 11, 2013 Permalink
So, I don’t want to be that guy… but you messed it up the third time too, because you looked at PST and EST, but Monday, March 11th, is on PDT and EDT for most places in the United States.
1800 UTC is 2pm EDT and 11am PDT.
@mercime 3:16 pm on March 11, 2013 Permalink
1800 UTC ? = 11am Pacific and 2pm Eastern – daylight saving 1 hour ahead
Matt Thomas 4:16 pm on March 11, 2013 Permalink
Foiled by time zones and DST. Next time I’m using swatch beats.
Let’s chat in 45 minutes, otherwise known as 1700 UTC. Apologies if this is too-short notice for anyone — please leave your feedback here if you can’t make it. I’ll let someone else announce the time for the next one.
Mel Choyce 4:24 pm on March 11, 2013 Permalink
How long will the meeting go on for? I had a meeting come up at 1, but it lets out at 1:30 and I have some feedback I want to chat over.
Matt Thomas 4:28 pm on March 11, 2013 Permalink
Just depends on how many show up and how much ground there is to cover. If we’re not still going when your meeting is out I’ll be around afterward as well though.
Philip Arthur Moore 1:30 am on March 9, 2013 Permalink
I’m sure I’ll have more thoughts about this, but for now, all I can muster up is a, “Holy Moly Holy Moly This is BEAUTIFUL!” I wasn’t very hot on flat icons at all because of the surrounding admin elements in /trunk/ but when it’s presented in this manner it makes me want it yesterday.
Syed Balkhi 1:33 am on March 9, 2013 Permalink
I love this thing man. Simply beautiful.
Jose Castaneda 1:34 am on March 9, 2013 Permalink
I’m liking what I’m seeing so far. Really digging the colors more.
Ricky Lee 1:38 am on March 9, 2013 Permalink
Simply stunning! Feels fresh and aesthetically similar to Windows 8. Absolutely the right choice to iterate thru a plugin instead of forcing the flat icons into current design. I would of loved to have seen this in 3.6 but hopefully it will be the mission of 3.7.
Interested to see how core will handle .wp-menu-image and plugins not using icon font.
@mercime 3:46 am on March 9, 2013 Permalink
What a relief!!! You guys and gals were were playing with us
I couldn’t quite fathom why the UI team would brutalize wp-admin by replacing the clean and professional icons on the dashboard’s elegant gray background with heavy icons which gave me a headache everytime I visited the dashboard of my test site on 3.6 trunk to test a plugin/theme. Yikes.
So the joke’s on us:-) Thank you for the cool new plugin. The UI team is awesome as always. And those icons fit perfectly with the dark background, See ma, no headaches
Cheers.
Manny Fleurmond 4:31 am on March 9, 2013 Permalink
So much beauty in this new look. Love the subtle design choices: the graying out of disabled plugins, the contrast between the sidebar and the main content area, the white meta boxes on grey backgrounds. The blue highlighting really pops on the backgrounds. And thank you for squaring off everything. This is just plain clean and gorgeous. I hope this makes it into 3.6 because it looks ready for primetime to me
t.schwarz 4:35 am on March 9, 2013 Permalink
Hmm… there was a plugin a couple of years ago that had a very similar look. Don’t remember the name, though. This one is not love at first sight for me, though. It reminds me of outlook.com, which I like, but I don’t think the uni-color treatment of sidebar and navigation bar is looking too good. I like what MS has done with the top bar as color-coded identifier for different apps, but even without that functional requirement, I like the different color in the nav bar. With the same color the WP-Logo induced offset of the title in the navbar looks odd to me. And the dark top left corner looks too dominant for my taste. Also – even facebook is re-introducing 2px rounded corners in the new feed design, which, I believe, adds a lot of levity to the design. I believe that would be true for this design as well.
buzztone 5:17 am on March 9, 2013 Permalink
I like this – it’s a significant improvement. Brings the WordPress interface up to date and will I believe enhance the WordPress user experience.
Devin Walker 5:23 am on March 9, 2013 Permalink
The darker left navigation was jarring at first but now I’m easing into it. It’s more ‘metro’ style with the flat colors. I enjoy Open Sans as a font, it’s one of my favorites so good choice on that for sure! Ditching the blue alternate color is a great decision, I couldn’t stand that color scheme. The font-icons are also a nice addition, although I have Gravity Forms installed and their icon looks goofy next to the new UI’s icons. If plugins are to blend in better they will have to also follow suit with the flat look. I agree with @t.schwarz that the all dark top-left corner is a bit too dominant. Not first love, but an improvement I believe.
Ben May 7:54 am on March 9, 2013 Permalink
Really love it – a great direction for the admin…. *sniff* WordPress keeps growing up so fast
Antonio 8:39 am on March 9, 2013 Permalink
Good, it would be a great idea to begin thinking in terms of responsive web design in the admin too as in the core themes. Furthermore, it would be great starting to take into account the now implemented CSS3 modules to manage layouts in the correct way (i.e. Flexible Box or Grid Layout) using polyfills for browsers that don’t support them.
karmatosed 10:16 am on March 9, 2013 Permalink
This is really cool, look forward to seeing how it distills during housekeeping hours as things are refined.
TobiasBg 11:14 am on March 9, 2013 Permalink
WIth WP_DEBUG true, on trunk, I get this warning on every admin screen:
Warning: Creating default object from empty value in …/wp-content/plugins/mp6/mp6.php on line 21
Samuel Wood (Otto) 2:18 pm on March 9, 2013 Permalink
I can’t reproduce this one, works fine on a 3.5.1 local install with PHP 5.3 for me.
Ze Fontainhas 2:46 pm on March 9, 2013 Permalink
It’s happening to me, too. The only difference I can see is that I’m running PHP 5.4.4
TobiasBg 8:53 pm on March 9, 2013 Permalink
Seems to be depending on the PHP version then. I can see it with PHP 5.4.10 on MAMP, but not with PHP 5.2.17.
Dominik Schilling (ocean90) 1:56 pm on March 10, 2013 Permalink
The line
$wp_styles->registered['colors']->ver = $modtime;doesn’t work in the current state.The WP version is still used.
Ipstenu (Mika Epstein) 5:00 am on March 10, 2013 Permalink
I’m running 5.4.11 live and it’s NOT happening on WP 3.6 trunk.
@mercime 6:55 pm on March 11, 2013 Permalink
WP 3.6 trunk – PHP 5.4.7 XAMPP
Same warning but not on every admin screen. It happened after I click on Save button after changing eg Recent Post from 5 to 10 for example.
@mercime 7:06 pm on March 11, 2013 Permalink
-> widget areas
Terry Sutton 12:39 pm on March 9, 2013 Permalink
Opens the door for all kinds of personalizing: http://cl.ly/image/3D132l2y0t1x Very Nice.
Lee Willis (leewillis77) 12:48 pm on March 9, 2013 Permalink
Hi Matt, it’s an interesting look, and not one I’m a fan off, but I guess that’s a personal preference.
That aside, there are a couple of bits of constructive feedback I’d like to offer on some of the styling – what’s the best place to do that – the support form for the plugin? core trac? plugin trac?
Thanks
Helen Hou-Sandi 2:19 pm on March 9, 2013 Permalink
Lee Willis (leewillis77) 8:12 am on March 10, 2013 Permalink
Hi Helen,
Thanks for the reply. I’d seen that, but unfortunately I can’t do that time, hence I was looking for somewhere I could log something?
Matt Mullenweg 11:51 pm on March 10, 2013 Permalink
You can leave it here!
Lee Willis (leewillis77) 7:43 pm on March 12, 2013 Permalink
Thanks Matt, Helen,
My main two comments are as follows:
1. The headers on WP list tables don’t seem sufficiently different from the data rows. This is especially evident on list tables that don’t have sortable headings (Since the headings aren’t links and therefore aren’t a noticeably different colour). I’d like to see some visual separation between thhe header rows and data rows, whether it’s background colour, increase font weight, borders etc. Example: http://imgur.com/FupxufL
2. The inactive text colour seems far too close to white to be comfortable – can we find a better way of indicating inactive than lowering the contrast? I’d be surprised if the contrast in this shot passes any accessibility tests for contrast. Example: http://imgur.com/QKqvTfB
Cheers
Ryan Hellyer 2:00 pm on March 9, 2013 Permalink
I wrote a review up including some comparisons to the MP6 plugin today. Just thought I’d mention it in case it’s of interest here:
http://wprealm.com/blog/admin-panel-what-does-the-future-hold/
unsalkorkmaz 5:08 pm on March 9, 2013 Permalink
For some reason, plugin is broke tinymce -> insert/edit link’s “link to existing content” section.
Cátia Kitahara 12:47 am on March 10, 2013 Permalink
I like the direction it’s moving on to – it’s nice to activate and deactivate the plugin to notice all the differences – I love the menu and its icons and colors, the square corners and the font. I’m not sure yet about the admin bar and the menu, I like the fact they became one unique element, but it seems it lacks a bit of balance, I tried making the footer this same shade of dark grey (#222) and it looked better to me (obviously you’d need to replace the right margin with some right padding). And I’m not sure about the box-shadows, sometimes they look good, sometimes they look like they don’t belong to this new look. Just some first impressions, but the overall feeling is very positive! Great job! Congrats!
scottsweb 12:45 pm on March 10, 2013 Permalink
The plugin is a big improvement over the trunk 3.6 icon update I was testing a few weeks back. It is nice to see the whole wp-admin interface updated to reflect this new look and feel. Simplifying (by reduction) is a lovely ambition to design toward.
Having said that I would like to understand the reasons for this change a little more. Right now it feels like this update is focused solely on bringing WordPress in line with current design trends (a flat / Windows 8 look) rather than to creating something uniquely WordPress.
I think we should be aiming higher than that and that our time would be better spent looking ahead to the future of publishing and content management.
It is interesting. But is it necessary?
Drew Strojny 2:00 pm on March 10, 2013 Permalink
Nice work all! Really love the direction this is headed
Mike Schinkel 4:17 pm on March 10, 2013 Permalink
I’m finding the plugin list to be confusing with information about different plugins blending into each other because it doesn’t have the alternating grey/white bars like for example the post list has.
Matt Mullenweg 5:14 pm on March 10, 2013 Permalink
Good feedback, thanks.
karmatosed 8:52 pm on March 10, 2013 Permalink
I do agree a bit on the plugin list. Maybe something something along these lines would define that a little?
https://dl.dropbox.com/u/2339616/Screenshot_10_03_2013_20_45.png
or
https://dl.dropbox.com/u/2339616/Screenshot_10_03_2013_20_47.png
I used the already existing colours from other sections and tried an active and hover focus colour.
Maor Chasen 5:05 pm on March 10, 2013 Permalink
Great stuff! I like the direction in which things are moving.
Jonathan Dingman 8:20 pm on March 10, 2013 Permalink
Looks great, I love the dark background.
I’d love to see a sticky sidebar nav, where it floats with me as I scroll down the page.
Ipstenu (Mika Epstein) 9:33 pm on March 10, 2013 Permalink
That only works if you have a tall enough screen. Try it on my iPad and you’ll wanna kill
It would have to detect size of screen for sure.
taghaboy 9:00 pm on March 10, 2013 Permalink
just ONE question, is the admin panel responsive? Thanks
Matt Mullenweg 6:47 pm on March 15, 2013 Permalink
Not yet.
basequatro 12:05 am on March 11, 2013 Permalink
Some icons are overwrited by plugin and remains with two icons.
Another error is with submenu, Doesn’t adjust to the text size
Overall i like the new visual
Richard Archambault 1:46 pm on March 11, 2013 Permalink
I’d just like to say, “Wow!!”. My only comment other than that might be that I find it maybe a bit too dark (though I really liked Fluency Admin back in the day, so go figure). Maybe some sort of very subtle visual seperator between menu items might improve it just a bit, by making it seem less like a long list of plain ol’ links? I like the direction very much, though!
DaveE 1:57 pm on March 11, 2013 Permalink
I love the new direction. But, if I may, there are a few things I thought may be worth nit-picking:
As one or two others have mentioned, I find the contrast between the nav column and the main body to be too great. It requires a mental refocus each time I glance between the two to switch from light text/dark background to dark text/light background. It seems like the nav bar could be lightened to a point where it could continue to use dark text on a light background but still provide separation from the main body.
I also agree that there should be better separation between plugins on plugins.php (as others have mentioned). And finally, I think the matching color box-shadows on alert boxes (for example the yellow box shadow on a yellow alert box) is a little too strong. Maybe tone that down to a more neutral grey hue?
I’m really digging the new icon font, Open Sans usage and the flat color scheme/styling. Well done folks, well done!
GhostToast 2:27 pm on March 11, 2013 Permalink
I like the way this looks. I am curious how easy it will be to integrate Custom Post Type icons, as this is a nice touch we can add for helping clients associate different data types. I can’t help but feel it is very similar to ICS/JellyBean for Android, though that is not a bad thing.
karmatosed 6:38 pm on March 11, 2013 Permalink
To go with the ‘new’ blue, I’d suggest the following for a status colour refresh:
Green #00a213, Red #cb0800, Amber #cb7e00.
For the message updated you could remove the border and opt for a #fdffad background colour.
Tevya 11:51 pm on March 12, 2013 Permalink
Buttons need the flat look! Especially blue ones like Publish/Update. They still look rounded like the old interface. Give them square corners and remove the shading to make them flat like everything else, please!
Kelderic 12:54 am on March 13, 2013 Permalink
I like the flatter look, but one thing that I wish could be kept is horizontal divider lines between the menu items. Additionally, on the menu pages (for example the Widgets page), the gray title boxes are so pale that they are hard to make out. Having Some differentiation isn’t a bad thing.
traversal 3:43 am on March 14, 2013 Permalink
This is shaping up really well.
There’s one thing I’m not mad on though. I feel the change to almost-white meta-boxes is problematic, and will mess up the interface for many plugins that create highly customised content inside metaboxes.
I’ve been playing about this morning with an integration stylesheet for my plugin MasterPress, which contains a lot of custom field UIs, and the white meta-boxes just don’t seem like a great choice.
Compare this, which shows how the UI looks with white metaboxes: http://cl.ly/image/0u3a1m3k2m24
… and this, where I’ve made them darker gray again: http://cl.ly/image/1a0A0f0K3q43
The gray version looks far better to my eye, and ensures that “content” really pops to the fore. In the white version, the metabox titles almost look like text inputs as well. Any other plugins that rely on metaboxes being a darker gray would probably have similar issues.
I also ripped out the box-shadows for metaboxes in favour of a gray border, which I feel looks a bit cleaner too.
But anyway, it’s a great new direction, and I think the writing is on the wall – WordPress will very likely look like this soon
hakaner 8:33 am on March 16, 2013 Permalink
I’ve tried and pretty liked it. It looks exactly what I want. Thanks!
wesrice 4:44 am on March 18, 2013 Permalink
A filter to define the primary color in the css would be nice. I know its easy to add your own css to the dashboard, but I think it’d be an interesting thought to be able to define a single color value and have all instances of the default color overridden.
Perhaps the solution is as simple as putting all of the colors of the dashboard in a single css file, which would make it more manageable for devs to maintain color customizations.