{"id":359,"date":"2016-07-22T15:15:51","date_gmt":"2016-07-22T15:15:51","guid":{"rendered":"https:\/\/www.mervealadag.com\/?p=359"},"modified":"2023-11-30T13:38:50","modified_gmt":"2023-11-30T10:38:50","slug":"when-is-creative-too-creative","status":"publish","type":"post","link":"https:\/\/www.mervealadag.com\/?p=359","title":{"rendered":"What is Atomic Design System"},"content":{"rendered":"<div class=\"fusion-fullwidth fullwidth-box nonhundred-percent-fullwidth non-hundred-percent-height-scrolling\"  style='background-color: rgba(255,255,255,0);background-position: left top;background-repeat: no-repeat;padding-top:0px;padding-right:0px;padding-bottom:20px;padding-left:0px;margin-top: 20px;'><div class=\"fusion-builder-row fusion-row \"><div  class=\"fusion-layout-column fusion_builder_column fusion_builder_column_1_1 fusion-builder-column-1 fusion-one-full fusion-column-first fusion-column-last 1_1\"  style='margin-top:0px;margin-bottom:0px;'>\n\t\t\t\t\t<div class=\"fusion-column-wrapper\" style=\"padding: 0px 10% 0px 10%;background-position:left top;background-repeat:no-repeat;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover;\"   data-bg-url=\"\">\n\t\t\t\t\t\t<style type=\"text\/css\">.fusion-gallery-1 .fusion-gallery-image {border:0px solid #f6f6f6;}<\/style><div class=\"fusion-gallery fusion-gallery-container fusion-grid-1 fusion-columns-total-0 fusion-gallery-layout-grid fusion-gallery-1\" style=\"margin:-5px;\"><div style=\"padding:5px;\" class=\"fusion-grid-column fusion-gallery-column fusion-gallery-column-1 hover-type-none\"><div class=\"fusion-gallery-image\"><a href=\"https:\/\/www.mervealadag.com\/wp-content\/uploads\/2016\/07\/Frame-6356259.png\" data-rel=\"iLightbox[gallery_image_1]\" class=\"fusion-lightbox\" target=\"_self\"><img loading=\"lazy\" src=\"https:\/\/www.mervealadag.com\/wp-content\/uploads\/2016\/07\/Frame-6356259.png\" width=\"2595\" height=\"1101\" alt=\"\" title=\"Frame 6356259\" aria-label=\"Frame 6356259\" class=\"img-responsive wp-image-2250\" \/><\/a><\/div><\/div><div class=\"clearfix\"><\/div><\/div><div class=\"fusion-text\"><h4>Overview<\/h4>\n<p>As the design system grows, so does its complexity, and that\u2019s when things can get intricate. Sometimes it\u2019s difficult to discern in which group a specific component should go.<br \/>\nAtomic Design states groups all components into:<br \/>\nAtoms, Molecules, Organisms, Templates and Pages.<\/p>\n<\/div><style type=\"text\/css\">.fusion-gallery-2 .fusion-gallery-image {border:0px solid #f6f6f6;}<\/style><div class=\"fusion-gallery fusion-gallery-container fusion-grid-1 fusion-columns-total-0 fusion-gallery-layout-grid fusion-gallery-2\" style=\"margin:-5px;\"><div style=\"padding:5px;\" class=\"fusion-grid-column fusion-gallery-column fusion-gallery-column-1 hover-type-none\"><div class=\"fusion-gallery-image\"><a href=\"https:\/\/www.mervealadag.com\/wp-content\/uploads\/2016\/07\/sa.png\" data-rel=\"iLightbox[gallery_image_2]\" class=\"fusion-lightbox\" target=\"_self\"><img loading=\"lazy\" src=\"https:\/\/www.mervealadag.com\/wp-content\/uploads\/2016\/07\/sa.png\" width=\"2595\" height=\"633\" alt=\"\" title=\"sa\" aria-label=\"sa\" class=\"img-responsive wp-image-2251\" \/><\/a><\/div><\/div><div class=\"clearfix\"><\/div><\/div><div class=\"fusion-text\"><h4>Atom<\/h4>\n<p>Populating the atoms group, it\u2019s usually the easiest part. The rule of thumb is, if you can\u2019t divide without it becoming useless, then it\u2019s an atom.<\/p>\n<p>Here\u2019s a list of typical atoms:<\/p>\n<p>Typographic styles<br \/>\nColor swatches<br \/>\nIcons<br \/>\nRadio buttons<br \/>\nCheckboxes<br \/>\nSliders<br \/>\nToggles<br \/>\nProfile pictures placeholders<br \/>\nProduct pictures placeholders<\/p>\n<p>Buttons<br \/>\nLinks<br \/>\nInput fields (without labels)<br \/>\nTabs<br \/>\nPills<br \/>\nBadges<br \/>\nTags<br \/>\nTooltips<\/p>\n<\/div><style type=\"text\/css\">.fusion-gallery-3 .fusion-gallery-image {border:0px solid #f6f6f6;}<\/style><div class=\"fusion-gallery fusion-gallery-container fusion-grid-1 fusion-columns-total-0 fusion-gallery-layout-grid fusion-gallery-3\" style=\"margin:-5px;\"><div style=\"padding:5px;\" class=\"fusion-grid-column fusion-gallery-column fusion-gallery-column-1 hover-type-none\"><div class=\"fusion-gallery-image\"><a href=\"https:\/\/www.mervealadag.com\/wp-content\/uploads\/2016\/07\/Frame-6356260.png\" data-rel=\"iLightbox[gallery_image_3]\" class=\"fusion-lightbox\" target=\"_self\"><img loading=\"lazy\" src=\"https:\/\/www.mervealadag.com\/wp-content\/uploads\/2016\/07\/Frame-6356260.png\" width=\"2595\" height=\"633\" alt=\"\" title=\"Frame 6356260\" aria-label=\"Frame 6356260\" class=\"img-responsive wp-image-2252\" \/><\/a><\/div><\/div><div class=\"clearfix\"><\/div><\/div><div class=\"fusion-text\"><h4>Molecule<\/h4>\n<p>Molecules can often be mistaken for organisms and vice-versa. The rule of thumb here is groups of atoms that work as a single component with a single function.<\/p>\n<p>Here\u2019s a list of common molecules:<\/p>\n<p>Dropdown menus<br \/>\nRadio buttons inside<br \/>\nregular buttons<br \/>\nDropdown buttons<br \/>\nDate pickers<br \/>\nSearch components<br \/>\nBlockquotes<br \/>\nBreadcrumbs<br \/>\nCard components<\/p>\n<p>Collapsible group items<br \/>\nInput fields (with labels)<br \/>\nMedia uploaders<br \/>\nLoading components<br \/>\nNotifications<br \/>\nPagination<br \/>\nMedia objects<br \/>\nInformative pop-ups<br \/>\nBoolean modals<\/p>\n<\/div><style type=\"text\/css\">.fusion-gallery-4 .fusion-gallery-image {border:0px solid #f6f6f6;}<\/style><div class=\"fusion-gallery fusion-gallery-container fusion-grid-1 fusion-columns-total-0 fusion-gallery-layout-grid fusion-gallery-4\" style=\"margin:-5px;\"><div style=\"padding:5px;\" class=\"fusion-grid-column fusion-gallery-column fusion-gallery-column-1 hover-type-none\"><div class=\"fusion-gallery-image\"><a href=\"https:\/\/www.mervealadag.com\/wp-content\/uploads\/2016\/07\/Frame-6356261.png\" data-rel=\"iLightbox[gallery_image_4]\" class=\"fusion-lightbox\" target=\"_self\"><img loading=\"lazy\" src=\"https:\/\/www.mervealadag.com\/wp-content\/uploads\/2016\/07\/Frame-6356261.png\" width=\"2595\" height=\"942\" alt=\"\" title=\"Frame 6356261\" aria-label=\"Frame 6356261\" class=\"img-responsive wp-image-2253\" \/><\/a><\/div><\/div><div class=\"clearfix\"><\/div><\/div><div class=\"fusion-text\"><h4>Organ\u0131sm<\/h4>\n<p>Now that we\u2019ve defined the classifying principle for molecules, all you need to remember is that organisms are combinations of multiple molecules and have more than one function.<\/p>\n<p>Here are some organisms:<\/p>\n<p>Navigation bars<br \/>\nTab bars<br \/>\nVideo players<br \/>\nMusic players<\/p>\n<p>Media grids<br \/>\nProgress indicator<br \/>\nTables<br \/>\nCarousels<br \/>\nForms<\/p>\n<\/div><style type=\"text\/css\">.fusion-gallery-5 .fusion-gallery-image {border:0px solid #f6f6f6;}<\/style><div class=\"fusion-gallery fusion-gallery-container fusion-grid-1 fusion-columns-total-0 fusion-gallery-layout-grid fusion-gallery-5\" style=\"margin:-5px;\"><div style=\"padding:5px;\" class=\"fusion-grid-column fusion-gallery-column fusion-gallery-column-1 hover-type-none\"><div class=\"fusion-gallery-image\"><a href=\"https:\/\/www.mervealadag.com\/wp-content\/uploads\/2016\/07\/Frame-6356262.png\" data-rel=\"iLightbox[gallery_image_5]\" class=\"fusion-lightbox\" target=\"_self\"><img loading=\"lazy\" src=\"https:\/\/www.mervealadag.com\/wp-content\/uploads\/2016\/07\/Frame-6356262.png\" width=\"2595\" height=\"942\" alt=\"\" title=\"Frame 6356262\" aria-label=\"Frame 6356262\" class=\"img-responsive wp-image-2254\" \/><\/a><\/div><\/div><div class=\"clearfix\"><\/div><\/div><div class=\"fusion-text\"><h4>Pages<\/h4>\n<p>Pages are the final stage of the Atomic Design Methodology.<br \/>\nThis is where instance of templates are created.<\/p>\n<\/div><style type=\"text\/css\">.fusion-gallery-6 .fusion-gallery-image {border:0px solid #f6f6f6;}<\/style><div class=\"fusion-gallery fusion-gallery-container fusion-grid-1 fusion-columns-total-0 fusion-gallery-layout-grid fusion-gallery-6\" style=\"margin:-5px;\"><div style=\"padding:5px;\" class=\"fusion-grid-column fusion-gallery-column fusion-gallery-column-1 hover-type-none\"><div class=\"fusion-gallery-image\"><a href=\"https:\/\/www.mervealadag.com\/wp-content\/uploads\/2016\/07\/Frame-6356263.png\" data-rel=\"iLightbox[gallery_image_6]\" class=\"fusion-lightbox\" target=\"_self\"><img loading=\"lazy\" src=\"https:\/\/www.mervealadag.com\/wp-content\/uploads\/2016\/07\/Frame-6356263.png\" width=\"2595\" height=\"1143\" alt=\"\" title=\"Frame 6356263\" aria-label=\"Frame 6356263\" class=\"img-responsive wp-image-2255\" \/><\/a><\/div><\/div><div class=\"clearfix\"><\/div><\/div><div class=\"fusion-text\"><h4>Laws<\/h4>\n<p><span style=\"white-space-collapse: preserve;\">Laws are the ways in whic Atoms, Molecules, Organism can interact withing the system.<\/span><\/p>\n<p>This is where UI\/UX design comes into play, and at the core of it lies the grid system.&nbsp;<b>A grid is made up of columns, gutters, and margins that provide a structure for the layout of elements on a page<\/b>. There are three common grid types used in websites and interfaces: column grid, modular grid, and hierarchical grid.<\/p>\n<\/div><div class=\"fusion-clearfix\"><\/div>\n\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Atomic design is a methodology introduced by Brad Frost that aims to create scalable and systematic design systems for web interfaces. It breaks down the design elements into smaller, reusable components, following a hierarchical structure inspired by chemistry&#8217;s atomic elements.<\/p>\n","protected":false},"author":1,"featured_media":2249,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[14],"tags":[],"_links":{"self":[{"href":"https:\/\/www.mervealadag.com\/index.php?rest_route=\/wp\/v2\/posts\/359"}],"collection":[{"href":"https:\/\/www.mervealadag.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.mervealadag.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.mervealadag.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.mervealadag.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=359"}],"version-history":[{"count":6,"href":"https:\/\/www.mervealadag.com\/index.php?rest_route=\/wp\/v2\/posts\/359\/revisions"}],"predecessor-version":[{"id":2269,"href":"https:\/\/www.mervealadag.com\/index.php?rest_route=\/wp\/v2\/posts\/359\/revisions\/2269"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.mervealadag.com\/index.php?rest_route=\/wp\/v2\/media\/2249"}],"wp:attachment":[{"href":"https:\/\/www.mervealadag.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=359"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.mervealadag.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=359"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.mervealadag.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=359"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}