Tag Archives: Material Design

Building the Shape System for Material Design

Posted by Yarden Eitan, Software Engineer

Building the Shape System for Material Design

I am Yarden, an iOS engineer for Material Design—Google's open-source system for designing and building excellent user interfaces. I help build and maintain our iOS components, but I'm also the engineering lead for Material's shape system.

Shape: It's kind of a big deal

You can't have a UI without shape. Cards, buttons, sheets, text fields—and just about everything else you see on a screen—are often displayed within some kind of "surface" or "container." For most of computing's history, that's meant rectangles. Lots of rectangles.

But the Material team knew there was potential in giving designers and developers the ability to systematically apply unique shapes across all of our Material Design UI components. Rounded corners! Angular cuts! For designers, this means being able to create beautiful interfaces that are even better at directing attention, expressing brand, and supporting interactions. For developers, having consistent shape support across all major platforms means we can easily apply and customize shape across apps.

My role as engineering lead was truly exciting—I got to collaborate with our design leads to scope the project and find the best way to create this complex new system. Compared to systems for typography and color (which have clear structures and precedents like the web's H1-H6 type hierarchy, or the idea of primary/secondary colors) shape is the Wild West. It's a relatively unexplored terrain with rules and best practices still waiting to be defined. To meet this challenge, I got to work with all the different Material Design engineering platforms to identify possible blockers, scope the effort, and build it!

When building out the system, we had two high level goals:

  • Adding shape support for our components—giving developers the ability to customize the shape of buttons, cards, chips, sheets, etc.
  • Defining and developing a good way to theme our components using shape—so developers could set their product's shape story once and have it cascade through their app, instead of needing to customize each component individually.

From an engineering perspective, adding shape support held the bulk of the work and complexities, whereas theming had more design-driven challenges. In this post, I'll mostly focus on the engineering work and how we added shape support to our components.

Here's a rundown of what I'll cover here:

  • Scoping out the shape support functionality
  • Building shape support consistently across platforms is hard
  • Implementing shape support on iOS
    • Shape core implementation
    • Adding shape support for components
  • Applying a custom shape on your component
  • Final words

Scoping out the shape support functionality

Our first task was to scope out two questions: 1) What is shape support? and 2) What functionality should it provide? Initially our goals were somewhat ambitious. The original proposal suggested an API to customize components by edges and corners, with full flexibility on how these edges and corners look. We even thought about receiving a custom .png file with a path and converting it to a shaped component in each respective platform.

We soon found that having no restrictions would make it extremely hard to define such a system. More flexibility doesn't necessarily mean a better result. For example, it'd be quite a feat to define a flexible and easy API that lets you make a snake-shaped FAB and train-shaped cards. But those elements would almost certainly contradict the clear and straightforward approach championed by Material Design guidance.

This truck-shaped FAB is a definite "don't" in Material Design guidance.

We had to weigh the expense of time and resources against the added value for each functionality we could provide.

To solve these open questions we decided to conduct a full weeklong workshop including team members from design, engineering, and tooling. It proved to be extremely effective. Even though there were a lot of inputs, we were able to hone down what features were feasible and most impactful for our users. Our final proposal was to make the initial system support three types of shapes: square, rounded, and cut. These shapes can be achieved through an API customizing a component's corners.

Building shape support consistently across platforms (it's hard)

Anyone who's built for multiple platforms knows that consistency is key. But during our workshop, we realized how difficult it would be to provide the exact same functionality for all our platforms: Android, Flutter, iOS, and the web. Our biggest blocker? Getting cut corners to work on the web.

Unlike sharp or rounded corners, cut corners do not have a built-in native solution on the web.

Our web team looked at a range of solutions—we even considered the idea of adding background-colored squares over each corner to mask it and make it appear cut. Of course, the drawbacks there are obvious: Shadows are masked and the squares themselves need to act as chameleons when the background isn't static or has more than one color.

We then investigated the Houdini (paint worklet) API along with polyfill which initially seemed like a viable solution that would actually work. However, adding this support would require additional effort:

  • Our UI components use shadows to display elevation and the new canvas shadows look different than the native CSS box-shadow, which would require us to reimplement shadows throughout our system.
  • Our UI components also display a visual ripple effect when being tapped—to show intractability. For us to continue using ripple in the paint worklet, we would need to reimplement it, as there is no cross-browser masking solution that doesn't provide significant performance hits.

Even if we'd decided to add more engineering effort and go down the Houdini path, the question of value vs cost still remained, especially with Houdini still being "not ready" across the web ecosystem.

Based on our research and weighing the cost of the effort, we ultimately decided to move forward without supporting cut corners for web UIs (at least for now). But the good news was that we have spec-ed out the requirements and could start building!

Implementing shape support on iOS

After honing down the feature set, it was up to the engineers of each platform to go and start building. I helped build out shape support for iOS. Here's how we did it:

Core implementation

In iOS, the basic building block of user interfaces is based on instances of the UIView class. Each UIView is backed by a CALayer instance to manage and display its visual content. By modifying the CALayer's properties, you can modify various properties of its visual appearance, like color, border, shadow, and also the geometry.

When we refer to a CALayer's geometry, we always talk about it in the form of a rectangle.

Its frame is built from an (x, y) pair for position and a (width, height) pair for size. The main API for manipulating the layer's rectangular shape is by setting its cornerRadius, which receives a radius value, and in turn sets its four corners to be rounded by that value. The notion of a rectangular backing and an easy API for rounded corners exists pretty much across the board for Android, Flutter, and the web. But things like cut corners and custom edges are usually not as straightforward. To be able to offer these features we built a shape library that provides a generator for creating CALayers with specific, well-defined shape attributes.

Thankfully, Apple provides us with the class CAShapeLayer, which subclasses CALayer and has a customPath property. Assigning this property to a custom CGPath allows us to create any shape we want.

With the path capabilities in mind, we then built a class that leverages the CGPath APIs and provides properties that our users will care about when shaping their components. Here is the API:

/**
An MDCShapeGenerating for creating shaped rectangular CGPaths.

By default MDCRectangleShapeGenerator creates rectangular CGPaths.
Set the corner and edge treatments to shape parts of the generated path.
*/
@interface MDCRectangleShapeGenerator : NSObject <MDCShapeGenerating>

/**
The corner treatments to apply to each corner.
*/
@property(nonatomic, strong) MDCCornerTreatment *topLeftCorner;
@property(nonatomic, strong) MDCCornerTreatment *topRightCorner;
@property(nonatomic, strong) MDCCornerTreatment *bottomLeftCorner;
@property(nonatomic, strong) MDCCornerTreatment *bottomRightCorner;

/**
The offsets to apply to each corner.
*/
@property(nonatomic, assign) CGPoint topLeftCornerOffset;
@property(nonatomic, assign) CGPoint topRightCornerOffset;
@property(nonatomic, assign) CGPoint bottomLeftCornerOffset;
@property(nonatomic, assign) CGPoint bottomRightCornerOffset;

/**
The edge treatments to apply to each edge.
*/
@property(nonatomic, strong) MDCEdgeTreatment *topEdge;
@property(nonatomic, strong) MDCEdgeTreatment *rightEdge;
@property(nonatomic, strong) MDCEdgeTreatment *bottomEdge;
@property(nonatomic, strong) MDCEdgeTreatment *leftEdge;

/**
Convenience to set all corners to the same MDCCornerTreatment instance.
*/
- (void)setCorners:(MDCCornerTreatment *)cornerShape;

/**
Convenience to set all edge treatments to the same MDCEdgeTreatment instance.
*/
- (void)setEdges:(MDCEdgeTreatment *)edgeShape;

By providing such an API, a user can generate a path for only a corner or an edge, and the MDCRectangleShapeGenerator class above will create a shape with those properties in mind. For this initial implementation of our initial shape system, we used only the corner properties.

As you can see, the corners themselves are made of the class MDCCornerTreatment, which encapsulates three pieces of important information:

  • The value of the corner (each specific corner type receives a value).
  • Whether the value provided is a percentage of the height of the surface or an absolute value.
  • A method that returns a path generator based on the given value and corner type. This will provide MDCRectangleShapeGenerator a way to receive the right path for the corner, which it can then append to the overall path of the shape.

To make things even simpler, we didn't want our users to have to build the custom corner by calculating the corner path, so we provided 3 convenient subclasses for our MDCCornerTreatment that generate a rounded, curved, and cut corner.

As an example, our cut corner treatment receives a value called a "cut"—which defines the angle and size of the cut based on the number of UI points starting from the edge of the corner, and going an equal distance on the X axis and the Y axis. If the shape is a square with a size of 100x100, and we have all its corners set with MDCCutCornerTreatment and a cut value of 50, then the final result will be a diamond with a size of 50x50.

Here's how the cut corner treatment implements the path generator:

- (MDCPathGenerator *)pathGeneratorForCornerWithAngle:(CGFloat)angle
andCut:(CGFloat)cut {
MDCPathGenerator *path =
[MDCPathGenerator pathGeneratorWithStartPoint:CGPointMake(0, cut)];
[path addLineToPoint:CGPointMake(MDCSin(angle) * cut, MDCCos(angle) * cut)];
return path;
}

The cut corner's path only cares about the 2 points (one on each edge of the corner) that dictate the cut. The points are (0, cut) and (sin(angle) * cut, cos(angle) * cut). In our case—because we are talking only about rectangles where their corner is 90 degrees—the latter point is equivalent to (cut, 0) where sin(90) = 1 and cos(90) = 0

Here's how the rounded corner treatment implements the path generator:

- (MDCPathGenerator *)pathGeneratorForCornerWithAngle:(CGFloat)angle 
andRadius:(CGFloat)radius {
MDCPathGenerator *path =
[MDCPathGenerator pathGeneratorWithStartPoint:CGPointMake(0, radius)];
[path addArcWithTangentPoint:CGPointZero
toPoint:CGPointMake(MDCSin(angle) * radius, MDCCos(angle) * radius)
radius:radius];
return path;
}

From the starting point of (0, radius) we draw an arc of a circle to the point (sin(angle) * radius, cos(angle) * radius) which—similarly to the cut example—translates to (radius, 0). Lastly, the radius value is the radius of the arc.

Adding shape support for components

After providing an MDCRectangleShapeGenerator with the convenient APIs for setting the corners and edges, we then needed to add a property for each of our components to receive the shape generator and apply the shape to the component.

Each supported component now has a shapeGenerator property in its API that can receive an MDCShapeGenerator or any different shape generator that implements the pathForSize method: Given the width and height of the component, it returns a CGPath of the shape. We also needed to make sure that the path generated is then applied to the underlying CALayer of the component's UIView for it to be displayed.

By applying the shape generator's path on the component, we had to keep a couple things in mind:

Adding proper shadow, border, and background color support

Because the shadows, borders, and background colors are part of the default UIView API and don't necessarily take into account custom CALayer paths (they follow the default rectangular bounds), we needed to provide additional support. So we implemented MDCShapedShadowLayer to be the view's main CALayer. What this class does is take the shape generator path, and then passes that path to be the layer's shadow path—so the shadow will follow the custom shape. It also provides different APIs for setting the background color and border color/width by explicitly setting the values on the CALayer that holds the custom path, rather than invoking the top level UIView APIs. As an example, when setting the background color to black (instead of invoking UIView's backgroundColor) we invoke CALayer's fillColor.

Being conscious of setting layer's properties such as shadowPath and cornerRadius

Because the shape's layer is set up differently than the view's default layer, we need to be conscious of places where we set our layer's properties in our existing component code. As an example, setting the cornerRadius of a component—which is the default way to set rounded corners using Apple's API—will actually not be applicable if you also set a custom shape.

Supporting touch events

Receiving touch also applies only on the original rectangular bounds of the view. With a custom shape, we'll have cases where there are places in the rectangular bounds where the layer isn't drawn, or places outside the bounds where the layer is drawn. So we needed a way to support proper touch that corresponds to where the shape is and isn't, and act accordingly.

To achieve this, we override the hitTest method of our UIView. The hitTest method is responsible for returning the view supposed to receive the touch. In our case, we implemented it so it returns the custom shape's view if the touch event is contained inside the generated shape path:

- (UIView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event {
if (self.layer.shapeGenerator) {
if (CGPathContainsPoint(self.layer.shapeLayer.path, nil, point, true)) {
return self;
} else {
return nil;
}
}
return [super hitTest:point withEvent:event];
}

Ink Ripple Support

As with the other properties, our ink ripple (which provides a ripple effect to the user as touch feedback) is also built on top of the default rectangular bounds. For ink, there are two things we update: 1) the maxRippleRadius and 2) the masking to bounds. The maxRippleRadius must be updated in cases where the shape is either smaller or bigger than the bounds. In these cases we can't rely on the bounds because for smaller shapes the ink will ripple too fast, and for bigger shapes the ripple won't cover the entire shape. The ink layer's maskToBounds needs to also be set to NO so we can allow the ink to spread outside of the bounds when the custom shape is bigger than the default bounds.

- (void)updateInkForShape {
CGRect boundingBox = CGPathGetBoundingBox(self.layer.shapeLayer.path);
self.inkView.maxRippleRadius =
(CGFloat)(MDCHypot(CGRectGetHeight(boundingBox), CGRectGetWidth(boundingBox)) / 2 + 10.f);
self.inkView.layer.masksToBounds = NO;
}

Applying a custom shape to your components

With all the implementation complete, here are per-platform examples of how to provide cut corners to a Material Button component:

Android:

Kotlin

button.background as? MaterialShapeDrawable?.let {
it.shapeAppearanceModel.apply {
cornerFamily = CutCornerTreatment(cornerSize)
}
}

XML:

<com.google.android.material.button.MaterialButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:shapeAppearanceOverlay="@style/MyShapeAppearanceOverlay"/>

<style name="MyShapeAppearanceOverlay">
<item name="cornerFamily">cut</item>
<item name="cornerSize">4dp</item>
<style>

Flutter:

FlatButton(
shape: BeveledRectangleBorder(
// Despite referencing circles and radii, this means "make all corners 4.0".
borderRadius: BorderRadius.all(Radius.circular(4.0)),
),

iOS:

MDCButton *button = [[MDCButton alloc] init];
MDCRectangleShapeGenerator *rectShape = [[MDCRectangleShapeGenerator alloc] init];
[rectShape setCorners:[MDCCutCornerTreatment alloc] initWithCut:4]]];
button.shapeGenerator = rectShape;

Web (rounded corners):

.my-button {
@include mdc-button-shape-radius(4px);
}

Final words

I'm really excited to have tackled this problem and have it be part of the Material Design system. I'm particularly happy to have worked so collaboratively with design. As an engineer, I tend to tackle problems more or less from similar angles, and also think about problems very similarly to other engineers. But when solving problems together with designers, it feels like the challenge is actually looked at from all the right angles (pun intended), and the solution often turns out to be better and more thoughtful.

We're in good shape to continue growing the Material shape system and offering even more support for things like edge treatments and more complicated shapes. One day (when Houdini is ready) we'll even be able to support cut corners on the web.

Please check our code out on GitHub across the different platforms: Android, Flutter, iOS, Web. And check out our newly updated Material Design guidance on shape.

Google I/O: New Ways to Put Users at the Center of Your Apps and Payments

I/O is a magical time at Google. Every year, thousands of developers gather in Google's backyard to share new product ideas and learn about our latest innovations in computing.

We're meeting at an exciting time for the developer community. It's a time when consumers have more choices than ever before—like where to shop, what to watch, which games to play and how to communicate with friends and family. Your product needs to stand out. You need tools to help your business grow. And you need to make sure your users are happy.

We think we can help.

This afternoon, my team and I will share 3 new innovations for developers to make it easy for users to pay for your services, build profitable businesses and grow your user base. Check out our live stream here or at the end of this post.
Enabling users to pay with Google

Starting today, our suite of payment solutions will be expanding. The Google Payment API enables merchants and developers to turbocharge checkout conversion by offering your users an easy way to pay with credit and debit cards saved to their Google Account. Users will have multiple Google payment options at their fingertips, like a credit or a debit card previously saved via Android Pay, a payment card used to transact on the Play Store or a form of payment stored via Chrome. And they'll be able to use these saved payment options in third-party apps and mobile sites, as well as on Google Assistant when they are on-the-go.
Paying with Google for Panera Bread on Google Assistant

For users, this means faster checkout. Now they'll never miss a deal because they're stuck on a bus and don't want to pull out their credit card in front of strangers. They'll no longer experience the pain of stumbling on a sale that ends at midnight when they're tucked in bed with their credit card out of reach. Users can save time and headache by using credit and debit cards they've already saved to their Google Account whenever they see the option to pay with Google on supported apps or sites.

For developers, this API is a significant innovation that can enable faster checkout, drive more conversions, increase sales and reduce abandoned carts—all with a simple integration. Learn more about our Google Payment API here.
Earn more from your apps with the brand new AdMob
People turn to their mobile devices throughout the day to shop, communicate and stay entertained. For developers, in-app purchases are one way to monetize. Ads are another way.
AdMob was built to support the app ecosystem. With over 1 million apps across iOS and Android, AdMob has paid over $3.5 billion dollars in ads revenue to developers. But there's more we can do to help you succeed.

Today, we're introducing a completely redesigned AdMob. Rebuilt from the ground up, AdMob is now simpler to use and delivers richer insights about your users' in-app experiences.

Simpler to use: We've applied Material Design to all aspects of the AdMob look and feel to deliver an easy-to-use and intuitive experience across the entire platform—on mobile and desktop. You'll get more done in less time. Below you can see how easy it is to pick an app that you're monitoring, check out its key metrics and then quickly take action to fine-tune its performance.

Redesigned AdMob experience

Deeper insights:
We've also integrated Google Analytics for Firebase into the core of the redesigned AdMob so you have quick access to the metrics that matter most for your business. Once you linkyour AdMob and Firebase accounts, you'll have access to detailed ad revenue data and user insights like time spent in the app and in-app purchases—all in one place.

Google Analytics for Firebase dashboard in AdMob
Know your user, find your user with Universal App Campaigns
Earning money from your app is one piece of the puzzle. You also need to think about how to grow your user base.

Google's app innovations have delivered over 5 billion installs from ads and we are now helping developers drive over 3 billion in-app events per quarter—like users adding something to their cart or reaching level 3 of a game. Developers have gravitated toward Universal App Campaigns (UAC) as the "one stop shop" campaign type that scales your reach and maximizes app installs across Google's largest properties: Google Play, Search, YouTube, Gmail and the Display Network. UAC uses Google's machine learning technology to evaluate numerous signals in real time, refining each ad to help you reach your most engaged users. We're continuing to double down on UAC, with all new innovations being built into UAC to make app promotion even more effective.
Engage users in key moments of discovery with new UAC placements in Google Play 
Android reaches more than 2 billion active devices every month, with Google Play available in 190+ countries around the world. It's the place users come to discover new apps and games. Beyond searching for apps to try, users are increasingly browsing the Play store and finding recommendations for new apps. 
To help those users discover more of your apps, we are introducing new ad placements on the home and app listing pages in the Google Play Store. These new placements, available exclusively through UAC, help you reach users in "discovery mode" as they swipe, tap and scroll in search of their next favorite app. 
New ad placements reach users browsing in Google Play

Discover more of your best users with new bidding options in UAC 
Some users are more valuable to your business than others, like the players who level-up in your game or the loyal travelers who book several flights a month. That's why we're expanding Smart Bidding strategies in UAC to help you acquire more of these high-value users. Using Smart Bidding, you can tailor bids for your unique business goals - target cost per acquisition (tCPA) or target return on ad spend (tROAS). UAC delivers the right users based on your objectives: installs, events and, coming soon, value. This update starts rolling out to iOS and Android developers and advertisers in the coming months. 
Introducing App Attribution Partners, a new measurement program 
Many developers rely on third-party measurement providers to measure the impact of ads and gain valuable insights about how users engage with your app. To help you take action on these insights in a faster and more seamless way, we are introducing App Attribution Partners, a new program designed to integrate data from 7 global companies right into AdWords.

Welcome to adjust, Adways, AppsFlyer, Apsalar, CyberZ, Kochava and TUNE... we're thrilled to have them onboard!

AdWords' integration with these partners ensures that you have consistent, reliable and more granular data where you review app metrics. Now you can take action with confidence and stay on top of your business performance.
As consumers live more of their lives online, it's increasingly important for developers to build user-centric experiences in everything that you do—from the apps you design, to the experiences you deliver, to the ways you help people transact. We know it's not always easy, so Google is here to help.

We look forward to continuing on this journey with you.

Posted by Sridhar Ramaswamy, Senior Vice President, Ads and Commerce

Source: Inside AdMob


Build beautiful apps and websites with modular, customizable UI components

Posted by Adrian Secord and Omer Ziv, Material Design

Material Components lets you build easily for Android, iOS, and the web using open-source code for Material Design, a shared set of principles uniting style, brand, interaction, and motion.

These components are regularly updated by a team of engineers and designers to follow the latest Material Design guidelines, ensuring well-crafted implementations that meet development standards such as internationalization and accessibility support.

Accurate

Pixel-perfect components for Android, iOS, and the web

Current

Maintained by Google engineers and designers, using the latest APIs and features.

Open-source

The code on GitHub is available for you to contribute or simply use elements as needed

Industry standards

Also used in Google's products, these components meet industry standards, such as internationalization and accessibility

Material Components are maintained by a core team of Android, iOS, and web engineers and UX designers at Google. We strive to support the best of each platform by:

  • Supporting older Android versions with graceful degradation
  • Developing iOS apps that use industry standards like Swift, Objective-C, and storyboards
  • Integrating seamlessly with popular web frameworks and libraries

With these components, your team can easily develop rich user experiences using Material Design. We'll be continually updating the components to match the latest Material Design guidelines, and we're looking forward to you and your team contributing to the project. To get the latest news and chat with us directly, please check out our GitHub repos, follow us on Twitter (@materialdesign), and visit us at https://material.io/components/.

Expand your color palette with new tools for Material Design

Posted By: Rachel Been, Creative Lead, Material Design

The Material Design Guidelines are a living documentation of visual, interactive, and motion design guidance across platforms and devices.

Beyond guidance, Material Design is a also system that supports and strengthens communication and productivity with new tools and inspiration. With today's update, Material is introducing a new way to learn about color. The new color tool helps you create, share, and apply color palettes to a sample UI and through components in codepen. The tool also supports accessibility by evaluating the legibility of text for any color combination. Specific features include:





Create color schemes

Create color schemes that include darker and lighter variations of your primary and secondary colors.











Test accessibility

Check if text is accessible on different-colored backgrounds, as measured using the Web Content Accessibility Guidelines legibility standards.










Preview your UI in color

Preview the look of your color scheme across a range of Material Design Components, with editable HTML, CSS, or JavaScript in Codepen.




With these new tools to dabble with color schemes, you'll be able to give you users a richer experience, so we can't wait to see what you come up with. To get the latest news and engage with us directly, please follow us on our new Twitter account (@materialdesign) and visit https://material.io/.

Meet the new AdSense user interface

The new AdSense user interface (UI) is here. Over the last year, our product team has been hard at work bringing Material Design principles to AdSense. This new UI highlights the information that’s relevant to you on a personalized homepage and streamlines navigation.


Over the next few weeks we’ll be offering the new UI to AdSense publishers.  All you’ll need to do is opt in when you log in to AdSense: 
What’s new?
  • A fresh new look & feel. We're adopting Material Design principles with a completely redesigned homepage and menu. We’ll roll out further improvements throughout the product soon.
  • A great new homepage. All the information you need, right where you need it. We've organized your homepage into a stream of interactive cards. You can pin your favorites to the top of the stream, and arrange your homepage just the way you’d like.
  • A streamlined new menu. We’ve brought everything together in a new left hand menu.
We’ll continue to improve and refine AdSense over the coming months. While we’re making these improvements, you’ll still be able to find all the content and features that you’re used to–right where you expect them.


Opt in through the AdSense interface to try it for yourself, and let us know what you think in the feedback tool.


Posted by: Andrew Gildfind, Daniel White & Louis Collard
From the AdSense Product Team


Source: Inside AdSense


Android Developer Story: PicMix reaches global audience on Google Play

Posted by Lily Sheringham, Google Play team

Inovidea Magna Global, is the developer of PicMix, a photo and video editing app, which has now evolved into an interest based social media platform powered by content discovery and social commerce. It has 27 million users worldwide, 65% of which are outside of its home market in Indonesia.

Hear Calvin Kizana, CEO, and Sandy Colondam, Co-founder, explain how they used Google Play tools, such as Store Listing Experiments and Material Design, to create a high quality app which appeals to a global audience.

Learn more about store listing experiments and find out how to get started with Material Design. Also, get the Playbook for Developers app and stay up-to-date with more features and best practices that will help you grow a successful business on Google Play.

Design is a Dialogue: Sharing Material Design to Japan and beyond

Posted by Matias Duarte, ‎VP, Material Design at Google

As a child I was surrounded by the commercial design and pop-cultural art of Japan. I played with Transformer robot toys, pumped quarters into Pac-Man and Donkey Kong, watched Star Blazers (Yamato) and Robotech (Macross) cartoons after school, and listened to mix-tapes on my Sony Walkman.

In art school, I became fascinated by the creative dialog of the late 1800s, where western artists drew inspiration from their peers in Asia. The flattening of perspective and embrace of the two-dimensional graphic qualities of the image were revolutionary at the time, and would lay the foundation for the great modernist movements of painting and design in the West.

These influences can be found in Material Design, our comprehensive system for visual, motion, and interaction design across all platforms and all devices. Material Design continues to evolve but, at its core, it relies on the foundations of good graphic and print design – clear typography, systematic layout, thoughtful application of scale, intentional use of color and white space, and foreground imagery. Working together these elements do far more than please the eye. They create hierarchy, meaning, and focus attention on content.

Yesterday, I was in Tokyo to host SPAN, our annual design event that engages the many ways design and technology shape our everyday lives. SPAN Tokyo provides us with an opportunity to honor the influence of Japanese art and culture on Material Design, as we highlight the most inspiring local designers and broader creative community. In anticipation of the event, we have translated our Material Design Guidelines into Japanese which we are please to announce are available for download starting today (material.google.com/jp). This document is a first step towards making Material Design a conversation that includes our Japanese friends. Furthermore, it is a symbol of our commitment to continuing this dialog of design throughout Asia.

With that in mind, we’ve organized SPAN Tokyo to feature a broad range of practitioners contributing to the contemporary visual cultural happening in Japan today—from art generated through machine learning and neural networks, to start-up culture, ikebana, type design, and much more. We’re honored to have been joined by this esteemed group of speakers, including London Design Museum director Deyan Sudjic, illustrator Mariya Suzuki, artist Keiichi Tanaami, and many more.

To recap yesterday's conference and stay up to date on future events, follow us on Twitter, Google+, Facebook, and sign up for the Google Design Newsletter.

The Google Play Awards coming to Google I/O

Posted by Purnima Kochikar, Director, Apps and Games Business Development, Google Play

Google Play has seen tremendous growth over the past year, reaching more than 1 billion Android users across 190 countries. As a way to recognize our incredible developer community and highlight some of the best apps and games, we’re kicking off our first-ever Google Play Awards.

The program will showcase five nominees across 10 award categories and feature them in a dedicated collection on Google Play. Nominees were selected by a panel of experts on the Google Play team based on criteria emphasizing app quality, innovation, and having a launch or major update in the last 12 months. The winners of each category will be announced at Google I/O in May.

The full list of categories and nominees are below:

Standout Startup

Apps from new developers that offer a unique experience while achieving strong install growth. And the nominees are...

Dubsmash
Hopper
Musical.ly
Robinhood
Vrse

Standout Indie

Games from indie developers that focus on artistic design, high quality and innovative gameplay. And the nominees are...

Alphabear
Alto’s Adventure
Fast like a Fox
Neko Atsume: Kitty Collector
Prune

Best Families App

Apps or games with family friendly design that encourage creativity and exploration. And the nominees are...

Card Wars - Adventure Time
LEGO Jurassic World™
My Very Hungry Caterpillar
Thinkrolls 2
Toca Nature

Best Use of Material Design

First-class implementation of material design concepts that deliver an immersive and innovative user experience. And the nominees are...

Bring!
Robinhood
The Fabulous
Todoist
Vevo

Best Use of Google Play Game Services

High quality games with several strong GPGS feature implementations. And the nominees are...

Sea Battle 2
Table Tennis Touch
Tapventures
TowerMadness 2
Zombie Highway 2

Early Adopter

Early adopter of a nascent technology or platform, providing a delightful user experience. And the nominees are...

Glide
Mechanic Escape
Minecraft: Story Mode
World Around Me
Zumper

Go Global

Apps or games with great localization and culturalization, or subject matter appeal, across multiple regions. And the nominees are...

Dragon Ball Z Dokkan Battle
Freeletics Bodyweight
Memrise
Musixmatch
Pokémon Shuffle Mobile

Most Innovative

Apps or games offering a highly engaging novelty experience or unique benefit. And the nominees are...

Fast like a Fox
NYT VR
SmartNews
The Fabulous
This War of Mine

Best App

A true representation of beautiful design, intuitive UX and high user appeal, quality and rating. And the nominees are...

BuzzFeed News
Colorfy
Houzz
TuneIn Radio
Yummly

Best Game

Games with strong mechanics, informative tutorial, broad appeal and tasteful design. And the nominees are...

Alphabear
Clash of Kings
Clash Royale
MARVEL Future Fight
Star Wars™: Galaxy of Heroes

Join us live at the ceremony on May 19th at 7:00 pm PDT on stage 7 at Google I/O or via the live stream. You can also track the conversation on Twitter and G+ using the hashtags #io16.

Android Developer Story: Travel app Wego, increases monthly user retention by 300% with material design

Posted by Lily Sheringham, Google Play team

Headquartered in Singapore, Wego is a popular online travel marketplace for flights and hotels for users in South East Asia and the Middle East. They launched their Android app in early 2014, and today, more than 62 percent of Wego app users are on Android. Wego recently redesigned their app using material design principles to provide their users a more native Android experience for consistency and easier navigation.

Watch Ross Veitch, co-founder and CEO, and the Wego team talk about how they increased monthly user retention by 300 percent and reduced uninstall rates by up to 25 percent with material design.


Learn more about Material Design, how to use Android Studio, and how to find success on Google Play with the new guide ‘Secrets to App Success on Google Play.’

Android Developer Story: Music app developer DJIT builds higher quality experiences and a successful businesses on Android

Posted by Lily Sheringham, Google Play team

Paris-based DJiT is the creator of edjing, one of the most downloaded DJ apps in the world, it now has more than 60 million downloads and a presence in 182 countries. Following their launch on Android, the platform became the largest contributor of business growth, with 50 percent of total revenue and more than 70 percent of new downloads coming from their Android users.

Hear from Jean-Baptiste Hironde, CEO & Co-founder, Séverine Payet, Marketing Manager, and Damien Delépine, Android Software Engineer, to learn how DJit improved latency on new Android Marshmallow, as well as leveraged other Android and Google Play features to create higher quality apps.



Find out more about building great audio apps and how to find success on Google Play.