Brick by Brick: Save Time with Modular Design + Bonus FREE UI Library
At car2go, our own design library is deeply influenced by the Atomic Design method and we’re going to share how we adapted it to our needs. And yep, you can download it for free!
In a previous article, we talked about the design toolbox we use at car2go. The real magic though is how we can create and iterate on screens very quickly and cleanly. And that’s not because we’re particularly awesome designers, but because of the keywords ‘modular design’ — mainly shaped by designer Brad Frost’s Atomic Design philosophy.
Atoms for non-chemists
If you’re a designer or developer, you’ve probably heard of Atomic Design before. In short, you break down the UI into tiny pieces so that every page or screen consists of ‘atoms’. The advantage of doing this is that the interface becomes modular — like a puzzle, only not as confusing. It has changed a lot for us because it means we can now focus on producing good designs instead of trying to remember the hex color of our car2go blue (it’s #00A0E1).
An atom could be something like an icon, a label, or a button. Combine these atoms and you get a ‘molecule’, for example a search form. The search bar then makes up a part of an ‘organism’, and so on.
car2go_library.sketch
Inside Abstract, we have set up a ‘foundation’ project which contains a Sketch file with our icons and UI elements. This file can be linked across all other Abstract projects, so it’s available in basically everything we design. It contains all the atoms and molecules we have as Sketch symbols. When you use instances of those symbols in your actual screen designs, you can change the content by using Sketch’s override function. As complicated as the setup sounds, the result is highly flexible and totally worth the extra effort.
Atoms First
Let’s start easy with our icon set. Each icon has its own artboard, 40 by 40 pixels in size. For production, we make sure that outlines are converted and all layers were merged. After that, we remove the fill from the icon, mask the shape, and place a colored rectangle (which is also a symbol) on top. While this sounds unnecessarily complicated, it makes sure we can edit the icon color in the screen via overrides.
You’re totally my type!
Before we move on to create proper UI elements, let’s talk about typography. Company-wide, we use the DIN typeface because it has a lot of characters, not overconsumed and is slightly condensed which allows for more information on the screen.
To keep the typography consistent across all screens, we settled on concrete values for size and leading, and also created text symbols.
The way it works is that each font style and color has three separate symbols for left, centered and right text alignment. That leaves us with 84 text symbols in total (3 alignments, each with 4 colors, each with 7 styles). When those text symbols are embedded in other symbols, you can easily switch styles in the override menu. We also use grey colors for secondary text but instead of creating a new color for this, we just apply some transparency on the black text.
Atom + Atom = Molecule
Alright, let’s throw all this into the mix with some other atoms. Say we want to create a table cell that can have multiple items (icons, some labels, a chevron, a toggle and a divider line). And we should be able to override all elements in the final artboard. How do we do that?
This UI element contains everything we need. It’s all inside one symbol but can be customized in the instance by replacing texts or toggling the elements on or off as needed. So we can easily make it look like this:
Before this version, we tried an approach which included one symbol for each type of cell. However, that meant we ended up with a lot of symbols and it was a pain to find the right one to pick. Thus, we ended up building an all-in-one solution.
Admittedly, the override menu does look overloaded (and we are running out of meaningful emojis). But it does the job!
By replacing the placeholder texts with spaces, we can get rid of certain texts. Font styles can be easily changed via a dropdown menu.
The chevron is just an icon symbol which can be replaced by any other icon in the library since they all have the same artboard size.
Also there’s the toggle that can be turned on or off as wished and the cell can have one of three divider lines at the bottom which makes it a convenient separator in lists.
Bear in mind that this is only one element. We have a couple more of those that follow the same principle.
Bonus: Map pins
Another nice feature of the library is the way we build our vehicle pins on the map which consists of multiple layers. Each pin can represent either a particular car, a park spot, a fuel station, or a charging pole. Cars (and, to an extent, park spots) can have a neutral state, a reserved state and a filtered state and there can be special vehicles with the same states. A park spot also displays a small number next to it that shows how many vehicles are currently there.
All of these states can be represented with one single UI element and by toggling its variants on or off, however needed. The precondition is that the pins and icons need to be the same artboard size and must therefore be placed correctly in the symbol already. But if that’s done, you’re ready to just layer on all the toppings.
Use your time to come up with the best possible solution for your problem instead of wasting it on pushing pixels.
Having a UI system sorted like this has a lot of benefits. Depending on the size of your project it might or might not be worth having it as organized the way ours is. The biggest disadvantages are that setting it up takes a long time and tweaking something in the system could trigger a whole avalanche in your UI.
However, the advantages are worth the initial time investment in a long-term project. One big plus is that all the designers in your team will speak the same language while still being able to be creative and introduce new elements. You’ll now be free to use your time to come up with the best possible solution for your problem instead of wasting it on pushing pixels.
The best part? It’s available for you, too!
If you want to fiddle around with our way of building UIs or create your own foundation out of it, you can download a slightly edited version of our car2go UI library. It requires the Roboto typeface to work properly.
Help yourself:
👉 https://dribbble.com/shots/4392322-car2go-Sketch-library/ 👈
Feel free to build things on top of our library and share it with us. We’d love to see how it can be improved!
