Improve Your UI Skills with this Figma Exercise | Real-Time Design With Me

Поділитися
Вставка
  • Опубліковано 8 бер 2023
  • ☆ Download the Figma file from this video: bit.ly/3Yv5STk
    Try Figma: bit.ly/figma-free
    A lot of people ask me how to get better at UI design, and my answer is always the same: PRACTICE! So in this video I’m going to do an exercise I’d recommend to anyone looking to improve their UI design skills. We'll grab a screen, pop it in Figma, and walk through how we could make it better.
    ProtoPie: www.protopie.io/plans?ref=maddy
    ProtoPie School: learn.protopie.io/
    Use code MADDY at checkout for 30% off your Pro Plan
    More 'Design With Me' Videos: bit.ly/41UdHEU
    ◤ My Online Courses
    》Intro to UI/UX: bit.ly/3Udrr8B
    》Create your design Case Study: bit.ly/3gLlhio
    》6 Tactics for Organization in Figma: skl.sh/3s2dwXx
    》6 Tips for Components in Figma: skl.sh/3OfOluM
    ◤ Shop My Favorites
    》fonts: bit.ly/3ugAafz
    》screen recording: loom.grsm.io/lntxpc7rp0t8
    》mockups: bit.ly/3OcOmhI
    》desk accessories: bit.ly/3iCIwJ0
    》filming & gear: amzn.to/3wLLF0k
    ◤ Follow Me
    》instagram: @itsmaddybeard
    》email list: maddybeard.ck.page
    》behance: behance.net/maddybeard
    ☆ For Business Inquiries: email maddy@maddybeard.com

КОМЕНТАРІ • 42

  • @Madi_Miso
    @Madi_Miso Рік тому +14

    Love it! Watching an experienced designer work and talk through their thoughts is super helpful. In particular I appreciate the small comments on sizes of margins and touchable spaces- I often feel like I’m just guessing what those sizes should be around!

  • @djashawe88923
    @djashawe88923 Рік тому +2

    Hi Maddy, I just subscribed to your channel and liked your video. It was incredibly helpful to watch you design in action while getting insight into why you made the changes the way you did. I would certainly like to see more of those concrete examples. For many beginners, deciding on the size of UI elements can be tricky, so it'd be cool if you can explain what's your go to size for the icons, search bar, navigation, tab bar, input field, font sizes etc. Also, it'd be really helpful to watch you design not from scratch but rather using one of the well known design systems like Material Design or the Apple Human Interface Guidelines (HIG), so we can learn how to utilize them for two different devices, iPhone and Android devices. Keep up the good work!

  • @juls2334
    @juls2334 Рік тому +7

    Great video! Thanks Maddie! Yes, a Figma worksheet would be awesome! 🎉🎉💗💗

  • @lanaeartz
    @lanaeartz Рік тому +1

    This is amazing. I definitely think UI and UX practice videos would be very helpful. Great video

  • @vanessaleitao5186
    @vanessaleitao5186 Рік тому

    Omg yes! Do more, I loved it and will try to do this weekly

  • @AtheerAl-majrashi
    @AtheerAl-majrashi Місяць тому

    I am new to UI and this exercise is helpful! thank you so much Maddy

  • @stephl4277
    @stephl4277 11 місяців тому

    Thank you for this amazing video!! I'm starting to practice my UI design skills more and I feel like my brain goes back and forth from UI to UX mode and it's difficult to isolate the two ways of thinking. I like your idea of re-designing something because it helps your brain just focus on the UI elements!

  • @mukulmehra6142
    @mukulmehra6142 Рік тому +1

    It is Illuminating and edifying and needed a worksheet and principles of Universal Ui design.

  • @SpabRog
    @SpabRog Рік тому

    Learned a lot, this great insight. Wish you all the best 😎😎

  • @anabaldinger6477
    @anabaldinger6477 Рік тому

    Love the idea of a Figma worksheet!

  • @viviannereynoso3591
    @viviannereynoso3591 4 місяці тому

    This was super helpful and wonderful to watch, I’d love to have some worksheets for practice

  • @user-nt4ec3kn5b
    @user-nt4ec3kn5b 8 місяців тому

    Thank you very much. This is a super useful video, love it!

  • @rodrigoaquije2534
    @rodrigoaquije2534 Рік тому +2

    thanks for the great video. maybe an excercise using components and atomic design next time?

  • @manonroy7548
    @manonroy7548 Рік тому

    I'm a graphic designer of 25 years and am now making the jump into UI. I would love a practice sheet. I took my certification last year and need some practice.

  • @richatj7138
    @richatj7138 11 місяців тому

    I really liked the entire video !

  • @petratataj5024
    @petratataj5024 Рік тому

    Please make more of these

  • @madhawapriyashantha3722
    @madhawapriyashantha3722 18 днів тому

    very useful.thanks. plz do more..

  • @TheDesignCorner
    @TheDesignCorner Рік тому +4

    This is so fun & amazing to practice our UI skills. I'm surely gonna try this, Thanks so much Maddy for such awesome videos!!

    • @MaddyBeard
      @MaddyBeard  Рік тому +1

      Yay I’m so glad you like this!! 😉

    • @TheDesignCorner
      @TheDesignCorner Рік тому

      @@MaddyBeard How do I find such screen to practice on? 😬

    • @MaddyBeard
      @MaddyBeard  Рік тому +1

      @@TheDesignCorner You can practice on this one if you follow the link in the description box! But if you're looking for something different, you could either browse Dribbble or Behance with a critical eye and look for something you want to improve. OR, pay attention to the apps that you use on a daily basis that you find frustrating or just ugly! haha that is a great place to start too. I'm working on my next video where I'll be doing a similar process with the Poshmark app so stay tuned for that :)

    • @TheDesignCorner
      @TheDesignCorner Рік тому

      @@MaddyBeard that's a good idea! & yes always looking forward to your videos😋 they're such a bomb!

  • @danieltsega8493
    @danieltsega8493 Рік тому

    Thanks!

  • @arafat.uiandux
    @arafat.uiandux 10 місяців тому

    Awesome! It was very helpful. Loved it. Thanks for sharing. Please make more like this. And please make the figma work sheet you were talking about. Thanks again ❤❤❤

    • @MaddyBeard
      @MaddyBeard  10 місяців тому +1

      Hey I actually did make that workbook! :) check it out here if you want maddybeard.ck.page/products/figma-workbook-10-design-challenges

  • @masayorimoto6499
    @masayorimoto6499 Рік тому +1

    I really enjoyed this video and I would love to see more like it.

  • @prekshajain483
    @prekshajain483 Рік тому

    Please make more videos like this

  • @apoorvamhalsekar409
    @apoorvamhalsekar409 Рік тому

    Hey Maddy, I love it when you delve into videos like this and a super big yes to more of these videos and worksheet. We can perform the exercise simultaneously.
    I was wondering though how did you make a screenshot of a random screen into an already designed and movable elements version ?
    ( My bad for framing the question badly but how did you convert an image into an interactive type?)

    • @MaddyBeard
      @MaddyBeard  Рік тому

      Yay I'm so glad you liked this!! I literally recreated it in Figma “by hand” so it took a while! I wish there was an easy way to do it but im not aware of one :/

    • @apoorvamhalsekar409
      @apoorvamhalsekar409 Рік тому

      @@MaddyBeard way to go 😍
      I'm definitely trying it out. Also, i'll be starting 50 days UI design challenge tommorw to build up my skills. Wish me luck✨☺

    • @MaddyBeard
      @MaddyBeard  Рік тому

      @@apoorvamhalsekar409 Oh so fun!!! Good luck!!!

  • @Abcd12562
    @Abcd12562 Рік тому +1

    Thanks for the great video, would really appreciate if you could make a similar video on improving UX skills too please :)

  • @Zahra-Opaia-0
    @Zahra-Opaia-0 Рік тому

    awesom

  • @petermichael3490
    @petermichael3490 Рік тому +1

    💯💯💯!!

  • @ShredzZ
    @ShredzZ Рік тому

    Hi, what do you think about using Sketch if I want to be freelancer? Is this tool good or everybody now using Figma?

    • @alinamagical
      @alinamagical Рік тому +1

      Figma

    • @MaddyBeard
      @MaddyBeard  Рік тому +1

      I haven’t used sketch in years! I prefer Figma and I believe that’s what most people are used to these days :)

  • @tristenlawrence1450
    @tristenlawrence1450 9 місяців тому

    Question (maybe a dumb one): but to start did you just recreate from a screenshot? Or did you just visually recreate in Figma from what you saw? In that case where did you get the icons with the stroke or did you make those?

    • @MaddyBeard
      @MaddyBeard  9 місяців тому +1

      I recreated it manually! Yeah one of my favorite free icon sources is iconoir.com :)

  • @uxdan
    @uxdan Рік тому

    You look like Enid from Wednesday.👧

  • @ikerbfp
    @ikerbfp Рік тому

    Hi Maddy! I love all your videos!! 🤩. I'm from Spain but if i can go Unit Esteits i will go for you.