Design Meeting Notes for 11 December 2019

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.

Housekeeping

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. 

Updates

Gutenberg updates

@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.

Proposal: shapes and colors for Triage and Security badges

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.

Open Floor

@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.

#meeting-notes

#meeting-notes

Design Meeting Notes for 20 November 2019

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.

Housekeeping

Trello and Handbook Organization

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. 

Design Handbook

Improvements in the design handbook show:

  • Focuses area
  • Topics of Interest, using tags/categories and ways to surface
  • The blue box is a bit leaner

@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.

Call for WordCamps

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.

List of Active Contributors

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

Gutenberg

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.

Exploring some of the hover/selection states in Gutenberg blocks

@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.

Block Style System

@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.

Design meeting notes for Oct 30 2019

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!

#meeting-notes

Design Meeting Notes for 23 October 2019

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.

Updates

Gutenberg updates

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.

HelpHub

@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.

Open Floor

New Type Scale for WordPress

@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 Posts
Comparison Settings

Comparison Settings caused some discussion due to the type becoming smaller on large sentences.

Comparison Editor

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:

  1. There is no documentation yet on when or how these styles should be used.
  2. The “label” style which is all caps. Currently, there are headings that use all caps in WP Admin.  The #design team argued against the use of all caps due to accessibility issues. And because we don’t want it to be a blocker for the type scale, it can be removed.

Secondary Button Styles

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.

WordPress Design Guidelines

@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.

Border Radio

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.

#meeting-notes

Design Meeting Notes for 21 August 2019

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.

Housekeeping

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:

  • Gutenberg: join the triage sessions each week and also the ‘needs design feedback’ label.
  • Weekly core triages.
  • Any tickets with 5.3 marked, the next focus for this team on .org.
  • Last but not least, don’t forget there is always meta trac to help in!

Updates

Gutenberg design update

@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.

Open floor

@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.


#meeting-notes

Design meeting notes for July 17, 2019

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.

Updates

Gutenberg Design update

@mapk updates us on what’s been going on with Gutenberg and design:

Patterns API for blocks

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.

Discussion

Design team Trello Board

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:

  • Do people still want to use it?
  • Should we have a meeting where we go through and decide triage style what to do or close?
  • Is it useful?
  • How can it be more useful but still be approachable for new people without reading a manual?

As some things have changed since the design team used the Trello board in the current setup, Tammie suggests the following:

  • Before next week I can move over resources column to handbook
  • Before next week I will also ping each ticket to see if owner wants to do anything with it or unasign.
  • Next week we do triage of board : do not go through and see what we want to do or not. Perhaps have a ‘future maybe’ column?
  • Each week we add in a timeboxed 15 minutes of ‘Trello checking’

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).

Sharing corner

@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.

#meeting-notes

Design Meeting Notes for 10 July 2019

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.

Housekeeping

WordPress User & Developer Survey

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:

  • What is the one thing that you struggle with most in WordPress?
  • What is something you know now about using WordPress that you wish you knew earlier?

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.

Topics for next meetings

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.

Updates

@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.

Discussion

@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:

  • Meta ticket needs updating to have everything linked (there seems to be a lot of unlinked things).
  • Volunteers to take existing data (hopefully linked) and start working?

@williampatton will clarify actions and smaller tasks for design needs on trac ticket and design team has agreed to cross collaborate with themes team.

Open Floor

@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)”

#meeting-notes

Design Meeting Notes for 12 June 2019

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.

Housekeeping

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.

Updates

@mapk cannot attend our #design meeting due to a schedule conflict. Gutenberg updates will resume after #WCEU.

Open Floor

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

#meeting-notes

Design Meeting Notes for 5 June 2019

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.

Updates

Gutenberg phase two

@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.

Block directory

@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.

Discussion

WCEU contribution day tasks

@karmatosed came up with plan based on feedback for the design table at #WCEU.

Morning

  • Welcome and guide to everything you need to know to contribute to design: quick under 30 mins – @karmatosed
  • Split into groups!
  • Gutenberg design group – @mapk
  • Figma library organizing group – @tinkerbelly
  • Possibly a testing group for block directory – by itself or done at the same time as triage facilitated by @karmatosed
  • Triage group: this will be done through Slack to give others an opportunity to join in/be visible – @karmatosed

Late afternoon

  • Get back together and have a chance to talk about what was done.
  • Wrap up.

Participants are free to sit in any group and change in between if they want to learn about something else.

Open floor

Experimental plugin

@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:

  1. Try experiments. Download & install the plugin on a test site to give existing experiments a try. They can be activated on the settings page (`General > Design Experiments`). Each experiment includes a link to a GitHub page for discussion and feedback.
  2. Build and submit your own experiments. There are instructions in the repository for this.
  3. Share ideas. Submit mockups or written ideas, and maybe someone will run with it and build out a prototype.

The use of italics

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

Figma Library Organization

@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.

#meeting-notes

#meeting-notes

Design meeting notes for 22nd May

Agenda: https://make.wordpress.org/design/2019/05/21/design-meeting-agenda-for-wednesday-22nd-may/

Housekeeping

We need more people to take notes so we can rotate on a schedule. @nrqsnchz and @estelaris offer to help, great!

Updates

@mapk brings gutenberg updates:

  • An inner container for the group block https://github.com/WordPress/gutenberg/pull/15210 seems like a big improvement for theme devs. There is some conceptual hesitancy based around the fact that eventually the `entry-content` could be treated just like a “Group” block too. And in that case, there’s no container inside of `entry-content`, so there shouldn’t be one here too. But based on the way theme’s are made today, this makes sense. So we just need to sort it out one way or another. It’s just an empty div.
  • Improved block drag and drop https://github.com/WordPress/gutenberg/pull/15741

@melchoyce brings block directory updates:

Discussion

@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.

  • Maybe we run a few triages (or one) online and that could be open to anyone.
  • We have roving reporters from groups focusing on work who collaborate into a post we then put on make/design.
  • We as a group agree to not make decisions at WCEU but post summaries if one needs to happen and include async input.

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.

  • Shall we split the library into three?
  • How should we name components?
  • What about organising components?
  • Who will moderate consistency (if anyone)?

Add comments to the post and we will discuss next week.

#meeting-notes