Proposal: Five for the Future theme refresh

ndiego commented 2 weeks ago

Over the past year, much of WordPress.org has received an aesthetic refresh to establish design consistency across the site. You can see some recent examples here and here.

It's now time to apply a similar treatment to the Five for the Future section. The primary goals are to:

Update the site to a block theme
Update the homepage layout
Update the general aesthetics and layout of the remaining site
Functional updates will be kept to a minimum and reserved for future updates

Here is the proposed design. You can view the complete proposed design in Figma. Feel free to add comments directly in Figma or below.

Note that the written content in the mockups, especially the homepage, is not final.

Homepage	Pledges

Organization Page	Handbook

ryelle commented 2 weeks ago

Just a little progress update: I started breaking out sub-tasks for this, but it's faster for me to just work on it, so instead I'll drop some details here as I work.

Yesterday I finished up the pledge details (organization) page. The staging site has a sparse demo you can view: https://wordpress.org/five-for-the-future-test/pledge/automattic/, the following screenshots were done on my sandbox (production data).

Many contributors	Few contributors

Today I got the pledge list done. Again, sparse demo on staging https://wordpress.org/five-for-the-future-test/pledge/automattic/ and screenshot from my sandbox

five-pledge-list

The pages generally have the right layout already, just inheriting styles. Those are easier to see on the staging site, since we can't update the production pages.

A rough list of still-to-dos:

[x] My Pledges page with actions to confirm, decline, or remove a pledge
[x] Check the pledge flow for any unstyled steps
[x] Fix the awkward dropdown arrow on Contact page
[ ] Update the handbook pages with "chapter" nav menu & ToC blocks
[x] Get the "destructive" red button styles merged into parent theme https://github.com/WordPress/wporg-parent-2021/pull/151

Waiting on content before I can build out the rest of the pages

[ ] Update homepage with real content
[x] ~Testimonials page~ Not for launch
[ ] Update "for individuals" with new screenshots
[ ] Any updates necessary to other pages?

cc @WordPress/meta-design — Feel free to check out any of the links/screenshots above, and let me know if you see any glaring issues 🙂

ryelle commented 2 weeks ago

Today I styled and built out the My Pledge page, though I haven't pushed anything up since it's the very end of my day. There are also still minor issues with each view.

User with no pledges (needs work still, that text shouldn't be wide)

my-pledge-empty

User with a pending pledge (spacing is a little off here too)

my-pledge-pending

User with an active pledge (not visual, but the heading level is wrong)

my-pledge-active

Lastly, I left some comments on the Figma, including about notice styles — we don't currently have a notice style for success messages, so I'm using "info". For example:

fcoveram commented 1 week ago

Organization pledge page

I found two things

"Report a problem" and "Edit pledge" actions with a different style
The "Contributions" heading on the right side is not Heading Inter 5

And I have an idea to improve the following section.

Alignment of logo and info

The horizontal alignment of logo and organization info is technically correct, but due to the text area wrapper, it looks visually unbalanced. I played on the browser inspector a little bit and the following makes the area look better.

Screenshot of org pledge with spacing notes from the browser inspector

The alignment items is flex-start and added a 13px of padding-top in the info area.

How do you see this @ryelle?

Link to FftF’s homepage

I forgot to note in the designs that I removed the link to FftF’s homepage. I considered it redundant, and with the latest implementations in nav components, going to the section homepage is easier.

How do you see this change @thetinyl? Here is a screenshot of the current site.

Screenshot of header area of the org details page

Contact and Report a problem

In addition to the broken chevron icon, is it possible to apply the following?

Remove the 16px padding that shrinks the form and makes it off the content grid.
Change to regular the input title to be consistent with the form in the "Contribute as an Organization" page.
Label of CTA, as per the design.
Align to left the CTA in "Report a Problem" page.

ryelle commented 1 week ago

@fcoveram Thanks for checking this out so far! I'm not really ready for this detailed level of QA just yet (the plan was for you to start on Wednesday), but I'll try to address some of it.

The alignment items is flex-start and added a 13px of padding-top in the info area.

How does this handle when lines start wrapping? What is the intended alignment here? I can change it to flex-start for a top alignment (I haven't reviewed this sort of thing yet), but it looks like you're trying to re-center it with the padding.

I forgot to note in the designs that I removed the link to FftF’s homepage. I considered it redundant, and with the latest implementations in nav components, going to the section homepage is easier.

Just to clarify, which link(s)? "About" in the nav sitewide, or the "More about Five…" in the pledge's page content? I think both can be removed, since the left-side site name is a link home. Unless we add a separate About page, then I would put that in the local nav.

Contact and Report a problem

I haven't really reviewed these pages yet, just added the base styles for forms.

fcoveram commented 1 week ago

How does this handle when lines start wrapping? What is the intended alignment here? I can change it to flex-start for a top alignment (I haven't reviewed this sort of thing yet), but it looks like you're trying to re-center it with the padding.

I was trying to reach something similar to the screenshot attached.

Just to clarify, which link(s)? "About" in the nav sitewide, or the "More about Five…" in the pledge's page content?

Sorry, I meant the "More about Five…"

fcoveram commented 1 week ago

Regarding testimonials, I have a question for @harishankerr: When can we have all the testimonies that will be launched with the site ready? Based on this comment, we're ready to deliver the design with the final content.

ryelle commented 1 week ago

I was trying to reach something similar to the screenshot attached.

I'm not sure what you're trying to align with though, so I can't help. We might not get "pixel perfect" alignment since the text content and screen sizes can change. If you can describe what you're going for, I can see what's possible.

harishankerr commented 1 week ago

When can we have all the testimonies that will be launched with the site ready?

@fcoveram Making sure that we're on the same page - you're asking about the three testimonials on the homepage right? I can surely get it across to you by tomorrow. Or are you asking about more testimonials that we'd be featuring later in a dedicated page?

ryelle commented 1 week ago

The "Contributions" heading on the right side is not Heading Inter 5

@fcoveram Should this site be using the "learn" text styles (like developer, documentation, etc)? Currently it does not, since it's not in the "learn" dropdown, which I thought was how you were conceptualizing sections.

you're asking about the three testimonials on the homepage right? I can surely get it across to you by tomorrow. Or are you asking about more testimonials that we'd be featuring later in a dedicated page?

@harishankerr I thought the Testimonials page (a simple page) was part of the requirement for launch, and post-launch was going to be making a CPT for them. If not, that's fine, but we do need the homepage testimonials (and any other content you have ready) so that I can set up for QA tomorrow, if possible.

ndiego commented 1 week ago

I thought the Testimonials page (a simple page) was part of the requirement for launch, and post-launch was going to be making a CPT for them. If not, that's fine, but we do need the homepage testimonials (and any other content you have ready)

➕

I imagine we could launch with just the homepage testimonials if that works for you @harishankerr. Adding the additional page later should be straightforward since it's an Editor page, correct @ryelle?

I was trying to reach something similar to the screenshot attached.

The staging site looks pretty good to me.

https://github.com/user-attachments/assets/0244f24d-4aca-40f9-8f9d-2063452f88be

ryelle commented 1 week ago

I imagine we could launch with just the homepage testimonials if that works for you @harishankerr. Adding the additional page later should be straightforward since it's an Editor page, correct @ryelle?

Yep, that's right.

harishankerr commented 1 week ago

Thanks for clarifying, friends! @ndiego @ryelle I’ll try getting as much testimonial content as possible at the earliest. If we have enough content, we can ship that testimonial page when we launch. If not, let’s wait until WCUS is over.

We now have three full testimonials, how many more dou you think we’ll need to launch?

ryelle commented 1 week ago

Today's status

Pledge (organization) creation flow looks good — if you're QAing, you can test this by submitting the "For organizations" form with a real email address, the test site will email you to confirm and create the test organization's pledge page.
Pledge invites & user management ("My pledges") looks good — when creating a test pledge, add your own username as a contributor to step through this, the site will email you with details.
Pledge list and pledge detail look good, sorting and search on pledge list is working like production.
Contact and report forms should be styled correctly.
I've updated the homepage with the current demo content, but we can swap that out with the real front page content whenever.

Everything above should be okay to QA now. When doing QA, please create a new issue for each problem. Below I have a template anyone can use for creating the issues- including more details will avoid back and forth.

URL where issue is:

Browser you're using:

What do you see?
(screenshot of issue is helpful)

What should be changed?
(describe in words or CSS the change to make, ex “font size should be 20px”, maybe also screenshot the mockup with highlights)

The Handbook is technically using the new style, but it's not using the handbook layout yet. I'll get to that soon, but that can be omitted from QA, since it's not available on the staging site anyway.

fcoveram commented 1 week ago

Answering per topic

Testimonials content

I see benefits in launching with the testimonials page in addition to the three ones on the homepage. But that depends on whether we have the content.

We now have three full testimonials, how many more dou you think we’ll need to launch?

I think you have the final word on this @harishankerr. As a reminder, each testimony needs to have the same content structure than in the document, plus a photo of the individual.

In that vein, the testimonials on the homepage are ready to be implemented. Images and content are updated in the mockup (cc @ryelle)

Heading styles

@fcoveram Should this site be using the "learn" text styles (like developer, documentation, etc)? Currently it does not, since it's not in the "learn" dropdown, which I thought was how you were conceptualizing sections.

Sorry for not explaining the approach. The "inter" versions in heading styles were thought for the types of pages rather than the site groups (Learn, Extend, and so on). They could be used across the site.

Frontend feedback

Regarding spacing changes in breakpoints, I'm working on the mobile version of mockups and should be done by the end of my day. My intention is showing how layouts change rather than requesting pixel perfect tweaks. How does that sound @ryelle?

It's easier for me to convey the change with a mockup than trying to specify css values.

Everything above should be okay to QA now. When doing QA, please create a new issue for each problem.

Perfect. Thanks for the heads up.

ryelle commented 1 week ago

Sorry for not explaining the approach. The "inter" versions in heading styles were thought for the types of pages rather than the site groups (Learn, Extend, and so on). They could be used across the site.

Oh okay, but they're not mixed-and-matched on sites— in the code, it's been set it up so that a site (eg, Documentation) uses the inter versions by default and no longer has access to the EB Garamond headings. I'll switch this site to the Inter headings today since it sounds like that's the preferred default, and if there are any exceptions you can note then in QA and I'll find some way to make it work.

Regarding spacing changes in breakpoints, I'm working on the mobile version of mockups and should be done by the end of my day. My intention is showing how layouts change rather than requesting pixel perfect tweaks

Okay, it would probably be easier for me if you can note things on the current site rather than starting mobile from scratch. @StevenDufresne has a good issue here: https://github.com/WordPress/five-for-the-future/issues/279

fcoveram commented 1 week ago

I added the mobile mockups a few minutes ago, but I will revisit the site anyway. All good.

ryelle commented 1 week ago

Yeah, I noticed that after I posted 😅 — If you could leave comments flagging the differences to the existing mobile issues, and create new ones for the pages that don't exist, that would be great.

fcoveram commented 1 week ago

Homepage (i3.2)

I revisited the copy document shared by @thetinyl and @harishankerr, and here is a new version of the homepage.

Desktop

Mobile

What do you think of this idea folks?

thetinyl commented 1 week ago

This looks great @fcoveram! I like the icon-illustrations for the three benefits. The compass and megaphone make sense to me re: the content. I do wonder about the globe for the 'Recruit and develop top talent'... I get that it relates to a global community, but I think it's not as quickly understood until you read further. What about adding a human element there with the globe?

fcoveram commented 1 week ago

…I do wonder about the globe for the 'Recruit and develop top talent'... I get that it relates to a global community, but I think it's not as quickly understand until you read further. What about adding a human element there with the globe?

I can try something in the following days. Thanks for the suggestion 🙂

ndiego commented 1 week ago

@fcoveram @ryelle I took a stab at building out the latest design in the Editor (no custom CSS). Ignore the space at the top. That can be fixed in the template.

The main area of concern is the first section. It's not clear to me what that's supposed to look like on wide screens. Should the graphic expand to the edge of the screen? If so, should a max-height be set. Either way, we might need some custom styles. This is what it looks like currently.

fcoveram commented 6 days ago

I fully missed this use case. I revisited the graphic and this one convinces me more.

Mockup of five for the future on desktop and bigger viewport

The W symbol in its dark version with a bottom cut-off keeps the same idea and looks good in the full-width dark stripe.

W symbol over dark background with shape notes

I updated the mockup in the figma file

ndiego commented 6 days ago

I fully missed this use case. I revisited the graphic and this one convinces me more.

Looks great. I just updated the mockup: https://wordpress.org/five-for-the-future-test/

WordPress / five-for-the-future