Device-Level Design Should Not Be A Thing
Large monitors, small monitors, laptops, tablets, smartphones, smartwatches, toasters, refrigerators…where will it end? Nowadays, application designers need to consider a plethora of devices as they design. While we are not considering designing Nexpose and InsightIDR for your toaster, maybe one day we will!
Although, Brad Frost tells the world of design that device-level design is an outdated concept. That's news to our ears! Let's look at this more closely. Frost's argument is that many organizations are adopting a number of different methods to create fluid interfaces. As the number of these fluid interfaces grow, a need for device-level style guides becomes apparent. Unfortunately, the time-consuming nature around the creation and maintenance of style guides also becomes apparent. This is due to the abstract nature of style guides, which suffer from a number of issues:
- Designers do not always see how style guides are used in the final interface;
- All too often, style guides are created after a product launches;
- Style guides can lack cohesion, where designers and developers may not understand how element relate to each other.
Splitting the Atom
No, we are not trying to split atoms at Rapid7, but we are looking seriously at Frost's concept of Atomic Design. To get away from the constraints of style guides, Frost asserts that we need to think of interface design elastically. In the same way that an atom contains protons and neutrons within its central nucleus, the Information Security applications our User Experience team designs can also be broken down and simplified. In that respect, Atomic Design consists of 5 distinct steps in creating an application, from a granular atom level up to a page level:
Atoms make up the smallest unit. They might be things like labels, color palettes, fonts, animations, input fields, and icons. These are abstract elements that may not have meaning until put together with other atoms which become Molecules.
Modules are a combination of things like label, icons, and input fields that might make up a navigation menu. It's a stand alone component of the interface.
Organisms are a more complex combination of molecules that form a larger more solid component of design. An example might be a combination of Navigation Menu, Logo, Search form, etc that may form the Header.
Templates are purposefully layed out groups of organisms which shows the framework of what will become the page. This stage focuses on content structure which in responsive design is extremely important.
Pages are simply the template framework with content, data, and images filled in. This is what the end user sees and this is where a designer can validate or invalidate design decisions such as determining if a header size works because text might be too long and wraps.
© 2013 | Brad Frost | From Atoms to Pages
It's Not Rocket Science
But it is certainly a mind shift. Our User Experience Design team starts to to think at an atomic, no longer at a page level. Any changes that occur at an atomic level will automatically propagate through the subsequent levels (Molecules, Organisms, Templates, and Pages). This also creates shareable components within a central library, saving time and effort across our User Experience Design and User Interface Development teams. To both teams, this way of thinking is invaluable in that everyone can see how designs are created and everything comes together in one place.
As a Rapid7 customer, what's in it for me, I hear you ask……well, from a Rapid7 customer perspective, as we start to integrate Atomic Design into our design process, you will start to benefit from a more consistent experience….faster. It also means that our designs will no longer be designed for desktop and laptop monitors at a page level. Instead, Rapid7 applications will be designed at an atomic, device-agnostic, level. Or as Dan Mall over at danielmall.com said, instead of creating web applications, we think more about designing for people by creating “beautiful and easy access to content, agnostic of device, screen size or context”.
Thanks for reading!
Senior UX Designer, Rapid7