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 readingThese are the weekly notes for the design meeting that happens on Wednesday’s. You can read the full transcript on our Slack channel and find the meeting’s agenda here. You can join the Slack channel by following the instructions in our handbook.
Firstly @karmatosed would like to know if we are all OK with the design meeting time staying at 18:00 UTC in the winter. So far it seems so.
Next, @mapk reports that Gutenberg 6.8 is out with a performance boost and some cool new features. A monthly post detailing the next focus tasks will now also be published, with the post for November Gutenberg dev focus being up. Also, there is news about the efforts to support full site editing with Gutenberg.
@drw158 would like some feedback on a proposal to improve the button design that was merged in WordPress 5.3. Looks like an improvement already, but there are some factors to consider. Good discussion was had, results will be posted in the linked trac ticket.
@itsjonq has done work on designing a page header component, something in the Gutenberg style that could be used by folks using the wordpress/components library.
Finally, @boemedia wonders if there will be any remote contribution at this year’s WCUS. @karmatosed will write a post about that later. Everyone that will be at WCUS in person, have fun!
This is the agenda for the weekly design chat meeting on Wednesday, 30th October 2019, 18:00 UTC.
This meeting is held in the #design channel in the Making WordPress Slack.
Leave a comment if you would like something reviewed, design help or something added to the agenda.
Happy Friday! Let’s take a look at some of the design updates going on in Gutenberg recently.
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!
These are the weekly notes for the design meeting that happens on Wednesdays. You can read the full transcript on our Slack channel and find the meeting’s agenda here.
There are not many updates on Gutenberg as Gutenberg 6.8 RC will be ready next Monday 28 October, according to @mapk.
@karmatosed worked through lots of cleanup on the Tightening Up Project Board, it is a great project for people to get involved.
@estelaris mentioned a post published last week regarding the new design on HelpHub for Home and Category pages. The post had very good comments and the changes were incorporated to the HH Homepage re-designed by the team at WC Valencia, lead by @AnaCirujano. The new design will be based on Valencia’s design with a few details added. You can leave your comments on Figma (if you do not have access, please ask in the Slack #design channel.) The plan is to finalize both the Home and Category pages for mobile and desktop this week and present them to #docs next Monday.
@davewhitley shared his proposal for a new type scale for WordPress. So far he has applied the type scale to 3 screens: posts, settings, and the editor. See images below:
Comparison Settings caused some discussion due to the type becoming smaller on large sentences.
The gifs will be added as comments on the post for more visibility. There were questions as to how other languages would be affected by the type scale, for example in languages with long words like German. One solution would be to make the admin menu a little wider to accommodate other languages, but that is a different discussion.
The type scale, if accepted, would be applied to all the WordPress application: WP Admin, customizer, editor, etc.
Another two feedback points from the post that were discussed:
There have been several discussions about the new secondary button and how it looks too similar to text input styles. This needs to be solved in the future. As of now, @davewhitley is gathering good and bad button examples and input fields on a Figma file. There is also the design systems repo, where people can find examples.
@itsjonq created a new site with design guidelines for WordPress with a GitHub included where you can leave comments or issues. The site has support for internationalization and it may be available for WC Tokyo.
There seems to be a concern that border-radii varies quite a bit. All small interactive UI elements should use the same border-radius, we believe this was the result if fast integration and someone must have missed or not accounted for something.
This is the agenda for the weekly design chat meeting on Wednesday, 23rd October 2019, 18:00 UTC. @boemedia will be the facilitator for this week.
This meeting is held in the #design channel in the Making WordPress Slack.
Leave a comment if you would like something reviewed, design help or something added to the agenda.
There’s a lot of talk about Full Site Editing right now with Gutenberg. Let’s take this opportunity to get caught up on the work that is happening. Initially, Phase 2 was about bringing the editor to various sections within the current WordPress interface (ie. Widgets screen, Menu screen, Customizer), and it still is, but Full Site Editing kind of reverses this by bringing the rest of the site into a single unified editing experience. This is a big project that will take some time, thorough design thinking and collaboration.
The future of WordPress was explored in a post recently by Matias Ventura. Key concepts to help shift the editor interactions include:
The majority of the work can be found on GitHub under the label, [Feature] Full Site Editing.
Modes are ways in which people can change the context of their editing experience within Gutenberg. For example, if you’re editing content, the tools available to you in that mode may differ than when editing the layout.
With the introduction of a Navigation mode for keyboard users, and the existing Code Editor mode, it’s important to see how these work within a mode system as well.
Block Patterns are layout patterns. These can be full-page layouts with blocks preset in desired well-designed layouts, or they can be partial layout patterns that can be added to various pages.
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!
These are the weekly notes for the design meeting that happens on Wednesday’s. You can read the full transcript on our Slack channel and find the meeting’s agenda here. You can join the Slack channel by following the instructions in our handbook.
Gutenberg 6.7 was just released. Lots of bug fixes, a few experiments, and button gradients.
@mapk shared priorities for this week, feedback is :
During the chat @itsjonq brought up a discussion about storybook, which is a UI development environment. It’s a bit dev heavy, but for those interested you can learn more on the Storybook site. Q shared a great example of a date picker.
Q received some wonderful feedback last week about the importance of adding internationalization to the guide. It’s now been updated to support multi-lingual. You can checkout the starter Japanese one.
Anyone who is interested can reach out to become a contributor on the project. Just let @itsjonq know.
@mapk would like feedback on whether we should state “Gutenberg version” or “Block Editor” version. Feedback would also be helpful on the best place to put that.
@nrqsnchz would love feedback on an issue about making a Gutenberg tutorial from the default Hello World post.
@joyously shared an issue with select dropdown arrows having some visual issues. Slack link. A great reminder that during RC it’s helpful to test as broadly as possible. If you’re able to test that’d be awesome!
This is the agenda for the weekly design chat meeting on Wednesday, 16th October 2019, 18:00 UTC.
This meeting is held in the #design channel in the Making WordPress Slack.
Leave a comment if you would like something reviewed, design help or something added to the agenda.
Since WordCamp Europe 2019, the #docs team is leading the update of the Codex now known as HelpHub. As part of the update, a new design was requested.
This is the first post on HelpHub and will cover the HelpHub Home and the Category pages for desktop. In the coming weeks, WordCamp Valencia will work on the mobile versions of the same pages during Contributor Day. Other posts will be added for Article and WP-Version pages, both mobile and desktop versions.
The old version is set on a grid that presents several design issues like not being able to list all the topics in each category due to space, created strange white blocks due to the fact that not all categories had the same number of topics, and most importantly, the category icon/title was not underlined for accessibility purposes.
Before we implement the design, we would like to hear your feedback, please leave it in the comments.
If you want to get involved in the design of HelpHub, reach out in the #docs or #design teams Slack channels.
