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

Design meeting agenda for Wednesday 29th January 2020

This is the agenda for the weekly design chat on Wednesday, 29 January 2020 at 19:00 UTC

  • Housekeeping
  • Updates from any specific focuses
  • Discussion
  • Open floor

This meeting is held in the #design channel in the Making WordPress Slack.

If there is anything you would like to see added to the agenda, please leave a comment.


#meeting-agenda

The proposed design focus list for 5.4 release

This release the design team have tried a little different process. This iteration started with collaborating to create a list of potential things to focus on for 5.4. As discussed in this week’s design meeting, the next step is to review a proposed list.

To try and focus things a little I have grouped these, ordered first by the projects everyone is focusing on this year. 5.4 sees updates as a focus here with that work starting. Thanks to @mapk for giving the issues for the editor and a review of this post.

Automatic Plugin, Theme, and Major Core Updates

Editor

The things focusing on this release for the editor are foundational experience iterations, which lay the ground for later releases this year.

Buttons

Privacy

Other (needs design feedback)

Other (given feedback so need watching)

Here is a list of things to potentially punt to future releases

If nobody objects these will be punted this week. Punting doesn’t mean they won’t be done a much as not this release.


Reviewing

As you look through the list and comment, it would be great to consider a few things:

  • The release schedule is shorter with beta 1 on February 11th.
  • What looks ready to release and will make the time frame or has to if you think about projects we are focusing on.
  • Leave time with anything larger for testing.

If there is anything you are working on please also add as a comment so it can be added.

#5.4 #release-focus

Design meeting agenda for Wednesday 22nd January

This is the agenda for the weekly design chat meeting on Wednesday January 22, 2020 at 19:00 UTC.

  • Housekeeping
  • Updates from any specific focuses
  • Trello: what is in our inbox?
  • Discussion
  • Open floor

This meeting is held in the #design channel in the Making WordPress Slack.

Leave a comment if you would like something reviewed, discussed, help or something added to the agenda.

#meeting-agenda

Design meeting agenda for Wednesday 15th January

This is the agenda for the weekly design chat meeting on Wednesday, 15th January 2020, 19:00 UTC.

  • Housekeeping
  • Updates from any specific focuses
  • Discussion
  • Trello check: what is in our inbox?
  • Open floor

This meeting is held in the #design channel in the Making WordPress Slack.

Leave a comment if you would like something reviewed, discussed, help or something added to the agenda.

#meeting-agenda

Author Card Block Exploration

During WordCamp US Contributor Day 2019 the team at the design table explored a number of ideas for creating an author card block. This has been explored previously, and may make sense to pick up again if there is interest. This is a followup to capture our thoughts and the directions we explored.

Design concepts

Frontend

Template A

The first template explored a more center aligned concept.

Template B

While the second template was more streamlined, and fit with a design that is seen more often.

Backend

This explores a flow where you choose an existing author profile, add it to the block, and then are able to turn certain features on or off. It’s a simpler flow, and doesn’t allow for custom content, but it may be worth considering as a starting point.

Process

We began by discussing how this block would get its data. We considered pulling from user profiles, as well as an option to add a custom block. We then looked at ways to display the block on the frontend with different styles.

Inspiration

Some examples of author cards on the web:

Proposed block components

  • Author image
  • Author name
  • Description
  • Link to website
  • Social sharing links or social media links
  • Recommended blog posts to read

With all of these components making up the author card block, we thought about ways to break it into smaller blocks. Here’s the first sketch where we considered what these components could be:

Location

This block belongs at the end of a blog post, and is usually set to the author profile writing the post. How useful is it in other contexts? If it’s only for dropping at the end of every post, it may not be a great candidate for existing as a block.

Choosing a design direction

We discussed a lot of directions that could be pursued and started with:

  1. Choose from an existing author profile to populate the block, and/or add a custom author and populate the block yourself.
  2. Offer multiple templates to change the look of the block on the frontend

We used markers and paper to begin with:

And then jumped into Figma to get those ideas into one place:

Next steps

There are still a lot of questions that need exploring, such as:

  • The overall value of the block. Where it goes, how you’d get it to stick to the bottom of blog posts, what other uses it offers.
  • Data source – Should we allow adding custom content, or only pull from author profiles?
  • Template and styling options – How much design tweaking makes sense for store owners, and which options should we offer out of the gate.
  • Additional features – Does adding recommended posts make sense? What about social icons?

Design meeting agenda for Wednesday 18th December

This is the agenda for the weekly design chat meeting on Wednesday, 18th December 2019, 19:00 UTC.

  • Housekeeping: holiday meeting times and team reps.
  • Updates from any specific focuses
  • Discussion
  • Open floor

This meeting is held in the #design channel in the Making WordPress Slack.

Leave a comment if you would like something reviewed, discussed, help or something added to the agenda.

#meeting-agenda

Gutenberg Phase 2 Friday Design Update #41

Happy Friday everyone! The winter holidays are upon us and Core is already planning for WordPress 5.4.

A recent update regarding the 9 Projects for 2019 was posted wherein Gutenberg was a large part, so let’s go over those. The projects listed below are still in progress.

Create a block for Navigation menus

The Navigation block is considered a “stable” feature as of Gutenberg 7.0. There’s a lot of work to still be done, but the majority of the technical aspects are solid. I’m running usability tests on this block this month and will share the results in January.

Navigation block

Themes visually registering content areas

This is an older issue from earlier this year, but includes a lot of what is being explored in full-site editing.

Blocks in widget screen and Customizer

This widgets screen is about ready for testing. It can be turned on in the Experiments in the Gutenberg plugin. While it’s a bit rudimentary, it can be tinkered with.

The Customizer blocks are under development. While we show blocks in the Customizer, we’d like to show them in their mobile responsive view because of the narrow space.

Block Directory

The Block Directory is also a feature listed as an Experiment in Gutenberg. It can be turned on and users would be able to install single-block plugins directly from the Block Editor. When searching for a particular block in the Block Library, if none are found, but exist in the directory, it will be displayed.

A post around the Block Directory guidelines was recently shared. If you’re looking to get your single-block plugin included, find out more by reading that post.

Block Directory

December’s Gutenberg Focus Areas

Riad recently posted the focus areas for Gutenberg in December. These include Block Content Areas, Block Patterns work, and a bit of Tightening Up like gradients, media flows, etc.

Gutenberg 7.0 Released

Yes, it’s been a couple of weeks since I posted this update, so I’m able to include Gutenberg 7.0 which was released in late November. Lots of improvements in there. Make sure to read the notes!

New Color Palette

Dave posted a proposal for a new color palette in WordPress. If you’re fond of colors, check it out and drop some comments.

Easily test Gutenberg PRs 🤩

This is incredible? Have you ever struggled testing Gutenberg PRs before they merge? Was the set up of a local dev environment too much for you? Well look no further! Gutenberg.run is a blessing sent from @aduth.

Just enter the PR number you’d like to test and this will build an installation of WordPress with this PR. No setup necessary. 🥳


Get involved

Now’s a great time to get involved. While the work on this project is intense, it’s always important to glean new perspectives from other WordPress users and community members. Just drop into any of the links provided above to read up on the details and contribute.

Thanks for reading, staying informed, and contributing anywhere you can!

#design, #gutenberg-weekly, #phase-2

Design meeting agenda for Wednesday 4th December

This is the agenda for the weekly design chat meeting on Wednesday, 4th December 2019, 19:00 UTC.

  • Housekeeping
  • Updates from any specific focuses
  • Discussion
    • Consensus on a radius for inputs: raised by @jjj
  • Open floor

This meeting is held in the #design channel in the Making WordPress Slack.

Leave a comment if you would like something reviewed, discussed, help or something added to the agenda.

#meeting-agenda

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