QUICK CALLOUTS - We got the animation down to 1.4mb with minor optimizations, gonna see if we can get below 1mb 👀 ty Rive for help! - I added a coupon code to get 3 free months of UploadThing's 100gb plan: "designishard" - UIUXPhil is offering a 50% discount to anyone who books him for design work after seeing this video. Reach out via Twitter x.com/uiuxphil - Kayla has been INCREDIBLE to work with. She's done a ton of revisions, is super responsive, and is an EASY recommendation to work with x.com/kayladotdev - Tom's Figma designs were so good I would hire him off of those alone. x.com/tomblixt CHARITIES - Tom's $500 donation went to ClientEarth - Kayla's $500 donation went to Cholangiocarcinoma Foundation - Jack had me donate his $200 to CodeYourFuture - Phil had me donate his $200 to Education Opportunity Fund
@@BryanLu0 "ASCII (/ ˈ æ s k iː / ⓘ ASS-kee),: 6 an acronym for American Standard Code for Information Interchange." Sometimes acronyms follow "standard" pronunciation, but they often follow the sound the original word used, in this case "code".
@@7oeseven793 I recently built a website to monitor bases, nuclear reactors, and power systems for a modded minecraft server I play on, the whole website is 1.6MB. The two biggest files are p5.min.js (for a spinning pentagram loading animation and a special live map) and jQuery-3.7.1.min.js, without those the site is a whopping 500KB, the favicon.ico is 300KB.
The rive animation takes between 4-8 seconds (uncached) to show up for me on ~50Mbs down in Europe. For something that's meant to catch the user's attention, that's way too long IMO. It doesn't seem to be automatically cached either, so any subsequent page reloads have the same problem
Yeah, it's cool as hell but a 4MB animation is just stupid, my websites usually end up being around 4MB total, granted most of what I make is using the LAMP stack with jQuery and p5js.
No problem for me at all, less than 1 second for the animation to start. I'm also in Europe currently sitting far away from my router with a pretty bad connection...
@@gdnight Takes me about 3 seconds to load, I have a 1000Mbps symmetric connection directly to the closest internet exchange to me, I don't think its the site size, I think some browsers might just handle it worse, I'm using Firefox with a bunch of addons.
This video did a wonderful job showcasing how UploadThing, your channel and this community continue to grow and evolve over time. I think the contest was a wonderful extension of this idea and what I wish more coding/design channels were about. For those commenting about quality of submissions, remember these people put their own time to make something for this contest with the idea that there would only be 1 winner in mind to win the $500. Expecting submissions to meet some subjective standard of an paid industry professional is simply unrealistic and quite frankly not what Theo wanted for his website (he said so at the start of this video).
Well tbh most of them have nice "graphic design" but from a customers perspective (as a developer) none of these designs explains to me what uploadthing does differently in comparison to s3 and why I should give them my money. Imho the hero graphic should explain to me without having to scroll once what the service does differently. I would've taken part but missed the announcement :( maybe next time. Good job to all tho
There's really only so much information you can convey in terms of competitive comparison within a single image - that space is better spent showing what you can do rather than using that spotlight to represent any relation to a competitor, the text is there for that (and subsequent sections/info). The specific demand was for a hero image replacement (the big ass folder) and not a total landing page (or total product) redesign. The explanation of the product itself is completely up to Theo & Co, and I'm sure if they need to change stuff down that alley they'll do some work with the winning designer to implement it. On its own, from what I can tell (and from using it), uploadthing's entire thing is its absolute simplicity in both usage and security.
@@Drayken i mean, I genuinely think theo just doesn't know any better which is completely fine. he is super experienced, but this landing page absolutely doesn't tell me anything on first glance. and you're not competing against steve on the block, you're competing against trillion dollar bezos. so highlighting an actual value proposition besides 'we are better than x', imho would have made more sense.
@@brandon6490 The only thing I would change would be Theo's quote, keeping the current piece as a smaller footnote to a slightly larger quote which directly references pain points from S3 or other services in general - whose mention inherently would suggest that your service has developed a solution for them. The above-fold hero alone tells me the following information: 1. Purpose of the product 2. Target demographic (which inherently suggests in which environment it's utilized) 3. Claims to be simpler and safer, which makes me as a developer want to inspect your documentation (Remember, you're dealing with devs not Temu browsers) 4. Immediately follow claim with handholding reassurement (they do that in sales and support a lot) 5. The usual call to action, along with documentation link which I for one know I would click to verify claims 99% of the time - IMMEDIATELY upon opening the docs you are directly presented with information which, if you are familiar with S3, gives you the comparison of why they believe uploadthing is better. If you don't know about S3, it's still relevant info to make you feel like you don't need to be that knowledgeable to utilize this, aka markets itself as more approachable than S3 for beginners, and better DX for veterans. 6. The image itself, which is not and should not be spent as a jab towards competitors but rather showing what /you/ do best. This purpose is even emphasized by Theo multiple times in this video itself and this is the feeling I get from the final design. And that's just the hero itself, scrolling down immediately shows me the simplicity of its implementation, along with other stuff like dev focus (Worry about your app, not your bill) which is probably a jab directly at S3 which would definitely ring a bell for those who've used S3 and are probably looking for an alternative. All in all, the hero image is the last place where I'd want to spend time making the user think about a competitor. I think the current redesign is pretty much mint apart from the out-of-place glass/shiny edge effect that doesn't really fit with the rest of the page's flattened design. So again, the only area where I think it's lacking would be using the quote space to hint non-s3 developers into what problems S3 has and why there was a need for a solution. If I'm not mistaken about uploadthing and had to describe it to another dev, I'd say it compares to S3 like how Lucia Auth compares to NextAuth. Foregoes unnecessary abstraction, gives you control back, while remaining simple to utilize. Now is Uploadthing as or more feature-complete than S3? Probably not - but it doesn't claim to be, it just claims to be better file upload solution. Right there in the hero. TLDR: Talking about what your product does inherently creates the mental comparison for devs who do use S3, while also speaking to devs who haven't used S3 without spending too much time talking about shit they don't know or care about (S3). The only thing missing would be direct mention of painpoints not just with S3 but related products in general to make them go "oh, that's what that's all about". Anyways, the whole point is - the abrasion shouldn't be shown in the hero image. Which is why I completely disagree with the initial statement about the hero image designs.
@@brandon6490 The only thing I would change would be Theo's quote, keeping the current piece as a smaller footnote to a slightly larger quote which directly references pain points from S3 or other services in general - whose mention inherently would suggest that your service has developed a solution for them. The above-fold hero alone tells me the following information: 1. Purpose of the product 2. Target demographic (which inherently suggests in which environment it's utilized) 3. Claims to be simpler and safer, which makes me as a developer want to inspect your documentation (Remember, you're dealing with devs not Temu browsers) 4. Immediately follow claim with handholding reassurement (they do that in sales and support a lot) 5. The usual call to action, along with documentation link which I for one know I would click to verify claims 99% of the time - IMMEDIATELY upon opening the docs you are directly presented with information which, if you are familiar with S3, gives you the comparison of why they believe uploadthing is better. If you don't know about S3, it's still relevant info to make you feel like you don't need to be that knowledgeable to utilize this, aka markets itself as more approachable than S3 for beginners, and better DX for veterans. 6. The image itself, which is not and should not be spent as a jab towards competitors but rather showing what /you/ do best. This purpose is even emphasized by Theo multiple times in this video itself and this is the feeling I get from the final design. And that's just the hero itself, scrolling down immediately shows me the simplicity of its implementation. All in all, the hero image is the last place where I'd want to spend time making the user think about a competitor. I think the current redesign is pretty much mint apart from the out-of-place glass/shiny edge effect that doesn't really fit with the rest of the page's flattened design. So again, the only area where I think it's lacking would be using the quote space to hint non-s3 developers into what problems S3 has and why there was a need for a solution. If I'm not mistaken about uploadthing and had to describe it to another dev, I'd say it compares to S3 like how Lucia Auth compares to NextAuth. Foregoes unnecessary abstraction, gives you control back, while remaining simple to utilize. Now is Uploadthing as or more feature-complete than S3? Probably not - but it doesn't claim to be, it just claims to be better file upload solution. Right there in the hero. TLDR: Talking about what your product does inherently creates the mental comparison for devs who do use S3, while also speaking to devs who haven't used S3 without spending too much time talking about shit they don't know or care about (S3). The only thing missing would be direct mention of painpoints not just with S3 but related products in general to make them go "oh, that's what that's all about". Anyways, the whole point is - the abrasion shouldn't be shown in the hero image. Which is why I completely disagree with the initial statement about the hero image designs.
Yep. Although she said was her first draft so might get that down smaller, but anyone on crappy Internet will notice that animation causing the site to load slowly.
I think most of it will be server side and once done it will be in cache anyway. I think it will be well within a meg or under for the whole landing page. That does depend on how he has his caching set up. I don't think he would have it build on connect, or I would hope not. Maybe for the first connect of each device, but that's old school. Once an iPhone 10, for say, connects, it might be slow for the first one to connect. All others should be way faster. If that's how he has it set up. I would guess all of you would know that already. This is more for someone new to all this, like me.
@@No_Fuse8771 what? If it's 5meg it's 5meg. There's no "server side" that fixes this. What's on the page is what's served. Maybe there's some brotli compression but for something to be cached on the client, it needs to be loaded first. So you're not avoiding that download. 5meg is large and could be brought down a lot with well designed SVG and CSS animations, but for what it is (a non-critical animation on a landing page), it's probably fine. You're not really targeting low bandwidth/speed customers for a file upload site
@@A.D.G I wasn't thinking of the targeted user, I really should have. I don't know anything about the code he intends to use either. I hope it can shrink the size, but your right, 5meg is 5meg. Even .svg can't work a miracle of that size. Css or (dear God I hope not) java animation might help. Like I said, I don't know anything about what he is using. If it's that good, I might want to look into it. It could be worse, flash.
Yeah me too, but now I look back on it I find them a little cheesy and outdated sadly, but I also find over the top minimalism like Windows 8 Start Screen also outdated so it's kinda half and half.
ASCII one killed it. considering Cyberpunk 2077 is one of my most favorite game, if i would have done this contest, ... that's the winner 🏆. loved it so much 🔥
4:50 nah just happen to be a compulsive generalist monkey who's self-sufficient in a lot of stuff due to solo webdev, gamedev/level design, multimedia etc (can probably tell from my channel it's all over the place). Came in for fun and spent a couple min going for fitting inked/flat to match existing folder spec. If I knew how to animate svgs def would've wanted to spend the time adding files + loading anim. Does make a better card icon than anything for sure. Like the overall website redesign as well, it's cool to see that you essentially modernized the initial simplicity you had while avoiding taking itself too seriously like all those other overengineered sites these days (and corporate templates). Feel like it speaks to the no bullshit simplicity/accessibility of the service.
Already my 5th time or so coming back to this vid. Just want to say that I'm learning so much from this 1 video Theo, and the positive interactions you're having with everyone is making me feel much more excited to get into this field. So thank you for showing off all these great creators and their unique takes! Maybe one day I'll make it onto a list like this :)
I think a great hero graphic would be similar to 10:00 except the boxes are actually animated like a queue, and you can see stuff queuing up and finishing uploading as they whisk away. Haven't finished the video yet, maybe someone later down the line does this.
Fantastic choices for the final designs, congrats to all of the contestants! Theo, this is awesome that you are doing this..getting a stamp of approval from you in a setting like this is worth alot these days i believe, and it is also highly appreciated that you put a spotlight on ones like us who are caught in the middle between passion for both coding AND design. Too bad i didnt know about this myself 😅 I guess i need to create a X profile now!? Anyways..once again you step it up for the community with more than just words and help people out. Awesome! And again, amazing job to all of you, knocked it out of the park!
That's 100 points right there, mate. You could have played the card of "Make me a design and I'll feature you in the video" (I have seen so many YTbers do it, in one flavour or another) but you decided to 1. pay them 2. offer to charity. Sure, you'll be getting revenues from this video but still, I salute you. Not that I was doubtful, I have been following you and I think you are generally honest and fair, but it's good to see it also. 👍
I genuinely cannot fathom having 1/10th of the skill on display here. Maye you 20+ year design veterans think this was subpar. But I don't think I'll ever have this level of design skill.
> For developers Cuts to a light mode site after the dark as a finalist... EDIT: It's worse than that, I was harsh on the first finalist, the actual finalist's design clearly doesn't match the other finalist's design at all. What. _"I don't like cursors, 3 of them in the actual finalist animation"_ EDIT2: 5MB too, wow.
Awesome stuff! Props to Theo for a great ideas but huge congrats to all the winners and the great entries! Beautiful animation and new site coming!! Love it all, great community to be joining! ❤
On the winner, it's a great idea but feels like if the file icons disappeared and then content appeared on the fake website one after another would be a bit of an improvement 👍 The site redesign was really nice. I've tried using these non straight line transitions between sections before and never been able to nail the spacing and proportions like he did
I always wish there were 2 rounds of submissions, cause the feedback here makes it so obvious what people should've done. different types files ✔no cursor looking icons ✔subtle but not overly minimal ✔
Love it. Wish I heard about it in time and could've participated as well. I also love that you're offering to help everyone find a developer/design job I myself am struggling with that and I just love that you care.
Thanks, Theo, for showing my work in this video! I thought I was out of the contest because of my mistake, so I didn't watch the video and was really upset. But Again thanks for the shout-out, man😍
I would add a very tiny detail of changing the divide curves angle just a bit while scrolling, just a tiny touch that would feel like gentle elastic movement that related to all file dragging/moving :).
Wish I would have seen this, although I probably wouldn’t have had the time to have participated. I admire the positivity and encouragement shown to the participants here, but speaking as a professional designer and developer of ~20 years, with the exception of a handful of submissions, most of these were frankly very subpar (just being real). I’m glad that the Tom finalist submitted his entry, because he did a pretty good job and a total redesign was sorely needed, and not really much of a lift in terms of complexity and effort required. Personally, I wouldn’t have let one of my hero designs get swallowed up by the rest of that previous website either-I wouldn’t have even started this without approaching it from the level of strategy and communication, first and foremost. Good design is not done piecemeal, like clip art- it comes from a cohesive strategy, unifying seed concept, and a clearly articulated and specific vision, centered around a deeply empathetic understanding of your audience/users.
hey, you probably should add a space between 'Documentarion' and the arrow and add a subtle box shadow to lift the buttons off the page (the docs button doesn't read as a button currently)... anyway, magnificent designs
Jack Smethurst is actually a nice one. I can build that with three.js and make it go from ainsi to 3D and back. For me it is not 2 options, it is both. Ot would be challenging but I can make filters to transition between both. Maybe not even use three.js and use OGL.
Honestly then I first got to the uploadthing website (without seeing this video first) -> I just saw it as a static image and did not bother to check hovering over it.
11:52 Yeah the people make it look like it's not even a web service. Looks like a physical service for storing your old paperwork. Beuatifully drawn. But when you put people on an interactive page I think they should be less involved with the action and more clearly just background fluff
@@connorskudlarek8598 ok, i checked, on mobile: Largest Contentful Paint element 8,410 ms and performance is 48, google pays attention to both. not only desktop.
btw. your social links in the footer are not clickable since the terms of service /support navigation in overlapping them. maybe put a width: fit-content and margin-inline on the later or a z-index on the socials div.
the first was my favorite maybe the sixth and manushas or however his name was spelled.....also this is a great way to get a bunch of good designs and people to work for free while getting a small write off all while looking good...that said its not that big of deal or like people have to participate just being extra critical bc i seen people mention this on twitter and it made me think lol all that said tho those who participated seem happy tho and thats really all that matters tbh! Edit: 17:03 💀thats what i get listening to twitter lolol
Also I have been struggling to find the document button on your website 😂 just make those code examples clickable so that they bring me to the documentation page because I filter thing on a page like a kid 👍
It's a great landing page but a canvas for this animation is overkill, for me in Europe it's way too long to load. A mix of HTML + CSS or an SVG at most is enough
Theo, please make me a React app, and ask your colleagues to do the same. And if I like it, I will give one of you $500. The disrespect for the design industry has to stop.
![โรงเรียนห้ามรัก โดนจับได้ตาย...!! [เอิร์นไดเม่]](http://i.ytimg.com/vi/4u02Sbr556Q/mqdefault.jpg)
QUICK CALLOUTS
- We got the animation down to 1.4mb with minor optimizations, gonna see if we can get below 1mb 👀 ty Rive for help!
- I added a coupon code to get 3 free months of UploadThing's 100gb plan: "designishard"
- UIUXPhil is offering a 50% discount to anyone who books him for design work after seeing this video. Reach out via Twitter x.com/uiuxphil
- Kayla has been INCREDIBLE to work with. She's done a ton of revisions, is super responsive, and is an EASY recommendation to work with x.com/kayladotdev
- Tom's Figma designs were so good I would hire him off of those alone. x.com/tomblixt
CHARITIES
- Tom's $500 donation went to ClientEarth
- Kayla's $500 donation went to Cholangiocarcinoma Foundation
- Jack had me donate his $200 to CodeYourFuture
- Phil had me donate his $200 to Education Opportunity Fund
"I'm currently trying to learn design" Bro you've made a better homepage than the majority of fortune 500 companies 💀
The impostor syndrome at it's peak
@@davidkonevky7372 fr
Thankfully, all our sites are better than Berkshire Hathaway’s
Thanks for the recognition Theo! 😅
Awesome design... congrads
What the hell???? That guy who redesigned the whole page definitely deserve the win.
Yea ,even his icon is way cooler than the final one which is so heavy
It looks like they combined both winners into one page
yea but he is a he, not a she, so yeah...
My head exploded when I heard Theo pronounce ASCII as assy.
ASCII what you're doing
@@rickdg Assy what u did thar.
yeah how do u and up at assy?? I could see ashy, but assy?
@@rue04ci is pronounced see. As in city, civil, science
@@BryanLu0 "ASCII (/ ˈ æ s k iː / ⓘ ASS-kee),: 6 an acronym for American Standard Code for Information Interchange." Sometimes acronyms follow "standard" pronunciation, but they often follow the sound the original word used, in this case "code".
8MB for a landing page, impressive.
The "animations only 4 megs". lol
@@7oeseven793 I recently built a website to monitor bases, nuclear reactors, and power systems for a modded minecraft server I play on, the whole website is 1.6MB. The two biggest files are p5.min.js (for a spinning pentagram loading animation and a special live map) and jQuery-3.7.1.min.js, without those the site is a whopping 500KB, the favicon.ico is 300KB.
don't worry, the player is only half a meg 😅
Wait what...
Honestly that's not so bad. Check out Apple's product pages that have animated things like the iPhone. It loads 4 MB of images and 3 MB of video.
It's only 2s without an animation lol
I hope Theo noticed that in Tom's design, as you scroll down from the hero section, the progress bar goes to 100%
If Phil is still learning design, then I am basically striking rocks together in my Figma cave.
So fun! LDD
The rive animation takes between 4-8 seconds (uncached) to show up for me on ~50Mbs down in Europe. For something that's meant to catch the user's attention, that's way too long IMO. It doesn't seem to be automatically cached either, so any subsequent page reloads have the same problem
For me too, I read the entire page and came back and then found out the animation was still loading. Something needs fixing
Yeah, it's cool as hell but a 4MB animation is just stupid, my websites usually end up being around 4MB total, granted most of what I make is using the LAMP stack with jQuery and p5js.
No problem for me at all, less than 1 second for the animation to start. I'm also in Europe currently sitting far away from my router with a pretty bad connection...
@@gdnight Takes me about 3 seconds to load, I have a 1000Mbps symmetric connection directly to the closest internet exchange to me, I don't think its the site size, I think some browsers might just handle it worse, I'm using Firefox with a bunch of addons.
I love how theo didn't want mouse cursors but the end result (see the website) contains three
Also he wanted something minimal but the winner is the exact opposite of that. The redesign with the subtle animation was the winner for me.
This video did a wonderful job showcasing how UploadThing, your channel and this community continue to grow and evolve over time. I think the contest was a wonderful extension of this idea and what I wish more coding/design channels were about.
For those commenting about quality of submissions, remember these people put their own time to make something for this contest with the idea that there would only be 1 winner in mind to win the $500. Expecting submissions to meet some subjective standard of an paid industry professional is simply unrealistic and quite frankly not what Theo wanted for his website (he said so at the start of this video).
Well tbh most of them have nice "graphic design" but from a customers perspective (as a developer) none of these designs explains to me what uploadthing does differently in comparison to s3 and why I should give them my money. Imho the hero graphic should explain to me without having to scroll once what the service does differently. I would've taken part but missed the announcement :( maybe next time. Good job to all tho
Yes, I was looking for this comment!
There's really only so much information you can convey in terms of competitive comparison within a single image - that space is better spent showing what you can do rather than using that spotlight to represent any relation to a competitor, the text is there for that (and subsequent sections/info). The specific demand was for a hero image replacement (the big ass folder) and not a total landing page (or total product) redesign. The explanation of the product itself is completely up to Theo & Co, and I'm sure if they need to change stuff down that alley they'll do some work with the winning designer to implement it. On its own, from what I can tell (and from using it), uploadthing's entire thing is its absolute simplicity in both usage and security.
@@Drayken i mean, I genuinely think theo just doesn't know any better which is completely fine. he is super experienced, but this landing page absolutely doesn't tell me anything on first glance. and you're not competing against steve on the block, you're competing against trillion dollar bezos.
so highlighting an actual value proposition besides 'we are better than x', imho would have made more sense.
@@brandon6490 The only thing I would change would be Theo's quote, keeping the current piece as a smaller footnote to a slightly larger quote which directly references pain points from S3 or other services in general - whose mention inherently would suggest that your service has developed a solution for them.
The above-fold hero alone tells me the following information:
1. Purpose of the product
2. Target demographic (which inherently suggests in which environment it's utilized)
3. Claims to be simpler and safer, which makes me as a developer want to inspect your documentation (Remember, you're dealing with devs not Temu browsers)
4. Immediately follow claim with handholding reassurement (they do that in sales and support a lot)
5. The usual call to action, along with documentation link which I for one know I would click to verify claims 99% of the time - IMMEDIATELY upon opening the docs you are directly presented with information which, if you are familiar with S3, gives you the comparison of why they believe uploadthing is better. If you don't know about S3, it's still relevant info to make you feel like you don't need to be that knowledgeable to utilize this, aka markets itself as more approachable than S3 for beginners, and better DX for veterans.
6. The image itself, which is not and should not be spent as a jab towards competitors but rather showing what /you/ do best. This purpose is even emphasized by Theo multiple times in this video itself and this is the feeling I get from the final design.
And that's just the hero itself, scrolling down immediately shows me the simplicity of its implementation, along with other stuff like dev focus (Worry about your app, not your bill) which is probably a jab directly at S3 which would definitely ring a bell for those who've used S3 and are probably looking for an alternative.
All in all, the hero image is the last place where I'd want to spend time making the user think about a competitor. I think the current redesign is pretty much mint apart from the out-of-place glass/shiny edge effect that doesn't really fit with the rest of the page's flattened design. So again, the only area where I think it's lacking would be using the quote space to hint non-s3 developers into what problems S3 has and why there was a need for a solution.
If I'm not mistaken about uploadthing and had to describe it to another dev, I'd say it compares to S3 like how Lucia Auth compares to NextAuth. Foregoes unnecessary abstraction, gives you control back, while remaining simple to utilize. Now is Uploadthing as or more feature-complete than S3? Probably not - but it doesn't claim to be, it just claims to be better file upload solution. Right there in the hero.
TLDR: Talking about what your product does inherently creates the mental comparison for devs who do use S3, while also speaking to devs who haven't used S3 without spending too much time talking about shit they don't know or care about (S3). The only thing missing would be direct mention of painpoints not just with S3 but related products in general to make them go "oh, that's what that's all about".
Anyways, the whole point is - the abrasion shouldn't be shown in the hero image. Which is why I completely disagree with the initial statement about the hero image designs.
@@brandon6490 The only thing I would change would be Theo's quote, keeping the current piece as a smaller footnote to a slightly larger quote which directly references pain points from S3 or other services in general - whose mention inherently would suggest that your service has developed a solution for them.
The above-fold hero alone tells me the following information:
1. Purpose of the product
2. Target demographic (which inherently suggests in which environment it's utilized)
3. Claims to be simpler and safer, which makes me as a developer want to inspect your documentation (Remember, you're dealing with devs not Temu browsers)
4. Immediately follow claim with handholding reassurement (they do that in sales and support a lot)
5. The usual call to action, along with documentation link which I for one know I would click to verify claims 99% of the time - IMMEDIATELY upon opening the docs you are directly presented with information which, if you are familiar with S3, gives you the comparison of why they believe uploadthing is better. If you don't know about S3, it's still relevant info to make you feel like you don't need to be that knowledgeable to utilize this, aka markets itself as more approachable than S3 for beginners, and better DX for veterans.
6. The image itself, which is not and should not be spent as a jab towards competitors but rather showing what /you/ do best. This purpose is even emphasized by Theo multiple times in this video itself and this is the feeling I get from the final design.
And that's just the hero itself, scrolling down immediately shows me the simplicity of its implementation.
All in all, the hero image is the last place where I'd want to spend time making the user think about a competitor. I think the current redesign is pretty much mint apart from the out-of-place glass/shiny edge effect that doesn't really fit with the rest of the page's flattened design. So again, the only area where I think it's lacking would be using the quote space to hint non-s3 developers into what problems S3 has and why there was a need for a solution.
If I'm not mistaken about uploadthing and had to describe it to another dev, I'd say it compares to S3 like how Lucia Auth compares to NextAuth. Foregoes unnecessary abstraction, gives you control back, while remaining simple to utilize. Now is Uploadthing as or more feature-complete than S3? Probably not - but it doesn't claim to be, it just claims to be better file upload solution. Right there in the hero.
TLDR: Talking about what your product does inherently creates the mental comparison for devs who do use S3, while also speaking to devs who haven't used S3 without spending too much time talking about shit they don't know or care about (S3). The only thing missing would be direct mention of painpoints not just with S3 but related products in general to make them go "oh, that's what that's all about".
Anyways, the whole point is - the abrasion shouldn't be shown in the hero image. Which is why I completely disagree with the initial statement about the hero image designs.
"just 5 megabytes animation" seriously? it's quite a lot for this animation
On page it will be very small. It the review version of rive I think that's heavy
Yep. Although she said was her first draft so might get that down smaller, but anyone on crappy Internet will notice that animation causing the site to load slowly.
I think most of it will be server side and once done it will be in cache anyway. I think it will be well within a meg or under for the whole landing page. That does depend on how he has his caching set up. I don't think he would have it build on connect, or I would hope not. Maybe for the first connect of each device, but that's old school. Once an iPhone 10, for say, connects, it might be slow for the first one to connect. All others should be way faster. If that's how he has it set up. I would guess all of you would know that already. This is more for someone new to all this, like me.
@@No_Fuse8771 what? If it's 5meg it's 5meg. There's no "server side" that fixes this. What's on the page is what's served. Maybe there's some brotli compression but for something to be cached on the client, it needs to be loaded first. So you're not avoiding that download.
5meg is large and could be brought down a lot with well designed SVG and CSS animations, but for what it is (a non-critical animation on a landing page), it's probably fine. You're not really targeting low bandwidth/speed customers for a file upload site
@@A.D.G I wasn't thinking of the targeted user, I really should have. I don't know anything about the code he intends to use either. I hope it can shrink the size, but your right, 5meg is 5meg. Even .svg can't work a miracle of that size. Css or (dear God I hope not) java animation might help. Like I said, I don't know anything about what he is using. If it's that good, I might want to look into it. It could be worse, flash.
I noticed some of the fancy 3d designs are glassy and give me windows 7 era vibs and am loving it it feels gorgeous and also nostalgic
Yeah me too, but now I look back on it I find them a little cheesy and outdated sadly, but I also find over the top minimalism like Windows 8 Start Screen also outdated so it's kinda half and half.
ASCII one killed it. considering Cyberpunk 2077 is one of my most favorite game, if i would have done this contest, ... that's the winner 🏆. loved it so much 🔥
4:50 nah just happen to be a compulsive generalist monkey who's self-sufficient in a lot of stuff due to solo webdev, gamedev/level design, multimedia etc (can probably tell from my channel it's all over the place). Came in for fun and spent a couple min going for fitting inked/flat to match existing folder spec. If I knew how to animate svgs def would've wanted to spend the time adding files + loading anim. Does make a better card icon than anything for sure. Like the overall website redesign as well, it's cool to see that you essentially modernized the initial simplicity you had while avoiding taking itself too seriously like all those other overengineered sites these days (and corporate templates). Feel like it speaks to the no bullshit simplicity/accessibility of the service.
Adding a live upload right on the home page and showing the preview of the file right there would make this even better.
Give a professional graphics and web designer to design a webpage❌
Host a competition to design a webpage✅
Already my 5th time or so coming back to this vid. Just want to say that I'm learning so much from this 1 video Theo, and the positive interactions you're having with everyone is making me feel much more excited to get into this field. So thank you for showing off all these great creators and their unique takes! Maybe one day I'll make it onto a list like this :)
I think a great hero graphic would be similar to 10:00 except the boxes are actually animated like a queue, and you can see stuff queuing up and finishing uploading as they whisk away. Haven't finished the video yet, maybe someone later down the line does this.
Fantastic choices for the final designs, congrats to all of the contestants! Theo, this is awesome that you are doing this..getting a stamp of approval from you in a setting like this is worth alot these days i believe, and it is also highly appreciated that you put a spotlight on ones like us who are caught in the middle between passion for both coding AND design. Too bad i didnt know about this myself 😅 I guess i need to create a X profile now!? Anyways..once again you step it up for the community with more than just words and help people out. Awesome! And again, amazing job to all of you, knocked it out of the park!
That's 100 points right there, mate. You could have played the card of "Make me a design and I'll feature you in the video" (I have seen so many YTbers do it, in one flavour or another) but you decided to 1. pay them 2. offer to charity. Sure, you'll be getting revenues from this video but still, I salute you. Not that I was doubtful, I have been following you and I think you are generally honest and fair, but it's good to see it also. 👍
except he didn't pay someone for their work
@@tooruyou think he has unlimited money? He's hosting a competition not a charity. Plus he already paid some a lot of money.
I genuinely cannot fathom having 1/10th of the skill on display here.
Maye you 20+ year design veterans think this was subpar. But I don't think I'll ever have this level of design skill.
> For developers
Cuts to a light mode site after the dark as a finalist...
EDIT: It's worse than that, I was harsh on the first finalist, the actual finalist's design clearly doesn't match the other finalist's design at all. What.
_"I don't like cursors, 3 of them in the actual finalist animation"_
EDIT2: 5MB too, wow.
so refreshing a video of genuine collaboration and joy. thanks
Awesome stuff! Props to Theo for a great ideas but huge congrats to all the winners and the great entries! Beautiful animation and new site coming!! Love it all, great community to be joining! ❤
I believe in a quote that "Steal like an artist 😂" I am definitely going to use these ideas in my next projects
On the winner, it's a great idea but feels like if the file icons disappeared and then content appeared on the fake website one after another would be a bit of an improvement 👍
The site redesign was really nice. I've tried using these non straight line transitions between sections before and never been able to nail the spacing and proportions like he did
Very talented works guys! The last ones especially left me in awe
"I came here from backend, I don't know why I'm here" - average fullstack dev
Man, you really know how to fire people 😂
totally agree with you; impossible to pick only one and to ignore that submission with the full website redesign. amazing result!
These designs are orgasmic, like I was shaking in my chair at these
Holy hell. The Rive animation is 5mb?!
Makes me miss Flash. That could be done in 100kb max. 😢
this feels like one of the best vids on this channel so good!
Just FYI I'm while the ASCII renderer is super cool I'm pretty sure it's built into three.js. It's not hard to implement
I always wish there were 2 rounds of submissions, cause the feedback here makes it so obvious what people should've done.
different types files ✔no cursor looking icons ✔subtle but not overly minimal ✔
Love it. Wish I heard about it in time and could've participated as well. I also love that you're offering to help everyone find a developer/design job I myself am struggling with that and I just love that you care.
I love your enthusiasm. This video screams GREAT VIBESSSS!!!
okay these semi- and normal finalists are AMAZINGLY GOOD.
Crazy how good these were.
Massive respect for you paying most of them. Awesome work man.
i like the fact that he hates cursor on a site, ended up having 3 cursors on the landing page xD
Thanks, Theo, for showing my work in this video!
I thought I was out of the contest because of my mistake, so I didn't watch the video and was really upset.
But Again thanks for the shout-out, man😍
I would add a very tiny detail of changing the divide curves angle just a bit while scrolling, just a tiny touch that would feel like gentle elastic movement that related to all file dragging/moving :).
Tom slayed it. As a dev and designer definitely going to come back to this for inspiration.
Wish I would have seen this, although I probably wouldn’t have had the time to have participated. I admire the positivity and encouragement shown to the participants here, but speaking as a professional designer and developer of ~20 years, with the exception of a handful of submissions, most of these were frankly very subpar (just being real).
I’m glad that the Tom finalist submitted his entry, because he did a pretty good job and a total redesign was sorely needed, and not really much of a lift in terms of complexity and effort required.
Personally, I wouldn’t have let one of my hero designs get swallowed up by the rest of that previous website either-I wouldn’t have even started this without approaching it from the level of strategy and communication, first and foremost. Good design is not done piecemeal, like clip art- it comes from a cohesive strategy, unifying seed concept, and a clearly articulated and specific vision, centered around a deeply empathetic understanding of your audience/users.
Man UIUXPhil's design for this was by far the best, phenominal!
17:28 finalists
22:50 website redesign winner
26:32 winner
Theos page (only looking at thumbnails) looks like he makes daily vlogs about his morning sh**.
The design is pretty cool. The rive animations take a second to load on first initial paint.
really awesome, huge respect for rewarding hard work!
Sooo cool! Wish I would have seen the post on Twitter in time to also submit a design.
Amazing website Theo! Good job by the designers.
Jacks ASCII art idea was absolutely amazing. He is definitely my winner hahaha
11:20 that design reminds me a lot of the images on the website for the Norwegian postal service.
"I probably would have went with it if someone hadn't said it makes it look like the world is going to be bombed by nuclear bombs."
🤣🤣🤣
Cool contest! Great stuff for community involment!
6:25 the icons really popped when Theo moved down slightly!
Great work from all the participants
Awesome stuff dude! Great content too
Really nice design. I wish I could've participated in the contest.
Well damn, when did the call for design help go out? I catch a decent amount of your TH-cam videos but never heard about this.
hey, you probably should add a space between 'Documentarion' and the arrow and add a subtle box shadow to lift the buttons off the page (the docs button doesn't read as a button currently)... anyway, magnificent designs
wait you....made uploadthing XD I never knew that I was using it for saas app lmaooooo, theo be the best
Jack Smethurst is actually a nice one. I can build that with three.js and make it go from ainsi to 3D and back. For me it is not 2 options, it is both. Ot would be challenging but I can make filters to transition between both. Maybe not even use three.js and use OGL.
"Killer crypto site design, but not as an insult" 😂😂😂
UB Patrick one really impressed me a lot ngl. That one was my hero if it was my theme. Note: This is just from that I have seen till now 5:29
Also the icon from ChromMob 🔥
The winners totally deserved it! Wow 🤯
Aritro's submission is giving me Infographics Show...
clicking the beta box refreshes the page
Honestly then I first got to the uploadthing website (without seeing this video first) -> I just saw it as a static image and did not bother to check hovering over it.
11:52 Yeah the people make it look like it's not even a web service. Looks like a physical service for storing your old paperwork.
Beuatifully drawn. But when you put people on an interactive page I think they should be less involved with the action and more clearly just background fluff
there is a reason we moved away from the animations, your LCP gets a big hit, i doubt that your site get anywhere above 50 points in page-speed!
I just did a check. Their LCP is 1.6s and their performance score is 93.
@@connorskudlarek8598 ok, i checked, on mobile: Largest Contentful Paint element 8,410 ms and performance is 48, google pays attention to both. not only desktop.
btw. your social links in the footer are not clickable since the terms of service /support navigation in overlapping them. maybe put a width: fit-content and margin-inline on the later or a z-index on the socials div.
we have a bright future in tech?? who wants to tell theo we been trying for 10+ years but startup people want to low ball or free work
this is a great example of "low ball or free work"
23:20
LOL, of course some Dutch guy had to come in and rock the absolute hell out of it
I wouldn't say setting the serial number of the fake mac os to the video id of the rick roll video counts as rick rolling.
the first was my favorite maybe the sixth and manushas or however his name was spelled.....also this is a great way to get a bunch of good designs and people to work for free while getting a small write off all while looking good...that said its not that big of deal or like people have to participate just being extra critical bc i seen people mention this on twitter and it made me think lol all that said tho those who participated seem happy tho and thats really all that matters tbh! Edit: 17:03 💀thats what i get listening to twitter lolol
11:39 Windows 3.1/95 File Cabinet vibes for sure!
not using that logo 😭 i get it tho if you want to hold back redesigning the logo separately but that one was so clean
Theo, the animation could also be done with Tumult Hype. In HTML5 and be much, much smaller.
The nuking the world one reminds me of Twilight Princess
The winner's 5MB website couldn't even be uploaded onto uploadthing
"First draft" my ass - you can't just clown on everyone else with words like that 😅
Wow the community really showed out this time
Looks like many use AI for the assets/animations
Fr, using AI should get you banned
What's the AI called?
@@theairaccumulator7144 why though? If it's used as a tool, what's the problem?
Also I have been struggling to find the document button on your website 😂 just make those code examples clickable so that they bring me to the documentation page because I filter thing on a page like a kid 👍
pretty nice, bunch of them looks like AI generated, but in general quiet nice
It's surprising how easily he's fooled by this no effort AI garbage
which ones
now everything looks like AI generated, really hard to distinguish what is real or AI generated
For simple designs it's really hard to tell
There were AI generated ones, i skipped them
Man I hope one day I get good enough to get my name out there by participating in something like this.
It's a great landing page but a canvas for this animation is overkill, for me in Europe it's way too long to load. A mix of HTML + CSS or an SVG at most is enough
I still don’t really get what their website does. Is it just Google drive?
Theo, please make me a React app, and ask your colleagues to do the same. And if I like it, I will give one of you $500. The disrespect for the design industry has to stop.
Wow thats amazing 8:40 👏 😍
27:51 under 10 kb?! (shocked) damn! (in the style of Fluffy)
Most of them are UI libraries like Magic UI and Aceternity UI right??
Graham's was amazing
Loved to take part 🙌
Animation could be much much smaller. Site turned out nice though!
check the pinned comment, they've already got it down to 1.4MB
Your photo on the new design is very blured, Left spacing on hero is much wider than right spacing on 1440p, FF, Fedora Linux
What Nextjs docs framework did you use for the docs page?