[website] Improvements to the /x product page #28964

danilo-leal · 2021-10-10T13:17:50Z

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

Iterating to make it better after some customer feedbacks we had:

Deploy preview →

mui-pr-bot · 2021-10-10T13:19:47Z

No bundle size changes

Generated by 🚫 dangerJS against 6b03e4a

danilo-leal · 2021-10-18T16:42:57Z

@oliviertassinari @mbrookes Hey!

Just before going out on holiday, I opened this PR, as a follow-up to our email thread, for consolidating improvements to the X product page but didn't have the time to share it, so here it goes! I have already listed the items mentioned in the email, we can iterate and continue the conversation here if we remember anything else that can be improved.

While we're on it, what company could we use to replace Unity (which is used on every page, not only on the X one)?

mbrookes · 2021-10-18T21:53:56Z

"Date Picker" → Date Range Picker.

Perhaps Date Picker is correct? I was thinking of this page in terms of MUI X Pro.
But OTOH the demo is of the Date Range Picker, which will be in Pro, so...

Date Picker and Tree View are in the lab. Does that count as released? cc: @oliviertassinari

The MUI X package

It isn't a single package.

"Working in progress" -> "Work in progress"

"Sometime soon…" "Some time soon…"

(But could sound like they're almost ready, rather than not started, so "Starting some time soon…"?)

We don't mention MUI X Pro, or link to the pricing page.

danilo-leal · 2021-10-19T16:05:12Z

I was thinking of this page in terms of MUI X Pro.
We don't mention MUI X Pro, or link to the pricing page.

Thinking about this. Should we add a section explaining/clarifying MUI X and MUI X Pro? And then use this section to link to the pricing page?!

danilo-leal · 2021-10-19T18:25:37Z

Swapped Unity for Apple (easy choice!) and reviewed the logos alignment. Used Siemens as a baseline for all of them. Apple and Boeing are kinda tricky, the first because it's only an icon and the second because the icon ends way lower than the text, which can hurt the perception of alignment. What do you think? Here's the baseline I drew as reference:

danilo-leal · 2021-10-19T18:54:42Z

Thinking about this. Should we add a section explaining/clarifying MUI X and MUI X Pro? And then use this section to link to the pricing page?!

A first iteration of this:

Thought about adding just above the Roadmap section. Still not sure about the screenshot of the pricing table, though. Didn't want to leave it without anything but couldn't think of something better now. What do you think?

mbrookes · 2021-10-20T11:59:08Z

What do you think?

I would align the caps-height and/or median (not always possible to do both), and let the icon fall where it will – the same as was done for the previous homepage.

Apple – it's hard to tell until the other logos are aligned (particularly Boeing), so we can see how it sits, but I suspect it needs to be nudged up a bit

mbrookes · 2021-10-20T14:16:32Z

Should we add a section explaining/clarifying MUI X and MUI X Pro? And then use this section to link to the pricing page?

Sounds better

mbrookes · 2021-11-01T03:49:56Z

This seems to have stalled. What's the latest?

danilo-leal · 2021-11-01T13:12:34Z

This seems to have stalled. What's the latest?

Haven't worked on it in the last week. But not sure if you've seen it, here's the first iteration on the section trying to clarify MUI X and MUI X Pro. I'll try to have more iterations this week but happy to have your thoughts on this one already.

oliviertassinari

Date Picker and Tree View are in the lab. Does that count as released? cc: @oliviertassinari

@mbrookes I guess so, it's not great, but a first version is released. To be honest, sometimes, I feel that I'm pushing too far in terms of quality for the components, that many developers don't care this much. They would take whatever we give them. I simply can't resign myself, that it's the right thing to do not to aim higher.

docs/src/components/home/CompaniesGrid.tsx

mbrookes · 2021-11-01T19:33:32Z

not sure if you've seen it

Sorry, I missed it. We can fix up the wording once it's in the PR. I don't have any better ideas for the image sorry.

docs/src/components/productX/XPlans.tsx

mbrookes · 2021-11-15T20:32:07Z

Regarding the logos, using Southwest as the benchmark, and based on what has worked well in the past:

Boeing's text is about half the hight of the other logos.
As suspected, Apple is a bit low. In one instance they center on the body of the apple. That might work.
Seimens sits a pixel or so low (probably not noticable at normal resolutions), and is ~15% shorter than Southwest.
Volvo is correct, but the heavy font weight makes it more prominent. I think it will be less pronounced when Siemens is the correct height.
Deloitte is correct.

…pr/28964

…material-ui into pr/28964

mbrookes · 2021-11-20T05:18:41Z

This is the closest I could get. Unfortunately since the logos have been sliced "old school" style, and have (inconsistent)
whitespace built into the image, it wasn't possible to resize them in CSS without affecting their vertical position relative to the top of the grid, so I had to make an adjustment. (Personally I would have preferred to start with images that fit their bounding box.) This also means that the tagline is lower too, relative to the icons (compared to other pages), so feel free to fix that if it's a concern.

It also wasn't possible to make Boeing any taller, having reached the max width, but it suffers from the same issue as Volvo with the heavy typeface, so perhaps it's just as well! I vertically centered the text instead, which with the low-set graphic element looks okay.

mbrookes · 2021-11-20T19:44:12Z

I've pushed my changes, even though they feel a bit hacky due to the constraints previously mentioned. Feel free to iterate in it.

danilo-leal · 2021-11-22T19:12:49Z

Is everyone okay with merging this one?

siriwatknp · 2021-11-23T02:17:00Z

Is everyone okay with merging this one?

I'm good. Can you check the logo alignment in the checklist again?

danilo-leal · 2021-11-24T21:53:17Z

@mbrookes Are we good for merge?

siriwatknp · 2021-11-26T13:53:26Z

@eps1lon Can you suggest me how to trigger "ci/circleci: test_bundle_size_monitor"? It appears to occur in several PRs.

eps1lon · 2021-11-26T14:12:41Z

Branch needs to be updatet. Every pr without this check is outdated

…pr/28964

oliviertassinari · 2021-11-29T15:29:03Z

docs/pages/x.tsx

@@ -27,6 +28,7 @@ export default function Home() {
        <XComponents />
        <XDataGrid />
        <XTheming />
+        <XPlans />


I love how it looks

initial commit (changing copywriting)

ed66585

danilo-leal added the website Pages that are not documentation-related, marketing-focused. label Oct 10, 2021

danilo-leal marked this pull request as draft October 10, 2021 13:22

This comment has been minimized.

Sign in to view

add time icon

aab535c

danilo-leal added 3 commits October 19, 2021 13:11

copywriting tweaks

a97cf72

chaneg Much More link on the Data Grid section

db1a151

swap Unity for Apple and align logos to the baseline

1789372

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Oct 29, 2021

oliviertassinari reviewed Nov 1, 2021

View reviewed changes

docs/src/components/home/CompaniesGrid.tsx Outdated Show resolved Hide resolved

Merge branch 'master' into x-page-improvements

094cee5

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Nov 12, 2021

add XPlans section

9a04a67

danilo-leal marked this pull request as ready for review November 15, 2021 17:40

danilo-leal requested review from mbrookes and siriwatknp November 15, 2021 17:40

mbrookes requested changes Nov 15, 2021

View reviewed changes

docs/src/components/productX/XPlans.tsx Outdated Show resolved Hide resolved

docs/src/components/productX/XPlans.tsx Outdated Show resolved Hide resolved

siriwatknp added 3 commits November 16, 2021 11:48

Merge branch 'master' of https://github.com/mui-org/material-ui into …

1807732

…pr/28964

update margin

937e46f

Merge branch 'x-page-improvements' of https://github.com/danilo-leal/…

e58ce33

…material-ui into pr/28964

This comment has been minimized.

Sign in to view

fix alignment

da7bf44

siriwatknp approved these changes Nov 16, 2021

View reviewed changes

siriwatknp requested review from mbrookes and oliviertassinari November 16, 2021 05:05

fix duplicate key

b092f6b

mbrookes added the on hold There is a blocker, we need to wait label Nov 16, 2021

Olivier's feedback

1f8e6d4

"fix" logos

bda0bc6

mbrookes removed the on hold There is a blocker, we need to wait label Nov 20, 2021

mbrookes mentioned this pull request Nov 22, 2021

[blog] MUI X v5 blog post #29590

Merged

flatten offset

608b4e9

mbrookes approved these changes Nov 25, 2021

View reviewed changes

danilo-leal and others added 2 commits November 25, 2021 20:15

minor transition fix

db15ffe

Trigger Build

fb63e5e

Merge branch 'master' of https://github.com/mui-org/material-ui into …

6b03e4a

…pr/28964

danilo-leal merged commit 42ce359 into mui:master Nov 26, 2021

danilo-leal deleted the x-page-improvements branch November 26, 2021 15:30

oliviertassinari reviewed Nov 29, 2021

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[website] Improvements to the /x product page #28964

[website] Improvements to the /x product page #28964

danilo-leal commented Oct 10, 2021 •

edited by mbrookes

Loading

mui-pr-bot commented Oct 10, 2021 •

edited

Loading

danilo-leal commented Oct 18, 2021

This comment has been minimized.

mbrookes commented Oct 18, 2021 •

edited

Loading

This comment has been minimized.

This comment has been minimized.

danilo-leal commented Oct 19, 2021

danilo-leal commented Oct 19, 2021

danilo-leal commented Oct 19, 2021

mbrookes commented Oct 20, 2021

mbrookes commented Oct 20, 2021

mbrookes commented Nov 1, 2021

danilo-leal commented Nov 1, 2021

oliviertassinari left a comment •

edited

Loading

mbrookes commented Nov 1, 2021

mbrookes commented Nov 15, 2021 •

edited

Loading

This comment has been minimized.

mbrookes commented Nov 20, 2021 •

edited

Loading

mbrookes commented Nov 20, 2021

danilo-leal commented Nov 22, 2021

siriwatknp commented Nov 23, 2021

danilo-leal commented Nov 24, 2021

siriwatknp commented Nov 26, 2021

eps1lon commented Nov 26, 2021

oliviertassinari Nov 29, 2021

[website] Improvements to the /x product page #28964

[website] Improvements to the /x product page #28964

Conversation

danilo-leal commented Oct 10, 2021 • edited by mbrookes Loading

mui-pr-bot commented Oct 10, 2021 • edited Loading

danilo-leal commented Oct 18, 2021

This comment has been minimized.

mbrookes commented Oct 18, 2021 • edited Loading

This comment has been minimized.

This comment has been minimized.

danilo-leal commented Oct 19, 2021

danilo-leal commented Oct 19, 2021

danilo-leal commented Oct 19, 2021

mbrookes commented Oct 20, 2021

mbrookes commented Oct 20, 2021

mbrookes commented Nov 1, 2021

danilo-leal commented Nov 1, 2021

oliviertassinari left a comment • edited Loading

Choose a reason for hiding this comment

mbrookes commented Nov 1, 2021

mbrookes commented Nov 15, 2021 • edited Loading

This comment has been minimized.

mbrookes commented Nov 20, 2021 • edited Loading

mbrookes commented Nov 20, 2021

danilo-leal commented Nov 22, 2021

siriwatknp commented Nov 23, 2021

danilo-leal commented Nov 24, 2021

siriwatknp commented Nov 26, 2021

eps1lon commented Nov 26, 2021

oliviertassinari Nov 29, 2021

Choose a reason for hiding this comment

danilo-leal commented Oct 10, 2021 •

edited by mbrookes

Loading

mui-pr-bot commented Oct 10, 2021 •

edited

Loading

mbrookes commented Oct 18, 2021 •

edited

Loading

oliviertassinari left a comment •

edited

Loading

mbrookes commented Nov 15, 2021 •

edited

Loading

mbrookes commented Nov 20, 2021 •

edited

Loading