Proposal: a new color palette for WordPress

Just like my previous posts on type scale and spacing, a standardized approach to color enforces consistency and simplifies decision making for UI design. It can also make it easier to adhere to web accessibility guidelines. This post aims to point out the opportunities we have today, propose a new color palette, and suggest how to implement it.

Continue reading

#colors, #style-guide

Proposal: a consistent spacing system for WordPress

Much like a type scale, a spacing system enforces consistency and simplifies decision making for UI design. This post aims to standardize one for WordPress.

What is a spacing system?

Spacing is the atomic element of an overall spatial system. A spatial system includes spacing, grid, and layout. Spacing is the foundation on which the others are built.

A spacing system is simply a set of predefined values and guidelines for how to apply them in the UI.

Continue reading

#spacing, #style-guide

Proposal: a consistent type scale for WordPress

A type scale can enhance the design and usability of an interface. This post aims to standardize one for WordPress.

What is a type scale?

A type scale is a consistent progression of font sizes (e.g. 6, 12, 24, 48, 96). These progressions can be calculated by using a ratio or scale. For example, a scale of 1.5 would result in 16, 24, 36, 54, 81, and so on. Using this method gives us a harmonious set of font sizes to use in our UI.

By including other attributes like font weight and line height we can create a reusable set of predefined styles for design and development.

What benefits does it provide?

“Typography can help create clear hierarchies, organize information, and guide users through a product or experience.”

Carbon Design System

Here are some key benefits:

  • Consistency: when it’s applied consistently, the type scale helps users follow visual patterns while they use WordPress.
  • Consolidation: it reduces the number of styles used and makes it easier for a designer or developer to choose a style.
  • Functional: we can map these styles to functional roles as much as possible. This makes it easier to know which style should be used.
  • Usability: we can create usability standards related to text. For example, the minimum font size for text is 12px to enhance readability.

Type scale proposal

This type scale was designed to keep the number of separate styles to the minimum that works for WordPress. Some things to keep in mind:

  • This type scale is separate from emphasis or decorative styles like color, bold, italic, and underline.
  • It assumes the default system font is being used, just like WP Admin.
  • Its primary use case is for productivity, meaning it’s best used in interfaces like WP Admin. We could expand the type scale for use on WordPress.org in the future.
Type scale chart showing 10 different type styles

Here’s a link to a CodePen to see a live example.

Next steps and feedback

Next, I think we should use the Design Experiments plugin to implement the type scale on a few screens. If we decide to proceed, we can work on documenting when to use which type style!

I’ve been using this type scale with several projects and it seems to be working well. What do you think?


Update:

#style-guide, #typography

Project: Reviewing WordPress Components

What are WordPress Components?

Put simply, WordPress Components are the set of UI elements that make up the Block Editor and other projects. You can find them in the Gutenberg GitHub repo or in the Block Editor Handbook.

As I’ve mentioned in our team chats over the past few weeks, I’ve been working on reviewing WordPress Components. To help make sure as many people can be involved as possible, I’m summarizing the work so far in this post.

Background

Along with a new editing experience, the Gutenberg project has created a growing library of UI components like buttons, menus, and text fields. Although these components were introduced with the Block Editor, they’re generic enough to be useful in various contexts outside of it. I hope that we see them being used more throughout WordPress.

Opportunity

There’s an opportunity to make sure these components are flexible enough for all WordPress experiences, not just the Block Editor. In a related issue on GitHub, @matveb mentions that the components are now at a point where they can be re-examined in a long-term, holistic way. I think the Design team can help with that.

There’s one focus in particular where we can have an immediate impact — a component review.

Component review

A component review is what I’ve been focusing on the past few weeks. It’s a check of each component to evaluate naming, properties, and documentation. I’ve also noted gaps that could prevent the components from being useful. While this review isn’t necessarily visual design, it does help provide design guidelines for future work.

Specifically, this is what I’ve been checking and documenting:

  • Naming, composition, structure, and visual properties (e.g. “size” and “appearance” options for Button).
  • Expanded guidelines for design, development, and accessibility.

For more information on the basics of one of these reviews, and for some examples, check out the links under “How to get involved”.

How to get involved

Ready to get started? There are a couple of different paths to choose from:

  1. Design and Semantics: the most immediate need is feedback on the issues in the “Needs feedback” column of the GitHub project.
  2. Documentation: be on the lookout for issues labeled with “[Type] Documentation” in the coming days.

Right now the review aims to just get the basics right, but the Gutenberg project and its components are an opportunity to inform the future design of WordPress. Some discussions that started in the Gutenberg project have been a catalyst for change in the rest of WordPress. For example, icons that were designed for the Editor sparked a discussion to revamp Dashicons, the icons used in WP Admin. If you want to have an impact in this way, the component review is a great place to start!

I hope this excites you as much as it excites me! Please leave a comment on this post or join the #design Slack channel if you have any questions.

#wordpress-components