{"id":4251354,"date":"2019-09-10T13:37:00","date_gmt":"2019-09-10T11:37:00","guid":{"rendered":"https:\/\/www.deptagency.com\/insight\/exploring-a-systematic-way-to-design-digital-interfaces\/"},"modified":"2019-09-10T13:37:00","modified_gmt":"2019-09-10T11:37:00","slug":"exploring-a-systematic-way-to-design-digital-interfaces","status":"publish","type":"article","link":"https:\/\/www.deptagency.com\/en-uki\/insight\/exploring-a-systematic-way-to-design-digital-interfaces\/","title":{"rendered":"Exploring a systematic way to design digital interfaces"},"content":{"rendered":"
\n\t\n\t<\/svg>\n\t\t\t\n\t\t\tBack to all articles\t\t<\/span>\n\t\n<\/button>\n\t\tExploring a systematic way to design digital interfaces\t<\/h1>\n\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t<\/picture>\n\t\n\t<\/div>
\n\t\t\t\n\t\n\t
\n\t\tBrian Robinson\t\t
\n\t\tManaging Director UK\n\t\t\t<\/div>\n<\/div>\n\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\tDate\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t10 September 2019\t\t\t\t<\/div>\n\t\t\t<\/div>\n\t\t\t\t<\/div>\n<\/div>\n\n
\n\t
\n\t\t\n\t\t\t\t\t
\n\t\t\t\t\n\n\t\tGone are the days of designing a collection of web pages! Digital design is developing at such a rapid pace with more users accessing content through various devices, browsers and screen sizes, which means designers are tasked with creating interfaces for more contexts. Web design is evolving with an emphasis now being placed on creating thoughtful design systems.\t<\/h2>\n\n\n\t\tAtomic design is a methodology to create and maintain robust systems\u00a0in response to\u00a0the new demand for consistency, allowing digital designers to release higher quality and more consistent UIs. The atomic design methodology is composed of five distinct stages working together to create interface design systems in a more deliberate and hierarchical manner.\t<\/p>\n\n\n\t\tAtoms\t<\/h2>\n\n\n\t\tAtoms are the basic building blocks of all matter. In the context of a pattern library, atoms demonstrate all your base styles at a glance, which can be a helpful reference for designers to keep coming back to as they develop and maintain the design of a system. But like atoms in the natural world, interface atoms don\u2019t exist in a vacuum and only really come to life with application. Examples of atoms include buttons, colour pallet, typography, search bars and other form elements.\t<\/p>\n\n\n\t\tMolecules\t<\/h2>\n\n\n\t\tMolecules are groups of two or more atoms chemically bonded together to take on distinct new properties; they are relatively simple groups of UI elements functioning together as a unit. Creating simple components helps UI designers and developers adhere to the age-old computer science precept that encourages the \u2018do one thing and do it well\u2019 mentality. Burdening a single pattern with too much complexity makes software unwieldy. Therefore, creating simple UI molecules makes testing easier, encourages reusability, and promotes consistency throughout the interface.
\t<\/p>\n\n\n\t\tOrganisms\t<\/h2>\n\n\n\t\tOrganisms are relatively complex UI components composed of groups of molecules and\/or atoms and\/or other organisms functioning together as a unit to formulate distinct sections of an interface. Building up from molecules to more elaborate organisms provides designers with a more important sense of context. Organisms demonstrate those smaller, simpler components in action and serve distinct patterns that can be used again and again. For example, the product grid organism can be employed anywhere a group of products needs to be displayed from category listings to search results to related products.\u00a0\t<\/p>\n\n\n\t\tTemplates\t<\/h2>\n\n\n\t\tTemplates are groups of organisms stitched together to form pages. This is where the design really comes together with page-level objects that place components into a layout and articulate the design\u2019s underlying content structure. When crafting an effective design system, it\u2019s critical to demonstrate how components look and function together in the context of a layout to prove the parts add up to a well-functioning whole. By defining a page\u2019s skeleton a designer is able to create a system that can account for a variety of dynamic content, all while providing needed guardrails for the types of content that populate certain design patterns.\u00a0\t<\/p>\n\n\n\t\tPages\t<\/h2>\n\n\n\t\tPages are specific instances of templates that show what a UI looks like with real representative content in place. Pages also provide a place to articulate variations in templates, which is fundamental for establishing robust and reliant design systems. Here are just a few examples of template variations:\t<\/p>\n\n