Hey indie hackers, I am a professional, full-time Product Designer. When working with clients and reviewing different sites/products, I see similar design mistakes made again and again. So, I've decided to compose this post to help you identify some of these UI pitfalls in your product and help you to avoid them in the future.
Improvising at every stage of the design and overusing different styles leads to a messy and incohesive product. Make sure that you reuse components as much as you can and stick to one design pattern.
TIPS:
Not using styles to differentiate between different blocks of information creates a very busy looking screen, where different elements compete for the users' attention. By varying font-size, weight and colour you can guide users' attention to the most crucial information, thus making your design more scannable.
TIP:
Heavy dark shadows make your design look very busy and noisy. Less is more when it comes to shadows.
TIP:
Using different iconography styles creates inconsistency and therefore looks unprofessional.
TIP:
A common mistake is to have very little space between the different elements on the screen. Crammed content looks visually busy and is hard to scan through.
TIP:
The issue with low contrast issue is particularly common with buttons and text over the image. Low contrast makes certain text very hard to read as well as makes your design look dull.
TIP:
Thanks for reading, hope that this post was somehow useful to you.
If you want to read more practical and actionable UI/UX advice, you can sign up for the email newsletter that I am currently putting together.
Link: https://www.producthunt.com/my/upcoming/bitesize-design
Happy shipping everyone!
This is good stuff! You should definitely be blogging about good design! You'll get a ton of traffic. 👌 or perhaps write a book.
Thanks Tunji! I do plan to write more posts like this
Great! This post actually deserves to be an article! https://www.indiehackers.com/learn
Yes
Loved it. I am in.
Thank you! Means a lot to me.
You are very welcome @Maximal.
Thanks for this!
Thank you 🙏
This was genuinely useful advice. Reminds me of the Refactoring UI stuff. Thanks for sharing. Will check out that newsletter of yours. :)
Thank you @ptrei , Refactoring UI is great 👍
Thanks Max.
The beautiful thing about this article is its not a ton of reading. Simple headers for each of these 6 sections which tells me more in description. This is exactly the opposite to what the news website provide (not writing enough in the article titles to make user click/open the article). I love this kind of articles, Thanks.
I disagree a little bit about over-shadowing case. In some websites we can't distinguish/identify some buttons because lack of shadow.
Looking forward to your blog.
Thanks @prakis! I guess I was talking here more about the aesthetics rather than UX. But it is quite possible that shadow might be used as a way to bake buttons more prominent.
Got it. I sent a email regarding UX work.
Suggestion, generally its a good idea to also include your twitter account linked to Indiehackers.
Hey, that's very good points.
I have just signup to your newsletter ( I stoped to signup to newsletter since month because I receive too many informations, but yours looks great)
Good job
Thanks Tim! thats awesome to hear
Good stuff.
Thanks Mihir!
Great work! Definitely guilty of many of those myself
haha so many I know i'm guilty of too and have been on the to-do list for months.
even designers are occasionally guilty of some of those ;)
This is unreal advice thanks for sharing!
Thanks Harry! glad you found it helpful
Awesome 😍. Love it and signed up.
Thank you so much ❤️
Awesome work. Great article!
Thanks for these kind words, I appreciate it.
This comment was deleted 4 years ago.
Thanks, Alex! I appreciate it.