Introducing Blocks — A UI Pattern Library For Melon
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.
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.
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.
Ahmad S. Afandi
Ahmad is a passionate UI / UX Designer with a background in Computer Science at UIN Yogyakarta, Indonesia. With more than half a decade of experience in web and mobile design, Ahmad has a strong focus on unique compositions and user experience. In 2012, he built a non-profit sharing platform for book lovers in Indonesia called Lendabook. Lendabook’s aim was to make it simple to share books with like-minded individuals. It eventually went on to win the World Summit Youth Award 2013 organized by ICTA.
Twitter — https://twitter.com/peterdraw
Github — https://github.com/peterdraw
