How to Create a Material Design Card in Adobe Experience Design CC

The Material Design specification from Google was originally aimed at the Android platform as a way to suggest consistency of design on the platform. 

01
of 06

How to Create a Material Design Card in Adobe Experience Design CC

The card template is shown on the right and the completed design is shown on the left.
Courtesy of Tom Green

Once designers started poking through it and understanding the thinking behind it, Material Design has quietly become one of the most influential visual philosophies in web and mobile design. All you need to do to see what we are getting at is to do a Material Design search on Pinterest and you will see hundreds of examples and experiments on devices, tablets, and even websites.

The fascinating aspect of Material Design is it is Google’s thinking around how apps should appear and work on mobile devices but the concepts are being applied to any screen of any size on any platform. As Google states in the opening paragraph of the specification, “We challenged ourselves to create a visual language for our users that synthesizes the classic principles of good design with the innovation and possibility of technology and science. This is material design. This spec is a living document that will be updated as we continue to develop the tenets and specifics of material design.”

The material talked about, in very general terms, is paper and a hallmark of Material Design is the card. Think of an index card on a surface and you are on the right track. A card is an element containing photos, videos, text links and so on but where they differ from most interactive designs is they are meant to focus on a single subject. Cards have rounded corners, contain faint shadows indicating they are above a surface and if they are all on the same plane they are referred to as a “collection”.

In this “How To” we are going to create a card based on the spec. Rather than create the card with a variety of imaging and drawing tools, we are going to come at it from a different direction. We are going to use the tools in Adobe’s Experience Design which is currently in a Macintosh-only public preview and is free. You can download it here.

Let’s get started.

02
of 06

Creating The Prototype Artboard in Adobe Experience Design CC

The Android template is open and the Artboard Tool and the artboard list in the Properties Panel are highlighted.
Use the artboard tool and an artboard template to get started. Courtesy of Tom Green

There is no evident way to create an Android screen from the Start Screen in Experience Design CC (XD). What we used to do when we open XD, is to select the iPhone 6 option and, when the interface opens, we select the Artboard tool at the bottom of the Toolbar and select Android Mobile from the selections on the Properties panel to the right. Then we switch over to the selection tool, click once on the iPhone artboard’s name and delete the artboard. No more.

In the current version of XD, there is a small arrow beside the iPhone 6 which, when clicked, opens a drop-down menu. From there you select the Android Mobile version and the Android Mobile artboard selected opens in the interface.

To ensure we have the proper screen space open for the card, we usually head over to Sketch 3 and copy and paste a Status Bar, Nav Bar, and App bar from the Material Design Template into the artboard. Sketch 3.2 contains a Material Design template (File>New From Template> Material Design) and another really good free one is from Kyle Ledbetter which you can obtain here. If you don’t have Sketch, you can copy and paste them from the XD stickers found in File> Open UI Kit> Google Material. You can also download them from Google for use in Photoshop, Illustrator, After Effects and Sketch.

03
of 06

Adding a Material Design Card to an Adobe XD CC Artboard

The Material UI Kit is shown and the card to be used is selected.
The UI kits are extremely useful in that they conform to the Material Design specification.Courtesy of Tom Green

One of the most useful features of XD is the inclusion of UI Kits for Apple iOS, Google Material, and Microsoft Windows. In many respects, they add the word “Rapid” to the term “Rapid Prototyping".  As well they make the designer’s job easier in that common UI elements don’t have to be constantly recreated in a Design Application such as Photoshop, Illustrator or Sketch.

The UI element we needed was a card. To get to it we selected File>Open UI Kit> Google Material and the kit opened as a new document. The element we needed was found in the Cards category.

What we love about these is they adhere to the Material Design specification as laid out in the Content Blocks specs as well as the text formatting and spacing specs laid out in the Typography spec.

The card style we wanted was the one in the bottom left. We simply marquee it with our mouse and copied it to the clipboard. Unfortunately, XD doesn’t contain a tabbed interface for open documents. What we do is move the open document window down a bit to reveal the one we are working on, select it and paste. Another way of quickly switching between open XD documents is to press Command-'.

04
of 06

How to Edit a Material Design Element in Adobe Experience Design CC

The three elements of the the card are separated on the artboard.
Each UI element added to an XD project is grouped. Be sure to ungroup the object before editing. Courtesy of Tom Green

When the card in XD arrives from the clipboard don’t merrily start working with it. The first thing you need to do is to Ungroup the card because you need access to the bit and pieces composing the card. To do this, select the card and select Object>Ungroup or press Shift-Command-G.

Your card is now composed of three pieces:

  • Light grey box for the image.
  • Medium grey box for the text
  • The back box used as the background.

The first step is to delete the light grey box. Its only purpose is to act as a placeholder for the image which makes it, if you choose, optional.

The box with the text is actually a dark grey with 50% opacity. This box can be used as the text background and you can change the color and the box’s opacity.

Though it is not immediately evident, the light grey box follows the Material Design spec in that its top corners are rounded by 2 pixels. Keep this in mind if you are adding an image. It will also need the rounded corners which can be added to an imaging application or in XD.

Seeing as how this is the resting state of the card it also needs a shadow. The spec makes it clear there is a resting elevation of the card of 2 pixels. To add this, select the black background shape and set the Y and B (Blur) values to 2 in the properties panel.

05
of 06

How to Add an Image to the Material Design Card in Adobe XD CC

The image is on the left side of the screen and the grey box has been used to mask the image.
One way of working with images is to use the placeholder to mask the imported image. Courtesy of Tom Green

Knowing the card is 344 pixels wide and the image area is 150 pixels high (half the height of the light grey box) We opened the image in Photoshop, cropped it to the size and saved it using the @2x option in Photoshop’s Export As dialog box. The image was imported into Adobe XD.

We then dragged the light grey box over the image on the pasteboard and selected Object>Mask With Shape. The result was the image picking up the rounded corners of the shape. We then moved the image to its final position.

With the image in place, we then changed the background color of the Medium grey box, changed the text and the color of the link text.

06
of 06

Using the Adobe XD CC Grid Feature

The grid overlay is shown over the artboard.
Use the Grid feature of Adobe Experience Design CC for precise placement of the elements. Courtesy of Tom Green ​

With the card complete it now needs to be properly placed according to the Material Design spec. This means there are 8 pixels on either side of the card and the card needs to be 8 pixels below the app bar. To do this, click once on the artboard name and, in the Properties Panel, select Grid. The grid appears over the artboard.

The default grid size is 8 pixels which happen to be the same grid size for Material Design.If you need a different size, change the value in the Grid area. If you want to change the color of the grid, click the color chip and choose a color from the resulting Color Picker.

With the grid visible, click on the card and move it into its final position.

To finish up, we selected the card, clicked the Repeat Grid button and changed the spacing between the cards to 8 pixels as well.