[website] Update product descriptions and social preview images

[danilo-leal]

• I have followed (at least) the PR section of the contributing guide.

End of 2023 edit to this PR description: adding social previews (or open graph) images to each one of our marketing pages. I've updated their descriptions to match what's used in the hero title of each one as well as images for those that weren't initially accounted for in the very first iteration of this PR 😌

[mui-bot]

Netlify deploy preview

https://deploy-preview-32181--material-ui.netlify.app/

Bundle size report

No bundle size changes (Toolpad)
No bundle size changes

Generated by 🚫 dangerJS against 96fbbed

[siriwatknp]

I would leave the decision to you, @oliviertassinari and @samuelsycamore but here are my thoughts.

MUI Core

- Foundational components for shipping features faster
+ Comprehensive components for shipping UIs faster

MUI X

- Advanced components for complex use cases
+ Advanced components for sophisticated use cases.

[oliviertassinari]

I would leave the decision to you, @oliviertassinari and @samuelsycamore but here are my thoughts.

No matter what we pick, shouldn't it be in sync?

and

So we have a single description.

https://master--material-ui.netlify.app/core/

[danilo-leal]

Yes, absolutely! Thanks for pointing that out, I'll make sure to update those as well.

[mapache-salvaje]

Personally I'm partial to the wording as it is in the updated social images (though of course I'm biased because I wrote it 😅). It also matches the homepage copy revisions PR that we merged yesterday. I do like the word "Comprehensive" in @siriwatknp's suggestion but I think that's better suited as a descriptor of our "libraries" rather than the "components," if that makes sense. (e.g. "Our comprehensive UI library contains all of the foundational components you need" etc.)

[oliviertassinari]

The change of wording in "Design kits" looks great, I would challenge the others.

[oliviertassinari]

I have just merged #32211 which syncs what we have in the npm package description (slave) and what we have on mui.com (source of truth).
If we change what we have on mui.com in this PR (effectively going beyond the title "update the social preview images), please also keep the pacakge.json in sync.

[mbrookes]

Wording aside, I wonder if the new font size is big enough at the resolution these images will be rendered at? It's certainly not great at the GitHub preview size on a non-retina monitor (It's 3440 × 1440, 34" wide-screen).

[danilo-leal]

Yup, thought the same. Please check again!

[danilo-leal]

@oliviertassinari I'll need your help to change it in other places outside the website, like Twitter, LinkedIn, etc. Let me know if there are more of them!

[oliviertassinari]

Happy to do it, and to look into how to give the the access for others to do it. I will wait for this PR to be merged though.

[mapache-salvaje]

Is everyone happy with the wording on these cards? If so, I think we should use this copy as the main source of truth across our marketing site and docs. Should we use this PR to update the mui.com homepage, or create a new PR?

[mbrookes]

I will wait for this PR to be merged though

Should we not wait for the logo PR to be merged first? (Not sure why that stalled.)

[danilo-leal]

Yeah, guess so. I'll try to get back to that when possible.

[oliviertassinari]

What's missing with this PR to move forward? Maybe we could start with the descriptions, and once we are aligned with them, move to update the visuals (in a different PR, there will be a LOT of them to update)?

[mbrookes]

What's missing with this PR to move forward?

• Removing the graph-paper noise, and possibly the gradient.
• Updating with the revised logo once that PR is merged.

[michaldudak]

@danilo-leal, any chance we could move this forward? It's been approved for well over a year now.

[danilo-leal]

@michaldudak Yeah ⎯ we could either move forward now, without new logos for each product, or wait until we have them ready to go. What do you think? I'm leaning toward the second option there.

[michaldudak]

👍 All right. I just wanted to have a clearer picture of the plans for this PR.

[danilo-leal]

@oliviertassinari + @samuelsycamore + @mbrookes — would love it if you all could take a refreshed look at this PR!

[mbrookes]

The content LGTM, but the file sizes seem disproportionate (10X the previous ones). Given the graduated background (if that's the right term?) perhaps JPEG is the better format?

I don't think it will move the needle enough to help, but we also used to run all images through https://imageoptim.com/.

Probably out of scope here, as I imagine it would have to be changed elsewhere, but have we considered using the same typeface for MUI as on docs/public/static/social-previews/home-preview.png as for the other cards? Always thought that looked a bit out of place.

[danilo-leal]

(Rambling warning ↓ we can expand on this elsewhere, too!)

We can definitely iterate on the typeface we're currently using for the "MUI" wordmark! Earlier this year, I was exploring some other fonts to move away from what we had earlier for headings, Jakarta, and landed on Lexend — the current one I'm using on the image, and in general, for the logo. It's a super extensible font family (and variable!), but still, I wasn't feeling it for the actual documentation and website headings. It did feel great for the logo wordmark, though, particularly because of a stylistic set that contains that serif I, which has always been a pet peeve of mine when seeing "MUI" written with a standard sans serif font — the M and U characters are super wide, whereas the I is so thin; looks unbalanced. Then, as usual in my reference-seeking process, I always, at least quickly, check Stripe up. And then, I realized, given they don't have a "logo icon" (it's just either the full stripe word written or just the S), they use one font for that (FF Fago), and another for their website, docs, and app (Söhne)! Then others came to mind (Airbnb, Slack, Tumblr), to which point, it made me feel like it wasn't super weird or a too inconsistent move. 😅 However, with all of that said, I do see it's not a fully solved problem as we have MUI-prefixed product names, and in those images, I'm using the font we're now currently using for headings (General Sans), and thus, my pet peeve is still there, and then, it starts to feel inconsistent as any "MUI" mention should probably use the logo font when in imagery settings like this? Not sure. But, anyway! Happy to iterate more, and we'll likely need to in the near future!

[mbrookes]

Thanks for the detailed feedback on your thought process! Lots of moving parts. Let's move it offline. Happy to be a sounding board!