The ULTIMATE Web3 & NFT Websites For Inspiration

what i have in front of me are six of the best nft web 3 websites that i could personally find now we're going to go through some amazing sites here in a second but before we get started i want to preface this by saying that these are not endorsements by me i'm not telling you to go out and buy any of these nfts or web3 products that's not what we're doing here we're just taking a look at what are the trends in the space what are some of the best people doing and why are they doing it now let's get into the video so first one here is sneakerheads.xyz now i know that this collection recently sold out and for good reason if we take a look at their website and what their actual products look like or their nfts we see that there is a very simple theme going on and that is going to be super high quality imagery super high quality designs very simple and minimalist website styling here and website layout and also just a very concrete notion and idea of what kind of brand they are who they are what kind of colors that they want to play around with what kind of vibe that they want to give when someone is scrolling through the site and here we can see that there's a scroll animation so there's collaborations web3 brand community so that's a different way of showing different types of tabs imagine if you had like a feq or just a feature section one after another this is another way of doing that and we do it with an animation now this website i know that it's built as a custom website but it would be super super cool to rebuild this as a webflow project and release it as a cloneable i'm not sure if that's legal or not but it'll be super super cool to do now as we scroll down we've got the faqs and there's a very simple repetitive idea here we have this huge design or the main design that they're using or that they're creating and that's what's driving the website we have text here but as you can see even though we have a very large piece of text and it accompanies the imagery what's super important here what's the main driving factor of sales and visits and why i'm even talking about this in the first place is the designs themselves is this massive super high quality imagery and one of the things that we can see while we are on the site talking about color is that we can change the color of the entire site so if i scroll all the way back up we can see that the imagery also changes as you pick different colors and now these are all nfts that you can buy on openc or wherever i mean we can see here on openc and it's just amazing that they're able to do this with such a fast working website and such a clean design every single time we just change the color and you can see that as you scroll down there's a there's a gradient or at least there was on the other one we can go back here but the main idea here is that the imagery is driving this website which is amazing now next up here is going to be completely different of a site and we can see that it's drowned by text in the very first thing we have a very custom very stylized piece of text and i can't even read necessarily what it says it says deluxe neo deluxe brand or something like that that's not really what i'm focused on right now because as we scroll down we have a preview of different nfts that are for sale on nifty gateway and that's obviously another marketplace and we can see that as you scroll we get a preview of what that actual nft is or what the actual thing that they're selling is on the bottom right of the page now as we scroll down past these different products or different nfts we see that all we have now is going to be massive imagery now this is going to be a very simple idea that's going to be repeated over and over through these different websites that we're going to focus on here the imagery the designs themselves is what's driving the website it's what driving the actual marketing site and we can see that here i mean we saw that there's a few links here to go to nifty gateway but after that it's only imagery it's only these the actual videos that you can buy as nfts now if we keep scrolling we'll see that that's all there is and then in the bottom here we have their contacts and who the website is by but that's about it if we click on this image right here we see that it changes the video so you can see that there's different types of videos included in this combination or in this collection next up is going to be mecha verse now mechaverse has a ton of different products and this is one of their websites but what i want to do with this website and the reason why i want to talk about it and why i find it interesting is that they have two main factors that are driving the site that i personally really enjoy so the first one here is going to be obviously the big imagery as i keep talking about it's a very recurring factor and then we have a parallax effect on top of the different sections that we're going to pass through so as we saw we just passed over the hero section which we thought was on top of the text but as as we scroll through we've got another piece of text that goes on top of the hero image and then we get a section that goes on top of that so that's all a parallax effect that's very very cool it's very easy to do and just that simple effect takes a website like this to have such a premium feel and such a customized well done website now as i scroll through we're gonna see that there is a repetitive idea here which is the imagery is again driving the theme of the of the build and also this very smooth parallax effect here so we're gonna keep scrolling here and we can see that it's the exact same idea over and over repeated but if you are able to lock those two factors in if you have great imagery and you can add some very simple effects to it and keep it simple keep it clean then you can create a very good looking site just like this one the next step is going to be tiny faces nft now this is a completely different site and the first thing that you're going to see here is all of this confetti and there's a reason for it i'm going to get into it a little bit but i personally would have liked to see this website without all the confetti because it does get a little bit distracting but again imagery that's going to drive the website and very simple smooth clean design so first up here is going to be the actual nfts the actual designs so we have these 3d designs here that are created either in cinema 4d or in any other 3d software that i can't think of right now maybe blender maybe one of those but we have all of these designs that are promoted the very first thing that you see on the heroes so the hero is driven by the actual designs it's not overbearing text it's not anything like that it is a very simple design to start off now next up as you can see i'm talking about the confetti is getting kind of annoying but we're going to get into the confetti in a second but as you can see that the text here the text that they've chosen is not the typical type of nft text that you usually will see the usual trend for nfts and for web3 and all that is very digital and very new wave kind of text but these guys are bringing it back they're going more of a pangram type of style for a for typeface now this website reminds me much more of a very typical ecommerce of like a teenager brand or a trendy very cool brand something like that not necessarily a web 3 nft project now the reason for the confetti if we can actually get into it is because they sold out of their entire collection so i'm taking that notion as they're celebrating that they sold out but again it could have been easily done without the confetti my opinion but anyways we have the characters as a very simple carousel that you could do in webflow or any other website builder and if i'm not mistaken this is also custom built so there's that to take into consideration but this would be again a very cool project to do as a clonable next step is going to be bueno dot art so bueno is no code tools for nft creators and we can see that this hero section is completely different to all of the different designs that we talked about earlier so usually we have the imagery that's driving the text apart from this one here but discarding this one because that's kind of a different different type of style we have a very typical sas type of hero right now we've got center text with some imagery around it that as you scroll slightly moves it and this is very simple to achieve with just a very simple scroll animation you know you start here you end here that is what you want to animate so if we keep going down we see that we have an example of what these nfts look like and again i'm repeating myself over and over here but if we keep scrolling we'll see that there's very simple ideas in play here number one is going to be the imagery that's driving the presentation so we have this very simple animation here the text is well thought of the spacing looks correct the colors are matching so you don't get confused you don't get distracted with what information they're trying to tell you and then also we have another parallax effect that works a little bit better in my opinion as a very smooth animation now one thing to note here is i haven't tried any of these sites on mobile or tablet this is just on desktop so take that with a grain of salt if you want to but this type of site this very simple scrolling interaction makes it extremely easy to understand what the product is what they're selling and why someone like me should buy into it or should even care now as we scroll down we have a different type of animation here where the image itself expands and plays the gif or the video that we're seeing right now and then when we scroll down we have just a very simple footer so that is again a very very simple site now last one here is going to be different to all of them and i wanted to include it last because it's a little bit funny and a little bit weird as well so this is companion in a box and this is a web3 website unlike i've seen before it's kind of weird it is just designs of people that are sitting in a box so if you can see that right there it's just people that are kind of squished in a square and that's what their nft is but again we're talking about websites here so let's focus on that the website in this case looks like it's created for mobiles in the first place so we see that there's a very center design here where when we scroll everything looks like it could be easily squished into a mobile version so we have the imagery in the back that stays with companion in a box so we have that imagery that's following us whenever we scroll and as we scroll we have three different sections so we've got the hero get in everyone we're hanging out in boxes whatever the hell that means i'm gonna leave it out for you to figure out but with this website i think it's cool to talk about just because it's such a different type of website we're not seeing the the typical sections the typical super wide designs and overall it's a decent looking site it's very simple but i enjoy the design but if i had to pick a favorite website in this entire collection i'm going to go ahead and take on the first design here sneakerheads.xyz when i first saw this it just blew me away the amount of attention to detail that the creators of the site had with this project and the attention to detail with the actual nfts and the designs now i'm gonna leave the link to all of these websites as usual as always in the description so you guys can check them out by yourselves but if you guys have any questions of how you would do maybe this interaction maybe that interaction maybe this design right here how you would actually do that in webflow then do leave me a comment down below because i'm always happy to take a look and help you guys out if you guys want more updates for me then make sure that you follow my twitter because i do have regular updates there so thank you guys so much for watching this video and if you enjoyed it leave a like leave a comment subscribe do all those things and i'll see you guys on the next one

Channel: Arnau Ros

Views: 11,610

Keywords: best web3 websites, create web3 website, web3 website template, web3 website design, nft website, nft website design, nft website template, nft website free, nft website ui design, nft website design figma, nft website build, nft website figma, nft website development, nft website wordpress, nft website react, nft website html, nft website design tutorial, web 3, web 3.0, web design nft, web design web3

Id: 9Wg4b2LQv9w

Length: 10min 9sec (609 seconds)

Published: Mon Jul 04 2022