Make WordPress Core

Opened 3 years ago

Last modified 3 years ago

#51751 new enhancement

Update page header design

Reported by: michaelarestad's profile michaelarestad Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version:
Component: General Keywords: needs-design-feedback has-screenshots
Focuses: ui Cc:

Description

There is a proposal to create a block directory. With that proposal comes an idea for a new header pattern that could be applied to all wp-admin pages.

Here is a sample of current page headers:

https://cldup.com/-DlIcKR1yF.jpg

Here is the page header pattern in the proposal:

https://cldup.com/e3Kj4IaYHT.jpg

The page header is made up of the following:

  • Title - A short title of the page.
  • Description - These will be both informative and inspiring. We will need some quality copywriting here.
  • Actions - These can include search fields and button actions. In the following prototype, it is used primarily for Search, Upload, and Add New actions.
  • Help and Options buttons - These will replace the "Screen Options" and "Help" tabs at the top of the pages.

It was initially designed in the context of a Block Directory page. In an effort to test it out, I mocked it up on a variety of pages. I made a prototype to easily move between the pages in order to get a better feel for it.

https://cldup.com/KCiEMOq71r.gif

You can also peruse this Cloudup gallery for static images.

In the above prototype, I made two notable changes: I made the background white and I increased the padding of the center column to 64px instead of 20px. The design is not contingent on these changes, but certainly looks nicer with them in my opinion. For the curious, here is a gallery with a grey background and no padding change.

As for implementation, I hope to use some of the styles from the relevant Gutenberg components including the toolbar buttons. I also hope to use the SVG icons. It would be a good first step in aligning the styles of wp-admin with Gutenberg.

What do you think?

Change History (2)

#1 @dufresnesteven
3 years ago

I think it does a great job adding visual focus to what really matters, especially on plugin & block views. I am a fan.

A couple things from me:

  • I'm not certain the "Screen Options" moving into the (?) will be obvious enough, especially for experienced users. Although I'm not the biggest proponent of having a whole bunch of icons, it may make sense to have an option (gear?) icon beside the help icon as well.
  • I think if an action is added to the right of the search input, it should contain words for consistency and clarity (The Add Block header example just has an upload icon).

This ticket was mentioned in Slack in #design by michaelarestad. View the logs.


3 years ago

Note: See TracTickets for help on using tickets.