Introducing Blocks — A UI Pattern Library For Melon

Introducing Blocks — A UI Pattern Library For Melon 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 capabilityBased upon Material-UIMaximize value of information presented per pixelReduce noiseGenerally 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 AppReactGit There is one central Github repository which contains all assets: Sketch FilesReact ComponentsStylingDocumentation 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.