Тёмный
No video :(

Create 3D UI Interactions for Websites with Spline - Free course 

DesignCode
Подписаться 303 тыс.
Просмотров 380 тыс.
50% 1

Опубликовано:

 

28 авг 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 191   
@thepneumanator
@thepneumanator 5 месяцев назад
Don't let the AI voice scare you away, these are some great tuts if you are just starting with Spline. Good job peeps!
@brobinbraauw5523
@brobinbraauw5523 7 месяцев назад
Me: "Oh it's only 2 hours and 41 minutes I can finish this in an afternoon" Also me: pauses and rewinds every 5 seconds cause I've already forgot what the next step is
@kickassmovies5952
@kickassmovies5952 3 месяца назад
hheheh😂
@frankiet3034
@frankiet3034 7 дней назад
That's me too hahahahaha. Thank you for letting me know that i'm not the only one :)
@ShampooAki
@ShampooAki 9 месяцев назад
Great, the course is finally out! 🎉 😊
@DesignCodeTeam
@DesignCodeTeam 9 месяцев назад
Yes! Thank you!
@jairusnouvel4780
@jairusnouvel4780 6 месяцев назад
Have been waiting for this for so long. Thanks DesignCode
@jeromebrown20
@jeromebrown20 8 месяцев назад
Thank you for this, I have been afraid of Spline. This looks like a great to start
@wilmertheliooon
@wilmertheliooon 26 дней назад
Holy sh1t! I’ve been waiting for something like this for years!!!!!
@JesseMoffett
@JesseMoffett 9 месяцев назад
Sold. Signing up for Spline now!
@DesignCodeTeam
@DesignCodeTeam 9 месяцев назад
Means a lot, thanks!
@GG-yc3sp
@GG-yc3sp 6 месяцев назад
I've been looking for such a good tutorial for days, thank you so much! And if I may say so: a great clear and very present voice! No "uh yes, then click here, or no, better there..."
@jonnysolaris
@jonnysolaris 9 месяцев назад
These AI voices are everywhere now, am I the only one that finds them uncomfortable and distracting?
@DesignCodeTeam
@DesignCodeTeam 9 месяцев назад
We believe this is a better experience. Most of our team isn't native English speakers (we're French). We have thick accent and it wouldn't be consistent across the whole video working as a team. So we picked the most natural AI voice using Eleven labs.
@jonnysolaris
@jonnysolaris 9 месяцев назад
​@@DesignCodeTeamI understand. It's a cheap and easy solution. Maybe I was asking about the big picture. Literally every other video has these, or the TikTok voices, they're a little creepy. The 'uncanny valley' for voices!
@mustafahadi3613
@mustafahadi3613 9 месяцев назад
Very uncomfortable and most of the times i skip these videos even the shorts
@amanjeetshrivastava1448
@amanjeetshrivastava1448 8 месяцев назад
​@@DesignCodeTeamyou did good❤️ but voice is a sharp pitchy, maybe that's making people uncomfortable.
@vitalysuper3193
@vitalysuper3193 8 месяцев назад
@@DesignCodeTeamthe main problem is that youre using generated voice, you should use some fancy new ai tools either translate the video from your native language or generate it using newer tools so it sounds fluent
@victorlin8307
@victorlin8307 8 месяцев назад
Feedback: Not sure if I missed something during video observation. 50:45 Path Animation: "Path" or the "Apple" part of this file initially only has 2 states for animation transitions. After deleting the event for "Path 2" or the "Leaf" part of this file, "Path"/"Apple" has 3 states for animation. After rewinding that portion multiple times, I still did not see when "State 2" was added to "Path"/"Apple" although "Path" was selected by the user after the event for "Path 2". So my question is: What were the state settings in "State 2" for "Path"/"Apple" at 52:00? I did not anticipate frustration at that point although most of this video is nicely thorough and clear so far. I understand that there is really no wrong way to go about this specific thing and it doesn't matter eventually, but I am just trying to ask questions.
@BlayneOliver
@BlayneOliver 6 месяцев назад
WOW!! This is exactly what I’m after 🎉 THANK YOU 🙏
@ed61730
@ed61730 Месяц назад
Amazing! More courses like this please :) Looking to offer ux spline as part of my 3d ux packages
@scottonanski4173
@scottonanski4173 8 месяцев назад
"As intuitive as Figma..." Glad to see you have sense of humor. lol
@DesignCodeTeam
@DesignCodeTeam 8 месяцев назад
Having tried so many 3d softwares, we find it pretty intuitive. What part is difficult for you?
@scottonanski4173
@scottonanski4173 8 месяцев назад
@@DesignCodeTeam Oh, it's not the 3D I mind, it's Figma. lol Example: A 'mask' implies it 'covers' that which is behind it. Like wearing a 'mask'. In Figma, you put a mask BEHIND all the elements - which is flat out stupid. It's like putting a mask on the back of you head expecting people not see your face. lol At any rate, I love your content. I just thought it was funny to hear someone refer to Figma as 'intuitive'.
@heretikpapy
@heretikpapy 8 месяцев назад
I used masks a lot before figma, in adobe fireworks. But im doomed since then. @@scottonanski4173
@elpedomasgrande1
@elpedomasgrande1 8 месяцев назад
@@scottonanski4173masking is an established principle across all 3D/Graphic/CAD-Software. I understand your view regarding the mask metaphor, regardless it is the norm to use it this way. It refers less to the analogy of wearing a “mask” and more like “masking” known from painting, where you block out parts by covering them, for instance, with masking tape, so it is actually quite close to that principle.
@JoaoPauloDev
@JoaoPauloDev 4 месяца назад
So perfect, you're a excellent teacher, congratulations!
@sakhiwodlalisa4844
@sakhiwodlalisa4844 4 месяца назад
I use an I7 12th gen G series 16GB RAM and yet it lags when I use Spline...how do I fix this?
@JoaoPauloDev
@JoaoPauloDev 4 месяца назад
@sakhiwodlalisa4844 Same thing here, 3D is so cool but I think is not for now
@cekuhnen
@cekuhnen 8 месяцев назад
They are today actually pretty good
@DesignCodeTeam
@DesignCodeTeam 8 месяцев назад
Spline has come a long way!
@gabrielegelfofx
@gabrielegelfofx 7 месяцев назад
2D UI feature was added recently. I'd like to see a course of the new Spline features. Thanks.
@katolakehinde7141
@katolakehinde7141 8 месяцев назад
Quick note: at 13:27, you said "Extrusion" instead of "Bevel"
@DesignCodeTeam
@DesignCodeTeam 8 месяцев назад
Thanks for reporting that!
@boladeatiaro7957
@boladeatiaro7957 6 месяцев назад
Thank you for this wonderful video on creating 3d interactions for websites with Spline. RU-vid recommended your video when I was watching CJ Gammon's channel. Liked this video and decided to subscribe.
@AlbaEdits
@AlbaEdits 8 месяцев назад
is sooooo cool. 3d is the futur 👌
@DesignCodeTeam
@DesignCodeTeam 8 месяцев назад
Definitely, Apple and other big tech are starting to use it more and more
@InverserPro
@InverserPro 4 месяца назад
inspirational video!
@DesignCodeTeam
@DesignCodeTeam 4 месяца назад
Thanks so much!
@pfzen2851
@pfzen2851 7 месяцев назад
cool soft, very variable & simple/user friendly
@andrewselivjorstovs1379
@andrewselivjorstovs1379 Месяц назад
Amazing video, guys! Well done and thank you on putting this together. Just wanted to let you know that the link to the files has expired.
@mornov379
@mornov379 13 дней назад
Please get it back, I want to learn the scroll interaction 🙏🏼🙏🏼🙏🏼🙏🏼🙏🏼🙏🏼🙏🏼🙏🏼🙏🏼🙏🏼
@justrelax8199
@justrelax8199 8 месяцев назад
Is it possible to bind scene elements to the gyroscope?
@darialysak4591
@darialysak4591 7 месяцев назад
Thanks, first steps loooks nice! My wi-fi icon looks great. The question is how to understand what numbers I should apply for different tasks, now you just said to me "here is 200 and here is 140 and position on 0 here and 45 here..." but how to inderstand it to work alone without hints?
@clementbassey
@clementbassey 4 месяца назад
How about a Rive tutorial?
@asdasdaa7063
@asdasdaa7063 6 месяцев назад
Please do more spline courses! Can you show us how to make cute pets with fur?
@SteveKalinda
@SteveKalinda 8 месяцев назад
you can tell the voice is AI generated, now maybe that's not an issue, but 13:27 - it's bevel not extrusion that's being adjusted to 10.
@natekuehl2678
@natekuehl2678 7 месяцев назад
Bingo. That confused me for a second.
@user-cp8zr8he1p
@user-cp8zr8he1p 2 месяца назад
Very good... 👍👍👍☺
@trattface
@trattface Месяц назад
Haven't been able to open the dropbox link. Have tried many times over weeks
@alikaram98
@alikaram98 9 месяцев назад
wow so nice tank's alot
@DesignCodeTeam
@DesignCodeTeam 9 месяцев назад
You are most welcome
@olivierturpinlavallee6153
@olivierturpinlavallee6153 9 месяцев назад
Thanks!
@DesignCodeTeam
@DesignCodeTeam 9 месяцев назад
Thanks!
@Viva-07
@Viva-07 8 месяцев назад
Thank you
@dizelvinable
@dizelvinable 8 месяцев назад
Amazing!
@DesignCodeTeam
@DesignCodeTeam 8 месяцев назад
Thanks!
@arcticxFF9
@arcticxFF9 7 месяцев назад
its very helpful thanks
@santhoshkumar-go6pg
@santhoshkumar-go6pg 9 месяцев назад
i have a issue i create a 3D model in spline and export as react code and implement in my react project and i can't change the size of the 3d model it take the full width of the my screen how to solve this problem
@Deus-lo-Vuilt
@Deus-lo-Vuilt 8 месяцев назад
Thanks for video
@DesignCodeTeam
@DesignCodeTeam 8 месяцев назад
You’re welcome!
@warsin8641
@warsin8641 8 месяцев назад
this looks just as hard
@ChrisTian-ox5nr
@ChrisTian-ox5nr 8 месяцев назад
awesome thanks.
@user-wm2ep3sh9o
@user-wm2ep3sh9o 8 месяцев назад
Is it possible to give the buttons on the cards "href", and make them work?
@DesignCodeTeam
@DesignCodeTeam 8 месяцев назад
Yes, you can do that by creating a mouse down event: docs.spline.design/7d99d64235414795a3c4237366c26060
@IFennecYouCODM
@IFennecYouCODM 8 месяцев назад
to learn from this course do we need to buy spline subscription or Free one will do the job?
@DesignCodeTeam
@DesignCodeTeam 8 месяцев назад
You can get the free version of spline
@IFennecYouCODM
@IFennecYouCODM 8 месяцев назад
@@DesignCodeTeam cool. Thanks.
@PaulFidika
@PaulFidika 8 месяцев назад
so what's the point of doing this? Unless you're creating an in-browser game this doesn't seem to make sense.
@Infinatummedia
@Infinatummedia 8 месяцев назад
Flat sites are flat. You can fudge it a bit with absolutes, shadows, z-index, transforms and some react tricks, but at the end of the day all the content is physically fixed to a single plane. I don't know whether splines will help me get where I want to go, but I'm happy to try anything to stop being limited by that plane in my design. The current other contender is learning the whole stack for 3js or aframe
@mbrdesigns24
@mbrdesigns24 2 месяца назад
Would I use it in free figma or should I buy the professional one or more..?
@CLY_-mj5tg
@CLY_-mj5tg 8 месяцев назад
Can a flutter be integrated?
@martinzutelman1018
@martinzutelman1018 7 месяцев назад
can you program those buttons to do something? like for example, subscribe? or are they just used for decoration an background
@varunsalat619
@varunsalat619 7 месяцев назад
if there was a human voice it would be great but still a great tutorial for beginners 🎉 Waiting for more beginners friendly tutorial 😊
@orionblue7938
@orionblue7938 7 месяцев назад
Hey bro great content! could you help me suggest how can I use the same course but tweak it to present in my portfolio?
@MoreCreativeGFX
@MoreCreativeGFX 8 месяцев назад
Amazing
@Lichtsucher
@Lichtsucher 3 месяца назад
💙💙💙
@sakhiwodlalisa4844
@sakhiwodlalisa4844 4 месяца назад
I use I7 12th gen 16G Ram and yet it lags a lot when i use Spline. How do i fix this?
@jdfer1157
@jdfer1157 7 месяцев назад
28:27 The material assets is to pro. How can i use it o ricreate by my self?
@arthur_adams
@arthur_adams 7 месяцев назад
is there a Figma file for the tab bar animation? idk maybe I missed it on the dropbox
@user-rx3xm7si3r
@user-rx3xm7si3r 8 месяцев назад
Thanks
@DesignCodeTeam
@DesignCodeTeam 8 месяцев назад
You're welcome!
@enjoynime7102
@enjoynime7102 5 месяцев назад
Front end developer : alright my ui designer try to killing me againts
@fbnxo
@fbnxo 6 месяцев назад
Is there any website that actually uses the tab bar navigation for mobile? Would like to test that
@gustavoalonso8931
@gustavoalonso8931 5 месяцев назад
I miss your videos... 😭
@nihalshaikh5530
@nihalshaikh5530 6 месяцев назад
can we later transfer the files to developers or he needs to make it from scratch just like figma
@martinzutelman1018
@martinzutelman1018 7 месяцев назад
Can you click those buttons?? do they work??
@Janio4646
@Janio4646 5 месяцев назад
Oi. Tem alguma aula completa em português Brasileiro?
@MantasVEVO
@MantasVEVO 22 дня назад
Dropbox link doesn't work :(
@olyapustovalova9537
@olyapustovalova9537 3 месяца назад
Thank you very much for the content! I started to follow this course 2 weeks ago and all worked good, but 2-3 days ago I tried to download files for last 3 lessons, and the dropbox link doesnt work anymore. Have you deleted the file? Or maybe the link is expired? Could you have a look please?
@DesignCodeTeam
@DesignCodeTeam 3 месяца назад
Thanks, I updated the link: www.dropbox.com/scl/fo/6jr06jbjiktkgq2ex7sz1/ABPyUF_Yd8wDmAhH-voZ8hk?rlkey=wuspz1h39ijptf4255ezdqmbc&st=wj0t79j6&dl=0
@olyapustovalova9537
@olyapustovalova9537 3 месяца назад
@@DesignCodeTeam Thank you!
@ivancalisaya4218
@ivancalisaya4218 8 месяцев назад
buen video
@MoreCreativeGFX
@MoreCreativeGFX 8 месяцев назад
Great
@gunadAgp
@gunadAgp 8 месяцев назад
i likeed you jood jobs
@huynhkhoiminh
@huynhkhoiminh 5 месяцев назад
Nice design, but I have a question, how can I realize all of them to a real website, I mean that Which framework and library can I use to develop all of 3D design above?
@DesignCodeTeam
@DesignCodeTeam 5 месяцев назад
Spline lets you embed their 3D asset to any site, using React with ThreeJS or directly to Framer, Webflow, Wix, etc.
@huynhkhoiminh
@huynhkhoiminh 5 месяцев назад
@@DesignCodeTeam thank you so much
@SXsoft99
@SXsoft99 7 месяцев назад
it's not that 3d is not cool but i think most developers forget that people still use old phones and laptops, and 3d will kill their GPU when I started web development 8 years back there was a course saying that your website needs to be reachable and interacted with even by people that have styles disabled lately i feel there is too much "flash" on my screen
@nosirve9458
@nosirve9458 8 месяцев назад
is it possible to do this with blender?
@ahaydnjones
@ahaydnjones 2 месяца назад
Hi there. The Dropbox link for the files doesn't seem to work?
@DesignCodeTeam
@DesignCodeTeam Месяц назад
Hi, we have tested the Dropbox link and it should work. Please try again thank you
@VonMellArevalo
@VonMellArevalo 3 месяца назад
I can't group the the four shapes, why?
@VonMellArevalo
@VonMellArevalo 3 месяца назад
Whenever i am dragging the cursor , it end up exchanging position of eclipse instead of grouping. What i need to do?
@joeldrennen
@joeldrennen 7 месяцев назад
Anyone else getting flashbacks to when Flash was everywhere on the web?
@zluxy
@zluxy 9 месяцев назад
insane
@DesignCodeTeam
@DesignCodeTeam 9 месяцев назад
Spline is really cool :)
@literallyme.memes.
@literallyme.memes. Месяц назад
the dropbox file is showing error when opening. pls fix it
@DesignCodeTeam
@DesignCodeTeam Месяц назад
The link is now working!
@Lamya-dm1bs
@Lamya-dm1bs 4 месяца назад
Do you this in fgma?
@diogomosaic2177
@diogomosaic2177 3 месяца назад
the donwload isnt working
@RyuBeach
@RyuBeach 6 месяцев назад
무슨 프로그램인가요
@3ric908
@3ric908 8 месяцев назад
Can’t understand why they don’ add a timeline 😢
@SOULITUDE-xoxo
@SOULITUDE-xoxo 6 месяцев назад
🐼- was here
@yuritian8830
@yuritian8830 4 месяца назад
Я так и не понял. Зачем?
@f7kev
@f7kev 8 месяцев назад
Noice!!!
@DesignCodeTeam
@DesignCodeTeam 8 месяцев назад
Thanks!
@Formadvpart2BillionaireGuillen
@Formadvpart2BillionaireGuillen 5 месяцев назад
Formadv_part2_100 luxury edtion
@vladterra7353
@vladterra7353 8 месяцев назад
is it possible to integrate into Shopify themes? If yes, tutorial will be very helpful for many
@SehrishMoujahid
@SehrishMoujahid 8 месяцев назад
can i use blender instead of spline
@naffy3327
@naffy3327 8 месяцев назад
No. Just give me a simple HTML button please. Thank you.
@user-il9qo4qc4n
@user-il9qo4qc4n 7 месяцев назад
Why the AI voice over?
@matthew33.714
@matthew33.714 6 месяцев назад
This introduction needs an introduction.
@uxkayan
@uxkayan 8 месяцев назад
Hi! Can you generate a certificate?
@zharrysssn1861
@zharrysssn1861 8 месяцев назад
what software is this i am new
@silver10188
@silver10188 9 месяцев назад
5:10 this course isn't free. It says get Pro at %50 off.
@DesignCodeTeam
@DesignCodeTeam 9 месяцев назад
That's for the premium courses on the site, not for this course specifically. We have some free courses there.
@MACH_SDQ
@MACH_SDQ 9 месяцев назад
go ahead i already did get Pro !!!!
@zion-faithakakpo6602
@zion-faithakakpo6602 4 месяца назад
13:10
@ianthehunter3532
@ianthehunter3532 8 месяцев назад
Looks cool, is it free.
@acya05
@acya05 5 месяцев назад
Please reupload this w normal human voice. AI voice weirding me out. The content is fun but voice is not. Just impossible to follow along
@DesignCodeTeam
@DesignCodeTeam 5 месяцев назад
To be fair, considering that some of our team don't speak as fluent English, perhaps the AI voice will be easier to understand. It doesn't take less effort, but we wanted to have a quality voice that's fluent.
@loc7s
@loc7s 8 месяцев назад
Channel is called designcode yet i havent seen a video of any coding
@SehrishMoujahid
@SehrishMoujahid 8 месяцев назад
i am having free versions humm
@JackxT-Q
@JackxT-Q 5 месяцев назад
Bruuuhhhhhh Are You Rapping Or Teaching?!I?! Can't Even See What You're Pressing/Touch,.They're Didn't Tell To Audience Which 1 You Should Touch Or Press,.,.Not Beginner Friendly........
@zenbauhaus1345
@zenbauhaus1345 8 месяцев назад
nice overview. are you human?
@DesignCodeTeam
@DesignCodeTeam 8 месяцев назад
If you have to ask then we did a pretty good job ;)
@professorice4325
@professorice4325 8 месяцев назад
Nice video but realistically no business will use this due to overcomplicating a website when the service is the goal.
@celestianeon4301
@celestianeon4301 8 месяцев назад
If that was the case we would be stuck with html
@UnbelievableHotdog
@UnbelievableHotdog 5 месяцев назад
I dont thunk you understand blender is completly free
@erdincgc2
@erdincgc2 8 месяцев назад
I watched until I saw "Also available for windows" :DD you are a joke? Learn how many people use mac and how many windows. You didn't even bother placing two download button...stopped watching coz that shows you are living in your own small world
@MemeFunnyV
@MemeFunnyV 8 месяцев назад
Over design
@heretikpapy
@heretikpapy 8 месяцев назад
Everything will to AR, XR, VR, soon. Don't forget that.
@MemeFunnyV
@MemeFunnyV 8 месяцев назад
@@heretikpapy over utilities
@petertelegdi3364
@petertelegdi3364 8 месяцев назад
3D is completely unnecessary if I'm looking for a hairdresser or buying a pizza. But it will still be if it looks good and the process and cost from design to product can be significantly reduced. And this one knows it. It is not "necessary" for every UI interface, but everyone is looking for what distinguishes their product from the rest. Now it will be 3D for a while, then in 6-8 years flat design or a retro rethink... but maybe in 10 years AI-generated animations etc. Art and aesthetics, it conveys feelings, thus it develops. As a transfer of information, it is unnecessary, could all web pages be plain text? Not because of UX.
@user-ru8rp4jq2l
@user-ru8rp4jq2l 8 месяцев назад
poor developers
@JustPlainRob
@JustPlainRob 8 месяцев назад
If Blender is too complicated for you to generate flat shaded simple geo like this you aren't skilled enough to be making 3D content at all. You talk about other apps being "costly" and then charge a subscription fee. Blender is totally free. Forever. And has better features. And is easily programmable yourself. With Python, a real programming language. This whole video sounds like an AI was fed a script and a bunch of clipart and screenshots to generate it automatically. It feels dead and generic and actively makes me dislike the product.
@WeTheExplorers
@WeTheExplorers День назад
A Blender expert should know in this context you can absolutely create complex 3d and export to .gltf THEN import to a platform like this. Blender isn't going to export stateless components in React, et. al, much less build complex interactions with cross platform exports. It serves a different purpose. I think complaining about how you can do all this in React-Three-Fiber is a slightly more accurate criticism, but then you have to start with code and not a GUI, so again different purpose.
@sherbertkid
@sherbertkid 5 месяцев назад
this tutorial goes hard!
Далее
Reacting to 21 Design Portfolios in 22 Minutes
22:41
Просмотров 569 тыс.
world's shortest UI/UX design course
6:53
Просмотров 1,2 млн
60-30-10 Color Rule
6:18
Просмотров 1,9 млн
I found the PERFECT duo for 3D web animations
5:52
Просмотров 204 тыс.
I Redesigned ALL of Figma from Scratch
9:06
Easily Improve Your Web Design (With Example)
17:59
Просмотров 69 тыс.
Top 2024 Web Design Trends
5:32
Просмотров 577 тыс.
So, you want to build apps & websites?
9:34
Просмотров 138 тыс.
Adobe is horrible. So I tried the alternative
25:30
Просмотров 953 тыс.
14 Web Designs Trends 2024
10:40
Просмотров 130 тыс.