Want to get involved? See the handbook and optionally drop into #design to chat. Most active design work happens in the block editor project, consider dropping into Needs design or Needs design feedback.
There’s a WordPress Component Library in Figma. Duplicate to edit, direct access is reserved for the design team.
This is a bi-weekly update of work the design group contributed to. Work happens in overview issues, and in needs design, or needs design feedback issues.
Continue readingThis is a bi-weekly update of work the design group contributed to. Work happens in overview issues, and in needs design, or needs design feedback issues.
Continue readingThis is a bi-weekly update of work the design group contributed to. Work happens in overview issues, and in needs design, or needs design feedback issues.
Continue reading
Thank you to everyone who contributed to this work so far, either directly or indirectly. This includes @jameskoster @joen @richtabor @matveb @annezazu and many many more.
This is a follow up to the recent admin design post on Make CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. which highlights the need for us to start thinking about what an evolution of WordPress admin might look like. The release of 6.3 gives us a hint of what’s to come via the Site Editor, so it’s time to chat through some of the core concepts explored, collect feedback, and begin to think through how to break this significant effort down. Consider what you see here broad strokes and the first of many iterations. It’s going to take time to get right.
It’s first important to understand why its worthwhile spending the time on a large initiative like this. How might it allow WordPress to continue championing the open web and keep an edge on proprietary tools?
As products expand in functionality so too does their complexity. This is a common software challenge that WordPress also faces, particularly because we have so many different types of users, including end users, site managers, builders, agencies, pluginPlugin A 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 builders etc. WordPress admin is the glue that ties together the different stages of a user’s journey, from setup to content creation to management and monitoring, which means it plays a critical role in helping to reduce the overall complexity of that journey. The added risk here is that plugin authors are side stepping outdated UIUI UI 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. by introducing their own which can further fragment the WordPress experience.
How might we introduce new paradigms/mental models that make WordPress that much easier to use?
WordPress can be shaped to cater to a wide range of use cases, but this opens up an interesting design challenge (and opportunity) to ensure we are properly serving each use case well enough. We have an opportunity to take customisation and even private labelling to the next level.
How might we design WordPress in such a way that it can be tailored and rebranded to a point where it feels like an entirely new product focused on a specific use case?
The success of a product largely depends on the perception of its brand. The way people perceive WordPress, particularly developers and designers, has gone through a lot of change over the last 20 years. Sometimes, it’s taken for granted or dismissed as old software. If we want WordPress to continue to be successful we need the next generation of creators to reactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org/. positively to the mention and use of WordPress. Surface details such as visuals/UI (both in product and marketing) are are a direct extension of the brand, as is usability.
How might we use this an opportunity to help reinvigorate the UXUX UX 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. and attract a new audience?
Now let’s get into the fun stuff and talk about some of the various concepts explored so far, some of which we can already begin to see in the Site Editor.
As WordPress has evolved, the connection between admin and front-end has only gotten stronger. GutenbergGutenberg The 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/ introduced a WYSIWYGWhat You See Is What You Get What You See Is What You Get. Most commonly used in relation to editors, where changes made in edit mode reflect exactly as they will translate to the published page. way of working, and the Site Editor extended that to all aspects of your site. 6.3 now completes the connection by bringing your site into parts of your admin experience via what we call “The Frame”. We are starting to see a new paradigm emerge that is not unlike mail and note taking experiences where content is in view alongside navigation and management based tasks, unlocking a new way of working.
It’s important we identify the different surfaces of WordPress and what their roles are so that end users feel comfortable moving between them, and developers feel comfortable extending them.
Exists “under” the preview of your site. It’s what powers everything above. It can be broken down into two, extensibleExtensible This is the ability to add additional functionality to the code. Plugins extend the WordPress core software. areas.
The sidebar should be used primarily for navigation as well as house simple, high level tasks that benefit from having the front-end of your site in view. Zoom in to the editor for granular edits and zoom out for broader strokes.
If you need more space than what the sidebar provides for a particular task, you can make use of the main content area. Examples being bulk editing posts, adding new products, managing a media gallery or pattern library.
The frame represents the front-end of your site and can be in an edit or read-only state. It sits above admin and can be used to show what impact an admin change might have on your site. It can either be in a primary or secondary position, or not visible at all.
The frame can be used for previewing any type of content, including your entire site, templates, patterns etc. Plugins can decide as to whether they benefit from having the frame in view while a task is being worked on, or hidden away. If a plugin doesn’t make use of the main content area, the frame will be in its expanded state.
The command palette is a power-user tool that sits on top of everything and is aware of what’s beneath it so that it can offer contextual actions and information. This also becomes a place for a user to “talk” to WordPress via natural language interfaces. Plugins will be able to register commands that may range from a simple shortcut to interacting with AI chatbots or wp-cliWP-CLI WP-CLI is the Command Line Interface for WordPress, used to do administrative and development tasks in a programmatic way. The project page is http://wp-cli.org/ https://make.wordpress.org/cli/ interfaces.
Between these surfaces lie the connectors that help users transition between them. The most obvious and important example of this is the admin bar that’s currently visible on the front-end of the site. With the introduction of the frame, which represents the front-end of your site, we have an opportunity to re-think what transitioning between the front and back of your site looks like.
Core and plugin authors should be able to make use of the surfaces outlined above in different ways depending on the job at hand. Let’s take a look at what configurations might be possible and where they would be useful.
In scenarios where a simple task in admin changes the front-end of a site you might be best served by hooking into the sidebar and previewing changes in frame. This is ideal for onboarding, site or page settings, or even hyper-focused editing experiences.
You can combine the use of sidebar and content for tasks that are more management orientated and require more space with multi-layered navigation or filtering.
For simple management tasks that are only one level deep you can simply make use of the content area.
A more exploratory concept depicts all three areas in combination, with the frame in a secondary position that can be called upon when a document’s presentation requires editing. However, there are questions as to whether there is an elegant way to pull this off.
There are some scenarios where none of the above are appropriate and content or a task deserves its own space or focus. Modality is a useful technique here that includes full screen modals ideal for multistep tasks like setup/onboarding flows. Core should aim to provide patterns that plugins can make use of to keep focused experiences consistent.
We’ve introduced a drill down navigation pattern within the Site Editor which can apply to the rest of admin. There are pros and cons to this approach. It provides greater focus and the space can be used to house basic content alongside the frame or main page area, but it does make navigating up/down the IA tree a little more challenging. We are exploring ways to work around this, for example introducing breadcrumbs or highlighting recently visited sections.
As part of this work we should aim to iterate on the existing WordPress components package which can evolve into a fully fledged, themeable system with accessibilityAccessibility Accessibility (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) baked in that plugin authors can refer to and make use of. This also includes variables for generated color scales ( ideally with a high contrast option), spacing, shadows etc. We have a unique challenge in that we need to cover dense environments like the editor, as well as environments that need more breathing room and focus like admin. This deserves its own dedicated post but in the meantime you can view and contribute to this tracking issue in GitHubGitHub GitHub 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/.
Combining all the above offers a tremendous amount of flexibility that can cater to a wide range of use cases. However, we’ve all seen how the WordPress experience can be polluted by ever growing top level navigation or fragmented settings screens. We need to offer a level of customisation that gives site creators (or platforms) the ability to shape the information architecture and character of admin to best suit a particular use case. Even better, how might we make it easier for the community to share their configurations with others?
Let’s take a look at a few different use cases and how they would benefit from customisable navigation and system variables. We’d like to see WordPress become a fun platform to build multiuser products on top of, more so than it already is.
This ability to customise admin adds more value to multisite setups, which also have to fit in naturally with this new admin experience.
It’s important for admin to be scalable down to mobile devices where site monitoring and administrative tasks will be done on the move. There are some details to figure around how to call upon the frame when out view.
Perhaps the trickiest part of this whole initiative is rolling admin changes out in a way that is iterative, doesn’t break existing workflows and encourages gradual adoption. The site editor has given us a space to experiment, including being able to browse your site’s pages in the latest 6.3 release, and that may extend to other core admin pages like site settings, but at some point we’ll need to “break out” of the editor to prevent too much duplication. We also need to support plugin pages that may never update, and do it in a way that feels seamless.
Once we’ve aligned on the high level concepts we can follow up with a few other posts that dive deeper into some of the details. Notably:
There is a lot of excitement and potential surrounding an admin redesign and how the Site Editor can act as a safe entry point to the work, but there are many risks and potential rabbit holes as well. We need to lean in to existing insights and feedback and as much as possible, starting at a high level. Low level details like UI components (lists, tables, filtering, settings pages etc) can be discussed directly within GitHub. With that in mind, here are a few questions for the community that will help progress this work forward.
Hi, all! Here are a few projects the Design Team has contributed to over the past couple of weeks.
In Openverse, we designed additional search views for sources, creators, and tags. Soon will be possible to land on a sharable landing page that allows users to browse content under any of these content groups.
As part of the UIUI UI 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. improvement project, we designed a cleaner metasearch to allow users searching in external sources in a new modal instead of a popover.
A refined take on the Showcase refresh, to hopefully be implemented soon. Issue.
As part of the WordPress.orgWordPress.org The 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, we’ve been designing a Filter component to reuse it in all sections and ease the content browse.
In parallel to the WordPress.org redesign, we are cleaning up the Design Library by blending components, adding new ones per site section, and introducing variables to ease the mockup creating and dev hands-off.
From the department of details matter, a 2px border was changed into a 1px border in the command palette. PR.
PR to fix an issue with the new top toolbar when a pluginPlugin A 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 added a button to the top toolbar.
PR to add more information in the detail view of template parts.
PR to add a description to the list view, making its use case clearer.
PR to simplify, reduce, and bring consistency to our modal confirm dialogs.
Two PRs (one, two) to improve the display of patterns in the new Patterns section, wrapping to 3 or 4 columns when space allows it, rather than be locked to two.
PR to add context and distinguish between patterns and template parts.
PR to update the icons shown when you create new patterns. These go generic reserving the location-based icons for headers and footers.
Issue with a design take on what the detail view for the Front Page template could look like.
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 SlackSlack Slack 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.
Moving fast now is a fonts library PR, which we are collaborating on while continuously refining the mockups shown here.
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.
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 features are getting ongoing refinement, with these new mockups detailing checklists and flows for adding security keys.
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.
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 UIUI UI 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.
A PR to improve the table view for templates and other manage views.
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 SlackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/..
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:
Together the contributors collaborated on the following focuses:
We also worked on the following tickets:
We would like to thank the Sylhet WordPress Community for hosting the first ever WordCampWordCamp WordCamps 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 Day Contributor 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.
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.
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.
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.
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.
#6.3 #release
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.org The 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.
You must be logged in to post a comment.