Should you use Material Design on iOS?

It would certainly break conventions.

Matt Delac
UpLabs Success Stories
8 min readJul 28, 2015

--

Whilst it must be acknowledged that only users would ultimately provide an answer to that question, we’re still curious to know how it would render and what professionals think, especially iOS designers. And what better is there to answer this question than by giving it a try?

We met with Jason Zigrino, a talented iOS designer who took the risk of taking the Material Design influence to create stunning UI motion design for iOS. With him we discussed at length how he created this amazing UI and why he made this choice — and it’s all very thought through.

Hi Jason! So how did you become a Designer?

Meet Jason, a visual & motion designer from Central New York.

It all started in high school, when at the time, my goals and ambitions included a career in astrophysics. And with my grades in math and science it came as no surprise to anyone. But one day that all changed. I sat down in English class and my professor told us a story. Now, this story included him walking into work every day sitting down at his desk and without fault, staring at the clock every hour by the hour wishing the hours away.

This story resonated me that very day. My next class was physics and low and behold, I found myself doing exactly what my professor had described. Constantly looking at the clock even though I enjoyed the class, I still could not wait to escape. The very next day my first class was a graphics design class. I sat down at my computer and started working away and what felt like seconds, was in fact, the entirety of the class. I was stunned when the bell rang and it was time to leave. It was this pivotal moment that set my course to become a designer.

Sunrise

What projects are you currently working on?

I am currently a Freelance Visual and Motion Designer working with various companies. One project that I can disclose involves more video production than anything. Centering around an educational individual and their accomplishments as well as their contributions to the community.

I have been freelancing for almost 3 years now and at first I was taken back by how truly frightening it all was. Especially knowing that there is no one to lean on, no one to take you hand and guide you. Not knowing where your next project will come from is one hell of a motivator. The only consistent resource you have is yourself. And so, I have been looking for work outside the realm of freelancing. I was even lucky enough to score an interview with Google a while back. At this point my goal is to land a position at Google, working hard to be an irresistible hire for them.

Star Search

You’ve created some amazing Material Design work, especially the Google Keep one. What tools did you use and how long did it take you?

Most projects I produce involve the use of Photoshop, Illustrator and a relatively new program that I’ve become quite fond of, Sketch. However, I’ve never been quite satisfied with static visuals or example mockups. So, motion design became a true passion, living within the timeline of After Effects.

For this project I used all of those applications, creating scale independent objects in illustrator, baseline wire-framing in Photoshop and bringing it all together in After Effects. Taking roughly about week in between freelance work.

Google Keep for iOS — Adding A Note

For me the purpose of motion design is to convey an idea or an emotion where static visuals simply will not do. I would also add that it is important to not simply animate elements for pure visual aesthetics. They must serve a purpose as well as not interfere with the user’s interactions.

When I think of interacting with elements on a screen I want to know where they have been and where they are going. Elements on the screen — for the most part — should not just appear and disappear. Think of it as a trail of breadcrumbs, the users should not feel lost when interacting with an app. Even though our demographic are not infants, object permanence plays an important part in how we understand and interact with elements on a screen. If I show you a screen with a back button and you select it, you expect something to happen of course. However, if that screen simply disappears and a new screen appears, your trail of breadcrumbs are lost. The user can only deduce where they were and where they are now. A better way is to animate one screen to another, one element to another. Not forcing the user to interpret what has happen but rather showing them. This allows the user to focus on the content and not how to navigate an interface.

I used motion on Google Keep for iOS as a means of communicating with the user along they way for each of their interactions. For instance, when a user selects to create a new note, the field box expands to allow the users to input their information. Further information and elements pertaining to that section are animated on screen as well. Never forcing the user to interpret what has just happened or where they are.

Another example is when you select the color palette. Buttons and elements not important to that selection are animated off screen and new elements are animated in. Even selecting a color invokes an animation providing a tactile like experience with the action.

Work in progress!

Why did you decide to play with Google Keep for iOS and not Android?

As a passionate user of Android, iOS, Mac and PC I’ve become accustomed to adapting to multiple ecosystems. One app that I have grown to love is Google Keep. Unfortunately, this app is not officially by Google on the iOS App Store. So, I took it upon myself to animate a portion of the interface for Google Keep on iOS maintaining Google’s own Material Design language.

At this point I have begun focusing more of my attention on UI Motion Design as a way of better communicating with the user. Animating elements of various apps that could use motion to better illustrate its purpose. I have also been busy designing and animating a concept for an app that — without giving too much away — is a way for an individual to create a vacation, planing several aspects of their journey. From booking a plane to arriving at a hotel, planning activities and finally, returning home. All the while allowing the user to send this collection of information and eliciting advice from family and friends on social networks.

What is your favorite iOS app that uses Material Design so far?

That’s actually incredibly hard decision for me to make. There are so many excellent apps that Google has recently released, but I would have to say it comes down to a select few. Google Search, which is an excellent showcase for Google own take on minimalism and removing all that is unnecessary. And then there is Google’s Inbox, which illustrated some of the most fundamental features of Material Design.

Inbox for iPad, by Google

With that said, I would have to say of all the apps, Google Play Music encompasses all the features I’ve grown to love about Material Design. Including the use of Motion Design guiding the user through the interface as well as the incredibly clean interface allowing the content to take center stage.

Do you think Material Design will influence the way we design and develop iOS apps in the future?

Absolutely. The fundamental holistic views of Material Design can be applied and intelligently incorporated across all devices and interfaces. However, this certainly does not mean that all interfaces should look exactly alike.

Would you recommend designers and developers to incorporate elements in iOS apps?

Various elements both visual and underline mechanics could certainly be incorporated into iOS apps. However, it is important to stay true to the operating systems nature. Forcing a user to adapt or take on new sets of habits within a an app could cause great confusion. It is important to intelligently incorporate various elements of Material Design but it is imperative not to confuse or undermine the user in the process.

When it comes to Material Design and incorporating it within iOS, I focus less on the visual elements and instead focus on the principles. The root of Material Design’s purpose is what’s most important, unlike the visuals which could and most likely grow out of style over time. For me the focus is on UI animation as a way of communicating with the user. UI animation should be as important as any other element like color or buttons. As our interactions with mobile and web interfaces become more complex as well as as less tactile (voice interaction for example) it is imperative to properly guide the user in and out of their interactions.

Do you think Material Design is just a trend?

I would have to say that all design, given enough time, becomes a trend or just another fad. However, when we look at the fundamentals of design there are elements that stand the test of time. Material Design was to be a truly digital native design language adapting with the times. So Material Design as we know it today, may not look the same two years down the road. Think of Material Design as a living organism, constantly adapting and changing to its environment in order to survive.

Thank you Jason! To follow Jason’s work, find him on MaterialUp, Dribbble or Twitter.

--

--