Ever since Google has launched its Material Design language, there has been a noticeable shift in its UI design and the way apps look and work. It uses consistent design patterns that can be used across different medium in custom app development.
We interviewed 7 experts from the industry on how they have incorporated material design in their apps. They also shared some great tips and tricks to use while developing an app. Hire a Mobile App Design Agency to get material design started off right from ground up or train your existing designers.
#1 Ready access to Google’s UI/UX research
Anatoly Ivasyuk, director of engineering at LastPass
The challenges with incorporating Material Design are that not all standard components and behaviors are included in the Android design library. When Material Design was first released, each developer who wanted to implement it had to roll his own components, or find open source components, so adoption was initially slow.
Also, this often caused behavior between apps to be inconsistent, because it depended on which component was used. Google then released their Android design library, which helped greatly because it included the most common components and behaviors.
As the design library has been fleshed out over time, it has become easier to implement Material Design in a consistent way and reduce dependence on custom or third-party components.
The benefit of using Material Design is that Google has done the UI and UX research, so individual developers don’t have to. Therefore, customers benefit because they can learn the apps faster, due to consistent navigation and behavior.
#2 Attention to detail makes all the difference
Luke Klinker, founder at Talon for Twitter
For me, Material Design provides the baseline for making a beautiful app; however, it will never be able to cover every case or be directly applied to app specific goals. They only provide a handful of complete-layout examples.
The guidelines highlight many individual pieces of an app, but each developer should try to work off of those pieces to provide a new and exciting experience for users.
While there is no “secret formula” for making a great app, I have found, in my work, that attention to detail makes all the difference. Instead of just blindly implementing Material Design, directly from the documentation, into a cookie-cutter app, try to put your own, unique spin on it by employing diverse layouts and enticing animations.
Above all else, though, Material Design, should be used as a tool to help facilitate features. Just because you make a well designed app, that follows the guidelines, doesn’t mean it will be successful.
It is when you put in features that take advantage of that design, that your app really starts to come together, into something truly beautiful. Material Design can be a great path for success, but be careful not to make the mistake of a well designed application without any functionality that users care about.
#3 Stick to key metrics
Stefan Pledl, developer of LocalCast
Most important is that you have to know the Google Material design guidelines by heart before you start thinking about your app design or redesign. If you want to redesign an old app, it might be the time to start a new code base for the UI part, instead of changing it here and there, because the design guidelines start at the root element of your layout structure.
Stick to the key metrics for every single element in your app. It might look challenging for some elements, but the Android support design and multiple iOS material libraries make it very easier. These didn’t exist when I started LocalCast and I had to write my own code for e.g. for the ripple effects on older Android versions, but it was totally worth it.
Having a consistent style throughout the app or the whole app ecosystem, makes it easy for the users to find their way around the app in the first critically couple of seconds, when most uninstalls would happen. Think about opening an app with material design, it really doesn’t matter which: You will most likely have a short animation of some kind, which makes it instantly look valuable and that someone cared about the design.
#4 Stick to layout that users expect
Adrian Henry, founder at Hungry Turtle Code
Firstly I would say that the key is to not try to reinvent the wheel. By that I mean, material design has become ubiquitous in the Android world – users are used to the components associated with a Material Design UI.
What this means for a designer or entrepreneur thinking about creating a Material Design UI is that they must stick to layouts that users expect.
I understand that as an entrepreneur, you want to stand out and be different. So the urge is to always break the rules slightly to appear different. That may seem like a good idea at the time but from the perspective of the end user it is just a jarring experience. They should know exactly where everything is and intuitively understand the UX flow. That is what I mean by not reinventing the wheel, stick to what the users know.
The second tip would be to pay close attention to the user flow within your app. Don’t just think that because an element follows the Material Design spec that it is the correct element for that job in the app. Yes, gmail uses a floating action button but that doesn’t mean that it is always the best choice for you.
Always ask yourself, does it add to the user experience of the app? Does it feel intuitive? Is it hindering some action from within your app. If you remain constantly critical then you will be able to see when you are making a “good” material element that just doesn’t work in your particular application.
Another point would be kind of linked to the above point, which is that the content should be the focus, not material design. In fact, if a user doesn’t notice your app is material design then you have done your job right. If they don’t notice it, that means that the experience was so seamless and so intuitive they didn’t need to think about it. Big win! So make sure the content is top quality and is the focal point of the app, not the material elements themselves. They are only there to serve the content anyway.
The final point I would touch on is regarding animations. We all love animations, but it is very easy to overdo them. They should again seamlessly fit into the UI. This is a mistake I made a lot when I was getting started.
I was just throwing in animations just for the sake of having animations. The animation should look like it is part of the experience – not just an afterthought. If it looks like you made the app and added the functionality then just threw some animations at it after the fact, that will show and you user’s won’t enjoy it.
However, if the animation looks like it is an intrinsic part of the UI and the UI couldn’t exist without it then you have done a good job. An example I found that illustrates this is here. I know this isn’t an android app, but the material design concept is there. Notice how the button itself becomes the register screen in an animated fashion. The animation is an intrinsic part of the UI. This is much better than pressing the button and just having the register page appear from nowhere.
#5 Focus on research, resource and testing
Jonathan Galea, Lead Designer at Lingvist
As a product designer the 3 main tips I would give revolve around probably the most empirical elements of the design flow: research, resource, and testing. Links and materials for the first two for these are plentiful online, the best of which, unsurprisingly, are provided by Google themselves.
Research:
material.google.com is a quintessential reference point for any designer working on an Android application, but I get the feeling that very few actually take the time to read through the guide prior to embarking on a project. Even if you have worked on Android apps before, refresh your memory and see if there have been any updates to the visual language — a few hours doing this at the beginning of a project could potentially shave off days from the designing process.
The guide is extremely thorough, so being acquainted with its principles will likely help with problem solving further down the line. The Elevation and Shadows section is particularly illuminating, and heavily influenced our final design and approach for the new Lingvist app.
If the product you are creating will work on multiple operating systems, try and conduct your research before work commences on any platform. It’s only natural that your results and findings will feed into all of them. Be flexible though. For instance, if you had to compare the visual language and interactions we’ve used for our Android app and iOS app, you will see some subtle differences: the rounded corners; the drop shadow size; the navigation structure; etc.
Whilst this may have had a slight impact on our overall brand continuity, that’s a small price to pay when one considers the sense of belonging the application has within a specific OS environment. This in-turn equates to a massive usability win, achieved through minimal amount of work.
Resources:
Again, Google provides mountains of beautifully curated resources that are a must for any utilities repository, from symbols to device wireframes. We use Sketch for the majority of our UI designs at Lingvist, and the components sticker sheet is a must have (available in virtually every format under the sun).
You don’t have to limit yourself to the resources provided by Google, there are some great 3rd party assets out there which push the boundaries of material design. Be careful though, whilst these can be really inspirational, they may also end up going against the main principles material design holds. The initial research you conducted earlier will really come in handy at this point.
Testing:
Lastly, but important nonetheless, the tricky part about designing for Android is the fact that there are literally hundreds if not thousands of different devices running the OS are in existence. Testing on all of these is impossible, but that shouldn’t stop you from trying! Ask around the office, and try to get a list of who has what device and are they willing to let you use it for testing.
If you have a budget, try and get your hands on some test devices for your inventory. These don’t have to be brand new, indeed, I would strongly suggest getting used devices. eBay is full of devices going for cheap prices, look for ones that have connectivity issues that render them useless as phones. In many cases, as long as a device can connect to WiFi then it should make a good test platforms.
If this is beyond the means of the company, an emulator like Genymotion works really well. Just make sure to not use it as your only source, nothing will ever really beat having an actual device in your hands.
#6 Material Design is not just about visual, but also motion
Taylor Ling, design co-founder, TheFabulous
- Understand why Material Design – it’s not a must to implement Material Design in Android app, but the guideline serves as a really great starting point for many use cases, while still allow unique brand expression for a product (color, typography, illustrations etc.). And it’s a guideline, so nothing is set in stone – it’s an evolving design system and it’s OK to deviate with strong reason sometimes.
- Understand Material Design is not just about visual, but also motion – What make Material Design really interesting is the deliberate guideline on interface motion, and it does not only give an opportunity to give a brand/product to shine, it also helps a lot in guiding the user and greatly improve user experience, if they are being done right.
- Communicate and understand each other – Often I heard people asking how to best implement the design because developer doesn’t seems to able to implement them, and most of the time, it’s due to the inadequate communication between designers and engineers.Be it a visual or motion implementation, designer should be able to explain certain design decision and get the developer understand why certain decision is being made, either it’s a data-driven design, or theory-based, or a business decision. Designer should also try to understand what are the details needed by the developers to be able to do their job in a more efficiency way, for example specs (or redline), key-frames, assets etc.For a developer, it’s important to figure out how things going to be done rather than just say no if it’s a brand new stuffs in your dictionary, but it’s also important to talk to the designer if certain design decision is really tricky to implement and work together to find a workaround that can achieve the same thing.If you have doubt on certain design decisions, even though you know nothing about it or you could be wrong about it – talk to the designer. It’s the designer job to explain why it has to be done that way – and if they can’t explain it, likely they wasn’t so sure if that’s the only way, then you can challenge them with alternative (not easier!) solution, with the end goal of making the product great.
#7 Simple and elegant solution to design challenges
Ole Reckzeh, art director at Kitchen stories:
First of all, when implementing Google’s material design, it becomes obvious that Google did a great job in creating a design language which works perfectly well for multiple platforms.
Material Design was initially inspired by ink and paper and follows physical rules which help to improve the communication and collaboration between developers and designers. When it comes to implementing Material design in our Kitchen Stories Android app, we learned that the Google Material guidelines provide a simple and elegant solution to most of our design challenges.
Therefore, we believe that leveraging the Google guidelines and exchanging ideas with both the Android community and at local Play Store meetups provide a great base for unique material design solutions.