CINXE.COM

<!DOCTYPE html> <html> <head> <title>Common Web Design Mistakes</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <meta name="description" content="Simple layout and design tips to help you create a stunning web page" /> <meta property="og:url" content="https://tilda.education/en/design-mistakes" /> <meta property="og:image" content="https://tilda.education/upload/pages/18330364/socnet.png" /> <meta property="og:title" content="Common Web Design Mistakes" /> <meta property="og:description" content="Simple layout and design tips to help you create a stunning web page" /> <meta property="og:type" content="website" /> <meta property="og:site_name" content="Tilda.Education" /> <link rel="canonical" href="https://tilda.education/en/design-mistakes"/>  <meta name="facebook-domain-verification" content="9one1zge7glj0hixes5xaof541u8mi" /> <meta property="fb:app_id" content="1501686730124089"> <link rel="shortcut icon" href="https://tilda.ws/img/tildafavicon.ico"> <link rel="stylesheet" type="text/css" href="/css/union.css">   <link rel="stylesheet" href="https://static.tildacdn.com/css/tilda-grid-3.0.min.css" type="text/css" media="all" onerror="this.loaderr='y';"> <link rel="stylesheet" type="text/css" href="/static/project3379564/css/tilda-blocks-page16067110.min.css"><link rel="stylesheet" type="text/css" href="/static/project3379564/css/fonts-tildasans.css"><link rel="stylesheet" type="text/css" href="/static/project3379564/css/tilda-blocks-page18330364.min.css"><link rel="stylesheet" type="text/css" href="/static/project3379564/css/tilda-cover-1.0.min.css"><link rel="stylesheet" type="text/css" href="/static/project3379564/css/tilda-slds-1.4.min.css"><link rel="stylesheet" type="text/css" href="/static/project3379564/css/tilda-cards-1.0.min.css"><link rel="stylesheet" type="text/css" href="/static/project3379564/css/tilda-zoom-2.0.min.css"> <link rel="alternate" type="application/rss+xml" title="Tilda.Education Articles" href="https://tilda.education/rss.xml" /> <script src="/js/jquery-union.min.js"></script>    <script type="text/javascript" src="https://static.tildacdn.com/js/tilda-zero-1.1.min.js"></script> <script type="text/javascript" src="https://static.tildacdn.com/js/tilda-scripts-3.0.min.js"></script> <script type="text/javascript"> var d = new Date(); window.startTimer = d.getTime(); </script>  <script type="text/javascript" src="/static/project8756/js/tilda-scripts-3.0.min.js"></script>  <script type="text/javascript">function t_onReady(func) { if (document.readyState != 'loading') { func(); } else { document.addEventListener('DOMContentLoaded', func); } } function t_onFuncLoad(funcName, okFunc, time) { if (typeof window[funcName] === 'function') { okFunc(); } else { setTimeout(function() { t_onFuncLoad(funcName, okFunc, time); },(time || 100)); } }function t_throttle(fn, threshhold, scope) {return function () {fn.apply(scope || this, arguments);};} </script> </head> <body itemscope itemtype="http://schema.org/NewsArticle" ><div id="overlay" style="display: none;"></div> <div id="rec272402637" class="r t-rec t-rec_pb_0" style="padding-bottom:0px;background-color:#ffffff; " data-animationappear="off" data-record-type="456" data-bg-color="#ffffff">  <div id="nav272402637marker"></div> <div class="tmenu-mobile"> <div class="tmenu-mobile__container"> <div class="tmenu-mobile__text t-name t-name_md" field="menu_mob_title"> </div> <button type="button" class="t-menuburger t-menuburger_first " aria-label="Navigation menu" aria-expanded="false"> <span style="background-color:#ffffff;"></span> <span style="background-color:#ffffff;"></span> <span style="background-color:#ffffff;"></span> <span style="background-color:#ffffff;"></span> </button> <script>function t_menuburger_init(recid) {var rec=document.querySelector('#rec' + recid);if(!rec) return;var burger=rec.querySelector('.t-menuburger');if(!burger) return;var isSecondStyle=burger.classList.contains('t-menuburger_second');if(isSecondStyle&&!window.isMobile&&!('ontouchend' in document)) {burger.addEventListener('mouseenter',function() {if(burger.classList.contains('t-menuburger-opened')) return;burger.classList.remove('t-menuburger-unhovered');burger.classList.add('t-menuburger-hovered');});burger.addEventListener('mouseleave',function() {if(burger.classList.contains('t-menuburger-opened')) return;burger.classList.remove('t-menuburger-hovered');burger.classList.add('t-menuburger-unhovered');setTimeout(function() {burger.classList.remove('t-menuburger-unhovered');},300);});} burger.addEventListener('click',function() {if(!burger.closest('.tmenu-mobile')&&!burger.closest('.t450__burger_container')&&!burger.closest('.t466__container')&&!burger.closest('.t204__burger')&&!burger.closest('.t199__js__menu-toggler')) {burger.classList.toggle('t-menuburger-opened');burger.classList.remove('t-menuburger-unhovered');}});var menu=rec.querySelector('[data-menu="yes"]');if(!menu) return;var menuLinks=menu.querySelectorAll('.t-menu__link-item');var submenuClassList=['t978__menu-link_hook','t978__tm-link','t966__tm-link','t794__tm-link','t-menusub__target-link'];Array.prototype.forEach.call(menuLinks,function(link) {link.addEventListener('click',function() {var isSubmenuHook=submenuClassList.some(function(submenuClass) {return link.classList.contains(submenuClass);});if(isSubmenuHook) return;burger.classList.remove('t-menuburger-opened');});});menu.addEventListener('clickedAnchorInTooltipMenu',function() {burger.classList.remove('t-menuburger-opened');});} t_onReady(function() {t_onFuncLoad('t_menuburger_init',function(){t_menuburger_init('272402637');});});</script> <style>.t-menuburger{position:relative;flex-shrink:0;width:28px;height:20px;padding:0;border:none;background-color:transparent;outline:none;-webkit-transform:rotate(0deg);transform:rotate(0deg);transition:transform .5s ease-in-out;cursor:pointer;z-index:999;}.t-menuburger span{display:block;position:absolute;width:100%;opacity:1;left:0;-webkit-transform:rotate(0deg);transform:rotate(0deg);transition:.25s ease-in-out;height:3px;background-color:#000;}.t-menuburger span:nth-child(1){top:0px;}.t-menuburger span:nth-child(2),.t-menuburger span:nth-child(3){top:8px;}.t-menuburger span:nth-child(4){top:16px;}.t-menuburger__big{width:42px;height:32px;}.t-menuburger__big span{height:5px;}.t-menuburger__big span:nth-child(2),.t-menuburger__big span:nth-child(3){top:13px;}.t-menuburger__big span:nth-child(4){top:26px;}.t-menuburger__small{width:22px;height:14px;}.t-menuburger__small span{height:2px;}.t-menuburger__small span:nth-child(2),.t-menuburger__small span:nth-child(3){top:6px;}.t-menuburger__small span:nth-child(4){top:12px;}.t-menuburger-opened span:nth-child(1){top:8px;width:0%;left:50%;}.t-menuburger-opened span:nth-child(2){-webkit-transform:rotate(45deg);transform:rotate(45deg);}.t-menuburger-opened span:nth-child(3){-webkit-transform:rotate(-45deg);transform:rotate(-45deg);}.t-menuburger-opened span:nth-child(4){top:8px;width:0%;left:50%;}.t-menuburger-opened.t-menuburger__big span:nth-child(1){top:6px;}.t-menuburger-opened.t-menuburger__big span:nth-child(4){top:18px;}.t-menuburger-opened.t-menuburger__small span:nth-child(1),.t-menuburger-opened.t-menuburger__small span:nth-child(4){top:6px;}@media (hover),(min-width:0\0){.t-menuburger_first:hover span:nth-child(1){transform:translateY(1px);}.t-menuburger_first:hover span:nth-child(4){transform:translateY(-1px);}.t-menuburger_first.t-menuburger__big:hover span:nth-child(1){transform:translateY(3px);}.t-menuburger_first.t-menuburger__big:hover span:nth-child(4){transform:translateY(-3px);}}.t-menuburger_second span:nth-child(2),.t-menuburger_second span:nth-child(3){width:80%;left:20%;right:0;}@media (hover),(min-width:0\0){.t-menuburger_second.t-menuburger-hovered span:nth-child(2),.t-menuburger_second.t-menuburger-hovered span:nth-child(3){animation:t-menuburger-anim 0.3s ease-out normal forwards;}.t-menuburger_second.t-menuburger-unhovered span:nth-child(2),.t-menuburger_second.t-menuburger-unhovered span:nth-child(3){animation:t-menuburger-anim2 0.3s ease-out normal forwards;}}.t-menuburger_second.t-menuburger-opened span:nth-child(2),.t-menuburger_second.t-menuburger-opened span:nth-child(3){left:0;right:0;width:100%!important;}.t-menuburger_third span:nth-child(4){width:70%;left:unset;right:0;}@media (hover),(min-width:0\0){.t-menuburger_third:not(.t-menuburger-opened):hover span:nth-child(4){width:100%;}}.t-menuburger_third.t-menuburger-opened span:nth-child(4){width:0!important;right:50%;}.t-menuburger_fourth{height:12px;}.t-menuburger_fourth.t-menuburger__small{height:8px;}.t-menuburger_fourth.t-menuburger__big{height:18px;}.t-menuburger_fourth span:nth-child(2),.t-menuburger_fourth span:nth-child(3){top:4px;opacity:0;}.t-menuburger_fourth span:nth-child(4){top:8px;}.t-menuburger_fourth.t-menuburger__small span:nth-child(2),.t-menuburger_fourth.t-menuburger__small span:nth-child(3){top:3px;}.t-menuburger_fourth.t-menuburger__small span:nth-child(4){top:6px;}.t-menuburger_fourth.t-menuburger__small span:nth-child(2),.t-menuburger_fourth.t-menuburger__small span:nth-child(3){top:3px;}.t-menuburger_fourth.t-menuburger__small span:nth-child(4){top:6px;}.t-menuburger_fourth.t-menuburger__big span:nth-child(2),.t-menuburger_fourth.t-menuburger__big span:nth-child(3){top:6px;}.t-menuburger_fourth.t-menuburger__big span:nth-child(4){top:12px;}@media (hover),(min-width:0\0){.t-menuburger_fourth:not(.t-menuburger-opened):hover span:nth-child(1){transform:translateY(1px);}.t-menuburger_fourth:not(.t-menuburger-opened):hover span:nth-child(4){transform:translateY(-1px);}.t-menuburger_fourth.t-menuburger__big:not(.t-menuburger-opened):hover span:nth-child(1){transform:translateY(3px);}.t-menuburger_fourth.t-menuburger__big:not(.t-menuburger-opened):hover span:nth-child(4){transform:translateY(-3px);}}.t-menuburger_fourth.t-menuburger-opened span:nth-child(1),.t-menuburger_fourth.t-menuburger-opened span:nth-child(4){top:4px;}.t-menuburger_fourth.t-menuburger-opened span:nth-child(2),.t-menuburger_fourth.t-menuburger-opened span:nth-child(3){opacity:1;}@keyframes t-menuburger-anim{0%{width:80%;left:20%;right:0;}50%{width:100%;left:0;right:0;}100%{width:80%;left:0;right:20%;}}@keyframes t-menuburger-anim2{0%{width:80%;left:0;}50%{width:100%;right:0;left:0;}100%{width:80%;left:20%;right:0;}}</style> </div> </div> <style>.tmenu-mobile{background-color:#111;display:none;width:100%;top:0;z-index:990;}.tmenu-mobile_positionfixed{position:fixed;}.tmenu-mobile__text{color:#fff;}.tmenu-mobile__container{min-height:64px;padding:20px;position:relative;box-sizing:border-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;}.tmenu-mobile__list{display:block;}.tmenu-mobile__burgerlogo{display:inline-block;font-size:24px;font-weight:400;white-space:nowrap;vertical-align:middle;}.tmenu-mobile__imglogo{height:auto;display:block;max-width:300px!important;box-sizing:border-box;padding:0;margin:0 auto;}@media screen and (max-width:980px){.tmenu-mobile__menucontent_hidden{display:none;height:100%;}.tmenu-mobile{display:block;}}@media screen and (max-width:980px){#rec272402637 .t-menuburger{-webkit-order:1;-ms-flex-order:1;order:1;}}</style> <style> #rec272402637 .tmenu-mobile__burgerlogo a{font-size:24px;font-weight:700;}</style> <style> #rec272402637 .tmenu-mobile__burgerlogo__title{font-size:24px;font-weight:700;}</style> <div id="nav272402637" class="t456 t456__positionfixed t456__beforeready tmenu-mobile__menucontent_hidden" style="background-color: rgba(255,255,255,0.90); height:65px; " data-bgcolor-hex="#ffffff" data-bgcolor-rgba="rgba(255,255,255,0.90)" data-navmarker="nav272402637marker" data-appearoffset="500" data-bgopacity-two="90" data-menushadow="" data-menushadow-css="0px 1px 3px rgba(0,0,0,0)" data-bgopacity="0.90" data-bgcolor-rgba-afterscroll="rgba(255,255,255,0.90)" data-menu-items-align="right" data-menu="yes"> <div class="t456__maincontainer " style="height:65px;"> <div class="t456__leftwrapper" style=""> <div class="t456__logowrapper"> <a href="http://tilda.education/en"> <div class="t456__logo t-title" field="title"">Tilda Education</div> </a> </div> </div> <nav class="t456__rightwrapper t456__menualign_right" style=""> <ul role="list" class="t456__list t-menu__list"> <li class="t456__list_item" style="padding:0 15px 0 0;"> <a class="t-menu__link-item" href="https://tilda.education/en/#courses" data-menu-submenu-hook="" data-menu-item-number="1">Courses</a> </li> <li class="t456__list_item" style="padding:0 15px;"> <a class="t-menu__link-item" href="https://tilda.education/en/#guidesandarticles" data-menu-submenu-hook="" data-menu-item-number="2">Guides & Articles</a> </li> <li class="t456__list_item" style="padding:0 15px;"> <a class="t-menu__link-item" href="https://tilda.education/en/#videotutorials" data-menu-submenu-hook="" data-menu-item-number="3">Video Tutorials</a> </li> <li class="t456__list_item" style="padding:0 0 0 15px;"> <a class="t-menu__link-item" href="https://tilda.education/en/#stories" data-menu-submenu-hook="" data-menu-item-number="4">Success Stories</a> </li> </ul> </nav> </div> </div> <script type="text/javascript">t_onReady(function() {t_onFuncLoad('t_menu__highlightActiveLinks',function() {t_menu__highlightActiveLinks('.t456__list_item a');});t_onFuncLoad('t_menu__findAnchorLinks',function() {t_menu__findAnchorLinks('272402637','.t456__list_item a');});});t_onReady(function() {t_onFuncLoad('t_menu__setBGcolor',function() {t_menu__setBGcolor('272402637','.t456');window.addEventListener('resize',function() {t_menu__setBGcolor('272402637','.t456');});});t_onFuncLoad('t_menu__interactFromKeyboard',function() {t_menu__interactFromKeyboard('272402637');});});t_onReady(function() {var rec=document.querySelector('#rec272402637');if(!rec) return;rec.querySelector('.t456').classList.remove('t456__beforeready');t_onFuncLoad('t_menu__showFixedMenu',function() {t_menu__showFixedMenu('272402637','.t456');window.addEventListener('scroll',t_throttle(function() {t_menu__showFixedMenu('272402637','.t456');}));});});t_onReady(function() {t_onFuncLoad('t_menu__changeBgOpacity',function() {t_menu__changeBgOpacity('272402637','.t456');window.addEventListener('scroll',t_throttle(function() {t_menu__changeBgOpacity('272402637','.t456');}));});});</script> <script type="text/javascript">t_onReady(function() {t_onFuncLoad('t_menu__createMobileMenu',function() {t_menu__createMobileMenu('272402637','.t456');});});</script> <style>#rec272402637 .t-menu__link-item{-webkit-transition:color 0.3s ease-in-out,opacity 0.3s ease-in-out;transition:color 0.3s ease-in-out,opacity 0.3s ease-in-out;position:relative;}#rec272402637 .t-menu__link-item:not(.t-active):not(.tooltipstered)::after{content:'';position:absolute;left:0;bottom:20%;opacity:0;width:100%;height:100%;border-bottom:1px solid #ffa282;-webkit-box-shadow:inset 0px -1px 0px 0px #ffa282;-moz-box-shadow:inset 0px -1px 0px 0px #ffa282;box-shadow:inset 0px -1px 0px 0px #ffa282;-webkit-transition:all 0.3s ease;transition:all 0.3s ease;pointer-events:none;}#rec272402637 .t-menu__link-item.t-active:not(.t978__menu-link){color:#000000 !important;}#rec272402637 .t-menu__link-item:not(.t-active):not(.tooltipstered):hover::after{opacity:1;bottom:-1px;}#rec272402637 .t-menu__link-item:not(.t-active):not(.tooltipstered):focus-visible::after{opacity:1;bottom:-1px;}@supports (overflow:-webkit-marquee) and (justify-content:inherit){#rec272402637 .t-menu__link-item,#rec272402637 .t-menu__link-item.t-active{opacity:1 !important;}}</style> <style> #rec272402637 a.t-menusub__link-item{font-weight:400;}</style> <style> #rec272402637 .t456__logowrapper a{font-size:24px;font-weight:700;}#rec272402637 a.t-menu__link-item{font-size:16px;color:#000000;font-weight:400;}</style> <style> #rec272402637 .t456__logo{font-size:24px;font-weight:700;}</style>  <style>#rec272402637 .t456 {box-shadow:0px 1px 3px rgba(0,0,0,0);}</style> </div>  <div id="allrecords" itemprop="description" class="t-records" data-hook="blocks-collection-content-node" data-tilda-project-id="3379564" data-tilda-page-id="18330364" data-tilda-page-alias="en/design-mistakes" data-tilda-formskey="6f20e8cab9363ca37fab290c70306272" data-tilda-lazy="yes" data-tilda-root-zone="com" data-tilda-project-headcode="yes"> <div id="rec296234323" class="r t-rec t-rec_pt_15 t-rec_pb_15" style="padding-top:15px;padding-bottom:15px;background-color:#f5f5f5; " data-animationappear="off" data-record-type="396" data-bg-color="#f5f5f5">  <style>#rec296234323 .t396__artboard {height:670px;background-color:#f5f5f5;}#rec296234323 .t396__filter {height:670px;}#rec296234323 .t396__carrier{height:670px;background-position:center center;background-attachment:scroll;background-size:cover;background-repeat:no-repeat;}@media screen and (max-width:1199px) {#rec296234323 .t396__artboard,#rec296234323 .t396__filter,#rec296234323 .t396__carrier {height:610px;}#rec296234323 .t396__filter {}#rec296234323 .t396__carrier {background-attachment:scroll;}}@media screen and (max-width:959px) {#rec296234323 .t396__artboard,#rec296234323 .t396__filter,#rec296234323 .t396__carrier {height:630px;}#rec296234323 .t396__filter {}#rec296234323 .t396__carrier {background-attachment:scroll;}}@media screen and (max-width:639px) {#rec296234323 .t396__artboard,#rec296234323 .t396__filter,#rec296234323 .t396__carrier {height:600px;}#rec296234323 .t396__filter {}#rec296234323 .t396__carrier {background-attachment:scroll;}}@media screen and (max-width:479px) {#rec296234323 .t396__artboard,#rec296234323 .t396__filter,#rec296234323 .t396__carrier {height:610px;}#rec296234323 .t396__filter {}#rec296234323 .t396__carrier {background-attachment:scroll;}}#rec296234323 .tn-elem[data-elem-id="1470209944682"]{color:#000000;z-index:3;top:372px;left:calc(50% - 600px + 20px);width:764px;}#rec296234323 .tn-elem[data-elem-id="1470209944682"] .tn-atom{color:#000000;font-size:65px;font-family:'TildaSans',Arial,sans-serif;line-height:1.15;font-weight:600;background-position:center center;border-color:transparent ;border-style:solid;}@media screen and (max-width:1199px) {#rec296234323 .tn-elem[data-elem-id="1470209944682"] {top:368px;left:calc(50% - 480px + 10px);width:580px;}#rec296234323 .tn-elem[data-elem-id="1470209944682"] .tn-atom{font-size:53px;}}@media screen and (max-width:959px) {#rec296234323 .tn-elem[data-elem-id="1470209944682"] {top:433px;left:calc(50% - 320px + 10px);width:480px;}#rec296234323 .tn-elem[data-elem-id="1470209944682"] .tn-atom{font-size:48px;}}@media screen and (max-width:639px) {#rec296234323 .tn-elem[data-elem-id="1470209944682"] {top:421px;left:calc(50% - 240px + 10px);width:461px;}#rec296234323 .tn-elem[data-elem-id="1470209944682"] .tn-atom{font-size:40px;}}@media screen and (max-width:479px) {#rec296234323 .tn-elem[data-elem-id="1470209944682"] {top:447px;left:calc(50% - 160px + 10px);width:300px;}#rec296234323 .tn-elem[data-elem-id="1470209944682"] .tn-atom{font-size:28px;}}#rec296234323 .tn-elem[data-elem-id="1470210011265"]{color:#000000;z-index:4;top:544px;left:calc(50% - 600px + 20px);width:342px;}#rec296234323 .tn-elem[data-elem-id="1470210011265"] .tn-atom{color:#000000;font-size:20px;font-family:'TildaSans',Arial,sans-serif;line-height:1.55;font-weight:400;background-position:center center;border-color:transparent ;border-style:solid;}@media screen and (max-width:1199px) {#rec296234323 .tn-elem[data-elem-id="1470210011265"] {top:511px;left:calc(50% - 480px + 10px);}}@media screen and (max-width:959px) {#rec296234323 .tn-elem[data-elem-id="1470210011265"] {top:568px;left:calc(50% - 320px + 10px);width:297px;}#rec296234323 .tn-elem[data-elem-id="1470210011265"] .tn-atom{font-size:18px;}}@media screen and (max-width:639px) {#rec296234323 .tn-elem[data-elem-id="1470210011265"] {top:532px;left:calc(50% - 240px + 10px);width:361px;}}@media screen and (max-width:479px) {#rec296234323 .tn-elem[data-elem-id="1470210011265"] {top:529px;left:calc(50% - 160px + 10px);width:300px;}#rec296234323 .tn-elem[data-elem-id="1470210011265"] .tn-atom{font-size:16px;}}#rec296234323 .tn-elem[data-elem-id="1507200123099"]{z-index:5;top:102px;left:calc(50% - 200px + 384px);width:400px;}#rec296234323 .tn-elem[data-elem-id="1507200123099"] .tn-atom{background-position:center center;border-color:transparent ;border-style:solid;}@media screen and (max-width:1199px) {#rec296234323 .tn-elem[data-elem-id="1507200123099"] {top:65px;left:calc(50% - 200px + 300px);width:350px;}}@media screen and (max-width:959px) {#rec296234323 .tn-elem[data-elem-id="1507200123099"] {top:47px;left:calc(50% - 200px + 170px);width:280px;}}@media screen and (max-width:639px) {#rec296234323 .tn-elem[data-elem-id="1507200123099"] {top:62px;left:calc(50% - 200px + 120px);width:230px;}}@media screen and (max-width:479px) {#rec296234323 .tn-elem[data-elem-id="1507200123099"] {top:122px;left:calc(50% - 200px + 50px);width:200px;}}#rec296234323 .tn-elem[data-elem-id="1617361572169"]{color:#000000;z-index:6;top:160px;left:calc(50% - 600px + 116px);width:280px;}#rec296234323 .tn-elem[data-elem-id="1617361572169"] .tn-atom{color:#000000;font-size:36px;font-family:'TildaSans',Arial,sans-serif;line-height:1.15;font-weight:400;background-position:center center;border-color:transparent ;border-style:solid;}@media screen and (max-width:1199px) {#rec296234323 .tn-elem[data-elem-id="1617361572169"] {top:160px;left:calc(50% - 480px + 90px);width:300px;}#rec296234323 .tn-elem[data-elem-id="1617361572169"] .tn-atom{font-size:30px;}}@media screen and (max-width:959px) {#rec296234323 .tn-elem[data-elem-id="1617361572169"] {top:85px;left:calc(50% - 320px + 75px);width:220px;}#rec296234323 .tn-elem[data-elem-id="1617361572169"] .tn-atom{font-size:25px;}}@media screen and (max-width:639px) {#rec296234323 .tn-elem[data-elem-id="1617361572169"] {top:63px;left:calc(50% - 240px + 74px);}#rec296234323 .tn-elem[data-elem-id="1617361572169"] .tn-atom{font-size:22px;}}@media screen and (max-width:479px) {#rec296234323 .tn-elem[data-elem-id="1617361572169"] {top:80px;left:calc(50% - 160px + 60px);width:180px;}#rec296234323 .tn-elem[data-elem-id="1617361572169"] .tn-atom{font-size:18px;}}#rec296234323 .tn-elem[data-elem-id="1617361572194"]{z-index:7;top:146px;left:calc(50% - 600px + 22px);width:70px;}#rec296234323 .tn-elem[data-elem-id="1617361572194"] .tn-atom{background-position:center center;border-color:transparent ;border-style:solid;}@media screen and (max-width:1199px) {#rec296234323 .tn-elem[data-elem-id="1617361572194"] {top:148px;left:calc(50% - 480px + 11px);width:60px;}}@media screen and (max-width:959px) {#rec296234323 .tn-elem[data-elem-id="1617361572194"] {top:73px;left:calc(50% - 320px + 11px);width:50px;}}@media screen and (max-width:639px) {#rec296234323 .tn-elem[data-elem-id="1617361572194"] {top:51px;left:calc(50% - 240px + 11px);}}@media screen and (max-width:479px) {#rec296234323 .tn-elem[data-elem-id="1617361572194"] {top:70px;left:calc(50% - 160px + 10px);width:40px;}}</style> <div class='t396'> <div class="t396__artboard" data-artboard-recid="296234323" data-artboard-screens="320,480,640,960,1200" data-artboard-height="670" data-artboard-valign="center" data-artboard-upscale="grid" data-artboard-height-res-320="610" data-artboard-height-res-480="600" data-artboard-height-res-640="630" data-artboard-height-res-960="610"> <div class="t396__carrier" data-artboard-recid="296234323"></div> <div class="t396__filter" data-artboard-recid="296234323"></div> <div class='t396__elem tn-elem tn-elem__2962343231470209944682' data-elem-id='1470209944682' data-elem-type='text' data-field-top-value="372" data-field-left-value="20" data-field-width-value="764" data-field-axisy-value="top" data-field-axisx-value="left" data-field-container-value="grid" data-field-topunits-value="px" data-field-leftunits-value="px" data-field-heightunits-value="" data-field-widthunits-value="px" data-field-top-res-320-value="447" data-field-left-res-320-value="10" data-field-width-res-320-value="300" data-field-top-res-480-value="421" data-field-left-res-480-value="10" data-field-width-res-480-value="461" data-field-top-res-640-value="433" data-field-left-res-640-value="10" data-field-width-res-640-value="480" data-field-top-res-960-value="368" data-field-left-res-960-value="10" data-field-width-res-960-value="580"> <h1 itemprop="headline" class='tn-atom'field='tn_text_1470209944682'>Common Web Design Mistakes</h1> </div> <div class='t396__elem tn-elem tn-elem__2962343231470210011265' data-elem-id='1470210011265' data-elem-type='text' data-field-top-value="544" data-field-left-value="20" data-field-width-value="342" data-field-axisy-value="top" data-field-axisx-value="left" data-field-container-value="grid" data-field-topunits-value="px" data-field-leftunits-value="px" data-field-heightunits-value="" data-field-widthunits-value="px" data-field-top-res-320-value="529" data-field-left-res-320-value="10" data-field-width-res-320-value="300" data-field-top-res-480-value="532" data-field-left-res-480-value="10" data-field-width-res-480-value="361" data-field-top-res-640-value="568" data-field-left-res-640-value="10" data-field-width-res-640-value="297" data-field-top-res-960-value="511" data-field-left-res-960-value="10"> <h2 class='tn-atom'field='tn_text_1470210011265'>Simple layout and design tips to help you create a stunning webpage</h2> </div> <div class='t396__elem tn-elem tn-elem__2962343231507200123099' data-elem-id='1507200123099' data-elem-type='image' data-field-top-value="102" data-field-left-value="384" data-field-width-value="400" data-field-axisy-value="top" data-field-axisx-value="center" data-field-container-value="grid" data-field-topunits-value="px" data-field-leftunits-value="px" data-field-heightunits-value="" data-field-widthunits-value="px" data-field-filewidth-value="1196" data-field-fileheight-value="1530" data-field-top-res-320-value="122" data-field-left-res-320-value="50" data-field-width-res-320-value="200" data-field-top-res-480-value="62" data-field-left-res-480-value="120" data-field-width-res-480-value="230" data-field-top-res-640-value="47" data-field-left-res-640-value="170" data-field-width-res-640-value="280" data-field-top-res-960-value="65" data-field-left-res-960-value="300" data-field-width-res-960-value="350"> <div class='tn-atom'> <img itemprop="image" class='tn-atom__img t-img' data-original='https://static.tildacdn.com/tild6662-3339-4234-b635-396133626363/_08.svg' alt='' imgfield='tn_img_1507200123099' /> </div> </div> <div class='t396__elem tn-elem tn-elem__2962343231617361572169' data-elem-id='1617361572169' data-elem-type='text' data-field-top-value="160" data-field-left-value="116" data-field-width-value="280" data-field-axisy-value="top" data-field-axisx-value="left" data-field-container-value="grid" data-field-topunits-value="px" data-field-leftunits-value="px" data-field-heightunits-value="" data-field-widthunits-value="px" data-field-top-res-320-value="80" data-field-left-res-320-value="60" data-field-width-res-320-value="180" data-field-top-res-480-value="63" data-field-left-res-480-value="74" data-field-top-res-640-value="85" data-field-left-res-640-value="75" data-field-width-res-640-value="220" data-field-top-res-960-value="160" data-field-left-res-960-value="90" data-field-width-res-960-value="300"> <div class='tn-atom'><a href="http://tilda.education/en"style="color: inherit">Tilda Education</a></div> </div> <div class='t396__elem tn-elem tn-elem__2962343231617361572194' data-elem-id='1617361572194' data-elem-type='image' data-field-top-value="146" data-field-left-value="22" data-field-width-value="70" data-field-axisy-value="top" data-field-axisx-value="left" data-field-container-value="grid" data-field-topunits-value="px" data-field-leftunits-value="px" data-field-heightunits-value="" data-field-widthunits-value="px" data-field-filewidth-value="127" data-field-fileheight-value="125" data-field-top-res-320-value="70" data-field-left-res-320-value="10" data-field-width-res-320-value="40" data-field-top-res-480-value="51" data-field-left-res-480-value="11" data-field-top-res-640-value="73" data-field-left-res-640-value="11" data-field-width-res-640-value="50" data-field-top-res-960-value="148" data-field-left-res-960-value="11" data-field-width-res-960-value="60"> <a class='tn-atom' href="https://tilda.cc/" target="_blank"> <img itemprop="image" class='tn-atom__img t-img' data-original='https://static.tildacdn.com/tild6330-6337-4638-a531-613936613564/Tilda_logo-02.svg' alt='' imgfield='tn_img_1617361572194' /> </a> </div> </div> </div> <script>t_onReady(function() {t_onFuncLoad('t396_init',function() {t396_init('296234323');});});</script>  </div> <div id="rec296234324" class="r t-rec" style=" " data-animationappear="off" data-record-type="14">  <div class="t-cover" id="recorddiv296234324"bgimgfield="img"style="height:220px;background-image:url('/upload/pages/18330364/tild3835-6362-4538-b235-333331616634__-__resize__20x__102.png');"> <div class="t-cover__carrier" id="coverCarry296234324"data-content-cover-id="296234324"data-content-cover-bg="https://static.tildacdn.com/tild3835-6362-4538-b235-333331616634/102.png"data-display-changed="true"data-content-cover-height="220px"data-content-cover-parallax=""data-content-use-image-for-mobile-cover=""style="height:220px;background-attachment:scroll; "itemscope itemtype="http://schema.org/ImageObject"><meta itemprop="image" content="https://static.tildacdn.com/tild3835-6362-4538-b235-333331616634/102.png"></div> <div class="t-cover__filter" style="height:220px;background-image: -moz-linear-gradient(top, rgba(0,0,0,0.0), rgba(0,0,0,0.0));background-image: -webkit-linear-gradient(top, rgba(0,0,0,0.0), rgba(0,0,0,0.0));background-image: -o-linear-gradient(top, rgba(0,0,0,0.0), rgba(0,0,0,0.0));background-image: -ms-linear-gradient(top, rgba(0,0,0,0.0), rgba(0,0,0,0.0));background-image: linear-gradient(top, rgba(0,0,0,0.0), rgba(0,0,0,0.0));filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#fe000000', endColorstr='#fe000000');"></div> <div class="t-container"> <div class="t-col t-col_12 "> <div class="t-cover__wrapper t-valign_middle" style="height:220px"> <div class="t102 t-align_center" data-hook-content="covercontent"> <span class="space"></span> </div> </div> </div> </div> </div> <style> #rec296234324 .t102__title{text-transform:uppercase;}</style> </div> <div id="rec296234325" class="r t-rec t-rec_pt_60 t-rec_pb_75" style="padding-top:60px;padding-bottom:75px; " data-record-type="139">  <div class="t013"> <div class="t-container"> <div class="t-col t-col_2 t013__centeredsection"> <img itemprop="image" class="t013__img t-img" src="/upload/pages/18330364/tild3236-6536-4034-b737-376463336135__-__empty__894853_514935925214242_1350363745_o.jpg" data-original="https://static.tildacdn.com/tild3236-6536-4034-b737-376463336135/894853_514935925214242_1350363745_o.jpg" imgfield="img" data-tu-max-width="320" data-tu-max-height="320" data-tu-cover="c" alt=""> <br> <div class="t013__autor-title t-descr" field="imgtitle">Nikita Obukhov</div> <div class="t013__autor-descr t-descr" field="imgdescr"><a href="http://tilda.cc/">Tilda </a> Founder and CEO</div> </div> <div class="t-col t-col_8 "> <div class="t013__text t-text t-text_md" field="text">Thousands of people across the globe create websites on <a href="https://tilda.cc">Tilda</a>. This article is based on recent research by my colleagues and me. We analyzed common mistakes that people make when they create websites using our platform. Here is a list of the dos and don’ts applicable to any web design tool or service you use.</div> </div> </div> </div> </div> <div id="rec296234326" class="r t-rec t-rec_pt_0 t-rec_pb_0" style="padding-top:0px;padding-bottom:0px; " data-record-type="30">  <div class="t015"> <div class="t-container t-align_left"> <div class="t-col t-col_8 t-prefix_2"> <div class="t015__uptitle t-uptitle t-uptitle_md" field="subtitle"><div style="line-height: 30px;" data-customstyle="yes"></div></div> <div class="t015__title t-title t-title_lg" field="title">Common Landing Page Design Mistakes </div> </div> </div> </div> <style> #rec296234326 .t015__uptitle{font-weight:400;}@media screen and (min-width:480px){#rec296234326 .t015__uptitle{font-size:28px;line-height:1;}}@media screen and (min-width:900px){#rec296234326 .t015__title{font-size:56px;}}#rec296234326 .t015__descr{line-height:1;}</style> </div> <div id="rec296234327" class="r t-rec t-rec_pt_45 t-rec_pb_30" style="padding-top:45px;padding-bottom:30px; " data-record-type="33">  <div class="t017"> <div class="t-container t-align_left"> <div class="t-col t-col_8 t-prefix_2"> <div class="t017__title t-title t-title_xxs" field="title">1. Content is not broken down into logical blocks</div> </div> </div> </div> </div> <div id="rec296234328" class="r t-rec t-rec_pt_0 t-rec_pb_0" style="padding-top:0px;padding-bottom:0px; " data-record-type="106">  <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md ">It is easier for users to digest information if it is grouped into logical blocks. Set the padding to 120-80 pixels and separate blocks of text by using color backgrounds.</div> </div> </div> </div> </div> <div id="rec296234329" class="r t-rec t-rec_pt_60 t-rec_pb_0" style="padding-top:60px;padding-bottom:0px; " data-record-type="170">  <div class="t156"> <div class="t-container"> <div class="t-col t-col_12"> <div class="t156__wrapper"> <div class="t156__item" itemscope itemtype="http://schema.org/ImageObject"> <img itemprop="image" class="t-img" imgfield="gi_img__0" src="/upload/pages/18330364/tild6338-3765-4565-b733-323464326432__-__empty__noroot_1.png" data-original="https://static.tildacdn.com/tild6338-3765-4565-b733-323464326432/noroot_1.png" data-zoom-target="0" data-zoomable="yes" data-img-zoom-url="https://static.tildacdn.com/tild6338-3765-4565-b733-323464326432/noroot_1.png" data-img-zoom-descr="There is little padding between sets of related information. Moreover, this design needs color blocks to divide content into logical sets. As a result, this information is hard to digest, and it is unclear which text should go with each block" style="width:100%;" alt=""> <meta itemprop="image" content="https://static.tildacdn.com/tild6338-3765-4565-b733-323464326432/noroot_1.png"> </div> <div style="width:20px;min-width:20px;"></div> <div class="t156__item" itemscope itemtype="http://schema.org/ImageObject"> <img itemprop="image" class="t-img" imgfield="gi_img__1" src="/upload/pages/18330364/tild6662-3662-4139-b465-306238313938__-__empty__noroot_2.png" data-original="https://static.tildacdn.com/tild6662-3662-4139-b465-306238313938/noroot_2.png" data-zoom-target="1" data-zoomable="yes" data-img-zoom-url="https://static.tildacdn.com/tild6662-3662-4139-b465-306238313938/noroot_2.png" data-img-zoom-descr="Paddings are large enough, and the blocks are separated by color, which makes one thing immediately clear — these blocks contain different types of content" style="width:100%;" alt=""> <meta itemprop="image" content="https://static.tildacdn.com/tild6662-3662-4139-b465-306238313938/noroot_2.png"> </div> </div> </div> </div> </div> </div> <div id="rec296234330" class="r t-rec t-rec_pt_15 t-rec_pb_105" style="padding-top:15px;padding-bottom:105px; " data-record-type="218">  <div class="t005"> <div class="t-container"> <div class="t-row"> <div class="t-col t-col_6 "><div class="t005__text t-text t-text_md" field="text"><div style="line-height: 22px; text-align: center;" data-customstyle="yes"><span style="font-size: 16px;">There is little padding between sets of related information. Moreover, this design needs color blocks to divide content into logical sets. As a result, this information is hard to digest, and it is unclear which text should go with each block</span></div></div></div> <div class="t-col t-col_6 "><div class="t005__text t-text t-text_md" field="text2"><div style="line-height: 22px; text-align: center;" data-customstyle="yes"><span style="font-size: 16px;">Paddings are large enough, and the blocks are separated by color, which makes one thing immediately clear — these blocks contain different types of content</span></div></div></div> </div> </div> </div> </div> <div id="rec296234331" class="r t-rec t-rec_pt_105 t-rec_pb_30" style="padding-top:105px;padding-bottom:30px;background-color:#f5f5f5; " data-record-type="33" data-bg-color="#f5f5f5">  <div class="t017"> <div class="t-container t-align_left"> <div class="t-col t-col_8 t-prefix_2"> <div class="t017__title t-title t-title_xxs" field="title">2. Uneven spaces between items on a web page</div> </div> </div> </div> </div> <div id="rec296234332" class="r t-rec t-rec_pt_0 t-rec_pb_0" style="padding-top:0px;padding-bottom:0px;background-color:#f5f5f5; " data-record-type="106" data-bg-color="#f5f5f5">  <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md ">Same-size spaces should be set around logical blocks. Otherwise, your page will look messy, and users may not give equal consideration to each section.</div> </div> </div> </div> </div> <div id="rec296234333" class="r t-rec t-rec_pt_60 t-rec_pb_0" style="padding-top:60px;padding-bottom:0px;background-color:#f5f5f5; " data-record-type="170" data-bg-color="#f5f5f5">  <div class="t156"> <div class="t-container"> <div class="t-col t-col_12"> <div class="t156__wrapper"> <div class="t156__item" itemscope itemtype="http://schema.org/ImageObject"> <img itemprop="image" class="t-img" imgfield="gi_img__0" src="/upload/pages/18330364/tild6335-3338-4263-b430-636365313837__-__empty___-1.png" data-original="https://static.tildacdn.com/tild6335-3338-4263-b430-636365313837/_-1.png" data-zoom-target="0" data-zoomable="yes" data-img-zoom-url="https://static.tildacdn.com/tild6335-3338-4263-b430-636365313837/_-1.png" data-img-zoom-descr="Spaces of various widths look uneven and create an impression that company information is linked to the header, although every block is equally important" style="width:100%;" alt=""> <meta itemprop="image" content="https://static.tildacdn.com/tild6335-3338-4263-b430-636365313837/_-1.png"> </div> <div style="width:20px;min-width:20px;"></div> <div class="t156__item" itemscope itemtype="http://schema.org/ImageObject"> <img itemprop="image" class="t-img" imgfield="gi_img__1" src="/upload/pages/18330364/tild6637-3936-4132-a433-373061663564__-__empty___-1.png" data-original="https://static.tildacdn.com/tild6637-3936-4132-a433-373061663564/_-1.png" data-zoom-target="1" data-zoomable="yes" data-img-zoom-url="https://static.tildacdn.com/tild6637-3936-4132-a433-373061663564/_-1.png" data-img-zoom-descr="Same-size spaces around headings and the body copy help perceive the logical blocks as carrying equally important information" style="width:100%;" alt=""> <meta itemprop="image" content="https://static.tildacdn.com/tild6637-3936-4132-a433-373061663564/_-1.png"> </div> </div> </div> </div> </div> </div> <div id="rec296234334" class="r t-rec t-rec_pt_15 t-rec_pb_105" style="padding-top:15px;padding-bottom:105px;background-color:#f5f5f5; " data-record-type="218" data-bg-color="#f5f5f5">  <div class="t005"> <div class="t-container"> <div class="t-row"> <div class="t-col t-col_6 "><div class="t005__text t-text t-text_md" field="text"><div style="line-height: 22px; text-align: center;" data-customstyle="yes"><span style="font-size: 16px;">Spaces of various widths look uneven and create an impression that company information is linked to the header, although every block is equally important</span></div></div></div> <div class="t-col t-col_6 "><div class="t005__text t-text t-text_md" field="text2"><div style="font-size: 16px; line-height: 22px; text-align: center;" data-customstyle="yes"><span style="font-size: 16px;">Same-size spaces around headings and the body copy help perceive the logical blocks as carrying equally important information</span></div></div></div> </div> </div> </div> </div> <div id="rec296234335" class="r t-rec t-rec_pt_105 t-rec_pb_30" style="padding-top:105px;padding-bottom:30px; " data-record-type="33">  <div class="t017"> <div class="t-container t-align_left"> <div class="t-col t-col_8 t-prefix_2"> <div class="t017__title t-title t-title_xxs" field="title">3. Padding is too small – users cannot break down content into logical blocks</div> </div> </div> </div> </div> <div id="rec296234336" class="r t-rec t-rec_pt_0 t-rec_pb_0" style="padding-top:0px;padding-bottom:0px; " data-record-type="106">  <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md ">To avoid logical parts from blending in, keep them separate and insert a large space (at least 120 pixels) between them.</div> </div> </div> </div> </div> <div id="rec296234337" class="r t-rec t-rec_pt_60 t-rec_pb_0" style="padding-top:60px;padding-bottom:0px; " data-record-type="170">  <div class="t156"> <div class="t-container"> <div class="t-col t-col_12"> <div class="t156__wrapper"> <div class="t156__item" itemscope itemtype="http://schema.org/ImageObject"> <img itemprop="image" class="t-img" imgfield="gi_img__0" src="/upload/pages/18330364/tild6535-6264-4662-a364-333163663965__-__empty____20170919__111314_.png" data-original="https://static.tildacdn.com/tild6535-6264-4662-a364-333163663965/__20170919__111314_.png" data-zoom-target="0" data-zoomable="yes" data-img-zoom-url="https://static.tildacdn.com/tild6535-6264-4662-a364-333163663965/__20170919__111314_.png" data-img-zoom-descr="Narrow padding makes blocks stick to each other. This overloads the page and is quite confusing — a website visitor is led to believe that this is one solid piece of text and not different parts" style="width:100%;" alt=""> <meta itemprop="image" content="https://static.tildacdn.com/tild6535-6264-4662-a364-333163663965/__20170919__111314_.png"> </div> <div style="width:20px;min-width:20px;"></div> <div class="t156__item" itemscope itemtype="http://schema.org/ImageObject"> <img itemprop="image" class="t-img" imgfield="gi_img__1" src="/upload/pages/18330364/tild6135-6561-4630-a464-653162353735__-__empty____20170919__111400.png" data-original="https://static.tildacdn.com/tild6135-6561-4630-a464-653162353735/__20170919__111400.png" data-zoom-target="1" data-zoomable="yes" data-img-zoom-url="https://static.tildacdn.com/tild6135-6561-4630-a464-653162353735/__20170919__111400.png" data-img-zoom-descr="Padding is large enough, so the difference between these two blocks is immediately visible" style="width:100%;" alt=""> <meta itemprop="image" content="https://static.tildacdn.com/tild6135-6561-4630-a464-653162353735/__20170919__111400.png"> </div> </div> </div> </div> </div> </div> <div id="rec296234338" class="r t-rec t-rec_pt_15 t-rec_pb_105" style="padding-top:15px;padding-bottom:105px; " data-record-type="218">  <div class="t005"> <div class="t-container"> <div class="t-row"> <div class="t-col t-col_6 "><div class="t005__text t-text t-text_md" field="text"><div style="line-height: 22px; text-align: center;" data-customstyle="yes"><span style="font-size: 16px;">Narrow padding makes blocks stick to each other. This overloads the page and is quite confusing — a website visitor is led to believe that this is one solid piece of text and not different parts</span></div></div></div> <div class="t-col t-col_6 "><div class="t005__text t-text t-text_md" field="text2"><div style="line-height: 22px; text-align: center;" data-customstyle="yes"><span style="font-size: 16px;">Padding is large enough, so the difference between these two blocks is immediately visible</span></div></div></div> </div> </div> </div> </div> <div id="rec296234339" class="r t-rec t-rec_pt_105 t-rec_pb_30" style="padding-top:105px;padding-bottom:30px;background-color:#f5f5f5; " data-record-type="33" data-bg-color="#f5f5f5">  <div class="t017"> <div class="t-container t-align_left"> <div class="t-col t-col_8 t-prefix_2"> <div class="t017__title t-title t-title_xxs" field="title">4. Low contrast for text copy on an image</div> </div> </div> </div> </div> <div id="rec296234340" class="r t-rec t-rec_pt_0 t-rec_pb_0" style="padding-top:0px;padding-bottom:0px;background-color:#f5f5f5; " data-record-type="106" data-bg-color="#f5f5f5">  <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md ">There should be sufficient contrast between text and background. To make copy prominent, place a contrasting filter over the image. Black is a popular color but you could also use bright colors and mix and match them.<br /><br />Another option is to use a contrasting image from the start and placing the copy on top of a dark section of a photograph.</div> </div> </div> </div> </div> <div id="rec296234341" class="r t-rec t-rec_pt_60 t-rec_pb_45" style="padding-top:60px;padding-bottom:45px;background-color:#f5f5f5; " data-record-type="3" data-bg-color="#f5f5f5">  <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild3265-3735-4231-b661-633937623564/noroot.png"> <img itemprop="image" class="t-img t-width t107__width t-width_9" src="/upload/pages/18330364/tild3265-3735-4231-b661-633937623564__-__empty__noroot.png" data-original="https://static.tildacdn.com/tild3265-3735-4231-b661-633937623564/noroot.png" imgfield="img" alt=""> <div class="t-container_8"> <div class="t-col t-col_8 t107__title t-text" field="title" itemprop="name">This image is too light, which makes the text difficult to read</div> </div> </div> </div> </div> <div id="rec296234342" class="r t-rec t-rec_pt_0 t-rec_pb_45" style="padding-top:0px;padding-bottom:45px;background-color:#f5f5f5; " data-record-type="3" data-bg-color="#f5f5f5">  <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild3163-3033-4337-b939-303731623563/noroot.png"> <img itemprop="image" class="t-img t-width t107__width t-width_9" src="/upload/pages/18330364/tild3163-3033-4337-b939-303731623563__-__empty__noroot.png" data-original="https://static.tildacdn.com/tild3163-3033-4337-b939-303731623563/noroot.png" imgfield="img" alt=""> <div class="t-container_8"> <div class="t-col t-col_8 t107__title t-text" field="title" itemprop="name">A filter applied to the photo makes the copy easy to read</div> </div> </div> </div> </div> <div id="rec296234343" class="r t-rec t-rec_pt_120 t-rec_pb_30" style="padding-top:120px;padding-bottom:30px; " data-record-type="33">  <div class="t017"> <div class="t-container t-align_left"> <div class="t-col t-col_8 t-prefix_2"> <div class="t017__title t-title t-title_xxs" field="title"><strong style="font-weight: 700;">5. Too many styles on one page</strong></div> </div> </div> </div> </div> <div id="rec296234344" class="r t-rec t-rec_pt_0 t-rec_pb_60" style="padding-top:0px;padding-bottom:60px; " data-record-type="106">  <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md ">Too many typographic and design styles on one page make it look unprofessional and hard to read. To avoid this, limit yourself to a single font and two weight options. For example, normal and bold.</div> </div> </div> </div> </div> <div id="rec296234345" class="r t-rec t-rec_pt_0 t-rec_pb_0" style="padding-top:0px;padding-bottom:0px; " data-record-type="170">  <div class="t156"> <div class="t-container"> <div class="t-col t-col_12"> <div class="t156__wrapper"> <div class="t156__item" itemscope itemtype="http://schema.org/ImageObject"> <img itemprop="image" class="t-img" imgfield="gi_img__0" src="/upload/pages/18330364/tild3061-3261-4337-a133-303536616431__-__empty__ggtg.png" data-original="https://static.tildacdn.com/tild3061-3261-4337-a133-303536616431/ggtg.png" data-zoom-target="0" data-zoomable="yes" data-img-zoom-url="https://static.tildacdn.com/tild3061-3261-4337-a133-303536616431/ggtg.png" data-img-zoom-descr="Because of too many typography styles beings used, it’s unclear where the emphasis lies" style="width:100%;" alt=""> <meta itemprop="image" content="https://static.tildacdn.com/tild3061-3261-4337-a133-303536616431/ggtg.png"> </div> <div style="width:20px;min-width:20px;"></div> <div class="t156__item" itemscope itemtype="http://schema.org/ImageObject"> <img itemprop="image" class="t-img" imgfield="gi_img__1" src="/upload/pages/18330364/tild3738-6665-4133-b836-316463386665__-__empty__dbgdbg.png" data-original="https://static.tildacdn.com/tild3738-6665-4133-b836-316463386665/dbgdbg.png" data-zoom-target="1" data-zoomable="yes" data-img-zoom-url="https://static.tildacdn.com/tild3738-6665-4133-b836-316463386665/dbgdbg.png" data-img-zoom-descr="One font, one color, and two weight options. The typography on the page looks neat and clear" style="width:100%;" alt=""> <meta itemprop="image" content="https://static.tildacdn.com/tild3738-6665-4133-b836-316463386665/dbgdbg.png"> </div> </div> </div> </div> </div> </div> <div id="rec296234346" class="r t-rec t-rec_pt_15 t-rec_pb_105" style="padding-top:15px;padding-bottom:105px; " data-record-type="218">  <div class="t005"> <div class="t-container"> <div class="t-row"> <div class="t-col t-col_6 "><div class="t005__text t-text t-text_md" field="text"><div style="font-size: 16px; line-height: 22px; text-align: center;" data-customstyle="yes"><span style="font-size: 16px;">Because of too many typography styles beings used, it’s unclear where the emphasis lies</span></div></div></div> <div class="t-col t-col_6 "><div class="t005__text t-text t-text_md" field="text2"><div style="font-size: 16px; line-height: 22px; text-align: center;" data-customstyle="yes"><span style="font-size: 16px;">One font, one color, and two weight options. The typography on the page looks neat and clear</span></div></div></div> </div> </div> </div> </div> <div id="rec296234347" class="r t-rec t-rec_pt_105 t-rec_pb_30" style="padding-top:105px;padding-bottom:30px;background-color:#f5f5f5; " data-record-type="33" data-bg-color="#f5f5f5">  <div class="t017"> <div class="t-container t-align_left"> <div class="t-col t-col_8 t-prefix_2"> <div class="t017__title t-title t-title_xxs" field="title">6. Block with a colored background is too narrow</div> </div> </div> </div> </div> <div id="rec296234348" class="r t-rec t-rec_pt_0 t-rec_pb_0" style="padding-top:0px;padding-bottom:0px;background-color:#f5f5f5; " data-record-type="106" data-bg-color="#f5f5f5">  <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md ">Avoid emphasizing narrow page elements with color. It just doesn’t look good. For example, headings are already well-marked, thanks to their size, font weight, and paddings. Would you like to highlight a particular point on a page? Use a color background for the entire block, including a related heading and text copy.</div> </div> </div> </div> </div> <div id="rec296234349" class="r t-rec t-rec_pt_60 t-rec_pb_0" style="padding-top:60px;padding-bottom:0px;background-color:#f5f5f5; " data-record-type="170" data-bg-color="#f5f5f5">  <div class="t156"> <div class="t-container"> <div class="t-col t-col_12"> <div class="t156__wrapper"> <div class="t156__item" itemscope itemtype="http://schema.org/ImageObject"> <img itemprop="image" class="t-img" imgfield="gi_img__0" src="/upload/pages/18330364/tild3164-6435-4063-a262-633165613635__-__empty__noroot.png" data-original="https://static.tildacdn.com/tild3164-6435-4063-a262-633165613635/noroot.png" data-zoom-target="0" data-zoomable="yes" data-img-zoom-url="https://static.tildacdn.com/tild3164-6435-4063-a262-633165613635/noroot.png" data-img-zoom-descr="Headings placed on a color background break up the page's continuity and look like separate, independent elements" style="width:100%;" alt=""> <meta itemprop="image" content="https://static.tildacdn.com/tild3164-6435-4063-a262-633165613635/noroot.png"> </div> <div style="width:20px;min-width:20px;"></div> <div class="t156__item" itemscope itemtype="http://schema.org/ImageObject"> <img itemprop="image" class="t-img" imgfield="gi_img__1" src="/upload/pages/18330364/tild3337-3730-4631-a466-373330343238__-__empty__noroot.png" data-original="https://static.tildacdn.com/tild3337-3730-4631-a466-373330343238/noroot.png" data-zoom-target="1" data-zoomable="yes" data-img-zoom-url="https://static.tildacdn.com/tild3337-3730-4631-a466-373330343238/noroot.png" data-img-zoom-descr="Both the heading and related text copy share the same background. It shows they belong to the same logical set" style="width:100%;" alt=""> <meta itemprop="image" content="https://static.tildacdn.com/tild3337-3730-4631-a466-373330343238/noroot.png"> </div> </div> </div> </div> </div> </div> <div id="rec296234350" class="r t-rec t-rec_pt_15 t-rec_pb_105" style="padding-top:15px;padding-bottom:105px;background-color:#f5f5f5; " data-record-type="218" data-bg-color="#f5f5f5">  <div class="t005"> <div class="t-container"> <div class="t-row"> <div class="t-col t-col_6 "><div class="t005__text t-text t-text_md" field="text"><div style="line-height: 22px; text-align: center;" data-customstyle="yes"><span style="font-size: 16px; line-height: 16px;">Headings placed on a color background break up the page’s continuity and look like separate, independent elements</span></div></div></div> <div class="t-col t-col_6 "><div class="t005__text t-text t-text_md" field="text2"><div style="line-height: 22px; text-align: center; font-size: 16px;" data-customstyle="yes"><span style="font-size: 16px;">Both the heading and related text copy share the same background. It shows they belong to the same logical set</span></div></div></div> </div> </div> </div> </div> <div id="rec296234351" class="r t-rec t-rec_pt_105 t-rec_pb_30" style="padding-top:105px;padding-bottom:30px; " data-record-type="33">  <div class="t017"> <div class="t-container t-align_left"> <div class="t-col t-col_8 t-prefix_2"> <div class="t017__title t-title t-title_xxs" field="title">7. Too much text copy inside narrow columns</div> </div> </div> </div> </div> <div id="rec296234352" class="r t-rec t-rec_pt_0 t-rec_pb_0" style="padding-top:0px;padding-bottom:0px; " data-record-type="106">  <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md ">It is difficult to read when there is a lot of text copy in narrow columns because website visitors have to skip from one line to the next. Also, it just doesn’t look good! It’s best to cut on the number of columns and shorten the text copy. Otherwise, nobody will read it.</div> </div> </div> </div> </div> <div id="rec296234353" class="r t-rec t-rec_pt_60 t-rec_pb_0" style="padding-top:60px;padding-bottom:0px; " data-record-type="170">  <div class="t156"> <div class="t-container"> <div class="t-col t-col_12"> <div class="t156__wrapper"> <div class="t156__item" itemscope itemtype="http://schema.org/ImageObject"> <img itemprop="image" class="t-img" imgfield="gi_img__0" src="/upload/pages/18330364/tild6639-3039-4437-b564-303364373363__-__empty____20170919__111314_.png" data-original="https://static.tildacdn.com/tild6639-3039-4437-b564-303364373363/__20170919__111314_.png" data-zoom-target="0" data-zoomable="yes" data-img-zoom-url="https://static.tildacdn.com/tild6639-3039-4437-b564-303364373363/__20170919__111314_.png" data-img-zoom-descr="Long, outlined columns are hard to read" style="width:100%;" alt=""> <meta itemprop="image" content="https://static.tildacdn.com/tild6639-3039-4437-b564-303364373363/__20170919__111314_.png"> </div> <div style="width:20px;min-width:20px;"></div> <div class="t156__item" itemscope itemtype="http://schema.org/ImageObject"> <img itemprop="image" class="t-img" imgfield="gi_img__1" src="/upload/pages/18330364/tild3462-6430-4837-b465-386132303039__-__empty____20170919__111400_.png" data-original="https://static.tildacdn.com/tild3462-6430-4837-b465-386132303039/__20170919__111400_.png" data-zoom-target="1" data-zoomable="yes" data-img-zoom-url="https://static.tildacdn.com/tild3462-6430-4837-b465-386132303039/__20170919__111400_.png" data-img-zoom-descr="There is little text in these columns, so it’s easy to read" style="width:100%;" alt=""> <meta itemprop="image" content="https://static.tildacdn.com/tild3462-6430-4837-b465-386132303039/__20170919__111400_.png"> </div> </div> </div> </div> </div> </div> <div id="rec296234354" class="r t-rec t-rec_pt_15 t-rec_pb_105" style="padding-top:15px;padding-bottom:105px; " data-record-type="218">  <div class="t005"> <div class="t-container"> <div class="t-row"> <div class="t-col t-col_6 "><div class="t005__text t-text t-text_md" field="text"><div style="line-height: 22px; text-align: center; font-size: 16px;" data-customstyle="yes"><span style="font-size: 16px;">Long, outlined columns are hard to read</span></div></div></div> <div class="t-col t-col_6 "><div class="t005__text t-text t-text_md" field="text2"><div style="line-height: 22px; text-align: center; font-size: 16px;" data-customstyle="yes"><span style="font-size: 16px;">There is little text in these columns, so it’s easy to read</span></div></div></div> </div> </div> </div> </div> <div id="rec296234355" class="r t-rec t-rec_pt_105 t-rec_pb_30" style="padding-top:105px;padding-bottom:30px;background-color:#f5f5f5; " data-record-type="33" data-bg-color="#f5f5f5">  <div class="t017"> <div class="t-container t-align_left"> <div class="t-col t-col_8 t-prefix_2"> <div class="t017__title t-title t-title_xxs" field="title">8. Too much centered text</div> </div> </div> </div> </div> <div id="rec296234356" class="r t-rec t-rec_pt_0 t-rec_pb_60" style="padding-top:0px;padding-bottom:60px;background-color:#f5f5f5; " data-record-type="106" data-bg-color="#f5f5f5">  <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md ">Centering text on the page works well when there is little text, otherwise, it’s hard for users to navigate it efficiently. At the same time, increase the font size starting from 24 pixels.<br /><br />If you need to include a lot of text, use the blocks featuring collapsible text copy (on Tilda, use blocks TX12, TX16N, or the button BF703).</div> </div> </div> </div> </div> <div id="rec296234357" class="r t-rec t-rec_pt_0 t-rec_pb_0" style="padding-top:0px;padding-bottom:0px;background-color:#f5f5f5; " data-record-type="170" data-bg-color="#f5f5f5">  <div class="t156"> <div class="t-container"> <div class="t-col t-col_12"> <div class="t156__wrapper"> <div class="t156__item" itemscope itemtype="http://schema.org/ImageObject"> <img itemprop="image" class="t-img" imgfield="gi_img__0" src="/upload/pages/18330364/tild6461-6364-4466-b037-383265636437__-__empty__noroot_3.png" data-original="https://static.tildacdn.com/tild6461-6364-4466-b037-383265636437/noroot_3.png" data-zoom-target="0" data-zoomable="yes" data-img-zoom-url="https://static.tildacdn.com/tild6461-6364-4466-b037-383265636437/noroot_3.png" data-img-zoom-descr="Long, centered texts are not easy to read" style="width:100%;" alt=""> <meta itemprop="image" content="https://static.tildacdn.com/tild6461-6364-4466-b037-383265636437/noroot_3.png"> </div> <div style="width:20px;min-width:20px;"></div> <div class="t156__item" itemscope itemtype="http://schema.org/ImageObject"> <img itemprop="image" class="t-img" imgfield="gi_img__1" src="/upload/pages/18330364/tild6337-3962-4361-b861-653434643432__-__empty__noroot_4.png" data-original="https://static.tildacdn.com/tild6337-3962-4361-b861-653434643432/noroot_4.png" data-zoom-target="1" data-zoomable="yes" data-img-zoom-url="https://static.tildacdn.com/tild6337-3962-4361-b861-653434643432/noroot_4.png" data-img-zoom-descr="A short piece of text under the headline (both centered) looks good on a page" style="width:100%;" alt=""> <meta itemprop="image" content="https://static.tildacdn.com/tild6337-3962-4361-b861-653434643432/noroot_4.png"> </div> </div> </div> </div> </div> </div> <div id="rec296234358" class="r t-rec t-rec_pt_15 t-rec_pb_105" style="padding-top:15px;padding-bottom:105px;background-color:#f5f5f5; " data-record-type="218" data-bg-color="#f5f5f5">  <div class="t005"> <div class="t-container"> <div class="t-row"> <div class="t-col t-col_6 "><div class="t005__text t-text t-text_md" field="text"><div style="font-size: 16px; line-height: 22px; text-align: center;" data-customstyle="yes"><span style="font-size: 16px;">Long, centered texts are not easy to read</span></div></div></div> <div class="t-col t-col_6 "><div class="t005__text t-text t-text_md" field="text2"><div style="line-height: 22px; text-align: center;" data-customstyle="yes"><span style="font-size: 16px;">A short piece of text under the heading (both centered) looks good on a page</span></div></div></div> </div> </div> </div> </div> <div id="rec296234359" class="r t-rec t-rec_pt_105 t-rec_pb_30" style="padding-top:105px;padding-bottom:30px; " data-record-type="33">  <div class="t017"> <div class="t-container t-align_left"> <div class="t-col t-col_8 t-prefix_2"> <div class="t017__title t-title t-title_xxs" field="title">9. Text copy is superimposed over an essential part of an image</div> </div> </div> </div> </div> <div id="rec296234360" class="r t-rec t-rec_pt_0 t-rec_pb_0" style="padding-top:0px;padding-bottom:0px; " data-record-type="106">  <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md ">Avoid covering meaningful parts or small details of an image with text. This way, you will both obscure the image and make the text illegible. Try different positions for the text lines, such as centered, left-aligned, or even vertical placement.</div> </div> </div> </div> </div> <div id="rec296234361" class="r t-rec t-rec_pt_60 t-rec_pb_0" style="padding-top:60px;padding-bottom:0px; " data-record-type="170">  <div class="t156"> <div class="t-container"> <div class="t-col t-col_12"> <div class="t156__wrapper"> <div class="t156__item" itemscope itemtype="http://schema.org/ImageObject"> <img itemprop="image" class="t-img" imgfield="gi_img__0" src="/upload/pages/18330364/tild3036-3030-4766-b361-376266626562__-__empty__ghtt.png" data-original="https://static.tildacdn.com/tild3036-3030-4766-b361-376266626562/ghtt.png" data-zoom-target="0" data-zoomable="yes" data-img-zoom-url="https://static.tildacdn.com/tild3036-3030-4766-b361-376266626562/ghtt.png" data-img-zoom-descr="This headline gets in the way of the woman's face. With so many tiny details, it's hard to read the text" style="width:100%;" alt=""> <meta itemprop="image" content="https://static.tildacdn.com/tild3036-3030-4766-b361-376266626562/ghtt.png"> </div> <div style="width:20px;min-width:20px;"></div> <div class="t156__item" itemscope itemtype="http://schema.org/ImageObject"> <img itemprop="image" class="t-img" imgfield="gi_img__1" src="/upload/pages/18330364/tild6431-3864-4635-a564-383039663335__-__empty__dgdfgf.png" data-original="https://static.tildacdn.com/tild6431-3864-4635-a564-383039663335/dgdfgf.png" data-zoom-target="1" data-zoomable="yes" data-img-zoom-url="https://static.tildacdn.com/tild6431-3864-4635-a564-383039663335/dgdfgf.png" data-img-zoom-descr="The image and text copy are easy to read and form good composition" style="width:100%;" alt=""> <meta itemprop="image" content="https://static.tildacdn.com/tild6431-3864-4635-a564-383039663335/dgdfgf.png"> </div> </div> </div> </div> </div> </div> <div id="rec296234362" class="r t-rec t-rec_pt_15 t-rec_pb_105" style="padding-top:15px;padding-bottom:105px; " data-record-type="218">  <div class="t005"> <div class="t-container"> <div class="t-row"> <div class="t-col t-col_6 "><div class="t005__text t-text t-text_md" field="text"><div style="line-height: 22px; text-align: center;" data-customstyle="yes"><span style="font-size: 16px;">This heading gets in the way of the woman’s face. With so many tiny details, it’s hard to read the text</span></div></div></div> <div class="t-col t-col_6 "><div class="t005__text t-text t-text_md" field="text2"><div style="font-size: 16px; line-height: 22px; text-align: center;" data-customstyle="yes"><span style="font-size: 16px;"> The image and text copy are easy to read and form good composition</span></div></div></div> </div> </div> </div> </div> <div id="rec296234363" class="r t-rec t-rec_pt_105 t-rec_pb_30" style="padding-top:105px;padding-bottom:30px;background-color:#f5f5f5; " data-record-type="33" data-bg-color="#f5f5f5">  <div class="t017"> <div class="t-container t-align_left"> <div class="t-col t-col_8 t-prefix_2"> <div class="t017__title t-title t-title_xxs" field="title">10. Misusing visual hierarchy</div> </div> </div> </div> </div> <div id="rec296234364" class="r t-rec t-rec_pt_0 t-rec_pb_60" style="padding-top:0px;padding-bottom:60px;background-color:#f5f5f5; " data-record-type="106" data-bg-color="#f5f5f5">  <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md ">For information hierarchy to be clearly visible on a page, the title on the cover should be bigger than the rest of the headings or at least the same size. This is especially true if the heading is long, for example.</div> </div> </div> </div> </div> <div id="rec296234365" class="r t-rec t-rec_pt_0 t-rec_pb_0" style="padding-top:0px;padding-bottom:0px;background-color:#f5f5f5; " data-record-type="170" data-bg-color="#f5f5f5">  <div class="t156"> <div class="t-container"> <div class="t-col t-col_12"> <div class="t156__wrapper"> <div class="t156__item" itemscope itemtype="http://schema.org/ImageObject"> <img itemprop="image" class="t-img" imgfield="gi_img__0" src="/upload/pages/18330364/tild6162-6462-4735-b162-356533303736__-__empty__noroot_5_42.png" data-original="https://static.tildacdn.com/tild6162-6462-4735-b162-356533303736/noroot_5_42.png" data-zoom-target="0" data-zoomable="yes" data-img-zoom-url="https://static.tildacdn.com/tild6162-6462-4735-b162-356533303736/noroot_5_42.png" data-img-zoom-descr="The heading on the cover page is disproportionately smaller than the following heading, which is confusing. Why? It makes the second heading appear more prominent" style="width:100%;" alt=""> <meta itemprop="image" content="https://static.tildacdn.com/tild6162-6462-4735-b162-356533303736/noroot_5_42.png"> </div> <div style="width:20px;min-width:20px;"></div> <div class="t156__item" itemscope itemtype="http://schema.org/ImageObject"> <img itemprop="image" class="t-img" imgfield="gi_img__1" src="/upload/pages/18330364/tild3638-6633-4232-a238-383133396266__-__empty__4_.png" data-original="https://static.tildacdn.com/tild3638-6633-4232-a238-383133396266/4_.png" data-zoom-target="1" data-zoomable="yes" data-img-zoom-url="https://static.tildacdn.com/tild3638-6633-4232-a238-383133396266/4_.png" data-img-zoom-descr="The heading on the cover page is bigger than the one in the following block, so the page looks consistent" style="width:100%;" alt=""> <meta itemprop="image" content="https://static.tildacdn.com/tild3638-6633-4232-a238-383133396266/4_.png"> </div> </div> </div> </div> </div> </div> <div id="rec296234366" class="r t-rec t-rec_pt_15 t-rec_pb_90" style="padding-top:15px;padding-bottom:90px;background-color:#f5f5f5; " data-record-type="218" data-bg-color="#f5f5f5">  <div class="t005"> <div class="t-container"> <div class="t-row"> <div class="t-col t-col_6 "><div class="t005__text t-text t-text_md" field="text"><div style="line-height: 22px; text-align: center; font-size: 16px;" data-customstyle="yes"><span style="font-size: 16px;">The heading on the cover page is disproportionately smaller than the following heading, which is confusing. Why? It makes the second heading appear more prominent</span></div></div></div> <div class="t-col t-col_6 "><div class="t005__text t-text t-text_md" field="text2"><div style="line-height: 22px; text-align: center; font-size: 16px;" data-customstyle="yes"><span style="font-size: 16px;">The heading on the cover page is bigger than the one in the following block, so the page looks consistent</span></div></div></div> </div> </div> </div> </div> <div id="rec296234367" class="r t-rec t-rec_pt_0 t-rec_pb_75" style="padding-top:0px;padding-bottom:75px;background-color:#f5f5f5; " data-record-type="106" data-bg-color="#f5f5f5">  <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md ">The same principle applies to visual hierarchy within a logical block. The heading should be the largest design element on the page, followed by a smaller, less prominent subheading. Next, feature titles that follow should be noticeably smaller than the heading and of the same weight. The smallest fonts should be used for feature descriptions.<br /><br />This will help website visitors distinguish between the more important and less important information.</div> </div> </div> </div> </div> <div id="rec296234368" class="r t-rec t-rec_pt_0 t-rec_pb_0" style="padding-top:0px;padding-bottom:0px;background-color:#f5f5f5; " data-record-type="170" data-bg-color="#f5f5f5">  <div class="t156"> <div class="t-container"> <div class="t-col t-col_12"> <div class="t156__wrapper"> <div class="t156__item" itemscope itemtype="http://schema.org/ImageObject"> <img itemprop="image" class="t-img" imgfield="gi_img__0" src="/upload/pages/18330364/tild3266-3936-4132-b266-316538306438__-__empty__noroot_.png" data-original="https://static.tildacdn.com/tild3266-3936-4132-b266-316538306438/noroot_.png" data-zoom-target="0" data-zoomable="yes" data-img-zoom-url="https://static.tildacdn.com/tild3266-3936-4132-b266-316538306438/noroot_.png" data-img-zoom-descr="The heading is smaller than feature titles and seems less significant, although it's more import in this context" style="width:100%;" alt=""> <meta itemprop="image" content="https://static.tildacdn.com/tild3266-3936-4132-b266-316538306438/noroot_.png"> </div> <div style="width:20px;min-width:20px;"></div> <div class="t156__item" itemscope itemtype="http://schema.org/ImageObject"> <img itemprop="image" class="t-img" imgfield="gi_img__1" src="/upload/pages/18330364/tild3035-3736-4563-b039-346439343137__-__empty__4_1_.png" data-original="https://static.tildacdn.com/tild3035-3736-4563-b039-346439343137/4_1_.png" data-zoom-target="1" data-zoomable="yes" data-img-zoom-url="https://static.tildacdn.com/tild3035-3736-4563-b039-346439343137/4_1_.png" data-img-zoom-descr="The heading is the most prominent element on the page and despite feature titles are written in a smaller type, they are still clearly visible" style="width:100%;" alt=""> <meta itemprop="image" content="https://static.tildacdn.com/tild3035-3736-4563-b039-346439343137/4_1_.png"> </div> </div> </div> </div> </div> </div> <div id="rec296234369" class="r t-rec t-rec_pt_15 t-rec_pb_75" style="padding-top:15px;padding-bottom:75px;background-color:#f5f5f5; " data-record-type="218" data-bg-color="#f5f5f5">  <div class="t005"> <div class="t-container"> <div class="t-row"> <div class="t-col t-col_6 "><div class="t005__text t-text t-text_md" field="text"><div style="line-height: 22px; text-align: center;" data-customstyle="yes"><span style="font-size: 16px;">The heading is smaller than feature titles and seems less significant, although it’s more import in this context</span></div></div></div> <div class="t-col t-col_6 "><div class="t005__text t-text t-text_md" field="text2"><div style="line-height: 22px; text-align: center;" data-customstyle="yes"><span style="font-size: 16px;">The heading is the most prominent element on the page and despite feature titles are written in a smaller type, they are still clearly visible</span></div></div></div> </div> </div> </div> </div> <div id="rec296234370" class="r t-rec t-rec_pt_105 t-rec_pb_30" style="padding-top:105px;padding-bottom:30px; " data-record-type="33">  <div class="t017"> <div class="t-container t-align_left"> <div class="t-col t-col_8 t-prefix_2"> <div class="t017__title t-title t-title_xxs" field="title">11. One logical set is split into two</div> </div> </div> </div> </div> <div id="rec296234371" class="r t-rec t-rec_pt_0 t-rec_pb_0" style="padding-top:0px;padding-bottom:0px; " data-record-type="106">  <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md ">A full-screen image or gallery following a piece of text resembles a separate, independent block. If you add padding around the gallery, both text copy and images will look like a logical whole, thanks to a shared background.</div> </div> </div> </div> </div> <div id="rec296234372" class="r t-rec t-rec_pt_60 t-rec_pb_0" style="padding-top:60px;padding-bottom:0px; " data-record-type="170">  <div class="t156"> <div class="t-container"> <div class="t-col t-col_12"> <div class="t156__wrapper"> <div class="t156__item" itemscope itemtype="http://schema.org/ImageObject"> <img itemprop="image" class="t-img" imgfield="gi_img__0" src="/upload/pages/18330364/tild6563-3763-4638-b231-613336373531__-__empty__noroot_6.png" data-original="https://static.tildacdn.com/tild6563-3763-4638-b231-613336373531/noroot_6.png" data-zoom-target="0" data-zoomable="yes" data-img-zoom-url="https://static.tildacdn.com/tild6563-3763-4638-b231-613336373531/noroot_6.png" data-img-zoom-descr="A full-screen gallery looks disjointed from the headline above and looks like a standalone block" style="width:100%;" alt=""> <meta itemprop="image" content="https://static.tildacdn.com/tild6563-3763-4638-b231-613336373531/noroot_6.png"> </div> <div style="width:20px;min-width:20px;"></div> <div class="t156__item" itemscope itemtype="http://schema.org/ImageObject"> <img itemprop="image" class="t-img" imgfield="gi_img__1" src="/upload/pages/18330364/tild6361-3762-4139-b832-386133616137__-__empty__noroot_7.png" data-original="https://static.tildacdn.com/tild6361-3762-4139-b832-386133616137/noroot_7.png" data-zoom-target="1" data-zoomable="yes" data-img-zoom-url="https://static.tildacdn.com/tild6361-3762-4139-b832-386133616137/noroot_7.png" data-img-zoom-descr="The gallery shares the same background as the heading right above it, which makes the whole composition look solid" style="width:100%;" alt=""> <meta itemprop="image" content="https://static.tildacdn.com/tild6361-3762-4139-b832-386133616137/noroot_7.png"> </div> </div> </div> </div> </div> </div> <div id="rec296234373" class="r t-rec t-rec_pt_15 t-rec_pb_105" style="padding-top:15px;padding-bottom:105px; " data-record-type="218">  <div class="t005"> <div class="t-container"> <div class="t-row"> <div class="t-col t-col_6 "><div class="t005__text t-text t-text_md" field="text"><div style="line-height: 22px; text-align: center;" data-customstyle="yes"><span style="font-size: 16px;">A full-screen gallery looks disjointed from the heading above and looks like a standalone block</span></div></div></div> <div class="t-col t-col_6 "><div class="t005__text t-text t-text_md" field="text2"><div style="line-height: 22px; text-align: center; font-size: 16px;" data-customstyle="yes"><span style="font-size: 16px;">The gallery shares the same background as the heading right above it, which makes the whole composition look solid</span></div></div></div> </div> </div> </div> </div> <div id="rec296234374" class="r t-rec t-rec_pt_105 t-rec_pb_30" style="padding-top:105px;padding-bottom:30px;background-color:#f5f5f5; " data-record-type="33" data-bg-color="#f5f5f5">  <div class="t017"> <div class="t-container t-align_left"> <div class="t-col t-col_8 t-prefix_2"> <div class="t017__title t-title t-title_xxs" field="title">12. The heading is too large and too long</div> </div> </div> </div> </div> <div id="rec296234375" class="r t-rec t-rec_pt_0 t-rec_pb_0" style="padding-top:0px;padding-bottom:0px;background-color:#f5f5f5; " data-record-type="106" data-bg-color="#f5f5f5">  <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md ">A very large font is perfect for a short sentence. If the heading is long, use a smaller size font. This will make it easier to read and leave plenty of space for all other design elements on the page.</div> </div> </div> </div> </div> <div id="rec296234376" class="r t-rec t-rec_pt_60 t-rec_pb_0" style="padding-top:60px;padding-bottom:0px;background-color:#f5f5f5; " data-record-type="170" data-bg-color="#f5f5f5">  <div class="t156"> <div class="t-container"> <div class="t-col t-col_12"> <div class="t156__wrapper"> <div class="t156__item" itemscope itemtype="http://schema.org/ImageObject"> <img itemprop="image" class="t-img" imgfield="gi_img__0" src="/upload/pages/18330364/tild3965-3362-4531-b637-353466626339__-__empty__ddfb.png" data-original="https://static.tildacdn.com/tild3965-3362-4531-b637-353466626339/ddfb.png" data-zoom-target="0" data-zoomable="yes" data-img-zoom-url="https://static.tildacdn.com/tild3965-3362-4531-b637-353466626339/ddfb.png" data-img-zoom-descr="The headline that is too big takes up the entire cover, while design elements jostle for space and the headline is hard to read" style="width:100%;" alt=""> <meta itemprop="image" content="https://static.tildacdn.com/tild3965-3362-4531-b637-353466626339/ddfb.png"> </div> <div style="width:20px;min-width:20px;"></div> <div class="t156__item" itemscope itemtype="http://schema.org/ImageObject"> <img itemprop="image" class="t-img" imgfield="gi_img__1" src="/upload/pages/18330364/tild3839-3862-4333-b234-623335643236__-__empty__ggb.png" data-original="https://static.tildacdn.com/tild3839-3862-4333-b234-623335643236/ggb.png" data-zoom-target="1" data-zoomable="yes" data-img-zoom-url="https://static.tildacdn.com/tild3839-3862-4333-b234-623335643236/ggb.png" data-img-zoom-descr="This page is well-composed, all the design elements are in balance with each other, and the copy is easy to read" style="width:100%;" alt=""> <meta itemprop="image" content="https://static.tildacdn.com/tild3839-3862-4333-b234-623335643236/ggb.png"> </div> </div> </div> </div> </div> </div> <div id="rec296234377" class="r t-rec t-rec_pt_15 t-rec_pb_105" style="padding-top:15px;padding-bottom:105px;background-color:#f5f5f5; " data-record-type="218" data-bg-color="#f5f5f5">  <div class="t005"> <div class="t-container"> <div class="t-row"> <div class="t-col t-col_6 "><div class="t005__text t-text t-text_md" field="text"><div style="line-height: 22px; text-align: center;" data-customstyle="yes"><span style="font-size: 16px;">The heading that is too big takes up the entire cover, while design elements jostle for space and the heading is hard to read</span></div></div></div> <div class="t-col t-col_6 "><div class="t005__text t-text t-text_md" field="text2"><div style="line-height: 22px; text-align: center; font-size: 16px;" data-customstyle="yes"><span style="font-size: 16px;">This page is well-composed, all the design elements are in balance with each other, and the copy is easy to read</span></div></div></div> </div> </div> </div> </div> <div id="rec296234378" class="r t-rec t-rec_pt_105 t-rec_pb_30" style="padding-top:105px;padding-bottom:30px; " data-record-type="33">  <div class="t017"> <div class="t-container t-align_left"> <div class="t-col t-col_8 t-prefix_2"> <div class="t017__title t-title t-title_xxs" field="title">13. Wrong use of border styling for buttons</div> </div> </div> </div> </div> <div id="rec296234379" class="r t-rec t-rec_pt_0 t-rec_pb_0" style="padding-top:0px;padding-bottom:0px; " data-record-type="106">  <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md ">Borders are necessary when a button is transparent. Adding a border for a color button does not make sense. It’s just another meaningless design feature that overloads a page and makes it difficult to read it.</div> </div> </div> </div> </div> <div id="rec296234380" class="r t-rec t-rec_pt_60 t-rec_pb_105" style="padding-top:60px;padding-bottom:105px; " data-record-type="396">  <style>#rec296234380 .t396__artboard {height:680px;background-color:#ffffff;}#rec296234380 .t396__filter {height:680px;}#rec296234380 .t396__carrier{height:680px;background-position:center center;background-attachment:scroll;background-size:cover;background-repeat:no-repeat;}@media screen and (max-width:1199px) {#rec296234380 .t396__artboard,#rec296234380 .t396__filter,#rec296234380 .t396__carrier {height:690px;}#rec296234380 .t396__filter {}#rec296234380 .t396__carrier {background-attachment:scroll;}}@media screen and (max-width:959px) {#rec296234380 .t396__artboard,#rec296234380 .t396__filter,#rec296234380 .t396__carrier {height:500px;}#rec296234380 .t396__filter {}#rec296234380 .t396__carrier {background-attachment:scroll;}}@media screen and (max-width:639px) {#rec296234380 .t396__artboard,#rec296234380 .t396__filter,#rec296234380 .t396__carrier {height:370px;}#rec296234380 .t396__filter {}#rec296234380 .t396__carrier {background-attachment:scroll;}}@media screen and (max-width:479px) {#rec296234380 .t396__artboard,#rec296234380 .t396__filter,#rec296234380 .t396__carrier {height:250px;}#rec296234380 .t396__filter {}#rec296234380 .t396__carrier {background-attachment:scroll;}}#rec296234380 .tn-elem[data-elem-id="1470210033144"]{z-index:4;top:calc(340px - 0px + 0px);left:calc(50% - 435px + -18px);width:870px;}#rec296234380 .tn-elem[data-elem-id="1470210033144"] .tn-atom{background-position:center center;border-color:transparent ;border-style:solid;}@media screen and (max-width:1199px) {#rec296234380 .tn-elem[data-elem-id="1470210033144"] {top:calc(340px - 0px + 0.5px);left:calc(50% - 435px + -20px);width:900px;}}@media screen and (max-width:959px) {#rec296234380 .tn-elem[data-elem-id="1470210033144"] {top:calc(340px - 0px + -4px);left:calc(50% - 435px + -1px);width:97%;}}@media screen and (max-width:639px) {#rec296234380 .tn-elem[data-elem-id="1470210033144"] {top:calc(340px - 0px + -4px);left:calc(50% - 435px + 0px);width:96px;}}@media screen and (max-width:479px) {#rec296234380 .tn-elem[data-elem-id="1470210033144"] {top:calc(340px - 0px + -7px);left:calc(50% - 435px + -2px);width:92px;}}</style> <div class='t396'> <div class="t396__artboard" data-artboard-recid="296234380" data-artboard-screens="320,480,640,960,1200" data-artboard-height="680" data-artboard-valign="center" data-artboard-height-res-320="250" data-artboard-height-res-480="370" data-artboard-height-res-640="500" data-artboard-height-res-960="690"> <div class="t396__carrier" data-artboard-recid="296234380"></div> <div class="t396__filter" data-artboard-recid="296234380"></div> <div class='t396__elem tn-elem tn-elem__2962343801470210033144' data-elem-id='1470210033144' data-elem-type='image' data-field-top-value="0" data-field-left-value="-18" data-field-width-value="870" data-field-axisy-value="center" data-field-axisx-value="center" data-field-container-value="window" data-field-topunits-value="" data-field-leftunits-value="" data-field-heightunits-value="" data-field-widthunits-value="" data-field-filewidth-value="1680" data-field-fileheight-value="1294" data-field-top-res-320-value="-7" data-field-left-res-320-value="-2" data-field-width-res-320-value="92" data-field-top-res-480-value="-4" data-field-left-res-480-value="0" data-field-width-res-480-value="96" data-field-top-res-640-value="-4" data-field-left-res-640-value="-1" data-field-width-res-640-value="97" data-field-widthunits-res-640-value="%" data-field-top-res-960-value="0.5" data-field-left-res-960-value="-20" data-field-width-res-960-value="900"> <div class='tn-atom'> <img itemprop="image" class='tn-atom__img t-img' data-original='https://static.tildacdn.com/tild3034-6436-4436-a131-323039316636/noroot.png' alt='' imgfield='tn_img_1470210033144' /> </div> </div> </div> </div> <script>t_onReady(function() {t_onFuncLoad('t396_init',function() {t396_init('296234380');});});</script>  </div> <div id="rec296234381" class="r t-rec t-rec_pt_105 t-rec_pb_30" style="padding-top:105px;padding-bottom:30px;background-color:#f5f5f5; " data-record-type="33" data-bg-color="#f5f5f5">  <div class="t017"> <div class="t-container t-align_left"> <div class="t-col t-col_8 t-prefix_2"> <div class="t017__title t-title t-title_xxs" field="title">14. Too many colors</div> </div> </div> </div> </div> <div id="rec296234382" class="r t-rec t-rec_pt_0 t-rec_pb_60" style="padding-top:0px;padding-bottom:60px;background-color:#f5f5f5; " data-record-type="106" data-bg-color="#f5f5f5">  <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md ">Using too many colors on a page is confusing. Also, it’s unclear which bits are more important. One or two colors are enough to give visual weight to what’s really important.</div> </div> </div> </div> </div> <div id="rec296234383" class="r t-rec t-rec_pt_0 t-rec_pb_0" style="padding-top:0px;padding-bottom:0px;background-color:#f5f5f5; " data-record-type="170" data-bg-color="#f5f5f5">  <div class="t156"> <div class="t-container"> <div class="t-col t-col_12"> <div class="t156__wrapper"> <div class="t156__item" itemscope itemtype="http://schema.org/ImageObject"> <img itemprop="image" class="t-img" imgfield="gi_img__0" src="/upload/pages/18330364/tild3330-3362-4636-b132-313337643536__-__empty__dfgdg.png" data-original="https://static.tildacdn.com/tild3330-3362-4636-b132-313337643536/dfgdg.png" data-zoom-target="0" data-zoomable="yes" data-img-zoom-url="https://static.tildacdn.com/tild3330-3362-4636-b132-313337643536/dfgdg.png" data-img-zoom-descr="There are too many bright colors on the page; this is confusing" style="width:100%;" alt=""> <meta itemprop="image" content="https://static.tildacdn.com/tild3330-3362-4636-b132-313337643536/dfgdg.png"> </div> <div style="width:20px;min-width:20px;"></div> <div class="t156__item" itemscope itemtype="http://schema.org/ImageObject"> <img itemprop="image" class="t-img" imgfield="gi_img__1" src="/upload/pages/18330364/tild6461-3831-4261-a666-396132333666__-__empty__dgdgd.png" data-original="https://static.tildacdn.com/tild6461-3831-4261-a666-396132333666/dgdgd.png" data-zoom-target="1" data-zoomable="yes" data-img-zoom-url="https://static.tildacdn.com/tild6461-3831-4261-a666-396132333666/dgdgd.png" data-img-zoom-descr="One color accent creates variety and doesn't distract from the content of the page" style="width:100%;" alt=""> <meta itemprop="image" content="https://static.tildacdn.com/tild6461-3831-4261-a666-396132333666/dgdgd.png"> </div> </div> </div> </div> </div> </div> <div id="rec296234384" class="r t-rec t-rec_pt_15 t-rec_pb_105" style="padding-top:15px;padding-bottom:105px;background-color:#f5f5f5; " data-record-type="218" data-bg-color="#f5f5f5">  <div class="t005"> <div class="t-container"> <div class="t-row"> <div class="t-col t-col_6 "><div class="t005__text t-text t-text_md" field="text"><div style="line-height: 22px; text-align: center; font-size: 16px;" data-customstyle="yes"><span style="font-size: 16px; line-height: 16px;"></span><span style="font-size: 16px;">There are too many bright colors on the page; this is confusing</span></div></div></div> <div class="t-col t-col_6 "><div class="t005__text t-text t-text_md" field="text2"><div style="line-height: 22px; text-align: center; font-size: 16px;" data-customstyle="yes"><span style="font-size: 16px;">One color accent creates variety and doesn’t distract from the content of the page</span></div></div></div> </div> </div> </div> </div> <div id="rec296234385" class="r t-rec t-rec_pt_105 t-rec_pb_30" style="padding-top:105px;padding-bottom:30px; " data-record-type="33">  <div class="t017"> <div class="t-container t-align_left"> <div class="t-col t-col_8 t-prefix_2"> <div class="t017__title t-title t-title_xxs" field="title"><span style="font-weight: 400;"><strong>15. Overloaded menu</strong></span><br /></div> </div> </div> </div> </div> <div id="rec296234386" class="r t-rec t-rec_pt_0 t-rec_pb_60" style="padding-top:0px;padding-bottom:60px; " data-record-type="106">  <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md ">People visit websites to find solutions to their problems, help them! Use the menu to help people navigate the website and find what they need quickly and easily. Don’t overload them with excessive information. It’s enough to have 5 to 7 menu items.</div> </div> </div> </div> </div> <div id="rec296234387" class="r t-rec t-rec_pt_0 t-rec_pb_45" style="padding-top:0px;padding-bottom:45px; " data-record-type="3">  <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild3439-6233-4136-b938-396137326564/noroot.png"> <img itemprop="image" class="t-img t-width t107__width t-width_9" src="/upload/pages/18330364/tild3439-6233-4136-b938-396137326564__-__empty__noroot.png" data-original="https://static.tildacdn.com/tild3439-6233-4136-b938-396137326564/noroot.png" imgfield="img" alt=""> <div class="t-container_8"> <div class="t-col t-col_8 t107__title t-text" field="title" itemprop="name">This menu carries too much information, making website navigation more difficult</div> </div> </div> </div> </div> <div id="rec296234388" class="r t-rec t-rec_pt_0 t-rec_pb_45" style="padding-top:0px;padding-bottom:45px; " data-record-type="3">  <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild3361-6464-4436-b664-316464393930/noroot.png"> <img itemprop="image" class="t-img t-width t107__width t-width_9" src="/upload/pages/18330364/tild3361-6464-4436-b664-316464393930__-__empty__noroot.png" data-original="https://static.tildacdn.com/tild3361-6464-4436-b664-316464393930/noroot.png" imgfield="img" alt=""> <div class="t-container_8"> <div class="t-col t-col_8 t107__title t-text" field="title" itemprop="name">A simple menu makes is easy to find what you need</div> </div> </div> </div> </div> <div id="rec296234389" class="r t-rec" style=" " data-animationappear="off" data-record-type="14">  <div class="t-cover" id="recorddiv296234389"bgimgfield="img"style="height:190px;background-image:url('/upload/pages/18330364/tild3766-6162-4566-a565-336664366636__-__resize__20x__101.png');"> <div class="t-cover__carrier" id="coverCarry296234389"data-content-cover-id="296234389"data-content-cover-bg="https://static.tildacdn.com/tild3766-6162-4566-a565-336664366636/101.png"data-display-changed="true"data-content-cover-height="190px"data-content-cover-parallax=""data-content-use-image-for-mobile-cover=""style="height:190px;background-attachment:scroll; "itemscope itemtype="http://schema.org/ImageObject"><meta itemprop="image" content="https://static.tildacdn.com/tild3766-6162-4566-a565-336664366636/101.png"></div> <div class="t-cover__filter" style="height:190px;background-image: -moz-linear-gradient(top, rgba(0,0,0,0.0), rgba(0,0,0,0.0));background-image: -webkit-linear-gradient(top, rgba(0,0,0,0.0), rgba(0,0,0,0.0));background-image: -o-linear-gradient(top, rgba(0,0,0,0.0), rgba(0,0,0,0.0));background-image: -ms-linear-gradient(top, rgba(0,0,0,0.0), rgba(0,0,0,0.0));background-image: linear-gradient(top, rgba(0,0,0,0.0), rgba(0,0,0,0.0));filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#fe000000', endColorstr='#fe000000');"></div> <div class="t-container"> <div class="t-col t-col_12 "> <div class="t-cover__wrapper t-valign_middle" style="height:190px"> <div class="t102 t-align_center" data-hook-content="covercontent"> <span class="space"></span> </div> </div> </div> </div> </div> <style> #rec296234389 .t102__title{text-transform:uppercase;}</style> </div> <div id="rec296234390" class="r t-rec t-rec_pt_15 t-rec_pb_0" style="padding-top:15px;padding-bottom:0px;background-color:#f5f5f5; " data-record-type="30" data-bg-color="#f5f5f5">  <div class="t015"> <div class="t-container t-align_left"> <div class="t-col t-col_8 t-prefix_2"> <div class="t015__uptitle t-uptitle t-uptitle_md" field="subtitle"><div style="line-height: 30px;" data-customstyle="yes"></div></div> <div class="t015__title t-title t-title_lg" field="title">Common Editorial Web Design Mistakes</div> </div> </div> </div> <style> #rec296234390 .t015__uptitle{font-weight:400;}@media screen and (min-width:480px){#rec296234390 .t015__uptitle{font-size:28px;line-height:1;}}@media screen and (min-width:900px){#rec296234390 .t015__title{font-size:56px;}}#rec296234390 .t015__descr{line-height:1;}</style> </div> <div id="rec296234391" class="r t-rec t-rec_pt_45 t-rec_pb_30" style="padding-top:45px;padding-bottom:30px;background-color:#f5f5f5; " data-record-type="33" data-bg-color="#f5f5f5">  <div class="t017"> <div class="t-container t-align_left"> <div class="t-col t-col_8 t-prefix_2"> <div class="t017__title t-title t-title_xxs" field="title">1. Long and solid text</div> </div> </div> </div> </div> <div id="rec296234392" class="r t-rec t-rec_pt_0 t-rec_pb_0" style="padding-top:0px;padding-bottom:0px;background-color:#f5f5f5; " data-record-type="106" data-bg-color="#f5f5f5">  <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md ">A wall of text makes reading difficult to understand. For easy navigation, split it into paragraphs or introduce breaks such as impact phrases, quotes, or an images.</div> </div> </div> </div> </div> <div id="rec296234393" class="r t-rec t-rec_pt_60 t-rec_pb_0" style="padding-top:60px;padding-bottom:0px;background-color:#f5f5f5; " data-record-type="170" data-bg-color="#f5f5f5">  <div class="t156"> <div class="t-container"> <div class="t-col t-col_12"> <div class="t156__wrapper"> <div class="t156__item" itemscope itemtype="http://schema.org/ImageObject"> <img itemprop="image" class="t-img" imgfield="gi_img__0" src="/upload/pages/18330364/tild3939-3464-4266-b864-636166643064__-__empty__noroot_6.png" data-original="https://static.tildacdn.com/tild3939-3464-4266-b864-636166643064/noroot_6.png" data-zoom-target="0" data-zoomable="yes" data-img-zoom-url="https://static.tildacdn.com/tild3939-3464-4266-b864-636166643064/noroot_6.png" data-img-zoom-descr="A wall of text is hard to look at" style="width:100%;" alt=""> <meta itemprop="image" content="https://static.tildacdn.com/tild3939-3464-4266-b864-636166643064/noroot_6.png"> </div> <div style="width:20px;min-width:20px;"></div> <div class="t156__item" itemscope itemtype="http://schema.org/ImageObject"> <img itemprop="image" class="t-img" imgfield="gi_img__1" src="/upload/pages/18330364/tild6366-3264-4432-a162-643133313439__-__empty__noroot_7.png" data-original="https://static.tildacdn.com/tild6366-3264-4432-a162-643133313439/noroot_7.png" data-zoom-target="1" data-zoomable="yes" data-img-zoom-url="https://static.tildacdn.com/tild6366-3264-4432-a162-643133313439/noroot_7.png" data-img-zoom-descr="Elements such as quotes or images make it easier to go through the text" style="width:100%;" alt=""> <meta itemprop="image" content="https://static.tildacdn.com/tild6366-3264-4432-a162-643133313439/noroot_7.png"> </div> </div> </div> </div> </div> </div> <div id="rec296234394" class="r t-rec t-rec_pt_15 t-rec_pb_105" style="padding-top:15px;padding-bottom:105px;background-color:#f5f5f5; " data-record-type="218" data-bg-color="#f5f5f5">  <div class="t005"> <div class="t-container"> <div class="t-row"> <div class="t-col t-col_6 "><div class="t005__text t-text t-text_md" field="text"><div style="line-height: 22px; text-align: center; font-size: 16px;" data-customstyle="yes"><span style="line-height: 16px; font-size: 16px;">A wall of text is hard to look at</span></div></div></div> <div class="t-col t-col_6 "><div class="t005__text t-text t-text_md" field="text2"><div style="line-height: 22px; text-align: center; font-size: 16px;" data-customstyle="yes"><span style="font-size: 16px;">Elements such as quotes or images make it easier to go through the text</span></div></div></div> </div> </div> </div> </div> <div id="rec296234395" class="r t-rec t-rec_pt_105 t-rec_pb_30" style="padding-top:105px;padding-bottom:30px; " data-record-type="33">  <div class="t017"> <div class="t-container t-align_left"> <div class="t-col t-col_8 t-prefix_2"> <div class="t017__title t-title t-title_xxs" field="title">2. The heading is positioned at the same distance between two paragraphs</div> </div> </div> </div> </div> <div id="rec296234396" class="r t-rec t-rec_pt_0 t-rec_pb_0" style="padding-top:0px;padding-bottom:0px; " data-record-type="106">  <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md ">A heading should not "hang" between chapters at a similar distance because it belongs to the paragraph that follows. The spacing above a heading should be 2−3 times bigger than the space under it. Simultaneously, the distance under a heading should be roughly the same as the space between paragraphs or slightly larger. This way, the heading will visually refer to the subsequent text.</div> </div> </div> </div> </div> <div id="rec296234397" class="r t-rec t-rec_pt_60 t-rec_pb_0" style="padding-top:60px;padding-bottom:0px; " data-record-type="170">  <div class="t156"> <div class="t-container"> <div class="t-col t-col_12"> <div class="t156__wrapper"> <div class="t156__item" itemscope itemtype="http://schema.org/ImageObject"> <img itemprop="image" class="t-img" imgfield="gi_img__0" src="/upload/pages/18330364/tild3565-3834-4165-b336-316633336633__-__empty__noroot.png" data-original="https://static.tildacdn.com/tild3565-3834-4165-b336-316633336633/noroot.png" data-zoom-target="0" data-zoomable="yes" data-img-zoom-url="https://static.tildacdn.com/tild3565-3834-4165-b336-316633336633/noroot.png" data-img-zoom-descr="The heading is positioned at an equal distance between paragraphs above and below it, and it's unclear which paragraph it belongs with" style="width:100%;" alt=""> <meta itemprop="image" content="https://static.tildacdn.com/tild3565-3834-4165-b336-316633336633/noroot.png"> </div> <div style="width:20px;min-width:20px;"></div> <div class="t156__item" itemscope itemtype="http://schema.org/ImageObject"> <img itemprop="image" class="t-img" imgfield="gi_img__1" src="/upload/pages/18330364/tild6637-3961-4431-a265-626230333266__-__empty__noroot.png" data-original="https://static.tildacdn.com/tild6637-3961-4431-a265-626230333266/noroot.png" data-zoom-target="1" data-zoomable="yes" data-img-zoom-url="https://static.tildacdn.com/tild6637-3961-4431-a265-626230333266/noroot.png" data-img-zoom-descr="Thanks to the use of padding under the heading, it's obvious that the heading belongs with the text that follows" style="width:100%;" alt=""> <meta itemprop="image" content="https://static.tildacdn.com/tild6637-3961-4431-a265-626230333266/noroot.png"> </div> </div> </div> </div> </div> </div> <div id="rec296234398" class="r t-rec t-rec_pt_15 t-rec_pb_105" style="padding-top:15px;padding-bottom:105px; " data-record-type="218">  <div class="t005"> <div class="t-container"> <div class="t-row"> <div class="t-col t-col_6 "><div class="t005__text t-text t-text_md" field="text"><div style="line-height: 22px; text-align: center; font-size: 16px;" data-customstyle="yes"><span style="font-size: 16px;">The heading is positioned at an equal distance between paragraphs above and below it, and it’s unclear which paragraph it belongs with</span></div></div></div> <div class="t-col t-col_6 "><div class="t005__text t-text t-text_md" field="text2"><div style="font-size: 16px; line-height: 22px; text-align: center;" data-customstyle="yes"><span style="font-size: 16px;">Thanks to the use of padding under the heading, it’s obvious that the heading belongs with the text that follows</span></div></div></div> </div> </div> </div> </div> <div id="rec296234399" class="r t-rec t-rec_pt_105 t-rec_pb_30" style="padding-top:105px;padding-bottom:30px;background-color:#f5f5f5; " data-record-type="33" data-bg-color="#f5f5f5">  <div class="t017"> <div class="t-container t-align_left"> <div class="t-col t-col_8 t-prefix_2"> <div class="t017__title t-title t-title_xxs" field="title">3. No logical order</div> </div> </div> </div> </div> <div id="rec296234400" class="r t-rec t-rec_pt_0 t-rec_pb_0" style="padding-top:0px;padding-bottom:0px;background-color:#f5f5f5; " data-record-type="106" data-bg-color="#f5f5f5">  <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md ">In typography, contrasting is used to visually divide different levels of text and establish a strict hierarchy. Main headings should be the most prominent on the page; subheads should be considerably smaller but still clearly visible.</div> </div> </div> </div> </div> <div id="rec296234401" class="r t-rec t-rec_pt_60 t-rec_pb_0" style="padding-top:60px;padding-bottom:0px;background-color:#f5f5f5; " data-record-type="170" data-bg-color="#f5f5f5">  <div class="t156"> <div class="t-container"> <div class="t-col t-col_12"> <div class="t156__wrapper"> <div class="t156__item" itemscope itemtype="http://schema.org/ImageObject"> <img itemprop="image" class="t-img" imgfield="gi_img__0" src="/upload/pages/18330364/tild6266-3064-4632-a535-663466366432__-__empty__noroot_1_.png" data-original="https://static.tildacdn.com/tild6266-3064-4632-a535-663466366432/noroot_1_.png" data-zoom-target="0" data-zoomable="yes" data-img-zoom-url="https://static.tildacdn.com/tild6266-3064-4632-a535-663466366432/noroot_1_.png" data-img-zoom-descr="The heading and subheading are about the same size, there is no clear hierarchy" style="width:100%;" alt=""> <meta itemprop="image" content="https://static.tildacdn.com/tild6266-3064-4632-a535-663466366432/noroot_1_.png"> </div> <div style="width:20px;min-width:20px;"></div> <div class="t156__item" itemscope itemtype="http://schema.org/ImageObject"> <img itemprop="image" class="t-img" imgfield="gi_img__1" src="/upload/pages/18330364/tild3161-3430-4431-b031-386138373562__-__empty__noroot_2_.png" data-original="https://static.tildacdn.com/tild3161-3430-4431-b031-386138373562/noroot_2_.png" data-zoom-target="1" data-zoomable="yes" data-img-zoom-url="https://static.tildacdn.com/tild3161-3430-4431-b031-386138373562/noroot_2_.png" data-img-zoom-descr="It's clear that the heading is more important than the subheading" style="width:100%;" alt=""> <meta itemprop="image" content="https://static.tildacdn.com/tild3161-3430-4431-b031-386138373562/noroot_2_.png"> </div> </div> </div> </div> </div> </div> <div id="rec296234402" class="r t-rec t-rec_pt_15 t-rec_pb_105" style="padding-top:15px;padding-bottom:105px;background-color:#f5f5f5; " data-record-type="218" data-bg-color="#f5f5f5">  <div class="t005"> <div class="t-container"> <div class="t-row"> <div class="t-col t-col_6 "><div class="t005__text t-text t-text_md" field="text"><div style="line-height: 22px; text-align: center; font-size: 16px;" data-customstyle="yes"><span style="font-size: 16px;">The heading and subheading are about the same size, there is no clear hierarchy</span></div></div></div> <div class="t-col t-col_6 "><div class="t005__text t-text t-text_md" field="text2"><div style="line-height: 22px; text-align: center; font-size: 16px;" data-customstyle="yes"><span style="font-size: 16px;">It’s clear that the heading is more important than the subheading</span></div></div></div> </div> </div> </div> </div> <div id="rec296234403" class="r t-rec t-rec_pt_105 t-rec_pb_30" style="padding-top:105px;padding-bottom:30px; " data-record-type="33">  <div class="t017"> <div class="t-container t-align_left"> <div class="t-col t-col_8 t-prefix_2"> <div class="t017__title t-title t-title_xxs" field="title">4. Different spacing above and below blocks</div> </div> </div> </div> </div> <div id="rec296234404" class="r t-rec t-rec_pt_0 t-rec_pb_60" style="padding-top:0px;padding-bottom:60px; " data-record-type="106">  <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md ">If blocks carry the same weight, they should have the same look and feel and be positioned at an equal distance from each other.</div> </div> </div> </div> </div> <div id="rec296234405" class="r t-rec t-rec_pt_0 t-rec_pb_0" style="padding-top:0px;padding-bottom:0px; " data-record-type="170">  <div class="t156"> <div class="t-container"> <div class="t-col t-col_12"> <div class="t156__wrapper"> <div class="t156__item" itemscope itemtype="http://schema.org/ImageObject"> <img itemprop="image" class="t-img" imgfield="gi_img__0" src="/upload/pages/18330364/tild3638-3731-4533-b466-666236316631__-__empty____20170919__111314.png" data-original="https://static.tildacdn.com/tild3638-3731-4533-b466-666236316631/__20170919__111314.png" data-zoom-target="0" data-zoomable="yes" data-img-zoom-url="https://static.tildacdn.com/tild3638-3731-4533-b466-666236316631/__20170919__111314.png" data-img-zoom-descr="If the space between the heading and an author’s image is too narrow, it looks as if the author has more to do with the heading rather than the text that follows" style="width:100%;" alt=""> <meta itemprop="image" content="https://static.tildacdn.com/tild3638-3731-4533-b466-666236316631/__20170919__111314.png"> </div> <div style="width:20px;min-width:20px;"></div> <div class="t156__item" itemscope itemtype="http://schema.org/ImageObject"> <img itemprop="image" class="t-img" imgfield="gi_img__1" src="/upload/pages/18330364/tild6664-6133-4364-b565-373066323731__-__empty____20170919__111400.png" data-original="https://static.tildacdn.com/tild6664-6133-4364-b565-373066323731/__20170919__111400.png" data-zoom-target="1" data-zoomable="yes" data-img-zoom-url="https://static.tildacdn.com/tild6664-6133-4364-b565-373066323731/__20170919__111400.png" data-img-zoom-descr="Thanks to the same spacing above and below the image, blocks appear equal" style="width:100%;" alt=""> <meta itemprop="image" content="https://static.tildacdn.com/tild6664-6133-4364-b565-373066323731/__20170919__111400.png"> </div> </div> </div> </div> </div> </div> <div id="rec296234406" class="r t-rec t-rec_pt_15 t-rec_pb_105" style="padding-top:15px;padding-bottom:105px; " data-record-type="218">  <div class="t005"> <div class="t-container"> <div class="t-row"> <div class="t-col t-col_6 "><div class="t005__text t-text t-text_md" field="text"><div style="line-height: 22px; text-align: center; font-size: 16px;" data-customstyle="yes"><span style="font-size: 16px;">If the space between the heading and an author’s image is too narrow, it looks as if the author has more to do with the heading rather than the text that follows</span></div></div></div> <div class="t-col t-col_6 "><div class="t005__text t-text t-text_md" field="text2"><div style="line-height: 22px; text-align: center; font-size: 16px;" data-customstyle="yes"><span style="font-size: 16px;">Thanks to the same spacing above and below the image, blocks appear equal</span></div></div></div> </div> </div> </div> </div> <div id="rec296234407" class="r t-rec t-rec_pt_105 t-rec_pb_30" style="padding-top:105px;padding-bottom:30px;background-color:#f5f5f5; " data-record-type="33" data-bg-color="#f5f5f5">  <div class="t017"> <div class="t-container t-align_left"> <div class="t-col t-col_8 t-prefix_2"> <div class="t017__title t-title t-title_xxs" field="title">5. Caption is positioned too close to the image</div> </div> </div> </div> </div> <div id="rec296234408" class="r t-rec t-rec_pt_0 t-rec_pb_0" style="padding-top:0px;padding-bottom:0px;background-color:#f5f5f5; " data-record-type="106" data-bg-color="#f5f5f5">  <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md ">On the one hand, the illustration and its caption form a single whole, but these are two separate elements, and captions should not interfere with the image.</div> </div> </div> </div> </div> <div id="rec296234409" class="r t-rec t-rec_pt_60 t-rec_pb_0" style="padding-top:60px;padding-bottom:0px;background-color:#f5f5f5; " data-record-type="170" data-bg-color="#f5f5f5">  <div class="t156"> <div class="t-container"> <div class="t-col t-col_12"> <div class="t156__wrapper"> <div class="t156__item" itemscope itemtype="http://schema.org/ImageObject"> <img itemprop="image" class="t-img" imgfield="gi_img__0" src="/upload/pages/18330364/tild3930-6362-4536-a661-303737616233__-__empty____20170919__111314.png" data-original="https://static.tildacdn.com/tild3930-6362-4536-a661-303737616233/__20170919__111314.png" data-zoom-target="0" data-zoomable="yes" data-img-zoom-url="https://static.tildacdn.com/tild3930-6362-4536-a661-303737616233/__20170919__111314.png" data-img-zoom-descr="The caption is stuck to the image and interferes with perception (both the picture and the text)" style="width:100%;" alt=""> <meta itemprop="image" content="https://static.tildacdn.com/tild3930-6362-4536-a661-303737616233/__20170919__111314.png"> </div> <div style="width:20px;min-width:20px;"></div> <div class="t156__item" itemscope itemtype="http://schema.org/ImageObject"> <img itemprop="image" class="t-img" imgfield="gi_img__1" src="/upload/pages/18330364/tild3538-3833-4832-b031-323165616530__-__empty____20170919__111400.png" data-original="https://static.tildacdn.com/tild3538-3833-4832-b031-323165616530/__20170919__111400.png" data-zoom-target="1" data-zoomable="yes" data-img-zoom-url="https://static.tildacdn.com/tild3538-3833-4832-b031-323165616530/__20170919__111400.png" data-img-zoom-descr="There is a lot of white space between the image and its caption, yet it's clear that the caption belongs to the image" style="width:100%;" alt=""> <meta itemprop="image" content="https://static.tildacdn.com/tild3538-3833-4832-b031-323165616530/__20170919__111400.png"> </div> </div> </div> </div> </div> </div> <div id="rec296234410" class="r t-rec t-rec_pt_15 t-rec_pb_105" style="padding-top:15px;padding-bottom:105px;background-color:#f5f5f5; " data-record-type="218" data-bg-color="#f5f5f5">  <div class="t005"> <div class="t-container"> <div class="t-row"> <div class="t-col t-col_6 "><div class="t005__text t-text t-text_md" field="text"><div style="line-height: 22px; text-align: center; font-size: 16px;" data-customstyle="yes"><span style="font-size: 16px;">The caption is stuck to the image and interferes with perception (both the picture and the text)</span></div></div></div> <div class="t-col t-col_6 "><div class="t005__text t-text t-text_md" field="text2"><div style="line-height: 22px; text-align: center; font-size: 16px;" data-customstyle="yes"><span style="font-size: 16px;">There is a lot of white space between the image and its caption, yet it’s clear that the caption belongs to the image</span></div></div></div> </div> </div> </div> </div> <div id="rec296234411" class="r t-rec t-rec_pt_105 t-rec_pb_30" style="padding-top:105px;padding-bottom:30px; " data-record-type="33">  <div class="t017"> <div class="t-container t-align_left"> <div class="t-col t-col_8 t-prefix_2"> <div class="t017__title t-title t-title_xxs" field="title">6. There is too little space between the subheading and the paragraph</div> </div> </div> </div> </div> <div id="rec296234412" class="r t-rec t-rec_pt_0 t-rec_pb_0" style="padding-top:0px;padding-bottom:0px; " data-record-type="106">  <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md ">The subheading and the text that follows it belong together, but if the space between paragraphs in an article is greater than the space between the subheading and the next paragraph, the article looks disjointed.</div> </div> </div> </div> </div> <div id="rec296234413" class="r t-rec t-rec_pt_60 t-rec_pb_0" style="padding-top:60px;padding-bottom:0px; " data-record-type="170">  <div class="t156"> <div class="t-container"> <div class="t-col t-col_12"> <div class="t156__wrapper"> <div class="t156__item" itemscope itemtype="http://schema.org/ImageObject"> <img itemprop="image" class="t-img" imgfield="gi_img__0" src="/upload/pages/18330364/tild3661-3433-4166-a530-626533623166__-__empty____20170919__111314.png" data-original="https://static.tildacdn.com/tild3661-3433-4166-a530-626533623166/__20170919__111314.png" data-zoom-target="0" data-zoomable="yes" data-img-zoom-url="https://static.tildacdn.com/tild3661-3433-4166-a530-626533623166/__20170919__111314.png" data-img-zoom-descr="Отступ между заголовком и текстом меньше, чем отступ между абзацами" style="width:100%;" alt=""> <meta itemprop="image" content="https://static.tildacdn.com/tild3661-3433-4166-a530-626533623166/__20170919__111314.png"> </div> <div style="width:20px;min-width:20px;"></div> <div class="t156__item" itemscope itemtype="http://schema.org/ImageObject"> <img itemprop="image" class="t-img" imgfield="gi_img__1" src="/upload/pages/18330364/tild6237-6538-4663-a165-383231383036__-__empty____20170919__111400.png" data-original="https://static.tildacdn.com/tild6237-6538-4663-a165-383231383036/__20170919__111400.png" data-zoom-target="1" data-zoomable="yes" data-img-zoom-url="https://static.tildacdn.com/tild6237-6538-4663-a165-383231383036/__20170919__111400.png" data-img-zoom-descr="The spacing under the subheading is slightly larger than the spacing between paragraphs." style="width:100%;" alt=""> <meta itemprop="image" content="https://static.tildacdn.com/tild6237-6538-4663-a165-383231383036/__20170919__111400.png"> </div> </div> </div> </div> </div> </div> <div id="rec296234414" class="r t-rec t-rec_pt_15 t-rec_pb_105" style="padding-top:15px;padding-bottom:105px; " data-record-type="218">  <div class="t005"> <div class="t-container"> <div class="t-row"> <div class="t-col t-col_6 "><div class="t005__text t-text t-text_md" field="text"><div style="line-height: 22px; text-align: center;" data-customstyle="yes"><span style="font-size: 16px;">There is less space between a subheading and a paragraph than between the paragraphs themselves</span></div></div></div> <div class="t-col t-col_6 "><div class="t005__text t-text t-text_md" field="text2"><div style="line-height: 22px; text-align: center;" data-customstyle="yes"><span style="font-size: 16px;">The spacing under the subheading is slightly larger than the spacing between paragraphs</span></div></div></div> </div> </div> </div> </div> <div id="rec296234415" class="r t-rec t-rec_pt_105 t-rec_pb_30" style="padding-top:105px;padding-bottom:30px;background-color:#f5f5f5; " data-record-type="33" data-bg-color="#f5f5f5">  <div class="t017"> <div class="t-container t-align_left"> <div class="t-col t-col_8 t-prefix_2"> <div class="t017__title t-title t-title_xxs" field="title">7. Stand-out elements are placed too close to the main text</div> </div> </div> </div> </div> <div id="rec296234416" class="r t-rec t-rec_pt_0 t-rec_pb_0" style="padding-top:0px;padding-bottom:0px;background-color:#f5f5f5; " data-record-type="106" data-bg-color="#f5f5f5">  <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md ">Elements used as expressions of emphasis such as key phrases or quotes are independent objects. To make them really stand out, set them 75-120 pixels from the main copy.</div> </div> </div> </div> </div> <div id="rec296234417" class="r t-rec t-rec_pt_60 t-rec_pb_0" style="padding-top:60px;padding-bottom:0px;background-color:#f5f5f5; " data-record-type="170" data-bg-color="#f5f5f5">  <div class="t156"> <div class="t-container"> <div class="t-col t-col_12"> <div class="t156__wrapper"> <div class="t156__item" itemscope itemtype="http://schema.org/ImageObject"> <img itemprop="image" class="t-img" imgfield="gi_img__0" src="/upload/pages/18330364/tild3866-3036-4131-b130-363762346639__-__empty____20170919__111314_1.png" data-original="https://static.tildacdn.com/tild3866-3036-4131-b130-363762346639/__20170919__111314_1.png" data-zoom-target="0" data-zoomable="yes" data-img-zoom-url="https://static.tildacdn.com/tild3866-3036-4131-b130-363762346639/__20170919__111314_1.png" data-img-zoom-descr="There is too little space between the main text and stand-out elements" style="width:100%;" alt=""> <meta itemprop="image" content="https://static.tildacdn.com/tild3866-3036-4131-b130-363762346639/__20170919__111314_1.png"> </div> <div style="width:20px;min-width:20px;"></div> <div class="t156__item" itemscope itemtype="http://schema.org/ImageObject"> <img itemprop="image" class="t-img" imgfield="gi_img__1" src="/upload/pages/18330364/tild3535-3932-4163-b237-663561666265__-__empty____20170919__111400.png" data-original="https://static.tildacdn.com/tild3535-3932-4163-b237-663561666265/__20170919__111400.png" data-zoom-target="1" data-zoomable="yes" data-img-zoom-url="https://static.tildacdn.com/tild3535-3932-4163-b237-663561666265/__20170919__111400.png" data-img-zoom-descr="The quote really stands out thanks to the large padding" style="width:100%;" alt=""> <meta itemprop="image" content="https://static.tildacdn.com/tild3535-3932-4163-b237-663561666265/__20170919__111400.png"> </div> </div> </div> </div> </div> </div> <div id="rec296234418" class="r t-rec t-rec_pt_15 t-rec_pb_105" style="padding-top:15px;padding-bottom:105px;background-color:#f5f5f5; " data-record-type="218" data-bg-color="#f5f5f5">  <div class="t005"> <div class="t-container"> <div class="t-row"> <div class="t-col t-col_6 "><div class="t005__text t-text t-text_md" field="text"><div style="line-height: 22px; text-align: center; font-size: 16px;" data-customstyle="yes"><span style="font-size: 16px;">There is too little space between the main text and stand-out elements</span></div></div></div> <div class="t-col t-col_6 "><div class="t005__text t-text t-text_md" field="text2"><div style="line-height: 22px; text-align: center; font-size: 16px;" data-customstyle="yes"><span style="font-size: 16px;">The quote really stands out thanks to the large padding</span></div></div></div> </div> </div> </div> </div> <div id="rec296234419" class="r t-rec t-rec_pt_105 t-rec_pb_30" style="padding-top:105px;padding-bottom:30px; " data-record-type="33">  <div class="t017"> <div class="t-container t-align_left"> <div class="t-col t-col_8 t-prefix_2"> <div class="t017__title t-title t-title_xxs" field="title">8. Low-contrast elements</div> </div> </div> </div> </div> <div id="rec296234420" class="r t-rec t-rec_pt_0 t-rec_pb_0" style="padding-top:0px;padding-bottom:0px; " data-record-type="106">  <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md ">If you’d like to emphasize a certain phrase, be bold, make a key phrase bigger than the main text by 10−15 pixels. Let the key phrase really stand out from the rest of the text.</div> </div> </div> </div> </div> <div id="rec296234421" class="r t-rec t-rec_pt_60 t-rec_pb_0" style="padding-top:60px;padding-bottom:0px; " data-record-type="170">  <div class="t156"> <div class="t-container"> <div class="t-col t-col_12"> <div class="t156__wrapper"> <div class="t156__item" itemscope itemtype="http://schema.org/ImageObject"> <img itemprop="image" class="t-img" imgfield="gi_img__0" src="/upload/pages/18330364/tild6636-3037-4131-b737-626432323630__-__empty____20170919__111314.png" data-original="https://static.tildacdn.com/tild6636-3037-4131-b737-626432323630/__20170919__111314.png" data-zoom-target="0" data-zoomable="yes" data-img-zoom-url="https://static.tildacdn.com/tild6636-3037-4131-b737-626432323630/__20170919__111314.png" data-img-zoom-descr="Key phrase blends in with the rest of the copy, it looks messy" style="width:100%;" alt=""> <meta itemprop="image" content="https://static.tildacdn.com/tild6636-3037-4131-b737-626432323630/__20170919__111314.png"> </div> <div style="width:20px;min-width:20px;"></div> <div class="t156__item" itemscope itemtype="http://schema.org/ImageObject"> <img itemprop="image" class="t-img" imgfield="gi_img__1" src="/upload/pages/18330364/tild3335-6134-4533-b731-663961653865__-__empty____20170919__111400.png" data-original="https://static.tildacdn.com/tild3335-6134-4533-b731-663961653865/__20170919__111400.png" data-zoom-target="1" data-zoomable="yes" data-img-zoom-url="https://static.tildacdn.com/tild3335-6134-4533-b731-663961653865/__20170919__111400.png" data-img-zoom-descr="The key phrase really stands out with its large font size and sufficient spacing around the text" style="width:100%;" alt=""> <meta itemprop="image" content="https://static.tildacdn.com/tild3335-6134-4533-b731-663961653865/__20170919__111400.png"> </div> </div> </div> </div> </div> </div> <div id="rec296234422" class="r t-rec t-rec_pt_15 t-rec_pb_105" style="padding-top:15px;padding-bottom:105px; " data-record-type="218">  <div class="t005"> <div class="t-container"> <div class="t-row"> <div class="t-col t-col_6 "><div class="t005__text t-text t-text_md" field="text"><div style="line-height: 22px; text-align: center; font-size: 16px;" data-customstyle="yes"><span style="font-size: 16px;">Key phrase blends in with the rest of the copy, it looks messy</span></div></div></div> <div class="t-col t-col_6 "><div class="t005__text t-text t-text_md" field="text2"><div style="line-height: 22px; text-align: center;" data-customstyle="yes"><span style="font-size: 16px;">Key phrase stands out well with its large font size and sufficient spacing around the text</span></div></div></div> </div> </div> </div> </div> <div id="rec296234423" class="r t-rec t-rec_pt_105 t-rec_pb_30" style="padding-top:105px;padding-bottom:30px;background-color:#f5f5f5; " data-record-type="33" data-bg-color="#f5f5f5">  <div class="t017"> <div class="t-container t-align_left"> <div class="t-col t-col_8 t-prefix_2"> <div class="t017__title t-title t-title_xxs" field="title">9. Color background for a narrow text block</div> </div> </div> </div> </div> <div id="rec296234424" class="r t-rec t-rec_pt_0 t-rec_pb_0" style="padding-top:0px;padding-bottom:0px;background-color:#f5f5f5; " data-record-type="106" data-bg-color="#f5f5f5">  <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md ">If you want to highlight a small section of the page, such as information about the author, you just need to set sufficient padding around it to create the impression of space. Don’t place place this section on a colored background; it will look out of place.</div> </div> </div> </div> </div> <div id="rec296234425" class="r t-rec t-rec_pt_60 t-rec_pb_60" style="padding-top:60px;padding-bottom:60px;background-color:#f5f5f5; " data-record-type="170" data-bg-color="#f5f5f5">  <div class="t156"> <div class="t-container"> <div class="t-col t-col_12"> <div class="t156__wrapper"> <div class="t156__item" itemscope itemtype="http://schema.org/ImageObject"> <img itemprop="image" class="t-img" imgfield="gi_img__0" src="/upload/pages/18330364/tild6536-3766-4464-b432-636566326637__-__empty____20170919__111314.png" data-original="https://static.tildacdn.com/tild6536-3766-4464-b432-636566326637/__20170919__111314.png" data-zoom-target="0" data-zoomable="yes" data-img-zoom-url="https://static.tildacdn.com/tild6536-3766-4464-b432-636566326637/__20170919__111314.png" data-img-zoom-descr="" style="width:100%;" alt=""> <meta itemprop="image" content="https://static.tildacdn.com/tild6536-3766-4464-b432-636566326637/__20170919__111314.png"> </div> <div style="width:20px;min-width:20px;"></div> <div class="t156__item" itemscope itemtype="http://schema.org/ImageObject"> <img itemprop="image" class="t-img" imgfield="gi_img__1" src="/upload/pages/18330364/tild3931-3639-4261-b166-663839393132__-__empty____20170919__111400.png" data-original="https://static.tildacdn.com/tild3931-3639-4261-b166-663839393132/__20170919__111400.png" data-zoom-target="1" data-zoomable="yes" data-img-zoom-url="https://static.tildacdn.com/tild3931-3639-4261-b166-663839393132/__20170919__111400.png" data-img-zoom-descr="" style="width:100%;" alt=""> <meta itemprop="image" content="https://static.tildacdn.com/tild3931-3639-4261-b166-663839393132/__20170919__111400.png"> </div> </div> </div> </div> </div> </div> <div id="rec296234426" class="r t-rec t-rec_pt_0 t-rec_pb_0" style="padding-top:0px;padding-bottom:0px;background-color:#f5f5f5; " data-record-type="106" data-bg-color="#f5f5f5">  <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md "><div style="font-size: 16px;" data-customstyle="yes"><span style="font-size: 16px;">Don’t use color for the subheading. The use of a larger font and padding should be sufficient to make it stand out on the page</span></div></div> </div> </div> </div> </div> <div id="rec296234427" class="r t-rec t-rec_pt_60 t-rec_pb_75" style="padding-top:60px;padding-bottom:75px;background-color:#f5f5f5; " data-record-type="396" data-bg-color="#f5f5f5">  <style>#rec296234427 .t396__artboard {height:630px;background-color:#f5f5f5;}#rec296234427 .t396__filter {height:630px;}#rec296234427 .t396__carrier{height:630px;background-position:center center;background-attachment:scroll;background-size:cover;background-repeat:no-repeat;}@media screen and (max-width:1199px) {#rec296234427 .t396__artboard,#rec296234427 .t396__filter,#rec296234427 .t396__carrier {height:660px;}#rec296234427 .t396__filter {}#rec296234427 .t396__carrier {background-attachment:scroll;}}@media screen and (max-width:959px) {#rec296234427 .t396__artboard,#rec296234427 .t396__filter,#rec296234427 .t396__carrier {height:460px;}#rec296234427 .t396__filter {}#rec296234427 .t396__carrier {background-attachment:scroll;}}@media screen and (max-width:639px) {#rec296234427 .t396__artboard,#rec296234427 .t396__filter,#rec296234427 .t396__carrier {height:340px;}#rec296234427 .t396__filter {}#rec296234427 .t396__carrier {background-attachment:scroll;}}@media screen and (max-width:479px) {#rec296234427 .t396__artboard,#rec296234427 .t396__filter,#rec296234427 .t396__carrier {height:230px;}#rec296234427 .t396__artboard {background-color:#f5f5f5;}#rec296234427 .t396__filter {}#rec296234427 .t396__carrier {background-attachment:scroll;}}#rec296234427 .tn-elem[data-elem-id="1470210033144"]{z-index:4;top:calc(315px - 0px + 0px);left:calc(50% - 435px + -20px);width:870px;}#rec296234427 .tn-elem[data-elem-id="1470210033144"] .tn-atom{background-position:center center;border-color:transparent ;border-style:solid;}@media screen and (max-width:1199px) {#rec296234427 .tn-elem[data-elem-id="1470210033144"] {top:calc(315px - 0px + -0.5px);left:calc(50% - 435px + -20px);width:900px;}}@media screen and (max-width:959px) {#rec296234427 .tn-elem[data-elem-id="1470210033144"] {top:calc(315px - 0px + -5.5px);left:calc(50% - 435px + -1px);width:97%;}}@media screen and (max-width:639px) {#rec296234427 .tn-elem[data-elem-id="1470210033144"] {top:calc(315px - 0px + -4px);left:calc(50% - 435px + 0px);width:96px;}}@media screen and (max-width:479px) {#rec296234427 .tn-elem[data-elem-id="1470210033144"] {top:calc(315px - 0px + -7px);left:calc(50% - 435px + -2px);width:92px;}}</style> <div class='t396'> <div class="t396__artboard" data-artboard-recid="296234427" data-artboard-screens="320,480,640,960,1200" data-artboard-height="630" data-artboard-valign="center" data-artboard-height-res-320="230" data-artboard-height-res-480="340" data-artboard-height-res-640="460" data-artboard-height-res-960="660"> <div class="t396__carrier" data-artboard-recid="296234427"></div> <div class="t396__filter" data-artboard-recid="296234427"></div> <div class='t396__elem tn-elem tn-elem__2962344271470210033144' data-elem-id='1470210033144' data-elem-type='image' data-field-top-value="0" data-field-left-value="-20" data-field-width-value="870" data-field-axisy-value="center" data-field-axisx-value="center" data-field-container-value="window" data-field-topunits-value="" data-field-leftunits-value="" data-field-heightunits-value="" data-field-widthunits-value="" data-field-filewidth-value="6250" data-field-fileheight-value="4424" data-field-top-res-320-value="-7" data-field-left-res-320-value="-2" data-field-width-res-320-value="92" data-field-top-res-480-value="-4" data-field-left-res-480-value="0" data-field-width-res-480-value="96" data-field-top-res-640-value="-5.5" data-field-left-res-640-value="-1" data-field-width-res-640-value="97" data-field-widthunits-res-640-value="%" data-field-top-res-960-value="-0.5" data-field-left-res-960-value="-20" data-field-width-res-960-value="900"> <div class='tn-atom'> <img itemprop="image" class='tn-atom__img t-img' data-original='https://static.tildacdn.com/tild6530-3336-4361-b662-393731333534/noroot_5.png' alt='' imgfield='tn_img_1470210033144' /> </div> </div> </div> </div> <script>t_onReady(function() {t_onFuncLoad('t396_init',function() {t396_init('296234427');});});</script>  </div> <div id="rec296234428" class="r t-rec t-rec_pt_105 t-rec_pb_30" style="padding-top:105px;padding-bottom:30px; " data-record-type="33">  <div class="t017"> <div class="t-container t-align_left"> <div class="t-col t-col_8 t-prefix_2"> <div class="t017__title t-title t-title_xxs" field="title">10. Empty space between two full-screen images</div> </div> </div> </div> </div> <div id="rec296234429" class="r t-rec t-rec_pt_0 t-rec_pb_0" style="padding-top:0px;padding-bottom:0px; " data-record-type="106">  <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md ">When you are using several full-screen images in a sequence, avoid leaving a space between them. The border will still be visible, and there is no need to add an additional element. It just doesn’t add anything, it’s meaningless.</div> </div> </div> </div> </div> <div id="rec296234430" class="r t-rec t-rec_pt_60 t-rec_pb_0" style="padding-top:60px;padding-bottom:0px; " data-record-type="170">  <div class="t156"> <div class="t-container"> <div class="t-col t-col_12"> <div class="t156__wrapper"> <div class="t156__item" itemscope itemtype="http://schema.org/ImageObject"> <img itemprop="image" class="t-img" imgfield="gi_img__0" src="/upload/pages/18330364/tild3435-6238-4930-b066-303637636530__-__empty____20170919__111314.png" data-original="https://static.tildacdn.com/tild3435-6238-4930-b066-303637636530/__20170919__111314.png" data-zoom-target="0" data-zoomable="yes" data-img-zoom-url="https://static.tildacdn.com/tild3435-6238-4930-b066-303637636530/__20170919__111314.png" data-img-zoom-descr="White space between fullscreen images doesn't make sense and doesn't look good" style="width:100%;" alt=""> <meta itemprop="image" content="https://static.tildacdn.com/tild3435-6238-4930-b066-303637636530/__20170919__111314.png"> </div> <div style="width:20px;min-width:20px;"></div> <div class="t156__item" itemscope itemtype="http://schema.org/ImageObject"> <img itemprop="image" class="t-img" imgfield="gi_img__1" src="/upload/pages/18330364/tild3236-6334-4632-b632-663762646261__-__empty____20170919__111400.png" data-original="https://static.tildacdn.com/tild3236-6334-4632-b632-663762646261/__20170919__111400.png" data-zoom-target="1" data-zoomable="yes" data-img-zoom-url="https://static.tildacdn.com/tild3236-6334-4632-b632-663762646261/__20170919__111400.png" data-img-zoom-descr="There is a harmonious flow between images in this example" style="width:100%;" alt=""> <meta itemprop="image" content="https://static.tildacdn.com/tild3236-6334-4632-b632-663762646261/__20170919__111400.png"> </div> </div> </div> </div> </div> </div> <div id="rec296234431" class="r t-rec t-rec_pt_15 t-rec_pb_105" style="padding-top:15px;padding-bottom:105px; " data-record-type="218">  <div class="t005"> <div class="t-container"> <div class="t-row"> <div class="t-col t-col_6 "><div class="t005__text t-text t-text_md" field="text"><div style="line-height: 22px; text-align: center; font-size: 16px;" data-customstyle="yes"><span style="font-size: 16px;">White space between fullscreen images doesn’t make sense and doesn’t look good</span></div></div></div> <div class="t-col t-col_6 "><div class="t005__text t-text t-text_md" field="text2"><div style="line-height: 22px; text-align: center; font-size: 16px;" data-customstyle="yes"><span style="font-size: 16px;">There is a harmonious flow between images in this example</span></div></div></div> </div> </div> </div> </div> <div id="rec296234432" class="r t-rec t-rec_pt_105 t-rec_pb_30" style="padding-top:105px;padding-bottom:30px;background-color:#f5f5f5; " data-record-type="33" data-bg-color="#f5f5f5">  <div class="t017"> <div class="t-container t-align_left"> <div class="t-col t-col_8 t-prefix_2"> <div class="t017__title t-title t-title_xxs" field="title">11. Too many design accents being used</div> </div> </div> </div> </div> <div id="rec296234433" class="r t-rec t-rec_pt_0 t-rec_pb_0" style="padding-top:0px;padding-bottom:0px;background-color:#f5f5f5; " data-record-type="106" data-bg-color="#f5f5f5">  <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md ">Design accents (such as boldface here) work well when there are few of them. Put in too many, and this will get in the way of reading the page.</div> </div> </div> </div> </div> <div id="rec296234434" class="r t-rec t-rec_pt_60 t-rec_pb_45" style="padding-top:60px;padding-bottom:45px;background-color:#f5f5f5; " data-record-type="3" data-bg-color="#f5f5f5">  <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild6630-3538-4535-b934-336431386461/noroot_4.png"> <img itemprop="image" class="t-img t-width t107__width t-width_9" src="/upload/pages/18330364/tild6630-3538-4535-b934-336431386461__-__empty__noroot_4.png" data-original="https://static.tildacdn.com/tild6630-3538-4535-b934-336431386461/noroot_4.png" imgfield="img" alt=""> <div class="t-container_8"> <div class="t-col t-col_8 t107__title t-text" field="title" itemprop="name"><div style="font-size: 16px;" data-customstyle="yes"><span style="font-size: 16px;">Many words are marked in bold, so the text copy appears broken</span></div></div> </div> </div> </div> </div> <div id="rec296234435" class="r t-rec t-rec_pt_0 t-rec_pb_90" style="padding-top:0px;padding-bottom:90px;background-color:#f5f5f5; " data-record-type="3" data-bg-color="#f5f5f5">  <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild3831-3730-4836-a633-316530323365/noroot_3.png"> <img itemprop="image" class="t-img t-width t107__width t-width_9" src="/upload/pages/18330364/tild3831-3730-4836-a633-316530323365__-__empty__noroot_3.png" data-original="https://static.tildacdn.com/tild3831-3730-4836-a633-316530323365/noroot_3.png" imgfield="img" alt=""> <div class="t-container_8"> <div class="t-col t-col_8 t107__title t-text" field="title" itemprop="name"><div style="font-size: 16px;" data-customstyle="yes"><span style="font-size: 16px;">A few marked words grab attention and do not interfere with the rest of the text</span></div></div> </div> </div> </div> </div> <div id="rec296234436" class="r t-rec t-rec_pt_105 t-rec_pb_30" style="padding-top:105px;padding-bottom:30px; " data-record-type="33">  <div class="t017"> <div class="t-container t-align_left"> <div class="t-col t-col_8 t-prefix_2"> <div class="t017__title t-title t-title_xxs" field="title">12. Too many typography styles</div> </div> </div> </div> </div> <div id="rec296234437" class="r t-rec t-rec_pt_0 t-rec_pb_0" style="padding-top:0px;padding-bottom:0px; " data-record-type="106">  <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md ">Design should not interfere with readability. The fewer typography styles there are, the better important elements are visible. It’s enough to emphasize headings and subheadings and use contrast for key phrases.</div> </div> </div> </div> </div> <div id="rec296234438" class="r t-rec t-rec_pt_60 t-rec_pb_0" style="padding-top:60px;padding-bottom:0px; " data-record-type="170">  <div class="t156"> <div class="t-container"> <div class="t-col t-col_12"> <div class="t156__wrapper"> <div class="t156__item" itemscope itemtype="http://schema.org/ImageObject"> <img itemprop="image" class="t-img" imgfield="gi_img__0" src="/upload/pages/18330364/tild6231-3337-4233-b238-656363376437__-__empty____20170919__111314.png" data-original="https://static.tildacdn.com/tild6231-3337-4233-b238-656363376437/__20170919__111314.png" data-zoom-target="0" data-zoomable="yes" data-img-zoom-url="https://static.tildacdn.com/tild6231-3337-4233-b238-656363376437/__20170919__111314.png" data-img-zoom-descr="There are too many typographic devices in this text; they distract the reader" style="width:100%;" alt=""> <meta itemprop="image" content="https://static.tildacdn.com/tild6231-3337-4233-b238-656363376437/__20170919__111314.png"> </div> <div style="width:20px;min-width:20px;"></div> <div class="t156__item" itemscope itemtype="http://schema.org/ImageObject"> <img itemprop="image" class="t-img" imgfield="gi_img__1" src="/upload/pages/18330364/tild6362-3465-4136-a665-313765616238__-__empty____20170919__111400.png" data-original="https://static.tildacdn.com/tild6362-3465-4136-a665-313765616238/__20170919__111400.png" data-zoom-target="1" data-zoomable="yes" data-img-zoom-url="https://static.tildacdn.com/tild6362-3465-4136-a665-313765616238/__20170919__111400.png" data-img-zoom-descr="Very few typographic styles, clear accents and adherence to text hierarchy" style="width:100%;" alt=""> <meta itemprop="image" content="https://static.tildacdn.com/tild6362-3465-4136-a665-313765616238/__20170919__111400.png"> </div> </div> </div> </div> </div> </div> <div id="rec296234439" class="r t-rec t-rec_pt_15 t-rec_pb_105" style="padding-top:15px;padding-bottom:105px; " data-record-type="218">  <div class="t005"> <div class="t-container"> <div class="t-row"> <div class="t-col t-col_6 "><div class="t005__text t-text t-text_md" field="text"><div style="line-height: 22px; text-align: center; font-size: 16px;" data-customstyle="yes"><span style="font-size: 16px;">There are too many typographic devices in this text; they distract the reader</span></div></div></div> <div class="t-col t-col_6 "><div class="t005__text t-text t-text_md" field="text2"><div style="line-height: 22px; text-align: center; font-size: 16px;" data-customstyle="yes"><span style="font-size: 16px;">Very few typographic styles, clear accents and adherence to text hierarchy</span></div></div></div> </div> </div> </div> </div> <div id="rec296234440" class="r t-rec t-rec_pt_105 t-rec_pb_30" style="padding-top:105px;padding-bottom:30px;background-color:#f5f5f5; " data-record-type="33" data-bg-color="#f5f5f5">  <div class="t017"> <div class="t-container t-align_left"> <div class="t-col t-col_8 t-prefix_2"> <div class="t017__title t-title t-title_xxs" field="title">13. Centering text in a long article</div> </div> </div> </div> </div> <div id="rec296234441" class="r t-rec t-rec_pt_0 t-rec_pb_0" style="padding-top:0px;padding-bottom:0px;background-color:#f5f5f5; " data-record-type="106" data-bg-color="#f5f5f5">  <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md ">Centering is usually applied to headings and quotes to distinguish them from the rest of the text. A center-aligned long piece of text is difficult to read.</div> </div> </div> </div> </div> <div id="rec296234442" class="r t-rec t-rec_pt_60 t-rec_pb_0" style="padding-top:60px;padding-bottom:0px;background-color:#f5f5f5; " data-record-type="170" data-bg-color="#f5f5f5">  <div class="t156"> <div class="t-container"> <div class="t-col t-col_12"> <div class="t156__wrapper"> <div class="t156__item" itemscope itemtype="http://schema.org/ImageObject"> <img itemprop="image" class="t-img" imgfield="gi_img__0" src="/upload/pages/18330364/tild3436-3164-4761-a162-346336326366__-__empty__noroot.png" data-original="https://static.tildacdn.com/tild3436-3164-4761-a162-346336326366/noroot.png" data-zoom-target="0" data-zoomable="yes" data-img-zoom-url="https://static.tildacdn.com/tild3436-3164-4761-a162-346336326366/noroot.png" data-img-zoom-descr="Centered text looks messy, it's hard to read" style="width:100%;" alt=""> <meta itemprop="image" content="https://static.tildacdn.com/tild3436-3164-4761-a162-346336326366/noroot.png"> </div> <div style="width:20px;min-width:20px;"></div> <div class="t156__item" itemscope itemtype="http://schema.org/ImageObject"> <img itemprop="image" class="t-img" imgfield="gi_img__1" src="/upload/pages/18330364/tild6333-6465-4166-b433-303831396261__-__empty__noroot.png" data-original="https://static.tildacdn.com/tild6333-6465-4166-b433-303831396261/noroot.png" data-zoom-target="1" data-zoomable="yes" data-img-zoom-url="https://static.tildacdn.com/tild6333-6465-4166-b433-303831396261/noroot.png" data-img-zoom-descr="Left-aligned text is easy on the eye" style="width:100%;" alt=""> <meta itemprop="image" content="https://static.tildacdn.com/tild6333-6465-4166-b433-303831396261/noroot.png"> </div> </div> </div> </div> </div> </div> <div id="rec296234443" class="r t-rec t-rec_pt_15 t-rec_pb_105" style="padding-top:15px;padding-bottom:105px;background-color:#f5f5f5; " data-record-type="218" data-bg-color="#f5f5f5">  <div class="t005"> <div class="t-container"> <div class="t-row"> <div class="t-col t-col_6 "><div class="t005__text t-text t-text_md" field="text"><div style="line-height: 22px; text-align: center; font-size: 16px;" data-customstyle="yes"><span style="font-size: 16px;">Centered text looks messy, it’s hard to read</span></div></div></div> <div class="t-col t-col_6 "><div class="t005__text t-text t-text_md" field="text2"><div style="line-height: 22px; text-align: center; font-size: 16px;" data-customstyle="yes"><span style="font-size: 16px;">Left-aligned text is easy on the eye</span></div></div></div> </div> </div> </div> </div> <div id="rec296234444" class="r t-rec t-rec_pt_105 t-rec_pb_30" style="padding-top:105px;padding-bottom:30px; " data-record-type="33">  <div class="t017"> <div class="t-container t-align_left"> <div class="t-col t-col_8 t-prefix_2"> <div class="t017__title t-title t-title_xxs" field="title">14. Heading is too close to the image</div> </div> </div> </div> </div> <div id="rec296234445" class="r t-rec t-rec_pt_0 t-rec_pb_0" style="padding-top:0px;padding-bottom:0px; " data-record-type="106">  <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md ">A heading is an individual design element. It should not be placed too close to an image that follows. For a winning combination, set padding at no less than 60 pixels, and add a subheading: it will unfold the page’s contents and place the right emphasis where it needs to be.</div> </div> </div> </div> </div> <div id="rec296234446" class="r t-rec t-rec_pt_60 t-rec_pb_0" style="padding-top:60px;padding-bottom:0px; " data-record-type="170">  <div class="t156"> <div class="t-container"> <div class="t-col t-col_12"> <div class="t156__wrapper"> <div class="t156__item" itemscope itemtype="http://schema.org/ImageObject"> <img itemprop="image" class="t-img" imgfield="gi_img__0" src="/upload/pages/18330364/tild3130-3863-4835-b861-393736393364__-__empty__noroot.png" data-original="https://static.tildacdn.com/tild3130-3863-4835-b861-393736393364/noroot.png" data-zoom-target="0" data-zoomable="yes" data-img-zoom-url="https://static.tildacdn.com/tild3130-3863-4835-b861-393736393364/noroot.png" data-img-zoom-descr="The heading is too close to the image, there is no "air" on this page" style="width:100%;" alt=""> <meta itemprop="image" content="https://static.tildacdn.com/tild3130-3863-4835-b861-393736393364/noroot.png"> </div> <div style="width:20px;min-width:20px;"></div> <div class="t156__item" itemscope itemtype="http://schema.org/ImageObject"> <img itemprop="image" class="t-img" imgfield="gi_img__1" src="/upload/pages/18330364/tild3139-6661-4466-b266-623637356566__-__empty__noroot.png" data-original="https://static.tildacdn.com/tild3139-6661-4466-b266-623637356566/noroot.png" data-zoom-target="1" data-zoomable="yes" data-img-zoom-url="https://static.tildacdn.com/tild3139-6661-4466-b266-623637356566/noroot.png" data-img-zoom-descr="The heading is separated from the image by a subheading and refers to the entire section, not just the image" style="width:100%;" alt=""> <meta itemprop="image" content="https://static.tildacdn.com/tild3139-6661-4466-b266-623637356566/noroot.png"> </div> </div> </div> </div> </div> </div> <div id="rec296234447" class="r t-rec t-rec_pt_15 t-rec_pb_105" style="padding-top:15px;padding-bottom:105px; " data-record-type="218">  <div class="t005"> <div class="t-container"> <div class="t-row"> <div class="t-col t-col_6 "><div class="t005__text t-text t-text_md" field="text"><div style="line-height: 22px; text-align: center; font-size: 16px;" data-customstyle="yes"><span style="font-size: 16px;">The heading is too close to the image, there is no "air" on this page</span></div></div></div> <div class="t-col t-col_6 "><div class="t005__text t-text t-text_md" field="text2"><div style="line-height: 22px; text-align: center; font-size: 16px;" data-customstyle="yes"><span style="font-size: 16px;">The heading is separated from the image by a subheading and refers to the entire section, not just the image</span></div></div></div> </div> </div> </div> </div> <div id="rec296234448" class="r t-rec t-rec_pt_105 t-rec_pb_30" style="padding-top:105px;padding-bottom:30px;background-color:#f5f5f5; " data-record-type="33" data-bg-color="#f5f5f5">  <div class="t017"> <div class="t-container t-align_left"> <div class="t-col t-col_8 t-prefix_2"> <div class="t017__title t-title t-title_xxs" field="title">15. Unnecessary use of italics</div> </div> </div> </div> </div> <div id="rec296234449" class="r t-rec t-rec_pt_0 t-rec_pb_0" style="padding-top:0px;padding-bottom:0px;background-color:#f5f5f5; " data-record-type="106" data-bg-color="#f5f5f5">  <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md ">Italics are used to emphasize a word or short phrase in the text. It is not as immediately noticeable as the bold type, but it allows for emphasis where needed.<br /><br /><span style="font-family: futura-pt;">Don’t use italics for your body copy and headings. And if sans-serif fonts are used in the text copy, avoid italics altogether.</span></div> </div> </div> </div> </div> <div id="rec296234450" class="r t-rec t-rec_pt_60 t-rec_pb_45" style="padding-top:60px;padding-bottom:45px;background-color:#f5f5f5; " data-record-type="3" data-bg-color="#f5f5f5">  <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild3462-3239-4662-b434-633263623635/photo.png"> <img itemprop="image" class="t-img t-width t107__width t-width_9" src="/upload/pages/18330364/tild3462-3239-4662-b434-633263623635__-__empty__photo.png" data-original="https://static.tildacdn.com/tild3462-3239-4662-b434-633263623635/photo.png" imgfield="img" alt=""> <div class="t-container_8"> <div class="t-col t-col_8 t107__title t-text" field="title" itemprop="name"><div style="font-size: 16px;" data-customstyle="yes"><span style="font-size: 16px;">The phrase stands out due to the font size and spacing, so italics are not really needed here</span></div></div> </div> </div> </div> </div> <div id="rec296234451" class="r t-rec t-rec_pt_0 t-rec_pb_90" style="padding-top:0px;padding-bottom:90px;background-color:#f5f5f5; " data-record-type="3" data-bg-color="#f5f5f5">  <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild6365-3238-4338-a537-366232383932/photo.png"> <img itemprop="image" class="t-img t-width t107__width t-width_9" src="/upload/pages/18330364/tild6365-3238-4338-a537-366232383932__-__empty__photo.png" data-original="https://static.tildacdn.com/tild6365-3238-4338-a537-366232383932/photo.png" imgfield="img" alt=""> <div class="t-container_8"> <div class="t-col t-col_8 t107__title t-text" field="title" itemprop="name"><div style="font-size: 16px;" data-customstyle="yes"><span style="font-size: 16px;">Italics are in the right place, adding the right amount of emphasis</span></div></div> </div> </div> </div> </div> <div id="rec296234452" class="r t-rec t-rec_pt_105 t-rec_pb_30" style="padding-top:105px;padding-bottom:30px; " data-record-type="33">  <div class="t017"> <div class="t-container t-align_left"> <div class="t-col t-col_8 t-prefix_2"> <div class="t017__title t-title t-title_xxs" field="title">16. Blocks are shifted relative to the center and each other</div> </div> </div> </div> </div> <div id="rec296234453" class="r t-rec t-rec_pt_0 t-rec_pb_0" style="padding-top:0px;padding-bottom:0px; " data-record-type="106">  <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md ">You can spot this annoying mistake yourself if you take a small break after editing your page (changing font size, alignments, or spacing) and take a fresh look at the result.</div> </div> </div> </div> </div> <div id="rec296234454" class="r t-rec t-rec_pt_60 t-rec_pb_0" style="padding-top:60px;padding-bottom:0px; " data-record-type="170">  <div class="t156"> <div class="t-container"> <div class="t-col t-col_12"> <div class="t156__wrapper"> <div class="t156__item" itemscope itemtype="http://schema.org/ImageObject"> <img itemprop="image" class="t-img" imgfield="gi_img__0" src="/upload/pages/18330364/tild3861-6565-4264-a565-353831623536__-__empty____20170919__111314.png" data-original="https://static.tildacdn.com/tild3861-6565-4264-a565-353831623536/__20170919__111314.png" data-zoom-target="0" data-zoomable="yes" data-img-zoom-url="https://static.tildacdn.com/tild3861-6565-4264-a565-353831623536/__20170919__111314.png" data-img-zoom-descr="In this example, the heading is shifted to the left, and the text is shifted to the right" style="width:100%;" alt=""> <meta itemprop="image" content="https://static.tildacdn.com/tild3861-6565-4264-a565-353831623536/__20170919__111314.png"> </div> <div style="width:20px;min-width:20px;"></div> <div class="t156__item" itemscope itemtype="http://schema.org/ImageObject"> <img itemprop="image" class="t-img" imgfield="gi_img__1" src="/upload/pages/18330364/tild3232-3930-4632-a131-313865623634__-__empty____20170919__111400.png" data-original="https://static.tildacdn.com/tild3232-3930-4632-a131-313865623634/__20170919__111400.png" data-zoom-target="1" data-zoomable="yes" data-img-zoom-url="https://static.tildacdn.com/tild3232-3930-4632-a131-313865623634/__20170919__111400.png" data-img-zoom-descr="All text elements are in harmony with each other" style="width:100%;" alt=""> <meta itemprop="image" content="https://static.tildacdn.com/tild3232-3930-4632-a131-313865623634/__20170919__111400.png"> </div> </div> </div> </div> </div> </div> <div id="rec296234455" class="r t-rec t-rec_pt_15 t-rec_pb_0" style="padding-top:15px;padding-bottom:0px; " data-record-type="218">  <div class="t005"> <div class="t-container"> <div class="t-row"> <div class="t-col t-col_6 "><div class="t005__text t-text t-text_md" field="text"><div style="line-height: 22px; text-align: center; font-size: 16px;" data-customstyle="yes"><span style="font-size: 16px;">In this example, the heading is shifted to the left, and the text is shifted to the right</span></div></div></div> <div class="t-col t-col_6 "><div class="t005__text t-text t-text_md" field="text2"><div style="font-size: 16px; line-height: 22px; text-align: center;" data-customstyle="yes"><span style="font-size: 16px;">All text elements are in harmony with each other</span></div></div></div> </div> </div> </div> </div> <div id="rec296234456" class="r t-rec t-rec_pt_60 t-rec_pb_30" style="padding-top:60px;padding-bottom:30px; " data-record-type="219">  <div class="t191"> <div class="t-align_center"> <hr class="t-divider t191__line t-width t-width_2" style="background-color:#000000;opacity:0.2;"> </div> </div> </div> <div id="rec296234457" class="r t-rec t-rec_pt_60 t-rec_pb_0" style="padding-top:60px;padding-bottom:0px; " data-animationappear="off" data-record-type="106">  <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md "><div style="text-align: center;" data-customstyle="yes"><span style="font-size: 14px;">If you enjoyed this article, please share it with your friends! Thanks ✌️</span></div></div> </div> </div> </div> </div> <div id="rec296234458" class="r t-rec t-rec_pt_45 t-rec_pb_120" style="padding-top:45px;padding-bottom:120px; " data-record-type="151"> <div class="t-container_100 t014" style=""> <div style="position: relative; right: 50%; float: right;"> <div style="position: relative; z-index: 1; right: -50%;" class="t014__circle-xxl t014__transp-black"> <script type="text/javascript" src="https://static.tildacdn.com/js/ya-share.js" charset="utf-8" async="async"></script> <div class="ya-share2" data-access-token:facebook="" data-yashareL10n="en" data-services="facebook,twitter" data-counter=""></div> </div> </div> </div> </div> <div id="rec302327169" class="r t-rec t-rec_pt_105 t-rec_pt-res-480_60 t-rec_pb_75 t-rec_pb-res-480_45" style="padding-top:105px;padding-bottom:75px;background-color:#f5f5f5; " data-animationappear="off" data-record-type="33" data-bg-color="#f5f5f5">  <div class="t017"> <div class="t-container t-align_center"> <div class="t-col t-col_10 t-prefix_1"> <div class="t017__title t-title t-title_xxs" field="title">See also:</div> </div> </div> </div> </div> <div id="rec302327170" class="r t-rec t-rec_pt_0 t-rec_pb_120" style="padding-top:0px;padding-bottom:120px;background-color:#f5f5f5; " data-animationappear="off" data-record-type="404" data-bg-color="#f5f5f5">   <div class="t404" data-show-count="8"> <div class="t-container"> <div class="t404__col t-col t-col_3 t-align_left "> <a class="t404__link" href="/en/articles-cover-for-website"> <div class="t404__imgbox"> <div class="t404__img t-bgimg" data-original="https://static.tildacdn.com/tild6235-6235-4634-a535-303466623139/Tilda_Education-1.svg" style="background-image: url('https://static.tildacdn.com/tild6235-6235-4634-a535-303466623139/Tilda_Education-1.svg');"></div> <div class="t404__separator"></div> </div> <div class="t404__textwrapper "> <div class="t404__title t-heading t-heading_xs">How To Create a Cover for a Website</div> </div> </a> </div> <div class="t404__col t-col t-col_3 t-align_left "> <a class="t404__link" href="/en/articles-zero-block"> <div class="t404__imgbox"> <div class="t404__img t-bgimg" data-original="https://static.tildacdn.com/tild3231-3261-4436-b236-623637393237/Group_1518.png" style="background-image: url('/upload/pages/18330364/tild3231-3261-4436-b236-623637393237__-__resizeb__20x__group_1518.png');"></div> <div class="t404__separator"></div> </div> <div class="t404__textwrapper "> <div class="t404__title t-heading t-heading_xs">A Complete Guide To Zero Block</div> </div> </a> </div> <div class="t404__col t-col t-col_3 t-align_left "> <a class="t404__link" href="/en/articles-navigation"> <div class="t404__imgbox"> <div class="t404__img t-bgimg" data-original="https://static.tildacdn.com/tild6261-6635-4335-b132-353731313137/Tilda_Education.svg" style="background-image: url('https://static.tildacdn.com/tild6261-6635-4335-b132-353731313137/Tilda_Education.svg');"></div> <div class="t404__separator"></div> </div> <div class="t404__textwrapper "> <div class="t404__title t-heading t-heading_xs">How To Improve Your Website Navigation</div> </div> </a> </div> <div class="t404__col t-col t-col_3 t-align_left "> <a class="t404__link" href="/en/articles-10-rules-of-storytelling"> <div class="t404__imgbox"> <div class="t404__img t-bgimg" data-original="https://static.tildacdn.com/tild3837-3039-4033-b135-393964353935/Group_1462.png" style="background-image: url('/upload/pages/18330364/tild3837-3039-4033-b135-393964353935__-__resizeb__20x__group_1462.png');"></div> <div class="t404__separator"></div> </div> <div class="t404__textwrapper "> <div class="t404__title t-heading t-heading_xs">10 Rules Of Digital Storytelling</div> </div> </a> </div> </div><div class="t-container"> <div class="t404__col t-col t-col_3 t-align_left "> <a class="t404__link" href="/en/how-to-build-website"> <div class="t404__imgbox"> <div class="t404__img t-bgimg" data-original="https://static.tildacdn.com/tild6437-3037-4639-a463-613432666534/Frame_6.png" style="background-image: url('/upload/pages/18330364/tild6437-3037-4639-a463-613432666534__-__resizeb__20x__frame_6.png');"></div> <div class="t404__separator"></div> </div> <div class="t404__textwrapper "> <div class="t404__title t-heading t-heading_xs">How To Make a Website. Step-by-Step Guide</div> </div> </a> </div> <div class="t404__col t-col t-col_3 t-align_left "> <a class="t404__link" href="/en/articles-how-to-write-text-for-landing"> <div class="t404__imgbox"> <div class="t404__img t-bgimg" data-original="https://static.tildacdn.com/tild6236-3036-4366-a633-376439623733/badge.jpg" style="background-image: url('/upload/pages/18330364/tild6236-3036-4366-a633-376439623733__-__resizeb__20x__badge.jpg');"></div> <div class="t404__separator"></div> </div> <div class="t404__textwrapper "> <div class="t404__title t-heading t-heading_xs">How To Write Landing Page Copy That Converts</div> </div> </a> </div> <div class="t404__col t-col t-col_3 t-align_left "> <a class="t404__link" href="/en/articles-jobs-to-be-done"> <div class="t404__imgbox"> <div class="t404__img t-bgimg" data-original="https://static.tildacdn.com/tild3939-3663-4364-b130-373065343539/Frame_2.png" style="background-image: url('/upload/pages/18330364/tild3939-3663-4364-b130-373065343539__-__resizeb__20x__frame_2.png');"></div> <div class="t404__separator"></div> </div> <div class="t404__textwrapper "> <div class="t404__title t-heading t-heading_xs">Jobs To Be Done: How To Attract New Customers</div> </div> </a> </div> <div class="t404__col t-col t-col_3 t-align_left "> <a class="t404__link" href="/en/articles-black-friday"> <div class="t404__imgbox"> <div class="t404__img t-bgimg" data-original="https://static.tildacdn.com/tild3366-3231-4532-b062-356536663532/Group_1930.png" style="background-image: url('/upload/pages/18330364/tild3366-3231-4532-b062-356536663532__-__resizeb__20x__group_1930.png');"></div> <div class="t404__separator"></div> </div> <div class="t404__textwrapper "> <div class="t404__title t-heading t-heading_xs">17 Tips To Prepare Your Online Store For Holiday Sales 2024</div> </div> </a> </div> </div><div class="t-container"> </div> </div> <script>t_onReady(function() {var rec=document.getElementById('rec302327170');if(rec) {t_onFuncLoad('t404_unifyHeights',function() {t404_unifyHeights('302327170');window.addEventListener('resize',t_throttle(function() {t404_unifyHeights('302327170');},200));});if(typeof jQuery!=='undefined') {$('.t404').on('displayChanged',function() {t404_unifyHeights('302327170');});} else if(rec.querySelector('.t404')) {rec.querySelector('.t404').addEventListener('displayChanged',function() {t_onFuncLoad('t404_unifyHeights',function() {t404_unifyHeights('302327170');});});} window.onload=function() {t404_unifyHeights('302327170');};}});</script> <script>t_onReady(function() {t_onFuncLoad('t404_showMore',function() {t404_showMore('302327170');});});</script> <style> #rec302327170 .t404__title{font-size:20px;font-weight:600;}</style> </div> <div id="rec623863484" class="r t-rec" style=" " data-animationappear="off" data-record-type="694">  <style>#rec623863484 .t694__table{height:28vw;}@media screen and (max-width:768px){#rec623863484 .t694__table{height:56vw;}}</style> <div class="t694" data-tile-ratio="0.56"> <div class="t694__container t-card__container"> <div class="t694__row"> <div class="t694__col t-cell t-cell_50 t-align_center "> <div class="t694__table"> <div class="t694__cell t-card__col t-align_center t-valign_middle"> <div class="t694__bg t694__animation_fast t-bgimg" data-original="https://static.tildacdn.com/tild3735-3063-4334-b134-663536653638/Course_1__Cover_1.png" bgimgfield="li_img__1513695601022" style="background-image:url('/upload/pages/18330364/tild3735-3063-4334-b134-663536653638__-__resizeb__20x__course_1__cover_1.png');" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild3735-3063-4334-b134-663536653638/Course_1__Cover_1.png"> </div> <div class="t694__overlay t694__animation_fast" style="background-image: -moz-linear-gradient(top, rgba(0,0,0,0.7), rgba(0,0,0,0.7)); background-image: -webkit-linear-gradient(top, rgba(0,0,0,0.7), rgba(0,0,0,0.7)); background-image: -o-linear-gradient(top, rgba(0,0,0,0.7), rgba(0,0,0,0.7)); background-image: -ms-linear-gradient(top, rgba(0,0,0,0.7), rgba(0,0,0,0.7));"></div> <div class="t694__textwrapper t694__animation_fast t694__textwrapper_animated"> <div class="t694__textwrapper__content"> <div class="t694__inner-wrapper t694__inner-wrapper_animated-btn"> <div class="t-card__title t-title t-title_xxs" field="li_title__1513695601022"> <a href="https://tilda.education/en/landing-page-course" class="t-card__link" id="cardtitle1_623863484" aria-labelledby="cardtitle1_623863484 cardbtn1_623863484"> How to Build a Landing Page </a> </div> <div class="t-card__descr t-descr t-descr_xs" field="li_text__1513695601022"> Free coursebook on how to design, set up, and run <br />high-conversion landing pages </div> <style> #rec623863484 .t-card__title{font-weight:500;}</style> </div> <div class="t694__button-container t694__button_show-hover"> <div class="t-card__btn-wrapper"> <div class="t-card__btn t-btn t-btn_sm" id="cardbtn1_623863484" style="color:#000000;background-color:#ffffff;border-radius:30px; -moz-border-radius:30px; -webkit-border-radius:30px;" data-field="li_buttontitle__1513695601022" aria-hidden="true" data-buttonfieldset="li_button" data-lid="1513695601022"> Learn more </div> </div> </div> </div> </div> </div> </div> </div> <div class="t694__col t-cell t-cell_50 t-align_center "> <div class="t694__table"> <div class="t694__cell t-card__col t-align_center t-valign_middle"> <div class="t694__bg t694__animation_fast t-bgimg" data-original="https://static.tildacdn.com/tild6238-3530-4633-b836-623638366365/template_illustratio.png" bgimgfield="li_img__1495528759247" style="background-image:url('/upload/pages/18330364/tild6238-3530-4633-b836-623638366365__-__resizeb__20x__template_illustratio.png');" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild6238-3530-4633-b836-623638366365/template_illustratio.png"> </div> <div class="t694__overlay t694__animation_fast" style="background-image: -moz-linear-gradient(top, rgba(0,0,0,0.7), rgba(0,0,0,0.7)); background-image: -webkit-linear-gradient(top, rgba(0,0,0,0.7), rgba(0,0,0,0.7)); background-image: -o-linear-gradient(top, rgba(0,0,0,0.7), rgba(0,0,0,0.7)); background-image: -ms-linear-gradient(top, rgba(0,0,0,0.7), rgba(0,0,0,0.7));"></div> <div class="t694__textwrapper t694__animation_fast t694__textwrapper_animated"> <div class="t694__textwrapper__content"> <div class="t694__inner-wrapper t694__inner-wrapper_animated-btn"> <div class="t-card__title t-title t-title_xxs" field="li_title__1495528759247"> <a href="https://tilda.education/en/web-animation-course" class="t-card__link" id="cardtitle2_623863484" aria-labelledby="cardtitle2_623863484 cardbtn2_623863484"> Web Animation </a> </div> <div class="t-card__descr t-descr t-descr_xs" field="li_text__1495528759247"> <p style="text-align: center;">Free practical guide to web animation with examples, techniques, </p><p style="text-align: center;">and tips on how to use them</p> </div> <style> #rec623863484 .t-card__title{font-weight:500;}</style> </div> <div class="t694__button-container t694__button_show-hover"> <div class="t-card__btn-wrapper"> <div class="t-card__btn t-btn t-btn_sm" id="cardbtn2_623863484" style="color:#000000;background-color:#ffffff;border-radius:30px; -moz-border-radius:30px; -webkit-border-radius:30px;" data-field="li_buttontitle__1495528759247" aria-hidden="true" data-buttonfieldset="li_button" data-lid="1495528759247"> Explore </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> <script>t_onReady(function() {t_onFuncLoad('t694_init',function() {t694_init('623863484');});});</script> </div> </div> <div style="clear: both;"></div> <div class="te-popup te-popup_opened" id="popup_login" > <a class="te-popup__overlay js-te-popup-close" href="#"></a> <a class="te-popup__close js-te-popup-close" href="#"> <img src="/images/close.svg"> </a> <div class="te-popup__wrap"> <div class="te-popup-window"> <div class="te-popup__header">Tilda education</div> <div class="te-popup__info"> <div class="te-popup__description">Log in to continue reading </div> <ul class="te-popup__buttons"> <li style="cursor: pointer"> <span class="te-popup__btn te-popup__btn-tilda js-socnet-login" data-provider="tilda"> <div class="te-popup__btn__icon"><img src="/images/tilda_logo_white.svg"></div> <span>Continue with Tilda</span> </span> </li> </ul> <div style="margin-bottom: 20px;"> <span id="another_login_methods" style="color: #222222; border-bottom: solid 1px #fa633f; cursor: pointer; opacity: 50%;">Other login methods</span> </div> <ul class="te-popup__buttons alternative" style="display: none"> <li> <a class="te-popup__btn te-popup__btn-google js-socnet-login" data-provider="google" href="/login/"> <div class="te-popup__btn__icon"><img src="/images/google.svg"></div> <span>Continue with Google</span> </a> </li> </ul> </div> <div class="te-popup__hint"> <span>By logging in, you agree to our </span> <a href="/en/terms" target="blank">Terms of Service</a> </div> </div> </div> </div> <script type="text/javascript"> $(document).ready(function() { $("#another_login_methods").click(function() { let block = $('.te-popup__buttons.alternative'); let display = block.css('display'); if (display === 'block') { block.css('display', 'none'); } else { block.css('display', 'block'); } }); $(".js-socnet-login").click(function(){ var provider = $(this).data('provider'); var $popup = $('#popup_login'); var target = $popup.data('target') || ''; console.log(provider); if (provider === 'tilda') { let bu = window.location.href; console.log(bu); window.location.replace('https://tilda.cc/identity/goeducation/?bu=' + bu); return true; } $.post('/login/submit/' + provider + '.php', {'action':'geturl', 'backurl': window.location.href+target}, function(json){ if (json.error && json.error > '') { alert('When authorizing via social network, an error occurred ['+ json.error + ']. Try again.'); } else if ( json.redirect && json.redirect > '' ) { window.location.href = json.redirect; } else if (json.activation == 1 && json.userid > 0) { window.location.href = '/identity/activationemail/?activation=1'; } else if(json.userid > 0) { window.location.href = '/en/'; } },'json' ); return false; }); }); </script> <script type="text/javascript" src="/static/project3379564/js/tilda-polyfill-1.0.min.js?t=1732386185"></script><script type="text/javascript" src="/static/project3379564/js/tilda-blocks-page16067110.min.js?t=1732386185"></script><script type="text/javascript" src="/static/project3379564/js/lazyload-1.3.min.export.js?t=1732386185"></script><script type="text/javascript" src="/static/project3379564/js/tilda-menu-1.0.min.js?t=1732386185"></script><script type="text/javascript" src="/static/project3379564/js/tilda-skiplink-1.0.min.js?t=1732386185"></script><script type="text/javascript" src="/static/project3379564/js/tilda-events-1.0.min.js?t=1732386185"></script><script type="text/javascript" src="/static/project3379564/js/tilda-education-langs-dropdown.min.js?t=1732386185"></script><script type="text/javascript" src="/static/project3379564/js/tilda-stat-1.0.min.js?t=1732386185"></script><script type="text/javascript" src="/static/project3379564/js/tilda-blocks-page18330364.min.js?t=1732386185"></script><script type="text/javascript" src="/static/project3379564/js/tilda-zero-1.1.min.js?t=1732386185"></script><script type="text/javascript" src="/static/project3379564/js/tilda-cover-1.0.min.js?t=1732386185"></script><script type="text/javascript" src="/static/project3379564/js/tilda-slds-1.4.min.js?t=1732386185"></script><script type="text/javascript" src="/static/project3379564/js/hammer.min.js?t=1732386185"></script><script type="text/javascript" src="/static/project3379564/js/tilda-cards-1.0.min.js?t=1732386185"></script><script type="text/javascript" src="/static/project3379564/js/tilda-zoom-2.0.min.js?t=1732386185"></script><script type="text/javascript" src="/static/project3379564/js/tilda-zero-scale-1.0.min.js?t=1732386185"></script><script type="text/javascript" src="/static/project3379564/js/ya-share.js?t=1732386185"></script> <script type="text/javascript"> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-64185315-1', 'auto'); ga('send', 'pageview'); (function(d) { var config = { kitId: 'gdw1mfn', scriptTimeout: 3000 }, h=d.documentElement,t=setTimeout(function(){h.className=h.className.replace(/\bwf-loading\b/g,"")+" wf-inactive";},config.scriptTimeout),tk=d.createElement("script"),f=false,s=d.getElementsByTagName("script")[0],a;h.className+=" wf-loading";tk.src='//use.typekit.net/'+config.kitId+'.js';tk.async=true;tk.onload=tk.onreadystatechange=function(){a=this.readyState;if(f||a&&a!="complete"&&a!="loaded")return;f=true;clearTimeout(t);try{Typekit.load(config)}catch(e){}};s.parentNode.insertBefore(tk,s) })(document); </script>  <script type="text/javascript"> (function (d, w, c) { (w[c] = w[c] || []).push(function() { try { w.yaCounter41832319 = new Ya.Metrika({ id:41832319, clickmap:true, trackLinks:true, accurateTrackBounce:true, webvisor:true }); } catch(e) { } }); var n = d.getElementsByTagName("script")[0], s = d.createElement("script"), f = function () { n.parentNode.insertBefore(s, n); }; s.type = "text/javascript"; s.async = true; s.src = "https://mc.yandex.ru/metrika/watch.js"; if (w.opera == "[object Opera]") { d.addEventListener("DOMContentLoaded", f, false); } else { f(); } })(document, window, "yandex_metrika_callbacks"); </script> <noscript><div><img src="https://mc.yandex.ru/watch/41832319" style="position:absolute; left:-9999px;" alt="" /></div></noscript>  <script> setTimeout(function(){ !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.agent='pltilda'; 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', '503932973940614'); fbq('track', 'PageView'); }, 2000); </script>  <script type="text/javascript"> $(document).ready(function(){ /**события */ window.isSendEvent25percent = false; window.isSendEvent50percent = false; window.isSendEvent75percent = false; window.isSendEvent100percent = false; $(window).scroll(function(){ var top = $(document).scrollTop(); var wh = $(window).height(); var dh = $(document).height(); var p = parseInt((top + wh) * 100 / dh); var d = new Date(); if(p >= 25) { if(!window.isSendEvent25percent) { if(ga) { ga('send', {'hitType':'event', 'eventCategory':'Read Article','eventAction':'025%','eventLabel':document.title,'eventValue':0,'nonInteraction':true}); ga('send', 'timing', 'Read Article', '025%', parseInt(d.getTime() - window.startTimer),document.title,{'nonInteraction':true}); } window.isSendEvent25percent = true; } } if(p >= 50) { if(!window.isSendEvent50percent) { if(ga) { ga('send', {'hitType':'event', 'eventCategory':'Read Article','eventAction':'050%','eventLabel':document.title,'eventValue':25,'nonInteraction':true}); ga('send', 'timing', 'Read Article', '050%', parseInt(d.getTime() - window.startTimer),document.title,{'nonInteraction':true}); } window.isSendEvent50percent = true; } } if(p >= 75) { if(!window.isSendEvent75percent) { if(ga) { ga('send', {'hitType':'event', 'eventCategory':'Read Article','eventAction':'075%','eventLabel':document.title,'eventValue':50,'nonInteraction':true}); ga('send', 'timing', 'Read Article', '075%', parseInt(d.getTime() - window.startTimer),document.title,{'nonInteraction':true}); } window.isSendEvent75percent = true; } } if(p > 90) { if(!window.isSendEvent100percent) { if(ga) { ga('send', {'hitType':'event', 'eventCategory':'Read Article','eventAction':'100%','eventLabel':document.title,'eventValue':25,'nonInteraction':true}); ga('send', 'timing', 'Read Article', '100%', parseInt(d.getTime() - window.startTimer),document.title,{'nonInteraction':true}); } window.isSendEvent100percent = true; } } }); }); </script> <script type="text/javascript"> $(document).ready(function() { if ($(".te-header__wrapper").length > 0) {if ($("#allrecords").width() < 980) {$(".te-header__userbar").css({"right": "60px"});} else {$("#rec32526252 .t228").data("top-offset","60").css({"top": "60px"});}}}); </script>  <script type="text/javascript"> $(document).ready(function(){ $('#allrecords').data('tilda-statscroll','yes'); }); (function (d, w, k, o, g) { var n=d.getElementsByTagName(o)[0],s=d.createElement(o),f=function(){n.parentNode.insertBefore(s,n);}; s.type = "text/javascript"; s.async = true; s.key = k; s.id = "tildastatscript"; s.src=g; if (w.opera=="[object Opera]") {d.addEventListener("DOMContentLoaded", f, false);} else { f(); } })(document, window, '0bc3fa44a26a9e23465074e623f28e7f','script','https://stat.tildacdn.com/js/tildastat-0.2.min.js'); </script> <style> .ya-share2__item_service_facebook { display: none !important; } </style> </body> </html> <div id="allrecords_footer" itemprop="description" class="t-records_footer" data-hook="blocks-collection-content-node" data-tilda-project-id="3379564" data-tilda-page-id="42660986" data-tilda-page-alias="footer" data-tilda-formskey="6f20e8cab9363ca37fab290c70306272" data-tilda-lazy="yes" data-tilda-root-zone="com" data-tilda-project-headcode="yes"> <div id="rec744633993" class="r t-rec t-rec_pt_75 t-rec_pt-res-480_60 t-rec_pb_60" style="padding-top:75px;padding-bottom:60px;background-color:#232323; " data-animationappear="off" data-record-type="396" data-bg-color="#232323">  <style>#rec744633993 .t396__artboard {height:560px;background-color:#232323;}#rec744633993 .t396__filter {height:560px;}#rec744633993 .t396__carrier{height:560px;background-position:center center;background-attachment:scroll;background-size:cover;background-repeat:no-repeat;}@media screen and (max-width:1199px) {#rec744633993 .t396__artboard,#rec744633993 .t396__filter,#rec744633993 .t396__carrier {height:500px;}#rec744633993 .t396__filter {}#rec744633993 .t396__carrier {background-attachment:scroll;}}@media screen and (max-width:959px) {#rec744633993 .t396__artboard,#rec744633993 .t396__filter,#rec744633993 .t396__carrier {height:700px;}#rec744633993 .t396__filter {}#rec744633993 .t396__carrier {background-attachment:scroll;}}@media screen and (max-width:639px) {#rec744633993 .t396__artboard,#rec744633993 .t396__filter,#rec744633993 .t396__carrier {height:700px;}#rec744633993 .t396__filter {}#rec744633993 .t396__carrier {background-attachment:scroll;}}@media screen and (max-width:479px) {#rec744633993 .t396__artboard,#rec744633993 .t396__filter,#rec744633993 .t396__carrier {height:711px;}#rec744633993 .t396__filter {}#rec744633993 .t396__carrier {background-attachment:scroll;}}#rec744633993 .tn-elem[data-elem-id="1697035553534"]{color:#ffffff;z-index:4;top:56px;left:calc(50% - 600px + 20px);width:199px;}#rec744633993 .tn-elem[data-elem-id="1697035553534"] .tn-atom{color:#ffffff;font-size:14px;font-family:'TildaSans',Arial,sans-serif;line-height:1.1;font-weight:300;background-position:center center;border-color:transparent ;border-style:solid;}@media screen and (max-width:1199px) {#rec744633993 .tn-elem[data-elem-id="1697035553534"] {top:49px;left:calc(50% - 480px + 10px);width:189px;}#rec744633993 .tn-elem[data-elem-id="1697035553534"] .tn-atom{font-size:12px;line-height:1.1;}}@media screen and (max-width:959px) {#rec744633993 .tn-elem[data-elem-id="1697035553534"] {top:47px;left:calc(50% - 320px + 90px);width:189px;}}@media screen and (max-width:639px) {#rec744633993 .tn-elem[data-elem-id="1697035553534"] {top:47px;left:calc(50% - 240px + 10px);}}@media screen and (max-width:479px) {#rec744633993 .tn-elem[data-elem-id="1697035553534"] {top:51px;left:calc(50% - 160px + 10px);width:134px;}#rec744633993 .tn-elem[data-elem-id="1697035553534"] .tn-atom{font-size:12px;}}#rec744633993 .tn-elem[data-elem-id="1697035035883"]{color:#ffffff;z-index:5;top:6px;left:calc(50% - 600px + 20px);width:177px;}#rec744633993 .tn-elem[data-elem-id="1697035035883"] .tn-atom{color:#ffffff;font-size:16px;font-family:'TildaSans',Arial,sans-serif;line-height:1.55;font-weight:500;letter-spacing:1.5px;text-transform:uppercase;opacity:0.3;background-position:center center;border-color:transparent ;border-style:solid;}@media screen and (max-width:1199px) {#rec744633993 .tn-elem[data-elem-id="1697035035883"] {top:5px;left:calc(50% - 480px + 10px);width:202px;}#rec744633993 .tn-elem[data-elem-id="1697035035883"] .tn-atom{font-size:14px;}}@media screen and (max-width:959px) {#rec744633993 .tn-elem[data-elem-id="1697035035883"] {top:5px;left:calc(50% - 320px + 91px);width:225px;}}@media screen and (max-width:639px) {#rec744633993 .tn-elem[data-elem-id="1697035035883"] {top:5px;left:calc(50% - 240px + 10px);}}@media screen and (max-width:479px) {#rec744633993 .tn-elem[data-elem-id="1697035035883"] {top:7px;left:calc(50% - 160px + 10px);width:135px;}#rec744633993 .tn-elem[data-elem-id="1697035035883"] .tn-atom{font-size:12px;}}#rec744633993 .tn-elem[data-elem-id="1697035553534"]{color:#ffffff;z-index:4;top:56px;left:calc(50% - 600px + 20px);width:199px;}#rec744633993 .tn-elem[data-elem-id="1697035553534"] .tn-atom{color:#ffffff;font-size:14px;font-family:'TildaSans',Arial,sans-serif;line-height:1.1;font-weight:300;background-position:center center;border-color:transparent ;border-style:solid;}@media screen and (max-width:1199px) {#rec744633993 .tn-elem[data-elem-id="1697035553534"] {top:49px;left:calc(50% - 480px + 10px);width:189px;}#rec744633993 .tn-elem[data-elem-id="1697035553534"] .tn-atom{font-size:12px;line-height:1.1;}}@media screen and (max-width:959px) {#rec744633993 .tn-elem[data-elem-id="1697035553534"] {top:47px;left:calc(50% - 320px + 90px);width:189px;}}@media screen and (max-width:639px) {#rec744633993 .tn-elem[data-elem-id="1697035553534"] {top:47px;left:calc(50% - 240px + 10px);}}@media screen and (max-width:479px) {#rec744633993 .tn-elem[data-elem-id="1697035553534"] {top:51px;left:calc(50% - 160px + 10px);width:134px;}#rec744633993 .tn-elem[data-elem-id="1697035553534"] .tn-atom{font-size:12px;}}#rec744633993 .tn-elem[data-elem-id="1697035035883"]{color:#ffffff;z-index:5;top:6px;left:calc(50% - 600px + 20px);width:177px;}#rec744633993 .tn-elem[data-elem-id="1697035035883"] .tn-atom{color:#ffffff;font-size:16px;font-family:'TildaSans',Arial,sans-serif;line-height:1.55;font-weight:500;letter-spacing:1.5px;text-transform:uppercase;opacity:0.3;background-position:center center;border-color:transparent ;border-style:solid;}@media screen and (max-width:1199px) {#rec744633993 .tn-elem[data-elem-id="1697035035883"] {top:5px;left:calc(50% - 480px + 10px);width:202px;}#rec744633993 .tn-elem[data-elem-id="1697035035883"] .tn-atom{font-size:14px;}}@media screen and (max-width:959px) {#rec744633993 .tn-elem[data-elem-id="1697035035883"] {top:5px;left:calc(50% - 320px + 91px);width:225px;}}@media screen and (max-width:639px) {#rec744633993 .tn-elem[data-elem-id="1697035035883"] {top:5px;left:calc(50% - 240px + 10px);}}@media screen and (max-width:479px) {#rec744633993 .tn-elem[data-elem-id="1697035035883"] {top:7px;left:calc(50% - 160px + 10px);width:135px;}#rec744633993 .tn-elem[data-elem-id="1697035035883"] .tn-atom{font-size:12px;}}#rec744633993 .tn-elem[data-elem-id="1653257897600"]{color:#ffffff;z-index:7;top:56px;left:calc(50% - 600px + 319px);width:240px;}#rec744633993 .tn-elem[data-elem-id="1653257897600"] .tn-atom{color:#ffffff;font-size:14px;font-family:'TildaSans',Arial,sans-serif;line-height:1.1;font-weight:300;background-position:center center;border-color:transparent ;border-style:solid;}@media screen and (max-width:1199px) {#rec744633993 .tn-elem[data-elem-id="1653257897600"] {top:49px;left:calc(50% - 480px + 250px);width:188px;}#rec744633993 .tn-elem[data-elem-id="1653257897600"] .tn-atom{font-size:12px;line-height:1.1;}}@media screen and (max-width:959px) {#rec744633993 .tn-elem[data-elem-id="1653257897600"] {top:264px;left:calc(50% - 320px + 90px);}}@media screen and (max-width:639px) {#rec744633993 .tn-elem[data-elem-id="1653257897600"] {top:264px;left:calc(50% - 240px + 10px);}}@media screen and (max-width:479px) {#rec744633993 .tn-elem[data-elem-id="1653257897600"] {top:270px;left:calc(50% - 160px + 10px);width:152px;}#rec744633993 .tn-elem[data-elem-id="1653257897600"] .tn-atom{font-size:12px;}}#rec744633993 .tn-elem[data-elem-id="1653658890094"]{color:#ffffff;z-index:8;top:6px;left:calc(50% - 600px + 319px);width:267px;}#rec744633993 .tn-elem[data-elem-id="1653658890094"] .tn-atom{color:#ffffff;font-size:16px;font-family:'TildaSans',Arial,sans-serif;line-height:1.55;font-weight:500;letter-spacing:1.5px;text-transform:uppercase;opacity:0.3;background-position:center center;border-color:transparent ;border-style:solid;}@media screen and (max-width:1199px) {#rec744633993 .tn-elem[data-elem-id="1653658890094"] {top:5px;left:calc(50% - 480px + 250px);width:229px;}#rec744633993 .tn-elem[data-elem-id="1653658890094"] .tn-atom{font-size:14px;}}@media screen and (max-width:959px) {#rec744633993 .tn-elem[data-elem-id="1653658890094"] {top:222px;left:calc(50% - 320px + 90px);}}@media screen and (max-width:639px) {#rec744633993 .tn-elem[data-elem-id="1653658890094"] {top:222px;left:calc(50% - 240px + 10px);}}@media screen and (max-width:479px) {#rec744633993 .tn-elem[data-elem-id="1653658890094"] {top:226px;left:calc(50% - 160px + 10px);width:142px;}#rec744633993 .tn-elem[data-elem-id="1653658890094"] .tn-atom{font-size:12px;}}#rec744633993 .tn-elem[data-elem-id="1653257897600"]{color:#ffffff;z-index:7;top:56px;left:calc(50% - 600px + 319px);width:240px;}#rec744633993 .tn-elem[data-elem-id="1653257897600"] .tn-atom{color:#ffffff;font-size:14px;font-family:'TildaSans',Arial,sans-serif;line-height:1.1;font-weight:300;background-position:center center;border-color:transparent ;border-style:solid;}@media screen and (max-width:1199px) {#rec744633993 .tn-elem[data-elem-id="1653257897600"] {top:49px;left:calc(50% - 480px + 250px);width:188px;}#rec744633993 .tn-elem[data-elem-id="1653257897600"] .tn-atom{font-size:12px;line-height:1.1;}}@media screen and (max-width:959px) {#rec744633993 .tn-elem[data-elem-id="1653257897600"] {top:264px;left:calc(50% - 320px + 90px);}}@media screen and (max-width:639px) {#rec744633993 .tn-elem[data-elem-id="1653257897600"] {top:264px;left:calc(50% - 240px + 10px);}}@media screen and (max-width:479px) {#rec744633993 .tn-elem[data-elem-id="1653257897600"] {top:270px;left:calc(50% - 160px + 10px);width:152px;}#rec744633993 .tn-elem[data-elem-id="1653257897600"] .tn-atom{font-size:12px;}}#rec744633993 .tn-elem[data-elem-id="1653658890094"]{color:#ffffff;z-index:8;top:6px;left:calc(50% - 600px + 319px);width:267px;}#rec744633993 .tn-elem[data-elem-id="1653658890094"] .tn-atom{color:#ffffff;font-size:16px;font-family:'TildaSans',Arial,sans-serif;line-height:1.55;font-weight:500;letter-spacing:1.5px;text-transform:uppercase;opacity:0.3;background-position:center center;border-color:transparent ;border-style:solid;}@media screen and (max-width:1199px) {#rec744633993 .tn-elem[data-elem-id="1653658890094"] {top:5px;left:calc(50% - 480px + 250px);width:229px;}#rec744633993 .tn-elem[data-elem-id="1653658890094"] .tn-atom{font-size:14px;}}@media screen and (max-width:959px) {#rec744633993 .tn-elem[data-elem-id="1653658890094"] {top:222px;left:calc(50% - 320px + 90px);}}@media screen and (max-width:639px) {#rec744633993 .tn-elem[data-elem-id="1653658890094"] {top:222px;left:calc(50% - 240px + 10px);}}@media screen and (max-width:479px) {#rec744633993 .tn-elem[data-elem-id="1653658890094"] {top:226px;left:calc(50% - 160px + 10px);width:142px;}#rec744633993 .tn-elem[data-elem-id="1653658890094"] .tn-atom{font-size:12px;}}#rec744633993 .tn-elem[data-elem-id="1707213006953"]{color:#ffffff;z-index:10;top:57px;left:calc(50% - 600px + 919px);width:201px;}#rec744633993 .tn-elem[data-elem-id="1707213006953"] .tn-atom{color:#ffffff;font-size:14px;font-family:'TildaSans',Arial,sans-serif;line-height:1.1;font-weight:300;background-position:center center;border-color:transparent ;border-style:solid;}@media screen and (max-width:1199px) {#rec744633993 .tn-elem[data-elem-id="1707213006953"] {top:49px;left:calc(50% - 480px + 730px);width:206px;}#rec744633993 .tn-elem[data-elem-id="1707213006953"] .tn-atom{font-size:12px;line-height:1.1;}}@media screen and (max-width:959px) {#rec744633993 .tn-elem[data-elem-id="1707213006953"] {top:472px;left:calc(50% - 320px + 331px);}}@media screen and (max-width:639px) {#rec744633993 .tn-elem[data-elem-id="1707213006953"] {top:467px;left:calc(50% - 240px + 251px);}}@media screen and (max-width:479px) {#rec744633993 .tn-elem[data-elem-id="1707213006953"] {top:504px;left:calc(50% - 160px + 171px);width:140px;}#rec744633993 .tn-elem[data-elem-id="1707213006953"] .tn-atom{font-size:12px;}}#rec744633993 .tn-elem[data-elem-id="1707213006958"]{color:#ffffff;z-index:11;top:6px;left:calc(50% - 600px + 919px);width:205px;}#rec744633993 .tn-elem[data-elem-id="1707213006958"] .tn-atom{color:#ffffff;font-size:16px;font-family:'TildaSans',Arial,sans-serif;line-height:1.55;font-weight:500;letter-spacing:1.5px;text-transform:uppercase;opacity:0.3;background-position:center center;border-color:transparent ;border-style:solid;}@media screen and (max-width:1199px) {#rec744633993 .tn-elem[data-elem-id="1707213006958"] {top:5px;left:calc(50% - 480px + 730px);}#rec744633993 .tn-elem[data-elem-id="1707213006958"] .tn-atom{font-size:14px;}}@media screen and (max-width:959px) {#rec744633993 .tn-elem[data-elem-id="1707213006958"] {top:430px;left:calc(50% - 320px + 331px);}}@media screen and (max-width:639px) {#rec744633993 .tn-elem[data-elem-id="1707213006958"] {top:425px;left:calc(50% - 240px + 251px);}}@media screen and (max-width:479px) {#rec744633993 .tn-elem[data-elem-id="1707213006958"] {top:460px;left:calc(50% - 160px + 171px);width:142px;}#rec744633993 .tn-elem[data-elem-id="1707213006958"] .tn-atom{font-size:12px;}}#rec744633993 .tn-elem[data-elem-id="1707213006953"]{color:#ffffff;z-index:10;top:57px;left:calc(50% - 600px + 919px);width:201px;}#rec744633993 .tn-elem[data-elem-id="1707213006953"] .tn-atom{color:#ffffff;font-size:14px;font-family:'TildaSans',Arial,sans-serif;line-height:1.1;font-weight:300;background-position:center center;border-color:transparent ;border-style:solid;}@media screen and (max-width:1199px) {#rec744633993 .tn-elem[data-elem-id="1707213006953"] {top:49px;left:calc(50% - 480px + 730px);width:206px;}#rec744633993 .tn-elem[data-elem-id="1707213006953"] .tn-atom{font-size:12px;line-height:1.1;}}@media screen and (max-width:959px) {#rec744633993 .tn-elem[data-elem-id="1707213006953"] {top:472px;left:calc(50% - 320px + 331px);}}@media screen and (max-width:639px) {#rec744633993 .tn-elem[data-elem-id="1707213006953"] {top:467px;left:calc(50% - 240px + 251px);}}@media screen and (max-width:479px) {#rec744633993 .tn-elem[data-elem-id="1707213006953"] {top:504px;left:calc(50% - 160px + 171px);width:140px;}#rec744633993 .tn-elem[data-elem-id="1707213006953"] .tn-atom{font-size:12px;}}#rec744633993 .tn-elem[data-elem-id="1707213006958"]{color:#ffffff;z-index:11;top:6px;left:calc(50% - 600px + 919px);width:205px;}#rec744633993 .tn-elem[data-elem-id="1707213006958"] .tn-atom{color:#ffffff;font-size:16px;font-family:'TildaSans',Arial,sans-serif;line-height:1.55;font-weight:500;letter-spacing:1.5px;text-transform:uppercase;opacity:0.3;background-position:center center;border-color:transparent ;border-style:solid;}@media screen and (max-width:1199px) {#rec744633993 .tn-elem[data-elem-id="1707213006958"] {top:5px;left:calc(50% - 480px + 730px);}#rec744633993 .tn-elem[data-elem-id="1707213006958"] .tn-atom{font-size:14px;}}@media screen and (max-width:959px) {#rec744633993 .tn-elem[data-elem-id="1707213006958"] {top:430px;left:calc(50% - 320px + 331px);}}@media screen and (max-width:639px) {#rec744633993 .tn-elem[data-elem-id="1707213006958"] {top:425px;left:calc(50% - 240px + 251px);}}@media screen and (max-width:479px) {#rec744633993 .tn-elem[data-elem-id="1707213006958"] {top:460px;left:calc(50% - 160px + 171px);width:142px;}#rec744633993 .tn-elem[data-elem-id="1707213006958"] .tn-atom{font-size:12px;}}#rec744633993 .tn-elem[data-elem-id="1698312869793"]{color:#ffffff;z-index:13;top:56px;left:calc(50% - 600px + 620px);width:209px;}#rec744633993 .tn-elem[data-elem-id="1698312869793"] .tn-atom{color:#ffffff;font-size:14px;font-family:'TildaSans',Arial,sans-serif;line-height:1.1;font-weight:300;background-position:center center;border-color:transparent ;border-style:solid;}@media screen and (max-width:1199px) {#rec744633993 .tn-elem[data-elem-id="1698312869793"] {top:49px;left:calc(50% - 480px + 490px);width:195px;}#rec744633993 .tn-elem[data-elem-id="1698312869793"] .tn-atom{font-size:12px;line-height:1.1;}}@media screen and (max-width:959px) {#rec744633993 .tn-elem[data-elem-id="1698312869793"] {top:47px;left:calc(50% - 320px + 331px);width:186px;}}@media screen and (max-width:639px) {#rec744633993 .tn-elem[data-elem-id="1698312869793"] {top:42px;left:calc(50% - 240px + 251px);width:177px;}}@media screen and (max-width:479px) {#rec744633993 .tn-elem[data-elem-id="1698312869793"] {top:51px;left:calc(50% - 160px + 171px);width:131px;}#rec744633993 .tn-elem[data-elem-id="1698312869793"] .tn-atom{font-size:12px;}}#rec744633993 .tn-elem[data-elem-id="1653659163722"]{color:#ffffff;z-index:14;top:6px;left:calc(50% - 600px + 621px);width:205px;}#rec744633993 .tn-elem[data-elem-id="1653659163722"] .tn-atom{color:#ffffff;font-size:16px;font-family:'TildaSans',Arial,sans-serif;line-height:1.55;font-weight:500;letter-spacing:1.5px;text-transform:uppercase;opacity:0.3;background-position:center center;border-color:transparent ;border-style:solid;}@media screen and (max-width:1199px) {#rec744633993 .tn-elem[data-elem-id="1653659163722"] {top:5px;left:calc(50% - 480px + 490px);}#rec744633993 .tn-elem[data-elem-id="1653659163722"] .tn-atom{font-size:14px;}}@media screen and (max-width:959px) {#rec744633993 .tn-elem[data-elem-id="1653659163722"] {top:5px;left:calc(50% - 320px + 331px);width:189px;}}@media screen and (max-width:639px) {#rec744633993 .tn-elem[data-elem-id="1653659163722"] {top:0px;left:calc(50% - 240px + 251px);width:180px;}}@media screen and (max-width:479px) {#rec744633993 .tn-elem[data-elem-id="1653659163722"] {top:7px;left:calc(50% - 160px + 171px);width:126px;}#rec744633993 .tn-elem[data-elem-id="1653659163722"] .tn-atom{font-size:12px;}}#rec744633993 .tn-elem[data-elem-id="1698312869793"]{color:#ffffff;z-index:13;top:56px;left:calc(50% - 600px + 620px);width:209px;}#rec744633993 .tn-elem[data-elem-id="1698312869793"] .tn-atom{color:#ffffff;font-size:14px;font-family:'TildaSans',Arial,sans-serif;line-height:1.1;font-weight:300;background-position:center center;border-color:transparent ;border-style:solid;}@media screen and (max-width:1199px) {#rec744633993 .tn-elem[data-elem-id="1698312869793"] {top:49px;left:calc(50% - 480px + 490px);width:195px;}#rec744633993 .tn-elem[data-elem-id="1698312869793"] .tn-atom{font-size:12px;line-height:1.1;}}@media screen and (max-width:959px) {#rec744633993 .tn-elem[data-elem-id="1698312869793"] {top:47px;left:calc(50% - 320px + 331px);width:186px;}}@media screen and (max-width:639px) {#rec744633993 .tn-elem[data-elem-id="1698312869793"] {top:42px;left:calc(50% - 240px + 251px);width:177px;}}@media screen and (max-width:479px) {#rec744633993 .tn-elem[data-elem-id="1698312869793"] {top:51px;left:calc(50% - 160px + 171px);width:131px;}#rec744633993 .tn-elem[data-elem-id="1698312869793"] .tn-atom{font-size:12px;}}#rec744633993 .tn-elem[data-elem-id="1653659163722"]{color:#ffffff;z-index:14;top:6px;left:calc(50% - 600px + 621px);width:205px;}#rec744633993 .tn-elem[data-elem-id="1653659163722"] .tn-atom{color:#ffffff;font-size:16px;font-family:'TildaSans',Arial,sans-serif;line-height:1.55;font-weight:500;letter-spacing:1.5px;text-transform:uppercase;opacity:0.3;background-position:center center;border-color:transparent ;border-style:solid;}@media screen and (max-width:1199px) {#rec744633993 .tn-elem[data-elem-id="1653659163722"] {top:5px;left:calc(50% - 480px + 490px);}#rec744633993 .tn-elem[data-elem-id="1653659163722"] .tn-atom{font-size:14px;}}@media screen and (max-width:959px) {#rec744633993 .tn-elem[data-elem-id="1653659163722"] {top:5px;left:calc(50% - 320px + 331px);width:189px;}}@media screen and (max-width:639px) {#rec744633993 .tn-elem[data-elem-id="1653659163722"] {top:0px;left:calc(50% - 240px + 251px);width:180px;}}@media screen and (max-width:479px) {#rec744633993 .tn-elem[data-elem-id="1653659163722"] {top:7px;left:calc(50% - 160px + 171px);width:126px;}#rec744633993 .tn-elem[data-elem-id="1653659163722"] .tn-atom{font-size:12px;}}</style> <div class='t396'> <div class="t396__artboard" data-artboard-recid="744633993" data-artboard-screens="320,480,640,960,1200" data-artboard-height="560" data-artboard-valign="center" data-artboard-upscale="grid" data-artboard-height-res-320="711" data-artboard-height-res-480="700" data-artboard-height-res-640="700" data-artboard-height-res-960="500"> <div class="t396__carrier" data-artboard-recid="744633993"></div> <div class="t396__filter" data-artboard-recid="744633993"></div> <div class='t396__elem tn-elem tn-elem__7446339931697035553534' data-elem-id='1697035553534' data-elem-type='text' data-field-top-value="56" data-field-left-value="20" data-field-width-value="199" data-field-axisy-value="top" data-field-axisx-value="left" data-field-container-value="grid" data-field-topunits-value="px" data-field-leftunits-value="px" data-field-heightunits-value="" data-field-widthunits-value="px" data-field-top-res-320-value="51" data-field-left-res-320-value="10" data-field-width-res-320-value="134" data-field-top-res-480-value="47" data-field-left-res-480-value="10" data-field-top-res-640-value="47" data-field-left-res-640-value="90" data-field-width-res-640-value="189" data-field-top-res-960-value="49" data-field-left-res-960-value="10" data-field-width-res-960-value="189"> <div class='tn-atom'field='tn_text_1697035553534'><a href="https://tilda.education/en/#guidesandarticles" style="color: rgb(255, 255, 255);">Guides & Articles</a><br><br><a href="https://tilda.education/en/#videotutorials" style="color: rgb(255, 255, 255);">Video Tutorials </a><br><br><a href="https://tilda.education/en/#stories" style="color: rgb(255, 255, 255);">Success Stories</a><br><br><a href="https://tilda.education/en/landing-page-course" style="color: rgb(255, 255, 255);">Landing Page Course</a><br><br><a href="https://tilda.education/en/digital-marketing-course" style="color: rgb(255, 255, 255);">Digital Marketing Course</a><br><br><a href="https://tilda.education/en/web-animation-course" style="color: rgb(255, 255, 255);">Web Animation Course</a></div> </div> <div class='t396__elem tn-elem tn-elem__7446339931697035035883' data-elem-id='1697035035883' data-elem-type='text' data-field-top-value="6" data-field-left-value="20" data-field-width-value="177" data-field-axisy-value="top" data-field-axisx-value="left" data-field-container-value="grid" data-field-topunits-value="px" data-field-leftunits-value="px" data-field-heightunits-value="" data-field-widthunits-value="px" data-field-top-res-320-value="7" data-field-left-res-320-value="10" data-field-width-res-320-value="135" data-field-top-res-480-value="5" data-field-left-res-480-value="10" data-field-top-res-640-value="5" data-field-left-res-640-value="91" data-field-width-res-640-value="225" data-field-top-res-960-value="5" data-field-left-res-960-value="10" data-field-width-res-960-value="202"> <div class='tn-atom'field='tn_text_1697035035883'>EDUCATION</div> </div> <div class='t396__elem tn-elem tn-elem__7446339931653257897600' data-elem-id='1653257897600' data-elem-type='text' data-field-top-value="56" data-field-left-value="319" data-field-width-value="240" data-field-axisy-value="top" data-field-axisx-value="left" data-field-container-value="grid" data-field-topunits-value="px" data-field-leftunits-value="px" data-field-heightunits-value="" data-field-widthunits-value="px" data-field-top-res-320-value="270" data-field-left-res-320-value="10" data-field-width-res-320-value="152" data-field-top-res-480-value="264" data-field-left-res-480-value="10" data-field-top-res-640-value="264" data-field-left-res-640-value="90" data-field-top-res-960-value="49" data-field-left-res-960-value="250" data-field-width-res-960-value="188"> <div class='tn-atom'field='tn_text_1653257897600'><a href="https://tilda.cc" target="_blank" rel="noreferrer noopener" style="color: rgb(255, 255, 255);">Tilda.cc</a><br><span style="color: rgb(255, 255, 255);"></span><br><a href="https://tilda.cc/pricing/" target="_blank" rel="noreferrer noopener" style="color: rgb(255, 255, 255);">Pricing</a><br><br><a href="https://tilda.cc/features/" target="_blank" rel="noreferrer noopener" style="color: rgb(255, 255, 255);">List of features</a><br><br><a href="https://tilda.cc/tpls/" style="color: rgb(255, 255, 255);">Website Templates</a> <br><br><a href="https://tilda.cc/madeontilda/" target="_blank" rel="noreferrer noopener" style="color: rgb(255, 255, 255);">Website Examples </a><br><br><a href="https://tilda.cc/en/reviews/" target="_blank" rel="noreferrer noopener" style="color: rgb(255, 255, 255);">User Reviews</a><br><br><a href="https://tilda.cc/lp/overview/" target="_blank" rel="noreferrer noopener" style="color: rgb(255, 255, 255);">Platform Overview</a><br><br><a href="https://blog-en.tilda.cc/" target="_blank" rel="noreferrer noopener" style="color: rgb(255, 255, 255);">Blog</a><br><br><a href="https://webinars.tilda.cc/en" target="_blank" rel="noreferrer noopener" style="color: rgb(255, 255, 255);">Webinars</a><br><br><a href="https://answers.tilda.cc/" target="_blank" rel="noreferrer noopener" style="color: rgb(255, 255, 255);">F.A.Q.</a><br><br><a href="https://help.tilda.cc/" target="_blank" rel="noreferrer noopener" style="color: rgb(255, 255, 255);">Help Center</a></div> </div> <div class='t396__elem tn-elem tn-elem__7446339931653658890094' data-elem-id='1653658890094' data-elem-type='text' data-field-top-value="6" data-field-left-value="319" data-field-width-value="267" data-field-axisy-value="top" data-field-axisx-value="left" data-field-container-value="grid" data-field-topunits-value="px" data-field-leftunits-value="px" data-field-heightunits-value="" data-field-widthunits-value="px" data-field-top-res-320-value="226" data-field-left-res-320-value="10" data-field-width-res-320-value="142" data-field-top-res-480-value="222" data-field-left-res-480-value="10" data-field-top-res-640-value="222" data-field-left-res-640-value="90" data-field-top-res-960-value="5" data-field-left-res-960-value="250" data-field-width-res-960-value="229"> <div class='tn-atom'field='tn_text_1653658890094'>WEBSITE BUILDER</div> </div> <div class='t396__elem tn-elem tn-elem__7446339931707213006953' data-elem-id='1707213006953' data-elem-type='text' data-field-top-value="57" data-field-left-value="919" data-field-width-value="201" data-field-axisy-value="top" data-field-axisx-value="left" data-field-container-value="grid" data-field-topunits-value="px" data-field-leftunits-value="px" data-field-heightunits-value="" data-field-widthunits-value="px" data-field-top-res-320-value="504" data-field-left-res-320-value="171" data-field-width-res-320-value="140" data-field-top-res-480-value="467" data-field-left-res-480-value="251" data-field-top-res-640-value="472" data-field-left-res-640-value="331" data-field-top-res-960-value="49" data-field-left-res-960-value="730" data-field-width-res-960-value="206"> <div class='tn-atom'field='tn_text_1707213006953'><a href="https://tilda.cc/free-icons/" target="_blank" rel="noreferrer noopener" style="color: rgb(255, 255, 255);">Free Icons</a><br><br><a href="https://tilda.cc/utm/" target="_blank" rel="noreferrer noopener" style="color: rgb(255, 255, 255);">Campaign URL Builder</a><br><br><a href="https://tilda.cc/colors/" target="_blank" rel="noreferrer noopener" style="color: rgb(255, 255, 255);">Color Library</a><br><br><a href="https://experts.tilda.cc/" target="_blank" rel="noreferrer noopener" style="color: rgb(255, 255, 255);">Hire a Designer</a><br><br><a href="https://tilda.cc/lp/tildasans/" target="_blank" rel="noreferrer noopener" style="color: rgb(255, 255, 255);">Tilda Sans Typeface</a><br><br><a href="https://tilda.cc/broken-links/" target="_blank" rel="noreferrer noopener" style="color: rgb(255, 255, 255);">Broken Link Checker</a><br><br><a href="https://tilda.education/en/privacy" target="_blank" rel="noreferrer noopener" style="color: rgb(255, 255, 255);">Privacy Policy</a><br><br><a href="https://tilda.education/en/terms" target="_blank" rel="noreferrer noopener" style="color: rgb(255, 255, 255);">Terms of Service</a></div> </div> <div class='t396__elem tn-elem tn-elem__7446339931707213006958' data-elem-id='1707213006958' data-elem-type='text' data-field-top-value="6" data-field-left-value="919" data-field-width-value="205" data-field-axisy-value="top" data-field-axisx-value="left" data-field-container-value="grid" data-field-topunits-value="px" data-field-leftunits-value="px" data-field-heightunits-value="" data-field-widthunits-value="px" data-field-top-res-320-value="460" data-field-left-res-320-value="171" data-field-width-res-320-value="142" data-field-top-res-480-value="425" data-field-left-res-480-value="251" data-field-top-res-640-value="430" data-field-left-res-640-value="331" data-field-top-res-960-value="5" data-field-left-res-960-value="730"> <div class='tn-atom'field='tn_text_1707213006958'>MORE</div> </div> <div class='t396__elem tn-elem tn-elem__7446339931698312869793' data-elem-id='1698312869793' data-elem-type='text' data-field-top-value="56" data-field-left-value="620" data-field-width-value="209" data-field-axisy-value="top" data-field-axisx-value="left" data-field-container-value="grid" data-field-topunits-value="px" data-field-leftunits-value="px" data-field-heightunits-value="" data-field-widthunits-value="px" data-field-top-res-320-value="51" data-field-left-res-320-value="171" data-field-width-res-320-value="131" data-field-top-res-480-value="42" data-field-left-res-480-value="251" data-field-width-res-480-value="177" data-field-top-res-640-value="47" data-field-left-res-640-value="331" data-field-width-res-640-value="186" data-field-top-res-960-value="49" data-field-left-res-960-value="490" data-field-width-res-960-value="195"> <div class='tn-atom'field='tn_text_1698312869793'><a href="https://tilda.cc/lp/create-a-landing-page-for-business/" target="_blank" rel="noreferrer noopener" style="color: rgb(255, 255, 255);">Create a Landing Page</a><br><br><a href="https://tilda.cc/lp/website-builder/" target="_blank" rel="noreferrer noopener" style="color: rgb(255, 255, 255);">Create a Website Without Code</a><br><br><a href="https://tilda.cc/lp/build-online-store/" target="_blank" rel="noreferrer noopener" style="color: rgb(255, 255, 255);">Create an Online Store</a><br><br><a href="https://tilda.cc/lp/create-blog/" target="_blank" rel="noreferrer noopener" style="color: rgb(255, 255, 255);">Create a Company Blog</a><br><br><a href="https://tilda.cc/lp/course-builder/" target="_blank" rel="noreferrer noopener" style="color: rgb(255, 255, 255);">Create Online Courses</a><br><br><a href="https://tilda.cc/lp/seo/" target="_blank" rel="noreferrer noopener" style="color: rgb(255, 255, 255);">SEO On Tilda</a><br><br><a href="https://tilda.cc/lp/email-campaign-builder/" target="_blank" rel="noreferrer noopener" style="color: rgb(255, 255, 255);">Email Campaign Builder</a><br><br><a href="https://tilda.cc/lp/forms/" target="_blank" rel="noreferrer noopener" style="color: rgb(255, 255, 255);">Online Form Builder</a><br><br><a href="https://zero.tilda.cc/" target="_blank" rel="noreferrer noopener" style="color: rgb(255, 255, 255);">Zero Block. Web Design Editor</a><br><br><a href="https://tilda.cc/lp/crm/" target="_blank" rel="noreferrer noopener" style="color: rgb(255, 255, 255);">Tilda CRM</a><br><br><a href="https://tilda.cc/lp/membership/" target="_blank" rel="noreferrer noopener" style="color: rgb(255, 255, 255);">Membership</a><br><br><a href="https://tilda.cc/lp/quiz/" target="_blank" rel="noreferrer noopener" style="color: rgb(255, 255, 255);">Interactive Quizzes</a><br><br><a href="https://tilda.cc/lp/image-optimization/" target="_blank" rel="noreferrer noopener" style="color: rgb(255, 255, 255);">Adaptive Image Loading</a><br><br><a href="https://tilda.cc/lp/accessibility/" target="_blank" rel="noreferrer noopener" style="color: rgb(255, 255, 255);">Digital Accessibility</a></div> </div> <div class='t396__elem tn-elem tn-elem__7446339931653659163722' data-elem-id='1653659163722' data-elem-type='text' data-field-top-value="6" data-field-left-value="621" data-field-width-value="205" data-field-axisy-value="top" data-field-axisx-value="left" data-field-container-value="grid" data-field-topunits-value="px" data-field-leftunits-value="px" data-field-heightunits-value="" data-field-widthunits-value="px" data-field-top-res-320-value="7" data-field-left-res-320-value="171" data-field-width-res-320-value="126" data-field-top-res-480-value="0" data-field-left-res-480-value="251" data-field-width-res-480-value="180" data-field-top-res-640-value="5" data-field-left-res-640-value="331" data-field-width-res-640-value="189" data-field-top-res-960-value="5" data-field-left-res-960-value="490"> <div class='tn-atom'field='tn_text_1653659163722'>SOLUTIONS</div> </div> </div> </div> <script>t_onReady(function() {t_onFuncLoad('t396_init',function() {t396_init('744633993');});});</script>  </div> <div id="rec744634564" class="r t-rec t-rec_pt_0 t-rec_pb_0" style="padding-top:0px;padding-bottom:0px;background-color:#232323; " data-record-type="212" data-bg-color="#232323">  <div class="t188"> <div class="t-container_100"> <div class="t188__wrapper"> <div class="t-sociallinks"> <ul role="list" class="t-sociallinks__wrapper" aria-label="Social media links"> <li class="t-sociallinks__item t-sociallinks__item_instagram"><a href="https://www.instagram.com/tilda.cc/" target="_blank" rel="nofollow" aria-label="instagram" style="width: 48px; height: 48px;"><svg class="t-sociallinks__svg" role="presentation" width=48px height=48px viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M50 100C77.6142 100 100 77.6142 100 50C100 22.3858 77.6142 0 50 0C22.3858 0 0 22.3858 0 50C0 77.6142 22.3858 100 50 100ZM25 39.3918C25 31.4558 31.4566 25 39.3918 25H60.6082C68.5442 25 75 31.4566 75 39.3918V60.8028C75 68.738 68.5442 75.1946 60.6082 75.1946H39.3918C31.4558 75.1946 25 68.738 25 60.8028V39.3918ZM36.9883 50.0054C36.9883 42.8847 42.8438 37.0922 50.0397 37.0922C57.2356 37.0922 63.0911 42.8847 63.0911 50.0054C63.0911 57.1252 57.2356 62.9177 50.0397 62.9177C42.843 62.9177 36.9883 57.1252 36.9883 50.0054ZM41.7422 50.0054C41.7422 54.5033 45.4641 58.1638 50.0397 58.1638C54.6153 58.1638 58.3372 54.5041 58.3372 50.0054C58.3372 45.5066 54.6145 41.8469 50.0397 41.8469C45.4641 41.8469 41.7422 45.5066 41.7422 50.0054ZM63.3248 39.6355C65.0208 39.6355 66.3956 38.2606 66.3956 36.5646C66.3956 34.8687 65.0208 33.4938 63.3248 33.4938C61.6288 33.4938 60.2539 34.8687 60.2539 36.5646C60.2539 38.2606 61.6288 39.6355 63.3248 39.6355Z" fill="#ffffff"/> </svg></a></li> <li class="t-sociallinks__item t-sociallinks__item_youtube"><a href="https://www.youtube.com/@TildaPublishing_global" target="_blank" rel="nofollow" aria-label="youtube" style="width: 48px; height: 48px;"><svg class="t-sociallinks__svg" role="presentation" width=48px height=48px viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M50 100c27.614 0 50-22.386 50-50S77.614 0 50 0 0 22.386 0 50s22.386 50 50 50Zm17.9-67.374c3.838.346 6 2.695 6.474 6.438.332 2.612.626 6.352.626 10.375 0 7.064-.626 11.148-.626 11.148-.588 3.728-2.39 5.752-6.18 6.18-4.235.48-13.76.7-17.992.7-4.38 0-13.237-.184-17.66-.552-3.8-.317-6.394-2.44-6.916-6.218-.38-2.752-.626-6.022-.626-11.222 0-5.788.209-8.238.7-10.853.699-3.732 2.48-5.54 6.548-5.96C36.516 32.221 40.55 32 49.577 32c4.413 0 13.927.228 18.322.626Zm-23.216 9.761v14.374L58.37 49.5l-13.686-7.114Z" fill="#ffffff"/> </svg></a></li> <li class="t-sociallinks__item t-sociallinks__item_twitter"><a href="https://twitter.com/TildaPublishing" target="_blank" rel="nofollow" aria-label="twitter" style="width: 48px; height: 48px;"><svg class="t-sociallinks__svg" role="presentation" xmlns="http://www.w3.org/2000/svg" width=48px height=48px viewBox="0 0 48 48"> <g clip-path="url(#clip0_3697_102)"><path fill-rule="evenodd" clip-rule="evenodd" d="M24 48C37.2548 48 48 37.2548 48 24C48 10.7452 37.2548 0 24 0C10.7452 0 0 10.7452 0 24C0 37.2548 10.7452 48 24 48ZM33.3482 14L25.9027 22.4686H25.9023L34 34H28.0445L22.5915 26.2348L15.7644 34H14L21.8082 25.1193L14 14H19.9555L25.119 21.3532L31.5838 14H33.3482ZM22.695 24.1101L23.4861 25.2173V25.2177L28.8746 32.7594H31.5847L24.9813 23.5172L24.1902 22.4099L19.1103 15.2997H16.4002L22.695 24.1101Z" fill="#ffffff"/></g><defs><clipPath id="clip0_3697_102"><rect width="48" height="48" fill="white"/></clipPath></defs> </svg></a></li> <li class="t-sociallinks__item t-sociallinks__item_facebook"><a href="https://www.facebook.com/tildapublishing" target="_blank" rel="nofollow" aria-label="facebook" style="width: 48px; height: 48px;"><svg class="t-sociallinks__svg" role="presentation" width=48px height=48px viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M50 100c27.6142 0 50-22.3858 50-50S77.6142 0 50 0 0 22.3858 0 50s22.3858 50 50 50Zm3.431-73.9854c-2.5161.0701-5.171.6758-7.0464 2.4577-1.5488 1.4326-2.329 3.5177-2.5044 5.602-.0534 1.4908-.0458 2.9855-.0382 4.4796.0058 1.1205.0115 2.2407-.0085 3.3587-.6888.005-1.3797.0036-2.0709.0021-.9218-.0019-1.8441-.0038-2.7626.0096 0 .8921.0013 1.7855.0026 2.6797.0026 1.791.0052 3.5853-.0026 5.3799.9185.0134 1.8409.0115 2.7627.0096.6912-.0015 1.382-.0029 2.0708.0021.0155 3.5565.0127 7.1128.0098 10.669-.0036 4.4452-.0072 8.8903.0252 13.3354 1.8903-.0134 3.7765-.0115 5.6633-.0095 1.4152.0014 2.8306.0028 4.2484-.0022.0117-4.0009.0088-7.9986.0058-11.9963-.0029-3.9979-.0058-7.9957.0059-11.9964.9533-.005 1.9067-.0036 2.86-.0021 1.2713.0019 2.5425.0038 3.8137-.0096.396-2.679.7335-5.3814.9198-8.0947-1.2576-.0058-2.5155-.0058-3.7734-.0058-1.2578 0-2.5157 0-3.7734-.0059 0-.4689-.0007-.9378-.0014-1.4066-.0022-1.4063-.0044-2.8123.0131-4.2188.198-1.0834 1.3158-1.9104 2.3992-1.8403h5.1476c.0117-2.8069.0117-5.602 0-8.4089-.6636 0-1.3273-.0007-1.9911-.0014-1.9915-.0022-3.9832-.0044-5.975.0131Z" fill="#ffffff"/> </svg></a></li> <li class="t-sociallinks__item t-sociallinks__item_telegram"><a href="https://t.me/tilda_global" target="_blank" rel="nofollow" aria-label="telegram" style="width: 48px; height: 48px;"><svg class="t-sociallinks__svg" role="presentation" width=48px height=48px viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M50 100c27.614 0 50-22.386 50-50S77.614 0 50 0 0 22.386 0 50s22.386 50 50 50Zm21.977-68.056c.386-4.38-4.24-2.576-4.24-2.576-3.415 1.414-6.937 2.85-10.497 4.302-11.04 4.503-22.444 9.155-32.159 13.734-5.268 1.932-2.184 3.864-2.184 3.864l8.351 2.577c3.855 1.16 5.91-.129 5.91-.129l17.988-12.238c6.424-4.38 4.882-.773 3.34.773l-13.49 12.882c-2.056 1.804-1.028 3.35-.129 4.123 2.55 2.249 8.82 6.364 11.557 8.16.712.467 1.185.778 1.292.858.642.515 4.111 2.834 6.424 2.319 2.313-.516 2.57-3.479 2.57-3.479l3.083-20.226c.462-3.511.993-6.886 1.417-9.582.4-2.546.705-4.485.767-5.362Z" fill="#ffffff"/> </svg></a></li> <li class="t-sociallinks__item t-sociallinks__item_tiktok"><a href="https://www.tiktok.com/@tilda.publishing" target="_blank" rel="nofollow" aria-label="tiktok" style="width: 48px; height: 48px;"><svg class="t-sociallinks__svg" role="presentation" width=48px height=48px viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M50 100c27.614 0 50-22.386 50-50S77.614 0 50 0 0 22.386 0 50s22.386 50 50 50Zm5.495-74.986c-1.555.002-3.113.004-4.676.028l.001.002c-.04 5.37-.038 10.742-.035 16.12.001 3.007.003 6.015-.004 9.026-.006 1.01-.005 2.019-.004 3.027.002 2.712.005 5.421-.144 8.138-.022.754-.4 1.417-.767 2.06l-.088.154c-1.212 1.977-3.442 3.327-5.769 3.352-3.51.31-6.797-2.563-7.292-5.982-.004-.167-.01-.336-.016-.505-.034-.964-.069-1.948.298-2.846.522-1.482 1.524-2.791 2.843-3.646 1.806-1.255 4.222-1.442 6.29-.773 0-1.318.022-2.636.044-3.953.03-1.767.06-3.534.036-5.303-4.525-.846-9.358.585-12.808 3.59-3.044 2.58-5.005 6.372-5.38 10.336a34.879 34.879 0 0 0 .025 3.1c.431 4.876 3.392 9.418 7.6 11.9 2.54 1.496 5.516 2.309 8.496 2.139 4.858-.082 9.588-2.686 12.313-6.682 1.694-2.4 2.655-5.299 2.818-8.211.042-4.001.04-8.01.036-12.023 0-2.068-.002-4.138.003-6.208 1.082.708 2.189 1.4 3.376 1.938 2.727 1.293 5.746 1.919 8.75 2.017v-8.39c-3.206-.357-6.501-1.415-8.83-3.726-2.335-2.255-3.482-5.504-3.646-8.693-1.156.01-2.312.012-3.47.014Z" fill="#ffffff"/> </svg></a></li> </ul> </div> </div> </div> </div> </div> <div id="rec744693715" class="r t-rec t-rec_pt_30 t-rec_pb_60" style="padding-top:30px;padding-bottom:60px;background-color:#232323; " data-record-type="56" data-bg-color="#232323">  <div class="t046"> <div class="t-container"> <div class="t-col t-col_10 t-prefix_1"> <div class="t046__text t-text_footer t-text_footer_xs" field="text"><div style="font-size: 14px;" data-customstyle="yes"><span style="color: rgb(255, 255, 255);">A learning resource with practical guides on web design and digital marketing from the </span><a href="https://tilda.cc/" target="_blank" rel="noreferrer noopener" style="color: rgb(255, 255, 255); border-bottom: 1px solid rgb(255, 255, 255); box-shadow: none; text-decoration: none;">Tilda</a><span style="color: rgb(255, 255, 255);"> website builder. </span><br /><span style="color: rgb(255, 255, 255);">© Tilda Publishing, 2015-2024 All rights reserved. Any reproduction and redistribution of the content is prohibited. Please read our </span><a href="https://tilda.education/en/terms" style="color: rgb(255, 255, 255); border-bottom: 1px solid rgb(255, 255, 255); box-shadow: none; text-decoration: none;">Terms of Service</a><span style="color: rgb(255, 255, 255);"> and </span><a href="https://tilda.education/en/privacy" style="color: rgb(255, 255, 255); border-bottom: 1px solid rgb(255, 255, 255); box-shadow: none; text-decoration: none;">Privacy Policy</a><span style="color: rgb(255, 255, 255);">. For any questions, contact us at </span><a href="mailto:team@tilda.cc" style="color: rgb(255, 255, 255); border-bottom: 1px solid rgb(255, 255, 255); box-shadow: none; text-decoration: none;">team@tilda.cc</a><br /><p style="text-align: center;"><span style="color: rgb(255, 255, 255);"> </span></p></div></div> </div> </div> </div> </div> </div> <style>.csssize{height:4743px}.t-body{margin:0}#allrecords_footer{-webkit-font-smoothing:antialiased;background-color:none}#allrecords_footer a{color:#ff8562;text-decoration:none}#allrecords_footer a,#allrecords_footer button,#allrecords_footer .t-radio,#allrecords_footer .t-checkbox,#allrecords_footer .t-img-select{outline:none}#allrecords_footer a:focus-visible,#allrecords_footer button:focus-visible,#allrecords_footer .t-focusable,#allrecords_footer .t-focusable .t-btn,#allrecords_footer .t-focusable .t-btntext,#allrecords_footer .t-img-select:focus-visible+.t-img-select__indicator,#allrecords_footer .t-img-select:focus-visible+.t-img-select__indicator:after,#allrecords_footer .t-radio:focus-visible+.t-radio__indicator,#allrecords_footer .t-checkbox:focus-visible+.t-checkbox__indicator{outline-color:#2015FF;outline-offset:4px;outline-style:auto}#allrecords_footer .t-descr a:focus-visible,#allrecords_footer .t-sociallinks a:focus-visible,#allrecords_footer .ya-share2__link:focus-visible{outline-offset:2px}#allrecords_footer a[href^=tel]{color:inherit;text-decoration:none}#allrecords_footer ol{padding-left:22px}#allrecords_footer ul{padding-left:20px}#allrecords_footer b,#allrecords_footer strong{font-weight:700}@media print{body,html{min-width:1200px;max-width:1200px;padding:0;margin:0 auto;border:none}}.t-records_footer{-webkit-font_smoothing:antialiased;background-color:none}.t-records_footer a{color:#ff8562;text-decoration:none}.t-records_footer a[href^=tel]{color:inherit;text-decoration:none}.t-records_footer ol{padding-left:22px;margin-top:0;margin-bottom:10px}.t-records_footer ul{padding-left:20px;margin-top:0;margin-bottom:10px}.t-mbfix{opacity:.01;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);position:fixed;width:100%;height:500px;background-color:white;top:0;left:0;z-index:10000;-webkit-transition:all 0.1s ease;transition:all 0.1s ease}.t-mbfix_hide{-webkit-transform:translateX(3000px);-ms-transform:translateX(3000px);transform:translateX(3000px)}img:not([src]){visibility:hidden}.t-body_scroll-locked{position:fixed;left:0;width:100%;height:100%;overflow:hidden}.r_anim{-webkit-transition:opacity 0.5s;transition:opacity 0.5s}.r_hidden{opacity:0}.r_showed{opacity:1}@media screen and (max-width:1024px){a:active,button:active{-webkit-tap-highlight-color:rgba(255,255,255,.1)}}.t-text_footer{font-family:'TildaSans',Arial,sans-serif;font-weight:400;color:#000000}.t-text_footer_xs{font-size:15px;line-height:1.55}.t-name{font-family:'TildaSans',Arial,sans-serif;font-weight:600;color:#000000}.t-name_md{font-size:20px;line-height:1.35}.t-title_footer{font-family:'TildaSans',Arial,sans-serif;font-weight:600;color:#000000}.t-tildalabel{background-color:#000;color:#fff;width:100%;height:70px;font-family:Arial;font-size:14px}.t-tildalabel:hover .t-tildalabel__wrapper{opacity:1}.t-tildalabel__wrapper{display:table;height:30px;width:270px;margin:0 auto;padding-top:20px;opacity:.4}.t-tildalabel__txtleft{display:table-cell;width:120px;height:30px;vertical-align:middle;text-align:right;padding-right:12px;font-weight:300;font-size:12px}.t-tildalabel__wrapimg{display:table-cell;width:30px;height:30px;vertical-align:middle}.t-tildalabel__img{width:30px;height:30px;vertical-align:middle}.t-tildalabel__txtright{display:table-cell;width:120px;height:30px;vertical-align:middle;padding-left:12px;font-weight:500;letter-spacing:2px}.t-tildalabel__link{color:#fff;text-decoration:none;vertical-align:middle}.t-rec_pt_0{padding-top:0}.t-rec_pt_30{padding-top:30px}.t-rec_pt_75{padding-top:75px}.t-rec_pb_0{padding-bottom:0}.t-rec_pb_60{padding-bottom:60px}@media screen and (max-width:1200px){.t-text_footer_xs{font-size:14px}.t-name_md{font-size:18px}}@media screen and (max-width:640px){.t-text_footer_xs{font-size:12px;line-height:1.45}.t-name_md{font-size:16px}}@media screen and (max-width:480px){.t-rec_pt_0{padding-top:0}.t-rec_pt_30{padding-top:30px}.t-rec_pt_75{padding-top:75px}.t-rec_pb_0{padding-bottom:0}.t-rec_pb_60{padding-bottom:60px}.t-rec_pt-res-480_60{padding-top:60px!important}}.t396{-webkit-text_footer-size-adjust:100%}.t396__iframe{z-index:10000;background-color:#fff;width:100vw;height:100vh;position:fixed;top:0;left:0;border:0}.t396__body_overflow_hidden{overflow:hidden}.t396__display_none{display:none}.t396__artboard{position:relative;width:100%;height:100vh;overflow:hidden}.t396__artboard .t396__artboard_scale{overflow:visible}.t396__artboard.t396__artboard_scale .t396__elem[data-elem-type="text"] .tn-atom{word-break:normal;-moz-osx-font-smoothing:grayscale}.t396__artboard_scale .t396__carrier,.t396__artboard_scale .t396__filter{transform-origin:top left}.tn-atom__scale-wrapper{width:inherit;height:inherit}.t396__elem .tn-atom__scale-wrapper .tn-atom{width:inherit;height:inherit!important;box-sizing:border-box}.t396__artboard.rendering .tn-elem{visibility:hidden}.t396__artboard.rendered .tn-elem{visibility:visible}.t396__carrier{position:absolute;left:0;top:0;z-index:0;width:100%;height:100vh;-moz-transform:unset}.t396__filter{position:absolute;left:0;top:0;z-index:1;width:100%;height:100vh;transform:translateZ(0)}.t396__elem{position:absolute;box-sizing:border-box;display:table}.t396 .tn-atom{display:table-cell;vertical-align:middle;width:100%;-webkit-text_footer-size-adjust:100%;-moz-text-size-adjust:100%;-ms-text-size-adjust:100%}@media screen and (max-width:959px){.t396_safari .t396__artboard_scale .tn-atom{-webkit-text_footer-size-adjust:auto;-moz-text-size-adjust:auto;-ms-text-size-adjust:auto}}.t396 .tn-atom ul,.t396 .tn-atom ol{margin-bottom:0}.t396_safari .tn-atom:not(.tn-atom__form){transform:translateZ(0)}.t396 a.tn-atom{text-decoration:none}.t396 .tn-atom__img{width:100%;display:block}.t396 .tn-atom__html{vertical-align:top}.t396 .tn-atom__pin{border-radius:1000px;border-style:solid}.t396 .tn-atom__pin_onclick{cursor:pointer}.t396 .tn-atom__tip{position:absolute;box-sizing:border-box;width:300px;max-width:90vw;padding:15px;display:none}.t396 .tn-atom__pin:hover .tn-atom__tip{display:none}.t396 .tn-atom__tip-img{width:100%;display:block;margin-bottom:10px}.t396 .tn-atom__tip[data-tip-pos=top]{bottom:100%;margin-bottom:15px;left:50%;transform:translateX(-50%)}.t396 .tn-atom__tip[data-tip-pos=bottom]{top:100%;margin-top:15px;left:50%;transform:translateX(-50%)}.t396 .tn-atom__tip[data-tip-pos=left]{right:100%;margin-right:15px;top:50%;transform:translateY(-50%)}.t396 .tn-atom__tip[data-tip-pos=right]{left:100%;margin-left:15px;top:50%;transform:translateY(-50%)}.t396__ui{position:absolute;top:16px;left:196px;background-color:#fa876b;color:#000!important;height:30px;line-height:30px;width:100px;z-index:1000;text-align:center;border-radius:3px;display:none;font-size:14px}.t396__artboard.t396__artboard-fixed-active{transform:none!important;opacity:1!important}.t396__artboard-fixed-no-bg,.t396__artboard-fixed-innactive,.t396__artboard-fixed-innactive .t396__elem,.t396__artboard-fixed-no-bg.t396__artboard-fixed-innactive .t396__elem{pointer-events:none}.t396__artboard-fixed-no-bg .t396__elem{pointer-events:auto}.t396__elem-flex{position:relative!important;left:initial!important;top:initial!important;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;-ms-flex-negative:0;flex-shrink:0}.t188__wrapone{position:relative;right:50%;float:right}.t188__wraptwo{position:relative;z-index:1;right:-50%}.t188__wrapper{display:-webkit-flex;display:flex;justify-content:center;-webkit-box-pack:justify;-webkit-justify-content:center;-ms-flex-pack:justify}.t188 .t-sociallinks__item,.t188__sociallinkimg{display:inline-block;padding-left:5px;padding-right:5px}#allrecords_footer .t188 ul.t-sociallinks__wrapper{margin-bottom:0;padding-left:0;list-style:none}.t188 .t-sociallinks__item a{display:inline-block}.t188__imgwrapper{background-size:contain;background-repeat:no-repeat;background-position:center}.t046__text{text-align:center;padding-top:10px;padding-bottom:4px}.t-menusub__menu{display:none}.t456__imglogo{display:block;height:auto;margin-right:30px}.t456__linewrapper{position:absolute;bottom:0;left:0;width:100%}.t456__horizontalline{margin:0;border:0;background-color:#C2C2C2;height:1px;right:0;bottom:0;margin:0 40px 0 40px}.t456__imglogo{max-width:300px}.t456__leftwrapper{display:table-cell;vertical-align:middle;padding-left:40px}.t456__rightwrapper{display:table-cell;vertical-align:middle;padding-right:40px;width:100%}.t456__menualign_left{text-align:left}.t456__menualign_right{text-align:right}.t456__menualign_center{text-align:center}@media screen and (max-width:1200px){.t456__leftwrapper{padding-left:20px}.t456__rightwrapper{padding-right:20px}}.t456{width:100%;height:80px;z-index:990;position:fixed;top:0;box-shadow:0 1px 3px rgba(0,0,0,0);transition:background-color 300ms linear}.t456__beforeready{visibility:hidden}.t456 ul{margin:0}.t456__maincontainer{width:100%;height:80px;display:table;position:relative}.t456__maincontainer.t456__c12collumns{max-width:1200px;margin:0 auto}.t456__logo{display:inline-block;font-size:24px;font-weight:400;white-space:nowrap;padding-right:30px}.t456__list{list-style-type:none;margin:0;padding:0!important}.t456__list_item{clear:both;font-family:'TildaSans',Arial,sans-serif;font-size:16px;display:inline-block;padding-left:15px;padding-right:15px;margin:0;color:#000000;white-space:nowrap}.t456__list_item .t-active{opacity:.7}.t456__list_item:first-child{padding-left:0}.t456__list_item:last-child{padding-right:0}.t456 a,#allrecords_footer .t456 a{text-decoration:none;color:#000000}.t456.t456__positionabsolute{position:absolute}.t456.t456__positionfixed{position:fixed}.t456.t456__positionstatic{position:static}.t456__mobile{display:none}@media screen and (max-width:980px){.t456__linewrapper{display:none}.t456{position:static;text-align:center;display:block;margin:0;padding:0;height:auto!important}.t456.t456__positionabsolute,.t456.t456__positionfixed,.t456.t456__positionstatic{position:relative}.t456__imglogo{width:auto!important;box-sizing:border-box;padding:20px;margin:0 auto}.t456__imglogomobile.t456__imglogo{width:100%!important}.t456__logo{text-align:center;margin:20px}.t456 img{float:inherit}.t456 .t456__list_item{display:block;text-align:center;padding:10px!important;white-space:normal}.t456__logo{white-space:normal;padding:0}.t456__logowrapper{position:static;display:block;width:100%}.t456__logowrapper2{display:block;position:static}.t456__leftwrapper,.t456__rightwrapper{width:100%!important;display:block}.t456__leftwrapper{padding:20px;box-sizing:border-box}.t456__rightwrapper{padding:20px 0!important;box-sizing:border-box}.t456__list{display:block;padding:0!important}}</style>