Design meeting notes for 13 March, 2019

You can read the full transcript of this meeting on our Slack channel.

Housekeeping

Call for component maintainers

There’s a call for component maintainers. If you are interested, make sure you join today’s core chat or catch up via core meeting notes.

Design label changes for Trac

Next, label changes. A while ago, we discussed simplifying the trac design labels. This has now happened! UI-feedback and UX-feedback have now been replaced with needs-design-feedback.

Profile badges

On your profile.wordpress.org you will see badges of the teams you are a member of or also contribute to. If you don’t have one but are a member of this design team, please speak up on Slack as a threaded comment, as we have a feeling some of you awesome designers are missing a badge!

Daylight savings time

Traditionally, we changed the time when Europe did. That would be in 2 weeks. So we change the meeting time from the first week in April. This causes two more weeks of confusion, sorry about that!

Updates

Gutenberg

The block manager needs some design eyes. There’s a brief discussion on the toggles and checkboxes, which you can read in the design Slack channel. If you have anything you’d like to add to the discussion, pleas add your comments to the ticket. The TL;DR of this discussion:

  1. Look into other languages and how longer words might conflict with one another.
  2. Look into RTL languages.
  3. Switch the toggle to a checkbox using an intermediate state as well.

The other Gutenberg topic that needs some eyes is the Section block. Please leave your feedback behind in the Github ticket comments.

Feedback/reviews

Showcase pages

Rich Copping has put the latest version of the Showcase pages mockups into Figma. We’d encourage you to take a look and give your feedback on the mockups in Figma. If you don’t have access yet, please leave a comment in the design channel on Slack or in the comments of this post.

Redesign/mobile

If you have time, please take a look at the redesign for mobile, it could still use additional feedback.

Discussions/open floor

@tinkerbelly was trying to get font management in Figma fixed, but due to the account we have been donated, we’re not able to share fonts. So if you want to work within the WordPress Figma account and don’t get notifications of missing fonts, please download the SF Pro font via Apple, that’s the one we use to standardise prototypes and mockups.

If you’re keen on research, please give your preference via Doodle on joining the site research walkthrough. Note that filling out the Doodle doesn’t commit you to showing up.

#meeting-notes

Design meeting notes for February 27, 2019

Thanks to everyone who attended this week’s meeting. If you couldn’t attend or want to read back what was said, here are the meeting notes for you. You can also read the full transcript on our Slack channel.

Housekeeping

In March we will triage Gutenberg design tickets. If you want to help move things forward, please join us for half an our in our Slack channel on next monday 17:30 UTC.

Updates

WordPress showcase

Showcase designs have moved to Figma, thanks to Rich Copping. Feedback and notes are welcome, but do note that the last round of feedback hasn’t been iterated on as we write this down.

Mockup for the new WordPress showcase pages

Site Health

@hedgefield is still working on this, in collaboration (amongst others) with the accessibility team.

Dashicons

On short term, there’s help needed getting new dashicons in 5.2. This doesn’t concern the bigger picture of the future of dashicons that was discussed recently. @empireoflight says there’s no update on that front, although more feedback would be welcome.

Gutenberg

@mapk updates us on Gutenberg phase 2. Currently, the team is looking to integrate a block management system. Gutenberg needs a way to organize blocks so it doesn’t get out of control. There’s also testing needed on the Classic (Legacy) widget block. This is important to ensure that non-converted widgets have a home.

There’s also a proposal on the navigation menu block design. Please go check it out if you haven’t read it yet.

Calls for design and feedback

Mockup for navigation on make.wordpress.org

The marketing team requests to implement Navigation Change at make.wordpress.org. Design wise, we’re looking for volunteers to mockup what this could look like, to move the ticket forward.

Redesign/mobile

The page proposals for mobile need design / UX feedback. If anyone wants to take a look and give their feedback, that would be appreciated.

Concerns about range sliders

Read this Slack thread if you want details, but in short, there are some concerns that the range slider as used in the blockeditor (for instance when selecting the number of columns, or the size of the dropcap) isn’t as accessible as it could be. As this could turn into a long discussion, @karmatosed suggests opening a Github issue for this.

Reminder for admin email

The idea is to have a reminder to make sure your email is correct for admin. Please leave feedback on the Trac ticket if you have thoughts on this.

Other discussion points and open floor

@tinkerbelly has a short remark on the use of different fonts in Figma. The suggestion is to keep it simple and therefore use one typeface consistently throughout all designs. @boemedia suggests using Comic Sans, but apparently that’s not one of the options.

Last topic tonight is documenting workflows for the design team. @karmatosed has made a start on writing out some of the processes the design team follows. It’s basically nothing new, but the main goal is to surface what we do as a team. Please leave your thoughts on this in the Google ‘work in process doc.

#meeting-notes

Design meeting notes for February 20, 2019

You can read the full transcript of this week’s design meeting on our Slack channel, or read the digest below.

Housekeeping

@joshuawold suggests a focus on Gutenberg for the weekly design triage during the month of March. Focusing on a few things for Gutenberg phase 2 makes sense, so as of March 4, the triage on Monday is all about Gutenberg!

Updates

Gutenberg Update

Kjell has got some updates on Gutenberg design:

Beyond that, there are three more things he highlights:

  1. Container Blocks – The cover block is being converted to use nested blocks This makes it much more flexible
  2. Micro-interactions – As part of the “tighten up” aspect of Gutenberg Phase 2, designers are putting together a list of areas to explore adding micro-interactions, while incorporating best practices from the a11y team.
  3. Navigation Block – there was a great discussion around the navigation block last week. Work is still underway, but feel free to join the conversation on Github.

Site Health Check Update

Tim Hengeveld brings us an update on the design for Site Health Check. Sketches have been moved to mocks and there have been a number of style explorations. Please leave your feedback on the Github ticket for this issue and help improve.

First mock ups of the Site Health function in WordPress

Showcase Update

Joost de Valk and Rich Copping bring a design update for the WordPress Showcase pages. Please take a look at the design and let us know what you think by commenting on this post. You can also leave your comment in the discussing about this topic in our Slack channel and catch up with what was said already.

#meeting-notes

Meeting notes

If you didn’t get to attend our meeting in Slack this week, don’t worry! That’s what these notes are for. You can see the previous agenda, and follow the Slack chat log.

Housekeeping

Research & recommendations

There are so many great data points and insights here from the research the team has done with WordPress. It’s a treasure trove, thanks to everyone for the work, and it’s well worth checking out. We discussed having a walkthrough of the work. Keep an eye out for that!

What’s next for Dashicons?

We’d love to hear some thoughts on this post. We had a great meeting last week, and a thorough followup, walking through where we’re at with icons in WordPress, and where we can take things from here.

Updates

Create style guide for future WordPress pages

Tremendous work has gone into giving a guide for designers or developers to quickly create new pages based on work that’s been done previously. This is really helpful! We discussed in our meeting the work involved to convert the guides to Figma files, as the WordPress design team is able to use Figma for free, and it supports more collaborative design work.

Gutenberg Nav block

We’d love your feedback on all the hard work the team has put into suggesting various approaches to creating a Nav block in Gutenberg. For clarity the work has been broken into five individual issues for discussion.

  1. What happens when I add a menu? (smart defaults, onboarding)
  2. How do I add an item to my menu? (child blocks, link interface, types of content to include)
  3. How do I edit that menu item? (renaming, settings)
  4. How do I rearrange items in my menu? (ordering, hierarchy, sub-menus, still in progress, although this is starting to come up in 3 and 5)
  5. How are menus and menu items presented visually? (focussed state, horizontal/vertical styling)

Feedback on any and all of the issues is welcome. The biggest challenge right now is trying to fit all the complex interactions of a navigation menu into the block area. The team is also trying to follow the principle of putting as much in-context settings next to the block area, and avoiding too many settings in the sidebar.

A great point was brought up about ensuring accessibility is thought of and included in these early stages. We briefly discussed what this could look like, and the design team wants to continually be proactive in soliciting feedback from the accessibility team.

Discussion about bringing it all together (Slack link)

We discussed some of the challenges with making complex Nav blocks, and where the different settings should sit. If you have time, feel free to jump into Slack and read through it; these thoughts are very much in progress, so additional feedback is welcome!

Design feedback

We’d love feedback on a new WordCamp PWA proposal.

#meeting-notes

Meeting notes for February 6, 2018

This week, the weekly #design meeting was lead by @joshuawold. You can read the full transcript in our Slack-channel, or jump straight to the topics that were discussed by clicking the headings below.

Gutenberg update Phase 2

@mapk gives a quick update on Gutenberg Phase 2. He thanks the accessibilty team for being very helpful with design work being done. There’s a new ticket that directly explores the A11y (Accessibility) tabbing issues in Gutenberg.

Also, the navigation block just got a recent Github issue created to gather focus again. If you happen to have some thoughts on that, please join the discussion in the ticket by adding your comment.

Calls for design

There are two calls for design that need help from awesome designers. If you are looking into something tangible to contribute on as a designer, please check out the following calls:

  • Uniform Search Form Display/Experience – this ticket addresses the problem with  five different search types existing across the WP-admin.
  • Redesign mobile – check this ticket if you’re passionate about working with WordPress from your mobile phone. These pages could use some love and design feedback, first wireframes/sketches are in the ticket.

Dashicons

The basis for this discussion is issue 9647 of block icons SVGs not being reusable.

In his comment on issue 9647 Joen says:

For now we have used Dashicons because it’s the WordPress icon set. But this has not scaled tremendously well, and the icons are small and designed for older screens and interfaces than we use widely today. So we eventually adopted the Material icon set for block library icons, to make it trivial for plugin developers to quickly and easily pick a unique and legible icon that fits their block.

There are constant requests for new icons on Github, some more critical than others. But currently, it’s really hard to integrate new icons in the Dashicons icon font.

In the meeting, there’s a brief exploration on where this could go, and moving towards another open source icon set is suggested. @empireoflight, one of the prominent dashicon builders, says he used to think we could build an icon library for WordPress. But unfortunately, it’s just not happening.

A brief discussion follows on the impact of having multiple icon sets. But it’s good to know people are open to the idea of working with another open source icon set like Material Icons, and have an extended set of specific WP icons on top.

Everyone agrees this will overhaul the admin and will have a big impact. Knowing the logistics, breaking these into steps and setting a timeline would help getting an overview on what’s involved.

@mapk suggests starting with getting buy in other teams first and find people to help on the project after that.

@empireoflight will draft a post on make/design as a starting point for the discussion with other teams.

We’re looking forward on your thoughts on moving WordPress icons forward. Pleas feel free to comment on these notes, or share your ideas in the make/design post dedicated to this topic (which will appear soon on this page for you to discover. You can also subscribe to the design blog in the sidebar on make/design to get instant notifications once the post is there for you to read).

#meeting-notes

Design meeting notes

Link to this week’s agenda.

Research findings

Sarah Semark shared an update on the work that the team has done for research. A post has been created where you can weigh in on where our research should go.

For context: We’re trying to decide where the research results and resources should live. It’s important that it’s easily findable and readable. The report is 3500 words long, so we’re also looking at whether it should be broken up.

Once we’ve figured out a place to keep it, we can add other resources to it as well. There are a few toolkit resources (templates, guides, etc) that would be good to keep with other research, so everything’s in one place.

There was additional discussion, and a new Make post will followup with further details. You can read the Slack chat log as well.

Calls for design

The WordPress 5.1 about page

We had several designers volunteer to work on designing this during the meeting. Look for updates in future posts.

HelpHub

HelpHub is going to be the new portal for all WordPress user documentation that currently resides on the WordPress Codex. You can visit the Github repo and checkout the design issues that need help.

Phase 2 will see a more design work around Search, contributor feedback, acknowledgements etc. During the meeting we had a designer volunteer to help out. If you’re interested you can jump into the Github issues!

Updating the theme design

We have a request for a design for showing info from the theme readme files, which are required in themes as of Oct 25, 2018.

Plugin readme files get converted into a page where you can add additional details about the plugin, FAQs, etc. For example, compare the information on these two pages. We need to design a comparable output both in WordPress admin, and on wordpress.org. You can follow the Slack chat for more information.

Gutenberg Phase 2

Right now we’re closing in on a couple things:

  1. Responsive block controls
  2. Widget/blocks in the wp-admin screen

If anyone can hop on and provide design feedback, it would be helpful. Otherwise feel free to reach out to @mapk.

Showcase

Previously we shared an update on the Showcase project. Pragmatic.agency has volunteered design time, we’re iterating on wireframes, Joost de Valk will share a first design soon, it needs to first be separated out from another page.

PHP Upgrade Page

The new page is ready for feedback, so if you have a few moments we’d love comments and thoughts on it!

Site Health

What is it? Some of you may have heard of the Health Check plugin – It’s a very useful tool that shows people how their website is doing technically.

Tim Hengeveld shared an update, “Doing good! Got some sketches up for each of the screens of the plugin with some quick wins in there, and I’m writing down all the checks that the plugin has now with what kind of actionable thing we can attach to them, be it a ‘fix now’ button or a link to more info etc, and possibly also some sort of indication which area of your site it affects (speed/security/a11y).”

#meeting-notes

Design meeting notes

Howdy! Another week, another meeting. Followup are the highlights from our Slack chat today. You can also read the whole log if you wish!

Showcase redesign

The marketing team would like to redesign the WordPress showcase and the processes around it. You can learn more about the project on the marketing blog.

Joost de Valk started the meeting by opening the conversation up to the design team for feedback on how we can approach this project. He also asked for any designers who would like to volunteer to work with the team on this. Hoping to have it completed by February 28th.

With this project we’d like to structure it similar to the Site Health Check project, with a designer supporting the marketing team and sharing regular updates back to the Slack discussion.

Joost will create a Trello card and we’ll have a followup post here with details. You can follow the whole Slack chat as well!

Site Health check

Tim Hengeveld shared an update: “Things are chugging along nicely. There have been some people coming into the Github issue already very excited by the project and willing to help out with the ideation”

Tim draft a user flow for the project, and would love feedback from the team here once it’s ready. Look for an updated post soon on this.

Gutenberg Phase 2

Gutenberg 4.9 just released with design improvements!

Mark Uraine shared an update. This is the perfect time to get involved in Phase 2. There are big things that are needed as well as small tasks that you can jump into.

Additional updates

  • Contributors – Josepha posted thoughts on the strengths and weaknesses of the whole team when it comes to contributing. Well worth a read.
  • Icons – Next week we’d love to chat more about icons within WordPress, and hear from the Dashicons team. In the meantime you can read up on an issue being discussed now.
  • Accessibility – Luke Pettway and Meagen Voss are working on a document to share soon on how accessibility and design can work together. Looking forward to reading that!

Thanks everyone! Looking forward to an amazing 2019.

#meeting-notes

Design meeting notes

A new week, a new meeting in the WordPress design team. Woo hoo! You can follow the posted agenda here.

Update PHP page

First up, we chatted about the update PHP page in WordPress. Felix Artnz shared the need for design support.

He is representing the #core-php team, and has been working on helping site owners update outdated versions of PHP. Link to the Slack chat conversation.

The update PHP page is an important part of all this. They’re looking for design help on the page, updating visual assets and the copy. Jayman Pandya volunteered to help and give updates back to the channel with Felix.

Site Health Check project

Earlier today Tim Hengeveld shared a call for design to join on an exciting project. I want to use the nifty embed feature in this post, check it out!

Communication within Design

We also briefly walked through preferred methods of communication in the Core Design team. Often the question comes up about where information should be shared. Should it be put into Trac, Trello, Github, Slack? The Make WordPress blog?

Any of these can work, but in general try to put discussions in a place available to all team members, and reference those back to the Slack channel when possible.

That’s what Slack is for, an open communication avenue for anyone to jump in and follow!

Accessibility and design

Luke Pettway and Meagen Voss have been working hard recently to build a bridge between a11y (accessibility team) and design. Tammie shared a few questions with the channel:

  • How can we continue to build things together?
  • What steps can we do to bring a11y into our workflow at all stages?
  • What would people like to learn about a11y to be more enabled?

We discussed the need for more understanding of the needs of the a11y team. Luke Pettway volunteered to share a walkthrough (potentially as videos) of ways we can help!

Accessibility and handbooks

Luke Pettway and Meagen Voss have also been looking at updating the handbooks for each team in WordPress to include accessibility information. They could see various accessibility plugins created for the tools the design team uses (Sketch, InVision, and maybe Figma)

It’s important to consider a11y early on since some of the biggest problems can arise during the planning stage, before anything is even designed.

We also discussed ways that we can continue to communicate and connect more closely so that we’re all working together with a single focus.

Luke Pettway also shared a link to resources, as a starting point for anyone interested in learning more.

The a11y team would love to help in anyway that’s needed!

#meeting-notes

Weekly design meeting notes of Wednesday December 12, 2018

AKA recovering from WordCamp US 2018. Today we chatted about a number of things, but first let’s jump to Housekeeping. 

Housekeeping 

  • In past design meetings we discussed having some focuses for the coming year and outlining them as a team. We would like to start that next week with a post here announcing the start of it. 
  • It’s important as a team that we actually support and recognize all the work that designers are interested in doing. So this will provide an opportunity to weigh in on where we take things in 2019. 
  • Also, if you’re interested in resources for what the design team is doing on a given week, checkout Trello

Open Agenda

For the rest of the meeting we had an open agenda, and were able to discuss a number of topics. 

  • WordCamp US followup – Several folks from the design team were able to attend WordCamp US. On Sunday we had the Contributor Day, where we spent time workshopping on where we can take Gutenberg from here. Really appreciate all the folks who joined and lent their thoughts and design ideas. 
  • Building in Gutenberg – Over the past few days I’ve been working to build out a more complex page using Gutenberg. During that process I’ve been hitting the limits of what can easily be made, and have been turning to Theme and Plugin options to try and fill the gaps. We discussed this briefly during our chat today. If you have been digging into Gutenberg we’d love to hear your successes, and where things could be improved! This will help give guidance as we move forward into future phases. As designers we should share our experiences!
  • Designers in future work – We discussed the contributions of designers in Phase 1 of Gutenberg; with the note that more designers were able to contribute to this phase than projects in the past. That’s a huge win, and one we want to repeat in future phases!
  • Accessibility support – We discussed ways that folks from Accessibility and Design can work together. As a resource there’s a great page sharing the standards that we strive to meet with the WordPress project as a whole. 
  • How do you help as a designer? There’s a lot of ways designers can help in Core, whether it’s Trac, Trello, or Github. We chatted about some of the challenges with using Trac, and ways we can make the onboarding process easier in the future (stay tuned for that post next week!)

#meeting-notes

Weekly design meeting notes of Wednesday November 28, 2018

Howdy! Another great week, and another meeting in the #design team. Following are notes shared from the discussion. If you prefer the uncondensed  version of things, you can checkout the Slack log!

Contributing at WordCamps

Props to @folletto and @karmatosed (along with others who helped finesse the wording) for an update to the guide for leading contributor days at WordCamps. Definitely worth checking out if you anticipate doing so in the near future. 

Design for learn.wordpress.org

@Andi shared an update on the progress happening here. You can also checkout the work on Trello. Some great feedback was shared during the meeting, and at this point support is requested from the design team to comment on the styling, layout and usability issues. You can checkout the Trello card and share your feedback.

Figma followup

A brief discussion was shared regarding plans to convert the SketchPress work into Figma. Excited to see this progress forward as @Sarah James works on it. 

Benchmarking work on Sparkle

@melchoyce has begun benchmarking other site builders in anticipation of Gutenberg phase two. She shared a great post following her process and review of Sparkle. 

Planning for 2019

@karmatosed posted an update on plans. To quote in full (really, just wanting to try out this Gutenberg block):

Finally, I would like to suggest one week in December we use our team meeting to think about 2019. We just all got very emojicited (so a word) about having a goal and as a team we’ve not generally set yearly goals.
Maybe we could this year have some projects we outline that we want to do and make it our focus? Gutenberg of course and core is a constant, but it could be worth planning a little. What do people think?

Tammie Lister

(Yes, I wanted to do illustrations again, but ran out of time!)

#meeting-notes