material-ui
material-ui copied to clipboard
mui
[blog] DRAFT Introducing MUI Base
Here grows the blog post with the MUI Base announcement.
Preview: https://deploy-preview-33778--material-ui.netlify.app/blog/introducing-mui-base/
This is a great introduction to MUI Base @michaldudak! I especially like how you describe components and slots here—very well put.
I have just a couple big-picture notes:
- Is there a way that we can describe, exactly, what MUI Base is in a sentence or two? The introduction makes a lot of implications about what it is, but we never really get one singular concise description of it. We could draw from the Overview page in the docs for this.
- The introduction offers some hints at the primary pain point that MUI Base aims to address. How can we translate this into a headline and tagline that will resonate with our target audience? (And who is the target audience here?)
- The conclusion needs (no more than) one specific call to action for the reader. What is the one thing we want them to do after reading this post? Try out MUI Base and give feedback? Show us what you're building? Help us prioritize the roadmap for adding new components? I think we should pick one of these.
How can we translate this into a headline and tagline that will resonate with our target audience? (And who is the target audience here?)
The target audience is the developers who have used and know Material UI and need to build something more custom. Could the tagline be "easily build custom design systems with MUI-powered components"? TBH I'm open for ideas here :)
The conclusion needs (no more than) one specific call to action for the reader.
I think the most important part is getting feedback. But do you think we should drop the other two? Or just move them somewhere else?
Generally, if you see any room for improvement, feel free to edit this PR directly.
Added the social card, hero, and a revamped switch breakdown image there. Let me know your thoughts about the introduction image － I've been playing around with concepts to showcase the "unstyled" aspect of it but it's just so hard to not make it look horrible 😅 For the hero section of Base's dedicated marketing page, that will hopefully be clearer due to interactivity but for these images' sake, I've come up with fake components using only those that will be available by the time of release.
Thanks a lot, @danilo-leal! So the furniture assembly manuals idea you had didn't look good in this case? I was also thinking about something like a blueprint or a technical sketch. On the other hand, having styled components does give readers an idea of what they can build.
Shouldn't the images be 1592px wide? As we're restricting the width to 796px, they should be 2x wide to stay sharp on retina screens.
I was trying to convey the furniture manual idea by having everything outlined, but it didn't look good. For the sake of curiosity, here's how I'm designing this idea to go through on the landing page:
About image dimensions, I was actually following the guidelines on Notion. Even though we force the 796px value, the container max-width is shorter, so it's being rendered with the correct image width.
I've added a "Why MUI Base" section that (hopefully) explains when the library should be used. I'd appreciate if @samuelsycamore could take a look at it.
As for having more in-depth content - I'd rather point to the docs than explain the concepts here. It will be more future-proof (the documentation is more "live" and frequently updated).