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.
Hey everyone, just a quick reminder that there’s one week left to submit style variations for the TT3 default theme before submissions close on August 31st.
Hey everyone! I’ve been completely blown away by the creativity on display in the style variation submissions received for the Twenty Twenty-Three theme.
Since the window to submit new style variations for the TT3 theme closed last week, I’ve been discussing next steps with design lead, @beafialho. Out of the 38 submissions received from 19 contributors spanning 8 different countries (!), we’ve curated a list of 10 style variations to be shipped with the TT3 default theme.
Before jumping into the list of selections, I wanted to share our selection criteria and plans for next steps:
These variations were selected in an effort to feature the most drastically different set of variations possible — so in many ways, we were looking at what would work best as a collection versus selecting our favorite standalone submissions.
Let’s continue to iterate on the selected submissions up until the WordPress 6.1 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. period begins on September 20th.
@beafialho and I have made some tweaks to the curated set of variations and have left comments on the individual GitHubGitHubGitHub is a website that offers online implementation of git repositories that 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/ issues for each variation with the requested changes. In many cases, the changes were inspired by a similar submission (we’ll tag any folks whose submissions inspired feedback for others).
No explicit next steps are needed from style variation authors — you can update theme.jsonJSONJSON, or JavaScript Object Notation, is a minimal, readable format for structuring data. It is used primarily to transmit data between a server and web application, as an alternative to XML. files where relevant OR those changes can be made in development by @mikachan and others.
Some of the changes suggested may be a bit aspirational, but let’s continue pushing to see how opinionated we can make each of these variations.
There are also some great discussions happening already about how to showcase the remaining submissions. Some ideas were already discussed in issue #73 — let’s continue thinking about where to collect all the amazing work submitted.
This variation is an interesting experiment in using a single type size. We tweaked it to use a smaller universal type size, a narrow column width, and took some inspiration from the border radius effect used on images in @melchoyce‘s Mono submission.
This variation uses a bold color for all the typography across the site and we think the gray background would work well in a lot of different contexts.
This vibrant submission seems like a really nice, opinionated option for a dark version of the base theme. We’ve made some suggestions on how to bring more color to this variation beyond the proposed overlay effect. We’ve also tried a dot pattern texture in the background that would be a cool, unique addition here!
This variation is a great more traditional option. It would be great to take some inspiration from the Soft variation submitted by @melchoyce and use the Source Serif typeface throughout.
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. out
This variation uses opinionated typography and a duotone effect that “blocks out” your images and featured images by using similar colors for the shadow and highlight. We’ve updated these colors with more contrast so that the images are slightly more visible.
This style variation has some really custom elements, like the border around the edge of the page, cool button styles, and unique link underlines. The background color felt similar to a few other submissions and the orange accent color doesn’t have a lot of contrast, so we’ve suggested a new color palette for this variation that would help us round out the collection a bit better.
We loved how fun and colorful this submission was. It had a lot of overlap with another gorgeous submission, @scruffian‘s Retroactive variation — it would be great to incorporate some of the super unique aspects from that submission into Sherbet to make it even more opinionated.
Shout out to @anariel-design, who was our most prolific submitter and created so many lovely variations that it was hard to pick just one! We loved the unique split color background effect used in Aubergine and suggested some ideas to customize it even further.
Huge thanks to everyone who has contributed to this experimental process so far by creating style variations, helping iterate on the base theme templates, or landing new 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/ pull requests from our project wishlist. We’re excited to keep iterating together over the next couple of weeks!
Hi, all! Here are a few projects the Design Team has contributed to over the past couple of weeks.
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/ redesign
Last week, new designs were shared for the Homepage and Download pages — two of the most high-traffic pages on the WordPress.org site. Props to @beafialho and @javiarce for the beautiful design work.
Design Library
Clean up of all the icons of the Design Library is ongoing, with flattening the icons being a first step to fix the color overrides of the library. The instructions have also been updated to indicate what’s the preferred internal structure. @javiarce started testing the new functionalities that Figma introduced recently, which will allow us to simplify the components and make them easier to use.
Openverse 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.
@fcoveram has been iterating on the Openverse header component, taking a new approach to simplify the navigation and content interaction.
WordPress Jobs
@javiarce created a header and avatarAvatarAn avatar is an image or illustration that specifically refers to a character that represents an online user. It’s usually a square box that appears next to the user’s name. for the WordPress Jobs Twitter account.
The next default theme
There’s also a proposal on the Make Design blog for a new approach to the annual default theme. What if, instead of emphasizing the theme itself, we highlighted an opinionated set of style variations designed by members of the community? The idea is to use Twenty Twenty-Two as the basis for a new theme that’s stripped back and minimal — a blank canvas to let a diverse range of style variations shine.
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.
Curating TT3 style variations
We’ve been busy curating and remixing a set of 10 community-submitted style submissions to be bundled with the upcoming Twenty Twenty-Three theme, which were announced on the Make Design blog this week. In total, we received 38 submissions from 19 contributors in 8 different countries!
Improvements to the 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/ Homepage
An idea for rotating between different versions of the large headline at the top of the homepage with each page load went live on the wordpress.org site.
Text and 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. selection improvements in Safari
Before / After
A selection across HTMLHTMLHTML is an acronym for Hyper Text Markup Language. It is a markup language that is used in the development of web pages and websites. markup, in Safari, is interpreted as a selection across every node and element in the DOM, and paints a selection marker to that effect. But this is not accurate to what you should see in an editor, where only a subset gets copied or interacted with. By carefully employing user-select, we improved the accuracy of what actually gets selected. These improvements are in v14.1, with more to come. Read more in the PR.
Navigation block overlay improvements
The navigation overlay now uses root paddings if they are defined, making it possible for themes to ensure the menu icon sits exactly where the overlay close button will be. A subtle fade/move animation was also added to the overlay that opens. Completed in PR 1, PR 2.
Navigation block display 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. improvements
As part of the efforts to improve the navigation block, we have proposed an enhancement to make the Overlay Menu interface much easier to use and we are also working on adding more customization options (issue).
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. hand-off
Since Openverse team will start to implement the new header next week, we have been polishing the component for all breakpoints and other use cases. The hand-off steps required creating several Figma components for the Design Library migrationMigrationMoving the code, database and media files for a website site from one server to another. Most typically done when changing hosting companies..
Quality of Life improvements in the Design Library
We continue improving the WordPress Design Library and this week we moved the deprecated components and views to an independent file. We also added a small visual guide to better explain the role of each page. These small improvements try to make the library more accessible for new and existing users.
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/..
Over time the number of appearance 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) options in the Editor has grown, and is likely to continue to do so with new features continually in the works.
To create an editing experience that feels intuitive, folks will often need to tailor these settings based on their individual preferences and needs. There is no such thing as a one-size-fits-all.
Instead of relying on people to find these settings on their own (admittedly they’re a little scattered, but that’s another issue), it might be good to surface them during onboarding. Consequently, users can set up a comfy editing experience straight-away.
In this post I’m sharing one idea to accomplish this, which essentially augments the current welcome guide in order to expose these options.
Simplify and extend
If you aren’t familiar, the existing welcome guide outlines several features of 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 over 4 different ‘slides’ presented in a modal:
The first part of this design exploration condenses those slides into a single, larger one. Here is a demonstration of how we might do this:
It would be good to explore more opinionated designs / layouts for this slide, and consider how we might optimise the copy. This is just one option to get the conversation started.
The primary call-to-action encourages the user to configure the editor, but there’s a secondary option to skip configuration and simply ‘start writing’.
Configuring the Editor
The configuration process consists of three steps, each of which include options that fit into a particular theme.
The first step offers a way to set up the Document Toolbar display. Hovering or focusing on each radio button will cause its effect to be rendered in the preview on the right-hand side of the modal.
Note: This option isn’t implemented just yet, so may not be necessary immediately.
In the second step we find options relating to the block toolbar. As before, hovering/focusing a radio button will cause the preview area to render the corresponding effect. As there are two options in this step, the user effectively gets to observe how they both interact at the same time which will really help illustrate what the finished configuration will look like.
The text formatting option is another one that hasn’t been fully implemented yet, but it exists in the codebase and is ready to go.
The final step follows the format of the previous two and contains features pertaining to accessibility.
Once all options have been selected, clicking ‘Finish’ will exit the set up process and the user will be dropped into the freshly configured editor.
Putting it all together
Here’s a short video demonstrating the entire flow:
Feedback
First and foremost, it would be good to gather thoughts around whether this is a good idea in the first place. Secondly, how does everyone feel about the options presented in the media above? The three steps were informed by the available options, so if we were to consider others then the steps might need to be tweaked a bit. Perhaps there are alternative ways to categorise the features presented here?
Hey, everyone! After sharing a proposal for a new approach to this year’s default theme that would emphasize a diverse collection of style variations, there were a lot of positive replies and notes from folks who’d like to be involved in the process. With the help of @mikachan, we now have a repository for a stripped-back and minimal version of Twenty Twenty-Two, which can serve as our base theme. I wanted to use this post to outline some of the process and timeline details around the collaborative format we’ll use to create style variations for the TT3 theme.
@beafialho made a few changes to TT2 in order to strip it down to a bare, unopinionated canvas:
The largest heading sizes have been scaled down
Different color styles have been applied
The serif font for headings has been replaced by system sans serif font
Images have been removed
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/ fluid typography and spacing presets functionality have been added
Bea also made four style variations to demonstrate how dramatically different the look & feel of each of the variations can be:
One important note is that we are limited in the number of fonts we can include with the theme and should aim to use 3–4 different typefaces across all variations (in addition to systems fonts). Bea has selected a couple of fonts, used in the variations above, that seem like a good starting point to use because of their simplicity and variety:
System sans serif font
IBM Plex Mono
DM Sans
Source Serif Pro
This is just a starting point, rather than the final list of fonts that will be included with the theme. If anyone feels strongly about using a different font, please speak up because this list can certainly evolve based on what folks would like to use! We can also suggest changes to the base theme as needs arise.
We can collaborate throughout this process in a dedicated channel on the Making WorkPress Slack: #core-themes-projects. If you replied on the original post or reached out in DMs, you’ve already been added to the channel. This can be a place for folks to ask questions and share work in progress through screenshots or videos. The more we work together, the more we can ensure all the variations feel as different, opinionated, and unique as possible!
Design a style variation
This can be done a few different ways, including:
Create an alternate theme.jsonJSONJSON, or JavaScript Object Notation, is a minimal, readable format for structuring data. It is used primarily to transmit data between a server and web application, as an alternative to XML. file to the one provided by the theme and change values directly in the code.
Make changes in the Global Styles panel in the Site Editor. You can save these changes as a new style variation using the Create Block Theme plugin.
Design static mockups in Figma or a similar program.
Submit your style variation
When you’re ready to submit, please create a new issue on the TT3 repository and share your designs:
Theme.json files can be submitted as code or as zip files.
Add images that showcase the look & feel of the variation.
Include a style guide with design specifications — this should include details on typography, colors, spacing, etc. Here’s an example.
Project timeline
Aug 10: Project kickoff
Aug 31: Style variation submissions close
Sept 7: Final curated set of style variations announced
Sept 20: Theme and all variations are committed to Gutenberg trunk in time for WordPress 6.1 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. 1
Gutenberg considerations
There are a few open issues and PRs that would benefit this project and may be able to be moved forward in the next few weeks, including:
We appreciate any efforts by Gutenberg contributors to help move these issues forward! Let’s plan to keep in touch in the channel about any significant changes in functionality that happen after the project kickoff.
Props
Huge thanks to everyone who’s contributed and shared ideas for this project so far!
Hi, all! Here are a few projects the Design Team has contributed to over the past couple of weeks.
Twenty Twenty-Three default theme kickoff
An experimental new process was kicked off for designing the style variation-focused Twenty Twenty-Three theme with a post on the Make Design blog. Join us in 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/. channel: coreCoreCore is the set of software required to run WordPress. The Core Development Team builds WordPress.-themes-projects.
Visual template building
A number of recent / upcoming developments present an opportunity to implement a more visual, and flexible template creation experience. @jameskosterexplored more here.
Pre-publish 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. summary section
@javiarcepublished a proposal to improve the pre-publish sidebar with a summary section that includes the document title, excerptExcerptAn excerpt is the description of the blog post or page that will by default show on the blog archive page, in search results (SERPs), and on social media. With an SEO plugin, the excerpt may also be in that plugin’s metabox., featured imageFeatured imageA featured image is the main image used on your blog archive page and is pulled when the post or page is shared on social media. The image can be used to display in widget areas on your site or in a summary list of posts., tags, and categories.
Editor welcome guide with setup
We have a number of useful appearance 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) options in the Editor. To enable folks to customize their editing experience from the get-go, @jameskoster has been exploring a way to surface these options as a part of the on-boarding process. He recently shared a post on the Make Design blog requesting feedback on the proposal.
Openverse 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.
@fcoveram continued with the Openverse header, this new version proposes shifting the content type and filtering on a popover without leaving the page.
Global Styles previews
When customizing 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. defaults (in Global Styles → Blocks), there isn’t always an in-canvas preview present for the block you’re customizing. By including a preview in the inspector, you can nevertheless get a sense of your changes. @joen explored this in a ticket.
Stepped Slider
The stepped slider is a new 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. control that lets users take advantage of preset spacing values. The effort unearthed some interesting challenges around how to present indeterminate states, and the control is likely to evolve further in the future. Dive into the conversation on the ticket.
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 Slack.
The community has produced a dozen best-in-class themes together, and we’ve come to look forward to a new one arriving at the close of each year. That said, themes are in a transition period today, and it seems like this may be a reasonable time to step back and to re-evaluate the annual cadence with which we build default themes.
Innovations like theme.jsonJSONJSON, or JavaScript Object Notation, is a minimal, readable format for structuring data. It is used primarily to transmit data between a server and web application, as an alternative to XML., 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. templates, and block patterns are making theme development far simpler, and are providing new ways for users to customize their sites. There’s reason to believe that the community can leverage all this to build more frequent and diverse theme and customization solutions for our users in the coming years.
What’s next?
Style variations, which were released with WordPress 6.0, are predefined look & feel options that give users a way to drastically alter the appearance of their site without changing their theme. Default themes have always been used as a way to showcase the latest and greatest in editor capabilities, so focusing on style variations for the Twenty Twenty-Three theme seems like a nice way to continue that tradition.
What if, instead of emphasizing the theme itself, we highlighted an opinionated set of style variations designed by members of the community? We could use Twenty Twenty-Two as the basis for a new theme that’s stripped back and minimal — a blank canvas to let a diverse range of style variations shine.
It would be interesting to experiment with how opinionated we could make each of the variations. Maybe one variation makes all typography on the site use a single type size in a monospaced font, while another variation uses many different fonts paired together. I think that pushing the boundaries of what can be done with the style variation format should be the goal — and we can have fun seeing what kinds of things we can come up with in the process.
Call for contributors
For a truly diverse collection, style variations could be submitted by different members of the WordPress community. From those submissions, a curated collection could be selected to be bundled with the new theme. Please reach out to me directly (@critterverse 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/.) if you are interested in submitting a variation, and I’ll plan to post updates here on the Make blog as the project comes together.
Share your feedback
There are still many open questions about the next default theme but hopefully this post can help get the discussion going. I would love to hear from folks about how you see the next default theme taking shape!
As the WordPress brand evolves and changes, our goal is to create something that looks forward to the future of the project. There are still many sections of the site to be updated, but we’ve got a great start with these new designs for two of the most high-traffic pages.
Homepage
The new homepage brings more attention to the benefits and experience of using WordPress, while highlighting the community and the many other aspects that make the WordPress project unique. The design is inspired by the jazzy look & feel the WordPress brand is known for, and builds on many of the visual elements established by the News redesign such as the typography and color palette.
Download page
The design of the download page utilizes the same look & feel as the homepage but leans a bit more towards a “functional” aesthetic with fewer decorative elements. It seems likely that different parts of the site will each land somewhere on the spectrum between jazzy/expressive visuals and minimal/clean visuals, depending on the content of each section.
Based on previous approaches to the order of elements on the page, this design brings the download and hosting options side by side above the fold. These avenues are both common first steps, and giving them equal footing can help people more quickly decide which fits their needs best.
Additional content focused on features and useful resources has also been included. These sections aim to reinforce someone’s decision to download/use WordPress, and to make sure they’re aware of and have access to a variety of support tools as they get started.
Mobile designs
We’ve also designed how these two pages will appear on mobile devices:
Next steps
Work on implementing these designs in a new 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. theme will begin immediately, and another post will be shared as we draw near to launch — this will be an opportunity to gather additional feedback for future iterations.
As a reminder, please note that the first priority is going to be continuing to overhaul pieces of 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/ rather than spending too much time perfecting any one piece. This likely means shipping additional updates for these two pages after the design has shipped elsewhere. I’m excited about making continued improvements to these two pages after the initial launch, as well as beginning the process of redesigning new parts of the site!
An important tenet of working in 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. is having a high degree of transparency and access around the design process. The WordPress Figma has long been open to the public, making it easy for all to view and duplicate files and get started building using our design library. Theme designs could be open-sourced and made available in this same way.
As of July 1st, a number of themes authored by WordPress coreCoreCore is the set of software required to run WordPress. The Core Development Team builds WordPress. and other theme developers have been added to the WordPress Figma. Users can now explore the designs for popular themes such as Stewart, Archeo or Pendant and add their own theme designs that have been submitted to WordPress.org.
A Theme Template file has been created with two main objectives: share the designs of launched 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. themes and inspire the WordPress community designing themes with a higher standard.
You must be logged in to post a comment.