Here at Vizibl we always want to optimise the way we work. We’re always looking for ways we can build new quality features, at speed, for our customers. One of the main tools in our arsenal is to always design new features with a components based approach in mind.
The main three philosophies we adhere to when designing at Vizibl is the Atomic Design Methodology, fitting everything to a 4pt Grid and finally Sketch Symbols(Reusable Components).
I’ve been utilising these 3 steps at Vizibl from day one. The first feature I tackled when I came on board at Vizibl was a new side nav for the platform. This was all designed to align with the 4pt grid, and built up piece by piece as individual parts in our design library. First as Atoms, which were merged to make up Molecules and these finally all combine into an Organism. Each part can be effortlessly reused over and over again elsewhere in the app where required, saving time while also facilitating design consistency.
Here’s a breakdown of how the side nav was built up:
“We’re not designing pages, we’re designing systems of components.”
– Stephen Hay
I first read about the Atomic Design System back in 2015 when reading an article Brad Frost wrote on the subject. The article really resonated with me and I immediately started designing products following the methodology. I found it to be a really effective approach and continued to adhere to it when joining Vizibl and the team today designs using this method.
By embedding this system into everything we designers at Vizibl work on it ensures that our team isn’t reinventing the wheel for every new feature, saving time and as a free bonus also facilitating design consistency.
This system allows us to quickly and easily build up sets of components that we can reuse again and again across the Platform. Not only does this reduce the time it takes to design new features, but it also reduces the Engineering teams development time as they too can reuse already developed components.
Of course sometimes there is a need for completely new UI elements to be designed, but all new designs get fed into the Atomic Design System so they can one day be used again.
I will cover some of the basics here but if you want to dig deeper I recommend reading more on Brad Frost’s website: Atomic Design by Brad Frost
User interfaces are always made up of lots of small individual parts, such as buttons, inputs, icons, text labels and more. Think of these individual components as Atoms. These Atoms don’t serve much purpose if left on their own, but when using these building blocks together you can quickly assemble complete Software Products.
Atoms can also include more abstract elements like fonts, colour palette, and can even cover more discreet aspects of an interface such as hover animations.
If we use some of our Atoms together to build something more advanced we create a Molecule. A molecule is a collection of atoms that can be stuck together and reused throughout the user interface.
A simple example of this would be looking at a Search Bar type component. By combining several Atoms we are able to create a Search Bar Molecule that can be used anywhere across the platform, following the same design rules each time.
Finally we have an Organism. This often contains a mix of Atoms and Molecules that are commonly used together across the platform.
A good example within Vizibl would be our Action Bar component. At its base level the action bar is a container of a fixed height and responsive width with a search bar and a button. This organism can vary slightly and adapt depending on where it lives and what options are necessary but the main structure is always the same.
At Vizibl we design everything to a 4pt grid, this was something I had used previously and wanted to continue to advocate for at Vizibl. Desktop software can have fairly dense interfaces so users need to be able to easily scan the page so they can complete their goals quickly and effortlessly.
This is why a 4pt grid works so well. It facilitates a great scaling of interface components so they fit alongside one another. It gives a nice and simple set of rules for spacing, margins and paddings throughout the platform, which helps keep everything neat, consistent and easy to scan.
It also speeds up the design and development process as in the design team we follow these simple spacing rules and the developers know the components can always be coded following these consistent spacings too.
By following the Atomic Design Methodology, the 4pt Grid and saving everything in our Sketch library we make sure we design everything with consistency in mind. We can use these components anywhere on the platform, with only minor tweaks where necessary to fit the final feature being developed.
A good example of this is our List Component (which really kickstarted our use of components across the platform). It started out as a redesign of our Project Cards. I wanted to provide a more condensed view, so that we can fit about 12 Project cards on screen at once instead of 3 and give as much information possible at a glance when comparing against other Projects in the list.
To do this I minimised the cards to a single row with clear columns to provide a structured layout when scanning the page. By adding drop-downs to each column even more detailed information than before could be conveyed, and we could even allow users to take actions from the list itself without having to leave the context of it. Previously users would always have to open a project to make any changes.
Since building this feature the atoms, molecules and organisms developed for it have been added to the library and continue to be reused for other purposes across the platform, as highlighted here:
This is just one example of how we maintain consistency across our app by focusing on designing with reusability in mind.
In my next article I plan to write about how we used this approach when redesigning all our modals site wide. I’ll highlight our approach and how designing with consistency and reusability in mind saves tons of time for both design and engineering, so stay tuned for that!
Published April 2020.
