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. 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? Really 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 . Those icons use a consistent style and look pretty good. Google’s icon pack at material.io 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 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. Sharpicons : 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 or 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. BONUS TIP Gimp Inkscape 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. : Use Roman Nurik’s to scale your icons for various screen densities. BONUS TIP BONUS Android Asset Studio 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 . Another favorite is . Iconscout 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 (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. designyness Want an easy way to see if your app respects the grid? Download ’s amazing 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, Paul Danyliuk Material Cue 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 and will show you ready-made palettes and even sort them by mood, season etc. Choose one you like and use that. coolors.co http://www.colourlovers.com/ Alternatively, you know who creates amazing color palettes? That’s right, Mother Nature! Take a photo of something that inspires you and from that. If you’re making an app for surfers, why not take a photo of the beach and extract colors from ? extract a palette that Last but not least, visit the and choose a color combination you like. will even show you your selected colors in context! Material Design color palette page This site _I'm an Android developer and designer with a love for beautiful UIs!_www.buymeacoffee.com Buy Antonis Tsagaris a Coffee - 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 . So go visit and take a look around. . pairings Typewolf 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 use Comic Sans or Papyrus if you’re making an app for Stevie Wonder. can 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 folder (preferably into a subfolder to keep things clean) and load them using this wonderful static method assets/ fonts/ Typeface notComicSans = Typeface. (getAssets(), “fonts/notComicSans.otf”); createFromAsset textView.setTypeface(notComicSans); OK, you use Comic Sans or Papyrus if you’re making an app for Stevie Wonder can Another thing to keep in mind: before commiting to a font, be sure to check if you may want to localize your app into. I had trouble finding nice fonts that support Greek, for example, although I ended up finding (again, no affiliation). it supports all the languages a fantastic one 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! Looxie Karkoona Kairoskopion Veterondo YourBook : Very Beta Edition
