Skyrocket Your UI Design Skills in Just 6 Minutes! (Before & After 9)

In today’s video I will transform this relatively good UI and I will make it great - explaining how and why along the way in just 6 minutes!
Watching experienced designers reworking designs and providing feedback behind their decisions is one of the best ways of developing your own skills faster.
I’m designing in Figma: psxid.figma.com/52h3iuj6s0bk
Watch other videos from the Before & After series here: • Before & After Design ...
My UX/UI design crash course series: • UI & UX Design Crash C...
Chapters:
00:00 Redesign overview
00:23 Design critique
02:25 Redesign & commentary
05:42 Final result
Disclamer:
Some of the above are affiliate links-I make a small commission when you purchase through my link, at no extra cost to you. Thank you for supporting an independent creator!
#uidesign #uxdesign #uxtutorial #designtutorial #graphicdesign #mobiledesign #productdesign #ui #ux

[@KerevDesign]

Today's before & after video in a slightly different format, I took some inspiration from Rachel How, hope you like it ;)

[@dmartuk]

Amazing work! Thanks for walking us through your thought process, too! The only thing I would have done differently is swap the header "Categories" for something like "Industries"

[@KerevDesign]

Thanks, I'm glad you liked it. And thank you for the idea, as I said it's heavily depended from person designing, but yeah, that could be done differently ;)

[@pgielzakdesign]

Great job! Can this be a regular topic? Critiques of designs, explaining workflows, defending and augmenting design decisions and portfolio reviews would be a nice addition I think to your content :)

[@KerevDesign]

Well, its episode 9 of before and after series - so short answer is yes :D As of other suggestions I will try to make them happen! Btw Piotr, how you are doing?

[@Remco9500]

I love these type of videos! I would've loved to see a comparison one last time on the ending :)

[@KerevDesign]

That's a great idea, I will include it in the next video from the series! Thank you!

[@itsthesa]

That was actually amazing!

[@KerevDesign]

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

[@mohamedahmed-fl2ms]

Very nice, I like this format educational while being humorous

[@KerevDesign]

Thanks, glad you liked it :)

[@iitzkryy9599]

Very helpful content. Keep up the good work 👏

[@KerevDesign]

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

[@user-wg7ix5zy9g]

Can you make a video describing how you presented the mock-ups in the impressive looking animation please?

[@KerevDesign]

Well, to be perfectly honest I'm using a lot of ready-to-go templates for Adobe After Effects - I could do a video about it, but it would require from me to change the topic of this channel (animation/video production is a totally different field of expertise)

[@sayekatchakraborty4621]

Thank you❤ It's really helpful. But how to documentation the redesign process? Any suggestions please!

[@KerevDesign]

Could you elaborate?

[@sayekatchakraborty4621]

@@KerevDesign Suppose I would like to make a case study for redesign an app. How to document the process or write a case studies!? Any best suggestion?

[@ugochukwuumerie6378]

Awesome improvement. Are you using rotator for the 3d display or which tool are you using?

[@KerevDesign]

After Effects, frame by frame ;)

[@danielodera8878]

Can you train me to be the best master… I want to be better at Ui design and I’ve been watching ur videos. I have difficulties choosing images and design decisions. Pls train me

[@KerevDesign]

I'm not offering 1:1 sessions yet, I would recommend to watch some of my Figma tutorials, and for you to try replicate them, then I recommend for you to take some free courses - I started a series (UX/UI course) couple of months back, you can start there: kzbin.info/www/bejne/g4fdoqmlit-mbpo ;)

[@danielodera8878]

@@KerevDesign okay, thanks a lot This will better my Ui skills Thanks Kerev

[@solveware_jlale]

Nicely done as usual. I think i overuse auto layout too much, from what i could see, you were doing more manual refinements to your positions/alignment, is overusing auto layout a thing?

[@KerevDesign]

No, I don't think so, in this case I used original files as a base - that means I assumed the structure from the creator of original. Typically auto layout + components is a way to go, but for small projects like this, or concept works - I'm skipping it.

[@solveware_jlale]

@@KerevDesign Ah i see, thanks allot i appreciate it

[@KerevDesign]

The on thing that comes to mind is that build projects with AL+components, but then, the final layout structure is better without auto layout. Because you can easily shift things around, and AL would restrict that heavily - I showed it in the video about AL, altho I would need to make one again because Figma is changing so quickly :).

[@mahmoudzaki4477]

can you please tell me how did you make a video to represent the mockups?

[@KerevDesign]

Can you elaborate on the question? If you are asking about technical aspect of it it's a screen recording put on a masked layer. If you are asking about the animation at the end it's Adobe After Effects :)

[@mahmoudzaki4477]

thank you so much. I already meant the animations at the end. Can you share a tutorial with us to show our work as impressive as yours?🥰@@KerevDesign

[@AimBigger]

How you did that showcasing video effect @5:45 , kerev???😮

[@KerevDesign]

Adobe Aftereffects :)

[@indiamarispereira6944]

Are you polish? Anyway, wonderful content, I can't believe its for free!!!

[@indiamarispereira6944]

And I laughed a lot from 90% of java ahahahahah

[@KerevDesign]

Yes, I'm from Poland, I'm really glad that you liked my content, I'm slowing moving back to publishing, I just need 2-3 weeks :)

[@indiamarispereira6944]

@@KerevDesign I really did, I really enjoyed the fact that you speak like a mature adult talking with another adult, most of senior are so busy working that the content on KZbin end up being offered by unoccupied people.

[@egzonbllaca797]

Why aren’t you using autolayout?

[@KerevDesign]

I consider auto layout as more advanced function of Figma - especially after recent updates, and I wish for some of my videos to be as beginner friendly as possible. For this series I want viewers to focus on the experience and visual changes - not on the technics themselfs.

[@atomicrus]

Great improvement on logic and elements, but become faceless and sterile, lost the color vibe completely. Tired of apps that looks the same as white sheets 😢

[@KerevDesign]

Thank you for the opinion! As I said, I could done things differently, and everyone has their own sense of style - I will do my best to use more vibrance next time if it will make sense ;)

[@regwsx]

no autolayout... hmm

[@KerevDesign]

Yes - on purpose, so even total beginners can follow it ;)

[@welling1]

Chances are this type of content (especially given the job profession) would be viewed and interacted with on desktop, not a mobile device. This is just pretty, not at all realistic.

[@KerevDesign]

I really liked your comment! As you saw we are working with just 3 screens - with presentation pieces like this designers attempt to showcase their UI Design skills, not necessarily UX. That's what I tried to do here, make it more realistic - as you said, most likely in real world we would have entire SaaS behind this with desktop version behind it as well. Maybe in the future episodes I will try to figure out and present wider context.

[@ugochukwuumerie6378]

This is basically just for Mobile preview, on the user side of things, on the desktop app or web app, the design and UX would definitely be different for the admin purposes, etc which would be more detailed