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.
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)”
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.
Meeting was lead by @boemedia
There will not be a Triage or Design meeting next week (17-19 June) due to most members traveling to WordCamp Europe in Berlin.
There may be some #design channel activity on Thursday 20 June during Contributor Day at #WCEU.
Triage will resume on Monday 24 June after #WCEU.
@mapk cannot attend our #design meeting due to a schedule conflict. Gutenberg updates will resume after #WCEU.
We moved to a ticket review https://github.com/WordPress/gutenberg/issues/14744, which @boemedia will comment
@hedgefield reported that the 13xp body text used by WordPress is becoming too small for accessibility reasons. As resolutions and monitors are increasing, most of the web has embraced 16px as the default standard for text. He would like to explore further, perhaps during #WCEU Contributor Day (aka creating a plugin instead of fiddling with the inspector) so we can see where the bottlenecks are.)
For example some columns in the post overview would be fine with smaller text for the less important properties to save space.
@boemedia asked if someone would be available to develop such plugin and @clorith was mentioned. He collaborated on Site Health with @hedgefield.
@azaozz cited the “design experiments” new plugin that could help out. https://github.com/WordPress/design-experiments
@boemedia suggested to open a ticket and if it is not discussed during #WCEU, perhaps could be brought to the table at a later #design meeting.
Next ticket that was introduced by @pbiron https://core.trac.wordpress.org/ticket/44900, will be added to the call for design to be explored during #triage at a later meeting.
@azaozz brought the attention to another ticket that deals with “inclusive design” around user’s name settings. This is a very culturally diverse topic and there is a link to a really good article on w3.org about it. I’ve tentatively set it for WP 5.3, would be great if we can do something for the User Profile screen
https://core.trac.wordpress.org/ticket/6148
Although the topic is an interesting one, we recommended he gather more information as to what are the user needs in reference to name fields and perhaps a discussion with #polyglots is a good start. There is a link from W3.org that discusses the issue https://www.w3.org/International/questions/qa-personal-names
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.
@kjellr let us know that The ability to Group and Ungroup selected blocks was merged in today. Also, temporary “Snackbar” notices have been introduced.
A reminder that the experimental Gutenberg widgets page is live and in the plugin, feel free to leave feedback or follow along.
@mapk would like some more thoughts on category labelling and grouping for blocks.
And finally: @joen’s “clickthrough” PR to help improve nested block interaction is sorting out some technical details, and will land soon.
For further reading on these points, check out Friday’s update.
@karmatosed reminded us of an additional plan to run a usability testing table for Gutenberg at WCEU, as planned at the WCUS table last year.
@melchoyce mentioned there are lots of chatter going on regarding block directory and the comments are helping updating designs in Figma. A new post on this will be up at the end of the week, in the meantime, keep commenting on GitHub.
On the same topic, @marybaum volunteered as a copywriting organizer to audit all the new strings. The audit will be helpful when handling the temp strings to dev, as G 5.2.2. is expected to launch by June 25 or 26. And testing of the new strings should start by early July.
@karmatosed came up with plan based on feedback for the design table at #WCEU.
Morning
Late afternoon
Participants are free to sit in any group and change in between if they want to learn about something else.
@kjellr developed a plugin that will allow us to experiment with designs. Figma is great for making static comps and simple prototypes. Trac is great for getting polished code published. But as a design team, we don’t have a great place for work that lies in between those two poles. This plugin + repo is a place to try out half-baked ideas in the context of WP-Admin
It works as a plugin – download & Install it – and can be used to:
As designers, we are exploring how to build a better text hierarchy for WP-Admin and Gutenberg.
Today we discussed italics and @kellerj mentioned a ticket with examples as to why Avoiding italic text is better for accessibility and readability and there are also talks about changing the use of italics in Gutenberg.
Our next steps are to define when the use of italics is appropriate – @melchoyce and to get a definite consensus on the text treatment for help text underneath form fields
@drw158 gave an update on the library organization in Figma and they are almost done with all of the base UI components in WordPress/components.
Feedback and evaluation would be great (accuracy, consistent naming, constraints testing, etc). Next documentation will be added and deprecate the existing libs and publish new ones. @karmatosed mentioned that deprecated links need to be fixed or relinked also in the handbook.
Icons from dashicons GitHub have been added and there should be a new library called ‘WordPress Meta’ for Meta components in Gutenberg.
Agenda: https://make.wordpress.org/design/2019/05/21/design-meeting-agenda-for-wednesday-22nd-may/
We need more people to take notes so we can rotate on a schedule. @nrqsnchz and @estelaris offer to help, great!
@mapk brings gutenberg updates:
@melchoyce brings block directory updates:
@karmatosed wants to get a head start on the WCEU contributor day, starting with how we include those who won’t be there on the day.
The concensus is we are not convinced synced remote contribution would really work that well. If people feel left out perhaps there is a better way, like getting remotes to work on some specific task and have someone report on slack the goings-on.
Making sure mentoring happens for new contributors that are on-site is important too. More discussion in the coming weeks.
@sarahmonster is taking point on reorganizing the Figma library. https://make.wordpress.org/design/2019/05/17/discussion-how-do-we-organise-figma-libraries/ Feedback is welcome.
Add comments to the post and we will discuss next week.
