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.
These days when someone needs to request input from a designer while participating in the 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/ repository 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/ the only tools at their disposal are;
Flag the issue / pull request with the Needs Design Review label
Mention specific people directly
Neither option is ideal – designers cannot subscribe to labels, and individuals can be afk.
I’d like to propose the creation of a @Gutenberg-Design sub-team within the ‘Gutenberg’ team on the WordPress GitHub organization. In spirit it would be similar to the existing ‘@Gutenberg-Core’ developer team, and make it much easier to grab the attention of designers on issues and pull requests.
Since GitHub allows getting notifications for team discussions without joining the team, I propose we start testing this idea by inviting people that had or are actively contributing to design.
It’s worth mentioning that this would not be a team in any official capacity. It simply serves as a way to group designers so that we can try to make our development flows more efficient.
We can evaluate the success of this initiative in a few weeks to determine whether it should be continued or stopped.
@javiarce submitted a proposal for an interface to enable interactive states (:hover, :active, :focused, etc.) to specific blocks’ properties. Design and prototype.
@jameskoster is working on designs to consolidate the various pattern browsing experiences into a single component.
PluginPluginA plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party Dependencies project
@fcoveram has been working on integrating 3D model content in Openverse results by creating new components and layouts for results and single result view.
Openverse Design Library updates
@fcoveram started updating the Openverse Design Library by using the WordPress Design Library utility components. This sync aims to ease the design contribution onboarding.
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.
Hi, all. As mentioned in the meeting notes from our Show & Tell call earlier this week, the team has been discussing the possibility of moving our regular meeting to an earlier time on Wednesdays.
I’ve created a Doodle poll to try to get as many responses as possible about what time would work best for folks. The options I’ve included are the existing meeting time at 18 UTC, and options that would move the meeting up to 4 hours earlier. Please comment on this post if another time would work better outside of the proposed options!
As an experiment, we met at 16 UTC rather than 18 UTC today — several folks mentioned that the earlier meeting time was extremely helpful and would allow them to be able to attend more regularly
There seems to be a consensus (in the meeting today and in discussion in the Design channel) that an earlier meeting time would work better for many attendees
It would also be great if there could be alternate meeting times scheduled to accommodate folks in other time zones — we would need a volunteer to facilitate those meetings
Based on this discussion, I’d like to propose that we change the meeting time to be at 15 UTC moving forward (3 hours earlier than the previously scheduled time).
“What’s New in 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/” release post assets
@fcoveram shared some assets he’s been creating for the next “What’s New in Gutenberg” release post. You can check out his latest designs in the Figma file.
Improvements to entity-saving
We also discussed potential improvements to multi-entity saving, including some issues that have already been opened around improving saving flows. The biggest takeaway was that it would be nice if multi-entity saving could be less complicated and more intutive, perhaps requiring less decision-making by the user when they click the Save button.
Hi, all! Here are a few projects the Design Team has contributed to over the past couple of weeks.
Modal component update PR
@jameskoster opened a PR to try some design updates for the 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/ modal component.
@javiarce designed some communication stickers for the upcoming WordCampWordCampWordCamps are casual, locally-organized conferences covering everything related to WordPress. They're one of the places where the WordPress community comes together to teach one another what they’ve learned throughout the year and share the joy. Learn more. Europe. Those designs can be adapted and reused for future WordCamps.
WordPress 6.0 design assets
@fcoveram has been working on designing the assets for the next WordPress 6.0 release. The graphics include the design for the About page (including 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 for all sections) and the welcome banner for the Dashboard.
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.
Hi, all! Here are a few projects the Design Team has contributed to over the past couple of weeks.
FilterFilterFilters are one of the two types of Hooks https://codex.wordpress.org/Plugin_API/Hooks. They provide a way for functions to modify data of other functions. They are the counterpart to Actions. Unlike Actions, filters are meant to work in an isolated manner, and should never have side effects such as affecting global variables and output. icon
@joenadded a new filter icon for showing in 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. toolbar when no duotone filter is applied.
Design controls for interactive states
Still a work in progress, @javiarce and @joenexplored some ideas to manage the style of elements depending on their state (hovered, focused, active, etc.).
WordCampWordCampWordCamps are casual, locally-organized conferences covering everything related to WordPress. They're one of the places where the WordPress community comes together to teach one another what they’ve learned throughout the year and share the joy. Learn more. block patterns
Global Styles panel revisionsRevisionsThe WordPress revisions system stores a record of each saved draft or published update. The revision system allows you to see what changes were made in each revision by dragging a slider (or using the Next/Previous buttons). The display indicates what has changed in each revision.
@critterverse and @joenbrainstormed a couple of ideas for reorganizing the Global Styles panel to streamline the 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. and better accommodate the “Browse styles” button.
Design template
@javiarce published the starter template he uses to showcase designs to the Figma community. The template contains some nice defaults like a cover, documentation elements, cursors, labels, and a simple page structure, which can be useful to speed up the repetitive setup of a new file.
About page 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
@fcoveram shared some design options for the 6.0 About page header artwork on the Trac ticket. We discussed the options in the recent Design team Show & Tell call and folks are leaning towards the option on the left!
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/ 13.0 release assets
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.
Possible directions for the About page 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 by @fcoveram (notes shared on the ticket)
Some WordCampWordCampWordCamps are casual, locally-organized conferences covering everything related to WordPress. They're one of the places where the WordPress community comes together to teach one another what they’ve learned throughout the year and share the joy. Learn more.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 shared by @melchoyce (notes shared on the issue)
One larger topic of discussion that came up was around redesigning the About page templates/layout, and potentially even making the switch over to creating the page using blocks. This project seems like something that could be approached outside of the regular release cycle when launch assets are typically moving along too quickly to make major changes.
Hi, all! Here are a few projects the Design Team has contributed to over the past couple of weeks.
Pattern carousel
@jameskoster is helping out on a PR that moves the pattern carousel 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 a modal.
@jameskoster has been working on an early stage exploration of an Editor mode that seeks to elevate UI away from the canvas in order to remove distraction and facilitate keyboard-first editing.
Group, Row, Stack placeholders
This week the first iteration of group/row/stack placeholders landed in the plugin, making it more immediately clear the two variants are different from the basic group.
Saving Global Styles
@critterverseshared a design for offering more granular saving options for changes made to Global Styles. This would also help with switching between style variations and allow the user to select specifically which changes they’d like to keep.
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.
Hi, all! Here are a few projects the Design Team has contributed to over the past couple of weeks.
Status & visibility panel improvements
@javiarce shared some explorations to improve the ‘Status & visibility’ panel in the inspector 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.on this issue. You can also use this prototype to learn about its context and interact with the solution.
Adding post categoryCategoryThe 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging. templates
@jameskoster has been looking at how we might enable the creation of post category templates for 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/ issue #37407.
Page start options
@jameskoster is also exploring a pattern-centric view of edit mode for PR #39147.
Style variation hover animation
Gutenberg PR #39322 introduced a hover frame containing extra information about individual style variations. @critterverse and @joen have been helping to explore designs for the secondary frame as well as animation options in issue #39700.
Group, Row and Stack icons
@joen worked on new icons for “Row” and the incoming “Stack” 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., as well as how those group block variations could show up in the multi-select toolbar and inspector.
Comments query loopLoopThe Loop is PHP code used by WordPress to display posts. Using The Loop, WordPress processes each post to be displayed on the current page, and formats it according to how it matches specified criteria within The Loop tags. Any HTML or PHP code in the Loop will be processed on each post. https://codex.wordpress.org/The_Loop., default design mockups
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.
You must be logged in to post a comment.