These two pilots didn’t read this article. Look where it got them.
Yes, I’m talking to you, developer
I’ve written this article for you, solo app developer with no designer to help you out. You remind me of myself when I was younger. You and I aren’t so different after all.
Hopefully, the title of this article makes it clear that this five-minute read won’t make you an expert designer.
However, I hope that it’ll help you avoid the most frequently commited design-related crimes and put you on the road to making your apps look damn fine.
Because, let’s face it: if you’re a coder trying to make an app, at first you’ll get it wrong. Really wrong. Why repeat my mistakes when you can simply read this article and, I don’t know, bleach your anus with the time you’ll save?
And with the compulsory ass-related sentence out of the way, let’s move forward.
Item 1: Use icons from the same damn iconset
Come on. This isn’t so hard. Just pick an icon pack and use that. Don’t try to use elements from two or more icon packs in a single app, unless they are by the same designer and use the same style.
Of course, to be able to do that, you have to choose an icon pack that contains a lot of icons. An easy way to do that and save some money is to use Google’s icon pack at material.io. Those icons use a consistent style and look pretty good.
If you’re willing to spend some money, my personal favorite (disclaimer: I am not affiliated with the designers in any way. In fact, just based on statistical probability, I’m pretty sure that they think I’m an asshole) is the Sharpicons icon set over at creativemarket.com. It has a lot of icons, they look great and you get a variety of formats to use. The fact that you get icons in the .svg (scalable vector graphics) format means that you can also export them at the resolution you want.
BONUS TIP: You’re a developer, so you probably don’t have Photoshop or Illustrator handy (that’s alright, I don’t either), which means that, after googling for a bit you’ll probably settle on using either Gimp or Inkscape for .svg import and export. I prefer Gimp, even though it’s not a vector drawing program like Inkscape. The quality of the exported assets just seems better to me.
Simply drag the .svg file into the Gimp window, select the resolution that you’d like the icon to be rendered at and export the icon as a .png.
BONUS BONUS TIP: Use Roman Nurik’s Android Asset Studio to scale your icons for various screen densities.
I have already mentioned creativemarket.com as a place for you to shop for icons, but there are a lot of places to get iconsets. Lately, I’ve been loving Iconscout. Another favorite is PixelBuddha.
Item 2: Use the Material Design-designated keylines
Maybe you’ve never given it much thought but using a grid will instantly make your apps look more professional — more like a unified whole and less like a scattered mess of text and images.
I know that the sound of the word “grid” probably strikes fear into your heart because of its overt designyness (new word alert!) but it’s really simple: try to make your assets fit nicely into an 8dp grid (4dp for text). Easier said than done, since sometimes you don’t control the height or width of the content (eg. in a TextView that wraps its content, you won’t be able to control the height) but at least make your padding and margins a multiple of 8dp.
Want an easy way to see if your app respects the grid? Download Paul Danyliuk’s amazing Material Cue app from the Play Store and activate one of the various grids it offers. I usually use the Standard Grid. Here’s how its overlay looks over the main screen of my app, Looxie
Not too shabby, if I may say so myself
Item 3: Be careful with your use of color
Look, everybody loves colors. I like colors, you like colors and it’s possible that even Hitler liked colors, though most probably their lighter, more Aryan shades.
You know what else everybody likes? Food. But just like you’re not supposed to have chicken soup with chocolate cake croutons (or are you?), some colors are simply best left separate.
Now, I’m not going to lie to you: color theory and its practice is a huge subject but here are some of the shortcuts you can take to make your life easier, especially if you don’t have a prefined brand color / identity to follow
- Sites like coolors.co and http://www.colourlovers.com/ will show you ready-made palettes and even sort them by mood, season etc. Choose one you like and use that.
- Alternatively, you know who creates amazing color palettes? That’s right, Mother Nature! Take a photo of something that inspires you and extract a palette from that. If you’re making an app for surfers, why not take a photo of the beach and extract colors from that?
- Last but not least, visit the Material Design color palette page and choose a color combination you like. This site will even show you your selected colors in context!
Buy Antonis Tsagaris a Coffee - BuyMeACoffee.com_I'm an Android developer and designer with a love for beautiful UIs!_www.buymeacoffee.com
Item 4: Make wise font choices
Ah, typography. Love it or hate it, you gotta love it.
What?
Anyway. There are A LOT of typography-related sites out there but there’s one that’s very helpful for a couple of things: font recommendations and, even more importantly, font pairings. So go visit Typewolf and take a look around. .
What you should keep in mind when choosing fonts for your app:
- Make sure that you don’t pick Comic Sans or Papyrus, unless you’re creating the official Geocities Lovers client. Even then, it’s a stretch.
- OK, you can use Comic Sans or Papyrus if you’re making an app for Stevie Wonder.
- Don’t rely on the system displaying tasteful fonts to your users (because some devilspawn may choose Comic Sans or Papyrus as a system font on Samsung devices just to mess with you). Instead, always load your own fonts: place your .otf or .ttf files into your app’s assets/ folder (preferably into a fonts/ subfolder to keep things clean) and load them using this wonderful static method
Typeface notComicSans = Typeface.createFromAsset(getAssets(), “fonts/notComicSans.otf”);
textView.setTypeface(notComicSans);
OK, you can use Comic Sans or Papyrus if you’re making an app for Stevie Wonder
Another thing to keep in mind: before commiting to a font, be sure to check if it supports all the languages you may want to localize your app into. I had trouble finding nice fonts that support Greek, for example, although I ended up finding a fantastic one (again, no affiliation).
Google’s own Roboto family of fonts (Roboto Condensed and Roboto Slab are my personal favorites) also support many languages and look great.
Finally, check to see if the fonts you have chosen have a wide variety of weights available (like thin, light, bold, black etc). Free fonts usually don’t have a lot of weights available, but again, the Roboto family does.
If a font you like does not have a lot of weights available but you still want to use it, I have found that you can emulate (but not completely recreate) the effect of having various weights available by using different shades and sizes of text for various sections of your app (for example, use a completely black font for a title and a lighter gray font, maybe in a smaller size too, for a subtitle).
That’s all folks! Go prettify your apps! I’ll be here all week!
Am I credible? Maybe my own apps look like shit! Maybe I’m a charlatan of the highest order! You can find my apps in the Play Store so go and make up your own mind!
YourBook: Very Beta Edition