Tilt UI Kit

Tilt is a UI kit and visual and interaction style guide designed with spacial awareness in mind. This was my first delve into the Design Systems world, and this project was part of why I was hired to work on the Bixby Design System (Bixby Views). While only presented in a mobile phone format, Tilt is designed to be versitile enough to work well for any product, on any device, in any environment. It was carefully crafted to effectively convey information on a clear visual hierarchy, make interactions clear and explicite, and have a clear and easy to look at color palette. Along with being a clean and easy to use UI kit, it was built for prototyping and works perfectly with the prototyping tool Pixate, as well as Principle and Framer. The goal of this style guide that clarifies information and engage the user with natural-feeling spacial awareness.

So, if you haven't yet downloaded the kit you can do so below, then come back and continue reading.

Go to Tilt website

UI Hierarchy

Tilt is built on the principle of using 3D space to represent hierarchy. Interactive elements are presented with clear yet subtle shadows and are best implemented to respond to a device's accelerometer to create a three-eimensional feel, similar to current iOS versions. So as not to overload the user and maintain a consistent hierarchy, your design should be constrained to four levels:

Base level

Core information of the page rests here. This is information that is not changable or directly interactive, like cover photos, numeric inputs for calculators and phones, time, and other core information. We see examples of this on the audio recording app. The layer level is highlighted to the right.

Content level

Main content is presented here in the form of cards. You would typically find scrollable cards on this level.

Engagement level

This is the level for primary interactions. This level contains navigation bars, action buttons, interactive icons, profile photos, and graphs. If you tap something on this level, it will either perform a primary action or change the screen view.

Top level

Action sheets, photo/video theaters, and overlays are best here. On this level, a blurred white scrim separates the sheet from the content below to separate it from the content below.

Typography

This kit was built with iOS in mind and therefore uses Apple's SF UI Display. You can change the typeface by updating the text styles.

Color palette

The default color palette is shades of blue but there are three additional recommended palettes available to choose from: Dark, pink, and purple. To find these, click on the color palette in the components section at the bottom of the kit and hide/show the other palettes within the group layer list.

Primary palette

This is the main color palette and shouldn't be changed. Light, easy to look at off-white functions as the primary backdrop, and soft dark greys and blues color the text and iconography. It is not recommended that you change this – but if you do, keep contrast high but easy on the eyes.

Information palette

This color palette is used for data visualization that has multiple layers overlaid on each other. It is recommended on mobile screens that you don't use more than three data measurements with these graphs so as not to overload the small charts with too many similarly-colored sections.

Data gradient

This is best used for flat spreads of data, like bar graphs and filled line graphs.

Iconography

Iconography is basically free reign but I do suggest only using filled mono-toned icons, not outlined or multi-colored icons. This makes it easier for the user to understand and keeps the interface clean.

This is the level for primary interactions. This level contains navigation bars, action buttons, interactive icons, profile photos, and graphs. If you tap something on this level, it will either perform a primary action or change the screen view.

Animations

Politiclear also comes with a mobile app to take into the voting booth. Every candidate and measure page has a voting button that lets the user mark their opinions which is then reflected in the app. This simple app can be taken into the booth to allow the user to quickly review their stances to vote.

Base level scroll fade

Add a Fade animation based on the scroll container's scroll position. Limit the scroll range to begin at 0 and end whenever you feel is best (if you have stacked cards I suggest having the fade complete before the gap in the cards goes over the fading content). Leave the scroll direction as vertical and fade to 0%. Then, add a Scale animation and also base it on the scroll container's scroll position continuously with rage and limit it's scroll range beginning at 0 while leaving the end blank. Change the rate to -0.0005.

Content level

To create a scroll container, make a new layer by pressing on the "+" icon above the layers pannel in Pixate. Size the layer to whatever size you need and then add a Scroll animation. Place your card background and shadow assets on the canvas and align the two layers vertically and horizontally centered. Move the card shadow down 5px (if using @2x pixel density) so as to mimic the 10px Y axis offset in Sketch. Group the two layers together in a container and place the group inside of the scroll container.

Interaction level

To create high level interaction buttons that have dynamic shadows you must use Sketch to export two versions of the same asset: One without a shadow, and one with a shadow. Group the two assets in a container and place it accordingly. Use Fade animations on the shadow layer to control depth perception and use Move and Scale animations on the parent container to animate the whole element.

Top level

For top level items, the most important aspect is the blurred scrim. To get this, simply draw a rectangle over the content in Sketch, remove the border and change the fill to #FFFFFF with 30% alpha fill. Then, change the blur selection from Gausian Blur to Background blur and set the amount to 20px. Export the layer and import it into Pixate. To hide the layer, turn the opacity to 0% in the layer properties panel and use a Fade aniation to make it appear when necessary.

Tutorial

If you would like to watch a quick tutorial on how to prototype the base elements in Pixate, check out the video below.

Thanks for reading

If you like this project and want to see more, check out my full portfolio. If you want to connect with me, you can find me on these platforms.