Going Material with Gravit Designer
Starting a new project is not always an easy task, but with the right tools in the right hands the work becomes a joy and the result will be very satisfying. Since we have the right hands, now all we need to do now is find the right tools. And if you’re a Windows user like me, there’s no better tool for UI design than Gravit Designer, whether you need to design a mobile app or maybe even a website.
Now let’s take a mobile app for example, more specifically an Android one. And if you’re new to Android app design, first you need to do some reading, even take some courses and often times you’ll end up landing on Google’s own Material Design website defined as “a unified system that combines theory, resources, and tools for crafting digital experiences”. Here’s a short explanation video you’ll definitely enjoy:
Tired of all the theory? Of course you are, we had plenty of that in school. Since practice doesn’t make us perfect, but better for sure, you’ll want to jump right into productivity mode. Going down the rabbit hole on material.io we find the “Guidelines & Resources” section with every specification we need, from Color Palettes to Layout Templates and even Shadows.
And what better way to start a new project than opening up the components sticker and take all the elements we need? We have stickers for Sketch, Adobe XD, After Effects, Photoshop and even Illustrator. But wait, where’s the Gravit components sticker? That’s right, there isn’t one, maybe in the future Google will release one, so in the meantime I went ahead and made one myself.
Gravit Material UI Kit
Taking inspiration from the official Google Material Design Sticker Sheet plus a few extra touches, the Gravit Material UI Kit was born. The kit is available as open source on GitHub and can be downloaded from here.
The great thing about this sheet is that it’s more than a UI kit, because besides the usual components we’ve also got screen guides and typography. So let’s dive a little bit deeper and take a closer look of some of the elements included in this kit.
Typography
Because we need to display written information all the time in our apps, we’re going to start with the typography specifications. Roboto is the default Android system typeface, but it is by no means the only typeface that works with the Material Design. Since typography reinforces character, the best typeface is the one that says something about the brand or the app we are developing. Even if it’s not my favorite typeface, Roboto works great in many situations since it’s a very versatile font with six weights from Thin to Black.
So it’s a great font to start with, that we can easily change later on using a neat feature in Gravit called Shared Style, but we’ll came back to this in a minute. There are all the basic font styles and sizes in this kit plus the recommended opacities for different situations.
Screen Guides
Next we find the Screen Guides, that are very important for aligning the UI elements on the screen. Here we have both vertical spacing rules and horizontal keylines and margins. To use these, just create a new document for Android (the template called Nexus 5 works just fine) and copy/paste the required screen guides group from the UI kit. All the Guides groups use the “Multiply” blending mode, so we can see through our current design that we’re working on.
Components
And since there’s no UI design without UI elements, the kit includes all the most important Material components like Lists, Grids, Notifications, Keyboards, Cards, Tooltips and more. All the components are nicely grouped and organized providing the user a fast workflow and an easy way to customize them.
Now that we have the proper “materials” to work with, let’s get back to our tool and see how Gravit Designer can make our lives easier while designing UI and make the whole process an enjoyable experience.
Using the tool
Like any great new digital tool, Gravit burrows nicely from established software but adds enough unique features to make it stand out from the crowd. This way it’s really easy to make the switch from a previous tool, especially when all the common shortcuts, tool and panels are already there. But by far the best feature is… cross platform. This means you can use your favorite UI tool either on a Mac or on a PC running Windows or Linux and if you don’t like installing new software then you can even use it right from the browser. Pretty neat, ha? Plus all the work you create you can save it in the Gravit Cloud for free. Now let me show you a few tricks where Gravit can make your life easier as a UI designer.
Shared Styles. Most UI apps use some kind of list to display repetitive information. Here’s where Shared Styles come in handy. Let’s say we have the inbox screen of an email app where we want to easily change the subject style for all the message. Just select the first subject, set the font properly and create a new Shared Style. Now we select the other subjects and apply the newly created Shared Style. Changing one subject will change them all. We can use this feature to create shared styles for any type of object since they can remember the object’s style, fill, border, effects or text.
Transform panel. Moving and duplicating objects is something we do all the time as UI designers, and to help us with these tasks, Gravit provides a nice panel with a lot of options. Let’s say you need to quickly duplicate and position an object after another. Really easy… just enter the coordinates and the number of copies and hit “Apply”, and you’re done.
Drop Shadow. The problem with older graphic design software is that they still use legacy effects, which are not easily converted to CSS. This can be a problem while working with web and app developers. In this case we have a smart implementation of the effects including our beloved Drop Shadow. All we need are 4 parameters and a color, and there we have a nice looking shadow. And if one shadow isn’t enough — since we need to add a pinch of realism to our design — we can of course add a bunch more until we get it just right.
One last trick I want to leave you with. Say we’ve created a nice looking button style and want to see how it might look on a different shape. Nothing can be easier. Select our styled shape and hit Ctrl+C (Cmd+C on a Mac) just draw a different shape — a circle maybe — hit F4 and you’re done.
And one last thing, I promise it’s the last one: Official tutorials. Crazy right!? To help new users adjust to the new tool, we have videos starting from the very basics to more advanced topics.
Hopefully you enjoyed the read and please make sure to keep an eye our for the latest version, as every new release brings new awesome features, improvements and of course bug fixes.
