Tag Archives: style-guide

Dave Whitley 9:15 am on November 26, 2019
Tags: , style-guide   

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

Dave Whitley 9:08 pm on October 31, 2019
Tags: spacing, style-guide   

Proposal: a consistent spacing system for WordPress

Much like a type scale, a spacing system enforces consistency and simplifies decision making for 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. 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

Dave Whitley 2:21 pm on October 11, 2019
Tags: style-guide, typography   

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

  • Created draft for design documentation
  • Opened draft PR for applying the type scale to 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/
  • WIP text styles are published in Figma

#style-guide, #typography

Lance Willett 5:02 pm on January 31, 2011
Tags: style-guide   

I changed the Make It Better! sidebar ar…

I changed the Make It Better! 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. area from text widgetWidget A WordPress Widget is a small block that performs a specific function. You can add these widgets in sidebars also known as widget-ready areas on your web page. WordPress widgets were originally created to provide a simple and easy-to-use way of giving design and structure control of the WordPress theme to the user. to Custom Menu and added a link to the style guide site. Next step will be to move all the style guide content over here; I’ll tackle that later this week. (Any reason to leave it on WordPress.comWordPress.com An online implementation of WordPress code that lets you immediately access a new WordPress environment to publish your content. WordPress.com is a private company owned by Automattic that hosts the largest multisite in the world. This is arguably the best place to start blogging if you have never touched WordPress before. https://wordpress.com/ rather than manage it here?)

#style-guide

Tracy Cannon 2:54 am on June 25, 2010
Tags: style-guide   

I created a Trac Ticket (http://core.tra…

I created a Trac Ticket (https://core.trac.wordpress.org/ticket/14081) for UI inconsistencies I’ve run across while working on the styleguide.

Please add any you’ve noticed or comment on the ones that don’t need to be fixed. I just needed a place to note the weird things I’ve come across.

#style-guide

Tracy Cannon 2:34 pm on March 18, 2010
Tags: documentation, style-guide   

Style Guide – Work Area

The documentation is up at https://codex.wordpress.org/User:TECannon/UI_Pattern_and_Style_Guide. Feel free to contact me if you want to contribute, and any discussion can take place below as well.

#documentation-2, #style-guide

Tracy Cannon 11:02 pm on March 8, 2010
Tags: style-guide   

Highlights from the short March 4 UI Mee…

Highlights from the short March 4 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. Meeting:

  • Jane is in the middle of last minute 3.0 ui craziness, so there are no big projects going on, mostly cleanup.
  • Not an official project… the dark 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. at the top of the admin screens (using the gray color scheme) doesn’t match the rest of the admin screens, which have that light, open and airy feeling. The “visit site” and “new post” buttons are too low-contrast. We need to lighten it up a little and get those buttons to have higher contrast for 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) reasons. The gray color scheme is the most important b/c it is default. Just do header in a few variations by Tuesday and we’ll see if anything sticks. (JohnONolan & gastonfig volunteered to look at it.)
  • Style-guide: TECannon is still working on the style-guide and will post sections here for discussion.
  • (As of 3/8 I’m not sure if this is still needed.) Need to come up with a button (largeish) to drop in header. “Updates Available!” would probably be the text. It should be high contrast, and would likely live between the site title and the favorites menu (new post dropdown). Upgrade has been changed to Update and the Upgrade SubPanel has been moved from Tools to Dashboard.

And that’s about it.

#style-guide