At Whamix, we recently worked on a Fortune 500 client project. Our initial creative brief was all about a mobile design solution. We started researching Google Material Design for the same. After some initial research, we liked what we were seeing.
Theming with Google Material Design
We decided to take on the challenge and design with Material system. As the creative director my first goal was to think about branding and visual hierarchy. I wanted to make sure that the client's brand was extended into this new system.
We asked our client to send us their branding guidelines and corporate identity manual. Three things that were important right off the bat where the fonts, colors, and visual structure. After studying their online presence and branding guidelines I created a brand extension in Sketch. It was important to get their entire color library and font library in one place so that when our designers start implementing the design they have only one place to go to for final brand input. We created a library in sketch with primary, secondary, tertiary colors as well as spot colors. We also added buttons, angles, and gutter spacing in our library.
Our partial brand system applied to existing Roboto library.
Since we are not privy to share our ongoing client project, we created an internal fictitious project to help illustrate our workings on material design.
Color palette and type styling as seen in the above brand system image.
Typography on the web has been a bane of existence for designers. I have to say that I was pleasantly surprised when I came across the type system. This was exciting because now we could truly stay true to the brand and if needed we could add mobile specific typography into our new brand guidelines.
If you are a designer lucky enough to have worked in print and digital, there is one pet peeve, columns, gutters, and margins.
I have spent many hours sitting next to a frontend engineer moving pixels around so that each item started at exactly the same distance. This caught my attention - Responsive layout grid.
With design systems spanning from a mobile device to desktop marketplaces and retail stores, adhering to standards across all platforms is crucial. I have to commend material design team for thinking about responsive design and making it part of their overall implementation. However, here is the caveat, while a great potential strength, layout and grid options are not a part of downloadable tools just yet. We had to go through all the available documents and create a custom layout and grid system in Sketch for our project. this was very painful and time consuming.
Custom layout and grid styling in Sketch
For someone who is well versed in Adobe Suite, I do have some complaining to do. Working with the symbols in Sketch can be painful. And why is everything called a symbol? Editing type is not a symbol, editing an icon might be.
However, this might be a learning and growing pains problem and not a tool problem… but when you are working off of an existing library e.g. Baseline, as soon as you want to edit anything at all, you double click on the element and it opens a new window, here the toolbars are very complicated for simple edits. When you are in your design and want to make an edit, a new window opens up, in there you have to double click to make the actual edit, which means, yet another window opens up. And the toolbars on the right of the screen have words like Prototyping and Overrides, not very conventional design language. And nether is the actual editing within each section. You have to nudge and fine tune so many pull down options for one minor edit.
At the moment there is no support for any Adobe tools. I would like to see more cross pollination with Adobe Suite. In the long term, if this tool is aimed for designers this will be a factor.
Entourage of levels within levels for one edit
Would I encourage my design team to design with Material Design again, yes I would but the complex toolbar and not so efficient way to make edits does worry me. I understand that we are working in a responsive environment thus each element has to be independent and editable. But the number of layers within layers this creates, is a problem for me. I would have to add time in my design resource budget to account for client based theming. I do like the crisp look of the finished product and the accountability that things will look exactly as I had planned but at the end of the day I do see this as yet another tool in the ‘designers’ toolbox. Since we will be at the mercy of plugins, it will really depend on how Google Material Design, Sketch and other plugins can work with each other to bring us a seamless solution.