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

Onboarding and Sign-up screens are one of the most popular examples of UI Design that most UI and UX designers use to showcase their skills. That is especially true for novice designers, because it is relatively fast and doesn't require a lot of work.

But, it's really hard to stand out with those designs because onboarding and sign-up screens are the most overused way to showcase UI and UX design skills. Especially at services like Dribbble where you can see them everywhere.

Today I've selected for you 4 examples of mobile app design screens from that category, prepared by novice and more experienced UI and UX designers with the intention of improving them.

Chapters:
00:00 Amateur vs Pro UI Design Examples
00:40 1st Example
02:43 2nd Example
03:25 3rd Example
04:03 Final example
05:00 Outro

#uidesign #uxdesign #uxtutorial #designtutorial #graphicdesign #mobiledesign #productdesign #ui #ux

[KerevDesign]

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

[solveware_jlale]

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

[uifry]

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

[jennifershen]

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

[amandayu]

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

[harshadwaghmore]

This is Gold for me Kerev, excellent analysis 🤩

[annsh.]

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

[jermainearinze]

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

[ramimurad]

That was a great video man, really well made 👏

[AnthooFitz]

the details make or break a design awesome video

[owilhm]

thankyou so much! this video needs more views..

[kosstya_]

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.

[orn]

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.

[kenonerboy]

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

[diffuusio]

The first one is pretty brave without password confirmation

[chiaza]

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

[GoulDesign]

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

[rudradhoundiyal]

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

[baboetoe]

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

[MyHarmony_]

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 ?