Prototyping with Material Design

At Digirati we’ve been taking a Material Design approach lately on a few projects for our cultural heritage clients. Material Design is a design system and library of components that designers and developers can use to assemble user interfaces, without having to design and code everything from scratch.

Typically we use it to create prototypes, where we just want to get up and running for a proof of concept. But we’ve also found a use for it when working with limited budgets, where we need to produce a product with a polished look and feel with components that have already been thoroughly tested.

Start with research and ideas

We start our projects with research and small workshops, so we understand the business and user goals for the project. This will then lead to the UX team producing sketches (possibly wireframes) to rapidly iterate on user flows and ideas for the product.

Initial sketches for Indiana Timeliner pilot, an annotation tool for music teaching and analysis

We can then move into a workflow where we can start development and UX Design simultaneously.

Design and build with Material Design

We’ve been using Adobe XD as a design and prototyping tool, and not only is it a great modern UI design tool but working with it helps bridge the gap between design and development.

Key features that we love:

• You can download Material Design UI kits
• Produces a style guide for each project for consistency
• Responsive features allow you to design across breakpoints
• Export as documents into the cloud for developer feedback and hand off

Examples

UX Design for Indiana Timeliner

O'Shaughnessy Memoirs, an interactive timeline viewer for the University of Galway

Our experience

With Material Design you get ready-made high quality components and a design system that has been thoroughly tested, and is easily configurable and theme-able. Of course it has it’s limitations too, but for many projects these are outweighed by the benefits:

Pros

• Ready-made design system
• React components
• Tested
• Theme-able
• Responsively designed

Cons

• Component design sometimes too bulky for editing lots of data
• The number and styles of form elements available is limited
• The look and feel will not be totally unique to your brand

Using Material Design as a design system allows us to do pilot projects with modest budgets, which can then be progressed in subsequent phases when there is proven demand for a comprehensive product requiring a complete custom design and build.