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

Поделиться
HTML-код
  • Опубликовано: 3 янв 2025

Комментарии • 81

  • @AlienaCai
    @AlienaCai  6 месяцев назад +5

    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 6 месяцев назад

      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

  • @vs5198
    @vs5198 День назад

    Aliena, 1,5 years ago I landed a nice Product designer job using your Notion Portfolio tips and drafts. All your videos are so helpful and insightful! Thank you for the value you’re sharing with all of us ❤
    I’m about to redo my portfolio and add a new recent case, this video is sooo helpful.

  • @tegar.nastar
    @tegar.nastar 5 месяцев назад +9

    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!

  • @jjyubinroll
    @jjyubinroll День назад

    this was the only video on framer that helped me, thank you so much

  • @PatTheRipper
    @PatTheRipper 23 дня назад +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. ✨

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

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

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

  • @lexualvibes
    @lexualvibes 3 месяца назад +1

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

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

  • @aniruddhasainkar7347
    @aniruddhasainkar7347 6 месяцев назад +2

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

  • @yzvisual
    @yzvisual 6 месяцев назад +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

  • @shubhraagarwal9250
    @shubhraagarwal9250 6 месяцев назад +2

    Awesome! Exactly what I needed right now.

    • @AlienaCai
      @AlienaCai  6 месяцев назад

      So glad to hear this 😍

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

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

  • @T1nyNature
    @T1nyNature Месяц назад

    Your right! Thank you

  • @emmanuelonuada
    @emmanuelonuada 6 месяцев назад +2

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

    • @AlienaCai
      @AlienaCai  6 месяцев назад +1

      Okayyyyy 👑

  • @soniasharifi6819
    @soniasharifi6819 5 месяцев назад

    Great video, thanks for the tips Aliena

  • @UXBreakdown
    @UXBreakdown Месяц назад +1

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

  • @mansigupta2082
    @mansigupta2082 4 месяца назад

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

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

  • @anamafaldarochaferreira3316
    @anamafaldarochaferreira3316 6 месяцев назад +1

    Welcome 🎉

  • @creativecode_webdesiner
    @creativecode_webdesiner 3 месяца назад

    Thank you!🤩

  • @vuthcreator
    @vuthcreator 4 месяца назад

    helpfully + very good sharing!

    • @AlienaCai
      @AlienaCai  4 месяца назад

      Thank you! Cheers!

  • @StudioIjo
    @StudioIjo 6 месяцев назад +1

    Thank You 🤝

    • @AlienaCai
      @AlienaCai  6 месяцев назад

      Thank you 😊

  • @motherofdrone
    @motherofdrone 5 месяцев назад

    Santa Maria, that's amazing! Thank you!

    • @AlienaCai
      @AlienaCai  5 месяцев назад

      Thank you too!

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

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

  • @mussanadirjan2779
    @mussanadirjan2779 6 месяцев назад +1

    you are officially an engineer now...

  • @Soumya_uiuxproductdesign
    @Soumya_uiuxproductdesign 6 месяцев назад +1

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

  • @itsDe0n
    @itsDe0n 6 месяцев назад +1

    Thank youuu

  • @andynonimuss6298
    @andynonimuss6298 18 дней назад

    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.

    • @AlienaCai
      @AlienaCai  2 дня назад

      That's interesting! I'm sure your experience gives you a lot of insight. 😊

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

  • @user-se3yi1ic5o
    @user-se3yi1ic5o 5 месяцев назад +1

    Great video!!! Wish me luck 😂

    • @AlienaCai
      @AlienaCai  5 месяцев назад

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

  • @gellirollz
    @gellirollz 6 месяцев назад

    Yes come thru for us, ❤❤

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

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

  • @kashyaprathod6755
    @kashyaprathod6755 Месяц назад

    How do publish gtm and other pixels tags

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

  • @shrutichavan21
    @shrutichavan21 Месяц назад

    "My portfolio shines like a diamond"🤣

  • @Tapan-d3m
    @Tapan-d3m 4 дня назад

    You are super fast 😢. I didn’t catch you

    • @AlienaCai
      @AlienaCai  4 дня назад

      Sorry about that! This video is made for bit more advanced designer. I'll make a beginner friendly one in 2025.

    • @Tapan-d3m
      @Tapan-d3m 4 дня назад

      @ ok 😀

  • @kiyomifrost
    @kiyomifrost 5 дней назад

    That’s the problem. Nobody knows how to create or what a design system even is

  • @ffmde8268
    @ffmde8268 Месяц назад

    too fast

  • @ShannonTheDesigner
    @ShannonTheDesigner 6 месяцев назад

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