Open in app

Sign in

Write

Sign in

How to Not Freak Out About Material Design

A sane approach to making your app Material

Maxxxxxxx
What I Learned Building

--

By Max Weiner, Android Lead at Pocket

Adopting any new design language can quickly feel, well, overwhelming. Especially when that language is Material Design, with its paper and ink inspiration, bold colors, and whirling animations.

Having just wrapped up work getting Pocket’s Android app ready for the launch of Lollipop, we wanted to share our process for breaking down Material Design into a project our small team could quickly tackle. We are in no way saying this is the only way of going about the process, or that we nailed going Material right out of the gate. Rather, we hope our experience simply sparks some ideas on how to get started, and ultimately gets you excited about embarking on your own Material adventure.

Should you go Material in the first place?

Let your design principles determine your decision.

At the core of our design philosophy is the belief that great apps are beautiful, unique, and above all else, intuitive. This means we embrace the conventions and strengths of each individual platform we’re on — iOS, Android, Mac, Chrome, etc. — all while maintaining Pocket’s own unique visual style and brand language.

Striking a great balance between your app’s style and the core conventions of the device or OS you’re building for makes your app immediately feel thoughtfully-crafted and delightful to use. Your users will love you for it, and even the seemingly subtle things can make a big difference.

Incremental design refreshes save your team time in the long run.

Waiting to commit to a design refresh can quickly become a bit of a vicious cycle. The longer you wait to refresh, the more you’ll be required to commit to bigger and longer projects down the road that — let’s face it — you’ll simply want to keep putting off.

Refreshing your design in small increments makes it all the more easy to keep up.

How to Get Acclimated with Material

There are now tons of resources at your disposal to help you begin exploring Material. The most important thing at this point is to simply get a high-level grasp of Material Design. No need to sweat the details just yet.

Here are our suggestions for getting your feet wet.

Learn Material in theory.

Check out these overviews, videos, and discussions to help wrap your head around what’s new in Material Design.

Use Material in practice.

Start checking out as many Material apps as you can. There are several apps out there, many from Google, that have had everything from minor design refreshes to full-blown product makeovers. And, there are more apps coming out with Material each and every day.

We recommend starting with the Google Suite: Gmail, Inbox, Fit, Newsstand, I/O 2014, Calendar, Maps and many others.

Monitor Material updates & conversations.

There will be a lot of new apps and design refreshes in the coming months, in addition to plenty of back-and-forth conversations within the design and dev community on best practices. These sites and blogs can help keep you up to speed on any new developments.

Dive In and Get Started

Conduct an App Audit.

So you’ve now got a handle on Material Design. It’s time to turn your attention to your own app. Do a detailed audit and ask yourself the following:

  • What parts of your app already match the new conventions?
  • What UX patterns (navigation, menus, toolbars, etc.) don’t match the new conventions?
  • What design elements could use a tweak, refresh or overhaul?
  • What new things could be added?
  • Where could you add animation to better communicate changes and transitions in your app?

Don’t focus on exact solutions, just cast your net wide and make a list of everything you could do with Material Design. If you’re looking for a place to start, we recommend referencing the different sections of the Material Design Guidelines as a rough checklist.

Ruthlessly Prioritize!

Let me guess. You have a very, very, very long list of things you’d love to tweak, add, or update in your app. We had the same problem, and although it’s tempting to try and do it all in one massive release, it would mean you wouldn’t release anything for a long…long…time.

Hence, prioritization.

As you might have noticed, there are literally hundreds of extremely detailed specifications in the Material Design guide. Thankfully, these are guidelines, not rules.

What they’re meant to do is serve as very finely crafted starting points and a way of fast tracking many of the design decisions you’ll encounter. What they’re not meant to do is override your own specific use cases, conventions or style, nor bog you down with endless details that could take a year to implement.

Here’s What Worked for Us.

We found the following criteria to be especially helpful in deciding what to include in our first Material update:

  • What absolutely must change?
  • What will have the biggest design impact?
  • What will have the biggest UX impact?
  • What are the “nice-to-haves”?

Since we were targeting to launch alongside Android 5.0, our list of things that absolutely must change involved Lollipop-specific bugs, crashes, and anything that just looked plain broken on the new version of Android. Basically, our task here was making sure Pocket functioned on Lollipop as well as it did on earlier versions of Android.

For the biggest design impact, we included any elements we felt as being essential to Material Design, like refreshing the App Bar, making UI updates for certain elements like text fields, icons and accent colors, and giving the status bar a little love and treatment. Even if at first glance, these changes look seemingly minor, we believe the devil is in the details and wanted Android users to instantly feel at home while using the app.

Even small UI refreshes, like increasing the padding of our App Bar and adding subtle animations, can make a big impact.

Anything related to navigation and UX patterns fell into the biggest UX impact bucket. This included everything a user interacts with while moving throughout the app — toolbars, tabs, nav drawers, menus, transitions, etc. We wanted these to be immediately intuitive to Android users opening Pocket for the first time.

Finally, we arrive at the “nice-to-haves.” Nothing on this list should be critical to launch, and you should pretty much just assume you won’t have time to fit them in. That being said, tackling these can be fun things you do as side projects or breaks from the bigger Material update.

For us, we were able to squeeze in a few icon transition animations. Though not necessarily mission-critical to launch, these types of subtle changes add a lot of polish and fun to your app.

Animations are fun! Plus, they feel very at home in Material Design.

Just Stay Focused

There is a lot to Material Design. But that doesn’t mean you should feel like you need to tackle it all. With your priorities in mind, pick your deadline and fit in what is reasonable. If you prioritize and focus on the important things, your first step to “going Material” can be fit into a single release.

Good luck! If you’d like to keep tabs on what our team is up to, you can follow us at @Pocket.

You can check out the new Pocket for Material Design at http://pocket.co/sKTGP

--

--

Maxxxxxxx
What I Learned Building

Written by Maxxxxxxx

400 Followers
Writer for

Noodler. Little Green Robot Trainer at @Pocket