Welcome! This all-volunteer team needs designers of various kinds. See our handbook and drop into #design once signed up for volunteer opportunities.
Our vision is to be the go-to resource for design for other teams across the WordPress open source project.
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.
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 readingThis is the agenda for the weekly design chat on Wednesday, 29 January 2020 at 19:00 UTC
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.
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.
The things focusing on this release for the editor are foundational experience iterations, which lay the ground for later releases this year.
If nobody objects these will be punted this week. Punting doesn’t mean they won’t be done a much as not this release.
As you look through the list and comment, it would be great to consider a few things:
If there is anything you are working on please also add as a comment so it can be added.
#5.4 #release-focus
This is the agenda for the weekly design chat meeting on Wednesday January 22, 2020 at 19:00 UTC.
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-agendaThis is the agenda for the weekly design chat meeting on Wednesday, 15th January 2020, 19:00 UTC.
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.
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.
Frontend
The first template explored a more center aligned concept.
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.
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
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:
We used markers and paper to begin with:
And then jumped into Figma to get those ideas into one place:
There are still a lot of questions that need exploring, such as:
This is the agenda for the weekly design chat meeting on Wednesday, 18th December 2019, 19:00 UTC.
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.
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.
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.
This is an older issue from earlier this year, but includes a lot of what is being explored in full-site editing.
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.
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.
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.
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!
Dave posted a proposal for a new color palette in WordPress. If you’re fond of colors, check it out and drop some comments.
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. 🥳
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!
This is the agenda for the weekly design chat meeting on Wednesday, 4th December 2019, 19:00 UTC.
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.
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
