Looking good!

At Melon, we believe that a good product is a one that follows a formulated pattern that a user can easily get used to. With open source software development, the pattern itself can be shared as a library that contains elements, visual design queues as well as rules made to ensure consistent design throughout applications and collaterals. We’ve been exploring this at Melonport and have come up with Blocks — a UI pattern library for Melon.

Why build Blocks?

As the Melon project continues to grow, it’s become clear that we must agree on some systematic design rules that are agreed upon by the whole team. The idea here is to create a modular and flexible UI pattern library that not only looks awesome, but also makes it exceptionally easy to re-use said library in different places: The Melon Portal, the Melonport website, future Melon projects ;), presentation decks, etc.

Furthermore, this design system will allow us to reduce misconceptions and differing interpretations among team members. Future development speed will be increased thanks to the availability of ready-to-use elements within the design library.

Components for Blocks

The Principles

We built the Blocks design system with the following principles in mind:

Strong mobile capability

Based upon Material-UI

Maximize value of information presented per pixel

Reduce noise

Generally keep things clean, lean and professional

Before building something, it of course makes sense to do some research: What do we want to build? What is the functionality that we want to have? How can we create this functionality in the simplest way possible?

We defined all possible elements required. We described how a product will work entirely from the user’s perspective. We formulated our UI pattern library based on form elements, colour palette, typography, buttons, tables and a set of other necessary elements such as pagination, slider, popovers, lists, etc.

Ready to go assets

Tooling for Blocks

Sketch App React Git

There is one central Github repository which contains all assets:

Sketch Files

React Components

Styling

Documentation

Moving forward

Thus, an early version of our design system is born! We’re going to keep adding to it over time. Of course, software that’s finished is software that’s dead. By continuing to iterate upon this early version we can grow Blocks into a efficient, simple to use design tool for the whole team (and hopefully the broader Melon community) to use.