Design Share: Mar 13–Mar 24

Hi, all! Here are a few projects the Design Team has contributed to over the past couple of weeks.

Mercantile Social Kit

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.

Spacing controls

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.

Scaling 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. options menu

Initial ideation around how the block options menu can be scaled, and avoid the burial of common actions. Github issue.

Ideating on the template management view

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

Design Share: Feb 13–Mar 10

Hi, all! Here are a few projects the Design Team has contributed to over the past couple of weeks.

Revisiting the Image Size dropdown

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.

Site Editor metrics

@jameskoster is working on a PR to adjust some of the spacing and alignment metrics in the Site Editor.

Minimise the footprint of spacing controls

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.

Exploring metrics and color in the Site Editor’s dark 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.

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.

Layout

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/..

#design, #design-share

Design Share: Jan 30-Feb 10

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.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/ 2FA mockups

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.

CoreCore Core 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 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.

Componentisation of the ‘Browse view’ assets

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

X-post: Apply to Attend the 2023 Community Summit

X-comment from +make.wordpress.org/community: Comment on Apply to Attend the 2023 Community Summit

X-post: Community Booth at WordCamp Asia 2023

X-post from +make.wordpress.org/community: Community Booth at WordCamp Asia 2023

Design Share: Jan 16-Jan 27

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.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/.

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 CSSCSS CSS 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 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/..

#design, #design-share

X-post: WordPress.org Redesign Recent Launches

X-comment from +make.wordpress.org/meta: Comment on WordPress.org Redesign Recent Launches

A refresh of WordPress.org/themes

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.

#redesign

Design Share: Jan 2-Jan 13

Hi, all! Here are a few projects the Design Team has contributed to over the past couple of weeks.

Learn redesign

We continued working on the Learn redesign. Figma file.

Themes Directory redesign

Designs for a Themes Directory redesign.

Button Padding

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

Design Share: Dec 19–Dec 30

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 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 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 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 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 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