Jimdo Ui-Library

achieving ui-consistency
Html JSX BEM

From PSD files to save buttons: Consistency has always been a challenge in design. In a 7 Year old company it’s not hard to reveal inconsistencies in colors, buttons or behaviour patterns.

It all began a lot earlier with a compass extension that just stored color variables called Jimlib. Today the Jimdo Ui-library is the entry point for ui-development.

One small step

Where do you start with something so big? The first pattern of the library I've build, was also the first pattern integrated in the product. A slider.

A html input type slider, the bar is black the knob is blue.
Screenshot of the style section of jimdo

Internal open source

This project was born as a personal effort therfore it had no owner or responsible team. To make communication easy and delightful we treated it as an open source project. Everyone could participate, create issues, pull requests and merge stuff. Everything had to be documented aswell.  

We prioritised the ideas by the magnitude of the problem it would fix and came up with a lot of commitments: e.g. naming conventions, Sass rules and a commit message format.

Organisation, please

With more and more patterns coming to the party we quickly realised that we needed a shared vocabulary for different types of patterns. The atomic design methodology looked promising so we adapted it to our needs and used it.

Atoms are the smallest pieces, clusters are biggest ones.

Get people on board

The last big challenge was to make people realize that it's something that's handy and fun to use. Just like we want our product to be. For that purpose we created a public github page to demo the components and made it available for easy consumption with bower (later also with npm).

Screenshot of the jimdo ui-library slider

After establishing the ui-library we were able to built huge components with almost no custom css. This project sparked my passion for pattern libraries and I loved everything about it: The integration, the collaboration, the problems and the moment when it payed off.

Take a look at the Jimdo Ui-Library Demo

Want me on your Team?

I'd be happy to recieve an e-mail from you at hire@lassediercks.de