How to Build a UX Design Portfolio Website with Framer | 2024 Tutorial

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

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

  • @AlienaCai
    @AlienaCai  6 หลายเดือนก่อน +4

    Start your Framer UX Portfolio here: shorturl.at/cZxju
    And use code ALIENA to get 25% off basic and mini sites
    My example portfolio is at: alienacai.me
    My product design course: fasttrackux.com
    *All projects, numbers, and figures in this video are fictional and for educational purposes only.*

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

      Tip: if you call your variants Desktp/Tablet/Phone, Framer will automatically pick the variant for each breakpoint

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

    I have been feeling like a no good designer because my portfolio has refused to look like what i want, but this video has given me the encouragement i think i need.
    Lets go get this portfolio done and running

  • @tegar.nastar
    @tegar.nastar 5 หลายเดือนก่อน +8

    Holy! I never thought about making portfolio with "trying to tell a story" in mind and you changed my perspective, thank you for sharing such great insights!

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

      Thank you!!

  • @PatTheRipper
    @PatTheRipper 13 วันที่ผ่านมา +1

    As a new UXUI student that just finished a boot camp this is gold. Here was trying to learn Java script 😅 I will learn more coding. Just need to get my portfolio up and running

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

    Incredibly well done video - from a former consultant that works in tech

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

      Thanks! I'm glad you found it helpful. ✨

  • @crystalriveradesign
    @crystalriveradesign 6 หลายเดือนก่อน +3

    Thank you so much for your always helpful videos! You really get into details that a lot of others tend to skip over.

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

    I'm awesome.
    I'm smart.
    I'm patient.
    My portfolio shines like a diamond. 💎✨😂

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

    I love your content Aliena, you are a smart Ux entrepreneur and I am looking forward to learning more from you!

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

      Thank you so much!

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

      ​@@AlienaCai Hey, Aliena I used a presentation frame ratio of 4:3 according to 1024x768 But when I turn it into actual size on Figma it does not turn into full screen, And I also think that is kinda too small to fit in all my contents, would you suggest I change the proportion to 1920x1080

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

    This is a really great video to get an overall idea of how I can turn my Figma designs to Framer. No complicated steps, just straight and simple execution. Thanks Aliena❤

  • @aniruddhasainkar7347
    @aniruddhasainkar7347 6 หลายเดือนก่อน +2

    Was waiting for this, from a long time.
    Thank you!

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

      Thank you!!

  • @andynonimuss6298
    @andynonimuss6298 8 วันที่ผ่านมา

    When you've been designing for 24 year like I have, I can easily visualize a design solution and just create it. For an experienced designer, wireframing and low-fi design are wasted steps. I only do wireframes for clients that I feel want it, or are paying for it. In the age of component-based design, even high resolution design components can easily and quickly be moved around like puzzle pieces. And with component design, you can globally change every component instance in every frame instantly. A reliance on wireframing and low-fi designs is more for beginning designers than advanced designers.

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

    Really nice, my head was spinning though, can you make a beginner-friendly version, please.

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

      This is definitely a more advanced one. I'll note that down.

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

      @@AlienaCai Thank you

  • @mhtwr2036
    @mhtwr2036 6 หลายเดือนก่อน +2

    I'm really excited about this tutorial. Also you're helping me a lot with my UX studies, So a huge thanks to YOU.

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

      Just went live!

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

    Great video, thanks for the tips Aliena

  • @shubhraagarwal9250
    @shubhraagarwal9250 6 หลายเดือนก่อน +2

    Awesome! Exactly what I needed right now.

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

      So glad to hear this 😍

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

    thank you so much- i was so confused on how to start

  • @T1nyNature
    @T1nyNature 22 วันที่ผ่านมา

    Your right! Thank you

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

    All I can say is thank you so much Aliena!

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

      No problem at all!! The pace in this video is a bit fast, pairing it with a nice dessert may help 😅

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

    you are officially an engineer now...

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

    Thank you for your nice and clear explanation! I also prepare my portfolio using figma and framer in my free time from work and school. Even if I master most of the processes, I think I will take my page one step further with this video. 🙏

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

      Glad it was helpful!

  • @emmanuelonuada
    @emmanuelonuada 6 หลายเดือนก่อน +2

    Loved the step by step guide. Very insightful as always.
    And 'YES' room tour please 😁😅

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

      Okayyyyy 👑

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

    helpfully + very good sharing!

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

      Thank you! Cheers!

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

    Thank you Aliena!! This is an incredibly helpful tutorial for someone adding Framer to their toolbox.

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

    Can you please make a portfolio building tutorial for wix studio specially for responsive design. Thx

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

      Noted!

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

    Santa Maria, that's amazing! Thank you!

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

      Thank you too!

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

    Video is very informative but not sure that if it's beginner friendly but for me it's normal and can understand.😊

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

      As long as you can understand, I'm happy. Not a easy one for sure!

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

    How do publish gtm and other pixels tags

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

    Thank you!🤩

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

    hiiii! Amazing content you saved me! I just have a question: I already designed the 3 viewport for each page of my portfolio on figma, now after watching this video I'm wondering if I can still paste the tablet and mobile viewports from figma on Framer making adjustments on those design or I'll have to do the whole thing a second time on Framer

    • @AlienaCai
      @AlienaCai  4 หลายเดือนก่อน +1

      Oh my, I asked Framer the exact same question.
      Originally, I just hide everything on the other breakpoints and re-imported again to save time.
      But Framer told me that's not the best practice for responsive design and it's much better off doing it again on Framer.
      Your choice 👍

  • @sungchristy6192
    @sungchristy6192 6 หลายเดือนก่อน +7

    Thank you for sharing! This is the most complete Framer tutorial I have ever seen.

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

      So glad to hear that! Worth all my effort then 😉

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

    Thank You 🤝

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

      Thank you 😊

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

    Hi Aliena! would you be open to making another video like this but for beginners? this has helped a lot but I'm still kinda lost lol

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

      I've noted that! Yes, this is not for beginners 🫣

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

    Great video!!! Wish me luck 😂

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

      Good luck!! Putting on a nice playlist always helps.

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

    Welcome 🎉

  • @SSulleiman
    @SSulleiman 6 หลายเดือนก่อน +5

    Lady Alienacai please we need more tutorial videos on framer...building websites and mobile from scratch using Framer. Thank you and God bless you

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

      Noted!

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

    Can you post about building portfolio with Google's sites?

  • @AgniMJ
    @AgniMJ 6 หลายเดือนก่อน +5

    This can be made with free Figma right?

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

      Yes

    • @AlienaCai
      @AlienaCai  6 หลายเดือนก่อน +8

      It can be made with Figma and Framer for free, if you don't mind a Framer badge and a framer domain. If you need your custom domain, there's a monthly Framer service fee.

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

    what is the font used in ur portfolio?

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

      It's Mulish

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

    Thank youuu

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

      No problemmmm

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

    "My portfolio shines like a diamond"🤣

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

    Amazing! I’ve been trying to figure out which platform to go to next because I’m tired of Wix!

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

    Yes come thru for us, ❤❤

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

    Woww👏👏👏 after watching so many tutorials, this seems like the best tutorial of framer for beginners to build a portfolio

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

      Glad it was helpful! There was so much to cover so the pacing is a bit fast. I guess you are a fast learner.

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

    too fast