Make WordPress Design

Tagged: style-guide Toggle Comment Threads | Keyboard Shortcuts

  • Lance Willett 5:02 pm on January 31, 2011 Permalink
    Tags: style-guide   

    I changed the Make It Better! sidebar area from text widget to Custom Menu and added a link to the style guide site. Next step will be to move all the style guide content over here; I’ll tackle that later this week. (Any reason to leave it on WordPress.com rather than manage it here?)

    • Chelsea Otakan 5:14 am on February 1, 2011 Permalink | Log in to Reply

      Hmm, I don’t think so. We should rustle up some links to all the PSD resources and include them there as well.

    • jane wells 6:56 pm on February 1, 2011 Permalink | Log in to Reply

      Yes, there are some issues around posting files that Ryan has been working out. Don’t do any structural changes to the site for that reason without checking in with me, please. Also, Style guide doesn’t really belong under make it better, that is meant to be rotating ui tasks. styleguide will be under resources/references when we get a few more things set up infrastructure-wise.

  • Tracy Cannon 2:54 am on June 25, 2010 Permalink
    Tags: style-guide   

    I created a Trac Ticket (https://core.trac.wordpress.org/ticket/14081) for UI inconsistencies I’ve run across while working on the styleguide.

    Please add any you’ve noticed or comment on the ones that don’t need to be fixed. I just needed a place to note the weird things I’ve come across.

  • Tracy Cannon 2:34 pm on March 18, 2010 Permalink
    Tags: documentation, style-guide   

    Style Guide – Work Area 

    The documentation is up at https://codex.wordpress.org/User:TECannon/UI_Pattern_and_Style_Guide. Feel free to contact me if you want to contribute, and any discussion can take place below as well.

  • Tracy Cannon 11:02 pm on March 8, 2010 Permalink
    Tags: style-guide   

    Highlights from the short March 4 UI Meeting:

    • Jane is in the middle of last minute 3.0 ui craziness, so there are no big projects going on, mostly cleanup.
    • Not an official project… the dark header at the top of the admin screens (using the gray color scheme) doesn’t match the rest of the admin screens, which have that light, open and airy feeling. The “visit site” and “new post” buttons are too low-contrast. We need to lighten it up a little and get those buttons to have higher contrast for accessibility reasons. The gray color scheme is the most important b/c it is default. Just do header in a few variations by Tuesday and we’ll see if anything sticks. (JohnONolan & gastonfig volunteered to look at it.)
    • Style-guide: TECannon is still working on the style-guide and will post sections here for discussion.
    • (As of 3/8 I’m not sure if this is still needed.) Need to come up with a button (largeish) to drop in header. “Updates Available!” would probably be the text. It should be high contrast, and would likely live between the site title and the favorites menu (new post dropdown). Upgrade has been changed to Update and the Upgrade SubPanel has been moved from Tools to Dashboard.

    And that’s about it.

    • JohnONolan 11:13 pm on March 8, 2010 Permalink | Log in to Reply

      Thanks for posting this up Tracy 🙂

      I’ve taken a stab at the header in two variations:
      Original: http://twitpic.com/16mfal/full
      Medium: http://twitpic.com/16mffd/full
      Light: http://twitpic.com/16mfmt/full

      All 3 side-by-side: http://twitpic.com/16mf3n/full

      I also took a stab at doing the update notification button that Jane mentioned she wanted to add in to the header – tried it in different colours but the standard wp-yellow doesn’t look great inside the shade of grey.


      • Ptah Dunbar 12:24 am on March 10, 2010 Permalink | Log in to Reply

        I *really* like the light version of the header! Makes WP feel a lot more lighter. Please get that into trunk 😀

        And why are we separating the update notifications from the usual admin notices?

        • jane 12:17 am on March 11, 2010 Permalink | Log in to Reply

          It’s part of the move to make system updates more prominent, and not blend in with things like “draft saved” or “comment approved.”

      • Hafiz Rahman 1:16 am on March 10, 2010 Permalink | Log in to Reply

        These are nice, John.

        Both Medium and Light version does a good job to make the “Visit Site” button pop-up more. I personally prefer the Medium one to make the change less jarring compared to the original that people are used to.

        Also I think it feels imbalanced that the “Visit Site” button is small compared to the other buttons (update notification and new post). The dimension difference tells that visiting the site is less important than the rest; yet if it’s not that important, why placed it adjacent to the others?


        • JohnONolan 12:21 pm on March 11, 2010 Permalink | Log in to Reply

          Thanks Hafiz,

          For the purpose of this excserize I didn’t modify any sizes of any elements – so what you’re seeing there is exactly how it it as the moment in terms of button size.

          Personally speaking I don’t really mind it – but I can totally see where you’re coming from!

      • Tracy Cannon 8:14 am on March 10, 2010 Permalink | Log in to Reply

        The medium is a good lightening up of the existing header without changing anything too much, but I’m really attracted to the light version.

        The light one definitely makes those shortcut buttons stand out & feel less cluttered at the same time. I can see the update notification message/button you mocked up working nicely in that version as well.

      • Simon Bailey 2:36 pm on March 10, 2010 Permalink | Log in to Reply

        Really love the white one there, shows up the site name extremely well and really nice subtle gradients used, very minimal but sexy, which I think is what the WordPress back end does so well – this design just fits.

      • Jeremy Clarke 4:57 pm on March 10, 2010 Permalink | Log in to Reply

        I think the medium one is the right way to go for the header. it matches the style of the selected sidebar section and sticks out. The light one is very pretty but I don’t think it offers enough grounding, it leaves the page floating.

        That said I think the medium one needs the integrated buttons reworked. Making them darker doesn’t really work well. I think they would look perfect with the same light grey color as normal UI buttons, there would be plenty of contrast and everyone would understand inherently that they are buttons.

        I love the gradients you added. The actual WP logo in the medium mockukp looks kind of strange with them, but that could probably be solved with some quick levels management.

        For the update button, why not make it the same blue style as the epic save buttons from the rest of the admin? Maybe that goes against the principles guiding blue v. grey buttons, but I think it would adequately emphasize the upgrade button and contrast it with the other grey buttons in the header. I think it shoudl also be aligned right with the favorites menu rather than floating in the middle, that just feels weird to me.

      • jane 12:16 am on March 11, 2010 Permalink | Log in to Reply

        Standard alert yellow=yuck, so let’s not use that for anything. We always meant to pick a better color, that yellow was left over from 2.5.

      • jane 6:03 pm on March 11, 2010 Permalink | Log in to Reply

        I like the light one the best. Why? It mimics the coloring of the module headers, making a visual connection between header/filling. The medium one connects the header with an on state, which might make sense in a multisite situation, although most people have asked for color variations in that situation. Based on these things, plus that fact that everyone I’ve shown the 3-versions graphic to loves the light one, Ryan and I think we should go with the lightest one. I’m making a trac ticket for it, and if anyone has major issues with going lighter, they can be raised there.


    • Tracy Cannon 11:20 pm on March 8, 2010 Permalink | Log in to Reply

      • JohnONolan 12:16 am on March 9, 2010 Permalink | Log in to Reply

        Is there any further action required on this?

        • Tracy Cannon 7:46 am on March 10, 2010 Permalink | Log in to Reply

          I’m not sure if this is finished on not, but the top header seemed too cluttered when I tried to add a notification button, so I tried a few other ideas.

          Exclamation point instead of numbers on Dashboard -> Update Menu.

          (In addition to the Admin Menu) An Updates widget on the dashboard which would list the specifics: WordPress core? and a filter table listing the plugins &/or themes with updates available. There should be a button to update everything in the list, and it would be nice to have the option(s) of updating each individually, bulk updating those selected… think of it as a QuickUpdate dashboard widget.

          Another Idea: New Header Tab for Updates. The tab only appears when there are updates available, like screen options, and is differentiated from the other header tabs by color (yellow or red.) Similar to the Dashboard widget, but without most of the functionality… It lists updates available, includes text links to SubPanels, and emphasizes an Update All button.

          • Jeremy Clarke 5:00 pm on March 10, 2010 Permalink | Log in to Reply

            I love your idea of using a red exclamation in the dashboard rather than numbers. I don’t think putting updates in a screen-options type tab makes sense with how they are normally used though. It’s a global rather than contextual task/message, so it should go in the header or in admin_notices (the space above pages where messages show).

          • JohnONolan 7:29 pm on March 10, 2010 Permalink | Log in to Reply

            I like what you’ve done with it -particularly the most recent screenshot.

            However I’m still unsure of this whole thing. Having 2 ‘dashboard’ links in the same place makes no sense at all, and is very inconsistent with the rest of WordPress UI. I also still don’t think it’s right for “updates” to be a submenu of “dashboard” – how are the two related?

            Now, I MUCH prefer your idea to have an “updates tab” that only appears on the dashboard screen if there are updates available. This makes a lot more sense to me, and I think that it’d be a lot more usable too.

            I imagine that this would be fairly easy to implement using the tabs that have already been developed for the manage/install tabs in the ‘appearance’ menu.

      • Ptah Dunbar 12:27 am on March 10, 2010 Permalink | Log in to Reply

        Update notification bubbles should only appear in the Updates tab. It’s confusing when they’re all over the place.

compose new post
next post/next comment
previous post/previous comment
show/hide comments
go to top
go to login
show/hide help
shift + esc
Skip to toolbar