create-t3-app
create-t3-app copied to clipboard
t3-oss
feat: Revamped landing UI
Is your feature request related to a problem? Please describe.
It is not related to a problem, I just thought that the current landing page design does not really feel very coherent, so I threw together a mock of some improvements.
Describe the solution you'd like to see
The above is a quick example of some of the improvements that I think preserve the current aesthetic but increases the cohesion and general quality of the landing page as a whole. Since it is generally meant to be a proof of concept, I did not bother filling out the contents for the cards, as it is quite self-explanatory what they would contain. I also did not bother to replicate the blobs in the hero that is present in the current version. I like the blobs, and I am not suggesting removing them, I simply do not think the effort required to create them nicely for this mock is necessary.
Desribe alternate solutions
The alternative solution would be to keep the current iteration of the design.
Additional information
This issue is pursuant to a discussion on discord from 9/9.
This looks great! Are you free to make a PR after #411 is merged?
Yeah, I should be, maybe not immediately after though
Epic 🚀! Thank you for the time and care you put into this, I would never be able to design something like this in a million years. My main note I would have on this would be to tweak the top line headers a bit.
# The best way to set up an
## opinionated, full-stack, typesafe, Next.js project
Having the h1 be a sentence that runs into the h2 (or h2-h3, same idea) feels a little awkward and also breaks with expected HTML semantics. I also don't like the word "best" since it's meant to convey superiority but it's subjective and vague in terms of what that supposed superiority should be.
This is also why a lot of people have been leaning away from using terms like "simple" because it's like, "well simple how and for who?" I like that we've had the term "quickest" in the GitHub repo description because I think that's more objective and measurable. If we take the current copy from the repo:
# Quickest way to start a new web app with full stack typesafety
## Interactive CLI to quickly set up an opinionated, full-stack, typesafe Next.js project.
We could try just merging the two into:
# Quickest way to start a new web application
## Opinionated, full-stack, typesafe, Next.js project
@ajcwebdev
Thank you, I'm glad you liked it.
Having the h1 be a sentence that runs into the h2 (or h2-h3, same idea) feels a little awkward and also breaks with expected HTML semantics.
In (WIP) my implementation of this design I've changed the singular h1 into different elements, which I believe is semantically the correct way to do this.
I also don't like the word "best" since it's meant to convey superiority but it's subjective and vague in terms of what that supposed superiority should be. This is also why a lot of people have been leaning away from using terms like "simple" because it's like, "well simple how and for who?" I like that we've had the term "quickest" in the GitHub repo description because I think that's more objective and measurable. If we take the current copy from the repo:
I agree that the current copy can be worked on, for now, I just used the same text as the current version. After discussion, I would be down to change the copy text. Maybe we should also consider the idea of some headless CMS so as to not have all of this hard coded? It might be adding complexity unnecessarily though.
In (WIP) my implementation of this design I've changed the singular h1 into different elements, which I believe is semantically the correct way to do this.
Ahh, I actually didn't realize your original implementation was a single header styled to look like two. Yes, your change is good and makes the HTML and styling more inline with the intention of headers. But it actually worsens semantics if we don't also change the copy.
The comment I was making about semantics was more so about each line needing to be a self contained unit that would make sense to like a screen reader. If a screen reader reads the h1 it will say, "The best way to set up an" which wouldn't make sense without the second part. See How Headings Help Screen Reader Users. Your first version wouldn't be a problem, but it's kind of a styling hack to make an h1 look like two headers.
I agree that the current copy can be worked on, for now, I just used the same text as the current version. After discussion, I would be down to change the copy text. Maybe we should also consider the idea of some headless CMS so as to not have all of this hard coded? It might be adding complexity unnecessarily though.
There's different schools of thoughts there. If we have something everyone likes and we can set it and forget it then hard coding it will be fine. If we want to tweak it and A/B test different versions then a CMS would be useful.
A couple examples just for reference, I like that ours is much, much shorter than most of these:
Next
# The React Framework for Production
## Next.js gives you the best developer experience with all the features you need for production: hybrid static & server rendering, TypeScript support, smart bundling, route pre-fetching, and more. No config needed.
Redwood
# Focus on building your startup, not fighting your framework.
## Redwood is the full-stack web framework designed to help you grow from side project to startup.
Qwik
# Framework reimagined for the edge
## No hydration, auto lazy-loading, edge cacheable, and fun 🎉!
The comment I was making about semantics was more so about each line needing to be a self contained unit that would make sense to like a screen reader. If a screen reader reads the h1 it will say, "The best way to set up an" which wouldn't make sense without the second part. See How Headings Help Screen Reader Users. Your first version wouldn't be a problem, but it's kind of a styling hack to make an h1 look like two headers.
Thank you for pointing this out, I hadn't thought of this, and it makes perfect sense.
There's different schools of thoughts there. If we have something everyone likes and we can set it and forget it then hard coding it will be fine. If we want to tweak it and A/B test different versions then a CMS would be useful.
Yes, I perhaps did not phrase that in the best way. I meant that if we can reach a consensus simply through discussion, I'd be down to change it. However, if we want to test out a few different things, we could consider a CMS.
Yes, I perhaps did not phrase that in the best way. I meant that if we can reach a consensus simply through discussion, I'd be down to change it. However, if we want to test out a few different things, we could consider a CMS.
Yup yup was totally understood, I was mostly just agreeing with you that it's a good thing to consider which approach is best 😊
Here's my take on a redesign of the website. It's not done yet but @nexxeln encouraged me to share it anyways.
I'm going to continue working on this in the coming days.
Feel free to leave feedback and I'll try to incorporate it into the design. If you decide to leave feedback, please try to answer the following questions:
- Do you like the style of the design? Why or why not?
- What content should be put into the sections (Text, icons, etc.)
Great work from both!
Comparing the first and second version...
- I prefer the overall color scheme of the first version
- I prefer that the headline of the second version is more eye-catching
- I think the headline should be a combination of the first and second...
- maybe something like "Set up an opinionated, full-stack, typesafe Next.js project fast"
- In the first version, the light pink section with the screenshot should have more vertical padding, it looks like it's getting crushed by the things above and below it currently
- Not a fan of the "three feature cards" thing in general. I feel like nobody ever reads them. Our target audience is developers, better to show them right away what it really does
- Regarding the navbar of the first example: What would the search box do? Like what would it be searching? I think the search belongs in the docs, and navbar contents similar to the second example make more sense.
And more of a general thing: Can we maybe get the T3 Axioms on the landing page? Maybe between libraries and tweets?
Good feedback @c-ehrlich
Regarding the navbar of the first example: What would the search box do? Like what would it be searching? I think the search belongs in the docs, and navbar contents similar to the second example make more sense.
I disagree on this one though. I often just go to, for example trpc.io, and CMD+K and search what I'm looking for. Kind of a hassle to first have to navigate to the docs and then being able to search.
Not a fan of the "three feature cards" thing in general. I feel like nobody ever reads them
Although not completely comparable, I do like the new feature section we implemented for the new trpc website, so I do think it's useful:
Great work from both!
Comparing the first and second version...
I prefer the overall color scheme of the first version
I prefer that the headline of the second version is more eye-catching
I think the headline should be a combination of the first and second...
- maybe something like "Set up an opinionated, full-stack, typesafe Next.js project fast"
In the first version, the light pink section with the screenshot should have more vertical padding, it looks like it's getting crushed by the things above and below it currently
Not a fan of the "three feature cards" thing in general. I feel like nobody ever reads them. Our target audience is developers, better to show them right away what it really does
Regarding the navbar of the first example: What would the search box do? Like what would it be searching? I think the search belongs in the docs, and navbar contents similar to the second example make more sense.
And more of a general thing: Can we maybe get the T3 Axioms on the landing page? Maybe between libraries and tweets?
Thanks for your feedback!
I agree, the headline should be a bit more descriptive. For context, I used https://vercel.com/solutions/nextjs, https://turborepo.org/ and https://railway.app/ as inspiration. All three of these have headlines somewhere between 4 and 7 words. I think we should also not use more than 7 or 8 words for the headline.
Also, all three of these websites use the "feature cards" section below the main headline, so I thought it would be a good idea to do this as well since they must've tested their websites on actual users before releasing them.
Maybe we could use some sort of illustration to bring the point across instead of using simple cards?
A chart showing the different components of t3 maybe. Something along the lines of whats used on the NextJS website?
Good feedback @c-ehrlich
Regarding the navbar of the first example: What would the search box do? Like what would it be searching? I think the search belongs in the docs, and navbar contents similar to the second example make more sense.
I disagree on this one though. I often just go to, for example trpc.io, and CMD+K and search what I'm looking for. Kind of a hassle to first have to navigate to the docs and then being able to search.
Not a fan of the "three feature cards" thing in general. I feel like nobody ever reads them
Although not completely comparable, I do like the new feature section we implemented for the new trpc website, so I do think it's useful:
(image)
Never used the search from home before, but now that I tried it I think you're right.
Regarding the title/headline: What are the things we to say?
- It's a way to start an app?
- Type safety?
- Outstanding DX?
- Next.js?
- Full Stack?
- Get going fast?
- Something else? I think if we want to hit 5-8 words, some of these will need to go. Something like "Start a type-safe, full-stack, NextJS project FAST" is ...ok, but doesn't really sell CT3A all that well maybe? Maybe there's a completely different approach to the headline that I'm missing out on. Maybe some of these are for the "feature cards" instead, and the headline should be something that sells CT3A in a different way?
I just realized that Dark's design doesn't have Create T3 App anywhere but the command?
Nice design @Coyenn. Some of my initial thoughts:
- I remember Theo mentioning on a stream with Brynn that he's not a big fan of the colored gradients, and although I like the aesthetic, I do think he's right that it's slightly overdone. Not a con, but maybe something to think about.
- I imagine that the headline is just filler, but I don't think
Create t3 Apps fastis a good headline forcreate-t3-app. I understand that it creates a t3 app, that's obvious, I want to know what a t3 app is. - Continuing on that thought, I also imagine the card content is filler. Regardless, I agree with @c-ehrlich that the cards aren't really all that useful.
- The gradient colors are very, very close to railways.
Regarding the navbar of the first example: What would the search box do? Like what would it be searching for? I think the search belongs in the docs, and navbar contents similar to the second example make more sense.
Essentially what Julius said, and I definitely want to be able to search without navigating the site more.
In the first version, the light pink section with the screenshot should have more vertical padding, it looks like it's getting crushed by the things above and below it currently
Noted, will keep in mind during implementation.
I just realized that Dark's design doesn't have Create T3 App anywhere but the command.
It's in the footer and the terminal. I guess we can put it on the header as well but I don't think it's necessary.
Thank you for your feedback! @iDarkLightning
- I imagine that the headline is just filler, but I don't think
Create t3 Apps fastis a good headline forcreate-t3-app. I understand that it creates a t3 app, that's obvious, I want to know what a t3 app is.- Continuing on that thought, I also imagine the card content is filler. Regardless, I agree with @c-ehrlich that the cards aren't really all that useful.
All of the text is placeholder. An illustration, maybe a terminal animation, as section number 2 is the way to go imo.
- I remember Theo mentioning on a stream with Brynn that he's not a big fan of the colored gradients, and although I like the aesthetic, I do think he's right that it's slightly overdone. Not a con, but maybe something to think about.
I like gradients, so I used them. ¯_(ツ)_/¯
After thinking about the whole thing a bit, what I think we should do is create a design system before implementing the new website. A clear specification of colors, typography, icons, padding, components etc. is needed. (Similar to https://vercel.com/design/color but not as extensive just yet)
After thinking about the whole thing a bit, what I think we should do is create a design system before implementing the new website. A clear specification of colors, typography, icons, padding, components etc. is needed. (Similar to https://vercel.com/design/color but not as extensive just yet)
I took an initial stab at configuring a standardized color scheme in #447
I think it would also be nice to add this Complex init tips and make it more obvious (and on the same domain?). The first time I read it I found it very interesting, but currently it's only reachable by clicking on this link:
which I find kind of hard to notice.
I think it would also be nice to add this Complex init tips and make it more obvious (and on the same domain?). The first time I read it I found it very interesting, but currently it's only reachable by clicking on this link:
which I find kind of hard to notice.
This repo is for the create-t3-app website not init.tips. You can checkout this open issue https://github.com/t3-oss/init.tips/issues/4
For those working on the redesign, found this broken image (in the Typescript - Usage section of the Docs) and thought you'd want to this on to your todo list.
For those working on the redesign, found this broken image (in the Typescript - Usage section of the Docs) and thought you'd want to this on to your todo list.
I think some parts broke when i enabled the Astro MDX Integration, maybe start there if debugging the issue