How To Create A Google Cards Screen For An Android Device Using Sketch 3

of 04

How To Create A Google Cards Screen For An Android Device Using Sketch 3

The finished project created in Sketch 3.

As the proud owner of an Android smartphone I have always liked how I am able to swipe to the right from the Home Screen and a series of what Google calls “Cards” appear. These cards can be regarded as a piece of paper with specific data that allows the user to access more detailed information about the card’s subject. For example the cards on my device show me the latest weather, the route to my College, restaurants in my neighborhood and so on. Tap on a card and I am presented with more information pertaining to that card’s subject.

The interesting thing about these cards is though they may look easy to design, they are actually quite complex to create. They have, among other requirements, specific sizes, designs and placement on the screen. The full specification can be found in Google’s Material Design Guide.

Just a quick note: Though the specification expresses measurements in Device Pixels I will be using those numbers as though they were the pixels on my PC meaning there will not be a scaling factor applied.

In this “How To”, we are going to follow the Material Design specification to create a cards screen using Bohemian Coding’s Sketch 3. Sketch 3 is starting to establish a more prominent role in the construction of interface prototypes in the mobile space.

The process starts with a blank page.

Let’s get started!

of 04

How To Use Smart Guides To Build A Grid In Sketch 3

Smart Guides are added using the rulers in Sketch 3.

The first step in the process, after you launch Sketch 3, is to create an Artboard. In this example I will be using the 720 x 1280 dimensions of my Nexus smartphone.  To start, select Insert>Artboard. The properties panel will open on the right side and show you a number of templates. I selected Mobile Portrait in the Material Design area. This obviously didn’t fit.

To change the dimensions I clicked once on the Artboard name in the Layers panel and changed the properties in the Properties panel. I also changed the background color of the artboard to a very light grey - #EEEEEE.

The interface will contain a number of elements and each has a specific size according to the Material Design Specification, The elements, from top to bottom, are:

  • Status Bar: 48 px
  • App Bar: 128 px
  • Cards: 64 px from bottom of App Bar and must be a 16:9 ratio
  • Navigation Bar: 48 px

As well, the specification says there must be 16 px of space between the content and the right and left edges of the screen.

With this information in hand I selected View>Canvas>Show Rulers and View>Canvas>Show Smart Guides and started adding the guides that determine the placing of the various elements.

of 04

How To Construct The Google Card Interface Using Sketch 3

Start with the interface elements to ensure your design meets the specifications.

With guides in place, I next turned my attention to adding the Status and Navigation Bars as well as creating the App Bar.

The Status and Navigation bars are common interface elements and were added from a Nexus Lollipop template found in File>New From Template. There are a number of free templates available and the one I chose is a freebie available either as a PSD or A Sketch file from UXPin.

I opened the template and copied and pasted the both UI pieces into the document.

To create the App Bar I started with Insert>Shape> Rectangle and drew out a rectangle that was 720 pixels wide and 128 pixels high. The Material Design spec states: By default, the color of the status or window bar is a darker shade of the app bar color.  I chose a lighter blue - #039BE5 – as the Fill colour.

The specification is also quite clear about the placement of text and other items in the App Bar. I selected Insert>Text and entered Flowers to plant. I then set the text in 48 px Roboto White. This text has to be exactly 80 px from the left edge. Font choice is restricted to Roboto and Google makes this font freely available.

of 04

Creating The Cards Using Sketch 3

use the properties to ensure the card meets to Material Design specification for cards.

The cards are next and, again, there are specific guidelines regarding how they are to be designed. There are a number of practical examples presented with clear illustrations of the Do’s” and “Don’ts” of Card Design.

To start I selected Insert>Shape>Rectangle and drew out a rectangle to fill the area of the grid that will hold it. The two major considerations was cards are placed 8px from either side of the viewport and that cards have a cortner radious of 2 pixels and a slight shadow that suggests a card on a surface.

To accommodate this I selected the rectangle and, in the Properties, added the 2-px radius, a stroke to separate the card from the background as well as the shadow on the Y-axis of the rectangle.

With the card created I selected all of the elements for the card in the Layers panel and selected Arrange>Group Layers. This placed the elements in a folder, which I could then rename.