4 Pillars of Design – Part 2

<!DOCTYPE html>    <html lang="en-US" itemscope itemtype="http://schema.org/Blog" prefix="og: http://ogp.me/ns#">  <head>  <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-N939BGV');</script>  <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="profile" href="https://gmpg.org/xfn/11" />  <script type="text/javascript" src="https://www.tothenew.com/blog/wp-content/themes/ttn/js/jquery.min.js"></script> <link rel="stylesheet" type="text/css" href="https://www.tothenew.com/blog/wp-content/themes/ttn/css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="https://www.tothenew.com/blog/wp-content/themes/ttn/css/style.css"> <link rel="stylesheet" type="text/css" href="https://www.tothenew.com/blog/wp-content/themes/ttn/css/stylesheet.css"> <link rel="stylesheet" type="text/css" href="https://www.tothenew.com/blog/wp-content/themes/ttn/css/ie.css"> <link rel="stylesheet" href="https://www.tothenew.com/blog/wp-content/themes/ttn/css/jquery.mCustomScrollbar.css"> <link href="https://www.tothenew.com/blog/wp-content/themes/ttn/images/favicon.ico" rel="icon" type="image/x-icon"/> <script src="https://assets.adobedtm.com/02384cfb0f99/28701c80a9a8/launch-353f9f5a1184-development.min.js" async></script> <script> jQuery( document ).ready(function() { dataLayer.push({ 'event': 'categoryView', 'category': 'Experience Design', 'blogTitle': '4 Pillars of Design – Part 2', 'author': 'Quamar Alam Quamar' }); }); </script>  <title>4 Pillars of Design – Part 2 | TO THE NEW Blog</title> <meta name="description" content="Every design and/or architecture has some basics and so does Visual Design have. Applying principles to the visual designs might look overwhelming at first but once you start designing a page or concept together, it becomes easier. Visual Design has Four Pillars Namely Navigation Presentation Content Interaction I had already covered the first two pillars" /> <meta name="robots" content="max-image-preview:large" /> <link rel="canonical" href="https://www.tothenew.com/blog/4-pillars-of-design-part-2/" /> <meta name="generator" content="All in One SEO (AIOSEO) 4.3.7" /> <meta property="og:locale" content="en_US" /> <meta property="og:site_name" content="TO THE NEW BLOG" /> <meta property="og:type" content="blog" /> <meta property="og:title" content="4 Pillars of Design – Part 2 | TO THE NEW Blog" /> <meta property="og:description" content="Every design and/or architecture has some basics and so does Visual Design have. Applying principles to the visual designs might look overwhelming at first but once you start designing a page or concept together, it becomes easier. Visual Design has Four Pillars Namely Navigation Presentation Content Interaction I had already covered the first two pillars" /> <meta property="og:url" content="https://www.tothenew.com/blog/4-pillars-of-design-part-2/" /> <meta property="og:image" content="https://www.tothenew.com/blog/wp-content/themes/ttn/images/social-logo.png" /> <meta property="og:image:secure_url" content="https://www.tothenew.com/blog/wp-content/themes/ttn/images/social-logo.png" /> <meta name="twitter:card" content="summary" /> <meta name="twitter:site" content="@tothenew" /> <meta name="twitter:title" content="4 Pillars of Design – Part 2 | TO THE NEW Blog" /> <meta name="twitter:description" content="Every design and/or architecture has some basics and so does Visual Design have. Applying principles to the visual designs might look overwhelming at first but once you start designing a page or concept together, it becomes easier. Visual Design has Four Pillars Namely Navigation Presentation Content Interaction I had already covered the first two pillars" /> <meta name="twitter:image" content="https://www.tothenew.com/blog/wp-content/themes/ttn/images/social-logo.png" /> <script type="application/ld+json" class="aioseo-schema"> {"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.tothenew.com\/blog\/4-pillars-of-design-part-2\/#article","name":"4 Pillars of Design \u2013 Part 2 | TO THE NEW Blog","headline":"4 Pillars of Design – Part 2","author":{"@id":"https:\/\/www.tothenew.com\/blog\/author\/quamar\/#author"},"publisher":{"@id":"https:\/\/www.tothenew.com\/blog\/#organization"},"image":{"@type":"ImageObject","url":"\/blog\/wp-ttn-blog\/uploads\/2017\/02\/impressora-multifuncional1.jpg","@id":"https:\/\/www.tothenew.com\/blog\/#articleImage"},"datePublished":"2017-02-16T13:29:36+05:30","dateModified":"2017-03-20T11:35:08+05:30","inLanguage":"en-US","commentCount":1,"mainEntityOfPage":{"@id":"https:\/\/www.tothenew.com\/blog\/4-pillars-of-design-part-2\/#webpage"},"isPartOf":{"@id":"https:\/\/www.tothenew.com\/blog\/4-pillars-of-design-part-2\/#webpage"},"articleSection":"Experience Design, Front End Development, Technology, Content design, Experience Design, Good UI Design, Good User Interface, Interaction, Mobile User Interface Design, User Interface Design, Visual Design, Visual Design Approach"},{"@type":"BreadcrumbList","@id":"https:\/\/www.tothenew.com\/blog\/4-pillars-of-design-part-2\/#breadcrumblist","itemListElement":[{"@type":"ListItem","@id":"https:\/\/www.tothenew.com\/blog\/#listItem","position":1,"item":{"@type":"WebPage","@id":"https:\/\/www.tothenew.com\/blog\/","name":"Home","description":"Dive into TO THE NEW's blogs for insights on digital tech services, product engineering, Cloud solutions, and more. Our articles cover trending tech topics from design to development to MarTech.","url":"https:\/\/www.tothenew.com\/blog\/"},"nextItem":"https:\/\/www.tothenew.com\/blog\/4-pillars-of-design-part-2\/#listItem"},{"@type":"ListItem","@id":"https:\/\/www.tothenew.com\/blog\/4-pillars-of-design-part-2\/#listItem","position":2,"item":{"@type":"WebPage","@id":"https:\/\/www.tothenew.com\/blog\/4-pillars-of-design-part-2\/","name":"4 Pillars of Design - Part 2","description":"Every design and\/or architecture has some basics and so does Visual Design have. Applying principles to the visual designs might look overwhelming at first but once you start designing a page or concept together, it becomes easier. Visual Design has Four Pillars Namely Navigation Presentation Content Interaction I had already covered the first two pillars","url":"https:\/\/www.tothenew.com\/blog\/4-pillars-of-design-part-2\/"},"previousItem":"https:\/\/www.tothenew.com\/blog\/#listItem"}]},{"@type":"Organization","@id":"https:\/\/www.tothenew.com\/blog\/#organization","name":"TO THE NEW Blog","url":"https:\/\/www.tothenew.com\/blog\/"},{"@type":"Person","@id":"https:\/\/www.tothenew.com\/blog\/author\/quamar\/#author","url":"https:\/\/www.tothenew.com\/blog\/author\/quamar\/","name":"Quamar Alam Quamar","image":{"@type":"ImageObject","@id":"https:\/\/www.tothenew.com\/blog\/4-pillars-of-design-part-2\/#authorImage","url":"https:\/\/newersworld-sf-static.tothenew.net\/prod\/profilePicFolder\/18c21182-3bae-4ad9-b038-0828933cf174_161-Quamar-Alam-Quamar-PROFILEPICTURE.jpeg","width":96,"height":96,"caption":"Quamar Alam Quamar"}},{"@type":"WebPage","@id":"https:\/\/www.tothenew.com\/blog\/4-pillars-of-design-part-2\/#webpage","url":"https:\/\/www.tothenew.com\/blog\/4-pillars-of-design-part-2\/","name":"4 Pillars of Design \u2013 Part 2 | TO THE NEW Blog","description":"Every design and\/or architecture has some basics and so does Visual Design have. Applying principles to the visual designs might look overwhelming at first but once you start designing a page or concept together, it becomes easier. Visual Design has Four Pillars Namely Navigation Presentation Content Interaction I had already covered the first two pillars","inLanguage":"en-US","isPartOf":{"@id":"https:\/\/www.tothenew.com\/blog\/#website"},"breadcrumb":{"@id":"https:\/\/www.tothenew.com\/blog\/4-pillars-of-design-part-2\/#breadcrumblist"},"author":{"@id":"https:\/\/www.tothenew.com\/blog\/author\/quamar\/#author"},"creator":{"@id":"https:\/\/www.tothenew.com\/blog\/author\/quamar\/#author"},"datePublished":"2017-02-16T13:29:36+05:30","dateModified":"2017-03-20T11:35:08+05:30"},{"@type":"WebSite","@id":"https:\/\/www.tothenew.com\/blog\/#website","url":"https:\/\/www.tothenew.com\/blog\/","name":"TO THE NEW Blog","inLanguage":"en-US","publisher":{"@id":"https:\/\/www.tothenew.com\/blog\/#organization"}}]} </script>  <link rel='dns-prefetch' href='//www.tothenew.com' /> <link rel='dns-prefetch' href='//ajax.googleapis.com' /> <link rel='dns-prefetch' href='//static.addtoany.com' /> <link rel='dns-prefetch' href='//tps.tothenew.com' /> <link rel="alternate" type="application/rss+xml" title="TO THE NEW Blog » Feed" href="https://www.tothenew.com/blog/feed/" /> <link rel="alternate" type="application/rss+xml" title="TO THE NEW Blog » Comments Feed" href="https://www.tothenew.com/blog/comments/feed/" /> <link rel="alternate" type="application/rss+xml" title="TO THE NEW Blog » 4 Pillars of Design – Part 2 Comments Feed" href="https://www.tothenew.com/blog/4-pillars-of-design-part-2/feed/" /> <link rel='stylesheet' id='sweetalert2-css' href='https://www.tothenew.com/blog/wp-content/plugins/user-registration/assets/css/sweetalert2/sweetalert2.min.css?ver=10.16.7' type='text/css' media='all' /> <link rel='stylesheet' id='user-registration-general-css' href='https://www.tothenew.com/blog/wp-content/plugins/user-registration/assets/css/user-registration.css?ver=2.3.5' type='text/css' media='all' /> <link rel='stylesheet' id='user-registration-smallscreen-css' href='https://www.tothenew.com/blog/wp-content/plugins/user-registration/assets/css/user-registration-smallscreen.css?ver=2.3.5' type='text/css' media='only screen and (max-width: 768px)' /> <link rel='stylesheet' id='user-registration-my-account-layout-css' href='https://www.tothenew.com/blog/wp-content/plugins/user-registration/assets/css/my-account-layout.css?ver=2.3.5' type='text/css' media='all' /> <link rel='stylesheet' id='dashicons-css' href='https://www.tothenew.com/blog/wp-includes/css/dashicons.min.css?ver=6.2.2' type='text/css' media='all' /> <link rel='stylesheet' id='wp-block-library-css' href='https://www.tothenew.com/blog/wp-includes/css/dist/block-library/style.min.css?ver=6.2.2' type='text/css' media='all' /> <link rel='stylesheet' id='mpp_gutenberg-css' href='https://www.tothenew.com/blog/wp-content/plugins/metronet-profile-picture/dist/blocks.style.build.css?ver=2.6.0' type='text/css' media='all' /> <link rel='stylesheet' id='classic-theme-styles-css' href='https://www.tothenew.com/blog/wp-includes/css/classic-themes.min.css?ver=6.2.2' type='text/css' media='all' /> <style id='global-styles-inline-css' type='text/css'> body{--wp--preset--color--black: #000000;--wp--preset--color--cyan-bluish-gray: #abb8c3;--wp--preset--color--white: #ffffff;--wp--preset--color--pale-pink: #f78da7;--wp--preset--color--vivid-red: #cf2e2e;--wp--preset--color--luminous-vivid-orange: #ff6900;--wp--preset--color--luminous-vivid-amber: #fcb900;--wp--preset--color--light-green-cyan: #7bdcb5;--wp--preset--color--vivid-green-cyan: #00d084;--wp--preset--color--pale-cyan-blue: #8ed1fc;--wp--preset--color--vivid-cyan-blue: #0693e3;--wp--preset--color--vivid-purple: #9b51e0;--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple: linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%);--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan: linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%);--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange: linear-gradient(135deg,rgba(252,185,0,1) 0%,rgba(255,105,0,1) 100%);--wp--preset--gradient--luminous-vivid-orange-to-vivid-red: linear-gradient(135deg,rgba(255,105,0,1) 0%,rgb(207,46,46) 100%);--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray: linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%);--wp--preset--gradient--cool-to-warm-spectrum: linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%);--wp--preset--gradient--blush-light-purple: linear-gradient(135deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%);--wp--preset--gradient--blush-bordeaux: linear-gradient(135deg,rgb(254,205,165) 0%,rgb(254,45,45) 50%,rgb(107,0,62) 100%);--wp--preset--gradient--luminous-dusk: linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%);--wp--preset--gradient--pale-ocean: linear-gradient(135deg,rgb(255,245,203) 0%,rgb(182,227,212) 50%,rgb(51,167,181) 100%);--wp--preset--gradient--electric-grass: linear-gradient(135deg,rgb(202,248,128) 0%,rgb(113,206,126) 100%);--wp--preset--gradient--midnight: linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%);--wp--preset--duotone--dark-grayscale: url('#wp-duotone-dark-grayscale');--wp--preset--duotone--grayscale: url('#wp-duotone-grayscale');--wp--preset--duotone--purple-yellow: url('#wp-duotone-purple-yellow');--wp--preset--duotone--blue-red: url('#wp-duotone-blue-red');--wp--preset--duotone--midnight: url('#wp-duotone-midnight');--wp--preset--duotone--magenta-yellow: url('#wp-duotone-magenta-yellow');--wp--preset--duotone--purple-green: url('#wp-duotone-purple-green');--wp--preset--duotone--blue-orange: url('#wp-duotone-blue-orange');--wp--preset--font-size--small: 13px;--wp--preset--font-size--medium: 20px;--wp--preset--font-size--large: 36px;--wp--preset--font-size--x-large: 42px;--wp--preset--spacing--20: 0.44rem;--wp--preset--spacing--30: 0.67rem;--wp--preset--spacing--40: 1rem;--wp--preset--spacing--50: 1.5rem;--wp--preset--spacing--60: 2.25rem;--wp--preset--spacing--70: 3.38rem;--wp--preset--spacing--80: 5.06rem;--wp--preset--shadow--natural: 6px 6px 9px rgba(0, 0, 0, 0.2);--wp--preset--shadow--deep: 12px 12px 50px rgba(0, 0, 0, 0.4);--wp--preset--shadow--sharp: 6px 6px 0px rgba(0, 0, 0, 0.2);--wp--preset--shadow--outlined: 6px 6px 0px -3px rgba(255, 255, 255, 1), 6px 6px rgba(0, 0, 0, 1);--wp--preset--shadow--crisp: 6px 6px 0px rgba(0, 0, 0, 1);}:where(.is-layout-flex){gap: 0.5em;}body .is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-constrained > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-constrained > .aligncenter{margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){max-width: var(--wp--style--global--content-size);margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > .alignwide{max-width: var(--wp--style--global--wide-size);}body .is-layout-flex{display: flex;}body .is-layout-flex{flex-wrap: wrap;align-items: center;}body .is-layout-flex > *{margin: 0;}:where(.wp-block-columns.is-layout-flex){gap: 2em;}.has-black-color{color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-color{color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-color{color: var(--wp--preset--color--white) !important;}.has-pale-pink-color{color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-color{color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-color{color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-color{color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-color{color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-color{color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-color{color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-color{color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-color{color: var(--wp--preset--color--vivid-purple) !important;}.has-black-background-color{background-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-background-color{background-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-background-color{background-color: var(--wp--preset--color--white) !important;}.has-pale-pink-background-color{background-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-background-color{background-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-background-color{background-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-background-color{background-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-background-color{background-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-background-color{background-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-background-color{background-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-background-color{background-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-background-color{background-color: var(--wp--preset--color--vivid-purple) !important;}.has-black-border-color{border-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-border-color{border-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-border-color{border-color: var(--wp--preset--color--white) !important;}.has-pale-pink-border-color{border-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-border-color{border-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-border-color{border-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-border-color{border-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-border-color{border-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-border-color{border-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-border-color{border-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-border-color{border-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-border-color{border-color: var(--wp--preset--color--vivid-purple) !important;}.has-vivid-cyan-blue-to-vivid-purple-gradient-background{background: var(--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple) !important;}.has-light-green-cyan-to-vivid-green-cyan-gradient-background{background: var(--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan) !important;}.has-luminous-vivid-amber-to-luminous-vivid-orange-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange) !important;}.has-luminous-vivid-orange-to-vivid-red-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-orange-to-vivid-red) !important;}.has-very-light-gray-to-cyan-bluish-gray-gradient-background{background: var(--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray) !important;}.has-cool-to-warm-spectrum-gradient-background{background: var(--wp--preset--gradient--cool-to-warm-spectrum) !important;}.has-blush-light-purple-gradient-background{background: var(--wp--preset--gradient--blush-light-purple) !important;}.has-blush-bordeaux-gradient-background{background: var(--wp--preset--gradient--blush-bordeaux) !important;}.has-luminous-dusk-gradient-background{background: var(--wp--preset--gradient--luminous-dusk) !important;}.has-pale-ocean-gradient-background{background: var(--wp--preset--gradient--pale-ocean) !important;}.has-electric-grass-gradient-background{background: var(--wp--preset--gradient--electric-grass) !important;}.has-midnight-gradient-background{background: var(--wp--preset--gradient--midnight) !important;}.has-small-font-size{font-size: var(--wp--preset--font-size--small) !important;}.has-medium-font-size{font-size: var(--wp--preset--font-size--medium) !important;}.has-large-font-size{font-size: var(--wp--preset--font-size--large) !important;}.has-x-large-font-size{font-size: var(--wp--preset--font-size--x-large) !important;} .wp-block-navigation a:where(:not(.wp-element-button)){color: inherit;} :where(.wp-block-columns.is-layout-flex){gap: 2em;} .wp-block-pullquote{font-size: 1.5em;line-height: 1.6;} </style> <link rel='stylesheet' id='ap-fileuploader-animation-css' href='https://www.tothenew.com/blog/wp-content/plugins/accesspress-anonymous-post-pro/css/loading-animation.css?ver=6.2.2' type='text/css' media='all' /> <link rel='stylesheet' id='ap-fileuploader-css' href='https://www.tothenew.com/blog/wp-content/plugins/accesspress-anonymous-post-pro/css/fileuploader.css?ver=6.2.2' type='text/css' media='all' /> <link rel='stylesheet' id='ap-jquery-ui-style-css' href='//ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/smoothness/jquery-ui.css?ver=6.2.2' type='text/css' media='all' /> <link rel='stylesheet' id='ap-tagit-styles-css' href='https://www.tothenew.com/blog/wp-content/plugins/accesspress-anonymous-post-pro/css/jquery.tagit.css?ver=6.2.2' type='text/css' media='all' /> <link rel='stylesheet' id='ap-tagit-ui-styles-css' href='https://www.tothenew.com/blog/wp-content/plugins/accesspress-anonymous-post-pro/css/tagit.ui-zendesk.css?ver=6.2.2' type='text/css' media='all' /> <link rel='stylesheet' id='fontawesome-css' href='https://www.tothenew.com/blog/wp-content/plugins/accesspress-anonymous-post-pro/css/fontawesome/css/all.css?ver=5.15.1' type='text/css' media='all' /> <link rel='stylesheet' id='ap-front-styles-css' href='https://www.tothenew.com/blog/wp-content/plugins/accesspress-anonymous-post-pro/css/frontend-style.css?ver=4.0.2' type='text/css' media='all' /> <link rel='stylesheet' id='ap-lightbox-css-css' href='https://www.tothenew.com/blog/wp-content/plugins/accesspress-anonymous-post-pro/lightbox/css/lightbox.css?ver=4.0.2' type='text/css' media='all' /> <link rel='stylesheet' id='login-with-google-css' href='https://www.tothenew.com/blog/wp-content/plugins/login-with-google/assets/build/css/login.css?ver=1732271165' type='text/css' media='all' /> <link rel='stylesheet' id='ttn_new-fonts-css' href='https://tps.tothenew.com/css?family=Open+Sans:400italic,700italic,400,700&subset=latin,latin-ext' type='text/css' media='all' /> <link rel='stylesheet' id='ttn_new-style-css' href='https://www.tothenew.com/blog/wp-content/themes/ttn/style.css?ver=6.2.2' type='text/css' media='all' />  <link rel='stylesheet' id='addtoany-css' href='https://www.tothenew.com/blog/wp-content/plugins/add-to-any/addtoany.min.css?ver=1.16' type='text/css' media='all' /> <link rel='stylesheet' id='wppb_stylesheet-css' href='https://www.tothenew.com/blog/wp-content/plugins/profile-builder/assets/css/style-front-end.css?ver=3.12.4' type='text/css' media='all' /> <script type='text/javascript' defer src='//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js?ver=6.2.2' id='ap-jquery-ui-js'></script> <script type='text/javascript' defer src='https://www.tothenew.com/blog/wp-content/plugins/accesspress-anonymous-post-pro/js/tag-it.js?ver=4.0.2' id='ap-tagit-js-js'></script> <script type='text/javascript' defer src='https://www.tothenew.com/blog/wp-content/plugins/accesspress-anonymous-post-pro/js/tag-it-custom.js?ver=4.0.2' id='ap-tagit-custom-js-js'></script> <script type='text/javascript' defer src='https://www.tothenew.com/blog/wp-content/plugins/accesspress-anonymous-post-pro/js/fileuploader.js?ver=6.2.2' id='ap-fileuploader-js'></script> <script type='text/javascript' defer src='https://www.tothenew.com/blog/wp-content/plugins/accesspress-anonymous-post-pro/lightbox/js/lightbox.js?ver=4.0.2' id='ap-lightbox-js-js'></script> <script type='text/javascript' defer src='https://www.tothenew.com/blog/wp-includes/js/jquery/ui/core.min.js?ver=1.13.2' id='jquery-ui-core-js'></script> <script type='text/javascript' defer src='https://www.tothenew.com/blog/wp-includes/js/jquery/ui/datepicker.min.js?ver=1.13.2' id='jquery-ui-datepicker-js'></script> <script type='text/javascript' id='jquery-ui-datepicker-js-after'> jQuery(function(jQuery){jQuery.datepicker.setDefaults({"closeText":"Close","currentText":"Today","monthNames":["January","February","March","April","May","June","July","August","September","October","November","December"],"monthNamesShort":["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],"nextText":"Next","prevText":"Previous","dayNames":["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"],"dayNamesShort":["Sun","Mon","Tue","Wed","Thu","Fri","Sat"],"dayNamesMin":["S","M","T","W","T","F","S"],"dateFormat":"MM d, yy","firstDay":1,"isRTL":false});}); </script> <script type='text/javascript' id='ap-frontend-js-js-extra'> /* <![CDATA[ */ var ap_fileuploader = {"upload_url":"https:\/\/www.tothenew.com\/blog\/wp-admin\/admin-ajax.php","nonce":"59b1791b19"}; var ap_form_required_message = ["This field is required","anonymous-post-pro"]; var ap_captcha_error_message = ["Sum is not correct.","anonymous-post-pro"]; /* ]]> */ </script> <script type='text/javascript' defer src='https://www.tothenew.com/blog/wp-content/plugins/accesspress-anonymous-post-pro/js/frontend.js?ver=4.0.2' id='ap-frontend-js-js'></script> <script type='text/javascript' id='addtoany-core-js-before'> window.a2a_config=window.a2a_config||{};a2a_config.callbacks=[];a2a_config.overlays=[];a2a_config.templates={}; </script> <script type='text/javascript' defer async src='https://static.addtoany.com/menu/page.js' id='addtoany-core-js'></script> <script type='text/javascript' defer async src='https://www.tothenew.com/blog/wp-content/plugins/add-to-any/addtoany.min.js?ver=1.1' id='addtoany-jquery-js'></script> <script type='text/javascript' id='loadmore_script-js-extra'> /* <![CDATA[ */ var loadmore_params = {"ajaxurl":"https:\/\/www.tothenew.com\/blog\/wp-admin\/admin-ajax.php"}; /* ]]> */ </script> <script type='text/javascript' defer src='https://www.tothenew.com/blog/wp-content/themes/ttn/js/ajax.js?ver=6.2.2' id='loadmore_script-js'></script> <link rel="https://api.w.org/" href="https://www.tothenew.com/blog/wp-json/" /><link rel="alternate" type="application/json" href="https://www.tothenew.com/blog/wp-json/wp/v2/posts/45878" /><link rel="EditURI" type="application/rsd+xml" title="RSD" href="https://www.tothenew.com/blog/xmlrpc.php?rsd" /> <meta name="generator" content="WordPress 6.2.2" /> <link rel='shortlink' href='https://www.tothenew.com/blog/?p=45878' /> <link rel="alternate" type="application/json+oembed" href="https://www.tothenew.com/blog/wp-json/oembed/1.0/embed?url=https%3A%2F%2Fwww.tothenew.com%2Fblog%2F4-pillars-of-design-part-2%2F" /> <link rel="alternate" type="text/xml+oembed" href="https://www.tothenew.com/blog/wp-json/oembed/1.0/embed?url=https%3A%2F%2Fwww.tothenew.com%2Fblog%2F4-pillars-of-design-part-2%2F&format=xml" /> <style type="text/css" id="wp-custom-css"> .blogs h2 b, .blogs h3 b, .blogs h4, .blogs h5 b, .blogs h2 strong, .blogs h3 strong, .blogs h4 strong, .blogs h5 strong, body h2, body h3, body h4, body h5{ font-weight: 500 !important; } .blog-dashboard td, .blog-dashboard th{padding: 10px 0px;} body b, body strong{ font-weight: 600 !important; } /* css for tick mark list */ #blog-section{ border-bottom: 1px solid #e5e2e2; } .page-header.acs_search_header{ max-width: 1210px; margin: 0 auto; padding: 15px; width: 100%; } .acs_twenty{ background: #f6f4f4; } .search-no-results .acs_search_results_container { min-height: inherit; } .search-no-results .acs_search_header { text-align: center; padding-top: 60px; } #header .search-icon:after, #header .search-icon:before{ top: 26px; transition: inherit; } #header.clone .search-icon::before, #header.clone .search-icon::after { top: 10px; } .search .page-header { border: 0; padding: 0px 0px 30px 0px !important; } .search .entry-header h1 { font-size: 18px !important; margin: 0px 0px 20px 0px; line-height: 27px; } .search h2.entry-title { font-size: 16px !important; } .acs_search_results_items{ display: grid; grid-template-columns: repeat(3,1fr); grid-gap: 0.5rem; grid-auto-rows: 1fr; max-width: 1210px; margin: 0 auto; width: 100%; } .acs_search_results_items .border{ padding-top: 25px; width:auto; } .acs_search_results_items .border .blue-box{ height:100%; } .acs_search_results_container .acs_search_results_status{ background: #f6f4f4; margin: 0; border-bottom: 1px solid #e5e2e2; padding: 20px 0px; } li.checksome:before { content: '✓'; font-size: 17px; font-weight: 700; } p.mandatory { color: red !important; text-align: right; } .ap-pro-front-form #mceu_28-body { white-space: break-spaces; } .hs_error_rollup>ul.no-list.hs-error-msgs.inputs-list { display: none !important; } .wp-admin .js .tmce-active .wp-editor-area { color: #333; } .btn-load-more { padding: 10px 40px; background: none; border-color: #d9177f; color: #d9177f; border-radius: unset; } .load_more.text-center { margin-bottom: 48px; } .btn-load-more:hover { background: #d9177f; color: #fff; } .addtoany_share_save_container.addtoany_content.addtoany_content_bottom { text-align: center; } .site-logo { background: url(/themes/custom/ttnd/images/TTN-logo.svg) no-repeat; } .social li a { background: url(/themes/custom/ttnd/images/social_icons.svg) no-repeat; } #new_post_form #mceu_28-body { white-space: break-spaces; } .ap-pro-front-form #mceu_11 { display: none; } form#loginform input#wp-submit:hover { background: #b40a65; } #header.clone #menu li.topmyaccount:last-child a:hover{ background: transparent; color: #d9167e !important; } #header.clone #menu > ul .menu-expanded.topmyaccount ul{ border-top: 0px; border-radius: 0px; } #header.clone #menu li.topmyaccount:last-child ul li:last-child { border-top: 1px solid #ccc; } #header.clone #menu li.topmyaccount:last-child ul li a:hover { border: 0px; } li.user-registration-MyAccount-navigation-link.user-registration-MyAccount-navigation-link--edit-password { display: none !important; } /* writing css for admin login*/ .ttn-login-tutorial { margin: 42px 0 30px; box-sizing: border-box; padding: 0px 30px; background-color: #fff; } #header.clone #menu li:last-child a{ border: inherit; padding-left: inherit; padding-right: inherit; color: inherit; padding: 10px 15px !important; } form#loginform { padding: 15px; border: 1px solid #dee0e9; box-shadow: none; background: 0 0; } form#loginform p{ margin:10px 0px; font-size:14px; color:#000; } form#loginform input#user_login,input#user_pass { border: 1px solid #ccc; outline: none !important; margin: 10px 0px; } form#loginform p.login-submit { text-align: center; } form#loginform input#wp-submit { width: 200px; background: #d9167e; color: #fff; font-size: 18px; margin: 5px 0px; height: 46px; line-height: 20px; } form#loginform p.login-remember label{ display: inline-block; padding-right: 10px; white-space: nowrap; } form#loginform input[type="checkbox"]{ border: 1px solid #ccc; outline: none !important; vertical-align: middle; width: 20%; margin-right: 7%; font-size: 14px; } /*css for admin login ends here*/ /*css for details update page starts here*/ #user-registration.horizontal{ border:1px solid #dee0e9; box-shadow:none; } #user-registration.horizontal .user-registration-MyAccount-navigation ul .user-registration-MyAccount-navigation-link.is-active a { border-bottom:10px solid #d9167e !important; } .user-registration-MyAccount-content label { text-align: left; letter-spacing: 0px; color: #000000; margin: 14px 0px; } .select2-container .select2-selection--single { height:41px !important } .select2-container--default .select2-selection--single .select2-selection__rendered { color: #000; line-height: 36px !important; font-size: 16px !important; font-weight:500 !important } #user-registration input { border: 1px solid #ccc; outline: none !important; padding: 0px 10px; font-size: 16px; font-weight: 500; } input#edit_profile { width: 33%; color: #fff; font-size: 16px; background: #d9167e; border: 0px; } input#edit_profile:hover{ background: #b40a65; border-color: #b40a65; } span.select2.select2-container.select2-container--default { width: auto !important; } @media screen and (max-width:991px){ .tag-cloud {height: auto;} #header.search-open .search-icon{ top: -12px; } } @media screen and (max-width:480px){ input#edit_profile{ width:50%; } } /*css for details upate page ends here*/ nav.user-registration-MyAccount-navigation { background: #000; } .logged-in .forlogout, .wp_google_login__divider{ display:none;} .forlogin { display:none;} .logged-in .forlogin { display:block;} #wppb-edit-user #description { height: 100px; } .wppb-form-field.wppb-default-password { display: none; } .topmyaccount ul { width: 123px !important; margin-top: -6px; } .search-results .breadcrumbs li:last-child { display: none; } .user-registration-register.register a { display: none; } .forlogout {text-align: center; margin: 20px;} .forlogout a{ width: 200px; background: #d9167e; color: #fff; font-size: 18px; height: 46px; padding: 8px 8px; display: inline-block;} .reject-notify { text-align: right; margin-right: 11px; margin-bottom: 10px; } .rejection-form-item textarea { width: 100%; min-height: 190px; } .userblog h2.entry-title a, .userblog h2.entry-title { color: #000; text-align:left; } .updated-user-blog { display: flex; } .userblog .updated-user-blog .button{ background: url(/blog/wp-ttn-blog/uploads/2021/05/edit.png); background-repeat: no-repeat; background-size: 18px; width: 72px; font-size: 16px; background-position: right 2px; height: 20px; box-shadow: none; } .userblog .entry-content { text-align: left; } .publishedblog .status-publish:hover, .unpublishedblog .status-publish, .userblog .status-draft:hover { transform: scale(1.04); transition: ease-in-out; transition-duration: .4s; } .publishedblog .status-publish:hover h2.entry-title a, .unpublishedblog .status-publish, .userblog .status-draft:hover h2.entry-title a{ color:#d9167e; } li.user-registration-MyAccount-navigation-link.user-registration-MyAccount-navigation-link--edit-blog { display: none !important; } #new_post_form .label-wrap { text-align: left; } .publishedblog .entry-content p { text-align: left; } #new_post_form input[type="checkbox"] { height: 16px; width: 16px; } .blog-cont-box { top: -32px !important; } #new_post_form input[type="submit"] { max-width: 200px; background: #d9167e; border: 0px !important; box-shadow: inherit !important; font-size: 16px; height: 46px; line-height: 46px; color: #fff; margin-bottom: 36px; } #new_post_form .ap-checkbox-wrap label.ap-checkbox-label { text-align: left; } .comment-form-cookies-consent label { margin-left: 28px; font-size: 13px; margin-top: -11px; } .comment-form-cookies-consent input { width: 20px; height: 20px; } .ap-checkbox-wrap label.ap-checkbox-label { font-size: 14px; font-weight: normal; width: 30%; display: inline-block; margin: 0; } #user-registration.horizontal .user-registration-MyAccount-navigation ul .user-registration-MyAccount-navigation-link.is-active a { background-color: transparent !important; border-bottom: 3px solid #d9177f; font-size: 15px; } h2.ap-pro-front-form-title { text-align: center; margin-bottom: 12px !important; } .thankyounav { display:none;} .logged-in .thankyounav { display:block;} .ur-frontend-form label.user-registration-error { padding: 0px; font-weight: 400; margin-top: -9px !important; } .prftxt>i { display: none; } .ur-frontend-form #ur-submit-message-node { margin: -32px 0 0; font-size: 16px; } .user-registration-MyAccount-content fieldset { border:none; padding: 0;} .cntlinehght { line-height: 28px; font-size: 20px; } .user-registration-error::before { content: none; } .ur-frontend-form input { border: 1px solid #ccc; } .user-registration-error { border-top-color: #fff; background: no-repeat; color: #f4000a; } .ur-field-item.field-description { width: 97% !important; } .ur-frontend-form .ur-form-row .ur-form-grid textarea { border: 1px solid #a2a7ae; } .user-registration-account .user-registration-profile-fields .form-row { display: block !important; } .user-registration-profile-fields p { display: flex; justify-content: center; margin-top: 10px; } .user-registration-profile-fields label { text-align: left; } .user-registration-page #secondary { display: none; } .thank_login { padding: 10px 40px; background: #d9177f; color: #fff !important; border-color: #d9177f; text-decoration: none !important; } .user-registration-submit-Button {background: #d9177f; color: #fff !important; border-color: #d9177f;} .user-registration-Button { background: none repeat scroll 0 0 #d9177f; border: medium none; color: #fff; cursor: pointer; font-weight: 600; padding: 10px 0 6px; text-transform: uppercase; width: 100%;} #user-registration.horizontal .user-registration-MyAccount-navigation ul .user-registration-MyAccount-navigation-link a { color: #fff; } #user-registration.horizontal .user-registration-MyAccount-navigation ul .user-registration-MyAccount-navigation-link.is-active a { background-color: #d9177f; } #user-registration p.blogtext { margin: 23px 0px 0px; letter-spacing: 0px; color: #000000; text-align: center; font-size: 16px; } .user-registration-account .status-publish, .userblog .status-draft{ width: 74%; margin: 0 auto; -webkit-box-shadow: 0px 0px 7px 0px rgba(194, 194, 194, 1); -moz-box-shadow: 0px 0px 7px 0px rgba(194, 194, 194, 1); box-shadow: 0px 0px 7px 0px rgba(194, 194, 194, 1); margin-top: 40px; padding: 28px; margin-bottom: 40px; } .ap-pro-front-form .ap-form-error { margin-top: 4px; } .ap-pro-front-form .author-name .ap-pro-textfield { cursor: not-allowed; } .page-template-default .status-publish{ width: 74%; margin: 0 auto; -webkit-box-shadow: 0px 0px 7px 0px rgba(194, 194, 194, 1); -moz-box-shadow: 0px 0px 7px 0px rgba(194, 194, 194, 1); box-shadow: 0px 0px 7px 0px rgba(194, 194, 194, 1); margin-top: 40px; padding: 28px; margin-bottom: 40px; } .page-template-default header.entry-header h1 { font-size: 28px; } .page-template-default header.entry-header{ position: relative; padding-bottom: 20px; border-bottom: 1px solid #ccc; } .page-template-default header.entry-header:after { position: absolute; height: 5px; width: 20%; background: #d9167e; content: ""; bottom: -3px; } h2.ap-pro-front-form-title { text-align: center; } .ap-pro-form-field-wrapper { margin-bottom: 0px; } .ap-pro-form-field-wrapper p { padding-top: 10px; } .ap-pro-form-field-wrapper .label-wrap label { padding-bottom: 0px; } .ap-pro-form-field .wp-editor-container textarea.wp-editor-area { min-height: 148px; } .ap-pro-form-field-wrapper.category select { padding: 10px; font-size: 15px; } .ap-pro-form-field-wrapper.payment-agreement { text-align: center; } .payment-agreement.ap-pro-form-field-wrapper input[type="submit"] { max-width: 200px; background: #d9167e; border: 0px !important; box-shadow: inherit !important; font-size: 16px; height: 46px; line-height:46px; } .payment-agreement.ap-pro-form-field-wrapper input[type="submit"]:hover { background: #b40a65 !important; } .user-registration-account header.entry-header h1 { font-size: 28px; } .user-registration-account header.entry-header{ position: relative; padding-bottom: 20px; border-bottom: 1px solid #ccc; } .user-registration-account header.entry-header:after { position: absolute; height: 5px; width: 20%; background: #d9167e; content: ""; bottom: -3px; } .blog-user-registration .post-title input, .blog-user-registration .post-content input, .blog-user-registration .primary-competency input, .blog-user-registration .ap-checkbox-wrap input{background: #F8F8F8 0% 0% no-repeat padding-box; box-shadow: inset 0px 3px 6px #7B7B7B29; border: 1px solid #BFBFBF; opacity: 1;} span.edit-link { display: none !important; } #user-registration { margin: 42px 0 30px; } .user-registration-account .login .form-row{ justify-content: center; display: flex; flex-wrap: wrap; } .user-registration-account .form-row.form-row-wide{ display:block } .user-registration-account .form-row input[type=submit]{ width: 200px; background: #d9167e; color: #fff; font-size: 18px; margin-top: 10px; height: 46px; line-height: 20px; } .ur-frontend-form .ur-button-container .ur-submit-button, .user-registration-MyAccount-content .ap-form-submit-wrapper input { margin: 20px auto 34px; width: 200px; background: #d9167e; color: #fff; font-size: 18px; height: 46px; line-height: 20px; } .user-registration-MyAccount-content .ap-form-submit-wrapper{ text-align: center; } .user-registration-MyAccount-content .ap-form_field select{ font-size: 16px; } .user-registration-MyAccount-content .ap-form-field-wrapper label{ font-size: 14px; } .ur-frontend-form { margin-top: 38px; padding: 30px; } .ur-frontend-form .ur-field-item { width: 46.666%; display: inline-block; margin: 0 1.333% 0px !important; } .ap-form-wrapper{ text-align:left; } .user-registration-account span.edit-link { margin-top: -21px; display: block; } .publishedblog { padding-bottom: 40px; } .publishedblog h2 { margin-bottom: 12px !important; } span.user-registration-nick-name { display: none; } .publishedblog .status-publish, .unpublishedblog .status-publish, .userblog .status-draft{ width: 47%; display: inline-block; margin: 0 1%; margin-top: 26px; vertical-align: top; min-height: 330px; } #user-registration p { color: #333; font-size: 14px; } #user-registration .user-registration-MyAccount-content .edit-password legend, #user-registration .user-registration-MyAccount-content h2{ font-family: "Montserrat", sans-serif; color: #000000; opacity: 1; text-align: center;} .user-registration-message a { padding: 12px 10px; clear: both; font-size: 14px; display: block; margin-left: 14px; border: 1px solid #d9167e; max-width: 178px; margin: 0 auto; background: #d9167e; color: #fff; text-decoration: none; } .user-registration-message a:hover{ background:#b40a65; } .user-registration-message { border-top-color: #d9167e; background: rgba(143,174,27,.1); color: #000000; font-size: 16px; font-weight: 600; text-align: center; display: block; margin-bottom: 12px !important; } .register .buisness-error, .register .user-registration-error { font-size: 13px !important; position: absolute; } form.register .ur-field-item { position: relative; } input[type=checkbox]{-webkit-appearance: auto;} .ap-pro-form-field-wrapper input[type="checkbox"] { height: 16px; width: 16px; } .register .user-registration-message{display:none;} #header #menu > ul .menu-expanded ul li:last-child a{text-transform: none;} .category-list ul li a { text-transform: inherit; } @media screen and (max-width: 1023px){ #header .search-icon{ background-position: -10px 13px; background-size: 180%; background-color: transparent !important; } #header .search-icon span{display:none;} .site-logo{background-position: -98px 3px !important;} } @media screen and (max-width: 991px){ .ttn-login-tutorial{ padding: 0 !important; } .user-registration { padding: 0 !important; } .ur-frontend-form .ur-field-item, .page-template-default .status-publish { width: 100%; margin: 0 !important; } .ur-frontend-form { padding: 10px; } .publishedblog .status-publish, .unpublishedblog .status-publish, .userblog .status-draft{width: 100%;margin:10px 0px;} .ap-checkbox-wrap label.ap-checkbox-label{ width:50%; } .acs_search_results_items{ grid-template-columns: repeat(2,1fr); } } @media screen and (max-width: 800px){ div.ap-form-wrapper { padding: 10px 8px !important; } .breadcrumbs{ height: 32px; overflow:inherit; white-space:inherit; } .breadcrumbs li:before { padding: 0 8px; } .page-template-default .status-publish{ padding: 20px 10px; } .user-registration-MyAccount-content .wppb-user-forms ul{ padding: 0 15px; } .wppb-user-forms ul li { margin: 0; padding-bottom: 14px; display: flex; justify-content: center; flex-wrap: wrap; } .wppb-user-forms label { text-align: left; margin: 2px 0px; width: 100%; font-size: 13px; } .wppb-user-forms .wppb-form-field input, .wppb-user-forms textarea { width: 100% !important; } } @media screen and (max-width: 600px){ #user-registration.horizontal .user-registration-MyAccount-navigation ul .user-registration-MyAccount-navigation-link a { padding: 10px 4px; font-size: 15px !important; letter-spacing: -1px; } #user-registration .user-registration-MyAccount-navigation ul .user-registration-MyAccount-navigation-link{display: inline-block;} div.ap-checkbox-wrap label.ap-checkbox-label { width: 50%; font-size: 12px !important; } div.ap-pro-form-field-wrapper input[type="checkbox"] { margin: 0 5px 5px 0; } #user-registration .user-registration-MyAccount-content { padding: 15px 0px; } .acs_search_results_items{ grid-template-columns: auto; } .col-xs-1.col-md-1.clear-all-filter{ bottom: 20px; } } @media screen and (max-width: 480px){ .category-list .cat-dropdown ul{max-height: 130px;overflow: auto;} .category-list .cat-dropdown .sort-by-dropdown-blog{max-height:inherit;} .ap-checkbox-wrap label.ap-checkbox-label{ width:100%; } div.ap-pro-form-field-wrapper input[type="checkbox"] { height: 14px; width: 12px; } } @media screen and (max-width:1024px){ #header ul#menu-ttn-menu li a { padding: 11px 20px 15px 0px !important; } } </style> <script type="text/javascript" src="https://www.tothenew.com/blog/wp-content/themes/ttn/js/jquery.min.js"></script> <script type="text/javascript" src="https://www.tothenew.com/blog/wp-content/themes/ttn/js/jquery.selectbox-0.2.js"></script> <script type="text/javascript" src="https://www.tothenew.com/blog/wp-content/themes/ttn/js/bootstrap.min.js"></script> <script src="https://www.tothenew.com/blog/wp-content/themes/ttn/js/jquery.validate.js"></script> <script type="text/javascript" src="https://www.tothenew.com/blog/wp-content/themes/ttn/js/application.js"></script> <script src="https://www.tothenew.com/blog/wp-content/themes/ttn/js/jquery.mCustomScrollbar.concat.min.js"></script> <script src="https://www.tothenew.com/blog/wp-content/themes/ttn/js/masonry.pkgd.min.js"></script> <script type="text/javascript" src="https://www.tothenew.com/blog/wp-content/themes/ttn/js/jquery.cookie.min.js"></script>  <script> !function(f,b,e,v,n,t,s) {if(f.fbq)return;n=f.fbq=function(){n.callMethod? n.callMethod.apply(n,arguments):n.queue.push(arguments)}; if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0'; n.queue=[];t=b.createElement(e);t.async=!0; t.src=v;s=b.getElementsByTagName(e)[0]; s.parentNode.insertBefore(t,s)}(window, document,'script', 'https://connect.facebook.net/en_US/fbevents.js'); fbq('init', '296707276361693'); fbq('track', 'PageView'); </script> <noscript><img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=296707276361693&ev=PageView&noscript=1" /></noscript>   <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">  </head> <body class="post-template-default single single-post postid-45878 single-format-standard user-registration-page custom-font-enabled">  <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-N939BGV" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>   <noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-M2TS6P" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript> <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= '//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-M2TS6P');</script>  <div id="container"> <header id="header"> <div class="container"> <div class="clearfix region-header"> <div class="logo"> <a rel="nofollow" href="/" class="site-logo"></a> </div> <div class="custom-search"> <form accept-charset="UTF-8" id="views-exposed-form-search-result-page-1" method="get" action="/search"> <div class="form--inline clearfix"> <label for="edit-combine"> </label> <input type="text" class="form-text" maxlength="128" size="30" value="" name="search_keyword" id="edit-combine" placeholder="Enter search term" /> <input type="submit" class="button js-form-submit form-submit" value="Apply" id="edit-submit-search-result" /> </div> </form> </div> <nav class="clearfix"> <div id="menu"> <ul id="menu-ttn-menu" class="clearfix menu"><li class="menu-expanded"><a href="/services">Services</a><span class="arrow"></span> <ul> <li class="menu-item"><a href="/digital-engineering">Digital Engineering</a></li> <li class="menu-item"><a href="/cloud-devops">Cloud & DevOps</a></li> <li class="menu-item"><a href="/media-and-entertainment-solutions">Media & Entertainment Solutions</a></li> <li class="menu-item"><a href="/data-analytics">Data & Analytics</a></li> <li class="menu-item"><a href="/cx">CX & Content</a></li> <li class="menu-item"><a href="/digital-marketing">Digital Marketing</a></li> </ul> </li> <li class="menu-expanded"><a href="/industries">Industries</a><span class="arrow"></span> <ul> <li class="menu-item"><a href="/industries/isv">Independent Software Vendors</a></li> <li class="menu-item"><a href="/industries/media-entertainment">Media & Entertainment</a></li> <li class="menu-item"><a href="/industries/consumer-internet">Consumer Internet</a></li> <li class="menu-item"><a href="/industries/ecommerce">E-Commerce</a></li> <li class="menu-item"><a href="/industries/bfsi">Financial Services</a></li> <li class="menu-item"><a href="/industries/healthcare-pharma">Healthcare & Pharma</a></li> <li class="menu-item"><a href="/industries/igaming">iGaming</a></li> </ul> </li> <li class="menu-expanded"><a href="/solutions">Solutions</a><span class="arrow"></span> <ul> <li class="menu-item has-description"><a href="/solutions/hawk">HAWK<span class="wrap">| Infra monitoring & Log Analytics</span></a></li> <li class="menu-item has-description"><a href="/solutions/Prism">Prism<span class="wrap">| AI-based Test Automation</span></a></li> <li class="menu-item has-description"><a href="/solutions/nimbus">Nimbus<span class="wrap">| Custom Data Ingestion Solution</span></a></li> <li class="menu-item has-description"><a href="/solutions/videoready">VideoReady<span class="wrap">| OTT & Video CMS framework</span></a></li> <li class="menu-item has-description"><a href="/solutions/bolt">BOLT<span class="wrap">| Faster AEM Development</span></a></li> </ul> </li> <li class=""><a href="/technologies">Technologies</a></li> <li class="menu-expanded"><a href="/insights">Insights</a><span class="arrow"></span> <ul> <li class="menu-item"><a href="/success-stories">Success Stories</a></li> <li class="menu-item"><a href="/insights?resource=67">Whitepapers</a></li> <li class="menu-item"><a href="/insights?resource=66">Webinars</a></li> <li class="menu-item"><a href="/insights?resource=652">Podcasts</a></li> <li class="menu-item"><a href="/blog/">Blogs</a></li> <li class="menu-item"><a href="/insights?resource=62">e-Books</a></li> <li class="menu-item"><a href="/insights?resource=162">Magazines</a></li> <li class="menu-item"><a href="/insights?resource=574">Spotlight</a></li> </ul> </li> <li class=""><a href="/careers">Careers</a></li> <li class="menu-expanded"><a href="/about-us">About</a><span class="arrow"></span> <ul> <li class="menu-item"><a href="/about-us">About Us</a></li> <li class="menu-item"><a href="/leadership">Leadership</a></li> <li class="menu-item"><a href="/partnership">Partners</a></li> <li class="menu-item"><a href="/press-releases">Press Releases</a></li> <li class="menu-item"><a href="/media-coverage">Media Coverage</a></li> <li class="menu-item"><a href="/awards">Awards & Analyst Relations</a></li> <li class="menu-item"><a href="/events">Events</a></li> <li class="menu-item"><a href="/our-social-impact">CSR</a></li> </ul> </li> <li class=""><a href="/contact-us" id=h-contact-us>Contact Us</a></li> </ul> </div> <div class="menu-btn"> <div class="burger-container"> <div id="burger"> <div class="bar topBar"></div> <div class="bar btmBar"></div> </div> </div> </div> <a class="search-icon" href="#">Search <span>|</span></a> </nav> </div> </div> </header> <div id="banner" class="clearfix"> <div class="overlay"> <img src="https://www.tothenew.com/blog/wp-content/themes/ttn/images/banner/blog_banner.png" alt="Blog"> </div> <div class="banner-text"> <h2>Blogs</h2> <p>Told you, we love sharing!</p> <div class="subscribe-mobo-btn header-subscribe"> <div class="subscrb"> <div class="subscribe"> <ul class="sign-up-frm"> <li class="width100"> <input class="submit subscribeButton" type="submit" value="Subscribe Blogs"> </li> </ul> </div> </div> </div> </div> <div class="col-xs-12 breadcrumbs padding0"> <ul>  <li><a rel="nofollow" href="/">Home</a></li><li><a rel="v:url" property="v:title" title="Go to TO THE NEW Blog." href="https://www.tothenew.com/blog/" class="home">Blog</a></li><li><a rel="nofollow" property="v:title" title="Go to the Experience Design category archives." href="https://www.tothenew.com/blog/category/user-experience-design/" class="taxonomy category">Experience Design</a></li><li><span property="v:title">4 Pillars of Design – Part 2</span></li> </ul> </div> </div> <div class="clearfix category-list white"> <div class="container"> <div class="row"> <div class="normal"> <div class="col-xs-9 col-sm-9 col-md-9 category-filter-outer-b"> <div class="col-xs-8 col-md-4 main-cat category-filter-blog"> <div class="heading category-head">Category</div> <div class="cat-dropdown category-filter-blog-dropdown"> <div class="cat-drop-inner mCustomScrollbar inset-dark"> <div class="heading">Categories</div> <ul> <li class="cat-item cat-item-5867"><a href="https://www.tothenew.com/blog/category/net/">.NET</a> </li> <li class="cat-item cat-item-5868"><a href="https://www.tothenew.com/blog/category/adobe/">Adobe</a> </li> <li class="cat-item cat-item-1993"><a href="https://www.tothenew.com/blog/category/agile-2/">Agile</a> </li> <li class="cat-item cat-item-4685"><a href="https://www.tothenew.com/blog/category/anaytics/">Anaytics</a> </li> <li class="cat-item cat-item-518"><a href="https://www.tothenew.com/blog/category/android/">Android</a> </li> <li class="cat-item cat-item-1439"><a href="https://www.tothenew.com/blog/category/angular/">AngularJS</a> </li> <li class="cat-item cat-item-2026"><a href="https://www.tothenew.com/blog/category/appsec/">Application Security</a> </li> <li class="cat-item cat-item-1818"><a href="https://www.tothenew.com/blog/category/automation-testing-testing-2/">Automation Testing</a> </li> <li class="cat-item cat-item-1174"><a href="https://www.tothenew.com/blog/category/aws-2/">AWS</a> </li> <li class="cat-item cat-item-4837"><a href="https://www.tothenew.com/blog/category/b2b-2/">B2B</a> </li> <li class="cat-item cat-item-4925"><a href="https://www.tothenew.com/blog/category/b2c/">B2C</a> </li> <li class="cat-item cat-item-5869"><a href="https://www.tothenew.com/blog/category/ba/">BA</a> </li> <li class="cat-item cat-item-5870"><a href="https://www.tothenew.com/blog/category/bi/">BI</a> </li> <li class="cat-item cat-item-1395"><a href="https://www.tothenew.com/blog/category/big-data/">Big Data</a> </li> <li class="cat-item cat-item-4778"><a href="https://www.tothenew.com/blog/category/blockchain/">Blockchain</a> </li> <li class="cat-item cat-item-4308"><a href="https://www.tothenew.com/blog/category/cloud-devops-technology/">Cloud</a> </li> <li class="cat-item cat-item-4682"><a href="https://www.tothenew.com/blog/category/cloud-managed-services/">Cloud Managed Services</a> </li> <li class="cat-item cat-item-3479"><a href="https://www.tothenew.com/blog/category/connected-tv/">Connected TV</a> </li> <li class="cat-item cat-item-1541"><a href="https://www.tothenew.com/blog/category/corporate/">Corporate</a> </li> <li class="cat-item cat-item-4835"><a href="https://www.tothenew.com/blog/category/covid-19/">Covid 19</a> </li> <li class="cat-item cat-item-4831"><a href="https://www.tothenew.com/blog/category/data-analytics/">Data & Analytics</a> </li> <li class="cat-item cat-item-6194"><a href="https://www.tothenew.com/blog/category/data-engineering/">Data Engineering</a> </li> <li class="cat-item cat-item-5871"><a href="https://www.tothenew.com/blog/category/data-science/">Data Science</a> </li> <li class="cat-item cat-item-5872"><a href="https://www.tothenew.com/blog/category/database-administration/">Database Administration</a> </li> <li class="cat-item cat-item-2348"><a href="https://www.tothenew.com/blog/category/devops-technology/">DevOps</a> </li> <li class="cat-item cat-item-2251"><a href="https://www.tothenew.com/blog/category/digital-analytics/">Digital Analytics</a> </li> <li class="cat-item cat-item-4839"><a href="https://www.tothenew.com/blog/category/digital-engineering/">Digital Engineering</a> </li> <li class="cat-item cat-item-1964"><a href="https://www.tothenew.com/blog/category/digital-marketing/">Digital Marketing</a> </li> <li class="cat-item cat-item-4112"><a href="https://www.tothenew.com/blog/category/digital-transformation-2/">Digital Transformation</a> </li> <li class="cat-item cat-item-5873"><a href="https://www.tothenew.com/blog/category/dm-analytics/">DM – Analytics</a> </li> <li class="cat-item cat-item-3602"><a href="https://www.tothenew.com/blog/category/drupal/">Drupal</a> </li> <li class="cat-item cat-item-3887"><a href="https://www.tothenew.com/blog/category/user-experience-design/">Experience Design</a> </li> <li class="cat-item cat-item-3429"><a href="https://www.tothenew.com/blog/category/front-end-development/">Front End Development</a> </li> <li class="cat-item cat-item-7"><a href="https://www.tothenew.com/blog/category/grails/">Grails</a> </li> <li class="cat-item cat-item-6853"><a href="https://www.tothenew.com/blog/category/healthtech/">HealthTech</a> </li> <li class="cat-item cat-item-4687"><a href="https://www.tothenew.com/blog/category/hybrid/">Hybrid</a> </li> <li class="cat-item cat-item-5981"><a href="https://www.tothenew.com/blog/category/igaming/">iGaming</a> </li> <li class="cat-item cat-item-1814"><a href="https://www.tothenew.com/blog/category/industry-buzz/">Industry Buzz</a> </li> <li class="cat-item cat-item-1400"><a href="https://www.tothenew.com/blog/category/ios/">iOS</a> </li> <li class="cat-item cat-item-446"><a href="https://www.tothenew.com/blog/category/java/">Java/JVM</a> </li> <li class="cat-item cat-item-5876"><a href="https://www.tothenew.com/blog/category/js/">JS</a> </li> <li class="cat-item cat-item-1817"><a href="https://www.tothenew.com/blog/category/manual-testing/">Manual Testing</a> </li> <li class="cat-item cat-item-1953"><a href="https://www.tothenew.com/blog/category/marketing/">Marketing</a> </li> <li class="cat-item cat-item-4926"><a href="https://www.tothenew.com/blog/category/marketing-automation/">Marketing Automation</a> </li> <li class="cat-item cat-item-4684"><a href="https://www.tothenew.com/blog/category/mean-2/">MEAN</a> </li> <li class="cat-item cat-item-4686"><a href="https://www.tothenew.com/blog/category/mobile-automation-testing-2/">Mobile Automation Testing</a> </li> <li class="cat-item cat-item-1772"><a href="https://www.tothenew.com/blog/category/mobility/">Mobility</a> </li> <li class="cat-item cat-item-5877"><a href="https://www.tothenew.com/blog/category/msp/">MSP</a> </li> <li class="cat-item cat-item-1185"><a href="https://www.tothenew.com/blog/category/node-js-2/">Node.js</a> </li> <li class="cat-item cat-item-3917"><a href="https://www.tothenew.com/blog/category/product-engineering-2/">Product Engineering</a> </li> <li class="cat-item cat-item-5878"><a href="https://www.tothenew.com/blog/category/project-management/">Project Management</a> </li> <li class="cat-item cat-item-5879"><a href="https://www.tothenew.com/blog/category/python/">Python</a> </li> <li class="cat-item cat-item-5880"><a href="https://www.tothenew.com/blog/category/qe/">QE</a> </li> <li class="cat-item cat-item-5881"><a href="https://www.tothenew.com/blog/category/react-native/">React Native</a> </li> <li class="cat-item cat-item-3038"><a href="https://www.tothenew.com/blog/category/react-js/">React.js</a> </li> <li class="cat-item cat-item-4670"><a href="https://www.tothenew.com/blog/category/sails-js/">Sails JS</a> </li> <li class="cat-item cat-item-6009"><a href="https://www.tothenew.com/blog/category/salesforce/">Salesforce</a> </li> <li class="cat-item cat-item-5270"><a href="https://www.tothenew.com/blog/category/digital-marketing/seo/">SEO</a> </li> <li class="cat-item cat-item-3477"><a href="https://www.tothenew.com/blog/category/smart-tv/">Smart TV</a> </li> <li class="cat-item cat-item-1994"><a href="https://www.tothenew.com/blog/category/software-development/">Software development</a> </li> <li class="cat-item cat-item-1"><a href="https://www.tothenew.com/blog/category/technology/">Technology</a> </li> <li class="cat-item cat-item-1816"><a href="https://www.tothenew.com/blog/category/testing-2/">Testing</a> </li> <li class="cat-item cat-item-3109"><a href="https://www.tothenew.com/blog/category/user-experience/">User Experience</a> </li> <li class="cat-item cat-item-4683"><a href="https://www.tothenew.com/blog/category/video-solutions/">Video Solutions</a> </li> <li class="cat-item cat-item-4488"><a href="https://www.tothenew.com/blog/category/web-content-management/">Web Content Management</a> </li> <li class="cat-item cat-item-5021"><a href="https://www.tothenew.com/blog/category/wordpress/">WordPress</a> </li> </ul> </div> </div> </div> <div class="col-xs-2 col-md-3 main-cat year-filter-blog"> <div class="heading"> Sort By </div> <div class="cat-dropdown year-filter-blog-dropdown"> <div class="cat-drop-inner mCustomScrollbar inset-dark"> <ul class='sort-by-dropdown-blog'> <li class="latest active">Latest</li> <li class="year"> <div class="year-heading"> Year</div> <div class="year-dropdown"> <ul class='year-filter-dropdown-blog'> <li class="cat-item"> <a href="">2024</a> </li> <li class="cat-item"> <a href="">2023</a> </li> <li class="cat-item"> <a href="">2022</a> </li> <li class="cat-item"> <a href="">2021</a> </li> <li class="cat-item"> <a href="">2020</a> </li> <li class="cat-item"> <a href="">2019</a> </li> <li class="cat-item"> <a href="">2018</a> </li> <li class="cat-item"> <a href="">2017</a> </li> <li class="cat-item"> <a href="">2016</a> </li> <li class="cat-item"> <a href="">2015</a> </li> <li class="cat-item"> <a href="">2014</a> </li> <li class="cat-item"> <a href="">2013</a> </li> <li class="cat-item"> <a href="">2012</a> </li> <li class="cat-item"> <a href="">2011</a> </li> <li class="cat-item"> <a href="">2010</a> </li> <li class="cat-item"> <a href="">2009</a> </li> <li class="cat-item"> <a href="">2008</a> </li> </ul></div> </li> </ul> </div> </div> </div> <div class="search-form"> <form id="searchform" action="https://www.tothenew.com/blog/"> <div> <input type="submit" id="searchsubmit" value="Search" class="btn" /> <input type="text" id="textstring" name="s" id="s" value="Search blog" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;" /> </div> </form> </div> <div class="col-xs-1 col-md-1 clear-all-filter"> </div> </div> <div class="col-xs-3 col-sm-3 col-md-3 subscribe-mobo-btn menu-subscribe"> <div class="col-md-12 subscrb"> <div class="subscribe">  <ul class="sign-up-frm"> <li class="width100">  <input class="submit subscribeButton" type="submit" value="Subscribe Blogs"> </li> </ul>  </div> </div> </div> </div> </div> </div> </div> </div> <div id="blog-section" itemscope itemType="http://schema.org/BlogPosting"> <div class="container"> <form class="filter-blog-form" method="GET" action="https://www.tothenew.com/blog" style="display: none;"> <input type="text" value="" name="y" id ="year" /> <input type="text" value="latest" name="l" id ="latest" /> <input type="submit" value="apply" id="submit-blog-filter"> </form> <div class="row"> <div class="col-md-9 left-content"> <div class="post-body"> <div class="blogs"> <meta itemscope itemprop="mainEntityOfPage" itemType="https://schema.org/WebPage" itemid="https://www.tothenew.com/blog/4-pillars-of-design-part-2/"/> <div class="date-header"> <time datetime="2017-02-16T18:59:36+05:30" itemprop="datePublished"> </time> <time datetime="2017-02-16T18:59:36+05:30" itemprop="dateModified"> </time> </div> <header class="entry-header"> <h1 itemprop="headline">4 Pillars of Design – Part 2</h1> </header> <div class="tag"> <ul> <li> <a rel="nofollow" href="https://www.tothenew.com/blog/category/user-experience-design/" title="View all posts in Experience Design">Experience Design</a>, <a rel="nofollow" href="https://www.tothenew.com/blog/category/front-end-development/" title="View all posts in Front End Development">Front End Development</a>, <a rel="nofollow" href="https://www.tothenew.com/blog/category/technology/" title="View all posts in Technology">Technology</a> </li> </ul> </div> <div class="date-author">16 / Feb / 2017 <em>by <a class="url fn n" href="https://www.tothenew.com/blog/author/quamar/" title="View all posts by Quamar Alam Quamar" rel="nofollow">Quamar Alam Quamar</a></em> <a href="https://www.tothenew.com/blog/4-pillars-of-design-part-2/#comments"><span class="leave-reply">1 comments</span></a> </div> <div class="share-this"> <div class="share-heading">Share this blog</div>  <script type="text/javascript" src="//tps.tothenew.com/js/300/addthis_widget.js#pubid=ra-56efa64a8b443494"></script> <div class="addthis_inline_share_toolbox" style="display:inline;"></div> </div> <div itemprop="description"> <div class="addtoany_share_save_container addtoany_content addtoany_content_top"><div class="a2a_kit a2a_kit_size_32 addtoany_list" data-a2a-url="https://www.tothenew.com/blog/4-pillars-of-design-part-2/" data-a2a-title="4 Pillars of Design – Part 2"><a class="a2a_button_facebook" href="https://www.addtoany.com/add_to/facebook?linkurl=https%3A%2F%2Fwww.tothenew.com%2Fblog%2F4-pillars-of-design-part-2%2F&linkname=4%20Pillars%20of%20Design%20%E2%80%93%20Part%202" title="Facebook" rel="nofollow noopener" target="_blank"></a><a class="a2a_button_x" href="https://www.addtoany.com/add_to/x?linkurl=https%3A%2F%2Fwww.tothenew.com%2Fblog%2F4-pillars-of-design-part-2%2F&linkname=4%20Pillars%20of%20Design%20%E2%80%93%20Part%202" title="X" rel="nofollow noopener" target="_blank"></a><a class="a2a_button_linkedin" href="https://www.addtoany.com/add_to/linkedin?linkurl=https%3A%2F%2Fwww.tothenew.com%2Fblog%2F4-pillars-of-design-part-2%2F&linkname=4%20Pillars%20of%20Design%20%E2%80%93%20Part%202" title="LinkedIn" rel="nofollow noopener" target="_blank"></a><a class="a2a_button_email" href="https://www.addtoany.com/add_to/email?linkurl=https%3A%2F%2Fwww.tothenew.com%2Fblog%2F4-pillars-of-design-part-2%2F&linkname=4%20Pillars%20of%20Design%20%E2%80%93%20Part%202" title="Email" rel="nofollow noopener" target="_blank"></a></div></div><p>Every design and/or architecture has some basics and so does Visual Design have. Applying principles to the visual designs might look overwhelming at first but once you start designing a page or concept together, it becomes easier.</p> <p><strong>Visual Design has Four Pillars Namely</strong></p> <ol> <li>Navigation</li> <li>Presentation</li> <li>Content</li> <li>Interaction</li> </ol> <p>I had already covered the first two pillars i.e. <strong>Navigation</strong> and <strong>Presentation </strong>in my previous blog – <a title="4 Pillars of Design" href="http://www.tothenew.com/blog/4-pillars-of-design-part-1/">4 Pillars of Design – Part 1</a></p> <p>So, in this blog, let’s get some insights from the other two pillars which are <strong>Content</strong> and <strong>Interaction</strong>.</p> <p><strong>Content</strong><br /> In any mode of communication, Content means the information and experiences directed towards an end-user or audience to create a seamless <a title="user experience designing" href="http://www.tothenew.com/experience-design">user experience</a>. It might be in form of Text, links, images, voice, videos, animated graphics, forms etc.</p> <p>So what good contents should have:</p> <ol> <li><strong>Writing for clarity-</strong> It seems very simple and easy but maintaining simplicity is very difficult. A content needs to be simple and concise for easy scanning by users. That means a sentence should not contain unnecessary words, a paragraph no unnecessary sentence, for the same reason a drawing should not have unnecessary lines/shape/elements. For this purpose, a machine should not have an unnecessary part. It also means not that the writer makes all sentences short, or avoid all detail and treat subjects only in outline but that every word tell.</li> <li><strong>Methods that facilitate scanning-</strong> Studies of how users read on the Web found that they do not actually read: instead, they scan the text. Content needs to be Concise, Scannable and Objective. How to achieve this, will be discussed later in the article.</li> <li><strong>Content strategy consideration-</strong> Content marketers draw and develop the larger story that an organization tells. They focus on ways to engage an audience, using content to drive profitable behaviors. According to <strong>Kristina Halvorson</strong>, CEO of BrainTraffic and founder of ConFab, teamwork is essential when it comes to content strategy. When discussing content and its realization, one should be careful about followings: <ul> <li>User Experience</li> <li>Design</li> <li>Information Architecture</li> <li>Copywriting</li> <li>Development</li> <li>Search Engine Optimization</li> <li>Marketing</li> <li>Public Relations and Brand Building</li> <li>Business stakeholders</li> </ul> </li> </ol> <p>Why do we need these?</p> <ul> <li>To create effective, usable and easily searchable content.</li> <li>To minimize re-work and identifying existing content.</li> <li>To help achieve business goals through effective content that has the desired impact.</li> </ul> <p>There are two types of content users pursue to consume the information, <strong>Printed content</strong> and <strong>digital content</strong>.</p> <p>There are a couple of differences in consuming content from these two mediums.<img decoding="async" class="alignnone size-full wp-image-46142" src="/blog/wp-ttn-blog/uploads/2017/02/impressora-multifuncional1.jpg" alt="impressora-multifuncional" width="700" height="498" srcset="/blog/wp-ttn-blog/uploads/2017/02/impressora-multifuncional1.jpg 997w, /blog/wp-ttn-blog/uploads/2017/02/impressora-multifuncional1-300x213.jpg 300w, /blog/wp-ttn-blog/uploads/2017/02/impressora-multifuncional1-624x443.jpg 624w" sizes="(max-width: 700px) 100vw, 700px" /><br /> <strong>Printed</strong> content are physical that’s why it can be viewed as wide as page.</p> <p><img decoding="async" loading="lazy" class="alignnone size-full wp-image-46144" src="/blog/wp-ttn-blog/uploads/2017/02/responsive_design_notext.jpg" alt="responsive_design_notext" width="516" height="372" srcset="/blog/wp-ttn-blog/uploads/2017/02/responsive_design_notext.jpg 516w, /blog/wp-ttn-blog/uploads/2017/02/responsive_design_notext-300x216.jpg 300w" sizes="(max-width: 516px) 100vw, 516px" /><br /> Where <strong>digital space</strong> has various range of screens that’s why content needs to be screen specific.</p> <p>Let’s discuss the digital space and before that let’s understand how users consume content on desktop, TV, mobile etc. In digital space, users:</p> <ul> <li>Tend to scan rather than read page content.</li> <li>Are less patient compare to printed documents.</li> <li>Have low tolerance to low paragraphs and sentences.</li> <li>Want fast access to the content.</li> </ul> <p>As a designer, you need to organize and design the content in such a way so that it helps users to quickly access, consume and take action. This can be achieved as mentioned below:</p> <p><strong>Capitalization</strong> – When to use which?</p> <ul> <li>Use “Title case capitalization” when displaying Primary Navigation Tabs, Secondary Navigation Tabs including steps in Sequential Navigation, Button Labels, Group and Column headers.</li> <li>Use “Sentence case capitalization” when displaying Page Titles, Filed Labels, Bullet Items, Page body content, Instruction, Informational messages, Hyperlinks.</li> </ul> <p><strong>Using Active Voice</strong></p> <ul> <li>Use “Active Voice” most of the time- especially when writing the instructions or labels that support user action.</li> <li>Multiple research reports have quoted that users scan first 7-11 characters when scanning for relevant contents.</li> <li>To facilitate the way user scan, use passive voice to get keywords up front in: Headings, Sub-headings, Captions, Hyperlink Texts, Bulleted lists.</li> </ul> <p><strong>Users Strive for Simplicity</strong></p> <ul> <li>Readers process and understand the simple terms more quickly.</li> <li>Minimize the use of complex and technical terms.</li> <li>For U.S. Government agencies simplicity is legally mandated by the Plain Writing Act of 2010.</li> </ul> <p><strong>Avoid Acronyms & Jargons</strong></p> <ul> <li>Be brief but not cryptic</li> <li>Avoid abbreviations, acronyms, and Jargons.</li> <li>If the acronym is used as a word itself, then it may be ok to use it. For example NASA</li> <li>Always ask: Would your target audience will understand this term without explanation?</li> </ul> <p>Above mentioned points will help to organize your content and make it easily accessible. The Below mentioned example will help you to understand it more clearly:</p> <p><img decoding="async" loading="lazy" class="alignnone size-medium wp-image-45888" src="/blog/wp-ttn-blog/uploads/2017/02/3-300x226.png" alt="3" width="300" height="226" srcset="/blog/wp-ttn-blog/uploads/2017/02/3-300x226.png 300w, /blog/wp-ttn-blog/uploads/2017/02/3.png 491w" sizes="(max-width: 300px) 100vw, 300px" /> <img decoding="async" loading="lazy" class="alignnone size-medium wp-image-45889" src="/blog/wp-ttn-blog/uploads/2017/02/4-300x123.png" alt="4" width="300" height="123" srcset="/blog/wp-ttn-blog/uploads/2017/02/4-300x123.png 300w, /blog/wp-ttn-blog/uploads/2017/02/4.png 506w" sizes="(max-width: 300px) 100vw, 300px" /></p> <p>A successful design allows users to consume and understand the content and enable them to do it quickly, but writing content for different users is an art in itself. Let’s discuss what should be the writing style.</p> <p><strong>1. Inverted Pyramid Writing</strong><br /> The inverted pyramid style of writing helps users get to the point quickly by scanning headlines<br /> and sub-titles at the top. Be sure to present the conclusion at the top and put details in<br /> the end or on a separate page.</p> <p><img decoding="async" loading="lazy" class="alignnone wp-image-45891 size-full" src="/blog/wp-ttn-blog/uploads/2017/02/5.png" alt="Inverted Pyramid Writing" width="558" height="372" srcset="/blog/wp-ttn-blog/uploads/2017/02/5.png 558w, /blog/wp-ttn-blog/uploads/2017/02/5-300x200.png 300w" sizes="(max-width: 558px) 100vw, 558px" /></p> <p>In this style of writing users quickly decide whether these content are relevant to them or not. It helps them to make the decision quickly. If the content is relevant to them then will continue further or else jump to another content. Below is the examples of pyramid style writing:</p> <p><img decoding="async" loading="lazy" class="alignnone wp-image-45892 size-large" src="/blog/wp-ttn-blog/uploads/2017/02/6-1024x350.png" alt="Shopping website design" width="625" height="213" srcset="/blog/wp-ttn-blog/uploads/2017/02/6-1024x350.png 1024w, /blog/wp-ttn-blog/uploads/2017/02/6-300x102.png 300w, /blog/wp-ttn-blog/uploads/2017/02/6-624x213.png 624w, /blog/wp-ttn-blog/uploads/2017/02/6.png 1065w" sizes="(max-width: 625px) 100vw, 625px" /></p> <p><img decoding="async" loading="lazy" class="alignnone wp-image-45893 size-large" src="/blog/wp-ttn-blog/uploads/2017/02/7-1024x381.png" alt="media website design" width="625" height="232" srcset="/blog/wp-ttn-blog/uploads/2017/02/7-1024x381.png 1024w, /blog/wp-ttn-blog/uploads/2017/02/7-300x111.png 300w, /blog/wp-ttn-blog/uploads/2017/02/7-624x232.png 624w, /blog/wp-ttn-blog/uploads/2017/02/7.png 1077w" sizes="(max-width: 625px) 100vw, 625px" /></p> <p><strong>2. Bulleted List</strong><br /> The bulleted list makes it easy for readers to skim for relevant content.<br /> <img decoding="async" loading="lazy" class="alignnone wp-image-45901 size-large" src="/blog/wp-ttn-blog/uploads/2017/02/12-1024x605.png" alt="Bulleted List" width="625" height="369" srcset="/blog/wp-ttn-blog/uploads/2017/02/12-1024x605.png 1024w, /blog/wp-ttn-blog/uploads/2017/02/12-300x177.png 300w, /blog/wp-ttn-blog/uploads/2017/02/12-624x368.png 624w, /blog/wp-ttn-blog/uploads/2017/02/12.png 1078w" sizes="(max-width: 625px) 100vw, 625px" /></p> <p><strong>3. Numbered List</strong><br /> Numbered list helps a user to follow procedure, steps, sequences and instructions more easily.<br /> <img decoding="async" loading="lazy" class="alignnone wp-image-45904 size-full" src="/blog/wp-ttn-blog/uploads/2017/02/21.png" alt="Numbered List" width="900" height="223" srcset="/blog/wp-ttn-blog/uploads/2017/02/21.png 900w, /blog/wp-ttn-blog/uploads/2017/02/21-300x74.png 300w, /blog/wp-ttn-blog/uploads/2017/02/21-624x154.png 624w" sizes="(max-width: 900px) 100vw, 900px" /></p> <p><b>How to create content which is easily scannable by users?</b></p> <p>Putting it all together in an example:<br /> <img decoding="async" loading="lazy" class="alignnone size-large wp-image-45906" src="/blog/wp-ttn-blog/uploads/2017/02/31-1024x701.png" alt="3" width="625" height="427" srcset="/blog/wp-ttn-blog/uploads/2017/02/31-1024x701.png 1024w, /blog/wp-ttn-blog/uploads/2017/02/31-300x205.png 300w, /blog/wp-ttn-blog/uploads/2017/02/31-624x427.png 624w, /blog/wp-ttn-blog/uploads/2017/02/31.png 1078w" sizes="(max-width: 625px) 100vw, 625px" /></p> <p>With this, the explanation of the third pillar of design comes to an end. Let’s move to the fourth one that is <strong>Interaction</strong>.</p> <p><strong style="color: #d9167e">Interaction</strong><br /> Interaction is the point where visual design is <strong>processed (cognition)</strong> and <strong>user’s action (response/motor)</strong> is initiated. Interaction design is a discipline which remains exciting because of the continual stream of new ideas collaborated with technical capabilities.</p> <p>Interaction can be broken down into 5 dimensions: words, visuals, objects/space, time, and behavior. Visuals and objects/space are what users interact with. Time is what users interact within. And finally, behavior is how users and the interface act and react.</p> <p>Below image indicates how “Interaction” happens with the system:<br /> <img decoding="async" loading="lazy" class="alignnone wp-image-45916 size-full" src="/blog/wp-ttn-blog/uploads/2017/02/process.png" alt="website interaction process" width="656" height="404" srcset="/blog/wp-ttn-blog/uploads/2017/02/process.png 656w, /blog/wp-ttn-blog/uploads/2017/02/process-300x184.png 300w, /blog/wp-ttn-blog/uploads/2017/02/process-624x384.png 624w" sizes="(max-width: 656px) 100vw, 656px" /></p> <p>The design solution should be easily recognizable and actionable. A user should not get confused while interacting with the design.</p> <p>For example, A checkout button should look like a button, and a label should say that once you hit the button with mouse or tap on it, it will take you to the checkout process.</p> <p><img decoding="async" loading="lazy" class="alignnone size-medium wp-image-45910" src="/blog/wp-ttn-blog/uploads/2017/02/51-300x105.png" alt="5" width="300" height="105" srcset="/blog/wp-ttn-blog/uploads/2017/02/51-300x105.png 300w, /blog/wp-ttn-blog/uploads/2017/02/51-624x220.png 624w, /blog/wp-ttn-blog/uploads/2017/02/51.png 675w" sizes="(max-width: 300px) 100vw, 300px" /><br /> In above image, both buttons will take users to the checkout process, but 1st button is confusing. A user will not know where he will be re-directed to after tapping/clicking the same. Also, there will no clear indication that how many steps are left to reach Checkout and place the order. So we can just simplify it by using the correct label and reducing the cognitive load on users.</p> <p>It also requires keeping consistency in your action items. For example:<br /> <img decoding="async" loading="lazy" class="alignnone size-full wp-image-45911" src="/blog/wp-ttn-blog/uploads/2017/02/61.png" alt="6" width="506" height="288" srcset="/blog/wp-ttn-blog/uploads/2017/02/61.png 506w, /blog/wp-ttn-blog/uploads/2017/02/61-300x170.png 300w" sizes="(max-width: 506px) 100vw, 506px" /></p> <p>It concludes that What Interaction design is, how it works & why it is important? Let’s deep dive into understanding the factors that impact Interaction.</p> <p><strong>Factors that influence Interaction:</strong></p> <p><strong>1. Interface</strong><br /> The very first factor is Interface. This is the front face of the system which enables users to interact with it. It combines with different UI elements, screen flow, and sequence. It has to be intuitive and informative enough so that user can understand how to navigate, how to complete a task and information/alerts after task completion or failure. Below is the example:<br /> <img decoding="async" loading="lazy" class="alignnone wp-image-46147 size-full" src="/blog/wp-ttn-blog/uploads/2017/02/download.jpeg" alt="Web Interface" width="1400" height="1301" srcset="/blog/wp-ttn-blog/uploads/2017/02/download.jpeg 1400w, /blog/wp-ttn-blog/uploads/2017/02/download-300x278.jpeg 300w, /blog/wp-ttn-blog/uploads/2017/02/download-1024x951.jpeg 1024w, /blog/wp-ttn-blog/uploads/2017/02/download-624x579.jpeg 624w" sizes="(max-width: 1400px) 100vw, 1400px" /></p> <p><strong>2. UI Controls</strong><br /> UI controls are the enable which allows users to input the information. There are various type of elements: checkbox, radio button, dropdown, input field, input text area, search, sliders, switch etc. It has to be well defined and consistent in behavior. For example, if a checkbox allows a user to perform multiple selections. There should not be any event on it. If that happens, user will never be allowed to carry out multiple selections.<br /> <img decoding="async" loading="lazy" class="alignnone wp-image-45918 size-full" src="/blog/wp-ttn-blog/uploads/2017/02/ui_kit.png" alt="ui_kit" width="757" height="379" srcset="/blog/wp-ttn-blog/uploads/2017/02/ui_kit.png 757w, /blog/wp-ttn-blog/uploads/2017/02/ui_kit-300x150.png 300w, /blog/wp-ttn-blog/uploads/2017/02/ui_kit-624x312.png 624w" sizes="(max-width: 757px) 100vw, 757px" /></p> <p><strong>3. Error handling and feedback messaging</strong><br /> As a designer, our job is to provide a solution, engage user and guide user. It happens with every digital product that an error occurs due to any known/unknown reason. So what should we do as a designer to make smooth interaction?</p> <ul> <li>Error Prevention</li> <li>Error Detection</li> <li>Error Handling</li> <li>Error Message</li> <li>Information Message</li> </ul> <p>Curious about knowing how to handle it? Let’s go through it:</p> <p><strong>Error Prevention</strong><br /> Designs elements in your interface have to be error proof so that it can reduce the effort load on the users. Most of the forms, checkout process, registration process designs require such kind of process. There can be 2 types of error prevention:</p> <p>1. Error Prevention during data entry. It can be achieved using few design enhancement:</p> <p><img decoding="async" loading="lazy" class="alignnone wp-image-45919 size-medium" src="/blog/wp-ttn-blog/uploads/2017/02/8-300x75.png" alt="Website Error Prevention" width="300" height="75" srcset="/blog/wp-ttn-blog/uploads/2017/02/8-300x75.png 300w, /blog/wp-ttn-blog/uploads/2017/02/8.png 611w" sizes="(max-width: 300px) 100vw, 300px" /><br /> <strong>Disable non- applicable choices.</strong> By using this method design can help users to make less mistake. Disable all features which are not applicable until some specific action and/or task is completed.</p> <p><img decoding="async" loading="lazy" class="alignnone wp-image-45920 size-full" src="/blog/wp-ttn-blog/uploads/2017/02/9.png" alt="4 Pillars of design" width="346" height="542" srcset="/blog/wp-ttn-blog/uploads/2017/02/9.png 346w, /blog/wp-ttn-blog/uploads/2017/02/9-191x300.png 191w" sizes="(max-width: 346px) 100vw, 346px" /><br /> <strong>Use selection instead of data entry.</strong> Less data entry means fewer chances of making mistakes. So allow users to do selection instead of data entry as much as possible.</p> <p><img decoding="async" loading="lazy" class="alignnone wp-image-45921 size-full" src="/blog/wp-ttn-blog/uploads/2017/02/10.png" alt="4 Pillars of design" width="882" height="313" srcset="/blog/wp-ttn-blog/uploads/2017/02/10.png 882w, /blog/wp-ttn-blog/uploads/2017/02/10-300x106.png 300w, /blog/wp-ttn-blog/uploads/2017/02/10-624x221.png 624w" sizes="(max-width: 882px) 100vw, 882px" /><br /> <strong>Use auto suggest to aid data entry.</strong> Google does it very well. Almost everyone uses Google search engine. It provides you auto-suggested keywords once you start typing. It helps users to make quick decision and that too with less chances of errors.</p> <p>2.<b> Error Prevention: </b>Preview and confirmation. If you are designing some forms which have captured lots of information from the user, it is always suggested to provide a summary of whatever has been filled. It helps to reduce the chances of filling the wrong information and making system seamless. Below are few example which helps to understand it more:</p> <p><img decoding="async" loading="lazy" class="alignnone wp-image-45922 size-full" src="/blog/wp-ttn-blog/uploads/2017/02/111.png" alt="4 Pillars of design" width="319" height="567" srcset="/blog/wp-ttn-blog/uploads/2017/02/111.png 319w, /blog/wp-ttn-blog/uploads/2017/02/111-168x300.png 168w" sizes="(max-width: 319px) 100vw, 319px" /><br /> <strong>Provide preview before completion.</strong> It helps users to confirm their task and its stored in mind for a longer period. Also, allow users to modify if any mistake has been done. For example: In checkout process, you select an item, checkout and provide details, see the summary and then confirm your order.</p> <p><img decoding="async" loading="lazy" class="alignnone wp-image-45923 size-medium" src="/blog/wp-ttn-blog/uploads/2017/02/121-168x300.png" alt="Design Process" width="168" height="300" /><br /> <strong>Require confirmation on destructive or attempts to make permanent changes.</strong> Mostly in case of deleting or removing something. It helps to assure that you don’t perform a task which is not reversible.</p> <p><strong>Error Handling</strong><br /> In digital media, users are bound to do mistakes because there are various input methods are being used in digital medium. It’s a designer job to design the system in such a way that even if an error has been detected, it can be handled automatically to ease the users. When you know the solutions, provide alternatives to the user. Most common and appropriate example is Google search. Below images will help to understand how Google handles the error:</p> <p><img decoding="async" loading="lazy" class="alignnone size-full wp-image-46149" src="/blog/wp-ttn-blog/uploads/2017/02/chat_screen.png" alt="chat_screen" width="321" height="396" srcset="/blog/wp-ttn-blog/uploads/2017/02/chat_screen.png 321w, /blog/wp-ttn-blog/uploads/2017/02/chat_screen-243x300.png 243w" sizes="(max-width: 321px) 100vw, 321px" /><br /> Fix it by providing alternative solutions or keyword.</p> <p><img decoding="async" loading="lazy" class="alignnone size-medium wp-image-45925" src="/blog/wp-ttn-blog/uploads/2017/02/14-300x133.png" alt="14" width="300" height="133" srcset="/blog/wp-ttn-blog/uploads/2017/02/14-300x133.png 300w, /blog/wp-ttn-blog/uploads/2017/02/14.png 531w" sizes="(max-width: 300px) 100vw, 300px" /><br /> Inform user to fix just in case auto-fix was enabled.</p> <p><img decoding="async" loading="lazy" class="alignnone size-medium wp-image-45926" src="/blog/wp-ttn-blog/uploads/2017/02/15-300x121.png" alt="15" width="300" height="121" srcset="/blog/wp-ttn-blog/uploads/2017/02/15-300x121.png 300w, /blog/wp-ttn-blog/uploads/2017/02/15.png 562w" sizes="(max-width: 300px) 100vw, 300px" /><br /> Ask for permission to fix it in case a user has deliberately made some error.</p> <p><strong>Error Messages</strong><br /> Error message are displayed in multiple ways. For example, Secondary window error message,<br /> Embedded message indicates where an error was made etc. Below are few examples:<br /> <img decoding="async" loading="lazy" class="alignnone wp-image-45927 size-full" src="/blog/wp-ttn-blog/uploads/2017/02/16.png" alt="Error Messages" width="694" height="555" srcset="/blog/wp-ttn-blog/uploads/2017/02/16.png 694w, /blog/wp-ttn-blog/uploads/2017/02/16-300x239.png 300w, /blog/wp-ttn-blog/uploads/2017/02/16-624x499.png 624w" sizes="(max-width: 694px) 100vw, 694px" /></p> <p><strong>Information Messages</strong></p> <p><img decoding="async" loading="lazy" class="alignnone wp-image-45928 size-full" src="/blog/wp-ttn-blog/uploads/2017/02/17.png" alt="Information Messages" width="801" height="458" srcset="/blog/wp-ttn-blog/uploads/2017/02/17.png 801w, /blog/wp-ttn-blog/uploads/2017/02/17-300x171.png 300w, /blog/wp-ttn-blog/uploads/2017/02/17-624x356.png 624w" sizes="(max-width: 801px) 100vw, 801px" /></p> <p>That’s all about Interaction. Let’s understand how Visual Design impacts the Interaction. Visual design shows the current status of interaction (which functions are active and which not).</p> <p><img decoding="async" loading="lazy" class="alignnone wp-image-45929 size-full" src="/blog/wp-ttn-blog/uploads/2017/02/18.png" alt="visual design impact on interaction" width="788" height="345" srcset="/blog/wp-ttn-blog/uploads/2017/02/18.png 788w, /blog/wp-ttn-blog/uploads/2017/02/18-300x131.png 300w, /blog/wp-ttn-blog/uploads/2017/02/18-624x273.png 624w" sizes="(max-width: 788px) 100vw, 788px" /></p> <p>These are the not the only thing which we need to take care of when designing but various input methods also remains a challenge. Let’s explore this more:</p> <ol> <li><strong>Keyboard + Mouse:</strong> Switching from a keyboard to mouse slow down users by 3-8 keystrokes. This can be solved by minimizing device switching by keeping site or application either keyboard or mouse oriented. Also designer can provide keyboard shortcuts for trained users whenever possible.</li> <li><strong>Touch Interface:</strong> Gestures, such as swipe or double tap needs to be visually depicted and required a low learning curve. Data entry should be reinforced with strong visual, audio and/or haptic (tactile) feedback.</li> </ol> <p>Design plays a vital role in the success of a product and Visual Design itself is a very large subject. It also depends on an individual’s common sense, visualization. 4 pillars of Design: Navigation, Presentation, Content, and Interaction help to design a beautifully crafted user-centric product. The visual design focuses on the aesthetics of a product and its related materials by artistically implementing images, colors, fonts, and other elements. A successful visual design does not take away from the flow of the page or functionalities. Instead, it enhances it by engaging users and helping to build trust and interest in the brand.</p> <p>Let’s use these basics tips and design a beautiful, usable product for your users.</p> <p> </p> <p>Related Articles:</p> <p><a title="How Visual Design help to improve User Experience?" href="//www.tothenew.com/blog/how-visual-design-help-to-improve-user-experience/">How Visual Design help to improve User Experience? </a></p> <p><a title="Creating User Experience" href="http://www.tothenew.com/blog/4-essential-elements-for-designing-a-great-user-experience/#sthash.8geGmNIA.dpuf">4 Essential Elements for Designing a Great User Experience </a></p> <p><a title="Collaborative Design thinking" href="http://www.tothenew.com/blog/collaborative-design-thinking-a-unified-discipline-framework-for-innovation/#sthash.cVTxrihd.dpuf">Collaborative Design thinking – A unified discipline & framework for innovation </a></p> <p><a title="UX Principles" href="http://www.tothenew.com/blog/6-ux-principles-that-guide-product-design/">6 UX Principles That Guide Product Design </a></p> <p><em style="color: #b0b0b0">Image/Screenshot source:</em><br /> www.google.com, www.flipkart.com, , http://www.nishitamuhnot.com/portfolio/expedia/, http://www.joycexu.com/user-interface-design-1/</p> <div class="addtoany_share_save_container addtoany_content addtoany_content_bottom"><div class="a2a_kit a2a_kit_size_32 addtoany_list" data-a2a-url="https://www.tothenew.com/blog/4-pillars-of-design-part-2/" data-a2a-title="4 Pillars of Design – Part 2"><a class="a2a_button_facebook" href="https://www.addtoany.com/add_to/facebook?linkurl=https%3A%2F%2Fwww.tothenew.com%2Fblog%2F4-pillars-of-design-part-2%2F&linkname=4%20Pillars%20of%20Design%20%E2%80%93%20Part%202" title="Facebook" rel="nofollow noopener" target="_blank"></a><a class="a2a_button_x" href="https://www.addtoany.com/add_to/x?linkurl=https%3A%2F%2Fwww.tothenew.com%2Fblog%2F4-pillars-of-design-part-2%2F&linkname=4%20Pillars%20of%20Design%20%E2%80%93%20Part%202" title="X" rel="nofollow noopener" target="_blank"></a><a class="a2a_button_linkedin" href="https://www.addtoany.com/add_to/linkedin?linkurl=https%3A%2F%2Fwww.tothenew.com%2Fblog%2F4-pillars-of-design-part-2%2F&linkname=4%20Pillars%20of%20Design%20%E2%80%93%20Part%202" title="LinkedIn" rel="nofollow noopener" target="_blank"></a><a class="a2a_button_email" href="https://www.addtoany.com/add_to/email?linkurl=https%3A%2F%2Fwww.tothenew.com%2Fblog%2F4-pillars-of-design-part-2%2F&linkname=4%20Pillars%20of%20Design%20%E2%80%93%20Part%202" title="Email" rel="nofollow noopener" target="_blank"></a></div></div> </div> <div class="sharethis-text"> <div class="pre-loader">FOUND THIS USEFUL? SHARE IT</div> </div> <div class="share-this footer-sharethis" style="text-align:center;"> <div class="addthis_inline_share_toolbox"></div> </div> <div class="tag-cloud"> <h3>Tag -</h3> <a href="https://www.tothenew.com/blog/tag/content-design/" rel="tag nofollow">Content design</a> <a href="https://www.tothenew.com/blog/tag/experience-design/" rel="tag nofollow">Experience Design</a> <a href="https://www.tothenew.com/blog/tag/good-ui-design/" rel="tag nofollow">Good UI Design</a> <a href="https://www.tothenew.com/blog/tag/good-user-interface/" rel="tag nofollow">Good User Interface</a> <a href="https://www.tothenew.com/blog/tag/interaction/" rel="tag nofollow">Interaction</a> <a href="https://www.tothenew.com/blog/tag/mobile-user-interface-design/" rel="tag nofollow">Mobile User Interface Design</a> <a href="https://www.tothenew.com/blog/tag/user-interface-design/" rel="tag nofollow">User Interface Design</a> <a href="https://www.tothenew.com/blog/tag/visual-design/" rel="tag nofollow">Visual Design</a> <a href="https://www.tothenew.com/blog/tag/visual-design-approach/" rel="tag nofollow">Visual Design Approach</a> </div> </div> </div> <div class="post-body"> <section id="comment-reply"> <div id="comments" class="comments-area"> <h3 class="comment-reply-title">comments (1 “4 Pillars of Design – Part 2”)</h3> <ol class="commentlist"> <li class="comment even thread-even depth-1" id="li-comment-190629"> <article id="comment-190629" class="comment"> <header class="comment-meta comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/ca8193a785c6a586b631511eae5c69b4?s=44&d=mm&r=g' srcset='https://secure.gravatar.com/avatar/ca8193a785c6a586b631511eae5c69b4?s=88&d=mm&r=g 2x' class='avatar avatar-44 photo' height='44' width='44' loading='lazy' decoding='async'/><cite><b class="fn">Rohit Singh</b></cite><a href="https://www.tothenew.com/blog/4-pillars-of-design-part-2/#comment-190629"><time datetime="2017-10-19T09:32:08+05:30">October 19, 2017 at 9:32 am</time></a> </header> <section class="comment-content comment"> <p>Quamar Alam Thanks for sharing such an immense peice of knowledge. Please keep writing such long posts…</p> </section> <div class="reply"> <a rel='nofollow' class='comment-reply-link' href='https://www.tothenew.com/blog/4-pillars-of-design-part-2/?replytocom=190629#respond' data-commentid="190629" data-postid="45878" data-belowelement="comment-190629" data-respondelement="respond" data-replyto="Reply to Rohit Singh" aria-label='Reply to Rohit Singh'>Reply</a> <span>↓</span> </div> </article> </li> </ol> <div id="respond" class="comment-respond"> <h3 id="reply-title" class="comment-reply-title">Leave a Reply <small><a rel="nofollow" id="cancel-comment-reply-link" href="/blog/4-pillars-of-design-part-2/#respond" style="display:none;">Cancel reply</a></small></h3><form action="https://www.tothenew.com/blog/wp-comments-post.php" method="post" id="commentform" class="comment-form"><p class="comment-notes"><span id="email-notes">Your email address will not be published.</span> <span class="required-field-message">Required fields are marked <span class="required">*</span></span></p><p class="comment-form-author"><label for="author">Name <span class="required">*</span></label> <input id="author" name="author" type="text" value="" size="30" maxlength="245" autocomplete="name" required="required" /></p> <p class="comment-form-email"><label for="email">Email <span class="required">*</span></label> <input id="email" name="email" type="text" value="" size="30" maxlength="100" aria-describedby="email-notes" autocomplete="email" required="required" /></p> <p class="comment-form-cookies-consent"><input id="wp-comment-cookies-consent" name="wp-comment-cookies-consent" type="checkbox" value="yes" /> <label for="wp-comment-cookies-consent">Save my name, email, and website in this browser for the next time I comment.</label></p> <p class="comment-form-comment"><label for="comment">Comment <span class="required">*</span></label> <textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" required="required"></textarea></p><div class="g-recaptcha" data-sitekey=" site key"></div> <p class="form-submit"><input name="submit" type="submit" id="submit" class="submit" value="Post Comment" /> <input type='hidden' name='comment_post_ID' value='45878' id='comment_post_ID' /> <input type='hidden' name='comment_parent' id='comment_parent' value='0' /> </p></form> </div> </div> </section> </div> </div> <div class="col-md-3 sidebar"> <div class="sidebar-in"> <div class="resources" itemprop="author"> <div itemscope itemtype="http://schema.org/Person"> <div class="thumb"><img alt='' src='https://newersworld-sf-static.tothenew.net/prod/profilePicFolder/18c21182-3bae-4ad9-b038-0828933cf174_161-Quamar-Alam-Quamar-PROFILEPICTURE.jpeg' srcset='https://newersworld-sf-static.tothenew.net/prod/profilePicFolder/18c21182-3bae-4ad9-b038-0828933cf174_161-Quamar-Alam-Quamar-PROFILEPICTURE.jpeg 2x' class='avatar avatar-90 photo' height='90' width='90' loading='lazy' decoding='async'/></div> <div class="name" itemprop="name">by<br/><a href="https://www.tothenew.com/blog/author/quamar/" rel="nofollow">Quamar Alam Quamar</a></div> <p>Quamar is a UI Designer and Product Creator from the cozy streets of Bihar. He has eight years of work experience in various UI/UX Design. His passion is to explore the new design trends, technology updates and write blogs in spare time. He loves to travel & explore various culture, play cricket and spend time with his family.</p> <meta itemprop="homeLocation" content="INDIA"> </div> </div> <div class="suggested"> <p>YOU MAY ALSO LIKE</p><div class='yarpp yarpp-related yarpp-related-widget yarpp-template-list'> <ol><li><a href="https://www.tothenew.com/blog/ui-patterns-navigation-part-1/" rel="bookmark">UI Patterns: Navigation (Part 1)</a></li><li><a href="https://www.tothenew.com/blog/ui-patterns-navigation-part2/" rel="bookmark">UI Patterns: Navigation (Part2)</a></li><li><a href="https://www.tothenew.com/blog/4-pillars-of-design-part-1/" rel="bookmark">4 Pillars of Design – Part 1</a></li></ol> </div> </div> <div class="followUs"> <div class="heading"><img src="https://www.tothenew.com/blog/wp-content/themes/ttn/images/followous.jpg" /></div> <a href="https://www.facebook.com/tothenewdigital/" rel="nofollow" class="st_facebook_custom" onclick="window.open(this.href); return false;" st_processed="no"></a> <a href="https://twitter.com/TOTHENEW" rel="nofollow" class="st_twitter_custom" onclick="window.open(this.href); return false;" st_processed="no"></a>  <a href="https://www.linkedin.com/company/tothenew" rel="nofollow" class="st_linkedin_custom" onclick="window.open(this.href); return false;" st_processed="no"></a> <a href="https://www.glassdoor.co.in/Overview/Working-at-TO-THE-NEW-EI_IE1011609.11,21.htm" rel="nofollow" class="glassdoor-follow" onclick="window.open(this.href); return false;" st_processed="no">Glassdoor</a> </div> </div> </div> <span itemprop="image" itemscope itemtype="https://schema.org/ImageObject"> <meta itemprop="url" content="http://1.gravatar.com/avatar/7b1612e6049d9fa3f2389defb2df55a3?s=90&d=http%3A%2F%2Fwww.tothenew.com%2Fblog%2Fwp-content%2Fthemes%2Fttn%2Fimages%2Fdefault-avatar.png%3Fs%3D90&r=G"> <meta itemprop="width" content="90"> <meta itemprop="height" content="90"> </span> <span itemprop="publisher" itemscope itemtype="https://schema.org/Organization"> <span itemprop="logo" itemscope itemtype="https://schema.org/ImageObject"> <meta itemprop="url" content="https://www.tothenew.com/blog/wp-content/themes/ttn/images/logo.jpg"> </span> <meta itemprop="name" content="TO THE NEW"> </span> </div> </div> </div> </div> <script type="text/javascript" src="https://www.tothenew.com/blog/wp-content/themes/ttn/js/jquery.ellipsis.js"></script> <script type="text/javascript"> jQuery(document).ready(function() { jQuery('.suggested .heading a').trunk8({ lines: 2 }); jQuery('#commentform .comment-form-author input').val(''); jQuery('#commentform .comment-form-email input').val(''); jQuery('#commentform .comment-form-comment textarea').val(''); jQuery('#commentform .comment-form-author input').after("<span id='comment-name' class='comment-span'></span>"); jQuery('#commentform .comment-form-email input').after("<span id='comment-email' class='comment-span'></span>"); jQuery('#commentform .comment-form-comment textarea').after("<span id='comment-comment' class='comment-span'></span>"); jQuery('.comment-span').css('color','red'); // alert('Hello'); jQuery('#submit').click(function(){ // $ a=jQuery('span').attr('class'); // alert($a); var name=jQuery('#commentform .comment-form-author input').val(); var email=jQuery('#commentform .comment-form-email input').val(); var comment=jQuery('#commentform .comment-form-comment textarea').val(); var pattern = /^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,3})$/; if (name== '') { // alert("Please Enter your Name"); jQuery('#comment-name').html('<strong>Please Enter Your Name</strong>'); return false; } else if (email == '') { // alert("Please Enter Your Email"); jQuery('#comment-email').html('<strong>Please Enter Your Email</strong>'); return false; } if(!pattern.test(email)) { // alert('Hii'); jQuery('#comment-email').html('<strong>Please Enter correct Email</strong>'); return false; } else if (comment == '') { // alert ("please enter Comment"); jQuery('#comment-comment').html('<strong>Please Enter Comment</strong>'); return false; } else if(comment.length>100) { jQuery('#comment-comment').html('<strong>Comment Length Should not exceed 100 Characters.</strong>'); return false; } // else{ // jQuery.ajax({ // type: "POST", // url: "simple.php", // data: // { // "name": name; // "email": email; // "comment": comment; // }, // datatype: "text", // success: function(text) { // response = text; // } // }); // } }); jQuery('#commentform .comment-form-author input').on('keypress keydown keyup',function(){ jQuery('#comment-name').empty(); }); jQuery('#commentform .comment-form-email input').on('keypress keydown keyup',function(){ jQuery('#comment-email').empty(); }); jQuery('#commentform .comment-form-comment textarea').on('keypress keydown keyup',function(){ jQuery('#comment-comment').empty(); }); }); jQuery(window).resize(function () { jQuery('.suggested .heading a').trunk8({ lines: 2 }); }); </script> <div id="subscribe-blog">  </div> <footer> <div class="gry-bg"> <div class="container"> <div class="footer-menus"> <nav> <div class="f-heading">Who We Are</div> <ul class="clearfix menu"> <li class="menu-item"><a rel="dofollow" href="/about-us">About</a></li> <li class="menu-item"><a rel="dofollow" href="/leadership">Leadership</a></li> <li class="menu-item"><a href="/partnership" rel="dofollow">Partners</a></li> <li class="menu-item"><a rel="dofollow" href="/press-releases">Press Releases</a></li> <li class="menu-item"><a rel="dofollow" href="/awards">Awards</a></li> <li class="menu-item"><a rel="dofollow" href="/media-coverage">Media Coverage</a></li> <li class="menu-item"><a rel="dofollow" href="/events">Events</a></li> <li class="menu-item"><a href="/our-social-impact" rel="dofollow">CSR</a> </li> <li class="menu-item"><a rel="dofollow" href="/privacy-policy">Privacy Policy</a></li> <li class="menu-item"><a rel="dofollow" href="/modern-slavery-statement">Modern Slavery Statement</a></li> </ul> </nav> <nav> <div class="f-heading">What We Do</div> <ul class="clearfix menu"> <li class="menu-item"><a href="/services" rel="dofollow">Services</a></li> <li class="menu-item"><a href="/technologies"rel="dofollow">Technologies</a></li> <li class="menu-item"><a href="/solutions" rel="dofollow">Solutions</a> </li> <li class="menu-item"><a href="/industries" rel="dofollow">Industries</a> </li> <li class="menu-item"><a rel="dofollow" href="/idanim">Idanim</a></li> </ul> </nav> <nav> <div class="f-heading">Insights</div> <ul class="clearfix menu"> <li class="menu-item"><a rel="dofollow" href="/success-stories">Success Stories</a></li> <li class="menu-item"><a rel="dofollow" href="/insights?resource=67">Whitepapers</a></li> <li class="menu-item"><a rel="dofollow" href="/insights?resource=66">Webinars</a></li> <li class="menu-item"><a rel="dofollow" href="/insights?resource=652">Podcasts</a></li> <li class="menu-item"><a rel="dofollow" href="/blog/">Blogs</a></li> <li class="menu-item"><a rel="dofollow" href="/insights?resource=62">E-Books</a></li> <li class="menu-item"><a rel="dofollow" href="/insights?resource=162">Magazines</a></li> <li class="menu-item"><a rel="dofollow" href="/insights?resource=574">Spotlight</a></li> </ul> </nav> <nav> <div class="f-heading">Contact Us</div> <ul class="clearfix menu"> <li class="menu-item"><a rel="dofollow" href="/contact-us?q=request-form">Request for Services</a></li> <li class="menu-item"><a rel="dofollow" href="/contact-us?q=join-form">Join us!</a></li> <li class="menu-item"><a rel="dofollow" href="/contact-us?q=media-form">Media Queries</a></li> <li class="menu-item"><a rel="dofollow" href="/careers">Career</a></li> <li class="menu-item"><a rel="dofollow" href="/responsible-disclosure">Responsible Disclosure</a></li> </ul> </nav> </div> <div class="footer-right"> <div class="heading">Connect With Us</div> <div class="social"> <ul> <li class="ln"><a href="https://www.linkedin.com/company/tothenew" rel="dofollow" onclick="window.open(this.href);return false;"> </a></li> <li class="twt"><a href="https://twitter.com/tothenew" rel="dofollow" onclick="window.open(this.href);return false;"> </a></li> <li class="fb"><a href="https://www.facebook.com/TOTHENEWDigital/" rel="dofollow" onclick="window.open(this.href);return false;"> </a></li>  <li class="Ytube"><a href="https://www.youtube.com/c/tothenew" rel="dofollow" onclick="window.open(this.href);return false;"> </a></li> <li class="glassdoor-footer"><a href="https://www.glassdoor.co.in/Overview/Working-at-TO-THE-NEW-EI_IE1011609.11,21.htm" onclick="window.open(this.href);return false;" rel="dofollow">Glassdoor</a></li> </ul> </div> <div class="copyright"> <img alt="ttn logo" src="/cms-assets/s3fs-public/2021-08/ttnweb.svg"><p>©2024 TO THE NEW</p> </div> </div> </div> </div> </footer> <div id="bottom"> <div class="container"> <div class="row"> <div class="col-xs-12 servicesSection"> <div class="heading">Services</div> <span class="bottom-arrow-down"></span> <ul class="clearfix"> <li class="clearfix"> <span>Cloud & DevOps</span> <ul class="clearfix">   <li><a href="/devops-automation-consulting" title="DevOps as a Service">DevOps as a Service</a></li> <li><a href="/devops-aws" title="DevOps on AWS">DevOps on AWS</a></li> <li><a href="/devops-chef-puppet-docker" title="DevOps Tools">DevOps Tools</a></li>  </ul> </li> <li class="clearfix"> <span>Backend Engineering</span> <ul class="clearfix"> <li><a href="/python-development" title="Python Development">Python Development</a></li> <li><a href="/mean-node-js-development-consulting" title="Node.js Development">Node.js Development</a></li> <li><a href="/grails-application-development" title="Grails Development">Grails Development</a></li> <li><a href="/java-development-services" title="Java Development">Java Development</a></li> <li><a href="/mean-stack-web-development-consulting" title="MEAN Development">MEAN Development</a></li>  </ul> </li> <li class="clearfix"> <span>Digital Marketing</span> <ul> <li><a href="/digital-marketing/email-marketing" title="Email Marketing">Email Marketing</a></li> <li><a href="/digital-marketing/search-engine-optimization" title="Search Engine Optimization">Search Engine Optimization</a></li> <li><a href="/digital-marketing/marketing-automation" title="Marketing Automation">Marketing Automation</a></li> <li><a href="/digital-marketing/social-listening" title="Social Listening">Social Listening</a></li> <li><a href="/digital-marketing/digital-analytics" title="">Digital Analytics</a></li> <li><a href="/digital-marketing/analytics" title="Web Analytics">Web Analytics</a></li> <li><a href="/digital-marketing" title="Digital Marketing">Digital Marketing</a></li> <li><a href="/digital-marketing/influencer-marketing" title="Influencer Marketing">Influencer Marketing</a></li> <li><a href="/digital-marketing/content-marketing" title="Content Marketing">Content Marketing</a></li> <li><a href="/digital-marketing/social-media-marketing" title="Social Media Marketing">Social Media Marketing</a></li> <li><a href="/digital-marketing/creative-strategy" title="Creative Strategy">Creative Strategy</a></li> <li><a href="/digital-marketing/digital-campaigns-activations" title="Digital Campaigns and Activations">Digital Campaigns and Activations</a></li> <li><a href="/digital-marketing/media-buying-planning-company" title="Media planning and buying">Media planning and buying</a></li> <li><a href="/digital-marketing/search-marketing" title="Search Marketing">Search Marketing</a></li> <li><a href="/digital-marketing/digital-strategy" title="Digital Strategy">Digital Strategy</a></li> </ul> </li> <li class="clearfix"> <span>Web Content Management</span> <ul class="clearfix"> <li><a href="/wcm/web-content-management-services" title="Web Content Management">Web Content Management</a></li> <li><a href="/wcm/cq-aem-development-consulting" title="AEM Development">AEM Development</a></li> <li><a href="/wcm/drupal-development-consulting-services" title="Drupal Development">Drupal Development</a></li>  </ul> </li> <li class="clearfix"> <span>Digital Transformation</span> <ul> <li><a href="/digital-transformation" title="Digital Transformation">Digital Transformation</a></li> </ul> </li> <li class="clearfix"> <span>Experience Design</span> <ul class="clearfix"> <li><a href="/experience-design" title="Experience Design">Experience Design</a></li> </ul> </li> <li class="clearfix"> <span>Mobility</span> <ul class="clearfix"> <li><a href="/mobile-application-development-services" title="Mobility">Mobility</a></li> <li><a href="/mobile-ios-application-development-services" title="iOS App Development">iOS App Development</a></li> <li><a href="/mobile-android-application-development-services" title="Android Development">Android Development</a></li> <li><a href="/digital-engineering/smart-tv-apps" title="Smart TV App Development">Smart TV App Development</a></li> <li><a href="/testing/automated-mobile-application-testing" title="Mobile Automation Testing">Mobile Automation Testing</a></li> <li><a href="/mobile-hybrid-application-development" title="Hybrid Application Development">Hybrid Application Development</a></li>  </ul> </li> <li class="clearfix"> <span>Frontend Engineering</span> <ul class="clearfix"> <li><a href="/front-end-angularjs-development" title="AngularJS Development">AngularJS Development</a></li> <li><a href="/react-native-development-services" title="React Native Development">React Native Development</a></li> <li><a href="/react-js-development-consulting-company" title="React js Development">React js Development</a></li> </ul> </li>  <li class="clearfix"> <span>Video Solutions</span> <ul class="clearfix"> <li><a href="/digital-video-solutions" title="Video Solutions">Video Solutions</a></li>  <li><a href="/digital-multiscreen-video-solution" title="Multiscreen Solutions">Multiscreen Solutions</a></li> </ul> </li> <li class="clearfix"> <span>Software Development</span> <ul class="clearfix"> <li><a href="/offshore-software-development-company" title="Offshore Software Development">Offshore Software Development</a></li> <li><a href="/outsourced-software-product-development" title="Outsourced Software Product Development">Outsourced Software Product Development</a></li> <li><a href="/custom-software-development-company" title="Custom Software Development">Custom Software Development</a></li> <li><a href="/bespoke-software-development-company" title="Bespoke Software Development">Bespoke Software Development</a></li> </ul> </li> <li class="clearfix"> <span>Web Application Development</span> <ul class="clearfix"> <li><a href="/custom-web-application-development-company" title="Custom Web Application Development">Custom Web Application Development</a></li> <li><a href="/outsource-web-application-development" title="Outsource Web Application Development">Outsource Web Application Development</a></li> </ul> </li> <li class="clearfix"> <span>Development Center</span> <ul class="clearfix"> <li><a href="/offshore-development-center" title="Offshore Development Center">Offshore Development Center</a></li> </ul> </li> </ul> </div> </div> </div> </div> <script type="text/javascript"> jQuery('body a').each((index, element) => { if (element.href.match("^http://")) { element.href = element.href.replace('http://', 'https://'); } else if (element.href.match('^www.')) { element.href = 'https://' + element.href; } }) </script> <link rel='stylesheet' id='yarppRelatedCss-css' href='https://www.tothenew.com/blog/wp-content/plugins/yet-another-related-posts-plugin/style/related.css?ver=5.30.3' type='text/css' media='all' /> <script type='text/javascript' defer src='https://www.tothenew.com/blog/wp-content/plugins/metronet-profile-picture/js/mpp-frontend.js?ver=2.6.0' id='mpp_gutenberg_tabs-js'></script> <script type='text/javascript' defer src='https://www.tothenew.com/blog/wp-includes/js/comment-reply.min.js?ver=6.2.2' id='comment-reply-js'></script> <script type='text/javascript' defer src='https://www.tothenew.com/blog/wp-content/themes/ttn/js/navigation.js?ver=20140711' id='ttn_new-navigation-js'></script> <script type='text/javascript' id='elastic-search-js-extra'> /* <![CDATA[ */ var ajax_object = {"ajax_url":"https:\/\/www.tothenew.com\/blog\/wp-admin\/admin-ajax.php","nonce":"66c0826a96"}; /* ]]> */ </script> <script type='text/javascript' defer src='https://www.tothenew.com/blog/wp-content/themes/ttn/js/elastic-search.js' id='elastic-search-js'></script> <script type="text/javascript" src="https://www.tothenew.com/blog/wp-content/themes/ttn/js/post-block.js"></script> <script type="text/javascript"> jQuery(document).ajaxComplete(function(){ //for box height var highestBox = 0; jQuery('.latest_posts_wrapper .border .blue-box').each(function(){ if(jQuery(this).height() > highestBox){ highestBox = jQuery(this).height(); } }); jQuery('.latest_posts_wrapper .border .blue-box').height(highestBox); }); jQuery(document).ready(function(){ //for box height var highestBox = 0; jQuery('.latest_posts_wrapper .border .blue-box').each(function(){ if(jQuery(this).height() > highestBox){ highestBox = jQuery(this).height(); } }); jQuery('.latest_posts_wrapper .border .blue-box').height(highestBox); setTimeout(function(){ jQuery("#ap_form_post_content_1-tmce").trigger('click'); }, 2000); }); jQuery(document).ready(function(){ setTimeout(function(){ jQuery("#postcontent-tmce").trigger('click'); }, 2000); }); jQuery(document).ready(function(){ jQuery(function (e) { // jQuery("#cat").selectbox(); // jQuery(".postform").selectbox(); jQuery('.normal .main-cat .heading').click(function () { jQuery(this).siblings().slideToggle(); jQuery(this).parent().toggleClass('active'); jQuery('.overlay-cat').toggleClass('hide'); }); jQuery('.overlay-cat').click(function () { jQuery('.normal .main-cat .heading').parent().removeClass('active'); jQuery('.cat-dropdown').slideUp(); jQuery('.overlay-cat').toggleClass('hide'); }); jQuery('.subscribeButton').click(function(){ //jQuery('body').append(subscribeModal); jQuery("#subModal").modal('show'); //jQuery('.pop').addClass('show'); }); }); }); </script> <script type="text/javascript"> jQuery(document).ready(function($) { jQuery('.register').find(':submit').click(function(e) { if( ! isGmail( jQuery('#user_email').val() ) ) { e.preventDefault(); if (jQuery('.user-registration .field-user_email .form-row .buisness-error').length<1) { jQuery('.user-registration .field-user_email .form-row').append('<label class="user-registration-error buisness-error">You can only register with an @tothenew.com email address!</label>'); } return false; } else{ jQuery('.user-registration .field-user_email .form-row .buisness-error').remove(); } }); jQuery('#user_email').on("keypress keydown keyup",function(e) { if( ! isGmail( jQuery('#user_email').val() ) ) { if (jQuery('.user-registration .field-user_email .form-row .buisness-error').length<1) { jQuery('.user-registration .field-user_email .form-row').append('<label class="user-registration-error buisness-error">You can only register with an @tothenew.com email address!</label>'); } } else{ jQuery('.user-registration .field-user_email .form-row .buisness-error').remove(); } }); }); function isGmail( address ) { if (address.indexOf("@")>0 && address.indexOf(".")>0) { if (address.substr(address.indexOf(".")+1).length>0) { return address.indexOf("@tothenew.com", this.length - 10) !== -1; } } return true; } jQuery(window).scroll(function(){ var headerHeight = jQuery('#header').innerHeight(); var resource = jQuery('.resources').height(); var suggested = jQuery('.suggested').height(); var totalHeight = headerHeight + resource + suggested + 360; var sticky = jQuery('.white'); var sticky1 = jQuery('.followUs'); scroll = jQuery(window).scrollTop(); if (scroll >= 300){ sticky.addClass('fixed'); jQuery('#blog-section').css('padding-top', '91px'); }else { sticky.removeClass('fixed'); jQuery('#blog-section').css('padding-top', '19px'); } if (scroll >= totalHeight){ var widthS = jQuery('.suggested').width()+31; sticky1.addClass('fixed1'); sticky1.css('width', widthS); }else { sticky1.removeClass('fixed1'); sticky1.css('width', '100%'); } }); jQuery(document).ready(function(){ }); jQuery(document).ready(function(){ bindFooterScroller(); jQuery(".year-data").click(function(){ jQuery(this).parents('li').find('.blog-month').slideToggle(); jQuery(this).find('.plus-icon').toggleClass('active'); jQuery(this).parent().siblings().find('.plus-icon').removeClass('active'); jQuery(this).parent().siblings().children().next().slideUp(); return false; }); jQuery('.burger-container').click(function(){ jQuery(this).parent().parent().find('#menu').toggleClass('menu-opened'); }); jQuery('.f-heading').on('click', function () { jQuery(this).parent().toggleClass('visible'); }); var catWidth = jQuery('.normal').width()-15; jQuery('.cat-dropdown').width(catWidth); jQuery('.cat-dropdown').css('font-size', '100%'); if (jQuery(window).width() <= 1024){ var catWidth = jQuery('.normal').width()-15; jQuery('.cat-dropdown').width(catWidth); jQuery('.cat-dropdown').css('font-size', '75%'); } if (jQuery(window).width() <= 640){ var catWidth = jQuery('.normal').width()-15; jQuery('.cat-dropdown').width(catWidth); jQuery('.cat-dropdown').css('font-size', '100%'); } }); jQuery(window).resize(function(){ var catWidth = jQuery('.normal').width()-15; jQuery('.cat-dropdown').width(catWidth); jQuery('.cat-dropdown').css('font-size', '100%'); if (jQuery(window).width() <= 1024){ var catWidth = jQuery('.normal').width()-15; jQuery('.cat-dropdown').width(catWidth); jQuery('.cat-dropdown').css('font-size', '75%'); } if (jQuery(window).width() <= 640){ var catWidth = jQuery('.normal').width()-15; jQuery('.cat-dropdown').width(catWidth); jQuery('.cat-dropdown').css('font-size', '100%'); } }); $header = jQuery("#header"), $clone = $header.before($header.clone().addClass("clone")); jQuery(window).scroll(function () { jQuery("#header").toggleClass("down", (jQuery(window).scrollTop() > 100)); }) jQuery.fn.scrollStopped = function (callback) { var jQuerythis = jQuery(this), self = this; jQuerythis.scroll(function () { if (jQuerythis.data('scrollTimeout')) { clearTimeout(jQuerythis.data('scrollTimeout')); } jQuerythis.data('scrollTimeout', setTimeout(callback, 250, self)); }); }; function bindFooterScroller() { jQuery(window).scroll(function () { var headerHeight = jQuery('#header').innerHeight(); var sticky1 = jQuery('.followUs'); var sticky = jQuery('.white'); var footerElement = jQuery('#subscribe-blog'); // if (isScrolledIntoView(footerElement)) { // sticky.hide(); // sticky1.hide(); // //jQuery('#blog-section').css('padding-top', '19px'); // } // else { var headerHeight = jQuery('#header').innerHeight(); var resource = jQuery('.resources').height(); var suggested = jQuery('.suggested').height(); var totalHeight = headerHeight + resource + suggested + 360; var sticky1 = jQuery('.followUs'); sticky.show(); sticky1.show(); var sticky = jQuery('.white'); var sticky1 = jQuery('.followUs'); scroll = jQuery(window).scrollTop(); if (scroll >= 300){ jQuery('#blog-section').css('padding-top', '91px'); jQuery('.controls').css('display','block'); }else { //jQuery('#blog-section').css('padding-top', '19px'); jQuery('.controls').css('display','none'); } if (scroll >= totalHeight){ var widthS = jQuery('.suggested').width()+31; sticky1.addClass('fixed1'); sticky1.css('width', widthS); }else { sticky1.removeClass('fixed1'); sticky1.css('width', '100%'); } // } }) } function isScrolledIntoView(jQueryelem) { var docViewTop = jQuery(window).scrollTop() + jQuery(window).height(); var elemTop = jQueryelem.offset().top; return (elemTop <= docViewTop); } function bindLoaderScroller() { jQuery(window).scroll(function () { var loaderElement = jQuery('#loader'); if (isScrolledIntoView1(loaderElement)) { setTimeout(function(){ jQuery(".left-content .border:eq(9), .left-content .border:eq(10), .left-content .border:eq(11), .left-content .border:eq(12), .left-content .border:eq(13), .left-content .border:eq(14), .left-content .border:eq(15), .left-content .border:eq(16),.left-content .border:eq(17), .more-post").fadeIn( "slow" ); jQuery('#loader').fadeOut("slow"); jQuery('.left-content').isotope({ itemSelector: '.border' }); }, 2000); } }) } function isScrolledIntoView1(jQueryelem1) { var docViewTop = jQuery(window).scrollTop() + jQuery(window).height(); var elemTop = jQueryelem1.offset().top; return (elemTop <= docViewTop); } jQuery(window).load(function(){ var Wwidth = jQuery(window).width(); if ((Wwidth <=767)) { var rsW = jQuery('.resources1 .banner-text').innerHeight(); jQuery('.resources1 .overlay img').css('height', rsW); }else{ jQuery('.resources1 .overlay img').css('height', 'auto'); } }); jQuery(window).resize(function(){ var Wwidth = jQuery(window).width(); if ((Wwidth <=767)) { var rsW = jQuery('.resources1 .banner-text').innerHeight(); jQuery('.resources1 .overlay img').css('height', rsW); }else{ jQuery('.resources1 .overlay img').css('height', 'auto'); } }); var bcrumb1; jQuery(document).ready(function(){ var all = []; var s = 0; jQuery('.breadcrumbs li').each(function () { all[s++] = jQuery(this).text().trim(); }); bcrumb1 = all.join('|'); }); </script> <script type="application/ld+json"> { "@context" : "http://schema.org", "@type" : "Organization", "address": { "@type": "PostalAddress", "addressLocality": "New Jersey, USA", "postalCode": "08902-3040", "streetAddress": "1588 US Highway 130 - North Brunswick" }, "name" : "TO THE NEW", "url" : "http://www.tothenew.com", "logo" : "https://www.tothenew.com/blog/wp-content/themes/ttn/images/logo-large.png", "sameAs" : [ "https://www.linkedin.com/company/tothenew", "https://twitter.com/TOTHENEW", "https://www.facebook.com/TOTHENEWDigital/", "https://plus.google.com/+TOTHENEW", "https://www.youtube.com/c/tothenew", "http://www.slideshare.net/tothenewtech", "http://www.slideshare.net/tothenew" ] } </script> <div class="overlay-cat hide"></div> <div class="modal fade" id="subModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="subscribe-popup"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button>  <div class="subs-hbsp-form">  <script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script> <script> hbspt.forms.create({ portalId: "481864", formId: "7a02d2db-8a8f-44bb-94ac-85b3421eea2d" }); </script> </div> </div> </div> </div> <div id="instructionModal" class="modal fade" tabindex="-1"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title">Tips for writing a blog</h4> <button type="button" class="close" data-dismiss="modal">×</button> </div> <div class="modal-body"> <iframe src="https://www.tothenew.com/blog/wp-content/plugins/ttn-blog-enhancements//docs/how-to-write-a-blog.pdf" style="width: 100%; height:500px;" frameborder="0"></iframe> </div> </div> </div> </div> <div id="captionHelpModal" class="modal fade" tabindex="-1"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title">Learn how to write a caption</h4> <button type="button" class="close" data-dismiss="modal">×</button> </div> <div class="modal-body"> <iframe src="https://www.tothenew.com/blog/wp-content/plugins/ttn-blog-enhancements//docs/how-to-add-perfect-caption.pdf" style="width: 100%; height:500px;" frameborder="0"></iframe> </div> </div> </div> </div> <script> $(document).ready(function(){ }); </script> </body> </html>

CINXE.COM

4 Pillars of Design – Part 2 | TO THE NEW Blog