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

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