[Android Design Resources] XDARoni:
Common Android Design Mistakes

You might just be getting started with your wireframe or you could be putting the finishing touches on your design and something just doesn't look right. It's not looking how you imagined it in your head. You had this colorful and elegant UI in mind but then after putting everything together it looks like dumpster garbage. If this sounds familiar then you could be making one of these common design mistakes. Let's have a look.

Color Scheme

Take a look at these two images. The one on the left looks perfect while the one on the right makes me want to stick my face in a blender. But why do they look so different when the colors used are so similar? Well those who understand color theory are rolling their eyes right now thinking "That's easy." but not all of us are good at this sort of thing. That's ok, you don't have to be.

View attachment 3592123

The reason the one on the left looks so much better than the one on the right is because it is using the color guidelines given to us by Google. The Material design color palette is made so that any of the colors from their selection will look good together.

This problem has an easy fix. Checkout the material design color palette here. You can download the color swatch and use it in AI or PS. Use only colors selected from the one on the palette.

Check out this video which explains why these colors work so well when designing for Android.

[YOUTUBE]xYkz0Ueg0L4[/YOUTUBE]

Typography

Once again we see the sample on the left looks beautiful and the sample on the right makes me want to get a divorce... and I love my wife a lot! The one on the left is using the Roboto typeface that is modified specifically for Android. The right image is using Times New Roman which is designed for print and not digital interfaces.

View attachment 3592133

You don't have to use Roboto but if you're having a hard time making everything look right, then it's a good place to start. Download the Roboto font here.

The other part that people tend to get wrong is the positioning, saturation and size of their font. Believe it or not these things matter a lot! Luckily for us, just like with color theory, we don't need to be experts. It's all explained step by step on the Google design website.

Google Design Typography

View attachment 3592137

I would read through that article and then give this video a quick watch.

[YOUTUBE]6WxACOHm0_g[/YOUTUBE]

Icons

The other thing that might be making your design look like a bad scrapbook project is the icons. Your first instinct might be to look up an icon set, find one that looks pretty, implement it into your design and there ya have it! All done! Nope.

You see, half the time the user doesn't care that your icon is 3D and sparkles when you press it. Icons should blend in with your UI, not stick out like a sore thumb. Take a look at this image.

View attachment 3592154

Some people would choose the icon on the right because they think it's more interesting. Then the app their putting together will look stupid and nobody will download it. Not even their mom.

Take a look at this free icon set from Google.

View attachment 3592159

You don't have to use this one but it's a great design, it's free, it has every icon you would need and... actually I changed my mind. You do have to use this one. At least until your app is nice and polished. Then you can go back and tweak some things to add some personality.

Google System Icons

These are some of the easiest design aspects to get wrong. Follow the guides that have been linked here and stick to them. You'll have all your problems sorted out in no time.