Drop a line

Have a tip, or just want to say hi? Just use the form to the right!

           

123 Street Avenue, City Town, 99999

(123) 555-6789

email@address.com

 

You can set your address, phone number, email and site description in the settings tab.
Link to read me page with more information.

Shrinking Today Calendar with vector assets: (re)designing for purpose

All

Shrinking Today Calendar with vector assets: (re)designing for purpose

Liam Spradlin

Last night, Today Calendar gained a new batch of event illustrations and dropped 4MB from its APK size.

For those not familiar, Today Calendar has "daily decor," a growing set of custom illustrations that are triggered based on what kind of events a user has scheduled. If, for example, you schedule a "team meeting," Today will bring up an image relevant to meetings or business. This is a feature the redesign launched with in September 2014, with a collection of almost 200 keywords so far.

To achieve the drastic size drop, Jack and I transitioned all existing illustrations to vector assets, which are now supported in Android. Thankfully, this isn't a Lollipop-only feature. It's possible to back-port support for vector assets (SVG files converted to XML).

The effect was great, but the process came with its own challenges. Specifically, working with SVG files in mind (and file size as a primary goal as we continue to add images) required a different design approach. Where the old images indulged in textures I had created by digitizing paint marks and splatters, the new ones would need to eschew textures and shadows, opting for solid colors and the occasional change in opacity.

This was an interesting task. I could, after all, include the same splatter/scatter textures I used before, but it would defeat the purpose: encoding such textures as an SVG drastically increases the complexity of the file. Tons of code is generated for tons of tiny pieces of geometry. The file size balloons and performance can potentially take a hit.

The old illustrations had a free-wheeling approach of drawing the form and embellishing it however I saw fit (looking back there are many things I'd change), while the new illustrations needed to be purpose-built, more considerate, and refined.

The aesthetic would also need to keep color in mind, as we implemented Android's Palette API to theme relevant assets inside the "phase 4" event view. Since we decided to use each image's "vibrant" swatch to theme, I had to consider what that swatch would end up looking like, and whether it complemented or distracted from the interface and image themselves.

Left: Palette Helper by H.Z. Sweers

To further promote a harmonious aesthetic, I used a much narrowed palette. Specifically, I used the Falena palette released earlier this month. Having a simple and cohesive palette, excluding overtly vibrant colors, and focusing on negative space all helped improve the quality of the illustrations.

I focused on geometric, front-facing shapes (an inspirational point picked up from Google's old visual asset guidelines), and kept things simple. No complex mechanics, no overt indications of movement, and a lack of effort to force depth on the subjects all negated the need for textures, and made the need for shadows very rare. Where shadows were required, they were gestural geometric shapes, not realistically rendered gradients or complex textures.

In the end, starting the illustration re-do with a clear set of objectives in mind greatly helped the overall quality of the images.

The images now look better and function better - the file sizes are drastically reduced (giving Today a 30% APK size trim), and since the images are vectors, they'll scale to look perfect on any screen size, from a smart watch to your TV. Stay tuned.

To see the new illustrations, just head over here.