Designing A Machine Learning Compliance Product / Part 2

Picking a design language framework

Matthew Voshell
Design + Sketch
2 min readDec 3, 2016

--

Material Design

I had just completed a side project using Material Design by Google in an effort to try it out. Given that the existing UI of the client side project was a mix of Bootstrap and Material Design I assumed I could easily get away with going full-on material.

By establishing a design language framework at the beginning it allows the designers and the developers to operate in the same world. It helps in conveying user interface best practices and the rules for the given design world. Having a foundational agreement on this allows designers and developers to focus on design questions that matter and not on things like the shape of a button.

Color

I followed the client’s publicly available theme and built my color pallette around that. There are a few tools out there that can help you create this for you but there are two I’m particularly fond of;

Color palette cards created using Prism Sketch plugin

Typography

Given that I’d chosen Material Design as my design language I went along with the default Roboto font. It has a clean modern feel that I could also get away with in an enterprise environment.

Icons

Again, In an effort not to reinvent the wheel I often find relevant metaphorical meanings for the icons I use within the product. Most of them can be found in the base set offered by Google.

Components

For basic building block pieces I use the built in stickersheet provided by Sketch. I also use another component set I found on Sketch App Resources.

Up next is Part 3 where we discuss Agile sprints, User stories, & Atomic design

--

--