How To Create A Material Design Card In Adobe Experience Design CC

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.
The Adobe Experience Design UI templates will seriously reduce design time.

The Material Design specification from Google was originally aimed at the Android platform as way to suggest consistency of design on the platform. 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 I am 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 web sites.

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 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.

There is no evident way to create an Android screen from the Start Screen in Experience Design CC (XD). What I used to do when I open XD, is to select the iPhone 6 option and, when the interface opens, I 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 I 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 I have the proper screen space open for the card, I 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 uself in that they conform to the Material Design specification.

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 I needed was a card. To get to it I selected File>Open UI Kit> Google Material and the kit opened as a new document. The element I needed was found in the Cards category.

What I 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 I wanted was the one in the bottom left. I simply marquee it with my mouse and copied it to the clipboard. Unfortunately, XD doesn’t contain a tabbed interface for open documents. What I do is move the open document window down a bit to reveal the one I am 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.

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 to 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
  • 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 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 in 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 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.

Knowing the card is 344 pixels wide and the image area is 150 pixels high (half the height of the light grey box) I 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.

I 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 from the shape. I then moved the image into its final position.

With the image in place, I then changed the background colour of the Medium grey box, changed the text and the colour 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 placment of the elemnents.

With the card complete it now needs to be properly placed according to the Material Design spec. This means there are 8 pixels to either side of the card and the 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 happens 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 colour of the grid, click the colour chip and choose a color from the resulting Colour Picker.

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

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