Тёмный

10 UI Design Mistakes to Avoid 

DesignWithArash
Подписаться 119 тыс.
Просмотров 28 тыс.
50% 1

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.

Опубликовано:

 

28 июн 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 83   
@azismail8192
@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
@DesignWithArash Год назад
You are totally right.
@r3dp1ll
@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
@rigidhammer7376 4 месяца назад
you have 7 points. and all are for beginners
@GhazalehRabiee
@GhazalehRabiee 10 месяцев назад
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.
@shreyasj8224
@shreyasj8224 Год назад
Great video! Need more of these common mistakes and how to fix em'.
@DesignWithArash
@DesignWithArash Год назад
Thank you so much. More to come.
@pratibhakumari8556
@pratibhakumari8556 Год назад
your teaching skills are amazing!!! Thanks for being there to help:)
@DesignWithArash
@DesignWithArash Год назад
That’s very kind of you. Thanks.
@udU6274
@udU6274 Год назад
Your videos are so helpful! Thank you Arash!
@DesignWithArash
@DesignWithArash Год назад
Glad you like them!
@gladjf
@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
@DesignWithArash Год назад
You are 100% right.
@KarinaPrado1111
@KarinaPrado1111 Год назад
More contrast in subhead and needs consistency in icon style.
@DesignWithArash
@DesignWithArash Год назад
You are totally right.
@kenderperez5126
@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
@DesignWithArash Год назад
Thank you very much. That's so nice of you.
@hamzakhalid2330
@hamzakhalid2330 Год назад
Impressive mate, you are doing a great job. Keep it up!
@DesignWithArash
@DesignWithArash Год назад
Thank you so much.
@odyrifandi7576
@odyrifandi7576 5 месяцев назад
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
@henrythomas7112
@henrythomas7112 Месяц назад
I like your video presentation. It is informative too, at the same time. Thanks a lot for your guidance!
@user-hu1lk9ej4z
@user-hu1lk9ej4z 6 месяцев назад
Great teaching skills. I found your channel yesterday and now Im stuck here. Thanks for sharing
@DesignWithArash
@DesignWithArash 6 месяцев назад
No problem. Glad it helped. Welcome aboard.
@tanny_edits
@tanny_edits 10 месяцев назад
- 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
@gbengaomotosho1877
@gbengaomotosho1877 11 месяцев назад
Contrast with the typography sizes
@Leochuks456
@Leochuks456 Месяц назад
Bro i love your tutorial on ui ux the only probem is the sitmap can you please make a video of it
@vipinuniyal8024
@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
@DesignWithArash Год назад
Number 1 & 4 are correct but number 2 & 3 are a preference.
@zahraaizadi7800
@zahraaizadi7800 Год назад
You are doing a great job. Thank you🔥
@DesignWithArash
@DesignWithArash Год назад
So nice of you. Thank you.
@user-zc7qb2il3v
@user-zc7qb2il3v 4 месяца назад
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
@justobru8046
@justobru8046 11 месяцев назад
1. The sub fonts can be more visible 2. learn more option can be in a button
@hoangphuctran1821
@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
@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
@hoangphuctran1821 Год назад
@@DesignWithArash ❤ Thank you so much
@Tonyiykedesigns
@Tonyiykedesigns Год назад
Please brother Can you do a video on road map or userflow.... How to be fast when designing, Color pallette
@DesignWithArash
@DesignWithArash Год назад
Hi Tony, Sure.
@sommymuna3357
@sommymuna3357 Год назад
You’re a great teacher🥰👏
@DesignWithArash
@DesignWithArash Год назад
Thank you so much. That's very kind of you.
@hussainirebecca3001
@hussainirebecca3001 Год назад
The space between the fourth element and the last element seems too much and I can barely see the fourth element
@OscarCarlos11
@OscarCarlos11 3 месяца назад
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?
@SuryaKarigar
@SuryaKarigar 5 месяцев назад
Inconsistent icons. Last icon should be outlined. And the body text should have a bit of contrast
@sohiniroy8069
@sohiniroy8069 Год назад
I think the icon styles need to be consistent. Also the sub text colour should be a little more darker
@DesignWithArash
@DesignWithArash Год назад
That's right.
@aradhnacrafts9183
@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
@DesignWithArash Год назад
You are absolutely right.
@AILecturesHub
@AILecturesHub 3 месяца назад
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
@gregornator
@gregornator Месяц назад
dude you're amazing
@saedehmohebbi1774
@saedehmohebbi1774 7 месяцев назад
tnx for your explanation💎
@DesignWithArash
@DesignWithArash 7 месяцев назад
You are welcome!
@poonamjajoo8149
@poonamjajoo8149 Год назад
icon style is not consistent/same and color contrast for text with background .
@DesignWithArash
@DesignWithArash Год назад
You are 100% right Poonam.👌🏻👌🏻
@muhammedbashirat2786
@muhammedbashirat2786 11 месяцев назад
The text with gray is not visible enough. Black color can be maintained.
@onikekuoreoluwaoluwafunmil9071
@onikekuoreoluwaoluwafunmil9071 5 месяцев назад
The text color in the center is too light..should be darker to improve readability.. and the last frame , the icon is filled
@emmawo2850
@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.
@estherariyo214
@estherariyo214 9 месяцев назад
Hey Arash ,i need a beginner wireframe tutorial from you please
@DesignWithArash
@DesignWithArash 9 месяцев назад
Hey. I'll add it to my list.
@lakshmanprabhu6722
@lakshmanprabhu6722 Год назад
Keep going! You'll soon get thousands of likes per video!!!
@DesignWithArash
@DesignWithArash Год назад
Thank you so much for the encouragement and support. I appreciate it.
@D.J.R_Fit
@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
@DesignWithArash Год назад
Correct.
@SisiBisi-zh1cj
@SisiBisi-zh1cj 3 месяца назад
Thank you
@DesignWithArash
@DesignWithArash 3 месяца назад
No problem.
@obaidurrehman6105
@obaidurrehman6105 Год назад
very helpfull
@DesignWithArash
@DesignWithArash Год назад
Glad it helped. Thank you.
@daniyalhafeez123
@daniyalhafeez123 5 месяцев назад
light color of text is this the mistake or not please reply tome
@HamedSaleki
@HamedSaleki 3 месяца назад
Amazing
@DesignWithArash
@DesignWithArash 3 месяца назад
Thank you.
@Kobbytech480
@Kobbytech480 Месяц назад
The text body is not visible and not readable
@fact-tiger
@fact-tiger Год назад
First 02 icons are not filled and the last one is filled that does not look nice
@DesignWithArash
@DesignWithArash Год назад
Exactly.
@mosfiqurrahmansifat
@mosfiqurrahmansifat Год назад
very helpful video
@DesignWithArash
@DesignWithArash Год назад
Glad it was helpful!
@iulianapopovici3511
@iulianapopovici3511 4 месяца назад
HI, I was wondering, are there platforms where to find beta testers for your UI design?
@DesignWithArash
@DesignWithArash 3 месяца назад
Hi, yes there are. You can check out Conjointly.
@rajunagapuri
@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.
@sarahabraham940
@sarahabraham940 7 месяцев назад
• Low color contrast • Lack of consistency
@hikmatoteniya
@hikmatoteniya 8 дней назад
contrast and typography.
@AmnaHabib-wh6wd
@AmnaHabib-wh6wd 2 месяца назад
Heading text should be larger Icons color mismatch Central text should be black Buttons color should be blue with white text
@RolandOgbue
@RolandOgbue 2 месяца назад
The contrast is poor and the icons are'nt consistent
@wiwita4593
@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
@DesignWithArash Год назад
Hahaha. What is done is done. 😊
Далее
How to Design Great Buttons in Figma? | UI Design
6:01
Are You At Least at Level 4 of UI?
10:57
Просмотров 70 тыс.
когда повзрослела // EVA mash
00:40
Просмотров 1,8 млн
Он тоже из IKEA 🙀
00:10
Просмотров 408 тыс.
If I started UI/UX Design in 2024, I'd Do This!
8:22
Просмотров 203 тыс.
4 Foundational UI Design Principles | C.R.A.P.
9:16
Просмотров 193 тыс.
5 levels of UI skill. Only 4+ gets you hired.
11:05
Просмотров 421 тыс.
12 Mistakes Junior UX Designers Make
10:32
Просмотров 60 тыс.
Want your layouts to look GREAT?! Try Adding DEPTH
18:19
Master Figma Variants | The Complete Guide (2024)
22:00
The 5 Levels of Web Design - Worst to BEST UI/UX
11:22
Free Figma Crash Course for Beginners 2024 | UI/UX Design
1:01:20
когда повзрослела // EVA mash
00:40
Просмотров 1,8 млн