Making Material Design Work For You

So you’ve built an app.  You’ve come up with a million dollar idea and you’re ready to build it and market it to the masses.  The concept is there and you know enough to develop it.  But does it look…good?

There’s a lot more to that one simple question than we initially see.  No matter what your app has to offer the world, people aren’t going to keep coming back to it unless it has a well designed interface.  This means that things should be both pleasing on the eyes and easy to use.  Users should find themselves knowing exactly where to look when they want something to happen.

So how can we design such an app?  There’s full courses for this one concept that you could enroll in, but here are some key highlights to making your app pop:

ConstraintLayout:

If you’ve taken intro to Android programming courses before then chances are you’ve done a little design with LinearLayout and RelativeLayout.  These are simple ViewGroups that you can use to organize the images and text on a user’s screen.  While these are useful at times, if used improperly they can start to bog down your app (learn why here!).

ConstraintLayout offers a more efficient way to group your apps exactly how you want them on your screen.  You can group your images in relation to one another on the screen or choose to position them a percentage away from your edges.  Really if you can think of a way you want to organize things, chances are there’s a way to do it with ConstraintLayout.  And without hurting your performance too!

Surfaces:

A simple way to think about the surfaces in your app is in terms of pieces of paper being stacked upon one another.  You can have views side by side or on top of one another, but however you organize things you want the user to know what’s important and what’s just extra.  Changing the elevation of your surfaces can bring what your want to the forefront and control where the user is looking.  It’s sneaky, but it makes a world of difference. 

By raising the elevation of a view a bit it begins to cast a shadow onto the views below it.  This way the end user gains a 3D perspective of what objects are closer to them and thus deserve attention.  Things like Floating Action Buttons (FABs) have this built into them already.  Use them wisely thought, as overcrowding your screen with elevated views can make it just look crowded and sloppy.

Custom fonts:

Style runs deep.  Deeper than just picking a font that you think looks neat.  Fonts with a very static and bold tone can give off the impression that your app is serious.  This can be great if you’re making something like a banking app that wants users to take it seriously and see it as secure.  But if you use one of those fonts with an art app it will be very unrelatable.  Likewise if you have a security based app that has fancy cursive writing users will naturally assume that the creators cares more about looks than performance and may lose faith in it.  Obviously I can’t pick for you, but I can tell you the decision matters!

Transitions With Motion:

As I said earlier your user should know what to do without even thinking about it.  This is where transitions and motion can come in handy.  Take for example a list of songs that a user can scroll through.  Well, if your user doesn’t know much about the app and their screen just so happens to load evenly (aka there are no songs cut off at the bottom), they might think they’re already looking at the whole list.  This would be tragic as they wouldn’t know to scroll down and might assume you just don’t have many songs available.

To fix this you could design your app so that when the list appears it slides in from the bottom of the screen.  This way the user sees it scroll a little upon launch, and their pattern recognizing brain will naturally assume it can keep scrolling.  It’s small, but given the right situation the impact can be huge.

What do you look for in an app when you download it?  Or more importantly what have apps lacked in that made you think twice about keeping them?  Let us know in the comments below!