Design meeting notes for September 18th, 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.

Updates

Gutenberg

Gutenberg 6.5 has been released. Look for an update post tomorrow with details. This is the last full version that will be merged into WordPress 5.3, but please keep in mind that we’ll be working on new improvements weekly in the Gutenberg plugin. This update includes a new social block, border radius changes, changes to the block mover icons, and much more.

We’d love if you’re able to test!

Full site editing

Matias wrote a post about possibilities with the future of Gutenberg + WordPress. Well worth the read.

HelpHub

Estela Rueda shared a Figma design with updates to the Table of Contents page. Feedback is welcome! If you need access to Figma please let us know.

Discussion

  • Andrea Fercia shared a Trac issue related to tab structures not using tab semantics. Discussion is welcome in the ticket 🙂
  • JB Audras brought up a discussion related to extending the timeline for higher contrast form fields and buttons. The discussion related to finding a balance where we can push some changes sooner for Accessibility purposes. The team will followup in Slack with any further points as we seek to figure out what we can ship sooner.

#meeting-notes

Design meeting notes for September 4, 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.

Updates

Gutenberg design update

  • Block patterns – Work is happening to breach into how to organize/design block patterns. This has been a long time discussion, and lot’s of dev-side improvements have been happening. An issue will be created shortly to get the design discussion going.
  • Gradients in buttons – Another Pull Request that needs design review for preset gradient functionality in the button block.
  • Usability testing videos – Last month usability testing was conducted, and the videos from that will be shared as a post in the next day or so.

Discussion

About pages

There’s been a post that proposed creating structure and strategy around the About pages. The goal is to have a smoother process around these pages, and they are an opportunity to showcase great design.

Ideally we could use Gutenberg in future releases to create the About pages for those releases. The obstacles seem to be dev related in terms of time needed. Lookout for a post sharing next steps this week.

WordPress 5.3 design feedback

There are several Trac issues that need design feedback for the next release of WordPress. The first one implements darker form field borders throughout WP-Admin. The second issue proposes some new, more accessible, button treatments. Ideally these should be evaluated together. Some discussion was shared on Slack, and further thoughts can be dropped into Trac.

Block Directory

There’s an issue to discuss where search should live in the block directory. Some additional discussion was shared in Slack, further ideas can be dropped into the Github issue, feedback is absolutely welcome!

Color swatch discussion

A question was raised in Slack related to selecting a color within the Color Settings of a block. When a color is chosen it’s hard to tell what the color is because the checkmark takes up most of the swatch area. In particular this makes it hard to tell if the selected swatch is a gradient. An issue was opened to discuss further.

#meeting-notes

Design meeting notes for August 28, 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.

Housekeeping

There’s a new About Page in every WordPress release. @karmatosed posted an article to discuss this page. Please leave your thoughts in the comments at the bottom of the post. We will discuss this further in next week’s meeting.

Updates

Gutenberg design update

Gutenberg 6.4 was released this week. What’s new?

  • Af few Cover block enhancements
  • A new typewriter experience
  • Circle cropping on images!

And lots more.

@mapk could use some design eyes on the upcoming Replace Image dropdown.

The team is also working on multi-selecting non-consecutive blocks.

For anyone with some theming experience and CSS knowledge, there’s a discussion about whether to use inline styles or classes for gradients. Give your feedback in ticket if this is something you’re interested in!

Weekly Gutenberg ticket triage on Tuesday’s

If you want to help out with Gutenberg design: each week at 17:00 UTC, @mapk organises a triage session in the Design Slack channel.

@shaunandrews asks for feedback around the nav block settings.

Helphub update

@estelaris started gathering requirements from notes and Github and is ready to make mock ups of some templates.
She has some questions about the use of the anchor tag on the title: does it need to be visible? @melchoyce and @shaunandrews say yes, they use it to easily bookmark the url. According to Estela, the docs team is not aware of this use. A short discussion follows, and @itsjonq shows a great example of how this is used on Github. The people attending the meeting suggest proposing this as an alternative to the # that’s now used. If you have thoughts or idea’s on this, please leave them in the comments of this post.

Github shows a link icon when you hover a title

Mobile view issues for Helphub

The mobile view homepage for the helphub has issues, due to the large space that’s taken by the blue search section. There appears to be nothing else on the page. @mapk proposes to look at this site-wide, as other pages have this issue too. We therefore need a broader solution for mobile display. According to Mel Choyce, every instance of the blue banner is a different code base. If you have thoughts on this, please leave your comments here or in the ticket for this issue.

Open floor

Call for discussion around the full screen modal

@shaunandrews would love to see more chatter about the pattern of the full screen modal and its potential use. Read the Slack discussion on this topic and add your thoughts there or on the ticket.

#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 august 14th 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.

Updates

@mapk updates us on Gutenberg developments. Gutenberg 6.3 is out! Including new Navigate/Edit modes, and some major Table block updates. Priorities for Gutenberg development will now be discussed every week in the #core-editor channel, great for anyone wanting to stay up-to-date and lend a hand.

@melchoyce did a new iteration in the block directory mockups that she’d like feedback on. User testing will also be done at WordCamp Brighton this weekend.

@davewhitley points us to the Component Review project, to review all the new UI elements introduced in Gutenberg, and make them generic enough to use in all of WordPress and document them properly.

@hedgefield lets us know that WordPress 5.3 will likely include an update for the Site Health grading, and also wonders whether design could take a look at wordpress.tv, which is becoming a bit dated. Literally, there is no 2019 content on the wordcamp.tv landing page. @karmatosed and @melchoyce ruminate on the pressed-for-time meta team and their priorities, concluding that adding a few tickets with mockups and asking in #meta would be the best approach.

Open floor

@blaidalfo expressed interest in helping with the Figma libraries containing the WordPress components. @davewhitley also contributed some documentation which can be found here. An official list of maintainers will be published soon. If you want in, let us know in #design!

#meeting-notes

Design meeting notes for August 7, 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.

Updates

Gutenberg

@mapk shared that there are new contributors doing amazing work. He highlighted work happening on enabling the option to add gradients on cover blocks and the new Icon block.

Mark also reminded everyone about the ‘Needs Design‘ label and that we need everyone’s help.

Other updates

@drw158 invited everyone to discuss ownership and process for our Figma libraries. We need folks contributing with triaging, managing requests, updating documentation and publishing the libraries.

📢 Anyone interested on helping with this is welcome to raise their hand and mention it in the comments below. We’ll discuss this point again in next week’s meeting.

Open Floor

@ibdz asked for help on a HelpHub issue on GitHub about layout on mobile devices.

@azaozz asked for a final look at the new admin email confirmation that is shown every six months after an admin logs in.

#meeting-notes

Design meeting notes for July 31, 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.

Updates

Gutenberg

Gutenberg 6.2 was released today! 🎉 🙌

@kjellr‘s PR to add additional borders to nested blocks is now merged and slated for the 6.3 release.

The design approach is changing for the Navigation Block.

Progress is being made on snap-to-grid functionality. Testers are appreciated for this early PR.

There are more contextual help iterations happening, including an intro modal, and a slide-out “Help” panel in the block library.

All of those issues could definitely use some feedback, so feel free to get involved!

Other updates

@assassinateur is asking for feedback and design help on work happening for the Icons Block.

Open floor

@joyously asked how would it look like if the Themes page in wp-admin could display data from a readme.txt file. You can read more and leave feedback here.

#meeting-notes

Design meeting notes for July 24, 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.

Updates

Gutenberg

 Gutenberg 6.2 release is being pushed back a week.

@mapk requested testing on the following PRs:

Mark also added that there’s been a lot of improvements to the Table block.

@melchoyce asked for more feedback on the Block Directory.

Component Audits

@drw158 shared that the component audits he’s been doing are all done. 🎉 He’s been auditing each React UI component that Gutenberg provides while looking for opportunities to improve naming, structure, composition, and visually-related props. Here’s more background on why we’re doing them and as always, feedback and discussion are most welcome.

Discussion

Design team Trello board

@karmatosed has been doing some triage and commented on a few cards on our Trello board. (If you can’t see the board, comment on this thread in Slack to be added).

WordPress style guide in handbook

@karmatosed has been going through and seeing what can be added, removed and/or adjusted on the handbook style guide. She has come up with a list of suggestions and documented them in this spreadsheet. Your feedback is welcome and can be left in the comments of this post.

Open floor

@kjellr shared the unstyled Gutenberg starter theme. This theme is built to easily test unstyled Gutenberg. He’s been working on it and aiming to submit to the Theme Repo later this week so it’s available to more folks.

#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