Fixing your BROKEN Cards! Do's and DON'Ts of Card Design

bit.ly/3Mlkhgb 👈 Learn UI/UX Today. Use "UI2022" for 15% Off!
-- Today, I will be revamping 3 layouts that include card designs. These were user submitted in the Discord server. I thought it'd be a great idea to tackle 3 cards and redesign them so that you can avoid common card-design pitfalls!
0:00 - Introduction
0:32 - First Project
6:55 - Second Project
17:51 - Final Project
23:25 - Final Thoughts
Let's get started!
#ui #ux #cards
- - - - - - - - - - - - - - - - - - - - - -
Subscribe for NEW VIDEOS!
Learn UI/UX: designcourse.com
My personal FB account: logodesigner
Coursetro FB: coursetro
Coursetro's Twitter: / designcoursecom
Join my Discord! / discord
^-Chat with me and others
- - - - - - - - - - - - - - - - - - - - - -
Who is Gary Simon? Well, I'm a full stack developer with 2+ decades experience and I teach people how to design and code. I've created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network.
Now, I focus all of my time and energy on this channel and my website Designcourse.com.
Come to my discord server or add me on social media and say Hi!

[@DesignCourse]

Hey all. Big things are coming to the channel soon. I will start to focus on the UX of Crypto. Just keep a heads up. ;)

[@emmanuel8944]

Can't wait...when do we expect it.

[@warlockCommitteeMeeting]

@@emmanuel8944 what does "ux of crypto" even mean?

[@emmanuel8944]

@@warlockCommitteeMeeting most crypto projects struggle in the frontend. UX(user experience) of crypto is a way of designing the user interface(UI) so users can understand and easily interact with the crypto project with ease.

[@MalewiczHype]

You gotta play the cards you're dealt! And designers are dealers ;)

[@roter13]

Hey. I was wondering if there is an alternative to card design when you have grouped information to display?

[@blindOni]

I can now see my errors and their’s especially going through the ux/ui class , but seeing you go through your redesign process helps a lot.

[@ashash8531]

Thank you sir for the redesign, final one was mine.

[@sjorsborsoborsobors]

These videos are so satisfying

[@sorianosoul]

About the blue tags, if you select your text tool en type some text and hit shift A you make a auto-layout. Now you can give the text a fill and it works like CSS / HTML padding.

[@rembautimes8808]

After 1 min , you can already appreciate Garry's mastery of this subject. Thanks for the video.

[@pataslocas4595]

thanks you so much!!!.

[@udaytiwari5695]

in the lamps and sofa design , I thought that your high contrast was kind of blocking the image , but then ya increased the size and every thing felt balanced .

[@swoorp]

I like the face when you say "let's get started".

[@yurisamarin8200]

I love Garry's design lessons.. because he knows how to code it afterwards

[@yuli1970]

Yess, the worst designs I've seen were by people who didn't have a clue about what's possible with css, with a lot of inconcistencies and our firm has a dumb "pixel-perfect" policy when making websites so I have to try and implement the inconsistent design which is a nightmare.

[@Loki_Dokie]

@@yuli1970 devs should have a little creative freedom, especially if the design comes from a print designer. I was in the print industry for about 11 years and we were given a lot of freedom even when given a design. A lot of times it was just an idea from the client then show me a couple of versions of whatever you think looks good, which was nice.

[@w1ls0n92]

What is the screenshotting tool you're using?

[@a1551x]

When redesigning a website, what size should I make all my screens across figma? Should I stick with the standard desktop size or much bigger do you recommend expanding the layout?

[@BenMelluish]

Mobile first, mate.

[@gexgex941]

Gary, you probably need some rest , your voice seems tired or you ve recorded it late at night :) Anyhow, great vid as always, thank you!

[@mimosveta]

hopefully this hits my issue, as I have no idea how to solve it >

[@mianburhan222]

BROTHER make a another advance website tutorial i want to learn more new things :)

[@DAMAGR]

You mentioned you avoid mid-grey as much as possible. Just wondering about the thinking behind that.

[@daleryanaldover6545]

It's because of color contrast. If your background is mid gray you really can't have either light or dark typography on it. It will always have less contrast to work on resulting on a very blurry and unreadable text. If your background color is blue, always pick the darker blue so you can put white text on it or pick light blue to put dark text on it. It is pleasant not only to your own eyes but to visitors as well.

[@mianburhan222]

I like your hairstyle😎

[@sigmawolf228]

I like to judge people, but if you don't let yourself cover up those scars, you'll be really grateful and everybody will respect your hairztyle

[@ssabrant5384]

What program is he using?

[@skylerdjy]

Figma, highly recommend 👌

[@ivankudinov4153]

I refuse to believe somebody actually could design those cards on the left

[@timbittins]

Fixing my broken cards while listening to broken lungs by thrice.

[@thesouthband]

Card containers are one of the worst things to "throw over the fence" to engineering. They'll misuse and abuse them like they were born for it.