{"id":29810,"date":"2017-04-17T23:01:01","date_gmt":"2017-04-17T15:01:01","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=29810"},"modified":"2018-04-07T00:46:16","modified_gmt":"2018-04-06T16:46:16","slug":"atomic-design-for-web-designers","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/atomic-design-for-web-designers\/","title":{"rendered":"An Introduction to Atomic Design for Web Designers"},"content":{"rendered":"

Modularity<\/strong>, reusability<\/strong>, and scalability<\/strong> are not only coding concepts<\/a> but you can also make use of them to create better-optimized design systems<\/strong>. Atomic design<\/a><\/strong> is a new methodology for building effective UIs<\/strong> from the bottom up, using a chemistry analogy<\/strong>.<\/p>\n

\n\t\t\t\t\tRead Also:<\/strong>\u00a0\n\t\t\t\t\t10 Reasons Why You Need Code Optimization<\/a>\n\t\t\t\t<\/p>\n

Instead of designing collections of web pages<\/strong>, atomic design starts with the simplest UI components called atoms<\/strong> (buttons, menu items, etc.), and builds the whole UI up via four more stages: molecules<\/strong>, organisms<\/strong>, templates<\/strong>, and pages<\/strong>.<\/p>\n

\"Atomic<\/a><\/figure>\n

The book<\/h2>\n

The methodology was created by designer Brad Frost<\/a> with the aim of \u201ccrafting successful UI design systems\u201d<\/strong>. Atomic design was released as a book<\/a><\/strong> that you can read online<\/a> for free, or order as a paperback ($20.00)<\/a> or an ebook ($10.00)<\/a> as well.<\/p>\n

Atomic design approaches user interface design from a fresh new perspective that hopefully will shake up the web design landscape<\/a><\/strong> a little bit. This article intends to give an intro<\/strong> into this methodology but the book goes into the explanation much-much further, so read it if you can, it\u2019s worth it.<\/p>\n

\"Atomic<\/a><\/figure>\n

Atomic design hierarchy<\/h2>\n

Atomic design is basically a mental model<\/strong> that makes designers think of web pages as a hierarchy of reusable components<\/strong>. The hierarchy of atomic design is built up of five stages<\/strong>; each stage is made of a group of components from the previous stage. The five stages add up into a clear and logical interface design system<\/strong>. They are as follows:<\/p>\n

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

    1. Atoms<\/a><\/h2>\n

    Just like in chemistry, atoms<\/strong> are the smallest building blocks that cannot be further decomposed<\/strong>. Therefore, atoms are the basic HTML elements<\/strong>, such as buttons, labels, and input fields, that provide the smallest units<\/strong> of a web page.<\/p>\n

    Of course, not all HTML elements are atoms<\/strong>, for instance, sectioning elements (<article><\/code>, <section><\/code>, etc.) aren\u2019t (cannot be) the smallest units of a web page.<\/p>\n

    Atoms are not simply the HTML elements but also their belonging styles<\/strong>: fonts, colors, dimensions, and other CSS style rules. With Brad\u2019s own words<\/a>, atoms \u201cdemonstrate all your basic styles at a glance\u201d<\/strong>.<\/p>\n

    Atoms \u2013 Example<\/h3>\n

    Here\u2019s an example from our website. The headlines of recommended posts may account for one type of atom<\/strong>; they use the same HTML and CSS code<\/strong> and can be easily distinguished<\/strong> from the rest of the content.<\/p>\n

    \"Atom<\/figure>\n

    Note that Hongkiat.com wasn\u2019t designed with atomic design in mind, here it is only used for demonstration purposes<\/strong>.<\/p>\n

    The essence of atomic design is to design the UI from the bottom up using these five stages<\/strong>, not to identify the atomic design components afterwards.<\/p>\n

    2. Molecules<\/a><\/h2>\n

    A molecule<\/strong> is formed by a group of atoms<\/strong>. Molecules constitute the next stage in the atomic design hierarchy. Think about simpler UI elements that are already made of more than one HTML elements<\/strong>, such as a search form or a recommended post in the sidebar.<\/p>\n

    Being organized into a molecule gives a purpose<\/strong> to each atom. In a bigger group (molecule), atoms must support and complement<\/strong> each other, they must work well together<\/strong> in order to create a usable design.<\/p>\n

    For instance, the title (one atom) must get more emphasis<\/strong> (bigger fonts, more weight, etc.) than the author\u2019s name (another atom) in the recommended post block. This way, the two atoms are \u201cmeant\u201d to work as a team<\/strong> to get the best result.<\/p>\n

    Molecules \u2013 Example<\/h3>\n

    Using our previous example, you can see that in Hongkiat\u2019s sidebar, one block of recommended post could be seen as a molecule. A recommended post molecule is built up of three atoms<\/strong>: a thumbnail, a title, and an author\u2019s name atom.<\/p>\n

    \"Molecule<\/figure>\n

    3. Organisms<\/a><\/h2>\n

    Organisms are composed of a group of molecules, atoms<\/strong> (and sometimes other organisms)<\/strong>. In web design, organisms are more complex UI components<\/strong> that represent definitive sections<\/strong> of the page, such as a header, a footer, or a sidebar.<\/p>\n

    Organisms can be either made up of different types of molecules<\/strong>, for instance a sidebar may consist of a search bar and different kind of widgets, or of the same molecule repeated several times<\/strong>, for instance a handful of related post blocks under each other. And, it can be the combination of these two.<\/p>\n

    Organisms \u2013 Example<\/h3>\n

    On Hongkiat\u2019s website, the sidebar could be an organism. It\u2019s composed of a search bar<\/strong> (one type of molecule, displayed only once) and several recommended posts<\/strong> (another type of molecule, displayed many times).<\/p>\n

    However, the sidebar organism can also be seen as the composition of a molecule<\/strong> (the search bar) and another organism<\/strong> (the recommended post widget with several recommended posts). Atomic design is a flexible model<\/strong>, the rules are not very strict, so in this case we can define the same building block both as a molecule and an organism.<\/p>\n

    \"Organism<\/figure>\n

    4. Templates<\/a><\/h2>\n

    The next stage in the atomic design hierarchy are templates<\/strong>. As you can see, this is when atomic design stops using the chemistry analogy<\/strong>. Brad refrains from the terminology at this point as he thinks it\u2019s less understandable<\/strong> for clients and other stakeholders, and it\u2019s essentially the two last stages (templates and pages) that designers need to sell.<\/p>\n

    Templates<\/strong> are built up of organisms. They are page-level objects<\/strong> but without the final content<\/strong>. The purpose of templates is to represent the structure<\/strong> of the underlying content.<\/p>\n

    Templates display how different atoms, molecules, organisms \u201cfunction together in the context of a layout\u201d<\/strong>. They basically represent the skeleton of a page<\/strong>.<\/p>\n

    Templates \u2013 Example<\/h3>\n

    For an example, think about a home page template<\/strong> with placeholder images and lorem ipsum text blocks.<\/p>\n

    Below, you can see an example from the Atomic Design book. It is the home page template of the TimeInc<\/a> magazine. Atoms, molecules, and organisms are all at their place but only with schematic content<\/strong>.<\/p>\n

    \"Template<\/a><\/figure>\n

    5. Pages<\/a><\/h2>\n

    Pages<\/strong> represent the last stage of the atomic design hierarchy. Pages are the \u201cspecific instances of templates\u201d<\/strong>. In the page stage, templates get populated with real content<\/strong> (copy, microcopy, images, videos, etc.), just as they will appear in the real UI.<\/p>\n

    Pages allow designers to see how the final user experience<\/strong> will look like, to test the design<\/strong> with real users, and to measure how well it performs<\/strong> in terms of usability, conversion, accessibility, and other metrics.<\/p>\n

    Pages & template variations<\/h3>\n

    The other goal of the page stage is to make template variations<\/strong> possible. We speak about template variations when the underlying template is the same<\/strong> but the populating content is (slightly) different<\/strong>. For instance, if you want to show different content to different user groups (e.g. for visitors versus logged in users), or when one headline is much longer than the others.<\/p>\n

    Using template variations is crucial if we want to create consistent and resilient<\/strong> user interfaces. Smaller components (atoms, molecules, organisms) must function well in different scenarios<\/strong>.<\/p>\n

    For instance, a button must look clickable with whatever surrounding elements around<\/strong>. If it doesn\u2019t look actionable in a certain variation, you need to redesign the button atom until it fits all use cases<\/strong>.<\/p>\n

    Pages \u2013 Example<\/h3>\n

    Below, you can see the page stage of the previous TimeInc home page template. Looks different, huh? This is just one template variation<\/strong>, though. To have an effective UI, the design team has to think hard about what may change<\/strong> in the real site. Then, they need to test the design for that template variation (page), too.<\/p>\n

    \"Page<\/a><\/figure>\n

    \n\t\t\t\t\tRead Also:<\/strong>\u00a0\n\t\t\t\t\tA Look Into Proper HTML5 Semantics<\/a>\n\t\t\t\t<\/p>","protected":false},"excerpt":{"rendered":"

    Modularity, reusability, and scalability are not only coding concepts but you can also make use of them to create better-optimized design systems. Atomic design is a new methodology for building effective UIs from the bottom up, using a chemistry analogy. Instead of designing collections of web pages, atomic design starts with the simplest UI components…<\/p>\n","protected":false},"author":146,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3395],"tags":[510,511],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"\nAn Introduction to Atomic Design for Web Designers - Hongkiat<\/title>\n<meta name=\"description\" content=\"Modularity, reusability, and scalability are not only coding concepts but you can also make use of them to create better-optimized design systems. Atomic\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/atomic-design-for-web-designers\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"An Introduction to Atomic Design for Web Designers\" \/>\n<meta property=\"og:description\" content=\"Modularity, reusability, and scalability are not only coding concepts but you can also make use of them to create better-optimized design systems. Atomic\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/atomic-design-for-web-designers\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2017-04-17T15:01:01+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2018-04-06T16:46:16+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/atomic-design-for-web-designers\/atomic-design-stages.jpg\" \/>\n<meta name=\"author\" content=\"Anna Monus\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Anna Monus\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/atomic-design-for-web-designers\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/atomic-design-for-web-designers\\\/\"},\"author\":{\"name\":\"Anna Monus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/a601053a0ab457901e00cdc83bd5359e\"},\"headline\":\"An Introduction to Atomic Design for Web Designers\",\"datePublished\":\"2017-04-17T15:01:01+00:00\",\"dateModified\":\"2018-04-06T16:46:16+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/atomic-design-for-web-designers\\\/\"},\"wordCount\":1233,\"commentCount\":2,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/atomic-design-for-web-designers\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/atomic-design-for-web-designers\\\/atomic-design-stages.jpg\",\"keywords\":[\"Web Designers\",\"Web Developers\"],\"articleSection\":[\"UI\\\/UX\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/atomic-design-for-web-designers\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/atomic-design-for-web-designers\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/atomic-design-for-web-designers\\\/\",\"name\":\"An Introduction to Atomic Design for Web Designers - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/atomic-design-for-web-designers\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/atomic-design-for-web-designers\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/atomic-design-for-web-designers\\\/atomic-design-stages.jpg\",\"datePublished\":\"2017-04-17T15:01:01+00:00\",\"dateModified\":\"2018-04-06T16:46:16+00:00\",\"description\":\"Modularity, reusability, and scalability are not only coding concepts but you can also make use of them to create better-optimized design systems. Atomic\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/atomic-design-for-web-designers\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/atomic-design-for-web-designers\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/atomic-design-for-web-designers\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/atomic-design-for-web-designers\\\/atomic-design-stages.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/atomic-design-for-web-designers\\\/atomic-design-stages.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/atomic-design-for-web-designers\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"An Introduction to Atomic Design for Web Designers\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/a601053a0ab457901e00cdc83bd5359e\",\"name\":\"Anna Monus\",\"description\":\"Anna is Technical Editor and Writer for Hongkiat.com. She mainly covers front-end frameworks, web standards, accessibility, WordPress development, and UX design.\",\"sameAs\":[\"https:\\\/\\\/www.annalytic.com\\\/\"],\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/anna_monus\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"An Introduction to Atomic Design for Web Designers - Hongkiat","description":"Modularity, reusability, and scalability are not only coding concepts but you can also make use of them to create better-optimized design systems. Atomic","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:\/\/www.hongkiat.com\/blog\/atomic-design-for-web-designers\/","og_locale":"en_US","og_type":"article","og_title":"An Introduction to Atomic Design for Web Designers","og_description":"Modularity, reusability, and scalability are not only coding concepts but you can also make use of them to create better-optimized design systems. Atomic","og_url":"https:\/\/www.hongkiat.com\/blog\/atomic-design-for-web-designers\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2017-04-17T15:01:01+00:00","article_modified_time":"2018-04-06T16:46:16+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/atomic-design-for-web-designers\/atomic-design-stages.jpg","type":"","width":"","height":""}],"author":"Anna Monus","twitter_card":"summary_large_image","twitter_creator":"@hongkiat","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Anna Monus","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/atomic-design-for-web-designers\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/atomic-design-for-web-designers\/"},"author":{"name":"Anna Monus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/a601053a0ab457901e00cdc83bd5359e"},"headline":"An Introduction to Atomic Design for Web Designers","datePublished":"2017-04-17T15:01:01+00:00","dateModified":"2018-04-06T16:46:16+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/atomic-design-for-web-designers\/"},"wordCount":1233,"commentCount":2,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/atomic-design-for-web-designers\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/atomic-design-for-web-designers\/atomic-design-stages.jpg","keywords":["Web Designers","Web Developers"],"articleSection":["UI\/UX"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/atomic-design-for-web-designers\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/atomic-design-for-web-designers\/","url":"https:\/\/www.hongkiat.com\/blog\/atomic-design-for-web-designers\/","name":"An Introduction to Atomic Design for Web Designers - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/atomic-design-for-web-designers\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/atomic-design-for-web-designers\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/atomic-design-for-web-designers\/atomic-design-stages.jpg","datePublished":"2017-04-17T15:01:01+00:00","dateModified":"2018-04-06T16:46:16+00:00","description":"Modularity, reusability, and scalability are not only coding concepts but you can also make use of them to create better-optimized design systems. Atomic","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/atomic-design-for-web-designers\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/atomic-design-for-web-designers\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/atomic-design-for-web-designers\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/atomic-design-for-web-designers\/atomic-design-stages.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/atomic-design-for-web-designers\/atomic-design-stages.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/atomic-design-for-web-designers\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"An Introduction to Atomic Design for Web Designers"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/a601053a0ab457901e00cdc83bd5359e","name":"Anna Monus","description":"Anna is Technical Editor and Writer for Hongkiat.com. She mainly covers front-end frameworks, web standards, accessibility, WordPress development, and UX design.","sameAs":["https:\/\/www.annalytic.com\/"],"url":"https:\/\/www.hongkiat.com\/blog\/author\/anna_monus\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-7KO","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/29810","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/146"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=29810"}],"version-history":[{"count":1,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/29810\/revisions"}],"predecessor-version":[{"id":29811,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/29810\/revisions\/29811"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=29810"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=29810"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=29810"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=29810"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}