Skip to content

[website] homepage rebranding#27488

Merged
siriwatknp merged 143 commits intomui:nextfrom
siriwatknp:rebranding/homepage
Aug 5, 2021
Merged

[website] homepage rebranding#27488
siriwatknp merged 143 commits intomui:nextfrom
siriwatknp:rebranding/homepage

Conversation

@siriwatknp
Copy link
Member

@siriwatknp siriwatknp commented Jul 28, 2021 •
edited
Loading

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

  • Header
  • Hero (might add more components later)
  • Product suite
    • Core
    • Advanced will be the same as ProductAdvanced page
    • Templates
    • Design Kits
  • Value proposition
  • Material design components
  • Testimonials
  • Sponsors
  • Hero end section
  • Footer

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)

siriwatknp added 30 commits July 19, 2021 09:23
@siriwatknp
wip
2d42572
@siriwatknp
Merge branch 'next' of https://github.com/mui-org/material-ui into re…
1ee0fa8 
…branding/home
@siriwatknp
add home and navigation
945eed0
@siriwatknp
add Hero
9e79394
@siriwatknp
fix hero responsive
9979db7
@siriwatknp
add HeaderNavDropdown
d703efa
@siriwatknp
fix lint
aa6f4a8
@siriwatknp
refactor
81b08aa
@siriwatknp
update theme and remove hard-coded values
61939c9
@siriwatknp
export default function
6647701
@siriwatknp
minor fixes
ab930c9
@siriwatknp
update size
d876f68
@siriwatknp
add animation to hamburger
0f6fb6e
@siriwatknp
reset media hover:none
31eca18
@siriwatknp
add references section
fe529af
@siriwatknp
add references section
a3f5f7b
@siriwatknp
add design systems section
3361bd6
@siriwatknp
add Products Tabs
be0b61c
@siriwatknp
use disableTouchRipple
8afd9f1
@siriwatknp
add TaskCard
66599b7
@siriwatknp
add PlayerCard
3c5b2db
@siriwatknp
add NotificationCard
da613f4
@siriwatknp
fix: move style to variant
469d5f4
@siriwatknp
run typescript formatted
b0f09bd
@siriwatknp
add FolderTable
f73dcda
@siriwatknp
update FolderTable
5a47ae2
@siriwatknp
add ViewToggleButton
85f279e
@siriwatknp
support dark mode
2b61bdc
@siriwatknp
run prettier
2011519
@siriwatknp
add CustomizedChip
2b32165
@siriwatknp siriwatknp force-pushed the rebranding/homepage branch from 1d753ab to 6c9474f Compare August 5, 2021 04:43
@siriwatknp
Copy link
Member Author

siriwatknp commented Aug 5, 2021

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.

@siriwatknp siriwatknp merged commit 2ca54d5 into mui:next Aug 5, 2021
@oliviertassinari
Copy link
Member

oliviertassinari commented Aug 5, 2021

@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
Copy link
Member Author

siriwatknp commented Aug 6, 2021

@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
Copy link
Member

oliviertassinari commented Aug 6, 2021 •
edited
Loading

@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

Hero

  • Not enough space for the companies

Capture d’écran 2021-08-06 à 13 25 21

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

Capture d’écran 2021-08-06 à 13 24 45

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

Capture d’écran 2021-08-08 à 00 17 11

Products core

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

actual:

Capture d’écran 2021-08-06 à 13 04 55

expected:

Capture d’écran 2021-08-06 à 13 05 42

  • 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

Capture d’écran 2021-08-04 à 19 56 23

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

Capture d’écran 2021-08-06 à 13 13 37

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)
Capture d’écran 2021-08-06 à 13 28 38

Unloaded (1 line)
Capture d’écran 2021-08-06 à 13 29 44

Footer

@mbrookes
Copy link
Member

mbrookes commented Aug 7, 2021 •
edited by oliviertassinari
Loading

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

image

  1. 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
Copy link
Member

mbrookes commented Aug 7, 2021 •
edited by oliviertassinari
Loading

  1. The choice of companies looks arbitrary. We dropped Coursera from the homepage a long time ago.
    image

  2. 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
Copy link
Member

mbrookes commented Aug 7, 2021 •
edited by oliviertassinari
Loading

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

@mbrookes
Copy link
Member

mbrookes commented Aug 7, 2021 •
edited by oliviertassinari
Loading

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

image

@mbrookes
Copy link
Member

mbrookes commented Aug 7, 2021 •
edited by oliviertassinari
Loading

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

image

And that's before the custom theme kicks in

@mbrookes
Copy link
Member

mbrookes commented Aug 7, 2021 •
edited by oliviertassinari
Loading

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

@mbrookes
Copy link
Member

mbrookes commented Aug 7, 2021 •
edited by oliviertassinari
Loading

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

image

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

@mbrookes
Copy link
Member

mbrookes commented Aug 7, 2021 •
edited by oliviertassinari
Loading

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

@mbrookes
Copy link
Member

mbrookes commented Aug 7, 2021 •
edited by oliviertassinari
Loading

  1. WIP?

image

@mbrookes
Copy link
Member

mbrookes commented Aug 7, 2021 •
edited by oliviertassinari
Loading

  1. This needs work:
    image

@mbrookes
Copy link
Member

mbrookes commented Aug 7, 2021 •
edited by oliviertassinari
Loading

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

image

Also, it doesn't need two logos.

@mbrookes
Copy link
Member

mbrookes commented Aug 7, 2021 •
edited by oliviertassinari
Loading

  1. The animation induces motion sickness:
    image
    Perhaps static would be better?

@mbrookes
Copy link
Member

mbrookes commented Aug 7, 2021 •
edited by oliviertassinari
Loading

image
"Easily customized"?

@mbrookes
Copy link
Member

mbrookes commented Aug 7, 2021 •
edited by oliviertassinari
Loading

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

@mbrookes
Copy link
Member

mbrookes commented Aug 7, 2021 •
edited by oliviertassinari
Loading

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

@mbrookes
Copy link
Member

mbrookes commented Aug 7, 2021 •
edited by oliviertassinari
Loading

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

@oliviertassinari
Copy link
Member

oliviertassinari commented Aug 7, 2021 •
edited
Loading

@mbrookes

  1. 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.

  1. I personally didn't notice. Are you saying we need to change it to two columns?
  2. 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.
  3. 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.

Capture d’écran 2021-08-08 à 00 31 53

  1. 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.
  2. 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.
  3. To consolidate with [website] homepage rebranding #27488 (comment), I have reported a similar pain.
  4. Could you clarify? Each customization in the theme directly impacts the demo, I don't follow the description.
  5. What's the expected wording?
  6. Yes, WIP

Capture d’écran 2021-08-08 à 00 59 26

  1. 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
  2. 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.
  3. 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?

@oliviertassinari oliviertassinari mentioned this pull request Aug 14, 2021
Merged
43 tasks
@Janpot Janpot mentioned this pull request Sep 23, 2024
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@oliviertassinari oliviertassinari oliviertassinari left review comments

+1 more reviewer

@danilo-leal danilo-leal danilo-leal left review comments

Reviewers whose approvals may not affect merge requirements

Assignees

No one assigned

Labels

website Pages that are not documentation-related, marketing-focused.

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

6 participants

@siriwatknp @mui-pr-bot @danilo-leal @mnajdova @oliviertassinari @mbrookes