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.
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/..
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
Hi, all! Here are a few projects the Design Team has contributed to over the past couple of weeks.
After updating most 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. components with the new button styles, we made use of the button revisit to polish the content media links and headerHeader The 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. layout of All content results. Design ticket.
As part of the analytics project, we are updating the notification banners for the new privacy settings and other possible performance breaks we need to inform users about.
Continued work to nail down the contents of the details panel in the site editor for various contexts.
An updated design for the Site Editor save modal.
We’ve updated the behaviour of the save hub in the site editor so that it only prompts to review changes when there are changes outside the current context. PR.
Introduces a way to create and manage patterns via a consolidated “Library” space. This work is leading up to the idea of synced patterns. Issue.
A design for an unobtrusive “View site” link in the site editor. Also updates the `external` icon making it more harmonious with the rest of the set.
As part of designing the new title bar, we’ve created designs for all cases of the toolbar, across post editor, site editor, top toolbar, and mobile combinations.
A navigation section was included in the site editor late in the 6.2 phase, but was pulled at the last minute due to some intricacies of its behavior. We are revisiting and simplifying these behaviors, with a primary focus on surfacing every menu you have saved, and letting you do basic management in the site view, still directing you to the edit view for intricate operations.
A coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. project, WP Notify, is making progress, and we’re seeking out how we can collaborate with them. For now, we’ve contributed a bell icon.
Thanks to work by Aaron, more condensed unlinked padding and margin controls are close to landing.
Collaborating with Rich, mockups for aspect ratio tools are ready for a dev.
When building thems in the site editor, it can be unclear from where a particular style originates (theme, user, global unspecific, global specific, local, etc). These concepts explore how to visualize that in an unintrusive way, and could use your feedback.
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.
Work in progress on a unified document title interface, that contains the most common and necessary actions, and scales to the content/template breadcrumb pattern as well.
Ramon is enhancing revision history management in the site editor, and this concept explores a potential future side by side page comparison. This could also be a juxtaposed version with a before/after slider.
New issue for a design control that adds an option for vertical text. The issue is ready for a dev to pick up.
Robert updates the Featured image panel to be more compact and coherent.
A new language icon for polyglots to use, or to go with the lang attribute control.
In the site view of the site editor, each sidebarSidebar A 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. section you navigate to we’ve referred to as “detail panels” or “drilldown details”. They are a good opportunity to surface high level options, without needing to dive into the edit view.
A first iteration of the command center has landed. As an initial step it’s quick access to items and actions on your site.
You can create pages from a variety of locations, such as URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org dialogs, navigation items, the command center, or the site editor. An important part of a site building flow is also to create a slew of pages initially as you are building out your site, then edit them later. These mockups imagine a unified modal for this.
When creating things like Query Loops, Templates, and Headers, there are prompts in the site editor that ask the user to choose a pattern. Previously these prompts opened small, cramped modals that forced the user to scroll a lot to see all the options. They now open comfier ‘full screen’ modals that are capable of showing many patterns at once.
The PR to make it clearer when you are editing page content vs. theme template is ready for testing. Give it a spin!
This POC layout branch is making progress.
Providing designs for the 2fa process, as well as the 2fa re-auth flow.
Thanks to work by Kai, you can now drag and drop images from the inserter media library or Openverse tabs into patterns.
Updating the behavior of the site editor resize handle to both let you scale up into edit view, and scale down to tablet and mobile previews.
A masonry layout avoids rivers in the thumbnails.
Editing and saving style variations is an important incoming feature. Existing mockups have style variation picking as drilldowns from an itemgroup, but another option would be a dropdown to select the variation.
Mockup showing how an “Add new page” detail panel could look like as invoked from the site editor.
A quick mockup to demonstrate how we might enable users to change the corner radius of a blockBlock Block 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. without having to open the Inspector.
A very quick mockup for Anne’s post about AI.
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.
A few are working with marketing on a social kit for Mercantile Swag Store. In that process, we defined some color styles that could be further expanded and considered for Mercantile website updates, or any updates related to Mercantile in the future.
Padding and margin controls use the new stepped slider to provide easily clickable preset sizes that are unified across your theme. The unlinked variations, however, take up a lot of space. In 49264, Jay and others are exploring a more condensed interface.
Initial ideation around how the block options menu can be scaled, and avoid the burial of common actions. Github issue.
Flowing in and out of the template management view in the site editor currently feels a bit awkward. This mockup explores a view-toggle pattern for moving between the ‘browsing’ and ‘managing’ contexts.
A note from @sereedmedia:
There is a new Make 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/. channel focused on 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 project #website-redesign
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.
#design, #design-share
Hi, all! Here are a few projects the Design Team has contributed to over the past couple of weeks.
When you upload an image, the large size will be shown by default. In this case, size refers to the image resolution, specifically the lower-resolution variant that WordPress creates on upload called “Large”. On modern screens, this resolution is often too low. Issue 48618 explores how we can improve that situation, and in this mockup we explore an interim step to make clearer that the dropdown is about image density, not dimensions, by renaming “Image size” to “Resolution”, and showing it inside.
@jameskoster is working on a PR to adjust some of the spacing and alignment metrics in the Site Editor.
Spacing controls like Padding and Margin occupy a large space in the blockBlock Block 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. Inspector, particularly when ‘exploded’ for per-side control. It’s most troublesome when you only want to add a value to a single side.
As the single-entity panels (e.g. when browsing a page) evolve and we present options to perform high-level tasks in the dark sidebar, 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. can become a little more complex. We need to keep refining the system so that it can scale elegantly and intuitively.
How might we increase what layouts are possible with WordPress whilst keeping it feeling intuitive to use for both technical and non technical users? The group/row/stack block and the column block gives us a really strong starting point to build off. Is there an opportunity to simplify? GitHub issue, test website.
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.
Exploring a refresh of the pattern direction in the vein of the Theme Directory.
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.
As metaMeta Meta 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.
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.
After the Openverse integration in 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/, 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.
Now that we’re approaching a good place with the general ‘Browse view’ 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. 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 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/..
#design, #design-share
Hi, all! Here are a few projects the Design Team has contributed to over the past couple of weeks.
The Hosting page of 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/ is currently being redesigned, here’s a first iteration with a clean, white look, similar in simplicity to https://wordpress.org/download/.
The WordPress Jobs site (https://jobs.wordpress.net/) is being redesigned, borrowing generic styles from WordPress.org redesign.
An exploration of a fresh visual for the dev blog to match the Developer redesign.
Ongoing work to redesign the WordPress.org main About page. Figma, GitHub.
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.
Exploring how we might in the future highlight erroneous CSS code in the Custom CSS box.
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.
An exploration into a shadow design tool that can accommodate preset options, and the full scope of css’ box-shadow property.
An updated design for the add/edit 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. in the blockBlock Block 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 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) 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 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.
We continued working on the Learn redesign. Figma file.
Designs for a Themes Directory redesign.
From the department of details that matter, a bug concerning button padding was fixed. Completed in PR 46764.
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/..
#design, #design-share
Hi, all! Here are a few projects the Design Team has contributed to over the past couple of weeks.
We explored a redesign of the Translate pages with several things still being worked on.
For constrained contexts or simply if you prefer, there’s an option to dock the blockBlock Block 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 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.
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.
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.
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 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/..
#design, #design-share
You must be logged in to post a comment.