Design Meeting Notes for 20 November 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.

Housekeeping

Trello and Handbook Organization

Trello and handbook changes are rolling out. Props to @michaelarestad who dove right in with a new page for full site editing! Because this is a work in progress, he expects comments and issues that can help improve it. 

Design Handbook

Improvements in the design handbook show:

  • Focuses area
  • Topics of Interest, using tags/categories and ways to surface
  • The blue box is a bit leaner

@karmatosed has a question regarding the “Calls for Design” as it exists on the menu bar. Since it hasn’t worked as well as our Trello board for soliciting work, would it be better if we move it to “Topics of Interest”, swap it out of “Focusses” pages or update the “Calls for Design” page? Please add to the comments as we will revisit the item next week.

Call for WordCamps

If you are attending or running a WordCamp, particularly a design contribution day, it would be great to call it out in advance in the make/updates post each week. And feel free to post agenda/notes or requests in the #design Slack channel.

List of Active Contributors

This topic is out of order from Slack chat. @karmatosed asked how others will feel to maintain a spreadsheet of active contributors that help with design to add badges to their profiles. A11y has this and they review it from time to time. The list could be linked in the handbook for easy access and to allow people to add themselves. Add feedback in the comments.

Updates

Gutenberg

Updates were given by @mapk. The focus area for this month is highlighted here:

Great news from today’s chat #core-editor revealed that the Navigation block is super close.

@mapk is pushing to get text color features moving as well. There is already a PR on text color features by @jeffreycarandang. At the moment is blocked by another issue related to RichText, but from a design perspective, it’s on track. The plan is to bring the issue up to the a11y team’s bug scrub to get their feedback.

Another PR that is close is the “Replace Media”. It should resolve some media replacement confusion and be more explicit.

People can leave comments on any of the mentioned PRs or check out the label  Needs Design Feedback in GitHub.

Exploring some of the hover/selection states in Gutenberg blocks

@shaunandrews posted an experimental mockup that could use more eyes. See video

Hold off any feedback or comments as a post in GitHub issues with context and more mockups will come later. If anyone wants to get involved, reach out to @michael-arestad.

Block Style System

@itsjonq resumed a proposal to an issue on WordPress/Gutenberg titled “Block Style System”: There is a gap within the system + ecosystem. It’s quite difficult to get Gutenberg blocks x themes to play nicely with each other. Styling essentially relies on CSS overrides upon overrides when you use Blocks libraries (e.g. CoBlocks), that has its own set of isolated styles so now, you’ll need to write custom CSS to override that, to match your current site’s overrides

This workflow is common in WordPress, the proposed method is a necessary workaround. Gutenberg + block is giving Builders (block makers, themers, etc…) more control over the UI because it standardizes how UI can be constructed

The idea for the proposal is to find a way to help standardize how HTML/CSS can be written, and more importantly, configured. The Github post goes more into detail. Having this system allows users to actually set global configurations from within Gutenberg, in a non-hacky way, e.g. Colors or Typography. 

Here is a demo of an experiment by @itsjonq. The Config system (the various configs/variables that makeup UI elements) can be defined by a theme, and overridden via Gutenberg. UI built or rendered by Gutenberg blocks or otherwise, can tap into this Config system. With this, themes, blocks, plugins actually have a way to work with each other. Because they share a foundation. Rather than fight with each other.

@karmatosed would like to know what those building themes and plugins think of this proposal. One block to test would be the “group block”.

Add any comments to GitHub issue or reach out to @itsjonq and if anyone is interested in his very experimental work in progress, follow the code.  

Follow up on Slack for more examples of how the Block Style System can be applied and some design jokes.

Don’t forget the triage sessions Monday and Tuesday and follow along on make/design for any posts this week.

Design meeting agenda for Wednesday 20th November

This is the agenda for the weekly design chat meeting on Wednesday, 20th November 2019, 19:00 UTC.

  • Housekeeping
    • Trello and Handbook organisation update
    • Call for WordCamps
    • Proposal to create a list of active contributors like accessibility team and use to give badges
  • Updates from any specific focuses
    • Gutenberg design update
  • 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

Proposal to add a focus section to the handbook

During our weekly meeting adding a section to the handbook to show what focusing on was proposed. Beyond keeping track for existing contributors, there is a great deal of history we lose and hard to find context for those starting to join this team. This new section would:

  • Serve as a place to know what is being worked on across the project for the design team.
  • Find out more details about each focus.

How would this look?

There are four components to this:

  • A new section in the handbook called ‘Focus’.
  • The first page of the handbook is a summary page of all current focuses. This would be a simple table linking to each (we could also surface this further up in make/design).
  • The last is an archive link of past focus.
  • A page per focus.

For this, to be current, each person(s) leading the projects would be responsible for keeping that page up to date. Another suggestion could also be to have regular (maybe monthly) checks in the design meeting.

What is a focus

This is where over time we will define this together. To start let’s look at some examples which could fall into ‘Focus’:

  • A11y color/styling work for 5.3
  • Full site editing: as this starts to happen

We need to review as we go here what falls under needing a focus page.

Workflow

Let’s walk through and see what this would look like to add a new focus.

  • Create a new page for the focus and link under handbook section ‘focus’.
  • In that page have:
    • Title of that focus.
    • A description.
    • Who is currently working on this.
    • Timeline if known.
    • Links to all places the work is going on.
    • Space for updates with dates.
    • Note a #tag to be used on make/design so people can follow all conversations.
  • Publish page and put in handbook category ‘Focuses’.
  • Add a link to that page in the front page in Focuses table.

As work happens the person would perhaps:

  • Add a prototype.
  • Add a link to usability testing.

Once the focus is finished:

  • Remove link from the front page Focuses table.
  • Link page in the archive of Focuses page.
  • Remove category ‘Focuses’.

The ‘Focuses’ archive will be ordered by year and a collection of links, including the version number of when released (if they were).

Next steps

If this is going to work, like with the Trello changes being suggested, reviewing is important. Setting a month to trial this seems like a good idea, then iteration can take place.

What do you think?

#organising #handbook

WordCamp Tokyo 2019 – Keep, Burn & Add exercise

At WordCamp Tokyo 2019 we followed last year’s exercise from WCUS and ran a Keep / Burn / Add workshop interactive activity. The idea is to explore from a high-level perspective where WordPress is going for that part of the community and how it could be improved.

Note: these are individual opinions, and as such, it should be considered as first-level research to be read and interpreted, not as an absolute list.

Attendees

❤️ Keep

  • Gutenberg: drag & drop blocks
  • Appearance ⇒ Customize: Live preview
  • Automated SEO
  • CMS allows posting articles without deep knowledge.
  • Autosave feature (version-revision and auto-save functionality)
  • Handy posting from WordPress mobile app
  • Preview on HTML on the editor
  • General Setting allows changing Site Address (URL)

🔥 Burn

  • Customizing themes (4 opinions): difficult to customize, hard to manage, and so on.
  • Too many configuration settings
  • Too many navigation menus
  • Tend to add too many customizations
  • Too many admin notices
  • Installation settings are difficult
  • Plugin management requires manual work on WP dashboard instead of https://wordpress.com/ page: auto-update is not working, version compatibility issues, risks, …

➕ Add

  • Multi-Language support with Multisite (2 opinions)
  • Collaboration with live editing
  • Pre-set essential plug-ins (light-weight)
  • Customizable user interface
  • More Graphical User Interface than text-based UI
  • Easier use on mobile
  • Easier to operate visually (like Adobe Illustrator)
  • Hard to understand the difference between “.com” and “.org” for newbies. While “.org” seem to have more information than “.com”, it will be nice to have in-between information page to fill the gap between “.com” and “.org”.
  • Have thumbnails column with titles on “All pages” and/or “All Posts”.
  • Enhance automated SEO settings
  • A better learning experience for Gutenberg

Thanks to @miekoyo for writing this recap.

Add yours

This is the perspective of the participants at WordCamp Tokyo 2019 Contributor Day Design Table. What’s your perspective?

#wctokyo #contribution-day #workshop

Proposal for design team Trello board organising

As a team, design uses a Trello board for organising tasks outside GitHub and Trac. During this week’s design weekly meeting there was a discussion about how to iterate on this and put it back at the heart of our weekly meetings.

A simpler flowing structure

Here is a structure suggestion might work better and has more of flow across the board. 

  • Inbox
  • Needs design
  • Needs feedback
  • Building
  • Blocked
  • Icebox*

*Icebox will be cleared down every month to avoid becoming a place cards go to become invisible.

Focused labels

Currently, our labels are being used for workflow. By having the above flow this stops those being it and can bring in the labels as subjects.

  • Documentation: identity what needs documentation
  • Meta
  • Core
  • Task
  • First contribution: a great label for contribution day
  • … there might be more labels but keeping simple to start, for example, type of design like icons could be good to note.

In practice, whatever structure we have only functions if we go back to having this board be the focal point of weekly meetings again.

Future considerations

Whilst other processes, tools are interesting to review, for now iterating on what we have is a great first step. Some key points to explore after this first iteration would be:

  • What belongs in Trello or should be in GitHub/Trac/other tools?
  • How do we sync everything or even should we?

For now, those topics are out of the scope of this proposal but I note to show they are future discussion points.

Next steps

If everyone agrees this will be implemented in a week and handbook updated with the information on how to use Trello now. Once done, the board will become a part of our weekly meetings again.

The idea is to start by doing this and in a month review if this is working out. One of the problems in the past has been doing something without review.

#trello #organising

Blocks, Patterns, and Layouts

Gutenberg is diving deep into customization leading into 2020. With customization, and eventual full site editing, comes new terminology that needs to be defined.

Blocks

Blocks are the smallest, most atomic unit in the WordPress editor. The Paragraph is the default block. Blocks can be static (an image) or dynamic (a list of posts).

Think of blocks as a single LEGO brick.


Patterns

Patterns are curated collections of blocks, often organized around a specific section or purpose. They make up common patterns across the web.

For example, a Contact pattern could contain:

  • A contact information block on one side, with fields for address, phone number, and email address.
  • A contact form block on the right.

A Team pattern could contain:

  • A column block
  • Inside each column, a group block containing:
    • An image block with a round mask for headshots
    • A header block for names
    • A paragraph block for biographies
    • A social links block

Think of patterns as several LEGO bricks stuck together to make just a castle gate. It’s a feature in itself, but only part of the greater whole of your post or page.

But doesn’t that mean something like Cover or Media & Text are patterns, not layouts?

That’s a great question! It requires more discussion before there’s a definitive answer. Should Cover / Media & Text / etc. be patterns, rather than blocks? What do you think?


Layouts

Layouts are one step up from patterns. They can be groupings of patterns or specific blocks that make up the entire design of your page — including your header, footer, and any additional global or repeating block areas, like sidebars.

Think of layouts as the entire castle — gates, towers, ramparts, catapults, flags, and all.

But isn’t this just a page template?

The short answer is yes, “layout” is a new way of saying page template. Template, however, is a pre-existing term that carries a lot of baggage. Page templates, as they exist in WordPress now, are technical entities with design implications. On the admin side, changing your page template is a pretty poor user experience. Selecting a different template for your page should be a visual process, but instead, we offer different templates in a dropdown. You can’t preview them, so you have to guess what they’ll look like, or search for a theme demo.

(Additionally, there isn’t any sort of native UI for selecting different post templates, or any UI at all for post formats.)

By creating layouts as a block-first concept, complete with visual placeholders for filling in content instead of creating pages from scratch, we can start to deprecate templates as a design concept.


Putting it all together

To summarize:

Layouts > Patterns > Blocks

(If you’re familiar with atomic design, you can also think of blocks as atoms and molecules, patterns as organisms, and layouts as templates.)


Does this terminology make sense? Are you left with any lingering doubts or questions?

#blocks, #layouts, #patterns

Design meeting notes 13 Nov 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 and find the meeting’s agenda here. You can join the Slack channel by following the instructions in our handbook.

@karmatosed starts off with two suggestions to keep us working more organised and focused.

Firstly, one of the common issues when starting to contribute or finding your way to is to discover what is going on and what the context behind it is. @michael-arestad suggest to add our focus projects to the Handbook, like full site editing for gutenberg for instance, it will be easier to read up, and could also include a timeline if known, links to where the work is happening and who is involved.

This could go hand in hand with the Make blogposts, that maybe the Handbook page can curate. The lead on a project would have the responsibility of keeping the info up to date as the project progresses. Meta has something similar at https://make.wordpress.org/meta/projects/

Secondly, @karmatosed suggests iterating and bringing our Trello board back from not being at the heart with a new workflow structure:

  • Inbox
  • Needs design
  • Needs feedback: this will be what we pull weekly meeting from
  • Building
  • Blocked
  • Icebox

The icebox could become a place where ideas go to die, but as @foletto remarks, that will happen anyway with some ideas no matter how we sort the project.

This also frees up the labels from being part of the workflow, and allows them to be used the way they are intended to.

Both suggestions will go up as proposal on the Make blog for further discussion.

A discussion about Github vs Trello spun off of this idea that will be continued at a later time.

Next, @mapk brings Gutenberg updates. Gutenberg 6.9 is almost out! Lots of things being worked on. Do note that the Gutenberg plugin v6.5+ needs WP 5.3 now.

For WP 5.4, there are some Gutenberg focuses left this month https://make.wordpress.org/core/2019/10/29/whats-next-in-gutenberg-november/. @mapk and @shaunandrews will run some usability tests on the new nav block, which is almost done.

Then, some interesting reading material was shared:

@hedgefield noted he would ask the team at Yoast that worked on this Gutenberg-based storytelling page if they had any wishes or suggestions to improve the workflow next time around.

And finally, @melchoyce would love some feedback on this idea for multi-block layout patterns for the block editor: https://github.com/WordPress/gutenberg/issues/17335

#meeting-notes

Design meeting agenda for Wednesday 13th November

This is the agenda for the weekly design chat meeting on Wednesday, 13th November 2019, 19:00 UTC.

  • Housekeeping
    • Trello board organising suggestion
    • Handbook organising suggestion
  • Updates from any specific focuses
    • Gutenberg design update
  • 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, design help or something added to the agenda.

#meeting-agenda

Gutenberg Phase 2 Friday Design Update #39

It’s Friday!! I hope everyone who made the trek to WCUS or WordCamp Tokyo this year made it back home safely and your travels were uneventful. Just a reminder that WordPress 5.3 is due to release on November 12!

If you didn’t catch it, @matveb posted an update to the Full Site Editing experience recently.

Priorities for the coming month include:

  • Block Content Areas,
  • Menu Navigation Block, and 
  • Tightening up existing interactions

For more details, consult this recent post. Now let’s take a look at where we’re at today.

Merged

In Progress

Edit media flow control

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

WordCamp US 2019 fire, forage and treasure exercise

During WordCamp US there was a fire, forage and treasure exercise for WordPress. During this, we decided things to:

  • 🔥Fire: That we wanted to get rid of.
  • 🍄Forage: Wanted to borrow from somewhere else.
  • 👑Treasure: What we wanted to keep.

🔥 Fire

  • Images: replacing, organising
  • Media library
  • WP Admin menu page
  • Non-Gutenberg baked building blocks
  • Notification (alert UI spam)
  • Badly formed notifications
  • Page edit button going to the wrong page
  • Changing color on the backend and it not showing up on the front
  • !working
  • Importer UI and experience
  • Hidden settings
  • Gutenberg gradient panel
  • Menu inflexibility and mobile issues
  • Mobile fonts whacky
  • Structure
  • Bloated (unorganised) admin menu
  • Finding stuff in admin issues
  • Access to dashboard issues
  • Plugins that don’t play well
  • Messy dashboard
  • WP way
  • Customizer > WP Admin > Gutenberg journey
  • Themes being everything
  • Inconsistency with CSS classes

🍄 Forage

  • Spotify buttons
  • Shopify dashboard consistency
  • Super cool proudly made with WordPress badges
  • Elementor type theme building in Gutenberg
  • Design system – Bootstrap, Polaris
  • Design creative ambassador program
  • Role manager
  • Mailchimp media image styles
  • Shopify ease of payment
  • Forms and lists of entries
  • Newsletter signup
  • Mobile layout visual editor
  • Image sorts
  • Easily organized files
  • Easier file management
  • Bear markdown
  • Development version control built in

👑 Treasure

  • Flexibility
  • Open to customization
  • Plugin updating experience
  • WP-CLI
  • API
  • Blocks
  • Cover block
  • Block templates
  • Writing drafts in Gutenberg
  • Social aspect of post
  • Meta boxes
  • Page buttons
  • One-click install
  • Gutenberg
  • Child themes

What would you fire, forage or treasure?

#wordcamp-us #workshop