five-for-the-future icon indicating copy to clipboard operation
five-for-the-future copied to clipboard

New layout in Organization pledge page

Open fcoveram opened this issue 1 year ago • 2 comments

URL where issue is: Organization pledge

What do you see?

I took a time to revisit the organization pledge page to see how the layout designed behaves with real content, and there is room for improvement to use better the white spaces.

Here is a screenshot of Yoast pledge.

Yoast pledge in Five for the future section in WordPress.org

Since the teams list is long, the white space in the left side make the page unbalanced.

What should be changed?

I'm drawn to try a layout that make better of use spaces. Here is an idea based on the same Yoast pledge content.

Mockup of Yoast pledge

fcoveram avatar Sep 17 '24 15:09 fcoveram

Looks good! Would that still work for pledges like https://wordpress.org/five-for-the-future/pledge/omnisend/ ? The average pledge on the site has just 3-4 people (I don't have teams stats, but I imagine they would be similarly small).

Here's another case, the description is longer since it's both English and another language (there are at least two of these) https://wordpress.org/five-for-the-future/pledge/mowomo-2/

ryelle avatar Sep 17 '24 17:09 ryelle

I think the new design's layout may work well in both cases.

Since we don't have a way of changing the layout based on the content extension, the design proposed optimizes the white spaces more evenly.

fcoveram avatar Sep 18 '24 07:09 fcoveram