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.
We meet and have ongoing discussions in Slack#design
Team: Wednesday 18:00 UTC
Triage: CoreCoreCore is the set of software required to run WordPress. The Core Development Team builds WordPress./metaMetaMeta 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 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/: Tuesday 16:00 UTC
In March, the design team had our first call for team repTeam RepA Team Rep is a person who represents the Make WordPress team to the rest of the project, make sure issues are raised and addressed as needed, and coordinates cross-team efforts. nominations. The time has come to open up nominations for one rep as I am rotating out. This is a great opportunity for an existing team rep to onboard someone and gives someone the chance to grow into this role and work alongside Estela.
It’s been a pleasure to be a team rep for design, and I am excited to continue contributing in other ways. This is purely a rotation out, not a goodbye. Being able to move in and out of this role is something built into the experience.
So, let’s get on with the exciting possibility and explain a little about the role. For this, I am going to be taking quite a bit from the post in March.
What does a team rep do?
In 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, each team has one or two (or more!) representatives, abbreviated to reps. The role goes way back to 2012 and is an established one across teams. You can learn more about the team rep role here.
A little note, it’s not called team lead for a reason. This section from the updates page explains team reps well:
“Team Rep is a leadership role that is mostly administrative in nature; it is not a Lead role. Letting go of the Team Rep title is not a loss of status, just a handing off of responsibilities. Someone who is a leader in a team can lead whether they are doing the team rep job or not.”
Here are the main tasks:
Ensuring a meeting agenda happens along with notes. We have note-takers who are not team reps and post agendas, so this is coordination. The team rep adds agenda items to a shared document.
Run the weekly design team meeting in SlackSlackSlack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/..
Call for new team reps when the time comes at the end of year tenure.
As a team rep, other tasks might fall to you in order to keep the team running, but in general, it’s a support and coordination role. On average the estimated time you would need for this role would be a few hours a week. With another team rep though, that time is shared.
This role is open to contributors of any level, not just full-time contributors. Like many good open-source processes, this work is done openly and can be shared. Also, because WordPress is a globally-minded project, if the team rep that is selected can’t make the current time, we can always discuss changing the meeting time.
The process
Taking inspiration from teams that have done this before the suggested process would be:
A call for nominations in the comments on this post. Self-nominations are welcome. These will close in on November 30th.
After the closing date, another post will highlight those nominated votes will be made on those nominations for a week. Currently, there is one team rep role available and the incoming rep will be working with Estela.
The votes will be tallied, the chosen team rep asked to confirm they want to do this process and then announced.
If you want to nominate someone in private, please reach out to me (@karmatosed or @estelaris) on Slack.
Disclaimer: if you get nominated, please don’t feel like you have to say yes! We will add to the polls only the names of the people that are responding positively to a nomination. So feel free to reply with a “Thank you, but no thank you”.
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. directory will be a place where blocks can be perused and installed. Think of it as a 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 directory limited to single blocks.
Back in December, @melchoyceproposed a prototype for a block directory. That prototype is still 100% viable for the block directory. It is likely the simplest to implement as it’s pretty close to the existing plugin directory with a few nice systematic updates to patterns used across wp-admin.
When I picked up this project, it made sense to me to try a variation of what @melchoyce created . I decided to see what a block directory might look like if it shared Gutenberg’s design language. To accomplish this, I tried using similar patterns and styles to what is seen within 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/ since the block directory and Gutenberg are so closely tied together. I also have been keeping block patterns in mind when designing.
The feedback I’m looking for
This is a hopeful proposal and none of what I propose here is set in stone. I would like higher level feedback around the interactions. Do the interactions make sense? Is it clear what you’re looking at? What are the designs missing or lacking? What could be improved?
I’m not looking for detailed design feedback like hover states or border colors. Those are important for sure and that type of feedback will be needed during implementation.
The prototype
Here is a rough Figma Prototype that shows a handful of the views in the block directory. Take note of questions you have as you look through it and please share in the comments below. I hope most will be answered as I break down each of the primary design patterns and views.
The block card is designed to be a recognizable design pattern that, even without a preview, will convey that it is a block. You can see we already have a similar card proposed for implementation in Gutenberg’s block directory search.
I tackled this in a few places. To start, I identified block cards that can convey the most important information about a block at a glance. This is where I started diverging from the existing plugin directory.
I deviated from using a plugin icon and plugin 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. for two reasons.
Blocks already have an icon by nature. This icon will be one of the main identifiers when interacting with blocks. I wanted to reinforce the connection with the block icon and the block as soon as possible. Thus, I replaced the plugin icon with the block icon.
Blocks and Patterns are very visual. Rather than showing a somewhat arbitrary header image, I opted to show a preview of the block.
I trimmed down the amount of information present on the card. In this mockup, I show the Block Name, the Author, Rating, and Number of Ratings. I may add an indicator of active installs. Everything else will be shown on the Block’s Details View, which a user will need to navigate to in order to install a block.
The preview is a square because the block’s example can vary widely in its aspect ratio. We will need to do some work here to figure out the scaling and overflow details of previews.
The directory header
Mel designed an iteration of the wp-admin page header that makes great use of space, order of interactions, and hierarchy. I made very minor modifications to it resulting in what you see below. Ideally, this pattern could be used across all wp-admin sections.
It’s very simple. It has a page title, a description, primary actions, and secondary actions. The page title and description are exactly what you would expect. The primary actions are below the description and, in this case, include a search bar and upload button. The secondary actions are the help and settings buttons.
The directory view
The directory view is a combination of the header and groups of block cards.
Like the current plugins directory, the blocks will be in categories with “See all” links for folks who want to peruse a specific categoryCategoryThe 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging..
The CTA banners Mel designed are ace so I expect we could use them as a way to highlight any number of topical subjects. Perhaps they could be used to promote block collections if we decide to go down that road at a later date.
The block details view
The block details view shows all the information surrounding a plugin. The current details view for a plugin relies heavily on a 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.. Much of the sidebar information seems directed at plugin developers.
The most useful information for a user is at the top. It includes ratings, active installations, compatibility, the block version number, and the install button.
The Demo section is an example of the block that a user can interact with. It is important the user gets a clear idea of what they’re about to install. The editor itself will be an instance of Gutenberg with some slight customization. The inspector will remain visible because many blocks rely on the sidebar controls.
The Reviews section shows two reviews along with rating totals. I would like your thoughts as to which reviews should show.
There are still some remaining pieces of information I would like to incorporate including contributors, a changelog, and a support section of some sort. This is also missing the Advanced View. Perhaps some of those missing items will fit better there.
wp-admin design implications
These designs include patterns that could be used elsewhere in wp-admin. For example, we could use the directory header pattern on the other directories and perhaps on all wp-admin pages. This would be one of several steps to align the design language of wp-admin and Gutenberg.
In September, the design team chose to shorten meetings length, remove one triage as results were varied and some people were feeling overwhelmed, finding it hard to follow everything. This was done as an experiment while the team figured out what other items could be added to the make/design team.
As it was discussed during design team meeting, the problems raised in the conversation are:
It’s hard to see the work going on. During meetings lots of work is being shared but maybe surfacing that more in posts? How could the work be included of people that don’t attend the meetings regularly?
Make/design feels inaccessible to write to or a hurdle? Lacking incentive?
Older issues feel lost?
There can be a lot going on so finding your way can be hard.
Triage and feedback are sometimes seen as the same thing, and frustration can arise when a ticket doesn’t move forward after triage only, how can we make sure tickets keep moving?.
Often things fall to one person, how can we encourage more pairing or groups?.
What suits one person may not suit someone else. This post is designed to bring the SlackSlackSlack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/. conversation to a wider audience and start working on some opportunities to adjust the communication flows and find the right combination for the team. That ‘one thing’ might of course be multiple optional things, let’s find out together!
Existing communications
The team primarily communicates via Slack, 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/ or TracTracTrac is the place where contributors create issues for bugs or feature requests much like GitHub.https://core.trac.wordpress.org/. and uses this site for agendas, notes. This has changed over time, but is the current state right now. Here is a summary of what happens right now as far as organised sessions are concerned:
Scheduled meetings:
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)/design office hour: Combined effort to review tickets pertinent to both teams.
Triage: Review of Trac tickets and PRs to check their urgent status and needs.
Weekly meeting: Check in and working meetings for the design team.
Show and tell: Once a month Zoom meetings where team members showcase the project they are working on. Attendees can ask questions/give feedback.
Un-scheduled sessions:
Hallway hangouts: Zoom meetings where a team member works live on a project or issue. Usually attendees ask questions/make suggestions/give opinions. The goal is more educational than showcasing the work.
Feedback sessions: Full review and discussion of Trac tickets and PRs.
Make/design posts:
Agenda
Notes
List of ideas
Let’s now dive into some of the ideas that came up during the meeting.
Find a way of encouraging more to write on make/design. This needs ideas in itself!
x-post more update posts 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/ to design.
Be willing for meetings to run on if conversation needs, but stick to 30 minutes.
Distinguish between triage and feedback clearly.
Encourage and enable APAC sessions / meetings to happen. It’s something been talked about for a while, so how can it begin?
Find ways to surface the work being done to everyone on make/design.
Post summaries in Slack after feedback sessions of tickets covered so others can join out of timezone.
Encourage commenting on meeting agendas even outside of timezone to keep to those for those facilitating and ensure all voices are heard.
Consider ‘old ticket’ sessions.
Along with the above, here are some additional ideas pulled from the post when meeting times were adjusted:
Async Design Discussion, where an issue is pinned to the channel, that becomes the Async topic for say 6 hrs, where people can comment on a thread of that topic, etc. Then the issues could wrap up discussion during a regular scheduled meeting. This way, there are constantly new issues that can be discussed throughout the day/week.
Consider that we elect team reps who are not both in the same time zone? That would help keep other time zones involved.
Posting the shortlist of tickets 30 min before Triage? So, there’s more room to read before discussion.
Next steps
There is a lot of information to process, so this post will be open for a couple of weeks, to gather ideas. It will also be a topic in the meeting after the next, as next week’s meeting is a show and tell session. A post will be written up summarising action points, ways to get involved after discussion has reached a point and ideas have been gathered.
Questions to get the conversation started
It would be great to have a continued discussion in the comments. To begin that, here are a few starting points.
What has stopped you posting or asking to post on make/design when you had something to contribute there?
What ideas do you have for things could be added to the communications this team uses?
What ideas do you have for things could be iterated on existing communications this team uses?
Would you like to be involved in any aspect of this increased communication flow? If so please comment what that would be. As ways are identified there will be further calls for volunteers, but if you have an area you are passionate about please say.
This post was a summary of the meeting points from 21/10/2020 and collaborated with @estelaris, @hedgefield. Thanks to @chaion07 for the review. Props to everyone that attended the meeting and over the past few months given their input on ways to iterate the way this team works.
As being this the last Wednesday of the month we continue with Show & Tell. If you are working on a design project for WordPress and want feedback or just want to show us, please add a comment here. If not, just show up at the meeting and we will give you some time.
The Zoom link will be announced in Slack on Wednesday right at the meeting time.
We have an open call for note-takers and triage facilitators. These both are great ways to get involved for new contributors but everyone is welcome to help out. Let us know if you are interested in the comments.
Next week is Design Show & Tell, a monthly Zoom meeting where you can showcase or update any project you are working on or ask for input on anything you are contributing. It is open to all design contributors.
Updates
@melchoyce let us know that Twenty Twenty-One is in BetaBetaA pre-release of software that is given out to a large group of users to trial under real conditions. Beta versions have gone through alpha testing in-house and are generally fairly close in look, feel and function to the final product; however, design changes often occur as part of the process. and the team would appreciate any input. You can test it in WordPress trunk or download the theme directly from GitHub.
@shaunandrews is looking into several floating (+) buttons, understanding their function, the problems they solve or create.
@paaljoachim ran a successful Design Feedback session on Wednesday early morning. These may continue every other week, switching between early mornings and late evenings to allow for contributors in different time zones to join.
@mapk is working on the Query 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.:
The design team held a discussion about the use we are making of the Make/design blog, triage and meeting. While we have been running an experiment on trying to contain the surplus of information, we have also noticed that we are missing opportunities and the blog has turned into a list for meeting agendas and notes.
We had several ideas that could help us improve and there will be a post about this.
Hey folks! Over in #core-css, we’ve been trying to audit and simplify the CSSCSSCSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site. used in coreCoreCore is the set of software required to run WordPress. The Core Development Team builds WordPress.. Part of that includes simplifying the colors used throughout wp-admin, and we could really use your guidance here.
We have an automated tool that will replace all the colors in WordPress’s CSS with the closest color in a given list – which will let us quickly standardize on a color palette. In fact, this demo reduced the number of unique colors from 201 to 100.
The main question we have: Is this color palette the correct set of colors to use (from @drw158 in Nov 2019)? I’ve also seen this g2 list, and I know there are some colors identified in the Figma.
Once we decide on a color list, we’ll also need some help checking over each screen to make sure the replacements look good and have sufficient color contrast. It would be great to get some volunteers working together from design, 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), and core-css. If you are interested in helping with this work, please leave a comment on this post, or drop a message in the #core-css channel in SlackSlackSlack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/..
For reference, here are some before & after screenshots of a few wp-admin pages using the current colors, and the same pages using this reduced set of colors.
Cleanup of Figma users (changing edit to view rights for noncontributors)
Updates
Team members leave any project updates as comments in this post. We will review project updates during the meeting only if there is something to discuss.
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/
Main topics
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 for default themes: call for help and feedback during 5.6
Open floor
If there is anything you would like to see added to the agenda, please leave a comment also.
We had a Show & Tell last evening, unfortunately a human vs tech error prevented me from saving the recording. Here is a summary of the call.
Edit Site: Creating a new template from scratch
@michael-arestad has been working on a new flow to create a template from scratch. There are several iterations and steps taken towards this workflow and this evening we focused on resizing template parts, primarily the middle column. You can follow the design iterations in Figma. If you would like to participate, please add your comments/proposals and ideas to the PR.
Shorter triage sessions during summer days
We discussed the fact that some coreCoreCore is the set of software required to run WordPress. The Core Development Team builds WordPress./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/ sessions have been lacking participation during summer days due to holidays. The team agreed to shorten them to 30 mins if there were not many people around. We are also going to be reaching out to those involved in tickets to help us with technical questions.
Accordion blocks
@mapk is working on an accordion block to include in core, he showed us a prototype and some styling options. There is a Figma file to review iterations. If you want to contribute, please leave your comments in the PR.
About page for 5.5
@estelaris is working on the design for the About page as part of release 5.5. Being this the first time, it has been a learning experience. Many of the frustrations are due to the limited framework we need to work with, although that shouldn’t prevent a designer to turn in a well-designed page. The team provided some feedback and questioned why the About page is not being built in Gutenberg yet. A thought for a future release.
We can still use more volunteers for note-taking and triage leading. Please leave a comment below if you’re interested.
Monthly ‘Show and Tell’
Monthly ‘Show and Tell’ will take place on the 29th. Even though everyone has been busy with the release of 5.5 betaBetaA pre-release of software that is given out to a large group of users to trial under real conditions. Beta versions have gone through alpha testing in-house and are generally fairly close in look, feel and function to the final product; however, design changes often occur as part of the process. 2, we will still have the session.
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/
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 are just about ready to go. The initial patterns have been selected and all that’s left are a few tweakshttps://github.com/WordPress/gutenberg/projects/41. Props to @nrqsnchz.
A new 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. paradigm is in the works. Definitely take a look and let us know what you think.
There are two palettes: Primary, which is what we’ve been migrating towards and Classic which comprise many of the colors that are still used in both the editor and WP admin.
Remaining:
Improve naming conventions
Validate palettes
Include documentation around use
Typography
The main text styles have been identified, along with their accompanying values, such as size, weight, line height, etc.
Remaining:
Final review values for each text style
Include documentation around use
Icons
Currently, we’re supporting three icon libraries: Primary (G2), Material and Dashicons. Only the Primary and Material icons are available in this library, with Primary having precedence. Dashicons are intentionally downplayed with an explanation and link to the standalone library.
Remaining:
Finalize componentization of Material icons
Components
Many of the common components have been built and reviewed against what’s currently in the WordPress components package. I have also been going back through and fact-checking against what’s in the latest build of the Gutenberg 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.
As you peruse the Components page, you’ll notice a dot to the left of the component name that’s either outlined or green. If green, those components are good to test, and I would encourage everyone to do so. Does the construction make sense? How does it hold up as you use it? Is it accurate?
Remaining:
Include remaining components from the Components list (this list is in Figma)
Include documentation around use
Promote testing and use of these components
Views
Completed components will eventually be grouped in clusters (atomic organisms) and added into templates/views. You can already see this with the block inserter and editor 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. clusters.
General
The following is a list of items outside of what was mentioned above.
Add Getting Started documentation (next week)
Add Proposals documentation (next week)
Clean up component frames (improve consistency, balance and organization)
Migrate utilities outside of library
Discussion
Project related documentation – On TrelloTrelloProject management system using the concepts of boards and cards to organize tasks in a sane way. This is what the make.wordpress.com/marketing team uses for example: https://trello.com/b/8UGHVBu8/wp-marketing. board, we have the Figma reorganization and updates to the handbook.
For the Handbook- Currently there are no updates as most of us have been focusing on 5.5.
Open Floor
@folletto pointed out that in Gutenberg 8.5.1 the new inserter panel when opening it closes the settings panel, and then it doesn’t reopen. Was this already discussed? @youknowriad & @nrqsnchz shared the link to PR 20951 with something similar. @folletto opened a PR to discuss the behavior of the issue.
The ‘About Page for 5.5’ in the form of the ticket was discussed in detail.
