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

New Design for HelpHub: Home and Category pages

Since WordCamp Europe 2019, the #docs team is leading the update of the Codex now known as HelpHub. As part of the update, a new design was requested.

This is the first post on HelpHub and will cover the HelpHub Home and the Category pages for desktop. In the coming weeks, WordCamp Valencia will work on the mobile versions of the same pages during Contributor Day. Other posts will be added for Article and WP-Version pages, both mobile and desktop versions.

HelpHub Homepage

The old version is set on a grid that presents several design issues like not being able to list all the topics in each category due to space, created strange white blocks due to the fact that not all categories had the same number of topics, and most importantly, the category icon/title was not underlined for accessibility purposes.

  1. The homepage list allows listing all the topics in each category
  2. There is no blank space in between categories due to the number of articles listed

HelpHub Category Pages

  1. The list will allow topics to show on one page (max two pages, if needed) making it easier to find the article needed by the user
  2. The short/long excerpts will not affect the alignment of as seen on the “before” image 
  3. The links are underlined in the title only, instead of having to highlight the entire paragraph, as seen in the “before” image
  4. There will be no weird grid when the number of topics is not a multiple of three

Before we implement the design, we would like to hear your feedback, please leave it in the comments.


If you want to get involved in the design of HelpHub, reach out in the #docs or #design teams Slack channels.

#helphub