Design meeting notes for Wednesday January 9th, 2019

@karmatosed leads this first WordPress design meeting of 2019. You can find the full transcript in our Slack channel. The links in the following meeting notes jump straight to where that topic was discussed in the meeting on SlackSlack Slack is a Collaborative Group Chat Platform The WordPress community has its own Slack Channel at

The first topic on the agenda doesn’t have anything incoming. So the meeting starts with two added agenda items: Docs and Site check.

Docs team needs design help with Gutenberg documentation

The docs team is looking for design help with some new GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. documentation resources. They are looking for visual references to the Terms Glossary and to surface some of the contextual states in the editor:

  • General, High-Level UIUI UI is an acronym for User Interface - the layout of the page the user interacts with. Think ‘how are they doing that’ and less about what they are doing. Overview
  • Top Toolbar Overview
  • Main Menu Overview
  • SidebarSidebar A sidebar in WordPress is referred to a widget-ready area used by WordPress themes to display information that is not a part of the main content. It is not always a vertical column on the side. It can be a horizontal rectangle below or above the content area, footer, header, or any where in the theme. Overview (Document/BlockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience.)
  • Block Toolbar Overview (perhaps with Paragraph as its default)
  • Pre/Post Publish Panels
  • Block Inserter
  • Slash InserterUsing Custom Plugins

Some of it will likely include updated graphics from what’s already available through the Gutenberg handbook for designers and developers.

If you want to help out, please leave a note on the card on the WordPress Design Trello Board.

UX and design work for the Site Health Check plugin

A small team, including @hedgefield, is working on developing the health check plugin that’s been around for a while into something really cool that may be merged into coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress.. With this feature, site owners can check how their site is doing in different areas like speed, security etc. and see if everything is up-to-date and working right.

It’s going to need a good look at the design and UXUX UX is an acronym for User Experience - the way the user uses the UI. Think ‘what they are doing’ and less about how they do it. though because right now it’s mostly a page with a lot of words and numbers on it in grey tables.
There are lots of tools there, but we need to make sure people know how and why to use them and will enjoy doing so.

Currently, there’s a need for a good user flow. If you want to help out or collaborate on this project, please comment on the ticket on Github, or on the card on our Trello Board. Feel free to sketch or offer reference material etc.

Open floor

@cathibosco1 asks for help on the Tide team icon. It needs to be implemented across the badges, into the dashicon font etc. Mel Choyce gives some goods suggestions on next steps.

Another open TrelloTrello Project management system using the concepts of boards and cards to organize tasks in a sane way. This is what the team uses for example: card is the ‘Create a website’ on page. @karmatosed asks for the status, but it’s unclear what’s needed next. Josepha Haden is asked to weight in on this and update.

Luke Pettway is trying to find out how to bring accessibilityAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). ( to the design handbook a little more. Currently, there are only links out to the accessibility page, but he feels there’s room for a little more.

Working together across multiple disciplines within the project at an early stage can have a great impact. We encourage this bridge building (also from new contributor @vossisboss, and Tammie suggests giving this time to discuss in next week’s meeting.