{"id":4124691,"date":"2022-12-16T19:19:04","date_gmt":"2022-12-16T17:19:04","guid":{"rendered":"https:\/\/www.deptagency.com\/?post_type=article&#038;p=4124691"},"modified":"2023-07-20T09:52:53","modified_gmt":"2023-07-20T07:52:53","slug":"how-to-create-a-seamless-experience-with-modular-web-design","status":"publish","type":"article","link":"https:\/\/www.deptagency.com\/en-dk\/insight\/how-to-create-a-seamless-experience-with-modular-web-design\/","title":{"rendered":"How to create a seamless experience with modular web design"},"content":{"rendered":"<div class=\"block-article-post-header js-block-article-post-header block-article-post-header__theme--onyxGrey\">\n\t<a\tclass=\"cta-button block-article-post-header__back-button cta-button__color--white cta-button__style--back\" href=\"https:\/\/www.deptagency.com\/en-dk\/all-insights\/\" aria-label=\"Back\" >\n\t<svg width='41' height='41' viewBox='0 0 41 41' fill='none' xmlns='http:\/\/www.w3.org\/2000\/svg'><circle cx='20.5' cy='20.5' r='19.5' transform='rotate(-90 20.5 20.5)' stroke='var(--dept-button-icon-outline-color)' stroke-width='1.3' stroke-miterlimit='10' fill='none'\/><circle class='icon-backplate' cx='20.5' cy='20.5' r='19.5' transform='rotate(-90 20.5 20.5)' fill='var(--dept-button-icon-backplate-color)' fill-opacity='1'\/><path class='icon-center' d='M21.174 30 11 20.674l10.174-9.326m-9.326 9.328H30.5' stroke='var(--dept-button-icon-color)' stroke-width='1.3' stroke-miterlimit='10' fill='none'\/><\/svg>\n\t\t\t<span>\n\t\t\tBack to all articles\t\t<\/span>\n\t\n<\/a><h1\t\tclass=\"typography block-article-post-header__title typography__color--white typography__size--h1 typography__align--left\"\n\t\t\t>\n\t\tHow to create a seamless experience with modular web design\t<\/h1><div\n\t\tclass=\"image-wrap block-article-post-header__image-wrap\"\n\t\tdata-align=\"center center\"\n\t\t\t>\n\n\t\t\t<picture\n\t\tclass=\"image__picture\"\n\t\t\t\t>\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t<img\n\t\t\t\tsrc=\"https:\/\/www.deptagency.com\/wp-content\/uploads\/2022\/12\/modular-puzzle-concept.jpg\"\n\t\t\t\tclass=\"image block-article-post-header__image\"\n\n\t\t\t\t\n\t\t\t\t\t\t\t\t\tloading=\"lazy\"\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\t\t\/>\n\t\t<\/picture>\n\t\n\t<\/div><div class=\"author block-article-post-header__author\" data-animation=\"slide-fade\">\n\t\t\t<img\n\t\t\tclass=\"author__portrait\"\n\t\t\tsrc=\"https:\/\/www.deptagency.com\/wp-content\/uploads\/2022\/09\/Logan-bishop-150x150.jpeg\"\n\t\t\talt=\"Logan Bishop\"\n\t\t\/>\n\t\n\t<div class=\"author__text\">\n\t\tLogan Bishop\t\t<br \/>\n\t\tLead product designer \n\t\t\t<\/div>\n<\/div>\n\t<div class=\"block-article-post-header__meta\">\n\t\t\t\t\t\t\t<div class=\"block-article-post-header__meta-date\">\n\t\t\t\t<div class=\"block-article-post-header__date-description\">\n\t\t\t\t\tDate\t\t\t\t<\/div>\n\t\t\t\t<div class=\"block-article-post-header__published-date\">\n\t\t\t\t\t16 December 2022\t\t\t\t<\/div>\n\t\t\t<\/div>\n\t\t\t\t<\/div>\n<\/div>\n\n<div class=\"block-title-and-content js-block-title-and-content block-title-and-content__theme--white\">\n\t<div class=\"block-title-and-content__layout\">\n\t\t<h2\t\tclass=\"typography block-title-and-content__title typography__color--onyxGrey typography__size--h2 typography__align--left\"\n\t\tdata-size-mobile=\"h2\" \t>\n\t\t<br>Designing a simple, 5-page website? Easy. Every page gets a custom design.\u00a0\t<\/h2>\n\t\t\t\t\t<div class=\"block-title-and-content__content\">\n\t\t\t\t\n<div class='block-title-and-content__item'><div class='block-title-and-content__item-inner'><p\t\tclass=\"typography block-typography__typography typography__color--onyxGrey typography__size--regular-body typography__align--left\"\n\t\t\t>\n\t\tDesigning something bigger? That\u2019s a different story.<br><br>The problem with designing at scale is two-fold. On one hand, you can\u2019t customise every single page. And on the other, relying too heavily on modules and templates makes everything look the same.\u00a0<br><br>Finding a happy medium allows your website or e-commerce store to look consistent while also maintaining creativity and flexibility for different intentions page by page. To find this happy medium, we believe most teams should leverage <em>modular web design, <\/em>but with purpose and rules around its usage.\u00a0\t<\/p><\/div><\/div>\n\t\t\t<\/div>\n\t\t\t<\/div>\n\n\t\n\t<div class=\"block-title-and-content__social-links\">\n\t\t\t\t\t<a\n\t\t\t\thref=\"https:\/\/www.deptagency.com\/en-dk\/insight\/how-to-create-a-seamless-experience-with-modular-web-design\/\"\n\t\t\t\tdata-share-url=\"https:\/\/www.deptagency.com\/en-dk\/insight\/how-to-create-a-seamless-experience-with-modular-web-design\/\"\n\t\t\t\tdata-share-title=\"How to create a seamless experience with modular web design\"\n\t\t\t\tdata-share-type=\"copy\"\n\t\t\t\tclass=\"block-title-and-content__social-links-item js-social-link\"\n\t\t\t\taria-label=\"Copy page link\"\n\t\t\t\t\n\t\t\t\t\t\t\t\t\tdata-tooltip=\"true\"\n\t\t\t\t\tdata-tooltip-text=\"Link copied to clipboard.\"\n\t\t\t\t\t\t\t>\n\t\t\t\t<svg fill='none' xmlns='http: \/\/www.w3.org\/2000\/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M6.832 15.167l8.333-8.333M9.332 6.001l2.787-2.787a4.715 4.715 0 016.666 0v0a4.715 4.715 0 010 6.667L16 12.668M5.999 9.334l-2.787 2.787a4.715 4.715 0 000 6.666v0a4.715 4.715 0 006.667 0l2.787-2.786' stroke='currentColor' stroke-width='2'\/><\/svg>\t\t\t<\/a>\n\t\t\t\t\t\t<a\n\t\t\t\thref=\"https:\/\/www.facebook.com\/sharer\/sharer.php?u=https%3A%2F%2Fwww.deptagency.com%2Fen-dk%2Finsight%2Fhow-to-create-a-seamless-experience-with-modular-web-design%2F\"\n\t\t\t\tdata-share-url=\"https:\/\/www.deptagency.com\/en-dk\/insight\/how-to-create-a-seamless-experience-with-modular-web-design\/\"\n\t\t\t\tdata-share-title=\"How to create a seamless experience with modular web design\"\n\t\t\t\tdata-share-type=\"facebook\"\n\t\t\t\tclass=\"block-title-and-content__social-links-item js-social-link\"\n\t\t\t\taria-label=\"Share to Facebook\"\n\t\t\t\t\t\t\t\t\ttarget=\"_blank\"\n\t\t\t\t\trel=\"noopener noreferrer\"\n\t\t\t\t\n\t\t\t\t\t\t\t>\n\t\t\t\t<svg width='14' height='22' viewBox='0 0 14 22' fill='none' xmlns='http: \/\/www.w3.org\/2000\/svg'><path d='M4.032 22L4 12H0V8h4V5.5C4 1.789 6.298 0 9.61 0c1.585 0 2.948.118 3.345.17v3.88H10.66c-1.8 0-2.15.856-2.15 2.112V8h5.241l-2 4H8.51v10H4.032z' fill='currentColor'\/><\/svg>\t\t\t<\/a>\n\t\t\t\t\t\t<a\n\t\t\t\thref=\"https:\/\/api.whatsapp.com\/send?text=https%3A%2F%2Fwww.deptagency.com%2Fen-dk%2Finsight%2Fhow-to-create-a-seamless-experience-with-modular-web-design%2F\"\n\t\t\t\tdata-share-url=\"https:\/\/www.deptagency.com\/en-dk\/insight\/how-to-create-a-seamless-experience-with-modular-web-design\/\"\n\t\t\t\tdata-share-title=\"How to create a seamless experience with modular web design\"\n\t\t\t\tdata-share-type=\"whatsapp\"\n\t\t\t\tclass=\"block-title-and-content__social-links-item js-social-link\"\n\t\t\t\taria-label=\"Share to Whatsapp\"\n\t\t\t\t\t\t\t\t\ttarget=\"_blank\"\n\t\t\t\t\trel=\"noopener noreferrer\"\n\t\t\t\t\n\t\t\t\t\t\t\t>\n\t\t\t\t<svg xmlns='http: \/\/www.w3.org\/2000\/svg' width='25' height='24' viewBox='0 0 25 24'><path d='M.805 24l1.687-6.163a11.869 11.869 0 01-1.588-5.945C.907 5.335 6.244 0 12.801 0c3.182.001 6.17 1.24 8.415 3.488a11.819 11.819 0 013.481 8.413c-.002 6.558-5.34 11.893-11.896 11.893h-.005c-1.99-.001-3.947-.5-5.685-1.448L.805 24zm6.598-3.807l.361.214a9.874 9.874 0 005.033 1.378h.004c5.45 0 9.885-4.434 9.888-9.885a9.824 9.824 0 00-2.894-6.993 9.823 9.823 0 00-6.99-2.898c-5.454 0-9.89 4.434-9.892 9.884a9.86 9.86 0 001.512 5.26l.235.374-.999 3.648 3.742-.982z' fill='currentColor'\/><path d='M9.825 6.921c-.24-.58-.486-.501-.668-.51-.174-.009-.372-.01-.57-.01-.198 0-.52.074-.793.371-.272.298-1.04 1.017-1.04 2.48 0 1.462 1.065 2.875 1.214 3.073.148.199 2.096 3.2 5.078 4.487.709.306 1.262.49 1.694.626.712.226 1.36.194 1.872.118.571-.085 1.759-.72 2.007-1.413.247-.694.247-1.29.173-1.413-.074-.124-.272-.199-.57-.347-.297-.149-1.758-.868-2.03-.967-.273-.1-.471-.149-.67.149-.198.297-.767.966-.94 1.165-.174.198-.348.223-.645.074-.297-.149-1.255-.462-2.39-1.475-.884-.788-1.48-1.76-1.654-2.058-.173-.298-.018-.459.13-.607.134-.133.298-.347.446-.52.149-.174.199-.298.298-.496.099-.198.05-.372-.025-.52-.074-.15-.669-1.612-.917-2.207z' fill='currentColor'\/><\/svg>\t\t\t<\/a>\n\t\t\t\t\t\t<a\n\t\t\t\thref=\"https:\/\/twitter.com\/intent\/tweet?url=https%3A%2F%2Fwww.deptagency.com%2Fen-dk%2Finsight%2Fhow-to-create-a-seamless-experience-with-modular-web-design%2F&#038;text=How%20to%20create%20a%20seamless%20experience%20with%20modular%20web%20design\"\n\t\t\t\tdata-share-url=\"https:\/\/www.deptagency.com\/en-dk\/insight\/how-to-create-a-seamless-experience-with-modular-web-design\/\"\n\t\t\t\tdata-share-title=\"How to create a seamless experience with modular web design\"\n\t\t\t\tdata-share-type=\"twitter\"\n\t\t\t\tclass=\"block-title-and-content__social-links-item js-social-link\"\n\t\t\t\taria-label=\"Share to Twitter\"\n\t\t\t\t\t\t\t\t\ttarget=\"_blank\"\n\t\t\t\t\trel=\"noopener noreferrer\"\n\t\t\t\t\n\t\t\t\t\t\t\t>\n\t\t\t\t<svg width='25' height='20' viewBox='0 0 25 20' fill='none' xmlns='http: \/\/www.w3.org\/2000\/svg'><path d='M24.75 2.3c-.9.4-1.8.7-2.8.8 1-.6 1.8-1.6 2.2-2.7-1 .6-2 1-3.1 1.2-.9-1-2.2-1.6-3.6-1.6-2.7 0-4.9 2.2-4.9 4.9 0 .4 0 .8.1 1.1-4.2-.2-7.8-2.2-10.2-5.2-.5.8-.7 1.6-.7 2.5 0 1.7.9 3.2 2.2 4.1-.8 0-1.6-.2-2.2-.6v.1c0 2.4 1.7 4.4 3.9 4.8-.4.1-.8.2-1.3.2-.3 0-.6 0-.9-.1.6 2 2.4 3.4 4.6 3.4-1.7 1.3-3.8 2.1-6.1 2.1-.4 0-.8 0-1.2-.1 2.2 1.4 4.8 2.2 7.5 2.2 9.1 0 14-7.5 14-14v-.6c1-.7 1.8-1.6 2.5-2.5z' fill='currentColor'\/><\/svg>\t\t\t<\/a>\n\t\t\t\t\t\t<a\n\t\t\t\thref=\"http:\/\/www.linkedin.com\/shareArticle?mini=true&#038;url=https%3A%2F%2Fwww.deptagency.com%2Fen-dk%2Finsight%2Fhow-to-create-a-seamless-experience-with-modular-web-design%2F\"\n\t\t\t\tdata-share-url=\"https:\/\/www.deptagency.com\/en-dk\/insight\/how-to-create-a-seamless-experience-with-modular-web-design\/\"\n\t\t\t\tdata-share-title=\"How to create a seamless experience with modular web design\"\n\t\t\t\tdata-share-type=\"linkedin\"\n\t\t\t\tclass=\"block-title-and-content__social-links-item js-social-link\"\n\t\t\t\taria-label=\"Share to Linkedin\"\n\t\t\t\t\t\t\t\t\ttarget=\"_blank\"\n\t\t\t\t\trel=\"noopener noreferrer\"\n\t\t\t\t\n\t\t\t\t\t\t\t>\n\t\t\t\t<svg width='19' height='18' viewBox='0 0 19 18' fill='none' xmlns='http: \/\/www.w3.org\/2000\/svg'><path d='M1.15 17.3h3.6V5.8h-3.6v11.5zM.75 2.1c0 1.2 1 2.1 2.1 2.1 1.2 0 2.1-.9 2.1-2.1 0-1.2-1-2.1-2.1-2.1-1.2 0-2.1 1-2.1 2.1zM14.45 17.3h3.6v-6.2c0-3.1-.7-5.5-4.3-5.5-1.8 0-2.9.9-3.4 1.8V5.8h-3.4v11.5h3.6v-5.7c0-1.5.2-2.9 2.1-2.9 1.8 0 1.8 1.7 1.8 3v5.6z' fill='currentColor'\/><\/svg>\t\t\t<\/a>\n\t\t\t\t<\/div>\n<\/div>\n\n<div class=\"block-title-and-content js-block-title-and-content block-title-and-content__theme--onyxGrey\">\n\t<div class=\"block-title-and-content__layout\">\n\t\t<h2\t\tclass=\"typography block-title-and-content__title typography__color--white typography__size--h2 typography__align--left\"\n\t\tdata-size-mobile=\"h2\" \t>\n\t\tWhat is modular web design?\u00a0\t<\/h2>\n\t\t\t\t\t<div class=\"block-title-and-content__content\">\n\t\t\t\t\n<div class='block-title-and-content__item'><div class='block-title-and-content__item-inner'><p\t\tclass=\"typography block-typography__typography typography__color--lightGrey typography__size--regular-body typography__align--left\"\n\t\t\t>\n\t\tModular web design uses a module-based design system to structure web pages. Think of a module as a section of a page that is made up of smaller elements.\u00a0<br><br>For instance, you might have a module called \u201cNewsletter Sign Up Block\u201d which consists of a soft gradient fading background, a video on the left with a heading, a section for body copy, an input for email, and a signup button.\u00a0\t<\/p><\/div><\/div>\n\t\t\t<\/div>\n\t\t\t<\/div>\n\n\t\n\t<div class=\"block-title-and-content__social-links\">\n\t\t\t\t\t<a\n\t\t\t\thref=\"https:\/\/www.deptagency.com\/en-dk\/insight\/how-to-create-a-seamless-experience-with-modular-web-design\/\"\n\t\t\t\tdata-share-url=\"https:\/\/www.deptagency.com\/en-dk\/insight\/how-to-create-a-seamless-experience-with-modular-web-design\/\"\n\t\t\t\tdata-share-title=\"How to create a seamless experience with modular web design\"\n\t\t\t\tdata-share-type=\"copy\"\n\t\t\t\tclass=\"block-title-and-content__social-links-item js-social-link\"\n\t\t\t\taria-label=\"Copy page link\"\n\t\t\t\t\n\t\t\t\t\t\t\t\t\tdata-tooltip=\"true\"\n\t\t\t\t\tdata-tooltip-text=\"Link copied to clipboard.\"\n\t\t\t\t\t\t\t>\n\t\t\t\t<svg fill='none' xmlns='http: \/\/www.w3.org\/2000\/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M6.832 15.167l8.333-8.333M9.332 6.001l2.787-2.787a4.715 4.715 0 016.666 0v0a4.715 4.715 0 010 6.667L16 12.668M5.999 9.334l-2.787 2.787a4.715 4.715 0 000 6.666v0a4.715 4.715 0 006.667 0l2.787-2.786' stroke='currentColor' stroke-width='2'\/><\/svg>\t\t\t<\/a>\n\t\t\t\t\t\t<a\n\t\t\t\thref=\"https:\/\/www.facebook.com\/sharer\/sharer.php?u=https%3A%2F%2Fwww.deptagency.com%2Fen-dk%2Finsight%2Fhow-to-create-a-seamless-experience-with-modular-web-design%2F\"\n\t\t\t\tdata-share-url=\"https:\/\/www.deptagency.com\/en-dk\/insight\/how-to-create-a-seamless-experience-with-modular-web-design\/\"\n\t\t\t\tdata-share-title=\"How to create a seamless experience with modular web design\"\n\t\t\t\tdata-share-type=\"facebook\"\n\t\t\t\tclass=\"block-title-and-content__social-links-item js-social-link\"\n\t\t\t\taria-label=\"Share to Facebook\"\n\t\t\t\t\t\t\t\t\ttarget=\"_blank\"\n\t\t\t\t\trel=\"noopener noreferrer\"\n\t\t\t\t\n\t\t\t\t\t\t\t>\n\t\t\t\t<svg width='14' height='22' viewBox='0 0 14 22' fill='none' xmlns='http: \/\/www.w3.org\/2000\/svg'><path d='M4.032 22L4 12H0V8h4V5.5C4 1.789 6.298 0 9.61 0c1.585 0 2.948.118 3.345.17v3.88H10.66c-1.8 0-2.15.856-2.15 2.112V8h5.241l-2 4H8.51v10H4.032z' fill='currentColor'\/><\/svg>\t\t\t<\/a>\n\t\t\t\t\t\t<a\n\t\t\t\thref=\"https:\/\/api.whatsapp.com\/send?text=https%3A%2F%2Fwww.deptagency.com%2Fen-dk%2Finsight%2Fhow-to-create-a-seamless-experience-with-modular-web-design%2F\"\n\t\t\t\tdata-share-url=\"https:\/\/www.deptagency.com\/en-dk\/insight\/how-to-create-a-seamless-experience-with-modular-web-design\/\"\n\t\t\t\tdata-share-title=\"How to create a seamless experience with modular web design\"\n\t\t\t\tdata-share-type=\"whatsapp\"\n\t\t\t\tclass=\"block-title-and-content__social-links-item js-social-link\"\n\t\t\t\taria-label=\"Share to Whatsapp\"\n\t\t\t\t\t\t\t\t\ttarget=\"_blank\"\n\t\t\t\t\trel=\"noopener noreferrer\"\n\t\t\t\t\n\t\t\t\t\t\t\t>\n\t\t\t\t<svg xmlns='http: \/\/www.w3.org\/2000\/svg' width='25' height='24' viewBox='0 0 25 24'><path d='M.805 24l1.687-6.163a11.869 11.869 0 01-1.588-5.945C.907 5.335 6.244 0 12.801 0c3.182.001 6.17 1.24 8.415 3.488a11.819 11.819 0 013.481 8.413c-.002 6.558-5.34 11.893-11.896 11.893h-.005c-1.99-.001-3.947-.5-5.685-1.448L.805 24zm6.598-3.807l.361.214a9.874 9.874 0 005.033 1.378h.004c5.45 0 9.885-4.434 9.888-9.885a9.824 9.824 0 00-2.894-6.993 9.823 9.823 0 00-6.99-2.898c-5.454 0-9.89 4.434-9.892 9.884a9.86 9.86 0 001.512 5.26l.235.374-.999 3.648 3.742-.982z' fill='currentColor'\/><path d='M9.825 6.921c-.24-.58-.486-.501-.668-.51-.174-.009-.372-.01-.57-.01-.198 0-.52.074-.793.371-.272.298-1.04 1.017-1.04 2.48 0 1.462 1.065 2.875 1.214 3.073.148.199 2.096 3.2 5.078 4.487.709.306 1.262.49 1.694.626.712.226 1.36.194 1.872.118.571-.085 1.759-.72 2.007-1.413.247-.694.247-1.29.173-1.413-.074-.124-.272-.199-.57-.347-.297-.149-1.758-.868-2.03-.967-.273-.1-.471-.149-.67.149-.198.297-.767.966-.94 1.165-.174.198-.348.223-.645.074-.297-.149-1.255-.462-2.39-1.475-.884-.788-1.48-1.76-1.654-2.058-.173-.298-.018-.459.13-.607.134-.133.298-.347.446-.52.149-.174.199-.298.298-.496.099-.198.05-.372-.025-.52-.074-.15-.669-1.612-.917-2.207z' fill='currentColor'\/><\/svg>\t\t\t<\/a>\n\t\t\t\t\t\t<a\n\t\t\t\thref=\"https:\/\/twitter.com\/intent\/tweet?url=https%3A%2F%2Fwww.deptagency.com%2Fen-dk%2Finsight%2Fhow-to-create-a-seamless-experience-with-modular-web-design%2F&#038;text=How%20to%20create%20a%20seamless%20experience%20with%20modular%20web%20design\"\n\t\t\t\tdata-share-url=\"https:\/\/www.deptagency.com\/en-dk\/insight\/how-to-create-a-seamless-experience-with-modular-web-design\/\"\n\t\t\t\tdata-share-title=\"How to create a seamless experience with modular web design\"\n\t\t\t\tdata-share-type=\"twitter\"\n\t\t\t\tclass=\"block-title-and-content__social-links-item js-social-link\"\n\t\t\t\taria-label=\"Share to Twitter\"\n\t\t\t\t\t\t\t\t\ttarget=\"_blank\"\n\t\t\t\t\trel=\"noopener noreferrer\"\n\t\t\t\t\n\t\t\t\t\t\t\t>\n\t\t\t\t<svg width='25' height='20' viewBox='0 0 25 20' fill='none' xmlns='http: \/\/www.w3.org\/2000\/svg'><path d='M24.75 2.3c-.9.4-1.8.7-2.8.8 1-.6 1.8-1.6 2.2-2.7-1 .6-2 1-3.1 1.2-.9-1-2.2-1.6-3.6-1.6-2.7 0-4.9 2.2-4.9 4.9 0 .4 0 .8.1 1.1-4.2-.2-7.8-2.2-10.2-5.2-.5.8-.7 1.6-.7 2.5 0 1.7.9 3.2 2.2 4.1-.8 0-1.6-.2-2.2-.6v.1c0 2.4 1.7 4.4 3.9 4.8-.4.1-.8.2-1.3.2-.3 0-.6 0-.9-.1.6 2 2.4 3.4 4.6 3.4-1.7 1.3-3.8 2.1-6.1 2.1-.4 0-.8 0-1.2-.1 2.2 1.4 4.8 2.2 7.5 2.2 9.1 0 14-7.5 14-14v-.6c1-.7 1.8-1.6 2.5-2.5z' fill='currentColor'\/><\/svg>\t\t\t<\/a>\n\t\t\t\t\t\t<a\n\t\t\t\thref=\"http:\/\/www.linkedin.com\/shareArticle?mini=true&#038;url=https%3A%2F%2Fwww.deptagency.com%2Fen-dk%2Finsight%2Fhow-to-create-a-seamless-experience-with-modular-web-design%2F\"\n\t\t\t\tdata-share-url=\"https:\/\/www.deptagency.com\/en-dk\/insight\/how-to-create-a-seamless-experience-with-modular-web-design\/\"\n\t\t\t\tdata-share-title=\"How to create a seamless experience with modular web design\"\n\t\t\t\tdata-share-type=\"linkedin\"\n\t\t\t\tclass=\"block-title-and-content__social-links-item js-social-link\"\n\t\t\t\taria-label=\"Share to Linkedin\"\n\t\t\t\t\t\t\t\t\ttarget=\"_blank\"\n\t\t\t\t\trel=\"noopener noreferrer\"\n\t\t\t\t\n\t\t\t\t\t\t\t>\n\t\t\t\t<svg width='19' height='18' viewBox='0 0 19 18' fill='none' xmlns='http: \/\/www.w3.org\/2000\/svg'><path d='M1.15 17.3h3.6V5.8h-3.6v11.5zM.75 2.1c0 1.2 1 2.1 2.1 2.1 1.2 0 2.1-.9 2.1-2.1 0-1.2-1-2.1-2.1-2.1-1.2 0-2.1 1-2.1 2.1zM14.45 17.3h3.6v-6.2c0-3.1-.7-5.5-4.3-5.5-1.8 0-2.9.9-3.4 1.8V5.8h-3.4v11.5h3.6v-5.7c0-1.5.2-2.9 2.1-2.9 1.8 0 1.8 1.7 1.8 3v5.6z' fill='currentColor'\/><\/svg>\t\t\t<\/a>\n\t\t\t\t<\/div>\n<\/div>\n\n<div\n\t\tclass=\"image-wrap block-image__image-wrap\"\n\t\tdata-align=\"center center\"\n\t\t\t>\n\n\t\t\t<picture\n\t\tclass=\"image__picture\"\n\t\t\t\t>\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t<img\n\t\t\t\tsrc=\"https:\/\/www.deptagency.com\/wp-content\/uploads\/2022\/12\/modular-web-design-newsletter-example.jpg\"\n\t\t\t\tclass=\"image block-image__image\"\n\n\t\t\t\t\t\t\t\talt=\"modular web design newsletter example \"\n\t\t\t\t\n\t\t\t\t\t\t\t\t\tloading=\"lazy\"\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\t\t\/>\n\t\t<\/picture>\n\t\n\t<\/div>\n\n<div class=\"block-title-and-content js-block-title-and-content block-title-and-content__theme--white\">\n\t<div class=\"block-title-and-content__layout\">\n\t\t\n\t\t\t\t\t<div class=\"block-title-and-content__content\">\n\t\t\t\t\n<div class='block-title-and-content__item'><div class='block-title-and-content__item-inner'><p\t\tclass=\"typography block-typography__typography typography__color--onyxGrey typography__size--regular-body typography__align--left\"\n\t\t\t>\n\t\tThis module is made up of branded components that are reused across the site. The same heading style, button style, input field, and background gradient are used elsewhere in the system.\u00a0<br><br>The real power of the modular system comes from its variable nature. In this instance, we talk about these items being used in combination to create the \u201cNewsletter Sign Up Block.&#8221;\u00a0<br><br><a href=\"https:\/\/www.deptagency.com\/insight\/before-you-create-a-design-system-do-these-three-things-2\/\" target=\"_blank\" rel=\"noreferrer noopener\">Recall this &#8220;Zonal Definitions&#8221; exercise<\/a>. A more robust and flexible way to think about your module system is to assign modules to zones of purpose. The &#8220;newsletter sign-up block&#8221; falls into the zone of &#8220;Conversion.&#8221; If we think about it that way, we can start to see how the &#8220;newsletter sign-up block&#8221; is just one of many modules that fall under the category of &#8220;Conversion.\u201d The modules in these categories can utilise variants that are slightly different design executions utilising common UI elements for a similar purpose.\u00a0<br><br>Building your modular design system from this philosophy will help you design for greater flexibility and scalability.\t<\/p><\/div><\/div>\n\t\t\t<\/div>\n\t\t\t<\/div>\n\n\t\n\t<div class=\"block-title-and-content__social-links\">\n\t\t\t\t\t<a\n\t\t\t\thref=\"https:\/\/www.deptagency.com\/en-dk\/insight\/how-to-create-a-seamless-experience-with-modular-web-design\/\"\n\t\t\t\tdata-share-url=\"https:\/\/www.deptagency.com\/en-dk\/insight\/how-to-create-a-seamless-experience-with-modular-web-design\/\"\n\t\t\t\tdata-share-title=\"How to create a seamless experience with modular web design\"\n\t\t\t\tdata-share-type=\"copy\"\n\t\t\t\tclass=\"block-title-and-content__social-links-item js-social-link\"\n\t\t\t\taria-label=\"Copy page link\"\n\t\t\t\t\n\t\t\t\t\t\t\t\t\tdata-tooltip=\"true\"\n\t\t\t\t\tdata-tooltip-text=\"Link copied to clipboard.\"\n\t\t\t\t\t\t\t>\n\t\t\t\t<svg fill='none' xmlns='http: \/\/www.w3.org\/2000\/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M6.832 15.167l8.333-8.333M9.332 6.001l2.787-2.787a4.715 4.715 0 016.666 0v0a4.715 4.715 0 010 6.667L16 12.668M5.999 9.334l-2.787 2.787a4.715 4.715 0 000 6.666v0a4.715 4.715 0 006.667 0l2.787-2.786' stroke='currentColor' stroke-width='2'\/><\/svg>\t\t\t<\/a>\n\t\t\t\t\t\t<a\n\t\t\t\thref=\"https:\/\/www.facebook.com\/sharer\/sharer.php?u=https%3A%2F%2Fwww.deptagency.com%2Fen-dk%2Finsight%2Fhow-to-create-a-seamless-experience-with-modular-web-design%2F\"\n\t\t\t\tdata-share-url=\"https:\/\/www.deptagency.com\/en-dk\/insight\/how-to-create-a-seamless-experience-with-modular-web-design\/\"\n\t\t\t\tdata-share-title=\"How to create a seamless experience with modular web design\"\n\t\t\t\tdata-share-type=\"facebook\"\n\t\t\t\tclass=\"block-title-and-content__social-links-item js-social-link\"\n\t\t\t\taria-label=\"Share to Facebook\"\n\t\t\t\t\t\t\t\t\ttarget=\"_blank\"\n\t\t\t\t\trel=\"noopener noreferrer\"\n\t\t\t\t\n\t\t\t\t\t\t\t>\n\t\t\t\t<svg width='14' height='22' viewBox='0 0 14 22' fill='none' xmlns='http: \/\/www.w3.org\/2000\/svg'><path d='M4.032 22L4 12H0V8h4V5.5C4 1.789 6.298 0 9.61 0c1.585 0 2.948.118 3.345.17v3.88H10.66c-1.8 0-2.15.856-2.15 2.112V8h5.241l-2 4H8.51v10H4.032z' fill='currentColor'\/><\/svg>\t\t\t<\/a>\n\t\t\t\t\t\t<a\n\t\t\t\thref=\"https:\/\/api.whatsapp.com\/send?text=https%3A%2F%2Fwww.deptagency.com%2Fen-dk%2Finsight%2Fhow-to-create-a-seamless-experience-with-modular-web-design%2F\"\n\t\t\t\tdata-share-url=\"https:\/\/www.deptagency.com\/en-dk\/insight\/how-to-create-a-seamless-experience-with-modular-web-design\/\"\n\t\t\t\tdata-share-title=\"How to create a seamless experience with modular web design\"\n\t\t\t\tdata-share-type=\"whatsapp\"\n\t\t\t\tclass=\"block-title-and-content__social-links-item js-social-link\"\n\t\t\t\taria-label=\"Share to Whatsapp\"\n\t\t\t\t\t\t\t\t\ttarget=\"_blank\"\n\t\t\t\t\trel=\"noopener noreferrer\"\n\t\t\t\t\n\t\t\t\t\t\t\t>\n\t\t\t\t<svg xmlns='http: \/\/www.w3.org\/2000\/svg' width='25' height='24' viewBox='0 0 25 24'><path d='M.805 24l1.687-6.163a11.869 11.869 0 01-1.588-5.945C.907 5.335 6.244 0 12.801 0c3.182.001 6.17 1.24 8.415 3.488a11.819 11.819 0 013.481 8.413c-.002 6.558-5.34 11.893-11.896 11.893h-.005c-1.99-.001-3.947-.5-5.685-1.448L.805 24zm6.598-3.807l.361.214a9.874 9.874 0 005.033 1.378h.004c5.45 0 9.885-4.434 9.888-9.885a9.824 9.824 0 00-2.894-6.993 9.823 9.823 0 00-6.99-2.898c-5.454 0-9.89 4.434-9.892 9.884a9.86 9.86 0 001.512 5.26l.235.374-.999 3.648 3.742-.982z' fill='currentColor'\/><path d='M9.825 6.921c-.24-.58-.486-.501-.668-.51-.174-.009-.372-.01-.57-.01-.198 0-.52.074-.793.371-.272.298-1.04 1.017-1.04 2.48 0 1.462 1.065 2.875 1.214 3.073.148.199 2.096 3.2 5.078 4.487.709.306 1.262.49 1.694.626.712.226 1.36.194 1.872.118.571-.085 1.759-.72 2.007-1.413.247-.694.247-1.29.173-1.413-.074-.124-.272-.199-.57-.347-.297-.149-1.758-.868-2.03-.967-.273-.1-.471-.149-.67.149-.198.297-.767.966-.94 1.165-.174.198-.348.223-.645.074-.297-.149-1.255-.462-2.39-1.475-.884-.788-1.48-1.76-1.654-2.058-.173-.298-.018-.459.13-.607.134-.133.298-.347.446-.52.149-.174.199-.298.298-.496.099-.198.05-.372-.025-.52-.074-.15-.669-1.612-.917-2.207z' fill='currentColor'\/><\/svg>\t\t\t<\/a>\n\t\t\t\t\t\t<a\n\t\t\t\thref=\"https:\/\/twitter.com\/intent\/tweet?url=https%3A%2F%2Fwww.deptagency.com%2Fen-dk%2Finsight%2Fhow-to-create-a-seamless-experience-with-modular-web-design%2F&#038;text=How%20to%20create%20a%20seamless%20experience%20with%20modular%20web%20design\"\n\t\t\t\tdata-share-url=\"https:\/\/www.deptagency.com\/en-dk\/insight\/how-to-create-a-seamless-experience-with-modular-web-design\/\"\n\t\t\t\tdata-share-title=\"How to create a seamless experience with modular web design\"\n\t\t\t\tdata-share-type=\"twitter\"\n\t\t\t\tclass=\"block-title-and-content__social-links-item js-social-link\"\n\t\t\t\taria-label=\"Share to Twitter\"\n\t\t\t\t\t\t\t\t\ttarget=\"_blank\"\n\t\t\t\t\trel=\"noopener noreferrer\"\n\t\t\t\t\n\t\t\t\t\t\t\t>\n\t\t\t\t<svg width='25' height='20' viewBox='0 0 25 20' fill='none' xmlns='http: \/\/www.w3.org\/2000\/svg'><path d='M24.75 2.3c-.9.4-1.8.7-2.8.8 1-.6 1.8-1.6 2.2-2.7-1 .6-2 1-3.1 1.2-.9-1-2.2-1.6-3.6-1.6-2.7 0-4.9 2.2-4.9 4.9 0 .4 0 .8.1 1.1-4.2-.2-7.8-2.2-10.2-5.2-.5.8-.7 1.6-.7 2.5 0 1.7.9 3.2 2.2 4.1-.8 0-1.6-.2-2.2-.6v.1c0 2.4 1.7 4.4 3.9 4.8-.4.1-.8.2-1.3.2-.3 0-.6 0-.9-.1.6 2 2.4 3.4 4.6 3.4-1.7 1.3-3.8 2.1-6.1 2.1-.4 0-.8 0-1.2-.1 2.2 1.4 4.8 2.2 7.5 2.2 9.1 0 14-7.5 14-14v-.6c1-.7 1.8-1.6 2.5-2.5z' fill='currentColor'\/><\/svg>\t\t\t<\/a>\n\t\t\t\t\t\t<a\n\t\t\t\thref=\"http:\/\/www.linkedin.com\/shareArticle?mini=true&#038;url=https%3A%2F%2Fwww.deptagency.com%2Fen-dk%2Finsight%2Fhow-to-create-a-seamless-experience-with-modular-web-design%2F\"\n\t\t\t\tdata-share-url=\"https:\/\/www.deptagency.com\/en-dk\/insight\/how-to-create-a-seamless-experience-with-modular-web-design\/\"\n\t\t\t\tdata-share-title=\"How to create a seamless experience with modular web design\"\n\t\t\t\tdata-share-type=\"linkedin\"\n\t\t\t\tclass=\"block-title-and-content__social-links-item js-social-link\"\n\t\t\t\taria-label=\"Share to Linkedin\"\n\t\t\t\t\t\t\t\t\ttarget=\"_blank\"\n\t\t\t\t\trel=\"noopener noreferrer\"\n\t\t\t\t\n\t\t\t\t\t\t\t>\n\t\t\t\t<svg width='19' height='18' viewBox='0 0 19 18' fill='none' xmlns='http: \/\/www.w3.org\/2000\/svg'><path d='M1.15 17.3h3.6V5.8h-3.6v11.5zM.75 2.1c0 1.2 1 2.1 2.1 2.1 1.2 0 2.1-.9 2.1-2.1 0-1.2-1-2.1-2.1-2.1-1.2 0-2.1 1-2.1 2.1zM14.45 17.3h3.6v-6.2c0-3.1-.7-5.5-4.3-5.5-1.8 0-2.9.9-3.4 1.8V5.8h-3.4v11.5h3.6v-5.7c0-1.5.2-2.9 2.1-2.9 1.8 0 1.8 1.7 1.8 3v5.6z' fill='currentColor'\/><\/svg>\t\t\t<\/a>\n\t\t\t\t<\/div>\n<\/div>\n\n<div\n\t\tclass=\"image-wrap block-image__image-wrap\"\n\t\tdata-align=\"center center\"\n\t\t\t>\n\n\t\t\t<picture\n\t\tclass=\"image__picture\"\n\t\t\t\t>\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t<img\n\t\t\t\tsrc=\"https:\/\/www.deptagency.com\/wp-content\/uploads\/2022\/12\/moduar-web-design-modules.jpg\"\n\t\t\t\tclass=\"image block-image__image\"\n\n\t\t\t\t\t\t\t\talt=\"modular web design modules\"\n\t\t\t\t\n\t\t\t\t\t\t\t\t\tloading=\"lazy\"\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\t\t\/>\n\t\t<\/picture>\n\t\n\t<\/div>\n\n<div class=\"block-title-and-content js-block-title-and-content block-title-and-content__theme--white\">\n\t<div class=\"block-title-and-content__layout\">\n\t\t\n\t\t\t\t\t<div class=\"block-title-and-content__content\">\n\t\t\t\t\n<div class='block-title-and-content__item'><div class='block-title-and-content__item-inner'><p\t\tclass=\"typography block-typography__typography typography__color--onyxGrey typography__size--regular-body typography__align--left\"\n\t\t\t>\n\t\tWhat this allows you to do is create flexible modules, built from familiar design elements branded to your system. <br><br>The end result is a module library with a plethora of variations that feels flexible yet consistent and repeatable.\u00a0\t<\/p><\/div><\/div>\n\t\t\t<\/div>\n\t\t\t<\/div>\n\n\t\n\t<div class=\"block-title-and-content__social-links\">\n\t\t\t\t\t<a\n\t\t\t\thref=\"https:\/\/www.deptagency.com\/en-dk\/insight\/how-to-create-a-seamless-experience-with-modular-web-design\/\"\n\t\t\t\tdata-share-url=\"https:\/\/www.deptagency.com\/en-dk\/insight\/how-to-create-a-seamless-experience-with-modular-web-design\/\"\n\t\t\t\tdata-share-title=\"How to create a seamless experience with modular web design\"\n\t\t\t\tdata-share-type=\"copy\"\n\t\t\t\tclass=\"block-title-and-content__social-links-item js-social-link\"\n\t\t\t\taria-label=\"Copy page link\"\n\t\t\t\t\n\t\t\t\t\t\t\t\t\tdata-tooltip=\"true\"\n\t\t\t\t\tdata-tooltip-text=\"Link copied to clipboard.\"\n\t\t\t\t\t\t\t>\n\t\t\t\t<svg fill='none' xmlns='http: \/\/www.w3.org\/2000\/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M6.832 15.167l8.333-8.333M9.332 6.001l2.787-2.787a4.715 4.715 0 016.666 0v0a4.715 4.715 0 010 6.667L16 12.668M5.999 9.334l-2.787 2.787a4.715 4.715 0 000 6.666v0a4.715 4.715 0 006.667 0l2.787-2.786' stroke='currentColor' stroke-width='2'\/><\/svg>\t\t\t<\/a>\n\t\t\t\t\t\t<a\n\t\t\t\thref=\"https:\/\/www.facebook.com\/sharer\/sharer.php?u=https%3A%2F%2Fwww.deptagency.com%2Fen-dk%2Finsight%2Fhow-to-create-a-seamless-experience-with-modular-web-design%2F\"\n\t\t\t\tdata-share-url=\"https:\/\/www.deptagency.com\/en-dk\/insight\/how-to-create-a-seamless-experience-with-modular-web-design\/\"\n\t\t\t\tdata-share-title=\"How to create a seamless experience with modular web design\"\n\t\t\t\tdata-share-type=\"facebook\"\n\t\t\t\tclass=\"block-title-and-content__social-links-item js-social-link\"\n\t\t\t\taria-label=\"Share to Facebook\"\n\t\t\t\t\t\t\t\t\ttarget=\"_blank\"\n\t\t\t\t\trel=\"noopener noreferrer\"\n\t\t\t\t\n\t\t\t\t\t\t\t>\n\t\t\t\t<svg width='14' height='22' viewBox='0 0 14 22' fill='none' xmlns='http: \/\/www.w3.org\/2000\/svg'><path d='M4.032 22L4 12H0V8h4V5.5C4 1.789 6.298 0 9.61 0c1.585 0 2.948.118 3.345.17v3.88H10.66c-1.8 0-2.15.856-2.15 2.112V8h5.241l-2 4H8.51v10H4.032z' fill='currentColor'\/><\/svg>\t\t\t<\/a>\n\t\t\t\t\t\t<a\n\t\t\t\thref=\"https:\/\/api.whatsapp.com\/send?text=https%3A%2F%2Fwww.deptagency.com%2Fen-dk%2Finsight%2Fhow-to-create-a-seamless-experience-with-modular-web-design%2F\"\n\t\t\t\tdata-share-url=\"https:\/\/www.deptagency.com\/en-dk\/insight\/how-to-create-a-seamless-experience-with-modular-web-design\/\"\n\t\t\t\tdata-share-title=\"How to create a seamless experience with modular web design\"\n\t\t\t\tdata-share-type=\"whatsapp\"\n\t\t\t\tclass=\"block-title-and-content__social-links-item js-social-link\"\n\t\t\t\taria-label=\"Share to Whatsapp\"\n\t\t\t\t\t\t\t\t\ttarget=\"_blank\"\n\t\t\t\t\trel=\"noopener noreferrer\"\n\t\t\t\t\n\t\t\t\t\t\t\t>\n\t\t\t\t<svg xmlns='http: \/\/www.w3.org\/2000\/svg' width='25' height='24' viewBox='0 0 25 24'><path d='M.805 24l1.687-6.163a11.869 11.869 0 01-1.588-5.945C.907 5.335 6.244 0 12.801 0c3.182.001 6.17 1.24 8.415 3.488a11.819 11.819 0 013.481 8.413c-.002 6.558-5.34 11.893-11.896 11.893h-.005c-1.99-.001-3.947-.5-5.685-1.448L.805 24zm6.598-3.807l.361.214a9.874 9.874 0 005.033 1.378h.004c5.45 0 9.885-4.434 9.888-9.885a9.824 9.824 0 00-2.894-6.993 9.823 9.823 0 00-6.99-2.898c-5.454 0-9.89 4.434-9.892 9.884a9.86 9.86 0 001.512 5.26l.235.374-.999 3.648 3.742-.982z' fill='currentColor'\/><path d='M9.825 6.921c-.24-.58-.486-.501-.668-.51-.174-.009-.372-.01-.57-.01-.198 0-.52.074-.793.371-.272.298-1.04 1.017-1.04 2.48 0 1.462 1.065 2.875 1.214 3.073.148.199 2.096 3.2 5.078 4.487.709.306 1.262.49 1.694.626.712.226 1.36.194 1.872.118.571-.085 1.759-.72 2.007-1.413.247-.694.247-1.29.173-1.413-.074-.124-.272-.199-.57-.347-.297-.149-1.758-.868-2.03-.967-.273-.1-.471-.149-.67.149-.198.297-.767.966-.94 1.165-.174.198-.348.223-.645.074-.297-.149-1.255-.462-2.39-1.475-.884-.788-1.48-1.76-1.654-2.058-.173-.298-.018-.459.13-.607.134-.133.298-.347.446-.52.149-.174.199-.298.298-.496.099-.198.05-.372-.025-.52-.074-.15-.669-1.612-.917-2.207z' fill='currentColor'\/><\/svg>\t\t\t<\/a>\n\t\t\t\t\t\t<a\n\t\t\t\thref=\"https:\/\/twitter.com\/intent\/tweet?url=https%3A%2F%2Fwww.deptagency.com%2Fen-dk%2Finsight%2Fhow-to-create-a-seamless-experience-with-modular-web-design%2F&#038;text=How%20to%20create%20a%20seamless%20experience%20with%20modular%20web%20design\"\n\t\t\t\tdata-share-url=\"https:\/\/www.deptagency.com\/en-dk\/insight\/how-to-create-a-seamless-experience-with-modular-web-design\/\"\n\t\t\t\tdata-share-title=\"How to create a seamless experience with modular web design\"\n\t\t\t\tdata-share-type=\"twitter\"\n\t\t\t\tclass=\"block-title-and-content__social-links-item js-social-link\"\n\t\t\t\taria-label=\"Share to Twitter\"\n\t\t\t\t\t\t\t\t\ttarget=\"_blank\"\n\t\t\t\t\trel=\"noopener noreferrer\"\n\t\t\t\t\n\t\t\t\t\t\t\t>\n\t\t\t\t<svg width='25' height='20' viewBox='0 0 25 20' fill='none' xmlns='http: \/\/www.w3.org\/2000\/svg'><path d='M24.75 2.3c-.9.4-1.8.7-2.8.8 1-.6 1.8-1.6 2.2-2.7-1 .6-2 1-3.1 1.2-.9-1-2.2-1.6-3.6-1.6-2.7 0-4.9 2.2-4.9 4.9 0 .4 0 .8.1 1.1-4.2-.2-7.8-2.2-10.2-5.2-.5.8-.7 1.6-.7 2.5 0 1.7.9 3.2 2.2 4.1-.8 0-1.6-.2-2.2-.6v.1c0 2.4 1.7 4.4 3.9 4.8-.4.1-.8.2-1.3.2-.3 0-.6 0-.9-.1.6 2 2.4 3.4 4.6 3.4-1.7 1.3-3.8 2.1-6.1 2.1-.4 0-.8 0-1.2-.1 2.2 1.4 4.8 2.2 7.5 2.2 9.1 0 14-7.5 14-14v-.6c1-.7 1.8-1.6 2.5-2.5z' fill='currentColor'\/><\/svg>\t\t\t<\/a>\n\t\t\t\t\t\t<a\n\t\t\t\thref=\"http:\/\/www.linkedin.com\/shareArticle?mini=true&#038;url=https%3A%2F%2Fwww.deptagency.com%2Fen-dk%2Finsight%2Fhow-to-create-a-seamless-experience-with-modular-web-design%2F\"\n\t\t\t\tdata-share-url=\"https:\/\/www.deptagency.com\/en-dk\/insight\/how-to-create-a-seamless-experience-with-modular-web-design\/\"\n\t\t\t\tdata-share-title=\"How to create a seamless experience with modular web design\"\n\t\t\t\tdata-share-type=\"linkedin\"\n\t\t\t\tclass=\"block-title-and-content__social-links-item js-social-link\"\n\t\t\t\taria-label=\"Share to Linkedin\"\n\t\t\t\t\t\t\t\t\ttarget=\"_blank\"\n\t\t\t\t\trel=\"noopener noreferrer\"\n\t\t\t\t\n\t\t\t\t\t\t\t>\n\t\t\t\t<svg width='19' height='18' viewBox='0 0 19 18' fill='none' xmlns='http: \/\/www.w3.org\/2000\/svg'><path d='M1.15 17.3h3.6V5.8h-3.6v11.5zM.75 2.1c0 1.2 1 2.1 2.1 2.1 1.2 0 2.1-.9 2.1-2.1 0-1.2-1-2.1-2.1-2.1-1.2 0-2.1 1-2.1 2.1zM14.45 17.3h3.6v-6.2c0-3.1-.7-5.5-4.3-5.5-1.8 0-2.9.9-3.4 1.8V5.8h-3.4v11.5h3.6v-5.7c0-1.5.2-2.9 2.1-2.9 1.8 0 1.8 1.7 1.8 3v5.6z' fill='currentColor'\/><\/svg>\t\t\t<\/a>\n\t\t\t\t<\/div>\n<\/div>\n\n<div\n\t\tclass=\"image-wrap block-image__image-wrap\"\n\t\tdata-align=\"center center\"\n\t\t\t>\n\n\t\t\t<picture\n\t\tclass=\"image__picture\"\n\t\t\t\t>\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t<img\n\t\t\t\tsrc=\"https:\/\/www.deptagency.com\/wp-content\/uploads\/2022\/12\/modular-web-design-Variations.jpg\"\n\t\t\t\tclass=\"image block-image__image\"\n\n\t\t\t\t\t\t\t\talt=\"modular web design variations\"\n\t\t\t\t\n\t\t\t\t\t\t\t\t\tloading=\"lazy\"\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\t\t\/>\n\t\t<\/picture>\n\t\n\t<\/div>\n\n<div class=\"block-title-and-content js-block-title-and-content block-title-and-content__theme--white\">\n\t<div class=\"block-title-and-content__layout\">\n\t\t<h2\t\tclass=\"typography block-title-and-content__title typography__color--onyxGrey typography__size--h2 typography__align--left\"\n\t\tdata-size-mobile=\"h2\" \t>\n\t\t<br><br>This not only makes development significantly easier\u2013 it drives consistent, carefully crafted UI.\t<\/h2>\n\t\t\t\t\t<div class=\"block-title-and-content__content\">\n\t\t\t\t\t\t\t<\/div>\n\t\t\t<\/div>\n\n\t\n\t<div class=\"block-title-and-content__social-links\">\n\t\t\t\t\t<a\n\t\t\t\thref=\"https:\/\/www.deptagency.com\/en-dk\/insight\/how-to-create-a-seamless-experience-with-modular-web-design\/\"\n\t\t\t\tdata-share-url=\"https:\/\/www.deptagency.com\/en-dk\/insight\/how-to-create-a-seamless-experience-with-modular-web-design\/\"\n\t\t\t\tdata-share-title=\"How to create a seamless experience with modular web design\"\n\t\t\t\tdata-share-type=\"copy\"\n\t\t\t\tclass=\"block-title-and-content__social-links-item js-social-link\"\n\t\t\t\taria-label=\"Copy page link\"\n\t\t\t\t\n\t\t\t\t\t\t\t\t\tdata-tooltip=\"true\"\n\t\t\t\t\tdata-tooltip-text=\"Link copied to clipboard.\"\n\t\t\t\t\t\t\t>\n\t\t\t\t<svg fill='none' xmlns='http: \/\/www.w3.org\/2000\/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M6.832 15.167l8.333-8.333M9.332 6.001l2.787-2.787a4.715 4.715 0 016.666 0v0a4.715 4.715 0 010 6.667L16 12.668M5.999 9.334l-2.787 2.787a4.715 4.715 0 000 6.666v0a4.715 4.715 0 006.667 0l2.787-2.786' stroke='currentColor' stroke-width='2'\/><\/svg>\t\t\t<\/a>\n\t\t\t\t\t\t<a\n\t\t\t\thref=\"https:\/\/www.facebook.com\/sharer\/sharer.php?u=https%3A%2F%2Fwww.deptagency.com%2Fen-dk%2Finsight%2Fhow-to-create-a-seamless-experience-with-modular-web-design%2F\"\n\t\t\t\tdata-share-url=\"https:\/\/www.deptagency.com\/en-dk\/insight\/how-to-create-a-seamless-experience-with-modular-web-design\/\"\n\t\t\t\tdata-share-title=\"How to create a seamless experience with modular web design\"\n\t\t\t\tdata-share-type=\"facebook\"\n\t\t\t\tclass=\"block-title-and-content__social-links-item js-social-link\"\n\t\t\t\taria-label=\"Share to Facebook\"\n\t\t\t\t\t\t\t\t\ttarget=\"_blank\"\n\t\t\t\t\trel=\"noopener noreferrer\"\n\t\t\t\t\n\t\t\t\t\t\t\t>\n\t\t\t\t<svg width='14' height='22' viewBox='0 0 14 22' fill='none' xmlns='http: \/\/www.w3.org\/2000\/svg'><path d='M4.032 22L4 12H0V8h4V5.5C4 1.789 6.298 0 9.61 0c1.585 0 2.948.118 3.345.17v3.88H10.66c-1.8 0-2.15.856-2.15 2.112V8h5.241l-2 4H8.51v10H4.032z' fill='currentColor'\/><\/svg>\t\t\t<\/a>\n\t\t\t\t\t\t<a\n\t\t\t\thref=\"https:\/\/api.whatsapp.com\/send?text=https%3A%2F%2Fwww.deptagency.com%2Fen-dk%2Finsight%2Fhow-to-create-a-seamless-experience-with-modular-web-design%2F\"\n\t\t\t\tdata-share-url=\"https:\/\/www.deptagency.com\/en-dk\/insight\/how-to-create-a-seamless-experience-with-modular-web-design\/\"\n\t\t\t\tdata-share-title=\"How to create a seamless experience with modular web design\"\n\t\t\t\tdata-share-type=\"whatsapp\"\n\t\t\t\tclass=\"block-title-and-content__social-links-item js-social-link\"\n\t\t\t\taria-label=\"Share to Whatsapp\"\n\t\t\t\t\t\t\t\t\ttarget=\"_blank\"\n\t\t\t\t\trel=\"noopener noreferrer\"\n\t\t\t\t\n\t\t\t\t\t\t\t>\n\t\t\t\t<svg xmlns='http: \/\/www.w3.org\/2000\/svg' width='25' height='24' viewBox='0 0 25 24'><path d='M.805 24l1.687-6.163a11.869 11.869 0 01-1.588-5.945C.907 5.335 6.244 0 12.801 0c3.182.001 6.17 1.24 8.415 3.488a11.819 11.819 0 013.481 8.413c-.002 6.558-5.34 11.893-11.896 11.893h-.005c-1.99-.001-3.947-.5-5.685-1.448L.805 24zm6.598-3.807l.361.214a9.874 9.874 0 005.033 1.378h.004c5.45 0 9.885-4.434 9.888-9.885a9.824 9.824 0 00-2.894-6.993 9.823 9.823 0 00-6.99-2.898c-5.454 0-9.89 4.434-9.892 9.884a9.86 9.86 0 001.512 5.26l.235.374-.999 3.648 3.742-.982z' fill='currentColor'\/><path d='M9.825 6.921c-.24-.58-.486-.501-.668-.51-.174-.009-.372-.01-.57-.01-.198 0-.52.074-.793.371-.272.298-1.04 1.017-1.04 2.48 0 1.462 1.065 2.875 1.214 3.073.148.199 2.096 3.2 5.078 4.487.709.306 1.262.49 1.694.626.712.226 1.36.194 1.872.118.571-.085 1.759-.72 2.007-1.413.247-.694.247-1.29.173-1.413-.074-.124-.272-.199-.57-.347-.297-.149-1.758-.868-2.03-.967-.273-.1-.471-.149-.67.149-.198.297-.767.966-.94 1.165-.174.198-.348.223-.645.074-.297-.149-1.255-.462-2.39-1.475-.884-.788-1.48-1.76-1.654-2.058-.173-.298-.018-.459.13-.607.134-.133.298-.347.446-.52.149-.174.199-.298.298-.496.099-.198.05-.372-.025-.52-.074-.15-.669-1.612-.917-2.207z' fill='currentColor'\/><\/svg>\t\t\t<\/a>\n\t\t\t\t\t\t<a\n\t\t\t\thref=\"https:\/\/twitter.com\/intent\/tweet?url=https%3A%2F%2Fwww.deptagency.com%2Fen-dk%2Finsight%2Fhow-to-create-a-seamless-experience-with-modular-web-design%2F&#038;text=How%20to%20create%20a%20seamless%20experience%20with%20modular%20web%20design\"\n\t\t\t\tdata-share-url=\"https:\/\/www.deptagency.com\/en-dk\/insight\/how-to-create-a-seamless-experience-with-modular-web-design\/\"\n\t\t\t\tdata-share-title=\"How to create a seamless experience with modular web design\"\n\t\t\t\tdata-share-type=\"twitter\"\n\t\t\t\tclass=\"block-title-and-content__social-links-item js-social-link\"\n\t\t\t\taria-label=\"Share to Twitter\"\n\t\t\t\t\t\t\t\t\ttarget=\"_blank\"\n\t\t\t\t\trel=\"noopener noreferrer\"\n\t\t\t\t\n\t\t\t\t\t\t\t>\n\t\t\t\t<svg width='25' height='20' viewBox='0 0 25 20' fill='none' xmlns='http: \/\/www.w3.org\/2000\/svg'><path d='M24.75 2.3c-.9.4-1.8.7-2.8.8 1-.6 1.8-1.6 2.2-2.7-1 .6-2 1-3.1 1.2-.9-1-2.2-1.6-3.6-1.6-2.7 0-4.9 2.2-4.9 4.9 0 .4 0 .8.1 1.1-4.2-.2-7.8-2.2-10.2-5.2-.5.8-.7 1.6-.7 2.5 0 1.7.9 3.2 2.2 4.1-.8 0-1.6-.2-2.2-.6v.1c0 2.4 1.7 4.4 3.9 4.8-.4.1-.8.2-1.3.2-.3 0-.6 0-.9-.1.6 2 2.4 3.4 4.6 3.4-1.7 1.3-3.8 2.1-6.1 2.1-.4 0-.8 0-1.2-.1 2.2 1.4 4.8 2.2 7.5 2.2 9.1 0 14-7.5 14-14v-.6c1-.7 1.8-1.6 2.5-2.5z' fill='currentColor'\/><\/svg>\t\t\t<\/a>\n\t\t\t\t\t\t<a\n\t\t\t\thref=\"http:\/\/www.linkedin.com\/shareArticle?mini=true&#038;url=https%3A%2F%2Fwww.deptagency.com%2Fen-dk%2Finsight%2Fhow-to-create-a-seamless-experience-with-modular-web-design%2F\"\n\t\t\t\tdata-share-url=\"https:\/\/www.deptagency.com\/en-dk\/insight\/how-to-create-a-seamless-experience-with-modular-web-design\/\"\n\t\t\t\tdata-share-title=\"How to create a seamless experience with modular web design\"\n\t\t\t\tdata-share-type=\"linkedin\"\n\t\t\t\tclass=\"block-title-and-content__social-links-item js-social-link\"\n\t\t\t\taria-label=\"Share to Linkedin\"\n\t\t\t\t\t\t\t\t\ttarget=\"_blank\"\n\t\t\t\t\trel=\"noopener noreferrer\"\n\t\t\t\t\n\t\t\t\t\t\t\t>\n\t\t\t\t<svg width='19' height='18' viewBox='0 0 19 18' fill='none' xmlns='http: \/\/www.w3.org\/2000\/svg'><path d='M1.15 17.3h3.6V5.8h-3.6v11.5zM.75 2.1c0 1.2 1 2.1 2.1 2.1 1.2 0 2.1-.9 2.1-2.1 0-1.2-1-2.1-2.1-2.1-1.2 0-2.1 1-2.1 2.1zM14.45 17.3h3.6v-6.2c0-3.1-.7-5.5-4.3-5.5-1.8 0-2.9.9-3.4 1.8V5.8h-3.4v11.5h3.6v-5.7c0-1.5.2-2.9 2.1-2.9 1.8 0 1.8 1.7 1.8 3v5.6z' fill='currentColor'\/><\/svg>\t\t\t<\/a>\n\t\t\t\t<\/div>\n<\/div>\n\n<div class=\"block-title-and-content js-block-title-and-content block-title-and-content__theme--onyxGrey\">\n\t<div class=\"block-title-and-content__layout\">\n\t\t<h2\t\tclass=\"typography block-title-and-content__title typography__color--white typography__size--h2 typography__align--left\"\n\t\tdata-size-mobile=\"h2\" \t>\n\t\tThe common problems with modular-based design systems\u00a0\t<\/h2>\n\t\t\t\t\t<div class=\"block-title-and-content__content\">\n\t\t\t\t\n<div class='block-title-and-content__item'><div class='block-title-and-content__item-inner'><p\t\tclass=\"typography block-typography__typography typography__color--lightGrey typography__size--regular-body typography__align--left\"\n\t\t\t>\n\t\tModule web design sounds great, right? But there are some challenges with modular design.\u00a0<br><br>In many cases, it becomes obvious where one component begins and another ends, which results in a blocky \u201cWordPress\u201d builder look. In other cases, not enough variables are created and everything ends up looking the same. Both of these problems lead us to the question:\u00a0<br><br>How much variation should I have to create a seamless experience?\u00a0<br><br>This is the question we\u2019re going to attempt to answer with our tips below.\u00a0\t<\/p><\/div><\/div>\n\t\t\t<\/div>\n\t\t\t<\/div>\n\n\t\n\t<div class=\"block-title-and-content__social-links\">\n\t\t\t\t\t<a\n\t\t\t\thref=\"https:\/\/www.deptagency.com\/en-dk\/insight\/how-to-create-a-seamless-experience-with-modular-web-design\/\"\n\t\t\t\tdata-share-url=\"https:\/\/www.deptagency.com\/en-dk\/insight\/how-to-create-a-seamless-experience-with-modular-web-design\/\"\n\t\t\t\tdata-share-title=\"How to create a seamless experience with modular web design\"\n\t\t\t\tdata-share-type=\"copy\"\n\t\t\t\tclass=\"block-title-and-content__social-links-item js-social-link\"\n\t\t\t\taria-label=\"Copy page link\"\n\t\t\t\t\n\t\t\t\t\t\t\t\t\tdata-tooltip=\"true\"\n\t\t\t\t\tdata-tooltip-text=\"Link copied to clipboard.\"\n\t\t\t\t\t\t\t>\n\t\t\t\t<svg fill='none' xmlns='http: \/\/www.w3.org\/2000\/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M6.832 15.167l8.333-8.333M9.332 6.001l2.787-2.787a4.715 4.715 0 016.666 0v0a4.715 4.715 0 010 6.667L16 12.668M5.999 9.334l-2.787 2.787a4.715 4.715 0 000 6.666v0a4.715 4.715 0 006.667 0l2.787-2.786' stroke='currentColor' stroke-width='2'\/><\/svg>\t\t\t<\/a>\n\t\t\t\t\t\t<a\n\t\t\t\thref=\"https:\/\/www.facebook.com\/sharer\/sharer.php?u=https%3A%2F%2Fwww.deptagency.com%2Fen-dk%2Finsight%2Fhow-to-create-a-seamless-experience-with-modular-web-design%2F\"\n\t\t\t\tdata-share-url=\"https:\/\/www.deptagency.com\/en-dk\/insight\/how-to-create-a-seamless-experience-with-modular-web-design\/\"\n\t\t\t\tdata-share-title=\"How to create a seamless experience with modular web design\"\n\t\t\t\tdata-share-type=\"facebook\"\n\t\t\t\tclass=\"block-title-and-content__social-links-item js-social-link\"\n\t\t\t\taria-label=\"Share to Facebook\"\n\t\t\t\t\t\t\t\t\ttarget=\"_blank\"\n\t\t\t\t\trel=\"noopener noreferrer\"\n\t\t\t\t\n\t\t\t\t\t\t\t>\n\t\t\t\t<svg width='14' height='22' viewBox='0 0 14 22' fill='none' xmlns='http: \/\/www.w3.org\/2000\/svg'><path d='M4.032 22L4 12H0V8h4V5.5C4 1.789 6.298 0 9.61 0c1.585 0 2.948.118 3.345.17v3.88H10.66c-1.8 0-2.15.856-2.15 2.112V8h5.241l-2 4H8.51v10H4.032z' fill='currentColor'\/><\/svg>\t\t\t<\/a>\n\t\t\t\t\t\t<a\n\t\t\t\thref=\"https:\/\/api.whatsapp.com\/send?text=https%3A%2F%2Fwww.deptagency.com%2Fen-dk%2Finsight%2Fhow-to-create-a-seamless-experience-with-modular-web-design%2F\"\n\t\t\t\tdata-share-url=\"https:\/\/www.deptagency.com\/en-dk\/insight\/how-to-create-a-seamless-experience-with-modular-web-design\/\"\n\t\t\t\tdata-share-title=\"How to create a seamless experience with modular web design\"\n\t\t\t\tdata-share-type=\"whatsapp\"\n\t\t\t\tclass=\"block-title-and-content__social-links-item js-social-link\"\n\t\t\t\taria-label=\"Share to Whatsapp\"\n\t\t\t\t\t\t\t\t\ttarget=\"_blank\"\n\t\t\t\t\trel=\"noopener noreferrer\"\n\t\t\t\t\n\t\t\t\t\t\t\t>\n\t\t\t\t<svg xmlns='http: \/\/www.w3.org\/2000\/svg' width='25' height='24' viewBox='0 0 25 24'><path d='M.805 24l1.687-6.163a11.869 11.869 0 01-1.588-5.945C.907 5.335 6.244 0 12.801 0c3.182.001 6.17 1.24 8.415 3.488a11.819 11.819 0 013.481 8.413c-.002 6.558-5.34 11.893-11.896 11.893h-.005c-1.99-.001-3.947-.5-5.685-1.448L.805 24zm6.598-3.807l.361.214a9.874 9.874 0 005.033 1.378h.004c5.45 0 9.885-4.434 9.888-9.885a9.824 9.824 0 00-2.894-6.993 9.823 9.823 0 00-6.99-2.898c-5.454 0-9.89 4.434-9.892 9.884a9.86 9.86 0 001.512 5.26l.235.374-.999 3.648 3.742-.982z' fill='currentColor'\/><path d='M9.825 6.921c-.24-.58-.486-.501-.668-.51-.174-.009-.372-.01-.57-.01-.198 0-.52.074-.793.371-.272.298-1.04 1.017-1.04 2.48 0 1.462 1.065 2.875 1.214 3.073.148.199 2.096 3.2 5.078 4.487.709.306 1.262.49 1.694.626.712.226 1.36.194 1.872.118.571-.085 1.759-.72 2.007-1.413.247-.694.247-1.29.173-1.413-.074-.124-.272-.199-.57-.347-.297-.149-1.758-.868-2.03-.967-.273-.1-.471-.149-.67.149-.198.297-.767.966-.94 1.165-.174.198-.348.223-.645.074-.297-.149-1.255-.462-2.39-1.475-.884-.788-1.48-1.76-1.654-2.058-.173-.298-.018-.459.13-.607.134-.133.298-.347.446-.52.149-.174.199-.298.298-.496.099-.198.05-.372-.025-.52-.074-.15-.669-1.612-.917-2.207z' fill='currentColor'\/><\/svg>\t\t\t<\/a>\n\t\t\t\t\t\t<a\n\t\t\t\thref=\"https:\/\/twitter.com\/intent\/tweet?url=https%3A%2F%2Fwww.deptagency.com%2Fen-dk%2Finsight%2Fhow-to-create-a-seamless-experience-with-modular-web-design%2F&#038;text=How%20to%20create%20a%20seamless%20experience%20with%20modular%20web%20design\"\n\t\t\t\tdata-share-url=\"https:\/\/www.deptagency.com\/en-dk\/insight\/how-to-create-a-seamless-experience-with-modular-web-design\/\"\n\t\t\t\tdata-share-title=\"How to create a seamless experience with modular web design\"\n\t\t\t\tdata-share-type=\"twitter\"\n\t\t\t\tclass=\"block-title-and-content__social-links-item js-social-link\"\n\t\t\t\taria-label=\"Share to Twitter\"\n\t\t\t\t\t\t\t\t\ttarget=\"_blank\"\n\t\t\t\t\trel=\"noopener noreferrer\"\n\t\t\t\t\n\t\t\t\t\t\t\t>\n\t\t\t\t<svg width='25' height='20' viewBox='0 0 25 20' fill='none' xmlns='http: \/\/www.w3.org\/2000\/svg'><path d='M24.75 2.3c-.9.4-1.8.7-2.8.8 1-.6 1.8-1.6 2.2-2.7-1 .6-2 1-3.1 1.2-.9-1-2.2-1.6-3.6-1.6-2.7 0-4.9 2.2-4.9 4.9 0 .4 0 .8.1 1.1-4.2-.2-7.8-2.2-10.2-5.2-.5.8-.7 1.6-.7 2.5 0 1.7.9 3.2 2.2 4.1-.8 0-1.6-.2-2.2-.6v.1c0 2.4 1.7 4.4 3.9 4.8-.4.1-.8.2-1.3.2-.3 0-.6 0-.9-.1.6 2 2.4 3.4 4.6 3.4-1.7 1.3-3.8 2.1-6.1 2.1-.4 0-.8 0-1.2-.1 2.2 1.4 4.8 2.2 7.5 2.2 9.1 0 14-7.5 14-14v-.6c1-.7 1.8-1.6 2.5-2.5z' fill='currentColor'\/><\/svg>\t\t\t<\/a>\n\t\t\t\t\t\t<a\n\t\t\t\thref=\"http:\/\/www.linkedin.com\/shareArticle?mini=true&#038;url=https%3A%2F%2Fwww.deptagency.com%2Fen-dk%2Finsight%2Fhow-to-create-a-seamless-experience-with-modular-web-design%2F\"\n\t\t\t\tdata-share-url=\"https:\/\/www.deptagency.com\/en-dk\/insight\/how-to-create-a-seamless-experience-with-modular-web-design\/\"\n\t\t\t\tdata-share-title=\"How to create a seamless experience with modular web design\"\n\t\t\t\tdata-share-type=\"linkedin\"\n\t\t\t\tclass=\"block-title-and-content__social-links-item js-social-link\"\n\t\t\t\taria-label=\"Share to Linkedin\"\n\t\t\t\t\t\t\t\t\ttarget=\"_blank\"\n\t\t\t\t\trel=\"noopener noreferrer\"\n\t\t\t\t\n\t\t\t\t\t\t\t>\n\t\t\t\t<svg width='19' height='18' viewBox='0 0 19 18' fill='none' xmlns='http: \/\/www.w3.org\/2000\/svg'><path d='M1.15 17.3h3.6V5.8h-3.6v11.5zM.75 2.1c0 1.2 1 2.1 2.1 2.1 1.2 0 2.1-.9 2.1-2.1 0-1.2-1-2.1-2.1-2.1-1.2 0-2.1 1-2.1 2.1zM14.45 17.3h3.6v-6.2c0-3.1-.7-5.5-4.3-5.5-1.8 0-2.9.9-3.4 1.8V5.8h-3.4v11.5h3.6v-5.7c0-1.5.2-2.9 2.1-2.9 1.8 0 1.8 1.7 1.8 3v5.6z' fill='currentColor'\/><\/svg>\t\t\t<\/a>\n\t\t\t\t<\/div>\n<\/div>\n\n<div class=\"block-title-and-content js-block-title-and-content block-title-and-content__theme--white\">\n\t<div class=\"block-title-and-content__layout\">\n\t\t<h2\t\tclass=\"typography block-title-and-content__title typography__color--onyxGrey typography__size--h2 typography__align--left\"\n\t\tdata-size-mobile=\"h2\" \t>\n\t\tHow to start creating with modular design\u00a0\u00a0\t<\/h2>\n\t\t\t\t\t<div class=\"block-title-and-content__content\">\n\t\t\t\t\n<div class='block-title-and-content__item'><div class='block-title-and-content__item-inner'><p\t\tclass=\"typography block-typography__typography typography__color--onyxGrey typography__size--regular-body typography__align--left\"\n\t\t\t>\n\t\t<em>FYI: Before you start designing, you need to have a content strategy, information architecture, and zonal definitions in place. <\/em><a href=\"https:\/\/www.deptagency.com\/insight\/before-you-create-a-design-system-do-these-three-things-2\/\" target=\"_blank\" rel=\"noreferrer noopener\">Learn about these essential pre-design system processes here.\u00a0<\/a><br><br>We can probably all agree that 12 different buttons or 100 module blocks are excessive, but there isn\u2019t a magic number of how many modules or variations are needed to build a well-rounded system.\u00a0<br><br>It comes down to the number of pages needed, the project, and brand personality, among other things.<br><br>Our advice here is: Don\u2019t design something until you know you need it.<br><br>Yes, you will need heroes, but don\u2019t pre-generate a variety before you have the full context of each page.\u00a0<br><br>As much as you want to think of individual components, you have to design with the page in mind. While you should be thinking about modules and zones from a philosophical perspective, it&#8217;s okay to give into the design process and focus on the page you are working with.<br><br>Questions to ask yourself and your design team:\t<\/p><\/div><\/div>\n\n<div class='block-title-and-content__item'><div class='block-title-and-content__item-inner'><ul class=\"lists lists__color--onyxGrey lists__type--circle lists__size--default lists__align--left block-lists__lists\">\n\t<li>What is the natural flow of my core pages?\u00a0<\/li><li>How can I take these modules and create other pages?\u00a0<\/li><li>What should come before and after each module?\u00a0<\/li><\/ul><\/div><\/div>\n\n<div class='block-title-and-content__item'><div class='block-title-and-content__item-inner'><p\t\tclass=\"typography block-typography__typography typography__color--onyxGrey typography__size--regular-body typography__align--left\"\n\t\t\t>\n\t\t<strong>Design for the screen<\/strong><br><strong><br><\/strong>How much of the screen or viewport can you see at a time? Ideally, your users are looking at one module at a time.\u00a0<br><br><strong>Modular-based systems should speed up your process\u00a0<\/strong><br><br>Not hinder your creativity.\u00a0<br><br>This philosophy is simply a tool to use to scale your design process. It should not restrict pages from being customised if that is what is needed for your website.\u00a0<br><br>That being said, this is only true if you follow the process of\u00a0\t<\/p><\/div><\/div>\n\n<div class='block-title-and-content__item'><div class='block-title-and-content__item-inner'><ul class=\"lists lists__color--onyxGrey lists__type--circle lists__size--default lists__align--left block-lists__lists\">\n\t<li>Design core pages\u00a0<\/li><li>Select modules from those pages to carry over\u00a0<\/li><li>Design and templatise new pages\u00a0<\/li><\/ul><\/div><\/div>\n\n<div class='block-title-and-content__item'><div class='block-title-and-content__item-inner'><p\t\tclass=\"typography block-typography__typography typography__color--onyxGrey typography__size--regular-body typography__align--left\"\n\t\t\t>\n\t\tIf you skip the first or second step, you can\u2019t complete the third.\u00a0<br><br><strong>Rules for combining modules <br><\/strong><br>Sometimes, specific modules don\u2019t complement one another. While the core design team knows this (and would never create a layout using certain combinations), your website or marketing team may not consider this when they launch new pages.\u00a0<br><br>This is where guidelines are critical. By creating rules around the proximity of components (component A can only be used before B and C), you can mitigate this issue.\t<\/p><\/div><\/div>\n\t\t\t<\/div>\n\t\t\t<\/div>\n\n\t\n\t<div class=\"block-title-and-content__social-links\">\n\t\t\t\t\t<a\n\t\t\t\thref=\"https:\/\/www.deptagency.com\/en-dk\/insight\/how-to-create-a-seamless-experience-with-modular-web-design\/\"\n\t\t\t\tdata-share-url=\"https:\/\/www.deptagency.com\/en-dk\/insight\/how-to-create-a-seamless-experience-with-modular-web-design\/\"\n\t\t\t\tdata-share-title=\"How to create a seamless experience with modular web design\"\n\t\t\t\tdata-share-type=\"copy\"\n\t\t\t\tclass=\"block-title-and-content__social-links-item js-social-link\"\n\t\t\t\taria-label=\"Copy page link\"\n\t\t\t\t\n\t\t\t\t\t\t\t\t\tdata-tooltip=\"true\"\n\t\t\t\t\tdata-tooltip-text=\"Link copied to clipboard.\"\n\t\t\t\t\t\t\t>\n\t\t\t\t<svg fill='none' xmlns='http: \/\/www.w3.org\/2000\/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M6.832 15.167l8.333-8.333M9.332 6.001l2.787-2.787a4.715 4.715 0 016.666 0v0a4.715 4.715 0 010 6.667L16 12.668M5.999 9.334l-2.787 2.787a4.715 4.715 0 000 6.666v0a4.715 4.715 0 006.667 0l2.787-2.786' stroke='currentColor' stroke-width='2'\/><\/svg>\t\t\t<\/a>\n\t\t\t\t\t\t<a\n\t\t\t\thref=\"https:\/\/www.facebook.com\/sharer\/sharer.php?u=https%3A%2F%2Fwww.deptagency.com%2Fen-dk%2Finsight%2Fhow-to-create-a-seamless-experience-with-modular-web-design%2F\"\n\t\t\t\tdata-share-url=\"https:\/\/www.deptagency.com\/en-dk\/insight\/how-to-create-a-seamless-experience-with-modular-web-design\/\"\n\t\t\t\tdata-share-title=\"How to create a seamless experience with modular web design\"\n\t\t\t\tdata-share-type=\"facebook\"\n\t\t\t\tclass=\"block-title-and-content__social-links-item js-social-link\"\n\t\t\t\taria-label=\"Share to Facebook\"\n\t\t\t\t\t\t\t\t\ttarget=\"_blank\"\n\t\t\t\t\trel=\"noopener noreferrer\"\n\t\t\t\t\n\t\t\t\t\t\t\t>\n\t\t\t\t<svg width='14' height='22' viewBox='0 0 14 22' fill='none' xmlns='http: \/\/www.w3.org\/2000\/svg'><path d='M4.032 22L4 12H0V8h4V5.5C4 1.789 6.298 0 9.61 0c1.585 0 2.948.118 3.345.17v3.88H10.66c-1.8 0-2.15.856-2.15 2.112V8h5.241l-2 4H8.51v10H4.032z' fill='currentColor'\/><\/svg>\t\t\t<\/a>\n\t\t\t\t\t\t<a\n\t\t\t\thref=\"https:\/\/api.whatsapp.com\/send?text=https%3A%2F%2Fwww.deptagency.com%2Fen-dk%2Finsight%2Fhow-to-create-a-seamless-experience-with-modular-web-design%2F\"\n\t\t\t\tdata-share-url=\"https:\/\/www.deptagency.com\/en-dk\/insight\/how-to-create-a-seamless-experience-with-modular-web-design\/\"\n\t\t\t\tdata-share-title=\"How to create a seamless experience with modular web design\"\n\t\t\t\tdata-share-type=\"whatsapp\"\n\t\t\t\tclass=\"block-title-and-content__social-links-item js-social-link\"\n\t\t\t\taria-label=\"Share to Whatsapp\"\n\t\t\t\t\t\t\t\t\ttarget=\"_blank\"\n\t\t\t\t\trel=\"noopener noreferrer\"\n\t\t\t\t\n\t\t\t\t\t\t\t>\n\t\t\t\t<svg xmlns='http: \/\/www.w3.org\/2000\/svg' width='25' height='24' viewBox='0 0 25 24'><path d='M.805 24l1.687-6.163a11.869 11.869 0 01-1.588-5.945C.907 5.335 6.244 0 12.801 0c3.182.001 6.17 1.24 8.415 3.488a11.819 11.819 0 013.481 8.413c-.002 6.558-5.34 11.893-11.896 11.893h-.005c-1.99-.001-3.947-.5-5.685-1.448L.805 24zm6.598-3.807l.361.214a9.874 9.874 0 005.033 1.378h.004c5.45 0 9.885-4.434 9.888-9.885a9.824 9.824 0 00-2.894-6.993 9.823 9.823 0 00-6.99-2.898c-5.454 0-9.89 4.434-9.892 9.884a9.86 9.86 0 001.512 5.26l.235.374-.999 3.648 3.742-.982z' fill='currentColor'\/><path d='M9.825 6.921c-.24-.58-.486-.501-.668-.51-.174-.009-.372-.01-.57-.01-.198 0-.52.074-.793.371-.272.298-1.04 1.017-1.04 2.48 0 1.462 1.065 2.875 1.214 3.073.148.199 2.096 3.2 5.078 4.487.709.306 1.262.49 1.694.626.712.226 1.36.194 1.872.118.571-.085 1.759-.72 2.007-1.413.247-.694.247-1.29.173-1.413-.074-.124-.272-.199-.57-.347-.297-.149-1.758-.868-2.03-.967-.273-.1-.471-.149-.67.149-.198.297-.767.966-.94 1.165-.174.198-.348.223-.645.074-.297-.149-1.255-.462-2.39-1.475-.884-.788-1.48-1.76-1.654-2.058-.173-.298-.018-.459.13-.607.134-.133.298-.347.446-.52.149-.174.199-.298.298-.496.099-.198.05-.372-.025-.52-.074-.15-.669-1.612-.917-2.207z' fill='currentColor'\/><\/svg>\t\t\t<\/a>\n\t\t\t\t\t\t<a\n\t\t\t\thref=\"https:\/\/twitter.com\/intent\/tweet?url=https%3A%2F%2Fwww.deptagency.com%2Fen-dk%2Finsight%2Fhow-to-create-a-seamless-experience-with-modular-web-design%2F&#038;text=How%20to%20create%20a%20seamless%20experience%20with%20modular%20web%20design\"\n\t\t\t\tdata-share-url=\"https:\/\/www.deptagency.com\/en-dk\/insight\/how-to-create-a-seamless-experience-with-modular-web-design\/\"\n\t\t\t\tdata-share-title=\"How to create a seamless experience with modular web design\"\n\t\t\t\tdata-share-type=\"twitter\"\n\t\t\t\tclass=\"block-title-and-content__social-links-item js-social-link\"\n\t\t\t\taria-label=\"Share to Twitter\"\n\t\t\t\t\t\t\t\t\ttarget=\"_blank\"\n\t\t\t\t\trel=\"noopener noreferrer\"\n\t\t\t\t\n\t\t\t\t\t\t\t>\n\t\t\t\t<svg width='25' height='20' viewBox='0 0 25 20' fill='none' xmlns='http: \/\/www.w3.org\/2000\/svg'><path d='M24.75 2.3c-.9.4-1.8.7-2.8.8 1-.6 1.8-1.6 2.2-2.7-1 .6-2 1-3.1 1.2-.9-1-2.2-1.6-3.6-1.6-2.7 0-4.9 2.2-4.9 4.9 0 .4 0 .8.1 1.1-4.2-.2-7.8-2.2-10.2-5.2-.5.8-.7 1.6-.7 2.5 0 1.7.9 3.2 2.2 4.1-.8 0-1.6-.2-2.2-.6v.1c0 2.4 1.7 4.4 3.9 4.8-.4.1-.8.2-1.3.2-.3 0-.6 0-.9-.1.6 2 2.4 3.4 4.6 3.4-1.7 1.3-3.8 2.1-6.1 2.1-.4 0-.8 0-1.2-.1 2.2 1.4 4.8 2.2 7.5 2.2 9.1 0 14-7.5 14-14v-.6c1-.7 1.8-1.6 2.5-2.5z' fill='currentColor'\/><\/svg>\t\t\t<\/a>\n\t\t\t\t\t\t<a\n\t\t\t\thref=\"http:\/\/www.linkedin.com\/shareArticle?mini=true&#038;url=https%3A%2F%2Fwww.deptagency.com%2Fen-dk%2Finsight%2Fhow-to-create-a-seamless-experience-with-modular-web-design%2F\"\n\t\t\t\tdata-share-url=\"https:\/\/www.deptagency.com\/en-dk\/insight\/how-to-create-a-seamless-experience-with-modular-web-design\/\"\n\t\t\t\tdata-share-title=\"How to create a seamless experience with modular web design\"\n\t\t\t\tdata-share-type=\"linkedin\"\n\t\t\t\tclass=\"block-title-and-content__social-links-item js-social-link\"\n\t\t\t\taria-label=\"Share to Linkedin\"\n\t\t\t\t\t\t\t\t\ttarget=\"_blank\"\n\t\t\t\t\trel=\"noopener noreferrer\"\n\t\t\t\t\n\t\t\t\t\t\t\t>\n\t\t\t\t<svg width='19' height='18' viewBox='0 0 19 18' fill='none' xmlns='http: \/\/www.w3.org\/2000\/svg'><path d='M1.15 17.3h3.6V5.8h-3.6v11.5zM.75 2.1c0 1.2 1 2.1 2.1 2.1 1.2 0 2.1-.9 2.1-2.1 0-1.2-1-2.1-2.1-2.1-1.2 0-2.1 1-2.1 2.1zM14.45 17.3h3.6v-6.2c0-3.1-.7-5.5-4.3-5.5-1.8 0-2.9.9-3.4 1.8V5.8h-3.4v11.5h3.6v-5.7c0-1.5.2-2.9 2.1-2.9 1.8 0 1.8 1.7 1.8 3v5.6z' fill='currentColor'\/><\/svg>\t\t\t<\/a>\n\t\t\t\t<\/div>\n<\/div>\n\n<div\n\t\tclass=\"image-wrap block-image__image-wrap\"\n\t\tdata-align=\"center center\"\n\t\t\t>\n\n\t\t\t<picture\n\t\tclass=\"image__picture\"\n\t\t\t\t>\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t<img\n\t\t\t\tsrc=\"https:\/\/www.deptagency.com\/wp-content\/uploads\/2022\/12\/modular-web-design-modules-logic.jpg\"\n\t\t\t\tclass=\"image block-image__image\"\n\n\t\t\t\t\t\t\t\talt=\"modular web design logic\"\n\t\t\t\t\n\t\t\t\t\t\t\t\t\tloading=\"lazy\"\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\t\t\/>\n\t\t<\/picture>\n\t\n\t<\/div>\n\n<div class=\"block-title-and-content js-block-title-and-content block-title-and-content__theme--onyxGrey\">\n\t<div class=\"block-title-and-content__layout\">\n\t\t<h2\t\tclass=\"typography block-title-and-content__title typography__color--white typography__size--h2 typography__align--left\"\n\t\tdata-size-mobile=\"h2\" \t>\n\t\tGenerally speaking, the larger and more varied your website is, the larger your design system. \t<\/h2>\n\t\t\t\t\t<div class=\"block-title-and-content__content\">\n\t\t\t\t\n<div class='block-title-and-content__item'><div class='block-title-and-content__item-inner'><p\t\tclass=\"typography block-typography__typography typography__color--lightGrey typography__size--regular-body typography__align--left\"\n\t\t\t>\n\t\tYou&#8217;ll also need more rules and guidelines to make it operate successfully. <br><br>Need help <a href=\"https:\/\/www.deptagency.com\/en-dk\/service\/cx-design\/e-commerce-design\/\" target=\"_blank\" rel=\"noreferrer noopener\">designing a custom website<\/a> or e-commerce store? We\u2019d love to work with your brand to create a customer-led, experience-driven website.\t<\/p><\/div><\/div>\n\t\t\t<\/div>\n\t\t\t<\/div>\n\n\t\n\t<div class=\"block-title-and-content__social-links\">\n\t\t\t\t\t<a\n\t\t\t\thref=\"https:\/\/www.deptagency.com\/en-dk\/insight\/how-to-create-a-seamless-experience-with-modular-web-design\/\"\n\t\t\t\tdata-share-url=\"https:\/\/www.deptagency.com\/en-dk\/insight\/how-to-create-a-seamless-experience-with-modular-web-design\/\"\n\t\t\t\tdata-share-title=\"How to create a seamless experience with modular web design\"\n\t\t\t\tdata-share-type=\"copy\"\n\t\t\t\tclass=\"block-title-and-content__social-links-item js-social-link\"\n\t\t\t\taria-label=\"Copy page link\"\n\t\t\t\t\n\t\t\t\t\t\t\t\t\tdata-tooltip=\"true\"\n\t\t\t\t\tdata-tooltip-text=\"Link copied to clipboard.\"\n\t\t\t\t\t\t\t>\n\t\t\t\t<svg fill='none' xmlns='http: \/\/www.w3.org\/2000\/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M6.832 15.167l8.333-8.333M9.332 6.001l2.787-2.787a4.715 4.715 0 016.666 0v0a4.715 4.715 0 010 6.667L16 12.668M5.999 9.334l-2.787 2.787a4.715 4.715 0 000 6.666v0a4.715 4.715 0 006.667 0l2.787-2.786' stroke='currentColor' stroke-width='2'\/><\/svg>\t\t\t<\/a>\n\t\t\t\t\t\t<a\n\t\t\t\thref=\"https:\/\/www.facebook.com\/sharer\/sharer.php?u=https%3A%2F%2Fwww.deptagency.com%2Fen-dk%2Finsight%2Fhow-to-create-a-seamless-experience-with-modular-web-design%2F\"\n\t\t\t\tdata-share-url=\"https:\/\/www.deptagency.com\/en-dk\/insight\/how-to-create-a-seamless-experience-with-modular-web-design\/\"\n\t\t\t\tdata-share-title=\"How to create a seamless experience with modular web design\"\n\t\t\t\tdata-share-type=\"facebook\"\n\t\t\t\tclass=\"block-title-and-content__social-links-item js-social-link\"\n\t\t\t\taria-label=\"Share to Facebook\"\n\t\t\t\t\t\t\t\t\ttarget=\"_blank\"\n\t\t\t\t\trel=\"noopener noreferrer\"\n\t\t\t\t\n\t\t\t\t\t\t\t>\n\t\t\t\t<svg width='14' height='22' viewBox='0 0 14 22' fill='none' xmlns='http: \/\/www.w3.org\/2000\/svg'><path d='M4.032 22L4 12H0V8h4V5.5C4 1.789 6.298 0 9.61 0c1.585 0 2.948.118 3.345.17v3.88H10.66c-1.8 0-2.15.856-2.15 2.112V8h5.241l-2 4H8.51v10H4.032z' fill='currentColor'\/><\/svg>\t\t\t<\/a>\n\t\t\t\t\t\t<a\n\t\t\t\thref=\"https:\/\/api.whatsapp.com\/send?text=https%3A%2F%2Fwww.deptagency.com%2Fen-dk%2Finsight%2Fhow-to-create-a-seamless-experience-with-modular-web-design%2F\"\n\t\t\t\tdata-share-url=\"https:\/\/www.deptagency.com\/en-dk\/insight\/how-to-create-a-seamless-experience-with-modular-web-design\/\"\n\t\t\t\tdata-share-title=\"How to create a seamless experience with modular web design\"\n\t\t\t\tdata-share-type=\"whatsapp\"\n\t\t\t\tclass=\"block-title-and-content__social-links-item js-social-link\"\n\t\t\t\taria-label=\"Share to Whatsapp\"\n\t\t\t\t\t\t\t\t\ttarget=\"_blank\"\n\t\t\t\t\trel=\"noopener noreferrer\"\n\t\t\t\t\n\t\t\t\t\t\t\t>\n\t\t\t\t<svg xmlns='http: \/\/www.w3.org\/2000\/svg' width='25' height='24' viewBox='0 0 25 24'><path d='M.805 24l1.687-6.163a11.869 11.869 0 01-1.588-5.945C.907 5.335 6.244 0 12.801 0c3.182.001 6.17 1.24 8.415 3.488a11.819 11.819 0 013.481 8.413c-.002 6.558-5.34 11.893-11.896 11.893h-.005c-1.99-.001-3.947-.5-5.685-1.448L.805 24zm6.598-3.807l.361.214a9.874 9.874 0 005.033 1.378h.004c5.45 0 9.885-4.434 9.888-9.885a9.824 9.824 0 00-2.894-6.993 9.823 9.823 0 00-6.99-2.898c-5.454 0-9.89 4.434-9.892 9.884a9.86 9.86 0 001.512 5.26l.235.374-.999 3.648 3.742-.982z' fill='currentColor'\/><path d='M9.825 6.921c-.24-.58-.486-.501-.668-.51-.174-.009-.372-.01-.57-.01-.198 0-.52.074-.793.371-.272.298-1.04 1.017-1.04 2.48 0 1.462 1.065 2.875 1.214 3.073.148.199 2.096 3.2 5.078 4.487.709.306 1.262.49 1.694.626.712.226 1.36.194 1.872.118.571-.085 1.759-.72 2.007-1.413.247-.694.247-1.29.173-1.413-.074-.124-.272-.199-.57-.347-.297-.149-1.758-.868-2.03-.967-.273-.1-.471-.149-.67.149-.198.297-.767.966-.94 1.165-.174.198-.348.223-.645.074-.297-.149-1.255-.462-2.39-1.475-.884-.788-1.48-1.76-1.654-2.058-.173-.298-.018-.459.13-.607.134-.133.298-.347.446-.52.149-.174.199-.298.298-.496.099-.198.05-.372-.025-.52-.074-.15-.669-1.612-.917-2.207z' fill='currentColor'\/><\/svg>\t\t\t<\/a>\n\t\t\t\t\t\t<a\n\t\t\t\thref=\"https:\/\/twitter.com\/intent\/tweet?url=https%3A%2F%2Fwww.deptagency.com%2Fen-dk%2Finsight%2Fhow-to-create-a-seamless-experience-with-modular-web-design%2F&#038;text=How%20to%20create%20a%20seamless%20experience%20with%20modular%20web%20design\"\n\t\t\t\tdata-share-url=\"https:\/\/www.deptagency.com\/en-dk\/insight\/how-to-create-a-seamless-experience-with-modular-web-design\/\"\n\t\t\t\tdata-share-title=\"How to create a seamless experience with modular web design\"\n\t\t\t\tdata-share-type=\"twitter\"\n\t\t\t\tclass=\"block-title-and-content__social-links-item js-social-link\"\n\t\t\t\taria-label=\"Share to Twitter\"\n\t\t\t\t\t\t\t\t\ttarget=\"_blank\"\n\t\t\t\t\trel=\"noopener noreferrer\"\n\t\t\t\t\n\t\t\t\t\t\t\t>\n\t\t\t\t<svg width='25' height='20' viewBox='0 0 25 20' fill='none' xmlns='http: \/\/www.w3.org\/2000\/svg'><path d='M24.75 2.3c-.9.4-1.8.7-2.8.8 1-.6 1.8-1.6 2.2-2.7-1 .6-2 1-3.1 1.2-.9-1-2.2-1.6-3.6-1.6-2.7 0-4.9 2.2-4.9 4.9 0 .4 0 .8.1 1.1-4.2-.2-7.8-2.2-10.2-5.2-.5.8-.7 1.6-.7 2.5 0 1.7.9 3.2 2.2 4.1-.8 0-1.6-.2-2.2-.6v.1c0 2.4 1.7 4.4 3.9 4.8-.4.1-.8.2-1.3.2-.3 0-.6 0-.9-.1.6 2 2.4 3.4 4.6 3.4-1.7 1.3-3.8 2.1-6.1 2.1-.4 0-.8 0-1.2-.1 2.2 1.4 4.8 2.2 7.5 2.2 9.1 0 14-7.5 14-14v-.6c1-.7 1.8-1.6 2.5-2.5z' fill='currentColor'\/><\/svg>\t\t\t<\/a>\n\t\t\t\t\t\t<a\n\t\t\t\thref=\"http:\/\/www.linkedin.com\/shareArticle?mini=true&#038;url=https%3A%2F%2Fwww.deptagency.com%2Fen-dk%2Finsight%2Fhow-to-create-a-seamless-experience-with-modular-web-design%2F\"\n\t\t\t\tdata-share-url=\"https:\/\/www.deptagency.com\/en-dk\/insight\/how-to-create-a-seamless-experience-with-modular-web-design\/\"\n\t\t\t\tdata-share-title=\"How to create a seamless experience with modular web design\"\n\t\t\t\tdata-share-type=\"linkedin\"\n\t\t\t\tclass=\"block-title-and-content__social-links-item js-social-link\"\n\t\t\t\taria-label=\"Share to Linkedin\"\n\t\t\t\t\t\t\t\t\ttarget=\"_blank\"\n\t\t\t\t\trel=\"noopener noreferrer\"\n\t\t\t\t\n\t\t\t\t\t\t\t>\n\t\t\t\t<svg width='19' height='18' viewBox='0 0 19 18' fill='none' xmlns='http: \/\/www.w3.org\/2000\/svg'><path d='M1.15 17.3h3.6V5.8h-3.6v11.5zM.75 2.1c0 1.2 1 2.1 2.1 2.1 1.2 0 2.1-.9 2.1-2.1 0-1.2-1-2.1-2.1-2.1-1.2 0-2.1 1-2.1 2.1zM14.45 17.3h3.6v-6.2c0-3.1-.7-5.5-4.3-5.5-1.8 0-2.9.9-3.4 1.8V5.8h-3.4v11.5h3.6v-5.7c0-1.5.2-2.9 2.1-2.9 1.8 0 1.8 1.7 1.8 3v5.6z' fill='currentColor'\/><\/svg>\t\t\t<\/a>\n\t\t\t\t<\/div>\n<\/div>\n\n<div class=\"block-highlighted-item-listing\">\n\t<h2\t\tclass=\"typography block-highlighted-item-listing__title typography__color--onyxGrey typography__size--regular-body typography__align--left\"\n\t\t\t>\n\t\tMore?\t<\/h2><a\tclass=\"cta-button block-highlighted-item-listing__cta-button cta-button__color--onyxGrey cta-button__style--regular\" href=\"https:\/\/www.deptagency.com\/en-dk\/all-insights\/\" >\n\t\n\t\t\t<span>\n\t\t\tDiscover more\t\t<\/span>\n\t\n<\/a>\n\t<div class=\"block-highlighted-item-listing__cards\">\n\t\t<a\tclass=\"universal-item-card universal-item-card__type--whitepaper universal-item-card--has-link-decoration\"\n\tdata-theme=\"white\"\n\t\t\thref=\"https:\/\/www.deptagency.com\/en-dk\/downloads\/design-systems-creating-a-visual-language\/\"\n\t\t\t\ttitle=\"Design systems: creating a visual language\"\n\t\t>\n\t\t\t<div class=\"universal-item-card__backplate universal-item-card__backplate--with-image\"><\/div>\n\t\n\t<div\n\t\tclass=\"image-wrap universal-item-card__image-wrap\"\n\t\tdata-align=\"center center\"\n\t\t\t>\n\n\t\t\t<picture\n\t\tclass=\"image__picture\"\n\t\t\t\t>\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t<img\n\t\t\t\tsrc=\"https:\/\/www.deptagency.com\/wp-content\/uploads\/2021\/10\/dept-030205-280320-0303.png\"\n\t\t\t\tclass=\"image universal-item-card__image\"\n\n\t\t\t\t\t\t\t\talt=\"Design systems: creating a visual language\"\n\t\t\t\t\n\t\t\t\t\t\t\t\t\tloading=\"lazy\"\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\t\t\/>\n\t\t<\/picture>\n\t\n\t<\/div><p\t\tclass=\"typography universal-item-card__meta typography__color--darkGrey typography__size--eyebrow-lc typography__align--left\"\n\t\t\t>\n\t\tRasmus Keller Jansen\t<\/p><h3\t\tclass=\"typography universal-item-card__title typography__color--onyxGrey typography__size--h6 typography__align--left\"\n\t\t\t>\n\t\t<span>Design systems: creating a visual language<\/span>\t<\/h3><button\tclass=\"cta-button universal-item-card__btn cta-button__color--onyxGrey cta-button__style--regular has-parent-hover\" >\n\t\n\t\t\t<span>\n\t\t\tRead Paper\t\t<\/span>\n\t\n<\/button>\n\t\n\t<\/a><a\tclass=\"universal-item-card universal-item-card__type--article universal-item-card--has-link-decoration\"\n\tdata-theme=\"white\"\n\t\t\thref=\"https:\/\/www.deptagency.com\/es-ar\/insight\/dept-dash-is-here-to-accelerate-custom-website-development\/\"\n\t\t\t\ttitle=\"ADA\/DASH is here to accelerate custom website development\"\n\t\t>\n\t\t\t<div class=\"universal-item-card__backplate universal-item-card__backplate--with-image\"><\/div>\n\t\n\t<div\n\t\tclass=\"image-wrap universal-item-card__image-wrap\"\n\t\tdata-align=\"center center\"\n\t\t\t>\n\n\t\t\t<picture\n\t\tclass=\"image__picture\"\n\t\t\t\t>\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t<img\n\t\t\t\tsrc=\"https:\/\/www.deptagency.com\/wp-content\/uploads\/2022\/11\/accelerate-website-development.jpg\"\n\t\t\t\tclass=\"image universal-item-card__image\"\n\n\t\t\t\t\t\t\t\talt=\"ADA\/DASH is here to accelerate custom website development\"\n\t\t\t\t\n\t\t\t\t\t\t\t\t\tloading=\"lazy\"\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\t\t\/>\n\t\t<\/picture>\n\t\n\t<\/div><p\t\tclass=\"typography universal-item-card__meta typography__color--darkGrey typography__size--eyebrow-lc typography__align--left\"\n\t\t\t>\n\t\tKelsey Anderson\t<\/p><h3\t\tclass=\"typography universal-item-card__title typography__color--onyxGrey typography__size--h6 typography__align--left\"\n\t\t\t>\n\t\t<span>ADA\/DASH is here to accelerate custom website development<\/span>\t<\/h3><button\tclass=\"cta-button universal-item-card__btn cta-button__color--onyxGrey cta-button__style--regular has-parent-hover\" >\n\t\n\t\t\t<span>\n\t\t\tRead Article\t\t<\/span>\n\t\n<\/button>\n\t\n\t<\/a><a\tclass=\"universal-item-card universal-item-card__type--case universal-item-card--has-link-decoration\"\n\tdata-theme=\"white\"\n\t\t\thref=\"https:\/\/www.deptagency.com\/en-dk\/case\/a-branded-commerce-experience\/\"\n\t\t\t\ttitle=\"A branded commerce experience\"\n\t\t>\n\t\n\t<div\n\t\tclass=\"image-wrap universal-item-card__image-wrap\"\n\t\tdata-align=\"center center\"\n\t\t\t>\n\n\t\t\t<picture\n\t\tclass=\"image__picture\"\n\t\t\t\t>\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t<img\n\t\t\t\tsrc=\"https:\/\/www.deptagency.com\/wp-content\/uploads\/2021\/08\/DEPT\u00aexPatagonia.jpg\"\n\t\t\t\tclass=\"image universal-item-card__image\"\n\n\t\t\t\t\t\t\t\talt=\"A branded commerce experience\"\n\t\t\t\t\n\t\t\t\t\t\t\t\t\tloading=\"lazy\"\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\t\t\/>\n\t\t<\/picture>\n\t\n\t<\/div><p\t\tclass=\"typography universal-item-card__meta typography__color--darkGrey typography__size--eyebrow-lc typography__align--left\"\n\t\t\t>\n\t\tPATAGONIA&emsp;\u2022&emsp;Victor Marcus Lunde\t<\/p><h3\t\tclass=\"typography universal-item-card__title typography__color--onyxGrey typography__size--h6 typography__align--left\"\n\t\t\t>\n\t\t<span>A branded commerce experience<\/span>\t<\/h3><button\tclass=\"cta-button universal-item-card__btn cta-button__color--onyxGrey cta-button__style--regular has-parent-hover\" >\n\t\n\t\t\t<span>\n\t\t\tRead Case\t\t<\/span>\n\t\n<\/button>\n\t\n\t<\/a>\t<\/div>\n<\/div>","protected":false},"excerpt":{"rendered":"To create a memorable experience, we believe most teams should leverage modular web design, but with purpose and rules around its usage.","protected":false},"author":40,"featured_media":4124082,"template":"","meta":{"_acf_changed":false,"es_utils_meta_schema":"","member_job_title":"","member_linkedin_url":"","dept_alt_featured_image":[],"dept_algolia_noindex":false,"dept_algolia_featured":false,"footnotes":""},"person":[39720],"insight-topics":[42572],"class_list":["post-4124691","article","type-article","status-publish","has-post-thumbnail","hentry"],"acf":{"dept_is_3q_page":false,"dept_insight_featured":false,"dept_current_cpt_partner":""},"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.3 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>How to create a seamless experience with modular web design - DEPT\u00ae<\/title>\n<meta name=\"description\" content=\"To create a memorable experience, we believe most teams should leverage modular web design, but with purpose and rules around its usage.\" \/>\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.deptagency.com\/insight\/how-to-create-a-seamless-experience-with-modular-web-design\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to create a seamless experience with modular web design - DEPT\u00ae\" \/>\n<meta property=\"og:description\" content=\"To create a memorable experience, we believe most teams should leverage modular web design, but with purpose and rules around its usage.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.deptagency.com\/insight\/how-to-create-a-seamless-experience-with-modular-web-design\/\" \/>\n<meta property=\"og:site_name\" content=\"DEPT\u00ae\" \/>\n<meta property=\"article:modified_time\" content=\"2023-07-20T07:52:53+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.deptagency.com\/wp-content\/uploads\/2022\/12\/modular-puzzle-concept.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1600\" \/>\n\t<meta property=\"og:image:height\" content=\"1067\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.deptagency.com\\\/insight\\\/how-to-create-a-seamless-experience-with-modular-web-design\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.deptagency.com\\\/insight\\\/how-to-create-a-seamless-experience-with-modular-web-design\\\/\"},\"author\":{\"name\":\"Alexandra Moorhouse\",\"@id\":\"https:\\\/\\\/www.deptagency.com\\\/en-uki\\\/#\\\/schema\\\/person\\\/8ac7e77d16fb8c47e7d620ba8f6bc38c\"},\"headline\":\"How to create a seamless experience with modular web design\",\"datePublished\":\"2022-12-16T17:19:04+00:00\",\"dateModified\":\"2023-07-20T07:52:53+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.deptagency.com\\\/insight\\\/how-to-create-a-seamless-experience-with-modular-web-design\\\/\"},\"wordCount\":10,\"image\":{\"@id\":\"https:\\\/\\\/www.deptagency.com\\\/insight\\\/how-to-create-a-seamless-experience-with-modular-web-design\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.deptagency.com\\\/wp-content\\\/uploads\\\/2022\\\/12\\\/modular-puzzle-concept.jpg\",\"inLanguage\":\"en-DK\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.deptagency.com\\\/insight\\\/how-to-create-a-seamless-experience-with-modular-web-design\\\/\",\"url\":\"https:\\\/\\\/www.deptagency.com\\\/insight\\\/how-to-create-a-seamless-experience-with-modular-web-design\\\/\",\"name\":\"How to create a seamless experience with modular web design - DEPT\u00ae\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.deptagency.com\\\/en-uki\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.deptagency.com\\\/insight\\\/how-to-create-a-seamless-experience-with-modular-web-design\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.deptagency.com\\\/insight\\\/how-to-create-a-seamless-experience-with-modular-web-design\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.deptagency.com\\\/wp-content\\\/uploads\\\/2022\\\/12\\\/modular-puzzle-concept.jpg\",\"datePublished\":\"2022-12-16T17:19:04+00:00\",\"dateModified\":\"2023-07-20T07:52:53+00:00\",\"description\":\"To create a memorable experience, we believe most teams should leverage modular web design, but with purpose and rules around its usage.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.deptagency.com\\\/insight\\\/how-to-create-a-seamless-experience-with-modular-web-design\\\/#breadcrumb\"},\"inLanguage\":\"en-DK\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.deptagency.com\\\/insight\\\/how-to-create-a-seamless-experience-with-modular-web-design\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-DK\",\"@id\":\"https:\\\/\\\/www.deptagency.com\\\/insight\\\/how-to-create-a-seamless-experience-with-modular-web-design\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.deptagency.com\\\/wp-content\\\/uploads\\\/2022\\\/12\\\/modular-puzzle-concept.jpg\",\"contentUrl\":\"https:\\\/\\\/www.deptagency.com\\\/wp-content\\\/uploads\\\/2022\\\/12\\\/modular-puzzle-concept.jpg\",\"width\":1600,\"height\":1067,\"caption\":\"modular web design\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.deptagency.com\\\/insight\\\/how-to-create-a-seamless-experience-with-modular-web-design\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.deptagency.com\\\/en-dk\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to create a seamless experience with modular web design\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.deptagency.com\\\/en-uki\\\/#website\",\"url\":\"https:\\\/\\\/www.deptagency.com\\\/en-uki\\\/\",\"name\":\"DEPT\u00ae\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.deptagency.com\\\/en-uki\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-DK\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.deptagency.com\\\/en-uki\\\/#\\\/schema\\\/person\\\/8ac7e77d16fb8c47e7d620ba8f6bc38c\",\"name\":\"Alexandra Moorhouse\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-DK\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/e8ce4f04a43020c00db84d54b1c54ed8dba8b0de0b959126c45106f23e6ecb9a?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/e8ce4f04a43020c00db84d54b1c54ed8dba8b0de0b959126c45106f23e6ecb9a?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/e8ce4f04a43020c00db84d54b1c54ed8dba8b0de0b959126c45106f23e6ecb9a?s=96&d=mm&r=g\",\"caption\":\"Alexandra Moorhouse\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to create a seamless experience with modular web design - DEPT\u00ae","description":"To create a memorable experience, we believe most teams should leverage modular web design, but with purpose and rules around its usage.","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.deptagency.com\/insight\/how-to-create-a-seamless-experience-with-modular-web-design\/","og_locale":"en_US","og_type":"article","og_title":"How to create a seamless experience with modular web design - DEPT\u00ae","og_description":"To create a memorable experience, we believe most teams should leverage modular web design, but with purpose and rules around its usage.","og_url":"https:\/\/www.deptagency.com\/insight\/how-to-create-a-seamless-experience-with-modular-web-design\/","og_site_name":"DEPT\u00ae","article_modified_time":"2023-07-20T07:52:53+00:00","og_image":[{"width":1600,"height":1067,"url":"https:\/\/www.deptagency.com\/wp-content\/uploads\/2022\/12\/modular-puzzle-concept.jpg","type":"image\/jpeg"}],"twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.deptagency.com\/insight\/how-to-create-a-seamless-experience-with-modular-web-design\/#article","isPartOf":{"@id":"https:\/\/www.deptagency.com\/insight\/how-to-create-a-seamless-experience-with-modular-web-design\/"},"author":{"name":"Alexandra Moorhouse","@id":"https:\/\/www.deptagency.com\/en-uki\/#\/schema\/person\/8ac7e77d16fb8c47e7d620ba8f6bc38c"},"headline":"How to create a seamless experience with modular web design","datePublished":"2022-12-16T17:19:04+00:00","dateModified":"2023-07-20T07:52:53+00:00","mainEntityOfPage":{"@id":"https:\/\/www.deptagency.com\/insight\/how-to-create-a-seamless-experience-with-modular-web-design\/"},"wordCount":10,"image":{"@id":"https:\/\/www.deptagency.com\/insight\/how-to-create-a-seamless-experience-with-modular-web-design\/#primaryimage"},"thumbnailUrl":"https:\/\/www.deptagency.com\/wp-content\/uploads\/2022\/12\/modular-puzzle-concept.jpg","inLanguage":"en-DK"},{"@type":"WebPage","@id":"https:\/\/www.deptagency.com\/insight\/how-to-create-a-seamless-experience-with-modular-web-design\/","url":"https:\/\/www.deptagency.com\/insight\/how-to-create-a-seamless-experience-with-modular-web-design\/","name":"How to create a seamless experience with modular web design - DEPT\u00ae","isPartOf":{"@id":"https:\/\/www.deptagency.com\/en-uki\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.deptagency.com\/insight\/how-to-create-a-seamless-experience-with-modular-web-design\/#primaryimage"},"image":{"@id":"https:\/\/www.deptagency.com\/insight\/how-to-create-a-seamless-experience-with-modular-web-design\/#primaryimage"},"thumbnailUrl":"https:\/\/www.deptagency.com\/wp-content\/uploads\/2022\/12\/modular-puzzle-concept.jpg","datePublished":"2022-12-16T17:19:04+00:00","dateModified":"2023-07-20T07:52:53+00:00","description":"To create a memorable experience, we believe most teams should leverage modular web design, but with purpose and rules around its usage.","breadcrumb":{"@id":"https:\/\/www.deptagency.com\/insight\/how-to-create-a-seamless-experience-with-modular-web-design\/#breadcrumb"},"inLanguage":"en-DK","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.deptagency.com\/insight\/how-to-create-a-seamless-experience-with-modular-web-design\/"]}]},{"@type":"ImageObject","inLanguage":"en-DK","@id":"https:\/\/www.deptagency.com\/insight\/how-to-create-a-seamless-experience-with-modular-web-design\/#primaryimage","url":"https:\/\/www.deptagency.com\/wp-content\/uploads\/2022\/12\/modular-puzzle-concept.jpg","contentUrl":"https:\/\/www.deptagency.com\/wp-content\/uploads\/2022\/12\/modular-puzzle-concept.jpg","width":1600,"height":1067,"caption":"modular web design"},{"@type":"BreadcrumbList","@id":"https:\/\/www.deptagency.com\/insight\/how-to-create-a-seamless-experience-with-modular-web-design\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.deptagency.com\/en-dk\/"},{"@type":"ListItem","position":2,"name":"How to create a seamless experience with modular web design"}]},{"@type":"WebSite","@id":"https:\/\/www.deptagency.com\/en-uki\/#website","url":"https:\/\/www.deptagency.com\/en-uki\/","name":"DEPT\u00ae","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.deptagency.com\/en-uki\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-DK"},{"@type":"Person","@id":"https:\/\/www.deptagency.com\/en-uki\/#\/schema\/person\/8ac7e77d16fb8c47e7d620ba8f6bc38c","name":"Alexandra Moorhouse","image":{"@type":"ImageObject","inLanguage":"en-DK","@id":"https:\/\/secure.gravatar.com\/avatar\/e8ce4f04a43020c00db84d54b1c54ed8dba8b0de0b959126c45106f23e6ecb9a?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/e8ce4f04a43020c00db84d54b1c54ed8dba8b0de0b959126c45106f23e6ecb9a?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e8ce4f04a43020c00db84d54b1c54ed8dba8b0de0b959126c45106f23e6ecb9a?s=96&d=mm&r=g","caption":"Alexandra Moorhouse"}}]}},"_links":{"self":[{"href":"https:\/\/www.deptagency.com\/en-dk\/wp-json\/wp\/v2\/insight\/4124691","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.deptagency.com\/en-dk\/wp-json\/wp\/v2\/insight"}],"about":[{"href":"https:\/\/www.deptagency.com\/en-dk\/wp-json\/wp\/v2\/types\/article"}],"author":[{"embeddable":true,"href":"https:\/\/www.deptagency.com\/en-dk\/wp-json\/wp\/v2\/users\/40"}],"version-history":[{"count":8,"href":"https:\/\/www.deptagency.com\/en-dk\/wp-json\/wp\/v2\/insight\/4124691\/revisions"}],"predecessor-version":[{"id":4180573,"href":"https:\/\/www.deptagency.com\/en-dk\/wp-json\/wp\/v2\/insight\/4124691\/revisions\/4180573"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.deptagency.com\/en-dk\/wp-json\/wp\/v2\/media\/4124082"}],"wp:attachment":[{"href":"https:\/\/www.deptagency.com\/en-dk\/wp-json\/wp\/v2\/media?parent=4124691"}],"wp:term":[{"taxonomy":"person","embeddable":true,"href":"https:\/\/www.deptagency.com\/en-dk\/wp-json\/wp\/v2\/person?post=4124691"},{"taxonomy":"insight-topic","embeddable":true,"href":"https:\/\/www.deptagency.com\/en-dk\/wp-json\/wp\/v2\/insight-topics?post=4124691"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}