From Atomic design to your Liferay project

I would like to start saying that this entry is focused on designers and front-ends but I think that it would be useful for all people who wants to know what is the real advantage to applying Atomic design.

Part of this entry is about Liferay themes, so I have to say that for me there are three approaches to turn visual designs in a Liferay theme:

  1. Close to bootstrap system: like a bootstrap extension, for example: Lexicon has been built under this approach.
  2. Freestyle over custom.css: the most common way, “do not look back” your style and your tecniche over Liferay, example: my free themes.
  3. Applying Atomic design principles.

All of them are perfectly valid and I have tried to use all of them but today and in this blog entry I’m going to talk about advantages of Atomic design, from its design principles to how I usually apply it to Liferay front-end/themes.

 

I’m going to continue with a simple sentence: “Atomic design is not a new thing”:

Designers have been working on this way for a long time but we have used other names, probably the most common would be “system design". But yes this concept has been getting importance so can be a bridge between designers and technical people, from the abstract to the concrete. Atomic design language is simple, we will speak and work along these five groups:

 

There is a lot of information about Atomic design but here a little resume about how those groups are conceptualized:

  • Atoms: Color palette, Font sizes, Labels, Inputs, Buttons, etc..
  • Molecules: Built by atoms, for example: an advance search block which contains four atoms one label, input type text, input type select and a button.
  • Organism: Based on union of molecules, to create little components with some complexity, like a header based on a logo, a navigation and a search block.
  • Templates: Here it starts a concrete language, as you can imagine we can use Organisms to create all templates as the project needs.
  • Pages: And at last, template content is replaced with real content to give an accurate design of what a user will see.

 

Why should front-end people find out advantages on this approach?

These days at much projects front-end people are assuming the responsibility to translate design language to technical language, and yes, that works many times!. But languages are created to communicate and bring people so let language does its work and get some rest for front-end happy people.

As you can see in Atomic design groups image we start in abstract terms (atoms, molecules and organisms) and we finish with so concrete terms like templates or pages. Atomic design language is simple and concise.

 

Project reality and Atomic design

It does not matter how many care we spend in our projects, most of the time we will need to change little design things, but how much impact will it have in design, front-end or developing? By using the same language we will be able to change one little thing (an atom) which will change all design in all templates and all pages. I know I know it sounds too good, like a fantasy but it can work with little approach changes:

 

Approach changes for Visual Designers and UX Designers:

We need extensible tools, tools which allow us to create reusable symbols. Most common tools to work on this concept are Illustrator or Sketch which allow you to create atoms of type text, color, and groups.

I know that this explanation is very short to transmit so big change so I have created a sketch file which can explain better the concept. The file is only an example and a beginning of how it can work, I didn't want to intrude in how you are working.

Download sketch file:

 

This file has six artboards, the first one is a file's explication, the rest are one artboard for each atomic group, atoms, molecules, organism, templates and pages, there are builded three atoms, two molecules, two organism and one template. To build them I have only needed this symbols and styles:

 

Now, we can change an atom like color to change all molecules, organisms and templates:

The sketch file is totally free and feel free to use it like a base to create more complex projects.

 

Where is the improvement for UX guys?

Normally UX designer works before a visual designer and then when visual design is finished they can review the results and make suggestions, the advantage in Atom design starts in atoms because UX guys can start their testing over an atom, for example: if we want to validate buttons touchables sizes (over UX recommendations), we will be able as soon as we have button atom ready!

 

Approach changes for Front-ends and Developers:

Now I’m going to share how I have ordered css files in an Atomic design approach, but this is only my way, if you guys find out some better way It would be a pleasure to me to know it.

I have created a git repository with a Liferay theme where applies this approach and architecture, here:

https://github.com/marcoscv-work/atomic-design-theme

 

As you can see inside _diffs directory there is a new directory called “atomic”. custom.css will only load atomic main files inside atomic directory so we can go directly inside atomic directory:

_atomic.scss will load all atoms, molecules, organisms, templates and pages from respectively directories, and _atomic _variables.scss will load all variables which are divided by group:

 

Atomic design is totally independent from frameworks for technology, so you can work as you prefer, this theme is only an example about how to translate the language to files and directories structure.

I’m sure that following this approach we can improve the workflow, getting better the design design, the communication between teams and our front-end organizing.

 

More info about what I’m working on, Liferay themes or Liferay general world on my twitter @marcoscava

Blogs