UI Card Design | Reworking 5 Common UI Card Mistakes

The Card Component is one of the most common UI elements you'll see in modern interfaces, but there are 5 common mistakes in the UI design element that I see all the time. In this series, I "ReWork" designs (web design, UI design, etc...) and redesign them while giving critique and art direction. Remember to Subscribe goo.gl/6vCw64
Join this channel to get access to perks:
/ @jesseshowalter
------------------------------------------------------------------------------------
////////// Connect with me here 👍🏼
Instagram: / imjesseshow
Twitter: / imjesseshow
////////// Sign up for my Monthly Newsletter 📫
www.jesseshowalter.com/newsletter
////////// Elevate your videos with record-label quality music from Musicbed👇🏼
share.mscbd.fm/imjesseshow
////////// Equipment 📸
www.amazon.com/shop/jesseshow...

[@JesseShowalter]

Which of these UI Card mistakes have you made in the past?

[@gametimewitharyan6665]

Mine Was The Whitespace But I Got It right after sometime ;)

[@mattzahn8888]

Whitespace, using color for no reason, poor font scaling, jarring drop shadows...pretty much all the mistakes

[@Lunaedea7]

Really loved this video, Jesse- thank you! Was wondering if it wouldn’t look even better for the headline and body copy to be even more centered vertically? I personally kind of felt that it was too close to the date, but I suppose that’s my taste. This is so so helpful- these small details really make a huge impact! This will go a long way in developing my eye :)

[@alenachuyankova]

Wow!!! I love your vision!

[@oluseyiemmanuel8638]

Awesome! Thank you for the video!

[@JesseShowalter]

Thanks so much for watching!!

[@Keliiyamashita]

Thanks Jesse! Times change... and so do modern designs.

[@JesseShowalter]

Too true!!

[@j4878]

Awesome explanation!

[@JesseShowalter]

Thanks!

[@तंत्र]

Really nice tutorial .. Loved it

[@JesseShowalter]

Thanks, Sanjay!!

[@WB-zr7pq]

When dealing with a complex system that should have uniform logic, i cant express enough, use folders/groups for each thing add in proper padding via the folder and then put it in a stack. Atomic approach to each of your elements in that stack. Also Label everything to reflect the style your doing with the folder.

[@antoniosalzano5253]

Hey jesse a question about sass. Now instead of @import we have to use: @use. Tutorial ???

[@abuferashamdani4827]

So good 👍🏼

[@JesseShowalter]

Thanks!!

[@pranoymehra2150]

There's no else in this whole goddamn world who can say "WHAT'S UP EVERYBODY MY NAME'S JESSE SHOWALTER!" better than you! I was like wtf why didn't he say it this time 😂

[@JesseShowalter]

Oh man, thank you so much! I feel like it’s easily a hit or miss 🤣🤣

[@vsmedia8892]

I think we can decrease the kerning a bit of heading n body. What you sayl?

[@joelluthi2479]

Yeah the line-height definitely could be decreased👍

[@welling1]

I skipped right to the end and the horrible line height is killing the entire design.

[@MelindaMatturro]

omg I've only been doing UI design for a few years and thought I was going crazy or still too new lol - that line height is too much for my taste. Hierarchy looks a lot better at least

[@nikolaikiselev8609]

Thanks a lot

[@bellini2535]

Fantastic

[@mdyousufgazi4030]

thank you so much for the video

[@JesseShowalter]

So glad you enjoyed it!!

[@bjmgraphics617]

Maybe instead of a drop Shadow a thin stroke could’ve been applied and the stroke can be slightly darker than the fill.

[@mohsenk2760]

I think the line-height is more than standard!

[@JesseShowalter]

Yes!!

[@WePiphany]

Was waiting for that to get fixed myself.

[@mauricioalvarado5764]

You have a cut palm tree. Missed the photography principles on the image elements.

[@kadengrumbles4684]

😊🙏 thanks

[@JesseShowalter]

Thank you, Kaden! 🙏

[@skcayon]

Thanks

[@JesseShowalter]

Thank YOU!!!

[@learnwithnorwebs]

What else I could improve on is the headline and body text "line-height".
Make it a little bit tighter.
In all, this is an amazing video.

[@jordao420]

thats why everything is looking exactly the same

[@JesseShowalter]

I think keeping the standard while also keeping your own style is super important.

[@karlr2908]

O.M.G... how do you design that and not know what's wrong? Rather be a developer or something else really