search

WordPress / wporg-make

The repo for the Make.WordPress.org theme. wporg-make-2024
0 stars 0 forks source link

Make homepage redesign #2

Closed adamwoodnz closed 1 week ago

adamwoodnz commented 2 months ago

The current Make homepage needs to be updated to match the rest of the WordPress.org redesign.

Current design:

Proposed design (TBC):

adamwoodnz commented 2 months ago

@WordPress/meta-design can we move ahead with the homepage design?

jasmussen commented 2 months ago

Yes, though please keep the existing team icons! You can put them in a circle or not, put them left of the title or not.

Please be mindful of the correct accessibility of the particular collapsibles; if this ends up becoming a headache, it's okay to launch without the collapsibles, i.e. look much closer to the existing layout that's shipping at the moment.

adamwoodnz commented 1 month ago

it's okay to launch without the collapsibles, i.e. look much closer to the existing layout that's shipping at the moment.

I've shipped an initial implementation closer to the existing layout, and opened a separate sub issue for the interactivity.

fcoveram commented 1 month ago

I see some misalignments that seemed caused by the font and its x baseline. Here are some examples.

Section Header
Design Design header on Make page
Meta Meta header on Make page
Sustainability Sustainability header on Make page

We could try removing the circular wrapper while keeping the icon on the same position. What do you think @jasmussen?

jasmussen commented 1 month ago

Huh, that's a curious one indeed. It looks like there's nothing wrong with the CSS, but the globe in question is off-center in the Dashicons font itself.

Honestly it feels like an argument to update these icons to SVGs, and we can offer a consistent upgrade here to teams interested. But this is likely best done as a separate sprint. Whether we keep the circle now or not, I've not strong opinion on!

fcoveram commented 1 month ago

I agree with updating the icons. Suggest even new ones. Meanwhile, I would remove the circle to keep the layout proposed balanced.

adamwoodnz commented 1 month ago

Honestly it feels like an argument to update these icons to SVGs, and we can offer a consistent upgrade here to teams interested.

Noting that 2 teams already have SVG icons (Openverse and Core Performance), so the code is there to replace all of them.

fcoveram commented 1 month ago

That sounds great. Thanks @adamwoodnz

fcoveram commented 3 weeks ago

Based on this ping, I took a look at the homepage and worked on an idea that involves the following tickets:

Homepage (i2.4)

Most work was revisiting the hero section and how teams are displayed in the main content area. Here is a mockup.

Mockup of Make WordPress' homepage

The teams area goes back to make all content visible and the page larger. I don't see this as a problem as the new table arrangement makes it easier to identify the team name.

The icons are from the previous mockup in #15, but the final ones depend on the answer to this question.

I'm aware that some teams don't have the meeting info, and therefore, the last column will be empty. Still, I see benefits in identifying which teams have upcoming and periodic meetings.

What do you think of this?

ndiego commented 3 weeks ago

This mockup looks lovely @fcoveram! The column approach feels easier to read, and the expressive header really embodies the "community" of Make. I recommend we move forward with this approach.

adamwoodnz commented 2 weeks ago

Looks great to me too! Any feedback @jasmussen? Otherwise I'll get started 🙂

jasmussen commented 1 week ago

Looks great to me.

I'd include your note here, that we can update the copy.

fcoveram commented 1 week ago

I fixed the duplicated paragraph mentioned in #31 and updated the "Design" page to reflect the final designs.