Home > Others > Sketch With Material Design

Sketch With Material Design

May 15th, 2015 Leave a comment Go to comments
Sketch 3.2 comes ready with a material design sticker sheet to give you a jumpstart on new projects.

In the past year, adoption of Sketch at Google, where I work at, has taken off and is now a widely preferred tool. The more tools in our belts, the better, so here’s my take on why Sketch and the new material design1 system are a great match.

Tools are an extension of our hands, and as such, they should be versatile, quick and intuitive. A lot has changed between the print era of offset presses and the digital era of cross-platform screens. Developers have attempted to adapt our tools, but Sketch is perhaps the most successful app in this regard — its creators have removed the bloat, started afresh and presented a smaller, fit-for-purpose feature set. What may seem on the surface to be a simple drawing tool in fact nails the core workflows of digital design.

2
Sketch 3.2 comes ready with a material design sticker sheet to give you a jumpstart on new projects. (View large version3)

The latest version of Sketch (3.2) ships with something special for those interested in Google’s latest visual design language: the material design sticker sheet. In this tutorial, we’ll design a test app with the help of Sketch and the material design sticker sheet.

Let’s Create a Notes App!

In this article, we’re going to make a very simple app — a notes app. Luckily for us, all of the components we need are already available in the latest Sketch app. These are the screens we’ll create:

4
The exported screens.(View large version5)

You can also download the Sketch file6 (ZIP) that was used to make this notes app prototype; it could help you along in the tutorial.

The Template

In our template — File ? New from Template ? Material Design — you’ll see a wide set of components, icons and layouts. The sheet itself was designed by the hardworking material design team at Google and has been ported with the love and care of Amar Sagoo and myself. The groups and objects are named, styled and organized in a truly Sketch-friendly way.

It All Starts With an Artboard

With your new document open — File ? New (or Command + N) — press the A key (which is a shortcut for the Artboard tool). You can draw an artboard just as you would draw a shape, a slice or any other object. That’s because Sketch has a simple set of objects that all work the same way (more on that later). When the Artboard tool is selected, you can see on the right side a list of artboard sizes, including — you guessed it — all of the material design sizes. Click on the “Mobile Portrait” size and a white box should appear.

Sketch 3.2 provides the material design sizes within the new Artboard tool.7
Sketch 3.2 provides the material design sizes within the new Artboard tool. (View large version8)

Sketch’s Killer Feature #1: Scale-Independent Exports

Note: Material design is defined using density-independent pixels9. As the Android Developers page explains10, a density-independent pixel (DP) unit corresponds to the physical size of a pixel at 160 DPI. Though we’ll be using pixel units11 (px) in this Sketch tutorial, these are really density-independent pixels because you can scale them up or down upon exporting.

In today’s world, you can’t depend on the same pixel density, so DP units allow us to talk the same language when dealing with different device layouts. Sometimes you may be compelled to work at double or triple pixel size because you want to match the pixel size of your surface — don’t go down that route.

Stay at 1x pixels and then just export at the upscaled sizes. Sketch makes that as easy as a simple drag and drop. You’ll see a panel in the bottom left showing you the sizes slotted for exports, and you can even add your own suffix conventions for file names. When you do an “Export All” operation (Command + Shift + E), you’ll see that artboard, and Sketch will export all versions of the bitmap.

Always work at 1× pixels. You can easily scale up or down in the “Export” panel.12
Always work at 1× pixels. You can easily scale up or down in the “Export” panel. (View large version13)

Now, head to the sticker sheet template and select the “mobile global elements” artboard. Only the important stuff there is selectable, so just click on that artboard and copy and paste into your document. You now have the basic layout of a mobile material design app. As you can see in the Layers panel, you have a group named “screen”. You’ll only need the contents of that group, so just go ahead and ungroup (Command + Shift + G) the “screen” group. You’ll now see four layers:

In the sticker sheet, you'll find some ready-made artboards that you can copy and paste directly into your sketch file.14
In the sticker sheet, you’ll find some ready-made artboards that you can copy and paste directly into your sketch file. (View large version15)
  • navbar
    This is a symbol (symbols in the Layers panel are marked with purple color), which means it will be the same everywhere, and if you change the contents of the symbol, it will change everywhere in the file.
  • status bar
    This is the top bar on the screen with Wi-Fi, time and status information.
  • app bar
    This is your main navigation header, which displays the name of the current page and a button to go up or open the drawer.
  • screen bg
    This is a background color, but it’s also a mask. You can delete this because your artboard will act as the mask for your screen.

Masks in Sketch Work… Upward!

In Sketch, masks work upward, meaning that layers above a masking object are cropped by that object. In Adobe Illustrator, however, you would place a shape on top of other layers to create a clipping mask; this threw me off at first. For more on masks, check Bohemian Coding’s documentation16.

If you move these layers around within an artboard, you’ll see that they are masked by that artboard. That’s the only case when an object that is higher in the Layers panel masks the objects below. Artboards always mask their contents and also house the coordinate space; so, an x value of 0 and a y value of 0 would mean the top-left corner.

Cards are a standard pattern and work well for heterogenous information.17
Cards are a standard pattern and work well for heterogenous information. (View large version18)

Let’s go back to the sticker sheet. Let’s grab the half-width card components19 and paste them in our composition. The suggested margins for these cards is 8 pixels, so go ahead and space them out.

Sketch’s Killer Feature #2: Hover Guides

One of Sketch’s most useful features has to do with spacing: Select an object, hold down Alt, and then mouse around to see distances from your selection to other objects. And holding down Command + Alt and mousing around will measure objects that are deep within the hierarchy relative to other objects contained in groups.

The floating action button is a unique component in material design.20
The floating action button is a unique component in material design. (View large version21)

Finally, let’s get the floating action button from our buttons components and put that in. It should be 16 pixels from the navbar and 16 pixels from the right side.

Great! So, we’ve got the composition for our first Material app. It’s a scrolling card view.

The Navigation Drawer

Navigation drawers provide navigation to primary sections within the app and global functions such as account switching and configuration.22
Navigation drawers provide navigation to primary sections within the app and global functions such as account switching and configuration. (View large version23)

To get around the various areas of our app, we’ll make use of the navigation drawer component. Let’s duplicate our original artboard: Click on the artboard in the Layers panel list or on the title of the artboard on the page, then press Command + D. This will duplicate the artboard and move the new artboard 100 pixels to the right. You can continue your flow simply by duplicating and modifying, which is what we’ll do now.

Grab the navigation drawer from the mobile artboard — the layer is called “side nav.” Paste it onto your new artboard. You can change the categories in the navigation, but the top area is reserved for switching user accounts.

Material Forms

Forms in material design morph. Depending on their state, placeholder text becomes labels.24
Forms in material design morph. Depending on their state, placeholder text becomes labels. (View large version25)

What happens when you tap that big plus button? Well, you should probably be able to make a note. Let’s grab some of the form’s components in the sticker sheet and make a new artboard for them. Here, we can make use of the keyboard, which is a symbol that can be placed whenever we need it. We’ll use the dark one to fit our dark app.

Reusing Artboards

Of course, after you’ve created a note, you should see it added to the card view. Let’s duplicate the first screen and add in our new note. Just click on the name of the artboard right above the artboard itself. Now that the artboard is selected, press Command + D. That will duplicate the artboard and move it 100 pixels to the right, perfect for quickly mocking up a flow.

You can duplicate artboards and they'll move to the right side of your flow.26
You can duplicate artboards and they’ll move to the right side of your flow. (View large version27)

Sketch’s Killer Feature #3: The Color Picker

Sketch provides a powerful color picker. Just press Control + C to select a color anywhere on the screen. Combining this with Command + click to click through to any element, you can easily recolor any object in no time.

The color picker is quick and accurate and can be used on anything on the screen.28
The color picker is quick and accurate and can be used on anything on the screen. (View large version29)

Covering The Tabs

Tabs are a great way to show different sets of content. In our app, we will have notes of importance and notes shared with others. Let’s make some tabs for “saved” and “shared” notes, with our current view being “all” notes. Jump back to the sticker sheet and click on the “tabs” component. Copy and paste that and position it next to the app bar. If you’ve grabbed the whole “app bar” tab from the sticker sheet, you’ll notice that it’s the wrong color. So, change the background color: Click through (Command + click) to the background of the tabs, and change the color to our main color. Move the tabs to the top, and you’re set.

Tabs allow for multiple views of the same content types.30
Tabs allow for multiple views of the same content types. (View large version31)

When copying components from the sticker sheet, you can take any level of elements. This means you can take a whole screen, just the components within or even just the icons. The tabs, as well as other components, have been prepared with a transparent background. Move within the “app bar” group and you’ll be able to copy the “tabs” group and paste onto any existing background. The advantage of a transparent background is that you will get the proper spacing around the component, but you can quickly place it on top of an existing background or toolbar.

Making A List

You’ll use lists a lot. They’re a fundamental component to any app, and material design gives us a number of options. We’ll have our “shared” tab contain a list view.

Copy the “three-line item” list from the sticker sheet and paste it in a new artboard. Ungroup the list and then just Alt + drag to duplicate an item, a set of items or a group. Do this until you have a full page of rows.

Lists are a common way to display collections of data.32
Lists are a common way to display collections of data. (View large version33)

Secondary Actions Are Shortcuts

You’ll notice a box on the right side of the list. This box is a secondary action. Tapping anywhere to the right of this action would open up that list item; but for quick actions (such as calling a contact or opening information about a document) you can use the secondary action. We’ll replace this placeholder box with a heart so that the user can quickly save notes.

In the sticker sheet you’ll find a small set of icons in the top left under “typography.” Grab the heart icon and paste it where the gray box is located. The icon should be in a group containing the heart icon and a transparent 24 × 24 box. This box helps with spacing, so make sure to grab the whole group.

Symbols allow us to quickly manipulate many instances of the same icon, component or even layout.34
Symbols allow us to quickly manipulate many instances of the same icon, component or even layout. (View large version35)

Sketch’s Killer Feature #4: Shared Symbols And Styles

Now, let’s make the row group into a symbol. This will allow us to edit its contents in many places at once. When you select a group, you’ll see a field in the toolbar that says “No symbol.” Click on this field and select “Create new symbol.” The name will default to the selected group’s name: “row.” Now you’ve got a symbol!

Symbols allow us to quickly manipulate many instances of the same icon, component or even layout.36
Symbols allow us to quickly manipulate many instances of the same icon, component or even layout. (View large version37)

Select each of the other row groups you’ve positioned on the artboard and, once again, click on the area that says “No symbol.” This time you’ll see your row symbol available for use; select it. Now that you’ve got a bunch of rows using the row symbol, when you change one, they will all change. Just like that, you have an interconnected set of elements.

Using our newfound power, let’s replace the heart with an overflow icon. The overflow icon is a set of three vertically stacked dots and indicates that more than one action is available. All you have to do is copy the “overflow icon” group (along with the padding) from the sticker sheet and paste it right beside the existing heart icon. Line it up with the heart icon, and then delete the heart icon. As you’re doing this, you should see the other rows automatically update. Yay for symbols!

With Sketch’s symbols, there is no editing mode. Symbols act just like groups and update immediately. This makes it easy to change symbols. Watch out, though: You may be editing a symbol in one place only to find that it has also changed in many other places across the canvas!

Symbols allows us to quickly switch out icons or whole compositions. But be careful: A change in one place will be reflected everywhere, even on other pages.38
Symbols allows us to quickly switch out icons or whole compositions. But be careful: A change in one place will be reflected everywhere, even on other pages. (View large version39)

Bottom Sheets

In material design, bottom sheets display a set of actions without covering the screen. These sheets emerge from the bottom of the screen, then drop back down when dismissed.40
In material design, bottom sheets display a set of actions without covering the screen. These sheets emerge from the bottom of the screen, then drop back down when dismissed. (View large version41)

In material design, bottom sheets are a great way for the user to take action without leaving the current context. These enter from the bottom of the screen and display a set of actions. In our app, the bottom sheet will be invoked when the user taps the forward icon in the top right.

Let’s grab the bottom sheet from the sticker sheet and paste it in a new artboard. Also, grab the scrim (semitransparent background) from the previous navigation drawer artboard and paste it behind the bottom sheet.

Dialogs When Needed

Dialogs can be used for stopping actions, but use them sparingly because they could be unnecessary roadblocks for repeated flows.42
Dialogs can be used for stopping actions, but use them sparingly because they could be unnecessary roadblocks for repeated flows. (View large version43)

As a last step, we’ll add in a dialog. This will be invoked when the user selects the delete action from the bottom sheet. In this case, we want to be really really sure that they want to delete this note. And finally, speaking of deleting, I encourage you to start fresh with your own designs. Sketch is such a quick program and material design is such an enabling guide that you can think big and different about how to delight users in your app. So, happy sketching!

Quick Start With Sketch Resources

Here’s a list of material design resources built for Sketch to get you up and running quickly:

Conclusion: Keep The Principle In Mind With The Tool In Hand

Thanks for walking through material design in Sketch with me and making an awesome notes app. We have not only learned a new tool, but also started on our way to a new design system.

One final note of caution: Sometime we focus on existing components and miss an opportunity to address our users’ needs in a new way. You can always check your designs against material design’s principles49:

  • Material is the metaphor
    A material metaphor is the unifying theory of a rationalized space and a system of motion. The material is grounded in tactile reality, inspired by the study of paper and ink, yet technologically advanced and open to imagination and magic.
  • Bold, graphic, intentional
    The foundational elements of print-based design — typography, grids, space, scale, color, and use of imagery — guide visual treatments. These elements do far more than please the eye. They create hierarchy, meaning, and focus.
  • Motion provides meaning
    Motion respects and reinforces the user as the prime mover. Primary user actions are inflection points that initiate motion, transforming the whole design.

Remember, no matter how good it looks, the greater focus is not on the pixels, but on the user. If your sight is true, all else will follow.

(mb, al, ml)

Footnotes

  1. 1 http://www.google.com/design/spec/material-design/introduction.html
  2. 2 http://www.smashingmagazine.com/wp-content/uploads/2015/05/01-stickersheet-opt.png
  3. 3 http://www.smashingmagazine.com/wp-content/uploads/2015/05/01-stickersheet-opt.png
  4. 4 http://www.smashingmagazine.com/wp-content/uploads/2015/05/02-allscreens-opt.png
  5. 5 http://www.smashingmagazine.com/wp-content/uploads/2015/05/02-allscreens-opt.png
  6. 6 http://provide.smashingmagazine.com/sketch-material-design.sketch.zip
  7. 7 http://www.smashingmagazine.com/wp-content/uploads/2015/05/03-artboards-opt.png
  8. 8 http://www.smashingmagazine.com/wp-content/uploads/2015/05/03-artboards-opt.png
  9. 9 http://developer.android.com/training/multiscreen/screendensities.html#TaskUseDP
  10. 10 http://developer.android.com/training/multiscreen/screendensities.html
  11. 11 http://en.wikipedia.org/wiki/Pixel
  12. 12 http://www.smashingmagazine.com/wp-content/uploads/2015/05/04-sizes-opt.png
  13. 13 http://www.smashingmagazine.com/wp-content/uploads/2015/05/04-sizes-opt.png
  14. 14 http://www.smashingmagazine.com/wp-content/uploads/2015/05/05-globalelements-opt.png
  15. 15 http://www.smashingmagazine.com/wp-content/uploads/2015/05/05-globalelements-opt.png
  16. 16 http://bohemiancoding.com/sketch/learn/
  17. 17 http://www.smashingmagazine.com/wp-content/uploads/2015/05/06-cards-opt.png
  18. 18 http://www.smashingmagazine.com/wp-content/uploads/2015/05/06-cards-opt.png
  19. 19 http://www.google.com/design/spec/components/cards.html
  20. 20 http://www.smashingmagazine.com/wp-content/uploads/2015/05/07-FAB-opt.png
  21. 21 http://www.smashingmagazine.com/wp-content/uploads/2015/05/07-FAB-opt.png
  22. 22 http://www.smashingmagazine.com/wp-content/uploads/2015/05/08-navdrawer-opt.png
  23. 23 http://www.smashingmagazine.com/wp-content/uploads/2015/05/08-navdrawer-opt.png
  24. 24 http://www.smashingmagazine.com/wp-content/uploads/2015/05/09-forms-opt.png
  25. 25 http://www.smashingmagazine.com/wp-content/uploads/2015/05/09-forms-opt.png
  26. 26 http://www.smashingmagazine.com/wp-content/uploads/2015/05/10-noteadded-opt.png
  27. 27 http://www.smashingmagazine.com/wp-content/uploads/2015/05/10-noteadded-opt.png
  28. 28 http://www.smashingmagazine.com/wp-content/uploads/2015/05/11-colopicker-opt.png
  29. 29 http://www.smashingmagazine.com/wp-content/uploads/2015/05/11-colopicker-opt.png
  30. 30 http://www.smashingmagazine.com/wp-content/uploads/2015/05/12-tabs-opt.png
  31. 31 http://www.smashingmagazine.com/wp-content/uploads/2015/05/12-tabs-opt.png
  32. 32 http://www.smashingmagazine.com/wp-content/uploads/2015/05/13-rows-opt.png
  33. 33 http://www.smashingmagazine.com/wp-content/uploads/2015/05/13-rows-opt.png
  34. 34 http://www.smashingmagazine.com/wp-content/uploads/2015/05/14-rowsSymbol-opt.png
  35. 35 http://www.smashingmagazine.com/wp-content/uploads/2015/05/14-rowsSymbol-opt.png
  36. 36 http://www.smashingmagazine.com/wp-content/uploads/2015/05/15-switchsymbol-opt.png
  37. 37 http://www.smashingmagazine.com/wp-content/uploads/2015/05/15-switchsymbol-opt.png
  38. 38 http://www.smashingmagazine.com/wp-content/uploads/2015/05/16-rowsSymbol-opt.png
  39. 39 http://www.smashingmagazine.com/wp-content/uploads/2015/05/16-rowsSymbol-opt.png
  40. 40 http://www.smashingmagazine.com/wp-content/uploads/2015/05/17-bottomsheet-opt.png
  41. 41 http://www.smashingmagazine.com/wp-content/uploads/2015/05/17-bottomsheet-opt.png
  42. 42 http://www.smashingmagazine.com/wp-content/uploads/2015/05/18-dialog-opt.png
  43. 43 http://www.smashingmagazine.com/wp-content/uploads/2015/05/18-dialog-opt.png
  44. 44 https://github.com/BohemianCoding/SketchTemplates/blob/master/Material%20Design.sketch
  45. 45 https://github.com/patrickkeenan/SketchTemplates/blob/master/Material%20Design%20Icons.sketch
  46. 46 https://github.com/google/material-design-icons
  47. 47 https://github.com/patrickkeenan/SketchTemplates/blob/master/Material%20Design%20Whiteframes.sketch
  48. 48 https://github.com/google/material-design-icons
  49. 49 http://www.google.com/design/spec/material-design/introduction.html#introduction-goals

The post Sketch With Material Design appeared first on Smashing Magazine.

Categories: Others Tags:
  1. No comments yet.
  1. No trackbacks yet.
You must be logged in to post a comment.