To put it simply, Atomic Design is a process. You begin with designing and developing all the basic components that in turn get combined to create the whole.
Atoms would be the initial first building blocks to create. They would necessarily be things like Buttons, Colours, Fonts, Fields, Images, Text etc. These are the most basic elements you would need to think about, and to be sure, there’s a lot of thinking that goes into designing them. What font or fonts (you really need to keep these to a minimum) work best for your brand? What colours and secondary colours suit your brand? What style should fields be? How do you handle imagery?
Ok, this is where things begin to get interesting. Molecules are small groupings of Atoms. For example, once you’ve designed a single Field, how does it look when you put a group of them together with buttons and some simple typography? Does it all hold together? Is it visually jarring or is it easy on the eyes. These things are important to note. When you’re designing a portal (or website or application) you’re asking people to spend time on it, often hours. It is imperative that we evaluate things at each step, like ‘is it easy on the eyes?’ is it visually taxing? Is the typography legible and attractive? If we take the time, and properly design and evaluate, we can create Atoms that make visually appealing Molecules.
When you group together several Molecules you get Organisms. For example, in a typical masthead for a Portal, you might have a logo, typography, Navigation menu, Icons and possibly a search field. All of these things must of course work individually as well as function as whole.
Well thought out Organisms serve their purpose by being something that can function as replicable items throughout the Portal.