How to create 3D Website Designs With No Code

okay I think it's time to build a website with some 3D elements and I'm gonna do so without writing any code web design looks so much better when you add 3D elements such as 3D text 3D characters and 3D icons in this video I'll show you how you can do that this is a spline it's a website where you can build different 3D elements or use ones that have already been generated or created by other users what makes spline design different than other 3D software is that allows you to export to the web first we'll head to spline if you don't have an account just click get started this is the spline dashboard there is lots of cool things here but I'm going to head over to community and then select to explore because there's a lot of community projects which I can use as inspiration or even just for this website I want to make because there's pretty much no chance of me creating something in 3D that doesn't look like a 7 year old kid drawing I decided to go with this a rocket design because I like space themes here I get a preview of what it actually looks like I can move it around I can and see its animations and I can consider what this might look like once I've placed it into a re website and let me just confirm that this is definitely a spaceship and it doesn't look like anything else but now to use it I'm going to select a remix and this takes you into the 3D creation tool now I don't really know any 3D so I'm just going to skip most of this and I just want to export this to start using within an actual page I'm going to select export here at the top right and head over to the viewer option I want to embed this into a new website and there's some script to do this I can also customize it so under the play settings I'm going to select not to have a logo and to remove the background color in the future I might remove things like page scroll but I'm going to update this and head over to the overview and select the code to export and then Place into my own project so I'm gonna head over to my no code platform of choice which is Wix Studio it's pretty quick and simple to get a new site up and running in just a minute I'm going to select to create a new site and and for this site I'm just going to start from a blank canvas now here inside of the editor I'm going to select it to add a brand new element and for this element I'm just going to use an iframe which also doubles as a code block I'm going to select it to edit the code and I'm going to paste in the code that's blind provided earlier I'll select update and that's it I've got now my 3D element on the page ready to be used let's actually make this look more like a website I'm going to add a text element on top of the 3D element and I'm going to give this the name of a space Design This Could Be an agency or something cool I just like space in general so I definitely think this is the name to go along with this 3D item I'm going to expand out this text and right now it's kind of in front of the 3D element so I'm going to head over to the layers and I'm going to move it below so this way the actual icon for the 3D element is kind of imposed on top of the text so it gives this kind of 3D look I'm also going gonna make the background black which means that I need to select the text and make that a white color because obviously for a space theme you'd need a black background another thing I can do is head over to the background of this section and select to use a better background image there's a few here to choose from I'm just going to select the very first one because it kind of uses the same colors as the rocket itself it's way too bright and vibrant though so what I'm going to do is turn down the opacity to about 30 and that way it kind of just Blends into the background okay let's make this website look even better I'm going to jump into mid journey and use the AI art here to generate a night sky full of stars and an aurora this meant that I could create this good looking image here which I can now use as the background of the website so I'm going to save this image in a web browser it's quite high resolution and then I'm going to upload it here to the site itself once uploaded I can now use this as the background it fits really nicely with the image of the spaceship and I think we're pretty much done here I'd like to thank Hannah who gave the inspiration for this project and showed me how it can be done you can check out her work on Twitter and I'll link it in my description and finally if you want to learn more about design check out enhance UI it's designed for developers a book I put together which teaches you color theory typography components and much more I've put it on sale for the next couple of weeks and if you want to learn how to make better looking websites or just support the channel this is definitely the way

Channel: Codex Community

Views: 166,185

Keywords: 3d website, 3d web design, 3d, website, web design, 3d object website, website 3d, no code, nocode, 3d website design, website design 3d, 3d interactive website, 3d site, create a 3d website, how to create 3d website, 3d website tutorial, how to make a 3d website, how to make 3d website with no coding, spline, spline design, 3d websites, no code 3d, 3d animation, ui, ux, interactive 3d, animated 3d, 3d objects, website 3d object, website 3d interactive, website object 3d

Id: i9t8gdaBsTg

Length: 4min 24sec (264 seconds)

Published: Thu Aug 10 2023