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

Design meeting notes for April 17, 2019

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

Housekeeping

  • Meetings – Every week we now have 2 triage meetings. If you’ve wanted an opportunity to learn more about how to get involved in moving tickets forward this is a great chance to help out! If you can make one of them we’d love to have you.
    • Monday: core/meta triage. The latest release is focused on and then the oldest tickets. 16:30 UTC.
    • Tuesday: Gutenberg triage. Focusing on oldest issues. 16:00 UTC

Updates

Showcase: @hedgefield

The designs are progressing nicely. They aren’t quite at a stage of soliciting feedback yet, but Tim is making headway working through the good feedback on the previous iteration that was spearheaded by Rich Copping.

Tim’s main iterations are in styling things according to the existing elements and colors, and the page has been shortened without losing feature. If you’re curious you can take a look at the Figma file.

The team had some discussions on a few points, and we can look forward to a formal state next week for review.

Gutenberg phase two: @mapk

Discussion

@CK Lee left us a ticket for feedback on a screenshot user interface for the plugin directory. There’s a screencast on the ticket, and some additional context in Slack on the feedback that’s needed.

Handbook color audit: @estelaris

Estela finished reading all of the handbooks and found 18 mentions of color. A Trello card has been created and @melchoyce wants to work on the color pages for the handbook.

Handbook color pages plan: @melchoyce

Open floor

Nothing specific today.

#meeting-notes

Design meeting notes for April 10, 2019

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

Updates

  • Recovery mode – This has been patched and resolved.
  • Health Check – We have a signoff on the project, and it just needs dev review and commit.

Gutenberg update

Feedback/reviews

  • Showcase – @hedgefield is going to be taking it from the current designs across the design finish line. There’s a relevant Figma file for those who are following along. Feedback so far is that it’s needing to use existing .org patterns. For example header/footer. You can read more by following the Slack conversation.
  • Color docs – The team is looking at rewriting information for this in the handbook. Please drop in and help us plan. We’re going to talk about it next week.

Discussion

  • Design system – Throughout the latter part of the discussion the idea of a design system for WordPress came up. This is nothing new and many folks have raised similar thoughts in the past. This is absolutely worth consideration and discussion in the future as we try to clean up and bring WordPress forward.

#meeting-notes

Design meeting notes for April 3, 2019

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

Housekeeping

  • There is a call for design for the block directory
  • The Navigation block usability testing has post that’s worth reading!
  • WordPress 5.2: High five everyone for the awesome triage hour on Monday to work the issues. There are a few PRs that have come that can are worth reviewing.

Gutenberg

  • New releaseGutenberg 5.4 has been released!
  • Widgets to blocks – One of the focuses for Phase 2 this year is to convert widgets to blocks and reflect that change where widgets are currently used. There’s currently explorations around introducing blocks into the Customizer now. You can checkout a prototype there, and provide feedback on Github as you are able.
  • Gallery images – There are some explorations happening around moving images within the gallery. Soon drag and drop will also be available. Testing would be appreciated!
  • Section block – There are two patches for the default themes to get ready for the section block. If you have time to test that’d be great!
  • Gallery block – The gallery block doesn’t have the option to link to a custom URL like the image block. There’s an issue if you want to take a look.

Improving search results with active plugins

First, there’s a Trac ticket where you can follow the discussion. You can also jump to the point in Slack to follow along. Feedback is wanted.

@hedgefield shared some context:

The main objective was to highlight the plugins you have in a separate section with minimal distraction. Ratings and plugin descriptions etc don’t really matter, you have the plugin already, we just need to highlight that it has a thing that you were searching for

#meeting-notes

Design meeting notes for 27 March, 2019

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

Housekeeping

Next week this meeting will shift time to be +1 hr. Springing forward!

Updates

Gutenberg

@mapk shared that the team has been getting really positive comments on the release of Gutenberg 5.3. Thanks to everyone who has been contributing and testing everything!

There are a few tickets that could use review this week:

  1. The controls for resizing media in the Media+Text block
  2. The resize handle bar for media
  3. The Section block

These three are good tickets to get involved in and test out! They will most likely impact some future design decisions in other areas as well.

One last thing that is a followup on the Accessibility section in last week’s design update post. There are 4 really important a11y issues that we need to keep moving forward.

By the way, for anyone interested @boemedia asked a great question about the process of releasing a new feature in Gutenberg. It’s worth taking a quick read.

Also, Block Manager should be coming to WordPress 5.2 soon!

Site health

Site health is being merged into core now (woo hoo!).

@hedgefield shared some thoughts about the process of getting a design moving and seeing the vision through to the end. You can read more about the discussion on Slack. It led to a good discussion (with some healthy radical candor) on the importance of making sure we take care of our amazing designers who give it their all to see WordPress improve.

In addition, there are a few open design details that could use review.

Redesign of /mobile

There’s a new design listed in Trac. @joostdevalk asked for signoff on moving forward. Thanks to Megs Fulton for the great work done!

#meeting-notes

Design meeting notes for 20 March, 2019

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

Housekeeping

The first week in April this meeting moves like most .org meetings, ahead an hour.

Gutenberg

Gutenberg 5.3 was released! Congrats to all the amazing work designers have been doing!

You can read more about it on the release post. It will also coincide with the release of WordPress 5.2. Some things to point out:

  • Resizing the text and media columns in the Media & Text block is being discussed.
  • For any CSS gurus, @joen has been reorganizing stylesheets. You can see the Pull Requests.
  • The Section block is going to get (or already has) some updates for inner block alignments. This is super tricky but @getdave @kjellr and others have been trucking away on it.
  • There’s research sessions going on this week around the Navigation block. Please jump into the #research channel if you’re interested in helping out.

Feedback and reviews

The Improved Fatal Error Protection

The intention is to give users the ability to access their WordPress admin when a plugin or theme is causing a fatal error. We’ve been asked to give design feedback on:

  • Crafting the email message itself and making sure the user understands what is going on
  • Giving meaningful updates within the admin to help walk through problems

Feedback is welcome! Feel free to jump in and share your thoughts.

Site Health plugin design

The work has wound down. There has been an exploration of what the Gutenberg styling would look like in other areas of the admin. Further work is intended to explore what this could look like.

As an interesting note, the team chose 16px for the main font size with this plugin. Much of the WordPress admin uses 13px, but from an Accessibility perspective that seems to be pushing the limits of what’s reasonable.

—-

As a site note, the team did a Contributor day at Yoast last week, and it went well! The design table had 3 first-timers, and the team gave feedback on about 8 open issues, even one long-dead one about Gutenberg annotations.

#meeting-notes

Design meeting notes for 13 March, 2019

You can read the full transcript of this meeting on our Slack channel.

Housekeeping

Call for component maintainers

There’s a call for component maintainers. If you are interested, make sure you join today’s core chat or catch up via core meeting notes.

Design label changes for Trac

Next, label changes. A while ago, we discussed simplifying the trac design labels. This has now happened! UI-feedback and UX-feedback have now been replaced with needs-design-feedback.

Profile badges

On your profile.wordpress.org you will see badges of the teams you are a member of or also contribute to. If you don’t have one but are a member of this design team, please speak up on Slack as a threaded comment, as we have a feeling some of you awesome designers are missing a badge!

Daylight savings time

Traditionally, we changed the time when Europe did. That would be in 2 weeks. So we change the meeting time from the first week in April. This causes two more weeks of confusion, sorry about that!

Updates

Gutenberg

The block manager needs some design eyes. There’s a brief discussion on the toggles and checkboxes, which you can read in the design Slack channel. If you have anything you’d like to add to the discussion, pleas add your comments to the ticket. The TL;DR of this discussion:

  1. Look into other languages and how longer words might conflict with one another.
  2. Look into RTL languages.
  3. Switch the toggle to a checkbox using an intermediate state as well.

The other Gutenberg topic that needs some eyes is the Section block. Please leave your feedback behind in the Github ticket comments.

Feedback/reviews

Showcase pages

Rich Copping has put the latest version of the Showcase pages mockups into Figma. We’d encourage you to take a look and give your feedback on the mockups in Figma. If you don’t have access yet, please leave a comment in the design channel on Slack or in the comments of this post.

Redesign/mobile

If you have time, please take a look at the redesign for mobile, it could still use additional feedback.

Discussions/open floor

@tinkerbelly was trying to get font management in Figma fixed, but due to the account we have been donated, we’re not able to share fonts. So if you want to work within the WordPress Figma account and don’t get notifications of missing fonts, please download the SF Pro font via Apple, that’s the one we use to standardise prototypes and mockups.

If you’re keen on research, please give your preference via Doodle on joining the site research walkthrough. Note that filling out the Doodle doesn’t commit you to showing up.

#meeting-notes

Design meeting notes for February 27, 2019

Thanks to everyone who attended this week’s meeting. If you couldn’t attend or want to read back what was said, here are the meeting notes for you. You can also read the full transcript on our Slack channel.

Housekeeping

In March we will triage Gutenberg design tickets. If you want to help move things forward, please join us for half an our in our Slack channel on next monday 17:30 UTC.

Updates

WordPress showcase

Showcase designs have moved to Figma, thanks to Rich Copping. Feedback and notes are welcome, but do note that the last round of feedback hasn’t been iterated on as we write this down.

Mockup for the new WordPress showcase pages

Site Health

@hedgefield is still working on this, in collaboration (amongst others) with the accessibility team.

Dashicons

On short term, there’s help needed getting new dashicons in 5.2. This doesn’t concern the bigger picture of the future of dashicons that was discussed recently. @empireoflight says there’s no update on that front, although more feedback would be welcome.

Gutenberg

@mapk updates us on Gutenberg phase 2. Currently, the team is looking to integrate a block management system. Gutenberg needs a way to organize blocks so it doesn’t get out of control. There’s also testing needed on the Classic (Legacy) widget block. This is important to ensure that non-converted widgets have a home.

There’s also a proposal on the navigation menu block design. Please go check it out if you haven’t read it yet.

Calls for design and feedback

Mockup for navigation on make.wordpress.org

The marketing team requests to implement Navigation Change at make.wordpress.org. Design wise, we’re looking for volunteers to mockup what this could look like, to move the ticket forward.

Redesign/mobile

The page proposals for mobile need design / UX feedback. If anyone wants to take a look and give their feedback, that would be appreciated.

Concerns about range sliders

Read this Slack thread if you want details, but in short, there are some concerns that the range slider as used in the blockeditor (for instance when selecting the number of columns, or the size of the dropcap) isn’t as accessible as it could be. As this could turn into a long discussion, @karmatosed suggests opening a Github issue for this.

Reminder for admin email

The idea is to have a reminder to make sure your email is correct for admin. Please leave feedback on the Trac ticket if you have thoughts on this.

Other discussion points and open floor

@tinkerbelly has a short remark on the use of different fonts in Figma. The suggestion is to keep it simple and therefore use one typeface consistently throughout all designs. @boemedia suggests using Comic Sans, but apparently that’s not one of the options.

Last topic tonight is documenting workflows for the design team. @karmatosed has made a start on writing out some of the processes the design team follows. It’s basically nothing new, but the main goal is to surface what we do as a team. Please leave your thoughts on this in the Google ‘work in process doc.

#meeting-notes