{"id":60811,"date":"2020-07-30T17:46:03","date_gmt":"2020-07-30T17:46:03","guid":{"rendered":"https:\/\/blog.glaciermediadigital.ca\/?p=60811"},"modified":"2020-08-04T23:09:15","modified_gmt":"2020-08-04T23:09:15","slug":"future-modular-atomic-design-approach","status":"publish","type":"post","link":"https:\/\/blog.lodestardigital.ca\/index.php\/2020\/07\/30\/future-modular-atomic-design-approach\/","title":{"rendered":"The Future is Modular: Atomic Design approach"},"content":{"rendered":"

How to apply Analogy to Design Systems<\/h1>\n

In a world where progress and technology change the pace, fast-development is the standard. And for teams and professionals to keep up with this, efficiency is a key ingredient. A good way to illustrate this is to look at how real estate development has changed over the past decade. Have you noticed how some modern skyscrapers are built lately? Essentially it\u2019s possible to build an entire kitchen or bathroom off-site and plug these elements into a floor on-site like LEGO pieces. They call it \u201cmodular construction\u201d and it is a revolutionary process that brings flexibility, speed and of course, efficiency.<\/span><\/p>\n

The same principle applies, on another scale, to the world of digital products.<\/strong>
\nIf you are familiar with web design, you have probably heard of \u201cdesign systems\u201d and \u201cframeworks\u201d. Both terms basically serve to define styling guidelines on creating digital interfaces but sometimes all the jargon and complexity of industry concepts can be overwhelming to people who need to share the same practices.\u00a0\u00a0<\/span><\/p>\n

In 2016 Brad Frost, a web designer and consultant<\/span>, wrote a book called Atomic Design<\/a> where the use of analogy came to the table to transform modular concept ideas into something much more simple to understand.<\/span><\/p>\n

So, what is Atomic Design?<\/b><\/h2>\n

Atomic Design is a methodology for creating design systems. There are five distinct levels in Atomic Design:<\/span><\/p>\n

    \n
  1. Atoms<\/strong><\/li>\n
  2. Molecules<\/strong><\/li>\n
  3. Organisms<\/strong><\/li>\n
  4. Templates<\/strong><\/li>\n
  5. Pages<\/strong><\/li>\n<\/ol>\n

    \"\"<\/span><\/p>\n

    Imagine you\u2019re creating a website. One of the elements every user interface needs to have is a button. In Atomic Design this would be considered an <\/span>atom<\/b>, the smallest piece of an interface. Also in this category, can be included abstract elements like colour palettes, fonts and even more invisible aspects of an interface like animations.<\/span><\/p>\n

    On the next level, let\u2019s say you combine this button with a label and an input field, you have a <\/span>molecule<\/b> called the search box. Moving on, you decide that this search box is part of the header. In this case, you\u2019re combining molecules to create an <\/span>organism <\/b>called main navigation.<\/span><\/p>\n

    At the <\/span>template<\/b> stage, the chemistry analogy is substituted with a language that makes more sense to the client-facing interaction. Templates are built by grouping organisms to a framework of placeholders. It\u2019s here where the design starts coming to life.<\/span><\/p>\n

    Finally, <\/span>pages<\/b> are specific instances of templates. Here, placeholder content is replaced with real representative content to give an authentic idea about what the user is going to see on the final design.<\/span><\/p>\n

    Everything is connected<\/b><\/h2>\n

    One of the main advantages of the Atomic Design approach is that all components of a Design System respect the same organic hierarchy which makes the scalability and management easier. For instance, by changing the colour of an <\/span>atom<\/b>, the whole <\/span>page <\/b>will be affected immediately.<\/span><\/p>\n

    But never forget, this is just a principle, a technique. The challenge designers and developers have to face is how to use Atomic Design to create original experiences. Creativity needs to be the guide to explore opportunities to use this toolbox to extend design thinking outside of any box.<\/strong><\/span><\/p>\n

    Are you considering creating a new digital experience? GMD experts are here to help you on that journey. Contact us<\/a> to learn more about how we can help you.<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"

    Progress and technology have changed the world in a place where fast-development is the standard. And for teams and professionals to keep up with this pace, efficient processes are a key ingredient.<\/p>\n","protected":false},"author":13,"featured_media":60812,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[63,68,156],"tags":[179,200,201,202,203,204],"class_list":["post-60811","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-strategy","category-design-branding","category-websites","tag-design-thinking","tag-modular-design","tag-atomic-design","tag-design-system","tag-layout","tag-styles"],"yoast_head":"\nThe Future is Modular: Atomic Design approach -<\/title>\n<meta name=\"description\" content=\"In a world where progress and technology change the pace, fast-development is the standard.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/blog.lodestardigital.ca\/index.php\/2020\/07\/30\/future-modular-atomic-design-approach\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"The Future is Modular: Atomic Design approach -\" \/>\n<meta property=\"og:description\" content=\"In a world where progress and technology change the pace, fast-development is the standard.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/blog.lodestardigital.ca\/index.php\/2020\/07\/30\/future-modular-atomic-design-approach\/\" \/>\n<meta property=\"article:published_time\" content=\"2020-07-30T17:46:03+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-08-04T23:09:15+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/blog.lodestardigital.ca\/wp-content\/uploads\/2017\/04\/GMD-2020-08-BLOG-1200x628-1.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"628\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Glacier Media\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Glacier Media\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/blog.lodestardigital.ca\/index.php\/2020\/07\/30\/future-modular-atomic-design-approach\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/blog.lodestardigital.ca\/index.php\/2020\/07\/30\/future-modular-atomic-design-approach\/\"},\"author\":{\"name\":\"Glacier Media\",\"@id\":\"https:\/\/blog.lodestardigital.ca\/#\/schema\/person\/cf060f34beff5b459e02e7e731cc80e7\"},\"headline\":\"The Future is Modular: Atomic Design approach\",\"datePublished\":\"2020-07-30T17:46:03+00:00\",\"dateModified\":\"2020-08-04T23:09:15+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/blog.lodestardigital.ca\/index.php\/2020\/07\/30\/future-modular-atomic-design-approach\/\"},\"wordCount\":551,\"commentCount\":0,\"image\":{\"@id\":\"https:\/\/blog.lodestardigital.ca\/index.php\/2020\/07\/30\/future-modular-atomic-design-approach\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/blog.lodestardigital.ca\/wp-content\/uploads\/2017\/04\/GMD-2020-08-BLOG-1200x628-1.jpg\",\"keywords\":[\"design thinking\",\"modular design\",\"atomic design\",\"design system\",\"layout\",\"styles\"],\"articleSection\":[\"Strategy\",\"Design & Branding\",\"websites\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/blog.lodestardigital.ca\/index.php\/2020\/07\/30\/future-modular-atomic-design-approach\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/blog.lodestardigital.ca\/index.php\/2020\/07\/30\/future-modular-atomic-design-approach\/\",\"url\":\"https:\/\/blog.lodestardigital.ca\/index.php\/2020\/07\/30\/future-modular-atomic-design-approach\/\",\"name\":\"The Future is Modular: Atomic Design approach -\",\"isPartOf\":{\"@id\":\"https:\/\/blog.lodestardigital.ca\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/blog.lodestardigital.ca\/index.php\/2020\/07\/30\/future-modular-atomic-design-approach\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/blog.lodestardigital.ca\/index.php\/2020\/07\/30\/future-modular-atomic-design-approach\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/blog.lodestardigital.ca\/wp-content\/uploads\/2017\/04\/GMD-2020-08-BLOG-1200x628-1.jpg\",\"datePublished\":\"2020-07-30T17:46:03+00:00\",\"dateModified\":\"2020-08-04T23:09:15+00:00\",\"author\":{\"@id\":\"https:\/\/blog.lodestardigital.ca\/#\/schema\/person\/cf060f34beff5b459e02e7e731cc80e7\"},\"description\":\"In a world where progress and technology change the pace, fast-development is the standard.\",\"breadcrumb\":{\"@id\":\"https:\/\/blog.lodestardigital.ca\/index.php\/2020\/07\/30\/future-modular-atomic-design-approach\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/blog.lodestardigital.ca\/index.php\/2020\/07\/30\/future-modular-atomic-design-approach\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/blog.lodestardigital.ca\/index.php\/2020\/07\/30\/future-modular-atomic-design-approach\/#primaryimage\",\"url\":\"https:\/\/blog.lodestardigital.ca\/wp-content\/uploads\/2017\/04\/GMD-2020-08-BLOG-1200x628-1.jpg\",\"contentUrl\":\"https:\/\/blog.lodestardigital.ca\/wp-content\/uploads\/2017\/04\/GMD-2020-08-BLOG-1200x628-1.jpg\",\"width\":1200,\"height\":628},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/blog.lodestardigital.ca\/index.php\/2020\/07\/30\/future-modular-atomic-design-approach\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/blog.lodestardigital.ca\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"The Future is Modular: Atomic Design approach\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/blog.lodestardigital.ca\/#website\",\"url\":\"https:\/\/blog.lodestardigital.ca\/\",\"name\":\"\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/blog.lodestardigital.ca\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/blog.lodestardigital.ca\/#\/schema\/person\/cf060f34beff5b459e02e7e731cc80e7\",\"name\":\"Glacier Media\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/blog.lodestardigital.ca\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/71173b2fa56c2efb47938ab1a2c8bfa0c2670da463b7677d2d79a5753dcc45ca?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/71173b2fa56c2efb47938ab1a2c8bfa0c2670da463b7677d2d79a5753dcc45ca?s=96&d=mm&r=g\",\"caption\":\"Glacier Media\"},\"url\":\"https:\/\/blog.lodestardigital.ca\/index.php\/author\/glacier-media-digital\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"The Future is Modular: Atomic Design approach -","description":"In a world where progress and technology change the pace, fast-development is the standard.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/blog.lodestardigital.ca\/index.php\/2020\/07\/30\/future-modular-atomic-design-approach\/","og_locale":"en_US","og_type":"article","og_title":"The Future is Modular: Atomic Design approach -","og_description":"In a world where progress and technology change the pace, fast-development is the standard.","og_url":"https:\/\/blog.lodestardigital.ca\/index.php\/2020\/07\/30\/future-modular-atomic-design-approach\/","article_published_time":"2020-07-30T17:46:03+00:00","article_modified_time":"2020-08-04T23:09:15+00:00","og_image":[{"width":1200,"height":628,"url":"https:\/\/blog.lodestardigital.ca\/wp-content\/uploads\/2017\/04\/GMD-2020-08-BLOG-1200x628-1.jpg","type":"image\/jpeg"}],"author":"Glacier Media","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Glacier Media","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/blog.lodestardigital.ca\/index.php\/2020\/07\/30\/future-modular-atomic-design-approach\/#article","isPartOf":{"@id":"https:\/\/blog.lodestardigital.ca\/index.php\/2020\/07\/30\/future-modular-atomic-design-approach\/"},"author":{"name":"Glacier Media","@id":"https:\/\/blog.lodestardigital.ca\/#\/schema\/person\/cf060f34beff5b459e02e7e731cc80e7"},"headline":"The Future is Modular: Atomic Design approach","datePublished":"2020-07-30T17:46:03+00:00","dateModified":"2020-08-04T23:09:15+00:00","mainEntityOfPage":{"@id":"https:\/\/blog.lodestardigital.ca\/index.php\/2020\/07\/30\/future-modular-atomic-design-approach\/"},"wordCount":551,"commentCount":0,"image":{"@id":"https:\/\/blog.lodestardigital.ca\/index.php\/2020\/07\/30\/future-modular-atomic-design-approach\/#primaryimage"},"thumbnailUrl":"https:\/\/blog.lodestardigital.ca\/wp-content\/uploads\/2017\/04\/GMD-2020-08-BLOG-1200x628-1.jpg","keywords":["design thinking","modular design","atomic design","design system","layout","styles"],"articleSection":["Strategy","Design & Branding","websites"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/blog.lodestardigital.ca\/index.php\/2020\/07\/30\/future-modular-atomic-design-approach\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/blog.lodestardigital.ca\/index.php\/2020\/07\/30\/future-modular-atomic-design-approach\/","url":"https:\/\/blog.lodestardigital.ca\/index.php\/2020\/07\/30\/future-modular-atomic-design-approach\/","name":"The Future is Modular: Atomic Design approach -","isPartOf":{"@id":"https:\/\/blog.lodestardigital.ca\/#website"},"primaryImageOfPage":{"@id":"https:\/\/blog.lodestardigital.ca\/index.php\/2020\/07\/30\/future-modular-atomic-design-approach\/#primaryimage"},"image":{"@id":"https:\/\/blog.lodestardigital.ca\/index.php\/2020\/07\/30\/future-modular-atomic-design-approach\/#primaryimage"},"thumbnailUrl":"https:\/\/blog.lodestardigital.ca\/wp-content\/uploads\/2017\/04\/GMD-2020-08-BLOG-1200x628-1.jpg","datePublished":"2020-07-30T17:46:03+00:00","dateModified":"2020-08-04T23:09:15+00:00","author":{"@id":"https:\/\/blog.lodestardigital.ca\/#\/schema\/person\/cf060f34beff5b459e02e7e731cc80e7"},"description":"In a world where progress and technology change the pace, fast-development is the standard.","breadcrumb":{"@id":"https:\/\/blog.lodestardigital.ca\/index.php\/2020\/07\/30\/future-modular-atomic-design-approach\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/blog.lodestardigital.ca\/index.php\/2020\/07\/30\/future-modular-atomic-design-approach\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/blog.lodestardigital.ca\/index.php\/2020\/07\/30\/future-modular-atomic-design-approach\/#primaryimage","url":"https:\/\/blog.lodestardigital.ca\/wp-content\/uploads\/2017\/04\/GMD-2020-08-BLOG-1200x628-1.jpg","contentUrl":"https:\/\/blog.lodestardigital.ca\/wp-content\/uploads\/2017\/04\/GMD-2020-08-BLOG-1200x628-1.jpg","width":1200,"height":628},{"@type":"BreadcrumbList","@id":"https:\/\/blog.lodestardigital.ca\/index.php\/2020\/07\/30\/future-modular-atomic-design-approach\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/blog.lodestardigital.ca\/"},{"@type":"ListItem","position":2,"name":"The Future is Modular: Atomic Design approach"}]},{"@type":"WebSite","@id":"https:\/\/blog.lodestardigital.ca\/#website","url":"https:\/\/blog.lodestardigital.ca\/","name":"","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/blog.lodestardigital.ca\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/blog.lodestardigital.ca\/#\/schema\/person\/cf060f34beff5b459e02e7e731cc80e7","name":"Glacier Media","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/blog.lodestardigital.ca\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/71173b2fa56c2efb47938ab1a2c8bfa0c2670da463b7677d2d79a5753dcc45ca?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/71173b2fa56c2efb47938ab1a2c8bfa0c2670da463b7677d2d79a5753dcc45ca?s=96&d=mm&r=g","caption":"Glacier Media"},"url":"https:\/\/blog.lodestardigital.ca\/index.php\/author\/glacier-media-digital\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/blog.lodestardigital.ca\/index.php\/wp-json\/wp\/v2\/posts\/60811","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.lodestardigital.ca\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.lodestardigital.ca\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.lodestardigital.ca\/index.php\/wp-json\/wp\/v2\/users\/13"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.lodestardigital.ca\/index.php\/wp-json\/wp\/v2\/comments?post=60811"}],"version-history":[{"count":0,"href":"https:\/\/blog.lodestardigital.ca\/index.php\/wp-json\/wp\/v2\/posts\/60811\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blog.lodestardigital.ca\/index.php\/wp-json\/wp\/v2\/media\/60812"}],"wp:attachment":[{"href":"https:\/\/blog.lodestardigital.ca\/index.php\/wp-json\/wp\/v2\/media?parent=60811"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.lodestardigital.ca\/index.php\/wp-json\/wp\/v2\/categories?post=60811"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.lodestardigital.ca\/index.php\/wp-json\/wp\/v2\/tags?post=60811"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}