Our graphic designer Bas discusses the benefits of using an Atomic Design-based component library in this post. — continue reading
Our graphic designer Bas discusses the benefits of using an Atomic Design-based component library in this post. If you are not familiar with Atomic Design by Brad Frost, then learn the about using an Atomic Design with Open Social. this topic begins with a discussion of elements and components. For example; an element is a button (Atom). A component is a complete part of the software or website, an example of this is a footer or teaser (Molecule or Organism). Let’s dive in!
A component library
A component library is a cloud-based folder that consists of all the designed/styled parts of a website or piece of software. It helps designers to work in a consistent way and becomes very time efficient when executed correctly.
A component library is structured in the same way as a front-end developer would theme a website. The component library exists of atoms, molecules, and organisms. If we need to design a full page, we pick the components from the library. It’s like a puzzle, all the parts are there, and as a designer, you need the combine them.
Obviously; instead of only combining parts, the designer is also able to customize or create new parts. You don’t lose creativity by using a component library. It is true, however, that you trade in a bit of freedom for consistency and speed.
Six advantages of a component library
1 – Collaborate efficiently
Working with a component library helps your designers work as a team on designs. Besides improving collaboration between UX, UI and visual designers it will improve the collaboration with front-end development. If a designer needs to design new components, they will start by checking the library and gathering all the elements necessary for creating a new component. If there are elements missing because they are new, the only thing the designer needs to design are the new elements. Then the designer just needs to combine everything with the new element and the new component is there! If the front-end team integrates the library into their workflow as well, the process of implementing will start right after the designer adds the components to the library.
2 – Staying consistent
A huge risk in designing software, website or products with multiple designers is consistency. If multiple designers work on a product and there are no libraries or strict guidelines, the design will become inconsistent: 100% guaranteed 😀
For example; if you use a primary button, it should always look the same to keep the usability as high as possible. Other designers will let their creativity decide how a button will look if you don’t work with a library. Instead of using the same button for a similar interaction there will be multiple designs for just one button. We most often see this happening at the start of projects, but after a while it is critical to even this out and create consistent styles.
3 – Extending the library is fun!
Extending the library is fun and easy! To set up a library is the hardest part because you need to start from scratch. Extending is fun because it works easy and fast, and all the basic elements are already there. So you don’t need to decide which font you are going to use or how a button should look. As a designer, you only need to focus on the elements that are new: designing the part that makes the puzzle complete and perfect.
4 – Customisation & flexibility
When you are customizing a design you don’t want to recreate the design if the structure is already there. It will cost a lot of time for a designer and it also will have a huge impact on development. For Open Social, we are always searching for simple and effective design solutions that have a positive impact on the look and feel but don’t have a negative impact on the interaction design.
A component library helps designers to stick to the guidelines of your product and it has less impact on development. Instead of recreating components you are reusing components. Easy customization will help designers to be more flexible. For example: if the client is not happy with the new button style, a designer can change the master button style in the component library. This will affect all the buttons that are synced with the library. This way a designer can spend more time on thinking and designing a new button, instead of spending a lot of time on replacing all the buttons with the new style 🙂
5 – Improving on designs with iterations
Designing a product or website is also about improving designs. At a certain point, the main elements will have been created and you can focus on improving the readability and usability. Improving doesn’t always mean reinventing a functionality but often it means iterating on small things to make it better. This could be the use or omission of color and by creating more distinction in an element. Small details that have an impact on multiple components can make improvements overall. A huge advantage of using a library is that improving a design or a specific element will affect all previously made designs, so everything is always up to date.
6 – Sketch app & Craft Library
To set up a cloud-based component library, there are different tools you can use. At Open Social we use Sketch app and the craft plug-in. We’re using Sketch app to create hi-fidelity component designs and craft for syncing and categorizing all the elements. In Sketch we create and maintain/improve font styles, colors, layer styles, and all other elements. For every element, we create a symbol. In Sketch a symbol is some kind of master style of a certain element; if you change the style of the symbol it will be changed everywhere. The symbols can easily be synced with Craft Library, so it will change in all the files (if you want) where you are using this element.
Conclusion
Using a component library will improve consistency and let designers work together. In the end, designers will use the same workflow as front-end development which increases collaboration and efficiency. For a designer, it’s easier to create iterations with small changes, create new components, and always work with files that are up to date – which all comes from an Atomic Design!
We already use these methods to stay consistent and work together on our software with great success. Our next step is opening up our design libraries so others can collaborate on our designs as well.
Contribute to Open Social or Drupal!
Feeling creative? Contribute to Open Social and/or Drupal! A good starting point for contributing to Open Social is the Open Social Documentation Guide. If you want a starting point for helping Drupal to grow you can find many different ways on the ‘ways to get involved’-page on Drupal.
Ready to take your community experience to the next level? Download the guide below:
