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 July 3, 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 Design Updates

@kjellr started by sharing @karmatosed’s recap of the Gutenberg contributions that happened at WCEU.

Kjell also updated the team on some initial work happening in regards to expanding the Gutenberg editor beyond the post content, noting that this is a big step towards full-site editing.

Also shared that block reordering animations have just been merged in. 🎉

Feedback was requested for the following issues:

Open Floor

UI for adding classes to content

@joyously proposed the discussion of the possibility for themes to add UI to the editor for adding classes to content. After a lengthy discussion, the team agreed that it would be best to open a new GitHub issue and continue the conversation there.

@estelaris followed by sharing that documentation work is happening for the redesign of the new HelpHub. The goal is to come up with a flexible template that can be used in other languages besides English.

#meeting-notes

Design Meeting Notes for 26 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 @karmatosed

Updates

Gutenberg 6.0@kjellr share an update on Gutenberg 6.0 being released this week! 🎉This release features predefined layout options in the columns block placeholder, an inner container on the group block to make theme styling easier, grayscale block library brand icons, and a darker overlay scrim.

WCEU Contribute day@kjellr shared contributes by design contributors at WCEU. You can see examples on a previous post, and usability test videos will be shared soon.

👀^ Feedback is welcome on this to nudge it along.

Gutenberg upcoming@karmatosed is working on a settings pages for the Gutenberg plugin, improved interaction with nested blocks is very close to wrapping up, and @kjellr is working on improvements to tips. Updates coming soon.

@afercia requested a review of Feature Image dialog does not follow the dialog pattern. In Slack the team discussed the issue and provided feedback. The results of that discussion were shared into the Trac ticket.

Open floor

N/A

#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

Design meeting notes for 29 May, 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

Gutenberg 5.8 was released! Yay! @mapk noted that this release includes some performance improvements along with some really cool features. He also asked attendees to look into some relevant pull requests in GitHub:

He invited everyone to try out Gutenberg 5.8 and play with the new widget-block areas screen, found on the Gutenberg plugin wp-admin sidebar menu.

There’s also a new proposed flow for column layout suggestions. @kjellr prompted everyone to offer feedback.

Block directory

There’s new updates on the block directory by @melchoyce. @mapk noted that there’s a new map of the experience flow, and lots of sketches that could use feedback.

Discussion

Font sizing increases

@hedgefield shared how at Yoast they sometimes have had to deviate from Gutenberg’s default styling due to the default font size being too small for them to accommodate several heading levels, so there’s been talk about the possibility of raising the default font size in WordPress.

The team discussed different font size options and what would be the best choice considering accessibility and internationalization. There was consensus around the idea of trying out different options on Figma mockups or via the browser’s web inspector. @hedgefield will try these suggestions and report back next week.

Figma organising

There’s agreement on some things we can do to better organize the Figma libraries:

  1. Splitting one library into a few smaller libraries.
  2. Component naming: looks like mirroring the code naming convention is a good path forward, e.g. “TextControl”.
  3. Establishing an organisational structure for components.

As for component naming, @drw158 proposes just adding a space so it’s more human readable, e.g. “Text Control”.

@drw158 and @tinkerbelly will be volunteering to move this initiative forward in the next week or two.

Open floor

Block-based vs. inline color controls

Seeing that there was time left in the meeting, @kjellr added this discussion topic that was initially raised by @paaljoachim. The team agreed to create a text level color issue on GitHub to further explore this idea.

#meeting-notes

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

WP5.3: Open call for tickets

If you have a ticket that you would love to see focused in this release, please leave a comment at the open call.

Updates

Gutenberg updates

  • Leave your thoughts around IA or layout for the Edit Image block placeholder on the corresponding ticket.
  • Today, Gutenberg 5.7 was released! More than 48 contributors participated in this release. Find out what’s new.

The Gutenberg block directory

The past two weeks, people involved in this project have been focused on research, especially competitive analysis. The team is thinking about exploring breaking the project down into multiple steps:

  • Discovery of blocks through search
  • Previewing a block
  • The installation process
  • Loading a page with missing blocks (we already handle this, but it’s not connected to re-installing or re-activating)

If anyone’s interested, please help review the competitive analysis issue and leave any thoughts you have, or post any examples you can think of. @iviolini and @melchoyce will write up a recap before the end of this week.

Discussions

Sharing libraries in Figma

@tinkerbelly would like to discuss a few things related to Figma libraries, starting with the Primary Components Library.

This library (that used be called WP5.0 library or similar, has grown organically while elements were added on an as-needed basis. The result is that it’s sort of become a messy array of disconnected pieces.

Sarah suggests splitting this library into three:

  1. Foundations → colours, type styles, icons, spacers, etc… basically anything design-token-y
  2. Components → smallest UI components (buttons, inputs, checkboxes, etc), directly 1:1 with @wordpress/components
  3. Patterns → larger patterns made up of individual UI components (blocks, navigation bars, Gutenberg’s sidebar, etc)

If you have additional thoughts or ideas, please leave them in the comments of these notes. There will be a summary post for this particular topic soon where you can leave your ideas as well.

File organisation and naming conventions

There’s not really a good standardisation in naming files and components in Figma. Some examples from our current library:

Some examples from our current library:

  • Core/Publish-Title/Save_Draft
  • 1_New_Post_Shell
  • wrapper/admin-nav/default-state
  • button/blue
  • Icon/More-Options

There’s a short discussion about the approach: Uppercase/lowercase, dashes, underscores or spaces.

@boemedia suggests doing an inventory of what type of files / components we have and work from there. @tinkerbelly would love it if our design library were as close as possible a mirror to the code—having a shared mental model between devs and designers can make it easier to communicate.

So if we look at how the @wordpress/components package is organised: https://github.com/WordPress/gutenberg/tree/master/packages/components/src, there are a couple of points here

  1. It’s a totally flat structure, with all components at the top level. We may want to be more aspirational with how we organise our library for now.
  2. The folders are named using lowercase-hyphens, but the components themselves use UppercaseNoSpaces

If you have thoughts on this topic, please feel free to share them in the comments.

Design table at WCEU

In June, it’s WordCamp Europe in Berlin. There will be a design table at contributor day. But as not everyone will be able to travel to Berlin, it would be nice if people could join remote. This will be an agenda topic for next week, so please join if you have ideas on this!

#meeting-notes

Design meeting notes for May 9th 2019

Meeting agenda

Housekeeping

@karmatosed started with some points of housekeeping.

WordPress 5.2 is out! Congrats to all that helped there.

Next up, there will be an a11y audit design triage Friday at 14:00 UTC. You may notice we’ve had a few lately and this is so we really push through the report from the Gutenberg Accessibility audit. The project board for the issues that have come out of that report can be found here: https://github.com/WordPress/gutenberg/projects/25.

@luke_pettway thanks everyone helping out there.

Updates

@mapk started with Gutenberg updates. Some issues that need feedback:

@hegdefield continued with a WordPress Showcase update:

He processed the few points of feedback on the design from last week and posted another iteration of the design to Figma. The past few iterations have been presented in the marketing meeting too and they were very happy with the result.

It wa agreed the design looks good, and is now ready for dev. Any further tweaking can happen in code during implementation. @Sjardo is standing by to be the dev on this, next step is to create a trac ticket. Super exciting!

@hedgefield also mentioned that the marketing team was doing interactive prototypes in Google Sheets, might be cool for designers to jump in for low-stakes wireframing stuff like that too early in some of these processes.

Needing design

@mapk brought a call for design help from WP HelpHub, @kenshino is project lead. Helphub replaces the codex, lives at https://wordpress.org/support/. HelpHub is the non-dev equivalent of WP DevHub which is https://developer.wordpress.org/

There are some issues logged on their github repo, but the whole project probably needs fresh redesign + UX review. @Ibdz offered to help.

Discussion

Discussion topic: the ‘Needs Design’ label on trac.

Problem: it’s quite big. @karmatosed wants to see if we can pull out good first issues, and maybe also a few ‘featured ones’ each week. Might also be good fuel for contributor days. We want to keep the lists on trac so it doesn’t get stale, so maybe we add as extra tags to help filter and audit once a month.

@hedgefield brings up adding more tiers than just “good first bugs” and “the rest”. “good first bugs” seems like entry level stuff that anyone could solve in a day basically, but there may also be small quick wins that still need a more advanced contributor to look at them. @karmatosed brings up a fair point that we don’t want to ‘grade’ people on their skill, but the exact distinction can be left vague, it’s more a way to leave info for future visitors about the complexity of an issue.

@karmatosed also suggests adding tags for categories of issues: ui/ux/icons/typography etc.

@melchoyce remarks we gotta make sure good first issues are actually easy, often they are more complex than they seem. Boemedia reminded us that there had been talk of adding design TL;DRs to make it easy for people to jump in.

@karmatosed will start by triaging the current list to define some possible filtering categories and we’ll continue discussion next week.

#meeting-notes

Design meeting notes for April 24, 2019

You can read the full transcript of this meeting on our Slack channel. You can also read the agenda for this week.

Updates

Gutenberg phase 2

@mapk just posted a proposal for Widgets-to-blocks UX flow on make/design.

WordPress 5.2 – About page

It’s that time of a release when the about page is thought about. If you’d love to get involved, @melchoyce has already boosted us by adding a lot of the past work to Figma. Feedback on the ticket is most welcome.

Feedback

Is your admin email still correct?

@boemedia created a prototype/user flow for a new screen in the login process, where WordPress validates the general admin email as entered in the settings page. She’d love some design/UX feedback on the prototype. Please read her comment on the ticket and check out the link to the prototype.

Proposal: simplify WordPress Admin Navigation

@lessbloat created a proposal for simplifying the WordPress Admin Navigation. You can check out his early explorations on Trac and give feedback on the ticket. Next steps will be to iterate based on feedback and pull together a working proof of concept plugin for people to test.

#meeting-notes