The Design Team provides user experience, user interface, and visual design expertise for the WordPress project.
Want to get involved?
Welcome! This all-volunteer team needs designers of various kinds. See our handbook and drop into #design once signed up for volunteer opportunities.
Our vision is to be the go-to resource for design for other teams across the WordPress open sourceOpen SourceOpen Source denotes software for which the original source code is made freely available and may be redistributed and modified. Open Source **must be** delivered via a licensing model, see GPL. project.
As WordPress added more open sourceOpen SourceOpen Source denotes software for which the original source code is made freely available and may be redistributed and modified. Open Source **must be** delivered via a licensing model, see GPL. projects to its ecosystem and redesigned the News section, it seems a good opportunity to treat the design dimension more broadly and improve the contribution process based on the current practices.
Documentation concerns
When I started working on Openverse redesign, I struggled with finding up-to-date documentation regarding the contribution process. The procedure was slightly unclear as the design handbook suggests making a post in the Design blog and Figma had many projects, making it challenging to navigate through and where to start from.
The redesign task did not have specific tickets, and that is why my first move was to follow the most recent projects in Figma and duplicate their structures. I created a design library file mirroring the structure of the WordPress one and bringing into Openverse some GutenbergGutenbergThe Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/ design features that I considered experience’s backbones.
On the other hand, I recently discovered Gutenberg’s Design Contributions document and it is excellent explaining how to start contributing, describing the design principles, and linking the issues that need design. One place gathering Gutenberg’s design dimension. Unfortunately, it is not part of the existing handbook.
New design needs
Along with Openverse, the Photo Directory and News redesign projects made me think of the opportunity we have to expand the design contribution process and update the documentation to ease the onboarding of new contributors.
We currently have solid practices like the bi-weekly meetings, iteration posts, and the recent design share posts made by Channing. So this is not about starting from scratch but tapping into visible accomplishments.
What I have in mind ranges in the following, without any specific order or priority.
Update the Design handbook documentation: Review the existing content and fix the broken links. Add step-by-step sections to start using Figma, like the duplicate files guide. Expand the meaning of designing WordPress as it tends to refer to be CMS-only.
One structure for all Design Libraries: Update the Openverse Design Library’s file structure to mirror the WordPress one. Same for new upcoming libraries.
One contribution process on GithubGitHubGitHub is a website that offers online implementation of git repositories that can can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/: Duplicate the Gutenberg design contribution document into repos where design proposals are shared to match the label logic.
The list above is very task-specific and can evolve quickly into a list of changes, but I still miss some bridge between project priorities and design tasks. Some contributors might hesitate to participate due to priorities unclarity and get lost among the many places where design happens.
I hope you like this idea, and please, feel free to suggest changes and add things that I am missing.
Hey all 👋 Here are a few projects the Design Team has contributed to over the past couple of weeks.
Site Editor navigation
@joen is tinkering with @jameskoster on wild ideas for GitHubGitHubGitHub is a website that offers online implementation of git repositories that can can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/ issue #36667: a dedicated space for navigation.
Cover blockBlockBlock 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.
@javiarce and @joen started collaborating on improving the Cover Block to support multiple overlays.
As part of the redesign of end user documentation, the docs team is looking into changing the hashtag # used at the end of the headlines in the articles. The hashtag nowadays has a different connotation but mainly because it is not accessible. The aria label applied to the hashtag makes screen readers duplicate the headline without warning or explanation.
The purpose is to remove the character # but not the functionality of an anchor link.
3D model icon
@fcoveram started exploring an icon for the 3D models content type Openverse is discussing displaying in a separated result.
WordPress Design Library
@javiarce started improving the WordPress Design Library. He upgraded the containers used to showcase the components and the examples, added descriptions, cleaned up some components, and refined the information blocks. He also analyzed the state of the components and variants, wrote a to-do list to highlight the pending work, and drafted a plan to deprecate the old components.
If you have updates you’d like to include in the next Design Share, please drop a note in the Design channel on the Making WordPress SlackSlackSlack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/. or message @critterverse.
Our monthly show and tell meeting will take place on Zoom tomorrow, Wednesday February 16th at 18:00 UTC. A zoom link will be posted in the #design channel on the WordPress Slack. Learn how to join by following the instructions in the handbook.
A few issues have already been proposed for discussion in the Design channel, including:
Adding the ability to create new posts from the BlockBlockBlock 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. Editor, Gutenberg issue #38554
Hey all 👋 I’m sharing a handful of “snapshot” style updates from the Design team from the past couple of weeks. I’d like to try sharing these updates for a couple of months and see if it’s useful!
Here are a few things that have been worked on recently:
Advanced template creation
@jameskoster explored how we might expand the template creation UIUIUI 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. to accommodate more advanced templates. Discussion is ongoing in GitHubGitHubGitHub is a website that offers online implementation of git repositories that can can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/ issue #37407.
Designing the State of the WordState of the WordThis is the annual report given by Matt Mullenweg, founder of WordPress at WordCamp US. It looks at what we’ve done, what we’re doing, and the future of WordPress. https://wordpress.tv/tag/state-of-the-word/.
Openverse — New headerHeaderThe 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. design
@fcoveram explored a new header idea to solve usability, internationalization, and consistency problems, and also designed a new version of reporting content popover considering usability and a11yAccessibilityAccessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility) concerns.
These projects are just a small sample of recent design work happening in the WordPress community. Have you contributed to the Design team lately? The Make blog is a great place to share process and updates! Feel free to use the comments section below to share your work ⬇️
A few weeks ago, we introduced the new Openverse identity as the beginning of a redesign journey, where we placed the search engine within the WordPress ecosystem. Since then, we have been working on a new interface that consolidates the new brand and puts consistency with WordPress at the forefront.
You may have heard about Openverse during State of the Word 2021, which is perfect timing to dive into what’s coming next for Openverse.
Audio. The new content type
The goal of Openverse is to catalog all openly-licensed content, not just images. To start this journey, we decided to include audio results as a new content type that many creators use for various purposes. This integration demanded designing an interactive audio player component with multiple variants and accessibilityAccessibilityAccessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility) as a primary concern. Even when Openverse spans a simple flow, the audio browsing experience is completely different from searching for an image.
We wanted to keep the interface as clean as possible, but the vibrance of the brand colors also excited us. For this reason, we used our brand yellow for the active, ‘playing’ state. Its boldness really shines when interacting with the component.
At the same time, we wanted to highlight the artwork that creators added to their audio, whether album artwork, a podcast logo, or an image taken during a field recording, for example. For audio tracks without artwork, we plan to design a default image that uses the spectral data of the audio file to add randomness.
We will post about that in the following weeks.
A gallery for all content
Audio and images were mentioned as relevant content types by our users during the interviews we ran. For that reason, we explored the idea of having a gallery showing all content results to exhibit the strength and flexibility of Openverse. There aren’t many search engines, to our knowledge, that integrate results from different media types, and we’re excited by future possibilities like multimedia user collections.
Imagine a biology teacher making a collection of images of crows; audio files of crow calls; and 3D models of the skeletal structure of a crow’s wing!
The resulting gallery challenged us to make a simple yet interactive page to preview audio and dig into the content details.
Browsing results without leaving
Since time ago, we have been hesitant about the idea of seeing the content details as a modal. The page view provides a straightforward navigation and interaction experience when opening the source site and copying the attribution info. However, it felt as leaving the search results page and splitting the browsing experience into separated moments.
The new modal looks clean, and the main content is even more predominant. On images, the showcase space is modest, whereas audio fills the modal width to allow a seamless experience. The result details are clustered in sections, and the vertical lecture is flexible to varying heights.
Next steps
I would love to dive into other changes like the new headerHeaderThe 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., the symbol animation when loading content, and all the accessibility challenges when designing the audio states. But for now, this snap summarizes the essence of the new Openverse.
We are looking forward to putting this redesign online and seeing what people come with. This step, after the brand work, is a solid one towards a future where Openverse offers a space for creators to use openly-licensed content.
In the meantime, see the Releases file for the audio integration mockups and the Design Library for the components used.
It’s about that time again: time to start creating the About page for WordPress 5.9.
I took a first pass on the About page using some preliminary copy that’s loosely based on the script for the recent Introducing WordPress 5.9 video. Here’s a link to this draft as a Google doc — all are welcome to view, edit, or comment there directly!
In addition to the page content, I’ve also mocked up a couple of different visual directions for the headerHeaderThe 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. artwork.
Direction 1 is inspired by jazz album covers and classic movie posters (particularly by this movie poster design by Saul Bass):
The next steps from a design POV would be to create new header artwork in whichever style we choose for the other section pages (Credits, Freedoms, and Privacy). I’d also like to look into how the chosen look & feel could potentially be utilized for the Dashboard page to help create visual consistency between the two sections.
The featured content is still TBD but hopefully this first draft can help get the conversation going! Design feedback is very much welcome at this stage — please comment on the Trac ticket with your thoughts and ideas. 🙂
The sibling inserter, the plus button, the quick inserter button, the in-between add button; Whatever you call it, this button often gets in the way. Do we need still need it? Lets chat about it.
This months discussion will focus on the [ + ] button that appears throughout the WordPress blockBlockBlock 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. editor. There are many names for it: the sibling inserter, the plus button, the quick inserter button, the in-between add button, and more. Last year I wrote a GitHub issue that describes some of the confusion around this button, and much of it is still relevant. I’d like to focus our discussion around:
Validating the problems outlined in the GitHubGitHubGitHub is a website that offers online implementation of git repositories that can can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/ issue.
Reviewing some of the suggested solutions.
Updating the issue with a way forward.
We’ll also have time for anyone to share their work or ask questions to the design team. Just drop a comment below, or show up and raise your hand. I hope to see you on Zoom tomorrow.
Recent Happenings
There’s so much design work happening every day across SlackSlackSlack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/., TracTracTrac is the place where contributors create issues for bugs or feature requests much like GitHub.https://core.trac.wordpress.org/., GitHub and more. For good measure, here’s a few highlights from the past few weeks…
A series of animatics shown when first visiting the site editor in WordPress 5.9.
A new “Explore” button in the block inserter sidebarSidebarA sidebar in WordPress is referred to a widget-ready area used by WordPress themes to display information that is not a part of the main content. It is not always a vertical column on the side. It can be a horizontal rectangle below or above the content area, footer, header, or any where in the theme. opens a large modal to browse block patterns.
This post presents an analysis that Channing Ritter and I have made of the Cover and Image blocks and offers some ideas to improve the user workflow and streamline some of the basic operations, like cropping, image placements, and rotation.
We’ll also offer an idea to integrate Fill modes into Cover blockBlockBlock 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. settings. The designs, prototypes, and an analysis of the current functionalities are available on this Figma file.
Our intention with this exploration is twofold. We’d like to:
Simplify the way Image and Cover blocks work.
Offer image editing functionalities so that users don’t need to resort to outside tools.
Before we present our designs, let’s see some of the current problems with the cropping tool.
The first one we encounter when using this tool appears right after the user clicks the crop icon. We go from this toolbar:
To this one:
We think this change is quite disorienting because the toolbar gets reorganized, adding new icons and removing the cropping and link icons in a very abrupt way. We’ll show a possible solution to this problem in a minute.
But there are some other problems with the cropping functionality. Let’s see a video of the cropping tool in action:
As you can see in the previous video:
It’s impossible to revert a change made inside the cropping mode. Clicking “apply” inside this mode essentially creates a new image and replaces the original one. This means that every time users make a change and go back to the cropping mode, they can only edit the new cropped image.
The rotation option is limited to just 90º increments.
The zoom only allows zooming in, and it only goes from 100% to 300%.
In order to zoom in, the user needs to click the crop icon.
But the main problem is that the cropping mode works in a convoluted way: instead of selecting a rectangle and extracting the content inside, the cropping tool defines a viewport (using the set “Aspect ratio”) that will be used for the crop. Users can move the image inside, but this movement is restricted to one direction and limited by the outer bounding box of the block.
Once the user applies a crop to the image, the image then expands to fill up the entire space of the block using the selected aspect ratio. This is confusing since the user sometimes interacts with a small image that suddenly grows and fills the whole block.
Secondary toolbars
A solution to the problem we mentioned above about the confusing toolbar could be to use dedicated toolbars for certain groups of actions.
These new toolbars would present a title indicating that the user is now inside a different mode, the set of options for the functionality, and links to apply and discard the changes.
It could look like this:
And here’s a list of explorations we did for the placement of the elements:
Walkthroughs
We’ve created three walkthroughs that explain several aspects of our proposal:
How to integrate the cropping tool and other editing background functionalities inside the Cover block.
How different Fill Modes could work.
How could we add the cropping tool inside the Image Block.
These prototypes are self-guided, just open each of them and advance to the next slide clicking each screen. A series of notes will explain each concept.
Cover Block
A question we haven’t addressed on this exploration is what happens with the focal point functionality this block offers.
On the one hand, it could make sense to keep this feature, because it allows centering an image that is larger than its container. On the other hand, however, this block’s new background editing capabilities would make it very easy to enter inside the Edit background mode, reposition the image or crop it, and apply the changes.
Fill modes
Image Block
Thanks!
We hope you like these explorations and help us with comments and suggestions.
A while ago, myself and @kellychoffman started working on the redesign of the Gutenberg landing page on WordPress.orgWordPress.orgThe community site where WordPress code is created and shared by the users. This is where you can download the source code for WordPress core, plugins and themes as well as the central location for community conversations and organization. https://wordpress.org/. The current page is slightly outdated, both its visuals and content.
Now that GutenbergGutenbergThe Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/ has been a part of WordPress for a few years, it makes sense to update it, shifting the message from what used to be the new post editor to the editor that can power all parts of your site.
In these iterations, we grabbed many ideas from patterns in the Pattern Directory, ending up with an interesting collection of different blockBlockBlock 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. patterns. We kept copy and visual elements rather minimal, exploring three typographic alternatives: two sans-serif fonts, Inter and SF, and an elegant serif font, EB Garamond.
It is intentional that the page looks more like a landing page rather than an open canvas “playground” page. While it can still be interactive, allowing people to click around and explore, it shows what is possible to achieve with the editor, remaining ultimately informative.
Structurally, there are a few proposed changes:
Highlighting Blocks and Patterns separately
Adding accessibilityAccessibilityAccessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility) info and improvements to the “Gutenberg loves everyone” section
Adding a section for new users, linking to Learn WordPress and highlighting a few key courses
Creating a section with some more helpful content and links to dig deeper about Gutenberg
You can see proposed links highlighted in pink in this prototype.
What’s next?
This is a proposal, which means there’s space for iterating! I’d like to open this up for feedback through November 5th, at which point I’ll return to work on refining the content and details. All feedback is welcome, either here or in the Trac ticket, where previous iterations have been shared.
You must be logged in to post a comment.