About Page - 7.0

[desrosj]

This ticket will serve as a hub for the discussion, planning, design, and other related work for creating the WordPress 6.9 About page.

Anyone involved in the release is invited to follow this ticket as part of their release-related duties and offer their input.

[parinpanjari]

Hi everyone

I’d be happy to contribute to the design work for the 7.0 About page. I was involved in the 6.9 About page discussions, where I supported visual refinements and icon improvements, and I’d love to continue contributing this cycle as well.

Could you please let me know if there’s an existing Figma file or design direction already started for 7.0? If so, I’d be glad to review and propose section-level improvements (layout structure, feature blocks, visual hierarchy, icon consistency, responsive behavior, etc.).

If nothing has been started yet, I’m also happy to help initiate a modular section design approach aligned with the current WordPress admin design language and accessibility standards.

Looking forward to collaborating.

Thank you!

[fcoveram]

Sharing a first draft of the About page and the content that can potentially display. As in previous versions, the texts are exact the same as in the Microsite ( ​Github ticket).

All the text is available in this ​Google Doc file and open to feedback.

[fcoveram]

About page 7.0 - i.0

[peterwilsoncc]

@fcoveram Are you able to open the google doc to suggestions from anyone with the link so feedback can be provided?

[fcoveram]

Oh, yes! Apologies. Now the document is open to anyone to comment.

[parinpanjari]

@fcoveram

Just to align, I had suggested an update to one of the content lines, and it has now been approved. Accordingly, that line will need to be adjusted in the design to match the revised copy.

As I do not have edit access to the Figma file, could you please update it from your end?

Please refer to the screenshot for context:
​https://drive.google.com/file/d/1gjRWvrPrXZ7HpB7Se74c4kxubjsfPxDO/view?usp=sharing

Thanks

[JeffPaul]

@fcoveram is there any progress on the header design there as it could be nice to infer from that in the Try AI callout design on the Connectors page happening in #64711.

[fcoveram]

I haven't applied the latest updates in the about page, but I will @parinpanjari as soon as we have something more solid for the release brand. In that vein, the page header will also inherit the brand direction once we have it @JeffPaul. I will share updates soon.

[JeffPaul]

@fcoveram ideally the design is available very early next week so folks can review and get a commit in well before RC1 and so we can update accordingly on the Connectors page and in the AI Experiments plugin.

[fcoveram]

Thanks for the reminder @JeffPaul. Yes, I am working with contributors mostly in defining the release brand for the highlight grid. Regarding About page content, I'm applying small tweaks now and asking for double check again today.

Once we have the brand and the visuals for the highlight grid, replacing the images in both About page and Microsite is quite faster.

[fcoveram]

Here is a new version of the about page using the content from the ​Docs document; updated as of writing this comment

[JeffPaul]

The font size feels too small for some of those sections with lots of text, so presumably we need to trim that down so the font size can bump up and not overrun the vertical space for that section?

[Joen]

The font size feels too small for some of those sections with lots of text, so presumably we need to trim that down so the font size can bump up and not overrun the vertical space for that section?

This can be due to the image being scaled down. The font size should be identical to what it is already in 6.9, so the best way to get a feel for it is the WordPress logo > About.

[westonruter]

Draft for the Performance section: ​https://docs.google.com/document/d/1ES8GqiTk34hgO4qQfuSC9LoBU5uxO6oPI5Fue4dFPAY/edit?usp=sharing

[fcoveram]

Sharing a new version of the page that has applied changes coming from recent updates, as of writing this comment.

[markoserb]

I am sharing a new update. Swapping background cover colors so covers tie to other assets we are testing. Mainly gray background, and expressing other colors from 'brand direction' through objects on it. Same approach for other covers at about page. Consider it optional.

[parinpanjari]

A few suggestions to improve these sections: The font sizes are not matching consistent across the page. The first sections appear larger and more readable, while the other sections feel smaller and harder to read. Can we increase the font size of the remaining sections to maintain consistency and improve overall readability?

Screenshot : ​https://drive.google.com/file/d/1xRNmYzD7SQCYHIiUOxUTPG_7XI92rVCA/view?usp=sharing

[fcoveram]

We have been consistent with the structure of the page in the last releases. That big paragraph is an intro shared in the macro site as well. The font sizes don't intend to change, but only the content and images. I appreciate the feedback @parinpanjari

[fcoveram]

Sharing the latest version of the page updated with all the content from the main copy document.

[fcoveram]

The design can be found in the ​"Visual Updates" page inside the Figma file where the page and headers are placed.

[parinpanjari]

I’ve made a small visual background color adjustment to the “Learn more about WordPress 7.0” section to better align with the overall About page design.

Before (current):
​https://drive.google.com/file/d/1ezUzP1Qj6JBmaCHPjXfIJfBY2WesFVWS/view?usp=sharing

After (proposed):
​https://drive.google.com/file/d/1_Mevbo_18xzCjemQU_2iOXDBvb-in_yB/view?usp=sharing

The update replaces the strong orange background with a more neutral background(e.g. #EBE8E5) that aligns with the hero/header background used across the page.

This helps:

• Maintain visual consistency with the header and other sections
• Reduce visual weight so the focus stays on the content
• Improve readability and overall balance

Thanks!

[audrasjb]

About RTC and AI sections: Could we add a link to the related settings screens?
For AI connectors: /wp-admin/options-connectors.php
For RTC: /wp-admin/options-writing.php#wp_collaboration_enabled

[fcoveram]

Thanks @parinpanjari updating the W7.0 to have a gray background looks better. Agree with the change.

[Benjamin_Zekavica]

@parinpanjari That looks amazing :) Good job! I think the orange background is a bit too intense here. Maybe a lighter shade would work better.

See: ​https://www.directupload.eu/file/d/9243/j24ow9kg_png.htm

[parinpanjari]

@fcoveram @desrosj

Just checking if the updated design with the neutral background has been applied.

Since I don’t have edit access for that change, please let me know if anything is needed from my side to help move this forward.

Happy to assist with finalizing if required.

Thanks!

[peterwilsoncc]

Moving the header to use rounded corners will need updated designs for the hover elements in the "About, Credits .... Get Involved" menu, could they be added to the Figma file?

In the WordPress 6.9 about page update, the rounded corners were reverted as it made the hover effects look odd at either end of the menu, see this ​comment on the 6.9 PR for a gif showing the issue.

My apologies if this is covered in the Figma file and my ignorance of the ways of Figma means I am missing something obvious.

[markoserb]

about_cover-rounded-edges

[markoserb]

It's either we update the buttons to have the same radius value (image above), or keep the sharp approach for covers. Ideally we do round these, as lower sections are also rounded. However, if timing is not good we can leave it for the next release and simply go sharp edges. @fcoveram what do you think?

[Benjamin_Zekavica]

I wouldn’t round the buttons and would keep them without border radius. For the header, keep the top corners rounded and the bottom corners square.

Example (Quick-CSS): ​https://cleanshot.com/share/ckl76CDh

I wouldn’t change much overall.

[fcoveram]

I like the idea of having rounded corners in all headers, but I will follow the radius value that comes from the admin style feature. That means applying a 8px border radius to the image directly via CSS.

If we agree with this idea. We could also level up the layout by adding a 8px gap between the header and the tab section, and reduce the border decorative element of the active tab to be 4px.

Here is a test of the above I made on my browser's inspector using playground with 7.0-RC2: ​https://cleanshot.com/share/lM1WYSj6

What do you think of this?

[Benjamin_Zekavica]

@fcoveram That looks much better. I'd take the last version: ​https://cleanshot.com/share/lM1WYSj6