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.
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.
Last week there was a call for both notetakers and triage facilitators. The call is still open, if you are interested, leave a comment after these notes or announce yourself in the #design Slack channel.
@mapk let us know that the workaround full-site editing is moving forward. Several issues have been identified and Gutenberg designers are reviewing UX flows in relation to these issues.
Other specific works happening around Gutenberg include usability testing on Columns blocks, more work and design for Navigation block and global styles.
@karmatosed open discussion around WP 5.4. And the list created of items the #design team would like to include. The list is very optimistic and needs prioritizing.
We ask people to review the list and let us know in the comments what do you think should be worked out for 5.4.
We reviewed two tickets: #48850: Plugins Screen: introduce “Automatic updates” column/option and #49199: Introduce Automatic update opt-in setting for themes. Both tickets are part of the 9 priorities for 2019-2020.
We talked about options in text and toggles like “on/off”. See examples on the Slack chat. You can leave your thoughts on both tickets. @kjellr is back and retaking the topic of how themes work with Gutenberg. Follow up his experiments on the mentioned repository. In the future, there will be more updates in #themereviews and make/themes if people want to follow this topic.
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.
Being this the first meeting of the year, we are looking for volunteers for 2 specific roles:
And we got a volunteer for note-taking: @adampickering
@mapk announced that Gutenberg 7.2 will come out today. @mapk will be running usability tests for the Columns block.
Also, designers are diving into full site editing!! There is a label in GitHub, so if anyone wants to talk through design ideas, leave your comments there.
@karmatosed let us know that there is a repo for wordcamp.org that has a “needs design” label and needs our help. It is a great way to contribute by giving feedback or adding sketches as needed.
@estelaris presented the first draft for the article page for HelpHub, the prototype shows the use of menus. Feedback was requested on:
Feedback given:
A new draft will be presented to the #design team next week and a P2 is planned after the #docs team provides the final sub-categories to open the design to public feedback.
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 two things: @boemedia is stepping down as a team rep. She still be active as WordPress contributor. We want to thank her for being a team rep and her work/support.
Second, today is the last meeting of the year. We will take a holiday break and return on 6 January as our first meeting of 2020.
@mapkt reported that due to holiday break, there will be no #core-editor meetings or Gutenberg releases until 8 January.
@mapkt together with @aduth reviewed the complexity behind renaming categories for the Block Library. Words are not easy to find, especially when plugins are already using some words.
@francina asked the #design team if there is anything to be included in 5.4. Ideally within a day or two so a post can go out before the holidays. @karmatosed created a spreadsheet to collect issues/tickets and ideas. @mapk will add any Gutenberg issues and there are already some tickets in trac. If this method of a sheet works, it will be added as a process in the handbook.
The tentative deadline for 5.4. is March, which means we will have about 6 to 8 weeks to work. Not all the items posted on the list will make it, but it will be good to start tracking them. A few suggestions to be considered now are background support to columns, color and typography items.
@shaunandrews mentioned the proposal to simplify the block selected state and @melchoyce would like to add both or at least of @davewhitley’s proposals on a new color palette for WordPress and a consistent spacing system. Another item would be around improving the selected/focus states for blocs.
@michaelarestad brought up the site navigation when editing full site. The main goal is to have a one-cohesive, tightly-coupled system rather than multiple disparate interfaces.
The post will come up next week, so we have until Friday 20 December to add items, proposals or ideas to the spreadsheet.
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.
Although not everyone celebrates the same seasons or holidays, @karmatosed suggested to let next week’s 18 December be the last meeting of the year and meet again on 8 January.
To recap, next week will be the last regular triages and meeting of the year to reconvene in the first week of January. And if you don’t take a break, feel free to triage at any time. Leave a comment if you don’t agree or have another suggestion.
@mapk announced that Gutenberg 7.1 was released. A new feature is the Welcome Guide to replace the Tips for New Users. To read more about the new release, read here.
@ibdz gave an update on team profile badges. He chose the badges for Triage and Security. He did some research about unique color selection for those badges, sorted out from current badges. After matched those colors in the color wheel and chose some unique colors. See the images below:
Proposed new badges for new and upcoming badges. The shapes were selected from Dashicons that represent the teams. There are 3 shapes x 3 colors for each team.
Please leave your feedback in the comments. A meta ticket will be open for the change of color in the Security badges.
Redoing the colors for all badges feels like a good progression for this work. @ibdz and @melchoyce will collaborate.
@levinmedia brought up the Figma WordPress/components library that needs updating to current 5.3. @karmatosed mentioned that we have a process to update WordPress components.
@levinmedia finds the proposals page a bit formal for updating the components to match what already exists. If not proposing anything news, he suggests that the best approach might be to update components directly on the components page without publishing. Then, prior to publishing, enlist people that are familiar with Figma and the components to review and ensure they’re an accurate representation of what’s in code and adhere to Figma best practices.
One thing to keep in mind if we copy or build updated components on the proposals page, existing components will not be linked anymore. When the new, updated components are published, the existing ones that are already in use won’t update. They’d have to be deprecated. Old components won’t vanish from an existing design, but they would need to be manually updated. Expect a make/design post to expand on this.
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.
Trello and handbook changes are rolling out. Props to @michaelarestad who dove right in with a new page for full site editing! Because this is a work in progress, he expects comments and issues that can help improve it.
Improvements in the design handbook show:
@karmatosed has a question regarding the “Calls for Design” as it exists on the menu bar. Since it hasn’t worked as well as our Trello board for soliciting work, would it be better if we move it to “Topics of Interest”, swap it out of “Focusses” pages or update the “Calls for Design” page? Please add to the comments as we will revisit the item next week.
If you are attending or running a WordCamp, particularly a design contribution day, it would be great to call it out in advance in the make/updates post each week. And feel free to post agenda/notes or requests in the #design Slack channel.
This topic is out of order from Slack chat. @karmatosed asked how others will feel to maintain a spreadsheet of active contributors that help with design to add badges to their profiles. A11y has this and they review it from time to time. The list could be linked in the handbook for easy access and to allow people to add themselves. Add feedback in the comments.
Updates were given by @mapk. The focus area for this month is highlighted here:
Great news from today’s chat #core-editor revealed that the Navigation block is super close.
@mapk is pushing to get text color features moving as well. There is already a PR on text color features by @jeffreycarandang. At the moment is blocked by another issue related to RichText, but from a design perspective, it’s on track. The plan is to bring the issue up to the a11y team’s bug scrub to get their feedback.
Another PR that is close is the “Replace Media”. It should resolve some media replacement confusion and be more explicit.
People can leave comments on any of the mentioned PRs or check out the label Needs Design Feedback in GitHub.
@shaunandrews posted an experimental mockup that could use more eyes. See video
Hold off any feedback or comments as a post in GitHub issues with context and more mockups will come later. If anyone wants to get involved, reach out to @michael-arestad.
@itsjonq resumed a proposal to an issue on WordPress/Gutenberg titled “Block Style System”: There is a gap within the system + ecosystem. It’s quite difficult to get Gutenberg blocks x themes to play nicely with each other. Styling essentially relies on CSS overrides upon overrides when you use Blocks libraries (e.g. CoBlocks), that has its own set of isolated styles so now, you’ll need to write custom CSS to override that, to match your current site’s overrides
This workflow is common in WordPress, the proposed method is a necessary workaround. Gutenberg + block is giving Builders (block makers, themers, etc…) more control over the UI because it standardizes how UI can be constructed
The idea for the proposal is to find a way to help standardize how HTML/CSS can be written, and more importantly, configured. The Github post goes more into detail. Having this system allows users to actually set global configurations from within Gutenberg, in a non-hacky way, e.g. Colors or Typography.
Here is a demo of an experiment by @itsjonq. The Config system (the various configs/variables that makeup UI elements) can be defined by a theme, and overridden via Gutenberg. UI built or rendered by Gutenberg blocks or otherwise, can tap into this Config system. With this, themes, blocks, plugins actually have a way to work with each other. Because they share a foundation. Rather than fight with each other.
@karmatosed would like to know what those building themes and plugins think of this proposal. One block to test would be the “group block”.
Add any comments to GitHub issue or reach out to @itsjonq and if anyone is interested in his very experimental work in progress, follow the code.
Follow up on Slack for more examples of how the Block Style System can be applied and some design jokes.
Don’t forget the triage sessions Monday and Tuesday and follow along on make/design for any posts this week.
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.
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!
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.
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.
Areas to contribute recap
@boemedia asked for a little update this week on ways you can contribute right now. There are a few ways you can contribute right now to call out:
@mapk mentioned that there has been lots of work to help provide inline tips and wants some comments on one specific design recently shared:
A modal that would appear for first-time Gutenberg users and will walk them through a few things.
The discussion was around whether tips are intrusive and have a negative impact on the user when trying to get to the editor since there is data that users close them as soon as they appear. The #design team agreed that it is a good idea to keep on trying things and that inline tips for users should continue with the idea that tips would eventually disappear.
Next @mapk asked for a mockup to illustrate his point in a gradients ticket https://github.com/WordPress/gutenberg/issues/16662#issuecomment-523104772
Next up is a new image format control that offers full-screen-height for images
A new problem was introduced by merging this new control (icon) to the alignment group of icons since it relates to the full-width and wide formatting. But these icons are now all collapsed into a dropdown. This new formatting option can be selected in addition to the other options like full-width. Now we need to offer the ability for users to multi-select options in the dropdown.
And do we show both selections in the toolbar if there are two options selected?
The highlight of the discussion focused on the name, icon, and utility. Since it is “full-height” equivalent of “full width”, @sarahmonster suggested to call it “full-height” instead of “expand to viewport” which is a bit technical. The wording is important because it doesn’t refer to the document’s full-height, but to screen height.
@melchoyce also mentioned that the icon is used as “flip image” in the image editor, so they would need a new icon. There are no plans to request a new icon.
We also agreed that wide/full width belong to sizing and not alignment and that would be a better separation. Under sizing, there could be different combinations: full size, wide, fullscreen, etc. This option would avoid the need for multiple selections.
@nadir requested some design feedback on a PR to allow directly setting a background to Cover and @nadir agreed to implement @kjellr’s suggestion on his last comment.
@blaidalfo was looking for clarification on the workflow with Figma libraries + Gutenberg GitHub repo. He followed the instructions posted by @davewhitley:
https://wordpress.slack.com/archives/C02S78ZAL/p1565201556382200
https://wordpress.slack.com/archives/C02S78ZAL/p1565203150415900
https://wordpress.slack.com/archives/C02S78ZAL/p1565808369103100
@karmatosed mentioned the Project: Reviewing WordPress Components and mentioned that the ideal workflow is being worked on at the moment.
We will continue talking about WordPress Components in next week’s meeting.
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.
There are no housekeeping topics.
@mapk updates us on what’s been going on with Gutenberg and design:
A discussion on language for labels follows, and @boemedia suggests testing designs with other languages besides English. As English is usually super short, and designs tend to break when translating into, for instance, German. @karmatosed suggests creating mockups with other languages too.
Another concern that’s raised by @nrqsnchz is, that he wonders how adding labels to the block toolbar is going to look like, since space is limited.
The design team used to use the Trello board for task management outside of the focus on Gutenberg and tasks not related to Trac tickets.
@karmatosed raises a few discussion points around it:
As some things have changed since the design team used the Trello board in the current setup, Tammie suggests the following:
Once it’s in order we can also open for new ideas.
If you have thoughts about this, please feel free to leave it in the comments section below these notes, or reply on Slack (account required).
@boemedia feels inspired by the design explorations Andy Clarke does for Smashing Magazine. She also recommends reading the book ‘Art Direction for the Web’ that he wrote for Smashing Magazine.
@davewhitley likes to remind everyone of the component naming audit that happens in the Gutenberg repository . If you’re interested in name changes for the component and how they are composed, please hop onto the issues.
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.
There is a call for feedback on the Updates to the WordPress User & Developer Survey. @melchoyce asked if we wanted to discuss any questions as the design team.
Two suggestions by @mapk:
There is also a discussion about whether this is focused on developers or end users, as having both as survey targets make it very difficult to narrow questions.
@melchoyce clarifies that the survey is mostly publicized through WordPress.org and provided a link to data from previous years to guide us in our choices.
@karmatosed suggested we read the data and provide our suggestions as comments and insights as feedback on the post mentioned above.
Another call is to add discussion topics for upcoming meetings. @karmatosed suggested that next week we focus on the Trello board and decide what needs to be done. @youknowriad asked how to access the Trello board.
@PiotrGawinski is a new member and would like to find a small project to get involved with and @boemedia recalled the link for Calls for Design column in Trello.
@mapk let us know that Gutenberg 6.1 was released today! It includes some really cool enhancements with lots of people contributing. @youknowriad gave us some explorations to look through:
@drw158 shared a component audit he’s been working on to clean up the component library as it has grown and exploded to places beyond the editor. The audit is related to naming, structure, and composition, not code audit, so designers at any level can contribute and it is on the React component library, not the Figma component library.
The first issue opened is related to the ButtonGroup and Toolbar.
@dingo_d from theme review team is looking for designers to help create a better preview for themes on WordPress.org, including better-looking demo data. The demo data should be used internally and perhaps theme developers can use it too. For reference, here is the old meta-ticket. The demo should showcase Gutenberg blocks, as an example, see Chaplin Theme.
To clarify the problem, look at Theme Twenty Nineteen in WordPress.org, it has a great theme screenshot, but the “preview” doesn’t look like the screenshot. It is missing elements like logo, nav, cover block, etc. It doesn’t show off the full potential of the theme. To resolve the issue, there is a separate demo site. The XML demo data should be imported using the default importer. There is an .xml for Twenty Nineteen but it doesn’t contain menus or widgets. #meta must add those manually.
For step 2, we would like to have the option to change the presets of the demos data in the previewer, like chose between business/site vs. blog styles (business, portfolio, blogs, etc.)
So far actions go on trac ticket:
@williampatton will clarify actions and smaller tasks for design needs on trac ticket and design team has agreed to cross collaborate with themes team.
@melchoyce shared an opportunity to getting involved with usability testing. And for designers looking for small tasks, there is always the Meta trac. Try to stay away from anything titled “Redesign (big section for WordPress.org)”
