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.
WordCamp Sylhet 2023 took place on 20 May 2023 at the AuthLab office in Sylhet, Bangladesh. A whole day dedicated to the contributors with the successful completion of the first ever Contributor Day in Sylhet had a total of 11 Teams. Thanks to @chaion07 for Leading the Design Table. Here is the list of contributors who joined the Design Table:
We would like to thank the Sylhet WordPress Community for hosting the first ever 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. in Sylhet. A big shout out the Lead Organizer @techjewel & the Contributor DayContributor DayContributor Days are standalone days, frequently held before or after WordCamps but they can also happen at any time. They are events where people get together to work on various areas of https://make.wordpress.org/ There are many teams that people can participate in, each with a different focus. https://2017.us.wordcamp.org/contributor-day/https://make.wordpress.org/support/handbook/getting-started/getting-started-at-a-contributor-day/. Coordinator @hasanuzzamanshamim for the hard work and dedication.
Hi, all! Here are a few projects the Design Team has contributed to over the past couple of weeks.
Font Management
Moving fast now is a fonts library PR, which we are collaborating on while continuously refining the mockups shown here.
Palette icon
In effort to avoid confusion between the Global Styles iconography, and the inspector Style tab, this palette icon is an explored alternative. Let us know your thoughts.
Toolbar icons
Before/After
With recent additions to the top toolbar (view post and document title), there’s an opportunity to simplify and revisit the visuals for consistency and compactness. Issue.
WP.org account security
WP.org account security features are getting ongoing refinement, with these new mockups detailing checklists and flows for adding security keys.
Content/Template editing improvements
First passs of the improved flow for clarifying when you’re editing content vs. template has been landed, and will appear in v16 of the plugin, thanks to Saxon and Robert.
Create new page
In this PR by Saxon, a unified “new page” modal is introduced in the site editor. This modal can eventually be invoked from anywhere, including the navigation items or in the link 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., creating a consistent initial building experience.
Improved template table view
A PR to improve the table view for templates and other manage views.
Page details
With the Pages section landed in the site editor, this PR improves the detail views for individual pages.
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/..
A new release has begun, and this time @richtabor and I are collaborating on the design leading. In order to kick things off, we are holding an open zoom session May 26, 2023 at 14:30 UTC. The Zoom link will be shared in #design.
After the session, a recording will be posted here, along with notes and updates.
Agenda
Discuss what is going to happen going forward.
Begin to prepare a spreadsheet of all issues across 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/ and tracTracTrac is the place where contributors create issues for bugs or feature requests much like GitHub.https://core.trac.wordpress.org/. that need doing.
Prepare a list of things that will need issues that haven’t got any.
Have some space for questions or look to answer them async.
The session will take 30 minutes to ensure everyone can easily watch or drop in. It will be a working session with a focus on getting all the issues into a log.
Questions about design in releases?
Do you have any questions you want answered? Whilst we might not get time in this meeting, the goal of this release is to document and setup future leads for being able to access information easily. Is there something you’ve always needed to know about leading design in a release? Curious how it happens and can’t find specific information?
Now is the time to ask the questions you can’t find the answers to and get those responses documented so you and future contributors can be empowered to lead awesome releases going forward. So, you can do the following:
Once we have those questions, we will both try and answer them and also add to our list of things to document.
Designers joining coreCoreCore is the set of software required to run WordPress. The Core Development Team builds WordPress. and editor triages
As one change to start off this kickoff, design triages are going to be part of the core and editor triages. This means that attending those times is something if you are curious about triage or getting involved is a good idea. There will be more on this and other ways to get involved as the release pace gathers. To discover the triage meetings you can find them in the meeting calendar link here.
A few folks have asked me why myself and many in the WordPress community are drawn to jazz musicians as what we promote with each release, with the wild Hello Dolly events idea, and now starting to incorporate more into our design language.
The formula for jazz is Music + Freedom.
It has a form, history, and legacy, but still allows for a tremendous amount of individual creative expression when it’s performed. It can, with intention, be different every time, and unique to every performer.
Jazz is not alone as an art form that allows this, it exists in a 3D space alongside many other genres and non-sound forms of expression.
But keep in mind that formula, combining a deep understanding and respect for the past, with a opportunity for each individual to express their creativity in their own way and evolve a new future, and you’ll see why we’re drawn to jazz as an art form that shares a lot of philosophical underpinnings with how we want to build WordPress.
As part of a broader project to reimagine the visual appearance, functionality, and other elements of 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/ website, one of the next focus areas is the WordPress Theme Directory. It will soon receive a refresh similar to other pages of the WordPress.org website, such as Showcase or News.
The images above provide a general overview of the site’s main landing page, theme details page, and the theme preview flow.
The refresh brings the Theme Directory in alignment with the vision for WordPress.org, updates the theme taxonomies, and includes improved usability. Additional updates and enhancements are planned in the future, and this iteration of the site focuses primarily on design work while leveraging existing functionality.
Contributors are welcome to provide feedback on this project within the Figma file or the GitHub repository.
Hi, all! Here are a few projects the Design Team has contributed to over the past couple of weeks.
Hosting Redesign
The Hosting page 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/ is currently being redesigned, here’s a first iteration with a clean, white look, similar in simplicity to https://wordpress.org/download/.
Jobs Redesign
The WordPress Jobs site (https://jobs.wordpress.net/) is being redesigned, borrowing generic styles from WordPress.org redesign.
Dev Blog Redesign
An exploration of a fresh visual for the dev blog to match the Developer redesign.
About Page Redesign
Ongoing work to redesign the WordPress.org main About page. Figma, GitHub.
Discussing Global Styles IA
Discussing the IA of global styles to explore whether splitting into presets and styles subgroups might make it easier to discover. Join in the conversation on the issue.
Custom CSSCSSCSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site. with error highlighting
Exploring how we might in the future highlight erroneous CSS code in the Custom CSS box.
Pointers/notices
For increasing awareness of changes, or pointing out new features or tips, inline pointers could be useful. This issue explores one such for the Settings panel.
Shadow control
An exploration into a shadow design tool that can accommodate preset options, and the full scope of css’ box-shadow property.
Link control
An updated design for the add/edit link 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. 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. editor. The new design features some 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) enhancements and better scales to accommodate features we’re looking to add soon.
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/..
Hi, all! Here are a few projects the Design Team has contributed to over the past couple of weeks.
Pattern Directory Redesign
Exploring a refresh of the pattern direction in the vein of the Theme Directory.
Site editor visual explorations
A few visual explorations on how we can improve the edit and save flow in the site editor. Notably, by adding an extra drilldown item for each navigation item or template, we are able to show a clear and ergonomic edit button in context of a useful title. You can still click the preview on the right to hop directly into editing what you see at any point in time, but making this secondary to the navigation on the left is meant to afford some clarity on the structure. A couple of PRs to follow, that explore these efforts: 47142, and 47777.
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/ 2FA mockups
As 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. teams are currently implementing 2 factor authentication for WP.org accounts, we are exploring a few small visual improvements to parts of the flow. Issue.
CoreCoreCore is the set of software required to run WordPress. The Core Development Team builds WordPress. interface improvement
The Openverse team decided to tackle a core interface improvement of root components. For this project, we are exploring a new version of buttons based on the Tailwind approach. The change is one of the 2023 goals and implies updating the Figma Design Library.
Sensitive content view
After the Openverse integration 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/, Openverse team started discussing the safety browsing experience outside Openverse site. In that vein, we started to explore ideas for landing in sensitive content results.
Componentisation of the ‘Browse view’ assets
Now that we’re approaching a good place with the general ‘Browse view’ UXUXUX is an acronym for User Experience - the way the user uses the UI. Think ‘what they are doing’ and less about how they do it. it’s time to componentise the different elements which will allow us to rapidly polish all the pixels in time for 6.2.
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/..
In the near future, the Showcase section will receive a refresh in the visual style started with /News:
The gallery above shows the three basic layouts: landing page, single page, and archive.
The refresh of the Showcase site addresses several requests that have been made in previous discussions (Call for design: WordPress Showcase, Showcase redesign, and this Showcase GitHub issue), such as adding supplementary metadata to each showcased site, improving the mobile page layout and, in general, making the design of the whole section more modern and exciting. The current work represents a starting point that will continue to be iterated upon as additional features, and content changes are explored.
Hi, all! Here are a few projects the Design Team has contributed to over the past couple of weeks.
Translate Redesign
We explored a redesign of the Translate pages with several things still being worked on.
Top toolbar improvements
For constrained contexts or simply if you prefer, there’s an option to dock 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 to the top of the screen. At the moment this results in a stacked and somewhat clumsy experience, which these explorations aim to mitigate through making the singular top toolbar contextual. Needs dev in 40450.
An in-canvas drag handle exploration
An ongoing problem with the top toolbar option is that there’s no handle for drag and drop. To go along with top toolbar improvements, this is an exploration to move the handle back in context of the block, same color as the text, so it works for either toolbar configuration.
Move outline stats to the top of the outline
The document outline was recently merged into the list view. Responding to feedback that it was easy to miss at the bottom, we moved those stats to the top of the outline tab. Completed in 46648.
A unified 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. components grid
Block editor UI components are currently a mix of sizes ranging from 32 over 36 to 40px in height. This new issue outlines an approach to unifying on 32 and 40px sizes, with 40px being the tall and graceful default, and the more compact size being appropriate for a few specific contexts, such as the top toolbar. Issue 46734.
Adding Fonts
Mockups to go with PR 46332, which explores font management.
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/..
Hi, all! Here are a few projects the Design Team has contributed to over the past couple of weeks.
Developer and Documentation redesigns
We continued iterating the design of the Developer and Documentation pages with feedback from the community and the WordPress Documentation team.
Jobs redesign
We started redesigning the WordPress Jobs website. Figma file with an initial iteration.
Global styles summary view for blocks and styles
We are working on a feature called Style Book, a collection of every 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. available organized by categoryCategoryThe 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging. that can be used to customize and preview the style of a site. Figma file and issue.
Summary panel grid tweaks
Before/After
A very tiny improvement to the spacing of items in the post status summary panel. More work to be done. PR.
Snap point updates
Updated mockups for rendering snap-points when resizing images. There is an interesting CSSCSSCSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site. challenge for rendering the overlay with transparent gutters in both centered, and justified right configurations.
Global Styles panel/drilldown synchronicity
Efforts to add box-shadow controls to the editor have unearthed an inconsistency between Global Styles properties and inspector panels. For example, a missing “Border” panel, resulting in border properties currently being found in the “Layout” section. This PR adds a new border panel, with some icon work attached.
Menu Item Transforms
Building navigation is made slower by having to pick between mostly similar item types, “Page Link” vs. “Custom Link”. This issue details a simplification to hopefully reduce to a single item that can be transformed in the inspector.
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. counter in Openverse
The filters applied counter is coming back to the Filter button and the filter tab. The idea is for improving the content settings flow and how users are aware of the narrowed results.
Browse Mode
Pull Request #44770 reorganizes the site editor so that it is better positioned for exciting future enhancements like browse mode.
Shadows
Pull Request #46228 explores higher definition shadows in the block editor 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..
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/..
You must be logged in to post a comment.