Why Material Design

front end
style
web
We aim to utilise existing CSS or UI frameworks instead of building from scratch so Seedcase software products will look good with minimal effort. Since Material Design lives up to these requirements, we have chosen this framework for our software.
Published

December 15, 2023

Context and problem statement

The front end of Seedcase software products should look good with minimal effort. Therefore, we aim to utilise existing CSS or UI frameworks instead of building from scratch.

Decision drivers

The UI framework should:

  • Be aesthetically pleasing.
  • Integrate well with Figma. The wireframes in Figma should be easy to reproduce in Django templates.
  • Be easy to use with Django. Since we use Django and it is a Python framework, we don’t want to rely on frameworks that require node/npm or too much JavaScript. Preferably, we want a CSS framework, where CSS classes can be directly added to HTML elements.
  • Have a great documentation and community.

Considered options

We have considered the following:

Bootstrap

Bootstrap is one of the older and more widely used CSS frameworks.

Benefits

  • Widely used, lots of support and community
  • Great integration with Django through the Python package django-bootstrap5

Drawbacks

  • Harder to customize individual components (for example, a button)

Material Design

Material Design is a popular framework designed by Google.

Benefits

  • Has multiple implementations, like Materialize Web and BeerCSS that works well with Django
  • Prioritizes CSS over JavaScript
  • Very customizable
  • Looks very aesthetically pleasing (backed by the strong design community within Google)
  • Figma (which can be used for sketching out the UI) has great support for Material Design

Drawbacks

  • Has multiple implementations, which might take time to decide on

Tailwind

Tailwind is a popular framework that allows a high level of customisability.

Benefits

  • CSS only
  • Very highly customisable

Drawbacks

  • Requires time and skill to customize
  • Relies on Node.js (via npm) which is an additional dependency and needs time to learn to use

Bulma

Bulma is a simple CSS or Sass only framework.

Benefits

  • Seems relatively easy to use

Drawbacks

  • Requires Node.js (via npm) to install

Decision outcome

We decided on Material Design because it has great integration with existing UI/UX (like Figma), looks amazing (has the design team at Google backing it’s development), is widely used, and customizable.

Consequences

  • There is better Django integration with Bootstrap, so we might need to spend some time properly integrating Material Design