Want to get involved? See the handbook and optionally drop into #design to chat. Most active design work happens in the block editor project, consider dropping into Needs design or Needs design feedback.
There’s a WordPress Component Library in Figma. Duplicate to edit, direct access is reserved for the design team.
We’ve gradually been updating the UIUI UI is an acronym for User Interface - the layout of the page the user interacts with. Think ‘how are they doing that’ and less about what they are doing.. First the headerHeader The header of your site is typically the first thing people will experience. The masthead or header art located across the top of your page is part of the look and feel of your website. It can influence a visitor’s opinion about your content and you/ your organization’s brand. It may also look different on different screen sizes. went lighter, then the whole thing got a facelift, and in 3.3 the admin bar + header = toolbar. What’s the next style up for grabs? Let’s talk about buttons. 
In 2008, man did we love those pill-shaped buttons. We were all Apple-cool. Primaries in dark blue with white text, secondaries in gray with black text. Is it time to push a little on the button design? It’s been 3 years, so I’m thinking… probably, yeah.
Over on the WordPress.comWordPress.com An online implementation of WordPress code that lets you immediately access a new WordPress environment to publish your content. WordPress.com is a private company owned by Automattic that hosts the largest multisite in the world. This is arguably the best place to start blogging if you have never touched WordPress before. https://wordpress.com/ home page, Andy Peatling introduced a new posting form, a la QuickPress, on the main page for logged in users. If you haven’t seen it yet, here’s the new form:
There’s a lot to like about this (post formats integration, single uploader access point), but the thing I want to point out here is the button styling. Different shape, different colors, different text. I’m not saying these should be transported wholesale into coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress., but it gives us something to think about.
The secondary button (Add Tags) looks a little too much like a Windows desktop toolbar item for me b/c it blends into the background so much, but that primary button (Publish Post) grabbed me right away. In 2.7 we introduced colors in the Dashboard Right Now box — green, orange/yellow, and red — to indicate different statuses.* We always meant to integrate those colors into the rest of the wp-admin design, but never really got around to it beyond coloring delete links red and pending links yellow. ‘Green means go’ is a pretty universal metaphor, thanks to traffic lights around the world. This button is a little too subtle to stand out as the primary action on an action-packed screen like post-new.php, but maybe with bold text and an outline (or maybe an actual green button, or maybe something else) we could consider a shift to using green in the primary buttons.
We stuck with blue back in 2008 using the logic that the submit would take you to a new screen, similar to the way a link would. Since then, however, it’s been an uphill battle to get people to use buttons for submit actions and links for links. Maybe separating them by color would make the difference (subtly) more clear.
If anyone is interested in experimenting, post button comps in the comments. Probably won’t devote much attention to this until 3.3 is out, but if we have stuff in progress, maybe we could get it in early in 3.4.
You must be logged in to post a comment.