Amateur vs Pro: Advanced UI Design Examples (Before & After)

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

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

  • @KerevDesign
    @KerevDesign  2 ปีที่แล้ว +24

    I plan to make more of this kind of videos and start a new series, potentially where I would do a reviews and redesigns of your works, but... I need to know if you like it, so hit that thumbs up button. I will give it back after 10k subs :D

    • @ivanvolti
      @ivanvolti 2 ปีที่แล้ว +2

      Good stuff man. Keep it up.

    • @KerevDesign
      @KerevDesign  2 ปีที่แล้ว +3

      Thank you Ivan, I'm glad you liked it!

    • @brunalizandoemlondres1724
      @brunalizandoemlondres1724 2 ปีที่แล้ว +2

      Great idea !!

    • @rudradhoundiyal8783
      @rudradhoundiyal8783 ปีที่แล้ว +2

      Are Grid Systems used in APP Design too? And if yes how do we use them .

    • @KerevDesign
      @KerevDesign  ปีที่แล้ว +2

      Short answer - yes. I think I covered that in the videos related to responsive design: th-cam.com/video/Mco_Qfs1BgU/w-d-xo.html, let me know if you were able to find answers there.

  • @solveware_jlale
    @solveware_jlale ปีที่แล้ว +12

    First video i've seen of yours, i really like this before and after style. Short and sweet

    • @KerevDesign
      @KerevDesign  ปีที่แล้ว +1

      Glad you liked it! :)

  • @jennifershen4273
    @jennifershen4273 ปีที่แล้ว +6

    This is awesome! It's educational for beginners like me to see the thinking behind each design. Love it!

    • @KerevDesign
      @KerevDesign  ปีที่แล้ว

      I'm glad you liked it & found it useful - check other videos from this series ;)

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

    On the first example (0:56) I think there are couple things that could be improved.
    First there is still odd space between "Create account" and top of the screen, it makes me feel that something hasn't loaded. Maybe there should be a logo or something.
    Then it looks like that "Create account" is on a separate card that can be pulled up from behind this sign up screen. So from the first look I'm wondering if I'm creating account or is this login for existing accounts. Of course the buttons itself gives the answer but this isn't consistent.
    Sign up with Google/Facebook buttons look better after modification but contrast in those buttons are so much bigger than on "Sign up" button that those steals my focus.

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

      As I said, this is my approach, your ideas are absolutely valid! There are at least couple of ways of doing it :)

  • @amandayu3639
    @amandayu3639 ปีที่แล้ว +4

    Thank you Kerev! Its very clear explanation for the improvement. 😊

    • @KerevDesign
      @KerevDesign  ปีที่แล้ว +2

      Thank you for finding it useful! :)

  • @harshadwaghmore1726
    @harshadwaghmore1726 ปีที่แล้ว +3

    This is Gold for me Kerev, excellent analysis 🤩

    • @KerevDesign
      @KerevDesign  ปีที่แล้ว +2

      Thank you, I'm glad it was useful for you! :)

    • @harshadwaghmore1726
      @harshadwaghmore1726 ปีที่แล้ว +3

      Make more videos like this. It will be very helpful for us. Thankyou 🙂

  • @uifry
    @uifry ปีที่แล้ว +1

    Hats off to the creative mind behind this design - it's a true reflection of innovation and style."

    • @KerevDesign
      @KerevDesign  ปีที่แล้ว

      Not sure if it was a citation or a praise for the video, either way thank you! :)

  • @kosstya_7980
    @kosstya_7980 ปีที่แล้ว +5

    3:35 Honestly, it’s kind of complicated to define the primary action (the action we want to be made by the user). The white one grabs much more attention just because of it’s brightness. Therefore, it would be better to swap the colours of those buttons. Always take care about what attention hierarchy.

    • @kosstya_7980
      @kosstya_7980 ปีที่แล้ว +3

      Looks like both of them are primary

    • @KerevDesign
      @KerevDesign  ปีที่แล้ว +1

      Well, we are in the context of creating of account though email - which means, corresponding CTA button should be primary. Registration through social media are secondary actions in this context. You can see it very often the other way around (where sign up through email is a secondary option) - But I'm glad my video got you curious to think about it :)

  • @ramimurad3486
    @ramimurad3486 ปีที่แล้ว +4

    That was a great video man, really well made 👏

    • @KerevDesign
      @KerevDesign  ปีที่แล้ว +1

      Thank you! Check out other videos from the series ;)

  • @jermainearinze318
    @jermainearinze318 ปีที่แล้ว +2

    Wow, I love this. I'm going to apply them while working. Thanks

    • @KerevDesign
      @KerevDesign  ปีที่แล้ว +1

      Thank you, check the other videos from this series if you liked this one ;)

  • @annsh.6487
    @annsh.6487 ปีที่แล้ว +4

    Thank you very much! I think it's important for learning design to not only see outright bad examples, but also good or viable ones, as well as how to improve them further. Wouldn't have thought to make the buttons have short and consise text, for example. Or the stage tracker. Or text buttons instead of logos. Very interesting

    • @KerevDesign
      @KerevDesign  ปีที่แล้ว +2

      Thank you for watching! :) I really recommend one of the latest episodes from the series, where I'm redesigning items available for sale (!) - Meaning they went through and were approved by "experienced" designer...

    • @annsh.6487
      @annsh.6487 ปีที่แล้ว +2

      @@KerevDesign Currently binging your UI/UX Design Course, think I'll watch your entire library:)) I've got three days to design as much of an app as possible, and your vids are the perfect bite-sized guide to figure out what I'm doing

    • @KerevDesign
      @KerevDesign  ปีที่แล้ว +2

      I would really like to finish it ASAP, currently I was able to make 5 parts, another 5 to go. Idea behind was to allow anybody to enter the field and present only what is necessary. Then I will start working on more advanced course, but, it will take a while ;)

  • @rudradhoundiyal8783
    @rudradhoundiyal8783 ปีที่แล้ว +2

    In the Second Example , You put the linear Gradience in FIGMA ? Or PHOTOSHOP

    • @KerevDesign
      @KerevDesign  ปีที่แล้ว +2

      All was done in Figma, yes, the gradient fill is available in the dropdown menu in the fill option of design panel.

  • @ramitrad40
    @ramitrad40 ปีที่แล้ว +1

    thank you! it was an awesome video, may i ask the fonts you're using in the first design.

    • @KerevDesign
      @KerevDesign  ปีที่แล้ว +1

      "Nunito" - you're welcome, and thank you :)

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

    Do you use Premier Pro to edit your videos? I love the animations!

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

      Yes, as well as After Effects :)

  • @AnthooFitz
    @AnthooFitz 2 ปีที่แล้ว +2

    the details make or break a design awesome video

    • @KerevDesign
      @KerevDesign  2 ปีที่แล้ว +1

      Thank you, glad you liked it! I'm working on the new one, I hope to publish it before the end of this week :)

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

    I love the video, but I still do not understand why we do not prefere to add (Facebook) or (Google) icon at the first design, to be in one harmony ?

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

      As I explained, there are many ways that you can do in order to improve the designs. I simply selected this one :)

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

      @@KerevDesign oh cool, i loved your videos👏🏻👏🏻👏🏻👏🏻

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

    If you're trying to spot the differences, are the differences significant enough to make a video?

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

      Well yes, because I also ask you to think about why I introduce those changes as well as explaining it later. Essentially it's a thing where I'm trying to engage the viewers more :)

  • @creatoratplay
    @creatoratplay ปีที่แล้ว +2

    This was really helpful. Thanks!!

    • @KerevDesign
      @KerevDesign  ปีที่แล้ว

      Thank you! Check out other parts from the series ;)

  • @ytubeyoutube-c6v
    @ytubeyoutube-c6v ปีที่แล้ว +1

    Can you suggest me a book, tutorial or website for learning about info noise, contrast etc... Kind of stuff like the fundamental... Actually I'm in love with full stack but i also love about the aesthetics...✌😎

    • @KerevDesign
      @KerevDesign  ปีที่แล้ว

      Nielsen Norman Group, Coursera - Interaction Design Course, Google Course, other creators from this field on TH-cam (especially Malewicz) - there is a ton of it out there. For now I really recommend Malewicz courses and channel - I'm simply not just there yet in terms of content :)

    • @ytubeyoutube-c6v
      @ytubeyoutube-c6v ปีที่แล้ว

      @@KerevDesign thx brother for the reply you are very hard working and kind...😎

  • @wheelsroundwheels
    @wheelsroundwheels 2 ปีที่แล้ว +2

    thankyou so much! this video needs more views..

    • @KerevDesign
      @KerevDesign  2 ปีที่แล้ว +2

      More happy viewers like you will get us there :) Glad you find it useful. This will be a reoccurring series so expect more of this type of videos!

  • @kenonerboy
    @kenonerboy 2 ปีที่แล้ว +6

    Im surprised by how well you understood the "failed" designs. I wouldn't have understood wtf "01.03" was about (date?? Wtf)

    • @KerevDesign
      @KerevDesign  2 ปีที่แล้ว +3

      Well, if you want to improve something you need to understand how it works & what was the intent in case of simple projects like this. Typically there is a lot more of details like this in the bigger projects.

  • @Rita-md5qo
    @Rita-md5qo 2 ปีที่แล้ว +2

    Hi! If i want to ask for feedback to my design, how should i reach out to you?

    • @KerevDesign
      @KerevDesign  2 ปีที่แล้ว +1

      You will find my email address in the about section of my channel.

  • @VlogDeIT
    @VlogDeIT ปีที่แล้ว +3

    Nice episode ✌️

    • @KerevDesign
      @KerevDesign  ปีที่แล้ว

      Thank you! Check the other ones :)

  • @BijoyExclusive
    @BijoyExclusive 2 ปีที่แล้ว +2

    Awesome! 🤩
    Thanks

    • @KerevDesign
      @KerevDesign  2 ปีที่แล้ว +1

      I'm glad you like it!

  • @baboetoe
    @baboetoe ปีที่แล้ว +2

    All were good except the first one in my opinion.. the secondary buttons looked a bit too much like the input forms..and the use of fb and google colors made it clear on landing what that section would do..I also find that the cta got more attention in the first one because of the white space.. also the header popped more because of the placement of it above the block..

    • @KerevDesign
      @KerevDesign  ปีที่แล้ว +2

      Well, that's something I came out with during the redesigns - I'm glad that everyone has their own approach; typically in the daily work those opinions would be a part of discussion ;)

  • @smritiagarwal1515
    @smritiagarwal1515 ปีที่แล้ว +2

    Please make more videos like this

    • @KerevDesign
      @KerevDesign  ปีที่แล้ว +1

      Thats the plan, you can check out other videos from the series, right now there is 6 more on my channel :)

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

    The first one is pretty brave without password confirmation

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

      You are right! I totally didn't think about it :)

  • @chiaza7735
    @chiaza7735 2 ปีที่แล้ว +4

    Nice, but for the first design, I'd also color the Google and Facebook icons.

    • @KerevDesign
      @KerevDesign  2 ปีที่แล้ว +5

      In this case I did that to reduce visual noise. I really doubt it would make or brake that design tho. In real world considerations individual preferences are typically subject of validation with real users and A/B testing to discover what version performs better.

    • @chiaza7735
      @chiaza7735 2 ปีที่แล้ว +3

      @@KerevDesign Haha yes. User testing is all 💯

    • @StayUnited12
      @StayUnited12 2 ปีที่แล้ว +3

      Kerev is right in removing that noise. He is also right about the user testing. But the way he has redone the design is absolutely correct and looks much freshers. Adding different colours negates his intention of removing the noise

    • @KerevDesign
      @KerevDesign  2 ปีที่แล้ว +1

      @@StayUnited12 Thanks! :)

  • @marcuswilliam2852
    @marcuswilliam2852 ปีที่แล้ว +2

    Really nice. 1+ sub

    • @KerevDesign
      @KerevDesign  ปีที่แล้ว

      Thank you very much, check out other videos from the series :)

  • @adevikthur
    @adevikthur 2 ปีที่แล้ว +2

    Awesome! 🤩

  • @dogsfriends4029
    @dogsfriends4029 ปีที่แล้ว +1

    interesting videeo thank you

    • @KerevDesign
      @KerevDesign  ปีที่แล้ว

      Thank you, I'm glad you liked it :)

  • @lone__wolvess
    @lone__wolvess 2 ปีที่แล้ว +2

    i like it really

    • @KerevDesign
      @KerevDesign  2 ปีที่แล้ว +1

      I'm glad you liked it! :)

  • @adarshkaran6611
    @adarshkaran6611 2 ปีที่แล้ว +2

    Amazinggg

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

    Nothing about this is advanced. This is basics 101.

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

      Well, some of the examples (eg 1 and 4) were prepared by "experienced" designers and they still contained a lot of, as you described "basic" errors :)

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

      In your view, what do you see as advanced?