Design meeting notes for January 22, 2020

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 from any specific focuses

Gutenberg

@mapk shared that Gutenberg 7.3 was just released. There’s been a lot of improvements such as the Navigation block, the new Replace Media flow, new full site editing blocks, and a huge performance boost. 

Proposed design focus for the 5.4 release

@karmatosed and @mapk worked on a list of proposed design projects, tickets and issues to focus on for the 5.4 release that is coming up in February. Comments and feedback are welcome. The biggest item in need of design work is the editor, while most of the rest is providing design feedback.

Trello: what is in our inbox?

There was nothing new added to our Trello board this week.

Open floor

A few tickets, issues and PRs in need of feedback were raised. Please feel free to review them and add your comments:

#meeting-notes

The proposed design focus list for 5.4 release

This release the design team have tried a little different process. This iteration started with collaborating to create a list of potential things to focus on for 5.4. As discussed in this week’s design meeting, the next step is to review a proposed list.

To try and focus things a little I have grouped these, ordered first by the projects everyone is focusing on this year. 5.4 sees updates as a focus here with that work starting. Thanks to @mapk for giving the issues for the editor and a review of this post.

Automatic Plugin, Theme, and Major Core Updates

Editor

The things focusing on this release for the editor are foundational experience iterations, which lay the ground for later releases this year.

Buttons

Privacy

Other (needs design feedback)

Other (given feedback so need watching)

Here is a list of things to potentially punt to future releases

If nobody objects these will be punted this week. Punting doesn’t mean they won’t be done a much as not this release.


Reviewing

As you look through the list and comment, it would be great to consider a few things:

  • The release schedule is shorter with beta 1 on February 11th.
  • What looks ready to release and will make the time frame or has to if you think about projects we are focusing on.
  • Leave time with anything larger for testing.

If there is anything you are working on please also add as a comment so it can be added.

#5.4 #release-focus

Design meeting agenda for Wednesday 22nd January

This is the agenda for the weekly design chat meeting on Wednesday January 22, 2020 at 19:00 UTC.

  • Housekeeping
  • Updates from any specific focuses
  • Trello: what is in our inbox?
  • Discussion
  • Open floor

This meeting is held in the #design channel in the Making WordPress Slack.

Leave a comment if you would like something reviewed, discussed, help or something added to the agenda.

#meeting-agenda

Design Meeting Notes for 15 January 2020

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.

Housekeeping

Last week there was a call for both notetakers and triage facilitators. The call is still open, if you are interested, leave a comment after these notes or announce yourself in the #design Slack channel.

Updates

Gutenberg updates

@mapk let us know that the workaround full-site editing is moving forward. Several issues have been identified and Gutenberg designers are reviewing UX flows in relation to these issues. 

Other specific works happening around Gutenberg include usability testing on Columns blocks, more work and design for Navigation block and global styles.

Discussion

@karmatosed open discussion around WP 5.4. And the list created of items the #design team would like to include. The list is very optimistic and needs prioritizing.

We ask people to review the list and let us know in the comments what do you think should be worked out for 5.4.

Open Floor

We reviewed two tickets: #48850: Plugins Screen: introduce “Automatic updates” column/option and #49199: Introduce Automatic update opt-in setting for themes. Both tickets are part of the 9 priorities for 2019-2020.

We talked about options in text and toggles like “on/off”. See examples on the Slack chat. You can leave your thoughts on both tickets. @kjellr is back and retaking the topic of how themes work with Gutenberg. Follow up his experiments on the mentioned repository. In the future, there will be more updates in #themereviews and make/themes if people want to follow this topic.

#meeting-notes

#auto-update, #gutenberg, #volunteers

Design meeting agenda for Wednesday 15th January

This is the agenda for the weekly design chat meeting on Wednesday, 15th January 2020, 19:00 UTC.

  • Housekeeping
  • Updates from any specific focuses
  • Discussion
  • Trello check: what is in our inbox?
  • Open floor

This meeting is held in the #design channel in the Making WordPress Slack.

Leave a comment if you would like something reviewed, discussed, help or something added to the agenda.

#meeting-agenda

Design meeting 8 January 2020

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.

Housekeeping

Being this the first meeting of the year, we are looking for volunteers for 2 specific roles:

  1. Volunteers to be part of the notetaking pool for meetings. We rotate each week to spread the load
  2. We would like to train people to run triage sessions

And we got a volunteer for note-taking: @adampickering

Updates

Gutenberg updates

@mapk announced that Gutenberg 7.2 will come out today. @mapk will be running usability tests for the Columns block.

Also, designers are diving into full site editing!! There is a label in GitHub, so if anyone wants to talk through design ideas, leave your comments there.

Discussion

@karmatosed let us know that there is a repo for wordcamp.org that has a “needs design” label and needs our help. It is a great way to contribute by giving feedback or adding sketches as needed. 

Open Floor

@estelaris presented the first draft for the article page for HelpHub, the prototype shows the use of menus. Feedback was requested on:

  1. Avoid using hamburger menus
  2. The Documentation menu (blue block), is it possible to be expanded? 
  3. The Topics section at the top to help the user find out the information presented without having to scroll down unnecessarily

Feedback given:

  1. Avoiding hamburger menus is a +1!
  2. The menu in the blue block can be expanded, increase the font size and the padding to give eyes space to rest
  3. The topics section is a good solution, try other design treatments for the block
  4. Overall, increase the padding and/or line-height to create white space and do not use many font-sizes
  5. Do not use all-caps for titles

A new draft will be presented to the #design team next week and a P2 is planned after the #docs team provides the final sub-categories to open the design to public feedback.

#meeting-notes

#helphub

Design meeting agenda for Wednesday 8th January

This is the agenda for the weekly design chat meeting on Wednesday, 8th January 2020, 19:00 UTC.

  • Housekeeping
  • Updates from any specific focuses
  • Discussion
  • Open floor

This meeting is held in the #design channel in the Making WordPress Slack.

Leave a comment if you would like something reviewed, discussed, help or something added to the agenda.

#meeting-agenda

Author Card Block Exploration

During WordCamp US Contributor Day 2019 the team at the design table explored a number of ideas for creating an author card block. This has been explored previously, and may make sense to pick up again if there is interest. This is a followup to capture our thoughts and the directions we explored.

Design concepts

Frontend

Template A

The first template explored a more center aligned concept.

Template B

While the second template was more streamlined, and fit with a design that is seen more often.

Backend

This explores a flow where you choose an existing author profile, add it to the block, and then are able to turn certain features on or off. It’s a simpler flow, and doesn’t allow for custom content, but it may be worth considering as a starting point.

Process

We began by discussing how this block would get its data. We considered pulling from user profiles, as well as an option to add a custom block. We then looked at ways to display the block on the frontend with different styles.

Inspiration

Some examples of author cards on the web:

Proposed block components

  • Author image
  • Author name
  • Description
  • Link to website
  • Social sharing links or social media links
  • Recommended blog posts to read

With all of these components making up the author card block, we thought about ways to break it into smaller blocks. Here’s the first sketch where we considered what these components could be:

Location

This block belongs at the end of a blog post, and is usually set to the author profile writing the post. How useful is it in other contexts? If it’s only for dropping at the end of every post, it may not be a great candidate for existing as a block.

Choosing a design direction

We discussed a lot of directions that could be pursued and started with:

  1. Choose from an existing author profile to populate the block, and/or add a custom author and populate the block yourself.
  2. Offer multiple templates to change the look of the block on the frontend

We used markers and paper to begin with:

And then jumped into Figma to get those ideas into one place:

Next steps

There are still a lot of questions that need exploring, such as:

  • The overall value of the block. Where it goes, how you’d get it to stick to the bottom of blog posts, what other uses it offers.
  • Data source – Should we allow adding custom content, or only pull from author profiles?
  • Template and styling options – How much design tweaking makes sense for store owners, and which options should we offer out of the gate.
  • Additional features – Does adding recommended posts make sense? What about social icons?

Gutenberg Phase 2 Friday Design Update #42

Happy Friday everyone! This will be my last update through the end of the year. I’ll reconvene in January again. I wish everyone happy holidays and a wonderful New Year.

It was also decided in the #core-editor meeting that there will be no Gutenberg releases or meetings for the remainder of the year. We’ll pick these back up in January.

Navigation block

While the Nav block has found its way into the plugin, it’s also being iterated upon to improve basic UX interactions.

@karmatosed is exploring the Menu screen in wp-admin which is in the early stages right now. There are mockups ready for design feedback. Please drop in on the ticket and leave your thoughts.

Block Directory

A recent post was written by @melchoyce that really brings together some plans for the next phase of the Block Directory.

Recently merged

Work in progress


Get involved

Now’s a great time to get involved. While the work on this project is intense, it’s always important to glean new perspectives from other WordPress users and community members. Just drop into any of the links provided above to read up on the details and contribute.

Thanks for reading, staying informed, and contributing anywhere you can!

#design, #gutenberg-weekly, #phase-2

Block Directory in WP-Admin: V1

This is an update to the #block-directory project. You can see the first round of concepts and feedback in this previous post. Feedback from that post was used to update the mockups in this round of iterations.


See all mockups in Figma


Components

Building the new Block Directory in wp-admin presents us with a couple opportunities to redesign certain existing patterns, and turn them into reusable components. When we revisit future admin pages, we’ll have these components available to replace the older patterns.

Here’s some updated patterns we can turn into components for this project.

Page Headers

There are tons of pages in the WordPress admin. None of them are consistent.

I’d previously explored a consistent header for admin pages, but it still felt subpar:

When I started working on the Block Directory, I wanted to take another stab at a header that could work across the entire admin. These were roughly based off of Material’s headers, then adjusted and improved to fit our use cases.

Page headers consist of the following elements:

  • The page title.
  • A short description of what this page is and what it’s for, ideally only a sentence or two long.
  • Action buttons on the left (add new, upload, etc.).
  • Meta buttons on the right (help, settings).

Rather that opening Help and Screen Options (now “Settings”) in tabs, we can use the modal component:

This is a more portable approach than the existing pull-down tabs, and also makes the longform help content much easier to read, since the modal constrains it to a much better line-length for readability.

Note: the modal header and panels don’t line up in the mockups due to some conflicts in the Figma files, but should in real life.


List Tables

Y’all, List Tables are as old as dirt. They’ve done a good job for the past decade and whatever, but they could use some modernization. Lists Tables would be a way to bring all of the list actions together into one single container, rather than floating above and below, disconnected from the table. I’ve kept the table items themselves the same, but made adjustments to the header, footer, and external table elements.

List Tables are composed of the following elements:

  • A table heading with optional bulk select checkboxes.
  • Rows, same as the existing list table pattern.
  • A table footer that instead of repeating the header, has meta information (# of pages, previous/next navigation). When items are selected, bulk actions take the place of the navigation:

This is similar to how we handle bulk deletion in the Media admin screen.


Empty States

There isn’t currently a consistent “Empty” State for admin pages (like when you don’t have any posts, pages, comments, etc.). This new component take a stab at one we can reuse for all pages in the future.

Empty States are composed of three elements:

  • A “not found” graphic.
  • Text stating there are no items.
  • An action, like a button, to help resolve that there are no items.

You can see more component documentation for the Block Library in Figma.


Next Steps

Per this 2019 projects recap, the Block Directory is slated for inclusion in WordPress 5.5. Development will hopefully start soon.

In the meantime, if you have a block you’d already like to include in the directory, you can already submit it! Check out this post on Meta for more information.


Thanks to @tinkerbelly for taking my sloppy mocks and making all my one-off elements into reusable Figma components!