Programmers and developers are generally not designers – this is widely accepted as being true. Developers tend to focus on making an app work – designers focus on making the app aesthetically appealing. But why can’t developers do the same?
Back in the day, when animated splash landing pages and fancy layouts were a thing, then sure, it made sense to hire a professional designer. But the trend today is minimal – or at least vastly simplified.
Let me give you an anecdotal example – a while back, someone asked me to create a splash screen for their PC software. So I went all out – drew it out on sketch paper, imported it to PhotoShop, created lots of fancy neon lines and effects. It could’ve been a desktop wallpaper, rather than a splash screen. The point is I created this really fancy and elaborate design for them.
As you can probably guess, they didn’t like it. The design they went with was literally a little logo of a few overlapping colored circles, and the software name below it. Like, a 2 minute in PhotoShop job. And you know what? I kind of had to agree that it was better than mine.
The point I’m making is thus – I think programmers fall into this trap of making the same mistake I did. We tend to think of UIs and splash screens needing to be these really fancy, eye-catching things that make the app stand out. But they don’t have to be – honestly, they shouldn’t be. We should take a programmer’s mindset and apply it to aesthetic design – simple, functional, works.
In this article, we’ll be looking at some very simple ways to create an elegant Android APP UI / UX, even if you have almost no designing experience.
Unless You Really Want Something Else, Stick to Material Design
Your app doesn’t need to be “unique” and “stand out from the rest” for it to be popular and look good. That’s what Google’s Material Design set out to achieve – a standard for app UI’s across the industry, and they’ve done a good job. There’s a ton of popular apps out there that stick to Material Design – some of the biggest names in Android apps, like SwiftKey, Nova Launcher, Textra SMS, YouTube, just to name a few.
Material Design’s core focus is on a card-based layout, with a solid color palette. Google worked with top industry designers, drawing a lot of elements from minimalist design practices, and then released the whole thing for free – that’s a pretty good deal, since website and app design courses can run hundreds of dollars for e-books, videos, etc.
Getting started with Material Design is incredibly easy, and there’s a handful of tools that make it even simpler, which we’ll list below:
- Material Theme Editor (macOS + Sketch)
- Material Design Color Palette plug-in (PhotoShop / Illustrator)
- Material Design UI Kit PSD (PhotoShop)
- Android Material Design UI Kit (Sketch)
- Material UI Theme Generator
And if you need some inspiration for creating simple, elegant Material Design themes, check out these list blogs:
- MaterialDesignBlog – 15 Awesome examples of Material Design done right
- MockPlus – 12 Best Material Design Website Examples to Draw Inspiration
- AndroidAuthority – 10 best Material Design apps for Android
Color Gradients Are Way Easier Than You Think
For an alternative to Material Design, dolor gradients are simple, trendy, and eye-catching. And you might think that designers spend a lot of time painting in all the colors, or designing the ultimate gradient. You’d be wrong – it can be done in 10 seconds in PhotoShop.
I’ll even walk you through this, to show you how easy it is.
Create a new PS project for Mobile (1080 x 1920 px @ 72 ppi works fine)
Go to UIGradients.com and find something you like.
Copy the gradient colors from above the preview.
Right-click on an empty layer in PS, and go to Blending Options > Gradient Overlay.
Click directly on the gradient pattern preview in the drop-down menu – don’t click on the dropdown button. Clicking directly on the gradient opens the color editor.
Now just paste the paste the color hex values from UIGradient into PS gradient editor.
Adjust as necessary. You now have a professional gradient background for your Android app.
Other gradient tools worth checking out:
Use SVGs Instead of JPG / PNG
Instead of using PNGs or JPGs for your graphical elements (buttons, logos, etc.) you should really be using SVGs (Scalable Vector Graphics) instead. This is because SVGs can be resized without losing quality – for example, if you upscale a JPG to a bigger value, it loses quality and becomes blurry / pixelated. A SVG does not. People try to use huge PNG files that will be downscaled to fit Android screens – when instead, you can use smaller SVGs that are upscaled without any loss in quality.
Furthermore, SVGs can be up to 60% to 80% smaller in file size than PNG. This means your app or mobile website will load faster for the user, and will look good no matter the screen resolution.
Include a Dark Mode Using Theme.AppCompat.DayNight
You don’t need to design two separate themes to include a dark / night mode theme in your app. Its pretty much built into the AppCompat library, you just need to enable it and edit the values.
See Appual’s guide “How to Implement a Dark Mode in your Android App”.
Use a Template or Mobile UI Kit
If your app doesn’t call for a fancy, customized GUI, there’s absolutely nothing wrong with using a template or kit. Templates and kits can be used as an inspirational guideline, or you can literally just use the template / kit as it is, adding your own buttons and stuff.
Some great resources for Android UI templates and kits:
- SpeckyBoy – 50 Free Mobile UI Kits for iOS & Android
- SketchAppSources – Android UI App Resources (Sketch)
- Freebiesbug – PSD UI Kits (PhotoShop)