Google’s Material Design specification originally targeted the Android platform as a way to provide design consistency across the platform.
Once designers began to wade through and understand his mindset, Material Design quietly became one of the most influential visual philosophies in web and mobile design. All you need to do to see what we’re aiming for is search Material Design on Pinterest and you’ll see hundreds of examples and experiments across devices, tablets, and even websites.
An interesting aspect of Material Design is that Google thinks about how apps should appear and work on mobile devices, but these concepts apply to any screen, any size, on any platform. As Google states in the first paragraph of the specification, “We have set ourselves the task of creating a visual language for our users that combines the classic principles of good design with the innovation and power of technology and science. This is material design. This specification is a living document that will be updated as we continue to develop the principles and functions of material design.”
The material discussed in general terms is paper and the hallmark of Material Design is card. Think of an index card on the surface and you’re on the right track. A map is an element that contains photos, videos, text links, etc., but when they differ from most interactive designs, they are intended to focus on one subject. Maps have rounded corners, have faint shadows to indicate that they are above the surface, and if they are all on the same plane, they are called a ‘collection’.
In this “How To” we are going to create a map based on a specification. Instead of creating a map with different image and drawing tools, let’s look at it from a different perspective. We’ll be using the tools in Adobe Experience Design, which is currently only available in public preview for Macintosh and is free.
- Prototyping an artboard in Adobe Experience Design CC
- Add a Material Design map to an Adobe XD CC artboard
- Editing a material design element in Adobe Experience Design CC
- Add an image to a material design card in Adobe XD CC
- Using the grid feature of Adobe XD CC
Prototyping an artboard in Adobe Experience Design CC
There is no obvious way to create an Android screen from a home screen in Experience Design CC (XD). When we opened XD, we usually chose the iPhone 6 option, and when the interface opens, we choose Artboard Tool in the lower part Toolbars and select android mobile from the options in the Properties panel on the right. Then we switch to the selection tool, click once on iPhone Artboard Name and delete the drawing area.
The current version of XD has a small arrow next to the iPhone 6 that opens a drop-down menu when clicked. From there you choose android mobile version and the selected Android Mobile artboard will open in the interface.
To make sure we have enough screen space for the map, we usually go to sketch 3 and copy and paste the status bar, navigation bar and app bar from the material design template into the artboard. Sketch 3.2 includes the Material Design template ( File † New from template † material design ) and another really good free one from Kyle Ledbetter you can get here. If you don’t have Sketch, you can copy and paste the XD stickers in File † Open UI Kit † Google stuff † You can also download them from Google for use in Photoshop, Illustrator, After Effects, and Sketch.
Add a Material Design map to an Adobe XD CC artboard
One of the most useful features of XD is the inclusion of UI kits for Apple iOS, Google Material, and Microsoft Windows. In many ways they add the word “Rapid” to the term “Rapid Prototyping”. In addition, they make the designer’s job easier in the sense that common user interface elements do not have to be constantly recreated in a design application such as Photoshop, Illustrator. or sketch.
The interface element we needed was a map. To get there we chose File † Open UI Kit † Google stuff , and the bundle is opened as a new document. The element we need has been found in the category Cards †
What we like about them is that they adhere to the Material Design specification as outlined in the content block specifications, as well as the text formatting and spacing specifications as outlined in the Typography specification.
The map style we wanted was in the bottom left corner. We simply select it with the mouse and copy it to the clipboard. Unfortunately XD does not have a tabbed interface for open documents. What we do is lower the open document window a bit to show the window we are working on, select it and paste it. Another way to quickly switch between open XD documents is to click Team † ††
Editing a material design element in Adobe Experience Design CC
When a card in XD comes off the clipboard, don’t start having fun with it. The first thing to do is to ungroup the map because you need access to the bits and pieces that make up the map. To do this, select a card and select An object † Ungroup or and press Shift † Team † g.
Your map now consists of three parts:
Light gray photo box.
Medium gray box for text.
The back box is used as a background.
The first step is to remove the light gray box. Its sole purpose is to act as a placeholder for the image, making it optional if you so choose.
The text box is actually dark gray with 50% opacity. This box can be used as a text background and you can change the color and transparency of the box.
While it’s not immediately obvious, the light gray frame is in line with the Material Design spec as the top corners are rounded by 2px. Keep this in mind when adding an image. You also need rounded corners, which can be added to an image editing application or XD.
Since this is the resting state of the map, it also needs a shadow. The specification makes it clear that the height of the card is 2 pixels. To add it, select figure black background and set the Y and B (blur) values to 2 in the property bar.
Add an image to a material design card in Adobe XD CC
Knowing that the map is 344 pixels wide and the image area 150 pixels ( half the height of the light gray rectangle † We opened the image in Photoshop, cropped it to 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 a light gray box over the image on the timeline and selected An object † mask with shape † The result was an image that picked up on the rounded corners of the shape. We then moved the image to its final position.
After installing the image, we changed the background color of the gray box Medium, changed the text and color of the link text.
Using the grid feature of Adobe XD CC
Once the card is complete, it must be properly installed according to the Material Design specification. This means that there are 8 pixels on each side of the map and the map should be 8 pixels below the app bar. Click once on artboard name and further properties panel select Net † The grid appears above the drawing area.
The default grid size is 8px, which is the size of the Material Design grid. If you need a different size, change the value in the grid area. To change the grid color, click color chip and choose a color from the received Color palette †
When the grid is visible, click Map and move it to its final position.
To finish, we selected a card, pressed the button repeat grid and also changed the spacing between the cards to 8 pixels.