Title: docs – Make WordPress Design --- # Tag Archives: docs [ ](https://profiles.wordpress.org/estelaris/) [Estela Rueda](https://profiles.wordpress.org/estelaris/) 8:11 pm _on_ January 8, 2020 Tags: [design ( 217 )](https://make.wordpress.org/design/tag/design/), docs, [HelpHub ( 2 )](https://make.wordpress.org/design/tag/helphub/), [meeting-notes ( 132 )](https://make.wordpress.org/design/tag/meeting-notes/) # 󠀁[Design meeting 8 January 2020](https://make.wordpress.org/design/2020/01/08/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](https://wordpress.slack.com/archives/C02S78ZAL/p1578510024014500) and [find the meeting’s agenda here](https://make.wordpress.org/design/2020/01/07/design-meeting-agenda-for-wednesday-8th-january/). ## 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](https://profiles.wordpress.org/adampickering/) ## Updates ### GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. 󠀁[https://wordpress.org/gutenberg/](https://wordpress.org/gutenberg/)󠁿 updates [@mapk](https://profiles.wordpress.org/mapk/) announced that [Gutenberg 7.2 will come out today](https://wordpress.slack.com/archives/C02QB2JS7/p1578492282017600). [@mapk](https://profiles.wordpress.org/mapk/) will be running usability tests for the [Columns block](https://github.com/WordPress/gutenberg/issues/16370). Also, designers are diving into full site editing!! There is [a label in GitHub](https://github.com/WordPress/gutenberg/labels/%5BFeature%5D%20Full%20Site%20Editing), so if anyone wants to talk through design ideas, leave your comments there. ### Discussion [@karmatosed](https://profiles.wordpress.org/karmatosed/) let us know that there is a repo for [wordcamp.org](http://wordcamp.org) that has a “[needs design” label](https://github.com/wordpress/wordcamp.org/issues?q=is%3Aissue+is%3Aopen+label%3A%22%5BStatus%5D+Needs+Design%22) and needs our help. It is a great way to contribute by giving feedback or adding sketches as needed.  ### Open Floor [@estelaris](https://profiles.wordpress.org/estelaris/) presented the [first draft for the article page for HelpHub](https://xd.adobe.com/view/ff6c1db6-dce5-4eab-772b-95cebbf73da1-895d/), the prototype shows the use of menus. Feedback was requested on: 1. Avoid using hamburger menus 2. The Documentation menu (blue blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience.), 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](https://make.wordpress.org/design/tag/design/) team next week and a P2P2 P2 or O2 is the term people use to refer to the Make WordPress blog. It can be found at [https://make.wordpress.org](https://make.wordpress.org/) is planned after the [#docs](https://make.wordpress.org/design/tag/docs/) team provides the final sub-categories to open the design to public feedback. [#meeting-notes](https://make.wordpress.org/design/tag/meeting-notes/) [#helphub](https://make.wordpress.org/design/tag/helphub/) ### Share this: * [ Threads ](https://make.wordpress.org/design/2020/01/08/design-meeting-8-january-2020/?share=threads) * [ Mastodon ](https://make.wordpress.org/design/2020/01/08/design-meeting-8-january-2020/?share=mastodon) * [ Bluesky ](https://make.wordpress.org/design/2020/01/08/design-meeting-8-january-2020/?share=bluesky) * [ Facebook ](https://make.wordpress.org/design/2020/01/08/design-meeting-8-january-2020/?share=facebook) * [ X ](https://make.wordpress.org/design/2020/01/08/design-meeting-8-january-2020/?share=x) * [ Reddit ](https://make.wordpress.org/design/2020/01/08/design-meeting-8-january-2020/?share=reddit) * [ Email ](https://make.wordpress.org/design/tag/docs/?subject=%5BShared%20Post%5D%20Design%20meeting%208%20January%202020&body=https%3A%2F%2Fmake.wordpress.org%2Fdesign%2F2020%2F01%2F08%2Fdesign-meeting-8-january-2020%2F&share=email) [ ](https://profiles.wordpress.org/estelaris/) [Estela Rueda](https://profiles.wordpress.org/estelaris/) 11:37 pm _on_ October 24, 2019 Tags: [design ( 217 )](https://make.wordpress.org/design/tag/design/), docs    # 󠀁[Design Meeting Notes for 23 October 2019](https://make.wordpress.org/design/2019/10/24/design-meeting-notes-for-23-october-2019/)󠁿 These are the weekly notes for the design meeting that happens on Wednesdays. You can read the [full transcript on our Slack channel](https://wordpress.slack.com/archives/C02S78ZAL/p1571853691358100) and [find the meeting’s agenda here](https://make.wordpress.org/design/2019/10/21/design-meeting-agenda-for-wednesday-23rd-october/). ## Updates ### GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. 󠀁[https://wordpress.org/gutenberg/](https://wordpress.org/gutenberg/)󠁿 updates There are not many updates on Gutenberg as Gutenberg 6.8 RCRelease Candidate A beta version of software with the potential to be a final product, which is ready to release unless significant bugs emerge. will be ready next Monday 28 October, according to [@mapk](https://profiles.wordpress.org/mapk/).  [@karmatosed](https://profiles.wordpress.org/karmatosed/) worked through lots of cleanup on the [Tightening Up Project Board](https://github.com/WordPress/gutenberg/projects/29), it is a great project for people to get involved. ### HelpHub [@estelaris](https://profiles.wordpress.org/estelaris/) mentioned a post published last week regarding the new design on HelpHub for Home and CategoryCategory The ' category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging. pages. The post had very good comments and the changes were incorporated to the HH Homepage re-designed by the team at WC Valencia, lead by @AnaCirujano. The new design will be based on Valencia’s design with a few details added. You can leave your comments on [Figma](https://www.figma.com/file/iM8I9yAYbwjbc9q9b2WWui/HH-Pages?node-id=69%3A0)( if you do not have access, please ask in the SlackSlack Slack is a Collaborative Group Chat Platform [https://slack.com/](https://slack.com/). The WordPress community has its own Slack Channel at [https://make.wordpress.org/chat/](https://make.wordpress.org/chat/) [#design](https://make.wordpress.org/design/tag/design/) channel.) The plan is to finalize both the Home and Category pages for mobile and desktop this week and present them to [#docs](https://make.wordpress.org/design/tag/docs/) next Monday. ## Open Floor ### New Type Scale for WordPress @davewhitley shared his proposal for a [new type scale for WordPress](https://make.wordpress.org/design/2019/10/11/proposal-a-consistent-type-scale-for-wordpress/). So far he has applied the type scale to 3 screens: posts, settings, and the editor. See images below: ![](https://lh5.googleusercontent.com/khIjJ-0ACBEcdaYMOW4U9cdxU4ds2P0KEMXf8QW1kGSv2- i3YrU4DroqOF_VbJn2KuR6Qv3itaERLojeJNcqBcTDwd--Kwc7aWeaSV0tySsaVs9dswMR77p9pkodZO2WVfkRnWg_) Comparison Posts ![](https://lh5.googleusercontent.com/UiXFhJ7pbjLikw5BBhhF-j6ehhi6nf6NTT78bdgGx8h7p6BRN7puBmMx2Zwn- 8vKMbApOPr0F19R35Cq9jass0fK6U3tZiZiDEttvSfX31UQ0Vb6PmZIWE5l2uhFUFRnhmRKiGev) Comparison Settings Comparison Settings caused some discussion due to the type becoming smaller on large sentences. ![](https://lh4.googleusercontent.com/ggxFIhbUqYdRHRo1LQmdRexUgsUL04-bHtENHzOSvksruMZxjG71DtJeCucsRRUO8NeC5AJY7UMmuTmUtKFJoE2vGLgGIqgbu3L_v8WT3aGGimsY4PSE9SlQBBOzPqVnnwBe1bto) Comparison Editor The gifs will be added as comments on the post for more visibility. There were questions as to how other languages would be affected by the type scale, for example in languages with long words like German. One solution would be to make the admin menu a little wider to accommodate other languages, but that is a different discussion. The type scale, if accepted, would be applied to all the WordPress application: WP Admin, customizerCustomizer Tool built into WordPress core that hooks into most modern themes. You can use it to preview and modify many of your site’s appearance settings., editor, etc. Another two feedback points from the post that were discussed: 1. There is no documentation yet on when or how these styles should be used. 2. The “label” style which is all caps. Currently, there are headings that use all caps in WP Admin.  The [#design](https://make.wordpress.org/design/tag/design/) team argued against the use of all caps due to accessibilityAccessibility Accessibility( commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https:// en.wikipedia.org/wiki/Accessibility) issues. And because we don’t want it to be a blocker for the type scale, it can be removed. ### Secondary Button Styles There have been several discussions about the new secondary button and how it looks too similar to text input styles. This needs to be solved in the future. As of now, @davewhitley is gathering [good and bad button examples and input fields ](https://www.figma.com/file/YU88DD9Q8eGtHxeZ75EZJI/Untitled?node-id=0%3A1) on a Figma file. There is also the [design systems repo](https://designsystemsrepo.com/design-systems-recent/), where people can find examples. ### WordPress Design Guidelines [@itsjonq](https://profiles.wordpress.org/itsjonq/) created a new site with [design guidelines for WordPress](https://wp-design-guidelines.netlify.com/foundations/) with a [GitHub](https://github.com/itsjonq/wordpress-design-guidelines) included where you can leave comments or issues. The site has support for internationalization and it may be available for WC Tokyo. ### Border Radio There seems to be a concern[ that border-radii ](https://wordpress.slack.com/archives/C02S78ZAL/p1571336383267500) varies quite a bit. All small interactive UIUI UI is an acronym for User Interface- the layout of the page the user interacts with. Think ‘how are they doing that’ and less about what they are doing. elements should use the same border-radius, we believe this was the result if fast integration and someone must have missed or not accounted for something. [#meeting-notes](https://make.wordpress.org/design/tag/meeting-notes/) ### Share this: * [ Threads ](https://make.wordpress.org/design/2019/10/24/design-meeting-notes-for-23-october-2019/?share=threads) * [ Mastodon ](https://make.wordpress.org/design/2019/10/24/design-meeting-notes-for-23-october-2019/?share=mastodon) * [ Bluesky ](https://make.wordpress.org/design/2019/10/24/design-meeting-notes-for-23-october-2019/?share=bluesky) * [ Facebook ](https://make.wordpress.org/design/2019/10/24/design-meeting-notes-for-23-october-2019/?share=facebook) * [ X ](https://make.wordpress.org/design/2019/10/24/design-meeting-notes-for-23-october-2019/?share=x) * [ Reddit ](https://make.wordpress.org/design/2019/10/24/design-meeting-notes-for-23-october-2019/?share=reddit) * [ Email ](https://make.wordpress.org/design/tag/docs/?subject=%5BShared%20Post%5D%20Design%20Meeting%20Notes%20for%2023%20October%202019&body=https%3A%2F%2Fmake.wordpress.org%2Fdesign%2F2019%2F10%2F24%2Fdesign-meeting-notes-for-23-october-2019%2F&share=email) [ ](https://profiles.wordpress.org/estelaris/) [Estela Rueda](https://profiles.wordpress.org/estelaris/) 1:07 pm _on_ October 14, 2019 Tags: [design ( 217 )](https://make.wordpress.org/design/tag/design/), docs, [HelpHub ( 2 )](https://make.wordpress.org/design/tag/helphub/)    # 󠀁[New Design for HelpHub: Home and Category pages](https://make.wordpress.org/design/2019/10/14/new-design-for-helphub-home-and-category-pages/)󠁿 Since WordCampWordCamp WordCamps are casual, locally-organized conferences covering everything related to WordPress. They're one of the places where the WordPress community comes together to teach one another what they’ve learned throughout the year and share the joy. [Learn more](https://central.wordcamp.org/about/). Europe 2019, the [#docs](https://make.wordpress.org/design/tag/docs/) team is leading the update of the Codex now known as [HelpHub](https://make.wordpress.org/docs/handbook/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 CategoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging. pages for desktop. In the coming weeks, WordCamp Valencia will work on the mobile versions of the same pages during Contributor DayContributor Day Contributor Days are standalone days, frequently held before or after WordCamps but they can also happen at any time. They are events where people get together to work on various areas of [https://make.wordpress.org/](https://make.wordpress.org/) There are many teams that people can participate in, each with a different focus. [https://2017.us.wordcamp.org/contributor-day/](https://2017.us.wordcamp.org/contributor-day/) [https://make.wordpress.org/support/handbook/getting-started/getting-started-at-a-contributor-day/](https://make.wordpress.org/support/handbook/getting-started/getting-started-at-a-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 accessibilityAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/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 * ![](https://i1.wp.com/make.wordpress.org/design/files/2019/10/Homepage-grid-space- 1-2560.png?fit=695%2C1024&ssl=1) * ![](https://i2.wp.com/make.wordpress.org/design/files/2019/10/HH-Homepage-Desktop- 1-2560.png?fit=605%2C1024&ssl=1) Before and after images for HelpHub Homepage ## 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 * ![](https://i2.wp.com/make.wordpress.org/design/files/2019/10/HH-Grid-category. png?fit=751%2C1024&ssl=1) * ![](https://i0.wp.com/make.wordpress.org/design/files/2019/10/HH-Category-Page- Desktop-2560.png?fit=756%2C1024&ssl=1) Before and after images for HelpHub Category pages 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](https://make.wordpress.org/design/tag/docs/) or [#design](https://make.wordpress.org/design/tag/design/) teams SlackSlack Slack is a Collaborative Group Chat Platform [https://slack.com/](https://slack.com/). The WordPress community has its own Slack Channel at [https://make.wordpress.org/chat/](https://make.wordpress.org/chat/) channels. [#helphub](https://make.wordpress.org/design/tag/helphub/) ### Share this: * [ Threads ](https://make.wordpress.org/design/2019/10/14/new-design-for-helphub-home-and-category-pages/?share=threads) * [ Mastodon ](https://make.wordpress.org/design/2019/10/14/new-design-for-helphub-home-and-category-pages/?share=mastodon) * [ Bluesky ](https://make.wordpress.org/design/2019/10/14/new-design-for-helphub-home-and-category-pages/?share=bluesky) * [ Facebook ](https://make.wordpress.org/design/2019/10/14/new-design-for-helphub-home-and-category-pages/?share=facebook) * [ X ](https://make.wordpress.org/design/2019/10/14/new-design-for-helphub-home-and-category-pages/?share=x) * [ Reddit ](https://make.wordpress.org/design/2019/10/14/new-design-for-helphub-home-and-category-pages/?share=reddit) * [ Email ](https://make.wordpress.org/design/tag/docs/?subject=%5BShared%20Post%5D%20New%20Design%20for%20HelpHub%3A%20Home%20and%20Category%20pages&body=https%3A%2F%2Fmake.wordpress.org%2Fdesign%2F2019%2F10%2F14%2Fnew-design-for-helphub-home-and-category-pages%2F&share=email)