Using Material Design tools

In a previous blog post I described how material design can be used to create user interfaces. Material design is has been described as a language or a system for describing and creating user interfaces. In the video below you can see a number of Google employees attempting to describe material design. One of the odd aspects of material design is that it’s difficult for even its developers to accurately define, in part because it is more of a visual language than it is a written language and the language itself can be translated into specific implementations for different platforms like Android, iOS and web.

At this year’s Google IO developer conference, Google announced the release of Material Design 2.0. This release included new Material Design Components (MDC) for Android, IOS, Flutter and the Web. And although these toolkits are still a work in progress, you can clearly see how Google plans on making it easy for developers to create user interfaces that are consistent across all platforms and are intuitive for users.

With the release of Material Design 2.0, Google also included a number of tools to make it easier for developers to add material design components to their projects.

Material Sketch Plugin

The Sketch application is one of the premier applications for designing mockups for user interfaces. At $99/year, it won’t break the bank, and will provide you with an easy way to create professional looking user interface designs that you can use as part of your prototyping exercises in Design Sprints.

Google released the Material Design Sketch plugin which provides designers with material user-interface widgets that they can use in their designs.

Material Gallery

The Material Gallery web page provides an easy way for designers to share their designs with the rest of the team. Users and developers can comment on the designs just as you would comment on a Google Doc or Google Sheet. This is a great way for your team to firm up a prototype before starting the coding process.

Material Theme Editor

Material Design is intended to be flexible and to allow design and development teams to customise the look and feel. The Material Theme Editor makes this easy to do; however, there is one caveat with this. Currently web components are not themeable. There is a specification making the rounds to address this, but it’s still very much a work-in-progress. That said, the Theme Editor makes it possible for you to style components to suit your needs. You can create a style guide for research applications in your organization which is easy to follow by any developer. The Theme Editor, available here, gives you a way to create shareable themes. These themes can incorporate colors, typography and icon sets.

Applying Material Design In Research Components

One of the most common questions that we see is “how do I make my component more material-like”. This question occurs most frequently in cases where you’re building a bespoke bioinformatics component which may have no analogue in the material world. For example, let’s suppose that you want to create a component to display a biological network. You might start by taking a look at the Cytoscape component found in biojs.

The key successfully implementing a material version of this is to return to first principles used to design material components and ask yourself the following questions:

Does the component allow me to style text for nodes? Typography (fonts, font weights, font size, text spacing, font colour) all play a role in readability, but also help us understand the relationship between higher-level objects and lower-level objects. Typically a higher level object, uses a larger font; a lower-level object a smaller font and perhaps a lighter font colour.

Can I progressively hide detail and reveal it as needed? For example, you might start by displaying a variety of nodes that represent disease processes in cancer. You might indicate that the nodes are expandable using an appropriate icon on the node. When the user double-taps on a disease process node, the node should expand to display a network of interacting proteins for that process. This process of progressively revealing more detail makes it easier to tell a story, and diminishes the amount of cognitive load that a user has when confronted by a “hairball network” (yes, that’s a thing).

Does the application need to be responsive? In web parlance, a “responsive” app is an application that adjusts its layout in response to changes in the display of the application. For example, you might have an application that renders the display one way for a mobile application and another way for a desktop application. In Web 1.0 world, companies often created “m-dot” sites (the name comes from the habit of creating a site specifically for mobile traffic called “” and serving an entirely different codebase). The flaw in this strategy is that you have to maintain a separate codebase for mobile and desktop. In an enterprise setting, bandwidth is less of a concern. That said, many pharmaceutical companies are making use of tablets and mobile devices in a lab setting, so having responsive web applications is becoming a more important aspect of the work.

In our case, we want to want to have an application that can be displayed on both mobile and desktop screens. To do this, we can use a card-based layout for mobile devices, and a network-based layout for tablet and desktop displays. We use a progressive reveal approach to the design so that just enough information is displayed. We use a common model for both the network view and the card-based view.

To learn more about how we can help you with your informatics project, contact us.


About Mark Fortner

I write software for drug discovery and cancer research scientists. I'm interested in Design Thinking, Agile Software Development, Web Components, Java, Javascript, Groovy, Grails, MongoDB, Firebase, microservices, the Semantic Web Drug Discovery and Cancer Biology.
This entry was posted in Bioinformatics, Drug Discovery, Informatics and tagged , , . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s