Design meeting notes for April 1st 2020

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. You can join the Slack channel by following the instructions in our handbook.

@karmatosed started off with the announcement that @estelaris has been chosen as a new team rep for the design team! Congratulations! She will take on such responsibilities as facilitating team meetings, managing our task inbox and triage, and keeping everyone up-to-date on what’s happening in WordPress design.

Next, @mapk updates us on Gutenberg. WordPress 5.4 dropped recently which includes a bunch of neat Gutenberg improvements:

  • Default fullscreen mode.
  • New blocks: Social links block, Buttons block.
  • Inline text color change.
  • Gradients for Cover block and Buttons block.
  • Latest Posts now has featured images.
  • Color options on Group and Columns blocks.
  • Block breadcrumbs.
  • MOBILE: Toolbar stays on top.
  • Easier image sizing in Gallery.
  • Table block captions.

The focus for Gutenberg development in April was posted and includes:

  • Full Site Editing: Continue improving the Edit Site screen and blocks
  • Global Styles: This will be a big one this month (support in blocks and UI)
  • Updated Inserter UI to support patterns and blocks
  • Updated Navigation/Menus screen
  • Continue G2 iterations

Then, @ibdz chimes in with an update on the Figma documentation for the Handbook. This is intended for new contributors to understand our process of designing in Figma. If you have experience with Figma, please leave your feedback in this doc. We will review next week and then put it in the Handbook.

Next, @audrasjb asked us to review the design of the automatic updates feature plugin, in order to get it ready for a merge proposal. More information can be read in this Make post.

Finally, @ibdz spots a tiny bug in the Handbook and @paaljoachim links to a small change to the block toolbar for review.

#meeting-notes

Design meeting agenda for April 1st 2020

This is the agenda for the weekly design chat meeting on Wednesday, April 1st 2020, 18:00 UTC

  • Housekeeping
  • Updates from any specific focuses
    • Status of Gutenberg design work
    • Update on Figma documentation
  • 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

Gutenberg Phase 2 Friday Design Update #47

Howdy and happy Friday, everyone! How is Gutenberg coming along you ask? Version 7.8 was just released on Wednesday and focused mostly on the new UI refinements. This release included:

  • Adds a current menu class to the Navigation block.
  • Adds a block outline when interacting with the block toolbar.
  • Polish around some icons.
  • Polish around the Date Picker.
  • and more…

Full site editing

Full site editing has seen some more design work recently. The extra effort reexamining the UX and having multiple people review design work is paying off! I’m super impressed with the recent work being done in light of other site building software I’ve been testing.

Placeholder blocks
Currently, templates need some way to show where certain blocks would exist, without necessarily showing actual content in them. Thus, we’ve been exploring placeholder blocks for many of the Post blocks like: Post Title, Post Author, Post Date, Post Comments, etc. These are being refined in this PR. https://github.com/WordPress/gutenberg/issues/19256#issuecomment-604765696

A few UX flows are ready for development. How exciting!

Block Patterns

Patterns took a bit of a pivot recently. Figuring out imagery to include in the software is difficult. Do we want pictures of mountains? Or maybe natural patterns? Cars? We’re not settled on this. So rather than holding up our patterns, we’re working to build a few really nicely designed text-based patterns for now. These patterns should be customizable by themes, and not include custom CSS that makes for a difficult integration into websites.

New icons

There was a recent PR submitted that include several new icons that conform to the new G2 UI and the new icons being implemented throughout the interface. https://github.com/WordPress/gutenberg/pull/21209


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

Show and tell meeting for Wednesday, March 25th

This week something different is going to happen and instead of the weekly meeting, there is going to be a social zoom show and tell at 20:00 UTC. The format of this is as follows:

  • Greetings and welcome: a chance for us all to say hi.
  • Sharing time
    • @joen will share what is happening with the new iterations on the Gutenberg interface.

You’ll noticed there is only one thing lined up to share, that’s where you come in! Do you have something you are working on to share, it can be Gutenberg, core, meta or even a demo of something cool.

Maybe it’s something you want feedback on that you are contributing, or perhaps it’s something you are working on and would love to bring into the project. Now is your time to share! To share something, just add a comment here and you’re on the agenda!

I am really looking forward to this new format and I hope everyone else is. The video link will be shared in #design on Slack just before. Make sure you download zoom before. There will also be a recording, posted so you can watch async if unable to make the time.

#agenda #show-and-tell

Gutenberg Phase 2 Friday Design Update #46

I hope you all are staying safe out there in the world today! This week in Gutenberg Design has several things going on. Let’s address them below.

Full site editing

Overview link: https://github.com/WordPress/gutenberg/issues/20791

Multi-entity saving has an interesting prototype uploaded just yesterday.

Multi-entity saving in sidebar

Or another take on it in a dialog modal.

Multi-entity saving in modal

I ran a short Twitter poll that asked how people would like to be informed about saving certain parts of their site. Based on those that answered the poll, the preference for a multi-editing save at the end of all their edits. We don’t use Twitter polls to direct our design decisions, but they can help inform them.

Lots of discussion and explorations are continuing to go into the Toolbar in the Editor. This particular mockup helps convey where the designs are leading currently.

Global styles

Overview link: https://github.com/WordPress/gutenberg/issues/20331

The global styles minimum viable product (MVP) includes some basic elements that will help anyone edit their styles across all pages/posts. These elements include: font-family, font-scale, line-height, and link colors. This issue defines how this may look: https://github.com/WordPress/gutenberg/issues/20367

Global styles in sidebar

Block patterns

The block pattern work is already included in the current plugin right now as an MVP. We’re working to add more patterns that are great for common layouts that many can take advantage of. Once more patterns are added, work will continue on the Block Library to include them there as well.

Testimonials pattern

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

Design Meeting Notes 18 March 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. You can join the Slack channel by following the instructions in our handbook.

Housekeeping

Spring forward begins next week! We are also looking for nominations for design team reps, nominations will close on 27th March.

Updates

@mapk mentioned a list of items that need focus to finish the full site editing project. If you are for looking into contributing with your own design, reviews or drop in any feedback, there is also our Project Board.

Open Floor

@joyously requested a review of the forums page as it needs a new design to make it easier for users to navigate.

@notlaura checked with the design team if there are any specific points that need to be addressed by the CSS audit of wp-admin, as discussed in the #core-css team

Below are some tickets to leave comments and recommendations, or drop by the @core-css meeting on Thursdays at 10:00 pm (UTC+01:00) on Slack

@ibdz would like to add Figma resources to the Design Handbook and more advice for new contributors who want to get involved. @mapk and @karmatosed to draft a post to say what we are doing and propose opening the design flows.

Design meetings are:

  • Core/meta triage: Monday 17:30 UTC
  • Gutenberg triage: Tuesday 17:00 UTC
  • Design Team: Wednesday 19:00 UTC

#meeting-notes

#meeting-notes

Design Meeting Agenda for Wednesday 18 March 2020

This is the agenda for the weekly design chat on Wednesday, 18th March 2020 at 19:00 UTC

  • Housekeeping
    • Notetakers and triage volunteers
  • Call for Design Team Reps
  • Updates from any specific focuses
  • Discussion
  • Open floor

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

If there is anything you would like to see added to the agenda, please leave a comment.

#meeting-agenda

Call for design team rep nominations

The design team has never had an open call for reps, so let’s change that! Currently, I am the only team rep and this is a great opportunity to bring someone else on board. This process is heavily inspired by the community team. Since our team is still small, two team reps seem like plenty.

What does a team rep do?

In the WordPress open source project, each team has one or two (or more!) representatives, abbreviated in reps. The role goes way back to 2012 and is an established one across teams. You can learn more about the team rep role here.

A little note, it’s not called team lead for a reason. While the people elected as team reps will generally come from the pool of folks that people think of as experienced leaders, the team rep role is designed to change hands regularly. Similarly, you don’t have to be considered a lead to step into this role.

I would like to suggest we consider a change in our process and after a year change all team reps. That would mean next year both myself and this new team rep would step down. To handover, we can hold nominations a few months before the term ends, to ensure mentoring. For this round, I will serve as a mentor for the new team rep to help get them started.

Here are the main tasks:

  • Ensuring a meeting agenda happens along with notes. We have note-takers who are not team reps and post agendas, so this is co-ordination. The team rep adds agenda items to a shared document.
  • Run the weekly design team meeting in Slack.
  • Write a fortnightly update post for make.wordpress.org/updates?
  • Give quarterly updates on the team when asked.
  • Triage and keep track of the team Trello inbox. This is used to fuel any meetings.
  • Call for new team reps when the time comes at the end of year tenure.

As a team rep, other tasks might fall to you in order to keep the team running, but in general, it’s a support role. On average the estimated time you would need for this role would be a few hours a week. With another team rep though, that time is shared.

This role is open to contributors of any level, not just full-time contributors. Like many good open-source processes, this work is done openly and can be shared. Also, because WordPress is a globally-minded project, if the team rep that is selected can’t make the current time, we can always discuss changing the meeting time.

The process

Taking inspiration from teams that have done this before the suggested process would be:

  • A call for nominations in the comments on this post. Self-nominations are welcome. These will close in on 27th March.
  • After the closing date votes will be made on those nominations for a week.
  • The votes will be tallied, followed up with people, and then announced.

If you want to nominate someone in private, please reach out to me (@karmatosed) on Slack.

Disclaimer: if you get nominated, please don’t feel like you have to say yes! We will add to the polls only the names of the people that are responding positively to a nomination. So feel free to reply with a “Thank you, but no thank you”.

#team-reps

Gutenberg Phase 2 Friday Design Update #45

It’s Friday again! If you’re following along with the Gutenberg releases, you’ll notice that Gutenberg 7.7 was released this week and with it came a newly designed interface creatively named “G2.” 😉 This redesign provides higher contrast, less UI visuals, and new icons including a streamlined and pleasant experience.

I recently shared this interface in a diagram layout identifying the various parts. This file can also be found in Figma.

Figma file: https://www.figma.com/file/WbvD9Z04UZYKwEDlzJtJPg/Gutenberg-Interface?node-id=0%3A1

Figma

Speaking about Figma, let’s dive into this a bit.

If you’re not familiar with Figma, it’s a design tool that allows real-time collaboration. There’s no need to download anything because it lives in the cloud. WordPress.org has an account where the Design Team keeps all our libraries, and where the designers do most, if not all, of their work. It’s open for anyone to join and use.

Figma

In fact, if you’re looking to help contribute to Gutenberg design work, especially in light of the new G2 UI updates, here’s how you might go about finding things.

If you’ve haven’t been added to the Figma account, you can ask for access in the Making WordPress #design Slack channel. Once you’re set up, you can browse the various files for each of the projects in the WordPress.org account. Notice there’s one specifically for Gutenberg.

Inside the Gutenberg Project is a file for G2. This file contains a number of the G2 components used in the new redesign of Gutenberg. It’s still very much a work in progress, but can help get you started quickly. Just copy and paste the parts you need into your own file.

G2 Figma file

Full Site Editing

Most, if not all, issues regarding full site editing have design work posted to them. This is great news! It provides everyone some visuals to talk through. If there are iterations needed, they remain in GitHub with the label “Needs Design.”

The Top Toolbar for full site editing is closing in on a solution. This is going to be the way by which users will navigate through the experience and select individual pages, templates, template parts, etc. for editing.

FSE Top Toolbar

Block Patterns

Block Patterns are also implemented in Gutenberg 7.7. Their current UI is only an MVP, but should help everyone realize the benefit of patterns in the layout of pages and posts. Lots of work is going into providing common patterns and getting this in as early as possible for testing and feedback.

Block patterns

Global Styles

Global Styles are in an MVP stage as well. While not quite yet integrated into the plugin, there is a PR that can be tested.

https://github.com/WordPress/gutenberg/pull/20530

Project Boards

Full site editing: https://github.com/WordPress/gutenberg/projects/35
Block patterns: https://github.com/WordPress/gutenberg/projects/41
Global styles: https://github.com/WordPress/gutenberg/projects/40


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!

#gutenberg-weekly, #phase-2

Design meeting notes for 11 march 2020

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. You can join the Slack channel by following the instructions in our handbook.

As nobody objected, we’ll be moving the meeting time forward one hour starting from the meeting on March 25th, to compensate for Daylight Savings Time.

There is a call still open for triage and notetaking volunteers. Reach out to @karmatosed for core design triage or @mapk for Gutenberg triage if you are interested.

@mapk brings a flurry of Gutenberg news. Version 7.7 is out, and more details about the work on full-site editing were published. It would be great if people could test the new UI and Block Patterns that shipped with 7.7.

@karmatosed proposed a once-a-month video meeting instead of the regular design chat in Slack. It could help people stay in touch in these work-from-home weeks, and offer a bit more loose design hangout. All were in agreement, so we’ll give it a first attempt at the last meeting of the month, which is also March 25th.

@ibdz asks where to find design resources for the new Gutenberg UI (G2) that launched with 7.7, and the Figma resources can be found here, with iterations happening here also. A page in the Handbook as overview of all Figma resources was suggested.

@paaljoachim brought an issue with a suggested improvement for the new fullscreen editor experience. More data about how users are grappling with this fullscreening of the editor by default would be nice to have.

#meeting-notes