Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Epic: 6.5 Microsite #58577

Closed
2 of 3 tasks
thetinyl opened this issue Feb 1, 2024 · 44 comments
Closed
2 of 3 tasks

Epic: 6.5 Microsite #58577

thetinyl opened this issue Feb 1, 2024 · 44 comments
Labels
[Type] Iteration Scoped iteration of an effort from a tracking issue or overview issue ideally for a major release.

Comments

@thetinyl
Copy link

thetinyl commented Feb 1, 2024

What is this?

This tracking issue will cover the work needed for the 6.5 release microsite. The microsite is a landing page on WordPress.org that showcases all the highlighted features and enhancements for a particular release. Contrary to the About page, its audience includes folks who may not already be using WordPress.

Aesthetically, the design for this microsite has followed general WordPress branding instead of the unique flavor of any particular release.

Examples of previous highlight grids for reference:

Timing*

  • Copy draft: February 21
  • Initial design: March 7
  • Final design: March 21

*Proposed dates are flexible.

Content

The content can follow what's being included in the About page, but should also be mindful of a broader audience. Once About page content is ready, we'll share it here for reference.

@thetinyl
Copy link
Author

thetinyl commented Feb 1, 2024

@jasmussen @richtabor For awareness.

I don't have permission to add any kind of tags or assignees, so want to make sure this doesn't get lost.

@jordesign jordesign added the [Type] Tracking Issue Tactical breakdown of efforts across the codebase and/or tied to Overview issues. label Feb 2, 2024
@thetinyl
Copy link
Author

@richtabor @jasmussen Not sure who else is available to help with the microsite, but the About page content might help kick things off. It's not 100% final, but it's close (based on the level of feedback received).

@jasmussen
Copy link
Contributor

I'll be there to help, I've also been working on other aspects of the wp.org site.

That's also a note that design-wise, this page doesn't follow release-branding as the highlight grid and about pages do, it follows the wp.org design, even if the content inside follows release branding. Depending on bandwidth as we near the release, I would love to also ask @jameskoster and/or @SaxonF for help here.

@SaxonF
Copy link
Contributor

SaxonF commented Feb 23, 2024

Only just started looking at this so nothing to share just yet. A fun idea we can explore is introducing some interactive aspect / easter egg across each section of the page using the interactivity API.

I'm starting with wireframes here. Will keep going with this on Monday.

@jameskoster
Copy link
Contributor

I begun sketching yesterday as well. @SaxonF how do you feel about collating all the microsites in a single file?

@thetinyl
Copy link
Author

A fun idea we can explore is introducing some interactive aspect / easter egg across each section of the page using the interactivity API.

I had a similar thought! Perhaps something using reactions, so folks can actively ❤️ or 👍 as they parse through the features.

@BenjaminZekavica
Copy link
Member

@thetinyl Can we start to design the Microsite? Or we have to wait for the final feature list for 6.5? I hope that the Font Manager is included in the next release.

@jameskoster
Copy link
Contributor

@BenjaminZekavica we've begun exploring design in the Figma linked above.

@hanneslsm
Copy link

Is there an specific issue for the About Page? I couldn't find it.
There is a small typo on the About page → Credits that might go unnoticed:

Core Contributors to WordPress 6.4

@thetinyl
Copy link
Author

thetinyl commented Mar 4, 2024

@hanneslsm Thanks for pointing that out. The Credits page is updated dynamically later in the RC cycle of the release, so that should switch on its own. If you notice anything else though, you can share that in this Trac ticket—it's where the About page work is being managed. This issue is just for the standalone microsite. 😄

@BenjaminZekavica
Copy link
Member

BenjaminZekavica commented Mar 4, 2024

@SaxonF Thank you for your contribution :) It look nice 👍

Do you can give @richtabor and me permissions to edit as well?
My e-mail: info@benjamin-zekavica.de

@jasmussen
Copy link
Contributor

I want to restate/repeat that there really isn't much design work to be done for the microsite, it should be thought of as a loose copy of the About page but in the WordPress.org website with an inherited-from-that design language. So colors, fonts, layout, those are inherited from previous microsites, and it's mostly a matter of arranging the images in the block editor, instead of the rigid layout of the zip-file-bundled About page.

@BenjaminZekavica
Copy link
Member

@jasmussen Yes, that's true. Rich and me decided to choose the Design from previous 6.4 Release. We only will change some colors and images. One question in our Figma File the Microsite was deleted :/ I can't find it. Do you can restore this or?

@jasmussen
Copy link
Contributor

One question in our Figma File the Microsite was deleted :/ I can't find it. Do you can restore this or?

There's still this from 6.4. But we should be working in this one now no?

@BenjaminZekavica
Copy link
Member

@jasmussen
Copy link
Contributor

Actually I cannot, I think @SaxonF needs to give access. Though please don't delete anything from the file.

@BenjaminZekavica
Copy link
Member

@jasmussen @thetinyl I added one design now. I reused all components from the About Page.
Here is the Figma File – I have now premission to edit this file as well.

@richtabor and me decided to reuse the Design from 6.4 with our compontens.

Microsite-Example

@jasmussen
Copy link
Contributor

Thanks for the effort. There's a big of divergence from past microsites, however, in terms of typography, font sizes, font weights, and colors. This is related to what I mentioned around the wp.org design language. This feedback also applies to the sketch that existed already in the Figma file. To that end, I think we'll need to get much closer to the 6.4 version.

The nuance here, to go even further, is that we are building a section of the website. So it should look like the website. That means we only ever use preset colors, preset font sizes, preset shadows, etc. They should all look the same, give or take a hero image. Finally, there are some featurettes now that we can include as videos on the page, this is something that isn't possible in the bundled about page. I'll see if I can't find an opportunity to visualize what I mean.

@jasmussen
Copy link
Contributor

Today I took a stab at combining your work, @BenjaminZekavica with the first effort by @jameskoster and @SaxonF, but also working across all of those through the constraint of the wp.org design language, as far as the colors, font sizes, and metrics we inherit with that. The biggest change is leveraging the existing page layout from the 6.4 page, and interspersing the content above with the featurettes that have since been produced. As a result, the following layout can come together in the block editor in minutes:

combined microsite

Aside from your feedback, a few notes on the above:

  • The text could use updates
  • The highlight grid is the old version, it will need to use the new version being worked on

Let us know your thoughts.

@BenjaminZekavica
Copy link
Member

@jasmussen It looks good for me, but we have to remove the section with the pattern override feature.

@thetinyl
Copy link
Author

I think this looks fine from a layout perspective. Since edits can be made in the Editor, I'm comfortable doing copy/content updates directly there to not hold things up.

I'm mostly curious about one bit of rationale for now: What prompted moving the Interactivity API further up?

@annezazu
Copy link
Contributor

The 2x, 4x, 6x feels very duplicated here and a bit confusing, as if it's referring to different features. I might have the highlight grid more towards the bottom or at the top in that case but with enough space away from those very distinct numbers.

Screenshot 2024-03-13 at 1 18 54 PM

Agreed with Lauren on the text/copy updates ✨ and not wanting to hold things up there. The font section at the very top feels duplicative for example.

@jasmussen
Copy link
Contributor

Okay, I've built out the first iteration of the page. Edit | Preview. It came together fairly well, and I think we're off to a good start. Lauren feel free to edit directly.

A few problems/knowns:

  • The highlight grid is a placeholder.
  • I wasn't able to upload the new video featurettes, I hit a size limitation. I'll investigate in more depth and get that working. This also allows any last feedback to land for those, separately.
  • The idea outlined previously around showing the interactivity API in practice using a query loop I could not get to work, since that loop isn't actually able to access the news posts. We could theoretically create some dummy posts on the particular install that's used for the microsite, but I'm not sure that's the right approach. I'll investigate as well.

I'm mostly curious about one bit of rationale for now: What prompted moving the Interactivity API further up?

The point may be moot since we perhaps won't be able to do the thing I'd hoped for, regardless. But the motivation was in part that it's one of the big features of this release, be nice to celebrate. It was also to include some of the work Jay and Saxon did earlier on.

The 2x, 4x, 6x feels very duplicated here and a bit confusing, as if it's referring to different features. I might have the highlight grid more towards the bottom or at the top in that case but with enough space away from those very distinct numbers.

Omitted those. Have a look at the above, let me know. It's super easy to edit and move around. Let me know, hopefully this gets us moving.

@thetinyl
Copy link
Author

Woohoo! Thanks for throwing that together @jasmussen.

I've started making content edits. For the most part, I think we can use what's on the About page with only a few exceptions... so that makes things simple enough.

What's been done:

  • Updated the hero headline and tweaked the intro paragraph slightly
  • Updated the Font Library section: related to what @annezazu pointed out in terms fo repetitiveness... I think we can mitigate that by making that second paragraph feel more connected to the first. I've made the header an H3 there, but I feel like there's something more that can be done. I think the issue is treating them at the same level (info hierarchy-wise) when one's just building on the same feature.
  • Updated the shadow/background section
  • Highlighted the final contributor number... mostly as a personal reminder that that needs to be updated. I'm not trying to claim that fluorescent green is a better look (promise! that's so 6.2, anyways)

What's outstanding:

  • I'm not sure how to solve for the Interactivity conundrum. It's too bad if we can't show something in action. For now, I've left that as is. If we're moving it up, we'll also need to replace it in the section at the bottom with something else. Unless there's a different layout we could use... maybe a 3-column? Might be too much copy there for that.

@jasmussen
Copy link
Contributor

Nice updates!

I think if we have to omit the interactivity API section, we'll handle that, this page benefits from being easily updated. But in case there's a chance, I've sent a ping to @ryelle, she might be able to help. If not, that's okay too. I've also had word that it should now be possible upload the videos. I have to work on some other things today, and there are some video updates I need to do, so I'll revisit on Monday.

@BenjaminZekavica
Copy link
Member

@jasmussen Do you can give me access to see the Page in WP-Admin I can't see the preview link?
My WP Username: Benjamin_Zekavica

@jasmussen
Copy link
Contributor

I am not permitted to give edit access to the WP.org site, but here's a screenshot of the work in progress:

wip

@jasmussen
Copy link
Contributor

I've tentatively removed the interactivity API section, and uploaded the latest videos to the page. Let me know how this feels @thetinyl

@annezazu
Copy link
Contributor

Noting this shift in the performance improvements mentioned by Ella here #58028 (comment) after updating this previous tracking issue on performance improvements for 6.5 . Let's get this updated for the microsite too! TLDR: 5x faster typing processing & 2x faster editor loading for both site and post editors.

@jasmussen
Copy link
Contributor

Gave this a quick edit, but @thetinyl feel free to update the perf section too.

@thetinyl
Copy link
Author

Thanks for the updates both!

@jasmussen Overall, I think removing the big Interactivity API section makes sense since we have it covered down below. How can we avoid the big charcoal squares of the videos on the page? Can we control what the thumbnail shows?

I'm going to have to take a pass at the copy again tomorrow, as there are likely some other revisions to the general announcement post that could impact the microsite. Want to make sure they're all covered/vetted.

@jasmussen
Copy link
Contributor

How can we avoid the big charcoal squares of the videos on the page? Can we control what the thumbnail shows?

Good call, we can, yes. Should I create square cards that feature the title of each, or do you have recommendations? Should be fast to do.

@thetinyl
Copy link
Author

If there's a particular screen in each demo that might be good to screenshot and use as the thumbnails, I think that could work nicely. I'm hesitant to use the titles as that will get repetitious with the existing headlines on the page—and be less visually interesting.

What do you think @jasmussen?

@jasmussen
Copy link
Contributor

Good call, done! Works well!

@thetinyl
Copy link
Author

Woohoo! Looks fine to me.

The last bits of copy editing have also been done.

@annezazu Not sure what your to-do list is like, but if you'd be interested in taking another look here you are most welcome.

@annezazu annezazu added [Type] Iteration Scoped iteration of an effort from a tracking issue or overview issue ideally for a major release. and removed [Type] Tracking Issue Tactical breakdown of efforts across the codebase and/or tied to Overview issues. labels Mar 21, 2024
@annezazu annezazu changed the title Tracking issue: 6.5 Microsite Epic: 6.5 Microsite Mar 21, 2024
@BenjaminZekavica
Copy link
Member

@jasmussen Thank you :) For me it looks fine too 👍

@ndiego
Copy link
Member

ndiego commented Mar 28, 2024

@thetinyl @jasmussen @BenjaminZekavica what are the next steps here? When should the microsite be deployed on WordPress.org? cc @ryelle

For the next release, can we make sure there is a corresponding issue created in wporg-main-2022. Even though the design is created in the Editor, it actually gets converted into a pattern by the Meta team and stored in this repo for the main WordPress.org theme.

@thetinyl
Copy link
Author

what are the next steps here? When should the microsite be deployed on WordPress.org?

Good questions, @ndiego! The content is all set to go. We might need to update the contributor number, but it doesn't look likely and we won't know for sure until Mon/Tues next week.

I believe—@jasmussen can jump in if this isn't the case—that the design is also ready.

I think we're ready to deploy as soon as someone can!

For the next release, can we make sure there is a corresponding issue created in wporg-main-2022.

Absolutely! I'll make sure this goes into the MarComms release documentation. For this time around, I believe the desire was to create a companion issue there, is that still the case?

@ndiego
Copy link
Member

ndiego commented Mar 29, 2024

Absolutely! I'll make sure this goes into the MarComms release documentation. For this time around, I believe the desire was to create a companion issue there, is that still the case?

Yes, if you could create a simple companion issue there to let Meta know when it's ready to deploy, that would be great. They can then reference that issue when deploying the microsite.

@thetinyl
Copy link
Author

thetinyl commented Apr 1, 2024

@ndiego Done!

@BenjaminZekavica
Copy link
Member

@thetinyl I updated the Highlight Grid. Please export it and re-upload it to the Media Library :) Thank you

@jasmussen
Copy link
Contributor

@BenjaminZekavica Can you send me a deep Figma link to the precise grid to export? Then I'll handle it, thanks.

@BenjaminZekavica
Copy link
Member

@jasmussen Thank you so much :) Here is the link: https://www.figma.com/file/IGwRMs64Hzr9busD7EkbEm/About-Page-6.5?type=design&node-id=5645%3A11260&mode=design&t=B862F570YCZCVDge-1

@jasmussen
Copy link
Contributor

Done!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Type] Iteration Scoped iteration of an effort from a tracking issue or overview issue ideally for a major release.
Projects
None yet
Development

No branches or pull requests

9 participants