More style update comps
Here’s where we stand (some options):
Less gray, more white, box outlines
No box outlines, slightly different arrow treatment
Retain full-width header, add breadcrumb
-
Jane Wells
Reply
Recent Comments
Here’s where we stand (some options):
Less gray, more white, box outlines
No box outlines, slightly different arrow treatment
Retain full-width header, add breadcrumb
Jane Wells 4:43 pm on May 2, 2011 Permalink |
I like the arrow treatment in the middle one (no box outlines, comp by Ryan Imel), but like the lighter boxes better than the heavier gradients (though I really liked not having box outlines for a change).
Chelsea Otakan 4:59 pm on May 2, 2011 Permalink |
Overall, I like the third one best. The large arrow treatment is a nice large indicator of where I am. The small arrow treatment falls behind the content window and doesn’t feel as much like a pointer to me.
+1 to the full width header. I think maybe we could darken the header a bit and pull the border all the way to the edge (seems weird to have it go to the edge on the left, but not the right.
Might try to iterate on this after finals this week and after seeing any more comments here. Is there a PSD we can mess with?
Jane Wells 5:05 pm on May 2, 2011 Permalink |
When are finals done? By end of week we’ll need to have this done already.
Chelsea Otakan 5:07 pm on May 2, 2011 Permalink |
I’ll be mostly finished on Tuesday. So will post something by Wednesday
Jane Wells 5:20 pm on May 2, 2011 Permalink |
I like the size of the big arrow, but I like the color treatment of the small one, because it doesn’t undo the spatial placement of the nav column the way the big arrow one does right now.
Chelsea Otakan 5:25 pm on May 2, 2011 Permalink |
gotcha. perhaps we could keep the small arrow but stack it above the white window (as the big arrow is) for a little more emphasis
Jane Wells 5:49 pm on May 2, 2011 Permalink
Or just change the shape so it’s also big, but keeps the spatial orientation.
Ryan Imel 5:53 pm on May 2, 2011 Permalink |
Quickly made the big arrow more of a cutout look: http://cl.ly/3R2k2A3I1L2w42382r2B
Brandon Dove 5:02 pm on May 2, 2011 Permalink |
+1 for no box outlines. I feel like the screen options/help tabs need an update though. They feel out of place with the current look. The double line divider in the nav on the first and third comps feel a little heavy. Lastly, I don’t think we can drop the heading (Dashboard) as is represented in the third comp.
Jane Wells 5:07 pm on May 2, 2011 Permalink |
Yes, i think we need to decide box styles and then screen options/help will inherit from that. No sense in spending hours on updating those in comps before a decision is made.
John James Jacoby 5:06 pm on May 2, 2011 Permalink |
I like elements of all three.
Keep the larger arrow treatment
Keep the “more white” motif
Keep breadcrumb
Keep the not-full-width header from #1
Keep the favorites menu from #2
Keep the meta boxes from #1
Keep the meta box gradient from #2
Jane Wells 5:07 pm on May 2, 2011 Permalink |
This is why people say design by committee doesn’t work. And they are right.
John James Jacoby 5:28 pm on May 2, 2011 Permalink |
I didn’t notice the square corners in the #1 meta-box; so I am disagreeing with myself on that one. Otherwise I stand firm.
John James Jacoby 6:03 pm on May 2, 2011 Permalink |
They all have square corners. So, I give up.
Joseph Scott 5:09 pm on May 2, 2011 Permalink |
Over all I like the feel of #3 better, but the full width header should get some color. One of the things that stands out in these three mockups is that the only significant color on the dashboard are the gravatars.
Ryan Imel 5:12 pm on May 2, 2011 Permalink |
I like the navigation extending all the way to the top of the screen, but I also like the breadcrumbs incorporated in the header. Kind of like this: http://cl.ly/2N3F3A0f1r1J3s2t300Y
Jane Wells 5:16 pm on May 2, 2011 Permalink |
We had a version like that originally (per my request to MT), but between translations, long blog titles, and small screens, the header would quickly look like crap.
Ryan Imel 5:18 pm on May 2, 2011 Permalink |
True.
Ryan Boren 5:20 pm on May 2, 2011 Permalink |
So chop the title a little more. And I don’t think favorite actions should be off limits for 3.2. Just kill it already. We can leave the API there for any plugins that want to resurrect it.
Ryan Imel 5:32 pm on May 2, 2011 Permalink |
Same as before, but minus favorite actions: http://cl.ly/3u1B2S1G25230E0b2E3C
John James Jacoby 5:22 pm on May 2, 2011 Permalink |
I like this one, alot.
Chelsea Otakan 5:19 pm on May 2, 2011 Permalink |
I’m still a little concerned about the typography. Is this something that still needs to be updated or are we thinking of switching the main body font to Arial/Helvetica?
Jane Wells 5:21 pm on May 2, 2011 Permalink |
Can you specify what the concerns are?
Chelsea Otakan 5:23 pm on May 2, 2011 Permalink |
The use of Arial/Helvetica reminds me a lot of the design preview Blogger released a little while back
Matt Thomas 10:46 pm on May 2, 2011 Permalink |
Web fonts are kind of cyclical — we weren’t exactly unique in switching to Lucida Grande in 2008, either.
Because of how badly Lucida renders on Windows, and of how well Helvetica/Arial renders on both platforms, I think it’s functionally better with the added benefit of being more attractive than any of our other options.
Ryan Boren 5:23 pm on May 2, 2011 Permalink |
No full width header. It ruins the look to the point of making the entire endeavor worthless. IMNSHO, of course.
Chelsea Otakan 5:46 pm on May 2, 2011 Permalink |
Just think it might be an annoyance for some people who are so used to clicking the header to see the front-end of their site.
Visually, I like the no full width too.
scribu 7:45 pm on May 2, 2011 Permalink |
Didn’t we agree a while ago that the full width header should go away, considering the WPMU merge? especially now, since we have a separate network admin area.
Chelsea Otakan 9:10 pm on May 2, 2011 Permalink |
read more on that. makes sense now. disregard me
Andrew Ozz 6:50 pm on May 2, 2011 Permalink |
Not seeing any comps with the admin menu closed/folded. Anybody had a look there?
Matt Thomas 10:47 pm on May 2, 2011 Permalink |
I made one earlier to see how it might look, but this hasn’t been run past Jane yet; just my idea.
Matt Thomas 10:48 pm on May 2, 2011 Permalink |
I forgot I can’t do that here.
See: http://mattnt.files.wordpress.com/2011/04/dashboard-closed.png
jane wells 11:03 pm on May 2, 2011 Permalink |
Yep, pretty much what I would imagine.
Joen 11:57 am on May 4, 2011 Permalink |
That looks so wonderful. That’s my favourite.
I blindly trust the great hands this is in, and I’m not a fan of design by committee, so I’ll keep my feedback brief:
I love the flat style you’re on to, way much more than the gradiented one.
Could the “Screen Options” and “Help” tabs get a little new-style loving and perhaps some contrast?
People are going to love this.
Aaron D. Campbell 5:25 pm on May 4, 2011 Permalink |
It seems like we should keep the indicator arrow even when the menu is collapsed.
jane wells 5:35 pm on May 4, 2011 Permalink
Which arrow: collapsed horizontally (it is still there), or on individual sections being collapsed? The latter is not displayed b/c all the subs show on hover when the admin menu is closed/folded horizontally.
Aaron D. Campbell 6:46 pm on May 4, 2011 Permalink
In the image Matt Thomas linked above, dashboard is highlighted but doesn’t show the arrow-style indicator:
Aaron D. Campbell 6:46 pm on May 4, 2011 Permalink
Sorry, the image I tried to embed in the last comment: http://i1187.photobucket.com/albums/z397/aarondcampbell/missing-indicator.png
jane wells 6:48 pm on May 4, 2011 Permalink
When it is folded in we don’t show the arrow, because they can’t click to expand. In folded state, the submenus are shown as flyouts on hover.
Jane Wells 7:07 pm on May 2, 2011 Permalink |
Nabbed Matt M for an opinion and he likes the top one best. Having Daryl Koopersmith take a first past at the restructuring patch, then it will be on trac and revisions can be made in code rather than in rounds of comps. Thanks to everyone who has been involved so far!
sara 9:04 pm on May 2, 2011 Permalink |
I really like the first two: (+1 to no full width header)
In the first, I like the change of the favorites menu being moved beside the heading “dashboard”
In the second, I like the no box outlines – but in the first, I like how the titles are treated in size as well as the underline.
Michel 10:10 pm on May 4, 2011 Permalink |
This is hugely inspired by the Fluency Admin plugin, if not a blatant ripoff of it.
jane wells 6:49 pm on May 8, 2011 Permalink |
In April 2009 we had people submit ideas for a header/nav refresh, including Dean, who was in favor of such an update. This style update has changed some since then, but no one is denying that Fluency is an influence. You can’t really rip off something that is given freely.
Dean Robinson 10:59 pm on May 8, 2011 Permalink |
Wow, April ’09 ?was it really that long ago? man time flies fast.
@Michel – I don’t feel like Fluency is being ripped off at all, Fluency is my take on the WP Admin and if that influences the core look of the WP Admin in any way then I’m cool with that.
Chuck Reynolds 6:14 am on May 5, 2011 Permalink |
I like left nav and header of #1 but the shaded meta boxes of #2. Liking where it’s going tho
Nick 6:04 am on May 12, 2011 Permalink |
Design 2 Please! Beautifull!