Design Share #57 (May 20-May 31)

The Design Team provides design for the WordPress project.

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.

Figma Access

You don’t need edit access to use the Figma libraries, you can copy components from there into your own drafts. If you’re a contributor with the ability to grant edit access, please be mindful, and downgrade to view access once the initial need for edit has waned.

This is a bi-weekly update of work the design group contributed to. Work happens in overview issues, and in needs design, or needs design feedback issues.

If you have updates you’d like to include in the next Design Share, drop a note in the #design channel. If you have questions, you can also ask them there, or as a comment on this post.

Useful Figma files

WordPress Design Library
WordPress.org Design Library
System
Post Graphics
Gutenberg Project Folder (requires view)

Useful Tracking Issues

Design work

Media Library meets data views and updated Inspector

Status: Conceptual

WordPress 6.5 and the upcoming 6.6 release have focused on adding and enhancing data views in the Site Editor. The 6.6 update will introduce the foundational elements of a revamped Inspector, designed to accommodate various post types across different contexts.

This conceptual mockup demonstrates how these new features can transform the Media Library. The integration of layout switching, sorting, and filtering will provide a much-needed upgrade. Additionally, incorporating the Inspector into the data view will facilitate seamless quick and bulk editing of media files.

BlockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. Connections

Status: In progress

Further explorations in denoting block connections to post metaMeta Meta is a term that refers to the inside workings of a group. For us, this is the team that works on internal WordPress sites like WordCamp Central and Make WordPress. and other sources. It’s never the full block, it’s always attributes. Dive into the discussion.

Background Image

Status: Completed

There’s a new site-wide background image tool, which after a little refinement ended up as the above. The goal was to create a compelling default for that context, which ended up being tiled, but top/center aligned to go witih common site layouts.

Openverse’s About page

Other ideas explored

Status: In progress/Needs feedback

Given that the latest and upcoming implementations demand for a space to explain how the search engine works, we decided to revamp the About page by gathering all content that currently lives in isolated pages and pushing the brand further with a more attractive introductory area.

#design, #design-share

James Tyner 3:55 pm on June 3, 2024

Re: the Media Library concept —

I think, at least in the publisher space, the most useful way to view images in the Media Library is with thumbnails. Often publishers will write titles/filenames that are intended for categorization by a dedicated photo editing team, while most of the content team will be trying to look for and select photos based on what they look like. I feel that the current list view concept you included places too little emphasis on thumbnails and too much on the metadata.

One possible solution might be to add the ability to toggle between a list view and a thumbnail view (maybe that’s something you’re already planning, but I didn’t see an obvious toggle in the concept mockup). Or maybe you’re planning to use a thumbnail-driven view in the Images tab of the Media Library? Let me know if there is more information on the Media Library revamp plans somewhere and/or opportunities to participate.

I’m also curious to learn more about the intended UXUX UX is an acronym for User Experience - the way the user uses the UI. Think ‘what they are doing’ and less about how they do it. for reading and editing captions and alt text. Both in the list view and the inspect view of the included concept design, only a small snippet of the caption and alt text data is shown to the user. This would make it difficult for newsroom users to check whether correct metadata has been added (with thorough text, no typos, etc.) or read internal-facing notes that may be added to a caption, and it seems like it would require additional clicks to get to the state where it’s possible to edit the caption. One benefit of the existing Media Library design is that captions and alt text are both readily readable and readily editable.

I do like aligning media items more with other content in WordPress by having a similar information layout and requiring a Save action to save the information.

I’m somewhat new to the WordPress community, so let me know if there is somewhere else I should be providing this feedback.
- Joen A. 6:22 am on June 4, 2024
  
  Thank you for good input. I would agree that a toggle between list views and thumbnail views is useful, same with the interface for editing metadata. In principle it could be the same as editing metadata for a document, inside the editor. If you’d like to comment further, then this GH issue is a great place to do so.

The Design Team provides design for the WordPress project.

More information

Media Library meets data views and updated Inspector

Background Image

Openverse’s About page

Other ideas explored

Share this: