Designing for Google Glass

Designing for Google Glass Jon Montenegro

With Google Glass coming out soon, I’m sure other developers and designers are curious about best practices. Google has suggested following the approved standard card design and templates. Below are some brief specs for Card regions.

Main Content
The main text content of the card is in Roboto Thin and is bounded by padding.

Glass dynamically resizes the font size based on the amount of content.

Full-bleed image
Images work best when full-bleed and do not require the 40px of padding that text requires.

Footer
The footer shows supplementary information about the card, such as the source of the card or a timestamp. Footer text is usually 26 pixels, Roboto Light, white (#ffffff) in color, and centered.

Status bar
The status bar has 3 states. Slider shows the current location in a set of cards. Progress or grace period shows progress or time to cancel an action. Candy cane animates in a loop while processing.

Left image or column
Left image or columns require modifications to padding and text content. See the left image and column templates for the complete grid.

Padding
Timeline cards have 40 pixels of padding on all sides for the text content. This allows most people to see your content clearly.

I have created a simple Photoshop template (for app development) which you can download below.
Download a Google Glass Photoshop Template