[website] homepage rebranding #27488

siriwatknp · 2021-07-28T09:38:57Z

After had a conversation with @danilo-leal, it might be better to have 1 PR for the whole page so that the discussion does not scatter and I don't need to rush for merging.

Preview: https://deploy-preview-27488--material-ui.netlify.app/branding/home/

Checklist

UI

Functionality

link to other pages
Responsive
dark mode
npm install copy
diamond sponsor (open email)
~~email subscribe~~ wait for conclusion
Core component demo (good enough for 80%, refine later)
~~Advance component demo (plan to use the same as in X page)~~

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

…branding/home

siriwatknp · 2021-08-05T08:01:42Z

Merged as the main 80% tasks are done (except ProductAdvanced which will be played in a separate PR). For 20% of refinements (from comments) will be prioritized in a separate PRs.

oliviertassinari · 2021-08-05T18:22:11Z

@siriwatknp Where should we share feedback on issues on the homepage I didn't have the time to provide yet? e.g. missing social links, layout shift on KPI section, SEO tags

siriwatknp · 2021-08-06T03:56:23Z

@siriwatknp Where should we share feedback on issues on the homepage I didn't have the time to provide yet? e.g. missing social links, layout shift on KPI section, SEO tags

@oliviertassinari You can provide them in this PR, I will collect and work on it. Once it is ready, will open a PR for improving homepage.

oliviertassinari · 2021-08-06T11:39:55Z

@siriwatknp I'm consolidating what I found so far (and will keep adding here). I wouldn't be against a dedicated page that groups all the feedback

Homepage

General

Link strategy
Cleanup comments in MarkdownElement
No asset URL constructions,
No relative import, e.g. import ShowcaseContainer from './ShowcaseContainer'; is KO IMHO, make it harder to move code around.
We will probably have to look into how to organize the code. We might want to clearly isolate the website branding from the documentation, unclear. I think that it's important we keep related code together.

HTML structure

Missing the <Head> component, it comes with ⬇️
<title>
description
social sharing card
SEO meta
HTML errors https://validator.w3.org/nu/?doc=https%3A%2F%2Fnext--material-ui.netlify.app%2Fbranding%2Fhome%2F
There are quick wins we can do on the lighthouse report

Hero

Not enough space for the companies

Maybe we can only have 2 columns, e.g. before

Broken tabs indicator size, it's not fixed yet, see my previous fix proposal (in the core)

Products core

Something is off with the icon on smaller screens and with SSR only.

actual:

expected:

At the end of the custom theme animation, I get a replay button. When I switch to Material Design and come back the replay button is gone.
Maybe we should have a caret when text is added, to make it easier to focus
Maybe we should have a skip animation button. We might not have the time to see it run
There might be something to do with the scrollbars

Products Advanced X

TODO

Products Templates

When first loading the page with an empty cache, the image loading UX is a bit weird

Products kits

When first loading the page with an empty cache, the image loading UX doesn't allow the animation to function

What do you get?

tabs lowercase -> uppercase

Testimonials

Hardcoded KPIs: 2M, 70k, 2k, 13k
Should we add a link on the KPIs? Stars => GitHub, download => npm, etc.
Company logo color
Layout shift between SSR and client-side hydrated
Headers sequence

Our sponsors

Out of date sponsors
Updated layout
srcSet for the mages

Go live

The layout change based on the font loaded state.

Loaded (2 lines)

Unloaded (1 line)

Footer

Missing LinkedIn/Twitter/GitHub links in the footer
Static year 2020 in the footer
Subscribe newsletter action. We had implemented something in https://next.material-ui.com/branding/about/, using https://sendinblue.com/. If you need credentials, we have them in https://trello.com/c/6T88fmxk/2777-sendinblue
Does it still make sense to mention the version and license? It's not scaling to more products. Maybe have this on the docs only?

mbrookes · 2021-08-07T00:09:45Z

Not so sure about having this so washed out, it doesn't exactly look "ultimate":

The component alignment is off. It's neither consistent, nor "random".The left column of components is left aligned, the right column has been drinking.

mbrookes · 2021-08-07T00:20:02Z

The choice of companies looks arbitrary. We dropped Coursera from the homepage a long time ago.
Also, funny that I originally had these in grey (as a common design pattern), and someone (cough @eps1lon) compliained that they looked disabled, but here we are again, and now I'm thinking the same! (The color might make a difference).

mbrookes · 2021-08-07T00:20:17Z

Not a big fan of this typeface. Something about the "t" in particular looks cheap:

mbrookes · 2021-08-07T00:22:08Z

I asked in the design phase, but didn't see an answer: what even is this component supposed to be?

mbrookes · 2021-08-07T00:23:00Z

This is just too much for something that's supposed to demonstrate simplicity:

And that's before the custom theme kicks in

mbrookes · 2021-08-07T00:26:02Z

Once started, you can't pause the animation, and the progress bar doesn't appear do anything once clicked.

mbrookes · 2021-08-07T00:28:15Z

Much of the theme code appearing doesn't seem to have any direct impact on the accompanying demo:

There's no connection between the code animation and the resulting component. Compare the library from which this idea was copied.

mbrookes · 2021-08-07T00:30:30Z

We seem to have leaked internal labels into the production implementation:

mbrookes · 2021-08-07T00:31:45Z

WIP?

mbrookes · 2021-08-07T00:33:25Z

This needs work:

mbrookes · 2021-08-07T00:35:00Z

I believe it's Material-UI X, not Advanced X:

Also, it doesn't need two logos.

mbrookes · 2021-08-07T00:37:09Z

The animation induces motion sickness:

Perhaps static would be better?

mbrookes · 2021-08-07T00:38:27Z

"Easily customized"?

mbrookes · 2021-08-07T00:39:39Z

"2k people open-source community." -> "2000 member open-source community."

mbrookes · 2021-08-07T00:40:56Z

"We care about making it good for everyone." -> "We care about making your UX great for everyone."

mbrookes · 2021-08-07T00:43:01Z

"Want more components?" -> "Need more components?"

oliviertassinari · 2021-08-07T22:59:51Z

@mbrookes

I had the same initial feeling when I was first introduced to the design. It was looking off, it took me time to realize I could hover and start to interact, then it felt better.
I would be in favor of trying to remove the opacity. Maybe instead, try having some sort of small burst of motion to invite interactions (I assume it's why we have the opacity in the first place).

Thinking more about it, reducing (to make it less varnish) or increasing (to make it more obvious its on purpose) the opacity, and having it trigger to 1 when hovering the whole section (not each component) might work well.

I personally didn't notice. Are you saying we need to change it to two columns?
I recall a similar internal discussion when we introduced "Who's using Material-UI?" on homepage [docs] Who's using Material-UI? #15169. One of the issues is that these brands have policies around how the logos are supposed to be displayed: unaltered often, to help recognition. The other issue is that a colored version might draw too much attention. I'm in favor of using a colored version if possible. It's what Stripe, Retool, Slack, MongoDB, GitHub do on their homepage. If it draws too much attention, keeping it grey can be great too, with a change of contrast on hover to make it clear it's not disabled.
I guess it's a matter of taste on this one? I personally really like it. Another one that is great and close is the one used by StackBlitz.

We have a card item. From what I understand, this section aims to show how to compose the exciting components. Why does the "component is supposed to be" important? What would you do instead? I personally think that the current demo is in the essence of what we need.
Since we have a horizontal scrollbar, I would propose we don't set a max-length on this demo. We would go from 52 lines to 36 lines. I also wouldn't be against removing the IconButton for simplicity.
To consolidate with [website] homepage rebranding #27488 (comment), I have reported a similar pain.
Could you clarify? Each customization in the theme directly impacts the demo, I don't follow the description.
What's the expected wording?
Yes, WIP

Please expand, "need work" is not actionable. For instance, what do you envision? IMHO, what's missing is a video as in https://antforfigma.com/ which is outside of the scope of this effort
Did you try to render it with only X, or Material-UI X? It's not really great. X is too short to really make sense. Material-UI X is inconsistent with the other items.
It does trigger a bit of motion sickness for me too. Considering that people are not supposed to stay on it long. Maybe we can go from 30s to a higher amount for the duration, and add the media prefers-reduced-motion query to completely disable it when asked by visitors?

siriwatknp added 30 commits July 19, 2021 09:23

wip

2d42572

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

1ee0fa8

…branding/home

add home and navigation

945eed0

add Hero

9e79394

fix hero responsive

9979db7

add HeaderNavDropdown

d703efa

fix lint

aa6f4a8

refactor

81b08aa

update theme and remove hard-coded values

61939c9

export default function

6647701

minor fixes

ab930c9

update size

d876f68

add animation to hamburger

0f6fb6e

reset media hover:none

31eca18

add references section

fe529af

add references section

a3f5f7b

add design systems section

3361bd6

add Products Tabs

be0b61c

use disableTouchRipple

8afd9f1

add TaskCard

66599b7

add PlayerCard

3c5b2db

add NotificationCard

da613f4

fix: move style to variant

469d5f4

run typescript formatted

b0f09bd

add FolderTable

f73dcda

update FolderTable

5a47ae2

add ViewToggleButton

85f279e

support dark mode

2b61bdc

run prettier

2011519

add CustomizedChip

2b32165

use font smooth subpixel-antialiased

6c9474f

siriwatknp force-pushed the rebranding/homepage branch from 1d753ab to 6c9474f Compare August 5, 2021 04:43

siriwatknp added 4 commits August 5, 2021 14:05

add links to sponsors

539247d

fix typo

3f249e3

fix types error

1fe20de

fix issue from w3c checker

495cf0f

siriwatknp merged commit 2ca54d5 into mui:next Aug 5, 2021

oliviertassinari mentioned this pull request Aug 14, 2021

[website] Improve homepage rebranding #27663

Merged

43 tasks

Janpot mentioned this pull request Sep 23, 2024

[docs] Remove HighlightedCode max-width #43731

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[website] homepage rebranding #27488

[website] homepage rebranding #27488

siriwatknp commented Jul 28, 2021 •

edited

Loading

siriwatknp commented Aug 5, 2021

oliviertassinari commented Aug 5, 2021

siriwatknp commented Aug 6, 2021

oliviertassinari commented Aug 6, 2021 •

edited

Loading

mbrookes commented Aug 7, 2021 •

edited by oliviertassinari

Loading

mbrookes commented Aug 7, 2021 •

edited by oliviertassinari

Loading

mbrookes commented Aug 7, 2021 •

edited by oliviertassinari

Loading

mbrookes commented Aug 7, 2021 •

edited by oliviertassinari

Loading

mbrookes commented Aug 7, 2021 •

edited by oliviertassinari

Loading

mbrookes commented Aug 7, 2021 •

edited by oliviertassinari

Loading

mbrookes commented Aug 7, 2021 •

edited by oliviertassinari

Loading

mbrookes commented Aug 7, 2021 •

edited by oliviertassinari

Loading

mbrookes commented Aug 7, 2021 •

edited by oliviertassinari

Loading

mbrookes commented Aug 7, 2021 •

edited by oliviertassinari

Loading

mbrookes commented Aug 7, 2021 •

edited by oliviertassinari

Loading

mbrookes commented Aug 7, 2021 •

edited by oliviertassinari

Loading

mbrookes commented Aug 7, 2021 •

edited by oliviertassinari

Loading

mbrookes commented Aug 7, 2021 •

edited by oliviertassinari

Loading

mbrookes commented Aug 7, 2021 •

edited by oliviertassinari

Loading

mbrookes commented Aug 7, 2021 •

edited by oliviertassinari

Loading

oliviertassinari commented Aug 7, 2021 •

edited

Loading

[website] homepage rebranding #27488

[website] homepage rebranding #27488

Conversation

siriwatknp commented Jul 28, 2021 • edited Loading

UI

Functionality

siriwatknp commented Aug 5, 2021

oliviertassinari commented Aug 5, 2021

siriwatknp commented Aug 6, 2021

oliviertassinari commented Aug 6, 2021 • edited Loading

Homepage

General

HTML structure

Hero

Products core

Products Advanced X

Products Templates

Products kits

What do you get?

Testimonials

Our sponsors

Go live

Footer

mbrookes commented Aug 7, 2021 • edited by oliviertassinari Loading

mbrookes commented Aug 7, 2021 • edited by oliviertassinari Loading

mbrookes commented Aug 7, 2021 • edited by oliviertassinari Loading

mbrookes commented Aug 7, 2021 • edited by oliviertassinari Loading

mbrookes commented Aug 7, 2021 • edited by oliviertassinari Loading

mbrookes commented Aug 7, 2021 • edited by oliviertassinari Loading

mbrookes commented Aug 7, 2021 • edited by oliviertassinari Loading

mbrookes commented Aug 7, 2021 • edited by oliviertassinari Loading

mbrookes commented Aug 7, 2021 • edited by oliviertassinari Loading

mbrookes commented Aug 7, 2021 • edited by oliviertassinari Loading

mbrookes commented Aug 7, 2021 • edited by oliviertassinari Loading

mbrookes commented Aug 7, 2021 • edited by oliviertassinari Loading

mbrookes commented Aug 7, 2021 • edited by oliviertassinari Loading

mbrookes commented Aug 7, 2021 • edited by oliviertassinari Loading

mbrookes commented Aug 7, 2021 • edited by oliviertassinari Loading

mbrookes commented Aug 7, 2021 • edited by oliviertassinari Loading

oliviertassinari commented Aug 7, 2021 • edited Loading

siriwatknp commented Jul 28, 2021 •

edited

Loading

oliviertassinari commented Aug 6, 2021 •

edited

Loading

mbrookes commented Aug 7, 2021 •

edited by oliviertassinari

Loading

mbrookes commented Aug 7, 2021 •

edited by oliviertassinari

Loading

mbrookes commented Aug 7, 2021 •

edited by oliviertassinari

Loading

mbrookes commented Aug 7, 2021 •

edited by oliviertassinari

Loading

mbrookes commented Aug 7, 2021 •

edited by oliviertassinari

Loading

mbrookes commented Aug 7, 2021 •

edited by oliviertassinari

Loading

mbrookes commented Aug 7, 2021 •

edited by oliviertassinari

Loading

mbrookes commented Aug 7, 2021 •

edited by oliviertassinari

Loading

mbrookes commented Aug 7, 2021 •

edited by oliviertassinari

Loading

mbrookes commented Aug 7, 2021 •

edited by oliviertassinari

Loading

mbrookes commented Aug 7, 2021 •

edited by oliviertassinari

Loading

mbrookes commented Aug 7, 2021 •

edited by oliviertassinari

Loading

mbrookes commented Aug 7, 2021 •

edited by oliviertassinari

Loading

mbrookes commented Aug 7, 2021 •

edited by oliviertassinari

Loading

mbrookes commented Aug 7, 2021 •

edited by oliviertassinari

Loading

mbrookes commented Aug 7, 2021 •

edited by oliviertassinari

Loading

oliviertassinari commented Aug 7, 2021 •

edited

Loading