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

แชร์
ฝัง
  • เผยแพร่เมื่อ 1 ต.ค. 2024

ความคิดเห็น • 196

  • @jonnysolaris
    @jonnysolaris 10 หลายเดือนก่อน +211

    These AI voices are everywhere now, am I the only one that finds them uncomfortable and distracting?

    • @DesignCodeTeam
      @DesignCodeTeam  10 หลายเดือนก่อน +106

      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 10 หลายเดือนก่อน +26

      ​@@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 10 หลายเดือนก่อน +28

      Very uncomfortable and most of the times i skip these videos even the shorts

    • @amanjeetshrivastava1448
      @amanjeetshrivastava1448 10 หลายเดือนก่อน +5

      ​@@DesignCodeTeamyou did good❤️ but voice is a sharp pitchy, maybe that's making people uncomfortable.

    • @vitalysuper3193
      @vitalysuper3193 10 หลายเดือนก่อน +1

      @@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

  • @thepneumanator
    @thepneumanator 6 หลายเดือนก่อน +27

    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 8 หลายเดือนก่อน +11

    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 4 หลายเดือนก่อน

      hheheh😂

    • @frankiet3034
      @frankiet3034 หลายเดือนก่อน

      That's me too hahahahaha. Thank you for letting me know that i'm not the only one :)

  • @jeromebrown20
    @jeromebrown20 9 หลายเดือนก่อน +21

    Thank you for this, I have been afraid of Spline. This looks like a great to start

  • @acya05
    @acya05 6 หลายเดือนก่อน +1

    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  6 หลายเดือนก่อน +1

      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.

  • @JackxT-Q
    @JackxT-Q 6 หลายเดือนก่อน +1

    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........

  • @katolakehinde7141
    @katolakehinde7141 10 หลายเดือนก่อน +9

    Quick note: at 13:27, you said "Extrusion" instead of "Bevel"

    • @DesignCodeTeam
      @DesignCodeTeam  10 หลายเดือนก่อน +4

      Thanks for reporting that!

  • @darialysak4591
    @darialysak4591 8 หลายเดือนก่อน +2

    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?

  • @victorlin8307
    @victorlin8307 9 หลายเดือนก่อน +7

    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.

  • @ShampooAki
    @ShampooAki 10 หลายเดือนก่อน +25

    Great, the course is finally out! 🎉 😊

    • @DesignCodeTeam
      @DesignCodeTeam  10 หลายเดือนก่อน +1

      Yes! Thank you!

    • @jairusnouvel4780
      @jairusnouvel4780 7 หลายเดือนก่อน

      Have been waiting for this for so long. Thanks DesignCode

  • @scottonanski4173
    @scottonanski4173 10 หลายเดือนก่อน +6

    "As intuitive as Figma..."
    Glad to see you have sense of humor. lol

    • @DesignCodeTeam
      @DesignCodeTeam  10 หลายเดือนก่อน +1

      Having tried so many 3d softwares, we find it pretty intuitive. What part is difficult for you?

    • @scottonanski4173
      @scottonanski4173 10 หลายเดือนก่อน +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 9 หลายเดือนก่อน

      I used masks a lot before figma, in adobe fireworks. But im doomed since then. @@scottonanski4173

    • @elpedomasgrande1
      @elpedomasgrande1 9 หลายเดือนก่อน

      @@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.

  • @PaulFidika
    @PaulFidika 9 หลายเดือนก่อน +1

    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 9 หลายเดือนก่อน +1

      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

  • @trattface
    @trattface 2 หลายเดือนก่อน +1

    Haven't been able to open the dropbox link. Have tried many times over weeks

  • @Formadvpart2BillionaireGuillen
    @Formadvpart2BillionaireGuillen 6 หลายเดือนก่อน +1

    Formadv_part2_100 luxury edtion

  • @wilmertheliooon
    @wilmertheliooon 2 หลายเดือนก่อน +1

    Holy sh1t! I’ve been waiting for something like this for years!!!!!

  • @clementbassey
    @clementbassey 5 หลายเดือนก่อน +1

    How about a Rive tutorial?

  • @SteveKalinda
    @SteveKalinda 9 หลายเดือนก่อน +2

    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 9 หลายเดือนก่อน

      Bingo. That confused me for a second.

  • @andrewselivjorstovs1379
    @andrewselivjorstovs1379 2 หลายเดือนก่อน +1

    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 หลายเดือนก่อน

      Please get it back, I want to learn the scroll interaction 🙏🏼🙏🏼🙏🏼🙏🏼🙏🏼🙏🏼🙏🏼🙏🏼🙏🏼🙏🏼

  • @jdfer1157
    @jdfer1157 8 หลายเดือนก่อน +1

    28:27 The material assets is to pro. How can i use it o ricreate by my self?

  • @justrelax8199
    @justrelax8199 9 หลายเดือนก่อน +2

    Is it possible to bind scene elements to the gyroscope?

  • @nishaanjum4901
    @nishaanjum4901 13 วันที่ผ่านมา

    Everything was so fast that even i played at lower than the normal speed still i couldn't get clarity of how and which options were selected . Totally useless

  • @gabrielegelfofx
    @gabrielegelfofx 9 หลายเดือนก่อน +2

    2D UI feature was added recently. I'd like to see a course of the new Spline features. Thanks.

  • @אוריתמרגולין
    @אוריתמרגולין 10 หลายเดือนก่อน +3

    Is it possible to give the buttons on the cards "href", and make them work?

    • @DesignCodeTeam
      @DesignCodeTeam  10 หลายเดือนก่อน +4

      Yes, you can do that by creating a mouse down event: docs.spline.design/7d99d64235414795a3c4237366c26060

  • @mbrdesigns24
    @mbrdesigns24 3 หลายเดือนก่อน

    Would I use it in free figma or should I buy the professional one or more..?

  • @mbrdesigns24
    @mbrdesigns24 3 หลายเดือนก่อน

    Would I use it in free figma or should I buy the professional one or more..?

  • @santhoshkumar-go6pg
    @santhoshkumar-go6pg 10 หลายเดือนก่อน +1

    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

  • @erdincgc2
    @erdincgc2 9 หลายเดือนก่อน

    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

  • @MantasVEVO
    @MantasVEVO หลายเดือนก่อน

    Dropbox link doesn't work :(

  • @ed61730
    @ed61730 2 หลายเดือนก่อน

    Amazing! More courses like this please :) Looking to offer ux spline as part of my 3d ux packages

  • @sakhiwodlalisa4844
    @sakhiwodlalisa4844 5 หลายเดือนก่อน

    I use I7 12th gen 16G Ram and yet it lags a lot when i use Spline. How do i fix this?

  • @martinzutelman1018
    @martinzutelman1018 8 หลายเดือนก่อน

    can you program those buttons to do something? like for example, subscribe? or are they just used for decoration an background

  • @warsin8641
    @warsin8641 9 หลายเดือนก่อน +1

    this looks just as hard

  • @CLY_-mj5tg
    @CLY_-mj5tg 9 หลายเดือนก่อน +2

    Can a flutter be integrated?

  • @fbnxo
    @fbnxo 7 หลายเดือนก่อน

    Is there any website that actually uses the tab bar navigation for mobile? Would like to test that

  • @olyapustovalova9537
    @olyapustovalova9537 5 หลายเดือนก่อน

    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  5 หลายเดือนก่อน

      Thanks, I updated the link: www.dropbox.com/scl/fo/6jr06jbjiktkgq2ex7sz1/ABPyUF_Yd8wDmAhH-voZ8hk?rlkey=wuspz1h39ijptf4255ezdqmbc&st=wj0t79j6&dl=0

    • @olyapustovalova9537
      @olyapustovalova9537 4 หลายเดือนก่อน

      @@DesignCodeTeam Thank you!

  • @enjoynime7102
    @enjoynime7102 6 หลายเดือนก่อน

    Front end developer : alright my ui designer try to killing me againts

  • @orionblue7938
    @orionblue7938 8 หลายเดือนก่อน

    Hey bro great content! could you help me suggest how can I use the same course but tweak it to present in my portfolio?

  • @SXsoft99
    @SXsoft99 9 หลายเดือนก่อน

    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

  • @IFennecYouCODM
    @IFennecYouCODM 10 หลายเดือนก่อน +1

    to learn from this course do we need to buy spline subscription or Free one will do the job?

    • @DesignCodeTeam
      @DesignCodeTeam  10 หลายเดือนก่อน +1

      You can get the free version of spline

    • @IFennecYouCODM
      @IFennecYouCODM 10 หลายเดือนก่อน

      @@DesignCodeTeam cool. Thanks.

  • @ahaydnjones
    @ahaydnjones 3 หลายเดือนก่อน

    Hi there. The Dropbox link for the files doesn't seem to work?

    • @DesignCodeTeam
      @DesignCodeTeam  2 หลายเดือนก่อน

      Hi, we have tested the Dropbox link and it should work. Please try again thank you

  • @nihalshaikh5530
    @nihalshaikh5530 7 หลายเดือนก่อน

    can we later transfer the files to developers or he needs to make it from scratch just like figma

  • @asdasdaa7063
    @asdasdaa7063 7 หลายเดือนก่อน

    Please do more spline courses! Can you show us how to make cute pets with fur?

  • @Arthuur9
    @Arthuur9 24 วันที่ผ่านมา

    dropbox folder not wokring

  • @joeldrennen
    @joeldrennen 8 หลายเดือนก่อน

    Anyone else getting flashbacks to when Flash was everywhere on the web?

  • @Janio4646
    @Janio4646 6 หลายเดือนก่อน

    Oi. Tem alguma aula completa em português Brasileiro?

  • @arthur_adams
    @arthur_adams 8 หลายเดือนก่อน

    is there a Figma file for the tab bar animation? idk maybe I missed it on the dropbox

  • @haya3sa
    @haya3sa หลายเดือนก่อน

    Dropbox link doesn't work

  • @martinzutelman1018
    @martinzutelman1018 8 หลายเดือนก่อน

    Can you click those buttons?? do they work??

  • @literallyme.memes.
    @literallyme.memes. 2 หลายเดือนก่อน

    the dropbox file is showing error when opening. pls fix it

    • @DesignCodeTeam
      @DesignCodeTeam  2 หลายเดือนก่อน

      The link is now working!

  • @yuritian8830
    @yuritian8830 5 หลายเดือนก่อน

    Я так и не понял. Зачем?

  • @VonMellArevalo
    @VonMellArevalo 4 หลายเดือนก่อน

    I can't group the the four shapes, why?

    • @VonMellArevalo
      @VonMellArevalo 4 หลายเดือนก่อน

      Whenever i am dragging the cursor , it end up exchanging position of eclipse instead of grouping. What i need to do?

  • @JesseMoffett
    @JesseMoffett 10 หลายเดือนก่อน +7

    Sold. Signing up for Spline now!

    • @DesignCodeTeam
      @DesignCodeTeam  10 หลายเดือนก่อน

      Means a lot, thanks!

  • @Viva-07
    @Viva-07 9 หลายเดือนก่อน +1

    Thank you

  • @huynhkhoiminh
    @huynhkhoiminh 6 หลายเดือนก่อน

    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  6 หลายเดือนก่อน

      Spline lets you embed their 3D asset to any site, using React with ThreeJS or directly to Framer, Webflow, Wix, etc.

    • @huynhkhoiminh
      @huynhkhoiminh 6 หลายเดือนก่อน

      @@DesignCodeTeam thank you so much

  • @AlbaEdits
    @AlbaEdits 10 หลายเดือนก่อน +2

    is sooooo cool. 3d is the futur 👌

    • @DesignCodeTeam
      @DesignCodeTeam  10 หลายเดือนก่อน

      Definitely, Apple and other big tech are starting to use it more and more

  • @matthew33.714
    @matthew33.714 7 หลายเดือนก่อน

    This introduction needs an introduction.

  • @InverserPro
    @InverserPro 5 หลายเดือนก่อน +1

    inspirational video!

  • @naffy3327
    @naffy3327 9 หลายเดือนก่อน +1

    No. Just give me a simple HTML button please. Thank you.

  • @BlayneOliver
    @BlayneOliver 7 หลายเดือนก่อน

    WOW!! This is exactly what I’m after 🎉 THANK YOU 🙏

  • @GG-yc3sp
    @GG-yc3sp 8 หลายเดือนก่อน

    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..."

  • @diogomosaic2177
    @diogomosaic2177 4 หลายเดือนก่อน

    the donwload isnt working

  • @alikaram98
    @alikaram98 10 หลายเดือนก่อน +2

    wow so nice
    tank's alot

    • @DesignCodeTeam
      @DesignCodeTeam  10 หลายเดือนก่อน

      You are most welcome

  • @SehrishMoujahid
    @SehrishMoujahid 9 หลายเดือนก่อน

    i am having free versions humm

  • @Lamya-dm1bs
    @Lamya-dm1bs 5 หลายเดือนก่อน

    Do you this in fgma?

  • @olivierturpinlavallee6153
    @olivierturpinlavallee6153 10 หลายเดือนก่อน +3

    Thanks!

  • @gustavoalonso8931
    @gustavoalonso8931 7 หลายเดือนก่อน

    I miss your videos... 😭

  • @themotivationlive
    @themotivationlive หลายเดือนก่อน

    😊😊😊😊😊

  • @nosirve9458
    @nosirve9458 9 หลายเดือนก่อน

    is it possible to do this with blender?

  • @user-il9qo4qc4n
    @user-il9qo4qc4n 8 หลายเดือนก่อน

    Why the AI voice over?

  • @gunadAgp
    @gunadAgp 9 หลายเดือนก่อน

    i likeed you jood jobs

  • @Lichtsucher
    @Lichtsucher 4 หลายเดือนก่อน

    💙💙💙

  • @zion-faithakakpo6602
    @zion-faithakakpo6602 6 หลายเดือนก่อน

    13:10

  • @JoaoPauloDev
    @JoaoPauloDev 5 หลายเดือนก่อน

    So perfect, you're a excellent teacher, congratulations!

    • @sakhiwodlalisa4844
      @sakhiwodlalisa4844 5 หลายเดือนก่อน

      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 5 หลายเดือนก่อน

      @sakhiwodlalisa4844 Same thing here, 3D is so cool but I think is not for now

  • @PradipPaul-c9t
    @PradipPaul-c9t 4 หลายเดือนก่อน

    Very good... 👍👍👍☺

  • @arcticxFF9
    @arcticxFF9 8 หลายเดือนก่อน

    its very helpful thanks

  • @pfzen2851
    @pfzen2851 8 หลายเดือนก่อน

    cool soft, very variable & simple/user friendly

  • @3ric908
    @3ric908 9 หลายเดือนก่อน

    Can’t understand why they don’ add a timeline 😢

  • @SOULITUDE-xoxo
    @SOULITUDE-xoxo 7 หลายเดือนก่อน

    🐼- was here

  • @RyuBeach
    @RyuBeach 7 หลายเดือนก่อน

    무슨 프로그램인가요

  • @cekuhnen
    @cekuhnen 10 หลายเดือนก่อน +1

    They are today actually pretty good

    • @DesignCodeTeam
      @DesignCodeTeam  10 หลายเดือนก่อน

      Spline has come a long way!

  • @MoreCreativeGFX
    @MoreCreativeGFX 9 หลายเดือนก่อน

    Great

  • @UnbelievableHotdog
    @UnbelievableHotdog 6 หลายเดือนก่อน +1

    I dont thunk you understand blender is completly free

  • @varunsalat619
    @varunsalat619 8 หลายเดือนก่อน +1

    if there was a human voice it would be great but still a great tutorial for beginners 🎉
    Waiting for more beginners friendly tutorial 😊

  • @MoreCreativeGFX
    @MoreCreativeGFX 9 หลายเดือนก่อน

    Amazing

  • @ivancalisaya4218
    @ivancalisaya4218 9 หลายเดือนก่อน

    buen video

  • @ChrisTian-ox5nr
    @ChrisTian-ox5nr 9 หลายเดือนก่อน

    awesome thanks.

  • @dizelvinable
    @dizelvinable 10 หลายเดือนก่อน +2

    Amazing!

  • @Deus-lo-Vuilt
    @Deus-lo-Vuilt 9 หลายเดือนก่อน

    Thanks for video

  • @zluxy
    @zluxy 10 หลายเดือนก่อน

    insane

    • @DesignCodeTeam
      @DesignCodeTeam  10 หลายเดือนก่อน

      Spline is really cool :)

  • @برنامجبانوراما
    @برنامجبانوراما 10 หลายเดือนก่อน

    Thanks

  • @f7kev
    @f7kev 10 หลายเดือนก่อน

    Noice!!!

  • @vladterra7353
    @vladterra7353 9 หลายเดือนก่อน

    is it possible to integrate into Shopify themes? If yes, tutorial will be very helpful for many

  • @boladeatiaro7957
    @boladeatiaro7957 8 หลายเดือนก่อน

    Thank you for this wonderful video on creating 3d interactions for websites with Spline.
    TH-cam recommended your video when I was watching CJ Gammon's channel.
    Liked this video and decided to subscribe.

  • @MemeFunnyV
    @MemeFunnyV 10 หลายเดือนก่อน +1

    Over design

    • @heretikpapy
      @heretikpapy 9 หลายเดือนก่อน

      Everything will to AR, XR, VR, soon. Don't forget that.

    • @MemeFunnyV
      @MemeFunnyV 9 หลายเดือนก่อน

      @@heretikpapy over utilities

    • @petertelegdi3364
      @petertelegdi3364 9 หลายเดือนก่อน +1

      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.

  • @zharrysssn1861
    @zharrysssn1861 9 หลายเดือนก่อน

    what software is this i am new

  • @SehrishMoujahid
    @SehrishMoujahid 9 หลายเดือนก่อน

    can i use blender instead of spline

  • @uxkayan
    @uxkayan 10 หลายเดือนก่อน

    Hi! Can you generate a certificate?

  • @silver10188
    @silver10188 10 หลายเดือนก่อน

    5:10 this course isn't free. It says get Pro at %50 off.

    • @DesignCodeTeam
      @DesignCodeTeam  10 หลายเดือนก่อน +2

      That's for the premium courses on the site, not for this course specifically. We have some free courses there.

    • @MACH_SDQ
      @MACH_SDQ 10 หลายเดือนก่อน

      go ahead i already did get Pro !!!!

  • @zenbauhaus1345
    @zenbauhaus1345 10 หลายเดือนก่อน

    nice overview. are you human?

    • @DesignCodeTeam
      @DesignCodeTeam  10 หลายเดือนก่อน +2

      If you have to ask then we did a pretty good job ;)

  • @ianthehunter3532
    @ianthehunter3532 9 หลายเดือนก่อน

    Looks cool, is it free.