For example, a masthead organism might consist of diverse components like a logo, primary navigation, search form, and list of social media channels. Organisms can consist of similar and/or different molecule types.
#WEBDESIGN CONCEPT FULL#
Dan Mall (who I’m working with on several projects) uses element collages, which articulate ideas for a few key organisms to facilitate client conversations and shape the visual direction (all without having to construct full comps). A client might not be terribly interested in the molecules of a design system, but with organisms we can see the final interface beginning to take shape. We’re starting to get increasingly concrete. Organisms are groups of molecules joined together to form a relatively complex, distinct section of an interface. Molecules give us some building blocks to work with, and we can now combine them together to form organisms. While molecules can be complex, as a rule of thumb they are relatively simple combinations of atoms built for reuse. These molecules take on their own properties and serve as the backbone of our design systems.įor example, a form label, input or button aren’t too useful by themselves, but combine them together as a form and now they can actually do something together.īuilding up to molecules from atoms encourages a “do one thing and do it well” mentality.
Molecules are groups of atoms bonded together and are the smallest fundamental units of a compound. Things start getting more interesting and tangible when we start combining atoms together. However, they’re good as a reference in the context of a pattern library as you can see all your global styles laid out at a glance. Like atoms in nature they’re fairly abstract and often not terribly useful on their own. Applied to web interfaces, atoms are our HTML tags, such as a form label, an input or a button.Ītoms can also include more abstract elements like color palettes, fonts and even more invisible aspects of an interface like animations. AtomsĪtoms are the basic building blocks of matter. There are five distinct levels in atomic design: What is Atomic DesignĪtomic design is methodology for creating design systems.
Josh Duck’s HTML Periodic Table gives a great breakdown of web designers’ atomic elements. This means we can break entire interfaces down into fundamental building blocks and work up from there. Similarly, interfaces are made up of smaller components. Those atomic units bond together to form molecules, which in turn combine into more complex organisms to ultimately create all matter in our universe. The thought is that all matter (whether solid, liquid, gas, simple, complex, etc) is comprised of atoms. In searching for inspiration and parallels, I kept coming back to chemistry. Lately I’ve been more interested in what our interfaces are comprised of and how we can construct design systems in a more methodical way. This type of thinking is certainly important, but I’m slightly less interested in these aspects of design because ultimately they are and will always be subjective. We’re not designing pages, we’re designing systems of components.- Stephen HayĪs the craft of Web design continues to evolve, we’re recognizing the need to develop thoughtful design systems, rather than creating simple collections of web pages.Ī lot has been said about creating design systems, and much of it focuses on establishing foundations for color, typography, grids, texture and the like. Hey there! I wrote a book called Atomic Design that dives into this topic in more detail, which you can buy as an ebook.
0 kommentar(er)
