10 UI Design Mistakes to Avoid

In this video, I'm going to show you the 10 common UI design mistakes every designer should avoid to deliver a good user interface with a great user experience.
👉 Become a UI Designer with my UI Design & Figma Mastery course:
bit.ly/43v79vX
👉 Get my FREE UI/UX Design e-book here:
bit.ly/45KHoKJ
📸 Instagram: / uiux.arash
Who is Arash Ahadzadeh? Well, I'm a UI/UX designer and a university instructor with 7+ years of experience, and I teach people how to design great user interfaces and experiences. I've helped over 30,000 students become UI/UX designers from scratch worldwide.

[@azismail8192]

The last icon is filled with blue compared to the first two icons. I also believe that the text in the centre should be a darker contrast as it is difficult to read.

[@DesignWithArash]

You are totally right.

[@r3dp1ll]

- "Our Services" could be closer to the cards - the last icon is not consistent with the others - rounding the cards a little to give them a more friendly look - description text in the cards should be black or veery dark gray - page background white - drop shadow / blur around the cards. With the blue used elsewhere - Learn more should be right aligned. More logical to me.

[@rigidhammer7376]

you have 7 points. and all are for beginners

[@shreyasj8224]

Great video! Need more of these common mistakes and how to fix em'.

[@DesignWithArash]

Thank you so much. More to come.

[@GhazalehRabiee]

thank you, Arash for this useful content. about the question, i think: 1- the icons in the cards should be similar and consistent. actually, i don't know the technical term unfortunately but the third one looks odd. 2- I think the text color is difficult to read a little. 3- if the Learn more is a call to action, i think it should be more distinguished. a button for example. i think these three are key points to improve. Some things may change according to taste. For example, the background color bothers my eyes a little. the contrast actually. Not the color of the cards, I mean the background. Or, for example, I would have preferred the main title to be in the center. Finally, thank you for these wonderful contents.

[@pratibhakumari8556]

your teaching skills are amazing!!! Thanks for being there to help:)

[@DesignWithArash]

That’s very kind of you. Thanks.

[@udU6274]

Your videos are so helpful! Thank you Arash!

[@DesignWithArash]

Glad you like them!

[@hamzakhalid2330]

Impressive mate, you are doing a great job. Keep it up!

[@DesignWithArash]

Thank you so much.

[@michaelojekunle3396]

succinct and comprehensive 🔥🔥 - I think it's the lack of sufficient contrast - the use of whitespace

[@kenderperez5126]

amazing teacher, easy to understand even for me as a beginner english student, you are really good man thank you so mouch for these videos.

[@DesignWithArash]

Thank you very much. That's so nice of you.

[@henrythomas7112]

I like your video presentation. It is informative too, at the same time. Thanks a lot for your guidance!

[@emmawo2850]

Icons: 1. Problem: these icons seems clickable. solution: using netural color instead of using blue to the icons and their background. 2. Problem: the last icon style is not matching the others. solution: making the last icon to outline style. Text: 1. Problem: the body text colour has low contrast. Solution: increase the contrast by applying a darker colour or just simply using the same colour as the title. Button: 1. Problem: 'Learn more' buttons is not friendly to the colour blindness to identify if it is clickable or just the read only text. Solution: use outline button instead of text only button.

[@tanny_edits]

- Our Services must have lesser margin to the cards - appdev icon is not consistent compare to the other two icons - I'm a fan of round edges card so i think it would help for better ui - body text must be darker (contrast) - learn more here is a CTA, it should be converted into a button, this will help it to gain more attention for possible conversions

[@user-hu1lk9ej4z]

Great teaching skills. I found your channel yesterday and now Im stuck here. Thanks for sharing

[@DesignWithArash]

No problem. Glad it helped. Welcome aboard.

[@zahraaizadi7800]

You are doing a great job. Thank you🔥

[@DesignWithArash]

So nice of you. Thank you.

[@odyrifandi7576]

1. Our service needs to be close to the card 2. The last icon is different from other icons 3. Rounding the card a lil bit to make it look friendly 4. Learn more supposed to be CTA 5. Descriptions needs to be a lil bit darker hence it will be more readable

[@KarinaPrado1111]

More contrast in subhead and needs consistency in icon style.

[@DesignWithArash]

You are totally right.

[@sommymuna3357]

You’re a great teacher🥰👏

[@DesignWithArash]

Thank you so much. That's very kind of you.

[@gladjf]

I think the third icon doesnt need that outlines just "" looks good to me, and text on middle must be darker but not dark as the title.

[@DesignWithArash]

You are 100% right.

[@rajunagapuri]

1) Insufficient Contrast: Not bright enough read and attractive 2) Inconsistency in Design: Third icon is filled one and the first two are line icons 3) Poor Color Scheme Selection: Unable to read the text.

[@hoangphuctran1821]

This is my opinion 1/ The third icon is bolder than another All icons lack a label 2/ "Learn more" button does not stand out => fill with dark blue background blue, white text 3/ Should border-radius 3 panels 4/ The contrast of the text below the heading is too low. => should change the text color to dark grey 5/ The size heading should larger a bit 6/ The space among icons, heading, and content is good, but from content to the "Learn more" button is longer, I think it should consistency 7/ The "Our Services" title should place center Please help me review it and give me feedback Thank you so much

[@DesignWithArash]

Hi. 1- Icons don't need a label in this case, but you are right that they are not consistent. 2- This is a matter of preference. Since the card itself is clickable, we can use a text button there. 3- Again, a matter of preference. It depends on the styling of other elements. 4- Correct. 5- It can be, but it's readable. 6- That's not correct because we should place elements based on the law of proximity, so the margin between the button and the description should be greater. 7- It can be, but there is nothing wrong with the left-aligned headings.

[@hoangphuctran1821]

@@DesignWithArash ❤ Thank you so much

[@user-zc7qb2il3v]

Its padding i would say its not equal and the center paragraph should be a little bolder or should use dark color to make it easier for users to read

[@Leochuks456]

Bro i love your tutorial on ui ux the only probem is the sitmap can you please make a video of it

[@saedehmohebbi1774]

tnx for your explanation💎

[@DesignWithArash]

You are welcome!

[@gbengaomotosho1877]

Contrast with the typography sizes

[@swagprincess5547]

Great teaching and i like it so much!!🤝💥keep teaching and i learn many lot things in this video thnk u so much🥹🫴🏻

[@gregornator]

dude you're amazing

[@justobru8046]

1. The sub fonts can be more visible 2. learn more option can be in a button

[@vipinuniyal8024]

1. We can change the last icon of "application development" to stroke only like other icons. 2. We can change the background color from off-white to dark brown or grey. 3. Gapping between Our service and three tabs. 4. We also have to change the text color from off-white to match with the background color for better readability. Please reply if I am going right.

[@DesignWithArash]

Number 1 & 4 are correct but number 2 & 3 are a preference.

[@Tonyiykedesigns]

Please brother Can you do a video on road map or userflow.... How to be fast when designing, Color pallette

[@DesignWithArash]

Hi Tony, Sure.

[@AILecturesHub]

1- CTA isn't clear. must have some background color 2- Headings within the boxes should be larger and bolder 3- Icons colors mismatched 4- description within the boxes is light

[@obaidurrehman6105]

very helpfull

[@DesignWithArash]

Glad it helped. Thank you.

[@OscarCarlos11]

Hi, can you give any clue about the resposive design at 7:20? I mean, how to make content stretch up-inside when resizng the parent frame width?

[@SisiBisi-zh1cj]

Thank you

[@DesignWithArash]

No problem.

[@HamedSaleki]

Amazing

[@DesignWithArash]

Thank you.

[@sohiniroy8069]

I think the icon styles need to be consistent. Also the sub text colour should be a little more darker

[@DesignWithArash]

That's right.

[@lakshmanprabhu6722]

Keep going! You'll soon get thousands of likes per video!!!

[@DesignWithArash]

Thank you so much for the encouragement and support. I appreciate it.

[@SuryaKarigar]

Inconsistent icons. Last icon should be outlined. And the body text should have a bit of contrast

[@aradhnacrafts9183]

icons arent of same style the is 1 filed and 1st 2 are void and the text color contrast isn't perfect ,,,it should be a darker shade of gray

[@DesignWithArash]

You are absolutely right.

[@AmnaHabib-wh6wd]

Heading text should be larger Icons color mismatch Central text should be black Buttons color should be blue with white text

[@onikekuoreoluwaoluwafunmil9071]

The text color in the center is too light..should be darker to improve readability.. and the last frame , the icon is filled

[@mosfiqurrahmansifat]

very helpful video

[@DesignWithArash]

Glad it was helpful!

[@hussainirebecca3001]

The space between the fourth element and the last element seems too much and I can barely see the fourth element

[@muhammedbashirat2786]

The text with gray is not visible enough. Black color can be maintained.

[@daniyalhafeez123]

light color of text is this the mistake or not please reply tome

[@estherariyo214]

Hey Arash ,i need a beginner wireframe tutorial from you please

[@DesignWithArash]

Hey. I'll add it to my list.

[@poonamjajoo8149]

icon style is not consistent/same and color contrast for text with background .

[@DesignWithArash]

You are 100% right Poonam.👌🏻👌🏻

[@sarahabraham940]

• Low color contrast • Lack of consistency

[@D.J.R_Fit]

All three icons does not match with what the text is saying. All of the summaries under the heading are too light they need to be spruced up some more. I also feel like the learn more in the second box is too small but it could just be my eye playing tricks on me

[@DesignWithArash]

Correct.

[@Kobbytech480]

The text body is not visible and not readable

[@iulianapopovici3511]

HI, I was wondering, are there platforms where to find beta testers for your UI design?

[@DesignWithArash]

Hi, yes there are. You can check out Conjointly.

[@fact-tiger]

First 02 icons are not filled and the last one is filled that does not look nice

[@DesignWithArash]

Exactly.

[@hikmatoteniya]

contrast and typography.

[@ramatismail2517]

lack of consistency

[@RolandOgbue]

The contrast is poor and the icons are'nt consistent

[@wiwita4593]

Me : i'm in love with my firt design 😍😍😍 Arash: please don't fall in love with your design 😑 Me: oups 😋😋 I already did😂

[@DesignWithArash]

Hahaha. What is done is done. 😊