web design - Creative Tim's Blog - Fully coded design resources for web developers

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>web design - Creative Tim's Blog - Fully coded design resources for web developers</title> <link rel="stylesheet" href="/blog/assets/built/screen.css?v=bc77caee98"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Muli:400,400i,700,700i,800">  <script src="https://kit.fontawesome.com/42d5adcbca.js" crossorigin="anonymous"></script> <script> if (localStorage.getItem('alto_dark') == 'true') { document.documentElement.classList.add('dark-mode'); } </script> <script> var ghosthunter_key = ''; ghost_root_url = ""; if (document.URL.includes('creative-tim.com')) { ghost_root_url = "/blog/ghost/api/v4"; ghosthunter_key = 'b431b45a35fd006e8befdf8855'; } else { ghost_root_url = "/blog/ghost/api/v4"; ghosthunter_key = '1c87ec6f195f4f728fc5e5d522'; } </script> <script> var gh_white_logo = 'https://s3.amazonaws.com/creativetim_bucket/static-assets/logo-ct-blog-white.png'; </script>  <style>.async-hide { opacity: 0 !important} </style> <script>(function(a,s,y,n,c,h,i,d,e){s.className+=' '+y;h.start=1*new Date; h.end=i=function(){s.className=s.className.replace(RegExp(' ?'+y),'')}; (a[n]=a[n]||[]).hide=h;setTimeout(function(){i();h.end=null},c);h.timeout=c; })(window,document.documentElement,'async-hide','dataLayer',4000, {'GTM-K9BGS8K':true});</script>  <script> (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','https://www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-46172202-22', 'auto', {allowLinker: true}); ga('set', 'anonymizeIp', true); ga('require', 'GTM-K9BGS8K'); ga('require', 'displayfeatures'); ga('require', 'linker'); ga('linker:autoLink', ["2checkout.com","avangate.com"]); </script>   <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-NKDMSK6');</script>  <link rel="icon" href="/blog/favicon.png" type="image/png" /> <link rel="canonical" href="https://www.creative-tim.com/blog/web-design/" /> <meta name="referrer" content="no-referrer-when-downgrade" /> <link rel="next" href="https://www.creative-tim.com/blog/web-design/page/2/" /> <meta property="og:site_name" content="Creative Tim's Blog - Fully coded design resources for web developers" /> <meta property="og:type" content="website" /> <meta property="og:title" content="web design - Creative Tim's Blog - Fully coded design resources for web developers" /> <meta property="og:url" content="https://www.creative-tim.com/blog/web-design/" /> <meta property="og:image" content="https://www.creative-tim.com/blog/content/images/2021/06/metatag-tim-cover-amazon.jpeg" /> <meta property="article:publisher" content="https://www.facebook.com/ghost" /> <meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:title" content="web design - Creative Tim's Blog - Fully coded design resources for web developers" /> <meta name="twitter:url" content="https://www.creative-tim.com/blog/web-design/" /> <meta name="twitter:image" content="https://www.creative-tim.com/blog/content/images/2021/06/metatag-tim-cover-amazon.jpeg" /> <meta name="twitter:site" content="@ghost" /> <meta property="og:image:width" content="1362" /> <meta property="og:image:height" content="640" /> <script type="application/ld+json"> { "@context": "https://schema.org", "@type": "Series", "publisher": { "@type": "Organization", "name": "Creative Tim's Blog - Fully coded design resources for web developers", "url": "https://blogct.creative-tim.com/blog/", "logo": { "@type": "ImageObject", "url": "https://blogct.creative-tim.com/blog/content/images/2022/04/logo-creative-tim-black.png" } }, "url": "https://blogct.creative-tim.com/blog/web-design/", "name": "web design", "mainEntityOfPage": { "@type": "WebPage", "@id": "https://blogct.creative-tim.com/blog/" } } </script> <meta name="generator" content="Ghost 4.7" /> <link rel="alternate" type="application/rss+xml" title="Creative Tim's Blog - Fully coded design resources for web developers" href="https://www.creative-tim.com/blog/rss/" /> <style> .kg-image, .aligncenter, .size-large { border-radius: 16px !important; } </style> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/themes/prism-tomorrow.min.css" integrity="sha512-vswe+cgvic/XBoF1OcM/TeJ2FW0OofqAVdCZiEYkd6dwGXthvkSFWOoGGJgS2CW70VK5dQM5Oh+7ne47s74VTg==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@algolia/autocomplete-theme-classic" /> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3" /> <link rel="preconnect" href="https://H5FHEK3TTR-dsn.algolia.net" crossorigin /><style>:root {--ghost-accent-color: #00BBFF;}</style> </head> <body class="tag-template tag-web-design">  <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-NKDMSK6" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>  <div class="site"> <header class="site-header container" id="navbar"> <div class="navbar"> <div class="navbar-left"> <div class="burger hidden-lg hidden-xl absolute lg:relative right-1"></div> <a class="logo" href="https://www.creative-tim.com/" target="_blank"> <img class="logo-image" src="https://www.creative-tim.com/blog/content/images/2022/04/logo-creative-tim-black.png" alt="Creative Tim"> </a> <div class="sep hidden-xs hidden-sm hidden-sm"></div> <a class="" href="https://www.creative-tim.com/blog"> <span class="logo-text ml-4 md:ml-0 hidden md:block">Blog</span> </a> </div> <div class="navbar-right"> <div id="docsearch" class="w-12 md:w-32 lg:w-44 rounded-sm sm:mr-7 lg:mr-0 ml-0 md:ml-4"></div> <nav class="main-menu hidden-xs hidden-sm hidden-md"> <ul class="nav-list u-plain-list"> <li class="menu-item menu-item-home"> <a class="menu-item-link" href="https://www.creative-tim.com/blog/"> Home </a> </li> <li class="menu-item menu-item-marketplace"> <a class="menu-item-link" href="https://www.creative-tim.com/"> Marketplace </a> </li> <li class="menu-item menu-item-tutorials"> <a class="menu-item-link" href="https://www.creative-tim.com/blog/tutorial/"> Tutorials </a> </li> </ul> </nav> <div class="flex items-center mr-12 sm:mr-8 md:mr-6"> <div class="toggle-track"> <div class="toggle-moon"><i class="icon icon-brightness-2"></i></div> <div class="toggle-sun"><i class="icon icon-white-balance-sunny"></i></div> <div class="toggle-thumb"></div> </div> </div> </div> </div> </header> <div class="container mt-6"> <nav class="mb-8 md:mb-4 hidden md:block md:flex md:overflow-scroll md:items-center md:justify-between nav-secondary"> <ul class="nav-list u-plain-list whitespace-nowrap sm:overflow-auto lg:overflow-hidden pb-4"> <li class="menu-item menu-item-web-design"> <a class="menu-item-link" href="https://www.creative-tim.com/blog/resources/"> Resources </a> </li> <li class="menu-item menu-item-web-design"> <a class="menu-item-link" href="https://www.creative-tim.com/blog/seo/"> SEO </a> </li> <li class="menu-item menu-item-web-design"> <a class="menu-item-link" href="https://www.creative-tim.com/blog/startups/"> Startups </a> </li> <li class="menu-item menu-item-web-design"> <a class="menu-item-link" href="https://www.creative-tim.com/blog/uiux-design/"> UI/UX Design </a> </li> <li class="menu-item menu-item-web-design"> <a class="menu-item-link" href="https://www.creative-tim.com/blog/web-design/"> Web Design </a> </li> <li class="menu-item menu-item-web-design"> <a class="menu-item-link" href="https://www.creative-tim.com/blog/web-development/"> Web Development </a> </li> <li class="menu-item menu-item-web-design"> <a class="menu-item-link" href="https://www.creative-tim.com/blog/tiktok-learning/"> TikTok Learning </a> </li> <li class="menu-item menu-item-web-design"> <a class="menu-item-link" href="https://www.creative-tim.com/blog/educational-tech/"> Educational Tech </a> </li> <li class="menu-item menu-item-web-design"> <a class="menu-item-link" href="https://www.creative-tim.com/blog/web-3-0/"> Web 3 </a> </li> <li class="menu-item menu-item-web-design"> <a class="menu-item-link" href="https://www.creative-tim.com/blog/crypto-news/"> Crypto News </a> </li> <li class="menu-item menu-item-web-design"> <a class="menu-item-link" href="https://www.creative-tim.com/blog/blockchain/"> Blockchain </a> </li> <li class="menu-item menu-item-web-design"> <a class="menu-item-link" href="https://www.creative-tim.com/blog/nft/"> NFT </a> </li> </ul> </nav> </div> <div class="site-content container"> <div class="content-area"> <main class="site-main"> <section class="term container large"> <div class="term-wrapper"> <h1 class="term-name">web design</h1> <div class="term-description"></div> </div> </section> <div class="post-feed"> <article class="post tag-web-development tag-colorful-icons tag-developers tag-google tag-google-sans tag-rounded-corners tag-web-design"> <div class="post-media container large"> <div class="u-placeholder horizontal"> <a class="post-image-link" href="/blog/web-development/material-design-comparison/"> <img class="post-image lazyload u-object-fit" data-srcset="/blog/content/images/size/w400/2023/12/cover--1-.jpg 400w, /blog/content/images/size/w750/2023/12/cover--1-.jpg 750w, /blog/content/images/size/w960/2023/12/cover--1-.jpg 960w, /blog/content/images/size/w1140/2023/12/cover--1-.jpg 1140w, /blog/content/images/size/w1920/2023/12/cover--1-.jpg 1920w" data-sizes="auto" src="/blog/content/images/size/w960/2023/12/cover--1-.jpg" srcset="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="Material Design 1 vs Material Design 2 vs Material Design 3"> </a> </div> </div> <div class="container medium"> <header class="post-header big-title"> <h2 class="post-title"> <a class="post-title-link" href="/blog/web-development/material-design-comparison/">Material Design 1 vs Material Design 2 vs Material Design 3</a> </h2> <div class="post-meta"> <div class="d-block mb-4"> <span class="post-meta-item post-meta-tags"> <a class="post-tag post-tag-web-development" href="https://www.creative-tim.com/blog/web-development/" title="Web Development">Web Development</a> </span> <span class="post-meta-item post-meta-length"> 9 min read </span> </div> <span class="post-meta-item post-meta-date"> Updated: <time datetime="2024-07-02"> 5 months ago </time> </span> <span class="post-meta-item post-meta-date"> Published: <time datetime="2023-12-21"> a year ago </time> </span> </div> </header> <div class="post-excerpt"> It is impossible to overestimate the importance of a user interface (UI) that is both aesthetically pleasing and straightforward to use. Google's Material Design language has become a standard for creating intuitive, flexible, <a class="post-link primary" href="/blog/web-development/material-design-comparison/">Read Now</a> </div> <footer class="post-footer"> <div class="post-author"> <a class="post-author-image-link" href="/blog/author/alexandra-murtaza/"> <img class="post-author-image" src="/blog/content/images/size/w150/2022/02/alexandra_murtaza.png" alt="Alexandra Murtaza"> </a> <div class="post-author-name hidden-xs hidden-sm"> <span class="post-author-by">By: </span> <a class="post-author-name-link" href="/blog/author/alexandra-murtaza/">Alexandra Murtaza</a> </div> </div> <div class="post-action"> <a class="post-link secondary" href="https://getpocket.com/edit?url=https://www.creative-tim.com/blog/web-development/material-design-comparison/" target="_blank" rel="noopener">Read Later</a> </div> </footer> </div> </article> <article class="post tag-web-design tag-black-friday tag-cyper-monday tag-deals tag-sale tag-web-designer tag-web-developer"> <div class="post-media container large"> <div class="u-placeholder horizontal"> <a class="post-image-link" href="/blog/web-design/best-black-friday-deals-developers/"> <img class="post-image lazyload u-object-fit" data-srcset="/blog/content/images/size/w400/2021/11/black-friday-deals-developers-1.jpg 400w, /blog/content/images/size/w750/2021/11/black-friday-deals-developers-1.jpg 750w, /blog/content/images/size/w960/2021/11/black-friday-deals-developers-1.jpg 960w, /blog/content/images/size/w1140/2021/11/black-friday-deals-developers-1.jpg 1140w, /blog/content/images/size/w1920/2021/11/black-friday-deals-developers-1.jpg 1920w" data-sizes="auto" src="/blog/content/images/size/w960/2021/11/black-friday-deals-developers-1.jpg" srcset="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="15+ Top Black Friday & Cyber Monday Deals for Developers and Designers [2023]"> </a> </div> </div> <div class="container medium"> <header class="post-header big-title"> <h2 class="post-title"> <a class="post-title-link" href="/blog/web-design/best-black-friday-deals-developers/">15+ Top Black Friday & Cyber Monday Deals for Developers and Designers [2023]</a> </h2> <div class="post-meta"> <div class="d-block mb-4"> <span class="post-meta-item post-meta-tags"> <a class="post-tag post-tag-web-design" href="https://www.creative-tim.com/blog/web-design/" title="web design">web design</a> </span> <span class="post-meta-item post-meta-length"> 8 min read </span> </div> <span class="post-meta-item post-meta-date"> Updated: <time datetime="2024-11-13"> 11 days ago </time> </span> <span class="post-meta-item post-meta-date"> Published: <time datetime="2023-11-20"> a year ago </time> </span> </div> </header> <div class="post-excerpt"> Black Friday is around the corner! We all know that it is supposed to be the best time of the year to make purchases, and we should all take advantage of it. Why? <a class="post-link primary" href="/blog/web-design/best-black-friday-deals-developers/">Read Now</a> </div> <footer class="post-footer"> <div class="post-author"> <a class="post-author-image-link" href="/blog/author/alexandra-murtaza/"> <img class="post-author-image" src="/blog/content/images/size/w150/2022/02/alexandra_murtaza.png" alt="Alexandra Murtaza"> </a> <div class="post-author-name hidden-xs hidden-sm"> <span class="post-author-by">By: </span> <a class="post-author-name-link" href="/blog/author/alexandra-murtaza/">Alexandra Murtaza</a> </div> </div> <div class="post-action"> <a class="post-link secondary" href="https://getpocket.com/edit?url=https://www.creative-tim.com/blog/web-design/best-black-friday-deals-developers/" target="_blank" rel="noopener">Read Later</a> </div> </footer> </div> </article> <article class="post tag-web-design"> <div class="post-media container large"> <div class="u-placeholder horizontal"> <a class="post-image-link" href="/blog/web-design/books-every-web-designer-should-read/"> <img class="post-image lazyload u-object-fit" data-srcset="/blog/content/images/size/w400/wordpress/2017/07/luke-palmer-305434.jpg 400w, /blog/content/images/size/w750/wordpress/2017/07/luke-palmer-305434.jpg 750w, /blog/content/images/size/w960/wordpress/2017/07/luke-palmer-305434.jpg 960w, /blog/content/images/size/w1140/wordpress/2017/07/luke-palmer-305434.jpg 1140w, /blog/content/images/size/w1920/wordpress/2017/07/luke-palmer-305434.jpg 1920w" data-sizes="auto" src="/blog/content/images/size/w960/wordpress/2017/07/luke-palmer-305434.jpg" srcset="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="50 Books Every Web Designer Should Read"> </a> </div> </div> <div class="container medium"> <header class="post-header big-title"> <h2 class="post-title"> <a class="post-title-link" href="/blog/web-design/books-every-web-designer-should-read/">50 Books Every Web Designer Should Read</a> </h2> <div class="post-meta"> <div class="d-block mb-4"> <span class="post-meta-item post-meta-tags"> <a class="post-tag post-tag-web-design" href="https://www.creative-tim.com/blog/web-design/" title="web design">web design</a> </span> <span class="post-meta-item post-meta-length"> 17 min read </span> </div> <span class="post-meta-item post-meta-date"> Updated: <time datetime="2023-11-24"> a year ago </time> </span> <span class="post-meta-item post-meta-date"> Published: <time datetime="2023-11-03"> a year ago </time> </span> </div> </header> <div class="post-excerpt"> It is well known that the web is constantly changing and evolving and you have to keep up with it. And besides the necessary skills, you have to improve other aspects of your <a class="post-link primary" href="/blog/web-design/books-every-web-designer-should-read/">Read Now</a> </div> <footer class="post-footer"> <div class="post-author"> <a class="post-author-image-link" href="/blog/author/alexandra-murtaza/"> <img class="post-author-image" src="/blog/content/images/size/w150/2022/02/alexandra_murtaza.png" alt="Alexandra Murtaza"> </a> <div class="post-author-name hidden-xs hidden-sm"> <span class="post-author-by">By: </span> <a class="post-author-name-link" href="/blog/author/alexandra-murtaza/">Alexandra Murtaza</a> </div> </div> <div class="post-action"> <a class="post-link secondary" href="https://getpocket.com/edit?url=https://www.creative-tim.com/blog/web-design/books-every-web-designer-should-read/" target="_blank" rel="noopener">Read Later</a> </div> </footer> </div> </article> <article class="post tag-web-design"> <div class="post-media container large"> <div class="u-placeholder horizontal"> <a class="post-image-link" href="/blog/web-design/reasons-seo-web-design-important/"> <img class="post-image lazyload u-object-fit" data-srcset="/blog/content/images/size/w400/wordpress/2020/10/seo-web-design.jpg 400w, /blog/content/images/size/w750/wordpress/2020/10/seo-web-design.jpg 750w, /blog/content/images/size/w960/wordpress/2020/10/seo-web-design.jpg 960w, /blog/content/images/size/w1140/wordpress/2020/10/seo-web-design.jpg 1140w, /blog/content/images/size/w1920/wordpress/2020/10/seo-web-design.jpg 1920w" data-sizes="auto" src="/blog/content/images/size/w960/wordpress/2020/10/seo-web-design.jpg" srcset="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="10 Reasons Why SEO Web Design Is Important For Ecommerce Businesses"> </a> </div> </div> <div class="container medium"> <header class="post-header big-title"> <h2 class="post-title"> <a class="post-title-link" href="/blog/web-design/reasons-seo-web-design-important/">10 Reasons Why SEO Web Design Is Important For Ecommerce Businesses</a> </h2> <div class="post-meta"> <div class="d-block mb-4"> <span class="post-meta-item post-meta-tags"> <a class="post-tag post-tag-web-design" href="https://www.creative-tim.com/blog/web-design/" title="web design">web design</a> </span> <span class="post-meta-item post-meta-length"> 4 min read </span> </div> <span class="post-meta-item post-meta-date"> Updated: <time datetime="2024-09-02"> 3 months ago </time> </span> <span class="post-meta-item post-meta-date"> Published: <time datetime="2023-01-17"> 2 years ago </time> </span> </div> </header> <div class="post-excerpt"> Saying that SEO web design affects your sales means saying nothing. This article will give you ten reasons why SEO Web Design is crucial for your eCommerce online business’s prosperity. SEO <a class="post-link primary" href="/blog/web-design/reasons-seo-web-design-important/">Read Now</a> </div> <footer class="post-footer"> <div class="post-author"> <a class="post-author-image-link" href="/blog/author/alexandra-murtaza/"> <img class="post-author-image" src="/blog/content/images/size/w150/2022/02/alexandra_murtaza.png" alt="Alexandra Murtaza"> </a> <div class="post-author-name hidden-xs hidden-sm"> <span class="post-author-by">By: </span> <a class="post-author-name-link" href="/blog/author/alexandra-murtaza/">Alexandra Murtaza</a> </div> </div> <div class="post-action"> <a class="post-link secondary" href="https://getpocket.com/edit?url=https://www.creative-tim.com/blog/web-design/reasons-seo-web-design-important/" target="_blank" rel="noopener">Read Later</a> </div> </footer> </div> </article> <article class="post tag-web-development tag-blog-tag tag-jekyll tag-web-design tag-wordpress featured"> <div class="post-media container large"> <div class="u-placeholder horizontal"> <a class="post-image-link" href="/blog/web-development/awesome-jekyll-themes-that-you-need-to-try/"> <img class="post-image lazyload u-object-fit" data-srcset="/blog/content/images/size/w400/wordpress/2020/07/webdeveloper-working-jpg.jpg 400w, /blog/content/images/size/w750/wordpress/2020/07/webdeveloper-working-jpg.jpg 750w, /blog/content/images/size/w960/wordpress/2020/07/webdeveloper-working-jpg.jpg 960w, /blog/content/images/size/w1140/wordpress/2020/07/webdeveloper-working-jpg.jpg 1140w, /blog/content/images/size/w1920/wordpress/2020/07/webdeveloper-working-jpg.jpg 1920w" data-sizes="auto" src="/blog/content/images/size/w960/wordpress/2020/07/webdeveloper-working-jpg.jpg" srcset="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="10+ Awesome Jekyll Themes That You Need To Try In 2023"> </a> </div> </div> <div class="container medium"> <header class="post-header big-title"> <h2 class="post-title"> <a class="post-title-link" href="/blog/web-development/awesome-jekyll-themes-that-you-need-to-try/">10+ Awesome Jekyll Themes That You Need To Try In 2023</a> </h2> <div class="post-meta"> <div class="d-block mb-4"> <span class="post-meta-item post-meta-tags"> <a class="post-tag post-tag-web-development" href="https://www.creative-tim.com/blog/web-development/" title="Web Development">Web Development</a> </span> <span class="post-meta-item post-meta-length"> 5 min read </span> </div> <span class="post-meta-item post-meta-date"> Updated: <time datetime="2023-03-27"> 2 years ago </time> </span> <span class="post-meta-item post-meta-date"> Published: <time datetime="2023-01-10"> 2 years ago </time> </span> </div> </header> <div class="post-excerpt"> If you don’t know what Jekyll is or you are curious about how it can help you, Jekyll is one of the most popular SSGs (static site generator) with a large user <a class="post-link primary" href="/blog/web-development/awesome-jekyll-themes-that-you-need-to-try/">Read Now</a> </div> <footer class="post-footer"> <div class="post-author"> <a class="post-author-image-link" href="/blog/author/alexandra-murtaza/"> <img class="post-author-image" src="/blog/content/images/size/w150/2022/02/alexandra_murtaza.png" alt="Alexandra Murtaza"> </a> <div class="post-author-name hidden-xs hidden-sm"> <span class="post-author-by">By: </span> <a class="post-author-name-link" href="/blog/author/alexandra-murtaza/">Alexandra Murtaza</a> </div> </div> <div class="post-action"> <a class="post-link secondary" href="https://getpocket.com/edit?url=https://www.creative-tim.com/blog/web-development/awesome-jekyll-themes-that-you-need-to-try/" target="_blank" rel="noopener">Read Later</a> </div> </footer> </div> </article> <article class="post tag-web-design featured"> <div class="post-media container large"> <div class="u-placeholder horizontal"> <a class="post-image-link" href="/blog/web-design/15-free-coming-soon-page/"> <img class="post-image lazyload u-object-fit" data-srcset="/blog/content/images/size/w400/2021/07/coming-soon.jpg 400w, /blog/content/images/size/w750/2021/07/coming-soon.jpg 750w, /blog/content/images/size/w960/2021/07/coming-soon.jpg 960w, /blog/content/images/size/w1140/2021/07/coming-soon.jpg 1140w, /blog/content/images/size/w1920/2021/07/coming-soon.jpg 1920w" data-sizes="auto" src="/blog/content/images/size/w960/2021/07/coming-soon.jpg" srcset="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="10+ Free Website Coming Soon Template Examples"> </a> </div> </div> <div class="container medium"> <header class="post-header big-title"> <h2 class="post-title"> <a class="post-title-link" href="/blog/web-design/15-free-coming-soon-page/">10+ Free Website Coming Soon Template Examples</a> </h2> <div class="post-meta"> <div class="d-block mb-4"> <span class="post-meta-item post-meta-tags"> <a class="post-tag post-tag-web-design" href="https://www.creative-tim.com/blog/web-design/" title="web design">web design</a> </span> <span class="post-meta-item post-meta-length"> 5 min read </span> </div> <span class="post-meta-item post-meta-date"> Updated: <time datetime="2024-09-03"> 3 months ago </time> </span> <span class="post-meta-item post-meta-date"> Published: <time datetime="2022-12-24"> 2 years ago </time> </span> </div> </header> <div class="post-excerpt"> Why use a website coming soon template? Because a coming soon page is the perfect way to let users know that a website will be available soon, and by using a website template, <a class="post-link primary" href="/blog/web-design/15-free-coming-soon-page/">Read Now</a> </div> <footer class="post-footer"> <div class="post-author"> <a class="post-author-image-link" href="/blog/author/diana/"> <img class="post-author-image" src="https://0.gravatar.com/avatar/365f26bcafb13c1525dc765b7b0dbcd5?s=512&d=monsterid&r=g" alt="Diana Caliman"> </a> <div class="post-author-name hidden-xs hidden-sm"> <span class="post-author-by">By: </span> <a class="post-author-name-link" href="/blog/author/diana/">Diana Caliman</a> </div> </div> <div class="post-action"> <a class="post-link secondary" href="https://getpocket.com/edit?url=https://www.creative-tim.com/blog/web-design/15-free-coming-soon-page/" target="_blank" rel="noopener">Read Later</a> </div> </footer> </div> </article> <article class="post tag-educational-ui-ux tag-creative-tim tag-web-design tag-video-tutorial"> <div class="post-media container large"> <div class="u-placeholder horizontal"> <a class="post-image-link" href="/blog/educational-ui-ux/ui-ux-design-course-coming-soon/"> <img class="post-image lazyload u-object-fit" data-srcset="/blog/content/images/size/w400/2022/05/course-cover-blog--1-.jpg 400w, /blog/content/images/size/w750/2022/05/course-cover-blog--1-.jpg 750w, /blog/content/images/size/w960/2022/05/course-cover-blog--1-.jpg 960w, /blog/content/images/size/w1140/2022/05/course-cover-blog--1-.jpg 1140w, /blog/content/images/size/w1920/2022/05/course-cover-blog--1-.jpg 1920w" data-sizes="auto" src="/blog/content/images/size/w960/2022/05/course-cover-blog--1-.jpg" srcset="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="The Ultimate UI/UX Design Course is coming soon!"> </a> </div> </div> <div class="container medium"> <header class="post-header big-title"> <h2 class="post-title"> <a class="post-title-link" href="/blog/educational-ui-ux/ui-ux-design-course-coming-soon/">The Ultimate UI/UX Design Course is coming soon!</a> </h2> <div class="post-meta"> <div class="d-block mb-4"> <span class="post-meta-item post-meta-tags"> <a class="post-tag post-tag-educational-ui-ux" href="https://www.creative-tim.com/blog/educational-ui-ux/" title="Educational UI/UX">Educational UI/UX</a> </span> <span class="post-meta-item post-meta-length"> 2 min read </span> </div> <span class="post-meta-item post-meta-date"> Updated: <time datetime="2022-05-12"> 3 years ago </time> </span> <span class="post-meta-item post-meta-date"> Published: <time datetime="2022-05-12"> 3 years ago </time> </span> </div> </header> <div class="post-excerpt"> We are happily announcing that our UI/UX Design course will be launched soon. If you are a UI/UX designer beginner or a web developer who wants to get a clearer picture <a class="post-link primary" href="/blog/educational-ui-ux/ui-ux-design-course-coming-soon/">Read Now</a> </div> <footer class="post-footer"> <div class="post-author"> <a class="post-author-image-link" href="/blog/author/alexandra-murtaza/"> <img class="post-author-image" src="/blog/content/images/size/w150/2022/02/alexandra_murtaza.png" alt="Alexandra Murtaza"> </a> <div class="post-author-name hidden-xs hidden-sm"> <span class="post-author-by">By: </span> <a class="post-author-name-link" href="/blog/author/alexandra-murtaza/">Alexandra Murtaza</a> </div> </div> <div class="post-action"> <a class="post-link secondary" href="https://getpocket.com/edit?url=https://www.creative-tim.com/blog/educational-ui-ux/ui-ux-design-course-coming-soon/" target="_blank" rel="noopener">Read Later</a> </div> </footer> </div> </article> <article class="post tag-resources tag-educational-ui-ux tag-web-design"> <div class="post-media container large"> <div class="u-placeholder horizontal"> <a class="post-image-link" href="/blog/resources/inspirational-tools-every-web-designer/"> <img class="post-image lazyload u-object-fit" data-srcset="/blog/content/images/size/w400/2022/05/web-designer-tools.jpg 400w, /blog/content/images/size/w750/2022/05/web-designer-tools.jpg 750w, /blog/content/images/size/w960/2022/05/web-designer-tools.jpg 960w, /blog/content/images/size/w1140/2022/05/web-designer-tools.jpg 1140w, /blog/content/images/size/w1920/2022/05/web-designer-tools.jpg 1920w" data-sizes="auto" src="/blog/content/images/size/w960/2022/05/web-designer-tools.jpg" srcset="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="6 Inspirational Tools Every Web Designer Should Know About [2022]"> </a> </div> </div> <div class="container medium"> <header class="post-header big-title"> <h2 class="post-title"> <a class="post-title-link" href="/blog/resources/inspirational-tools-every-web-designer/">6 Inspirational Tools Every Web Designer Should Know About [2022]</a> </h2> <div class="post-meta"> <div class="d-block mb-4"> <span class="post-meta-item post-meta-tags"> <a class="post-tag post-tag-resources" href="https://www.creative-tim.com/blog/resources/" title="Resources">Resources</a> </span> <span class="post-meta-item post-meta-length"> 4 min read </span> </div> <span class="post-meta-item post-meta-date"> Updated: <time datetime="2022-05-03"> 3 years ago </time> </span> <span class="post-meta-item post-meta-date"> Published: <time datetime="2022-05-03"> 3 years ago </time> </span> </div> </header> <div class="post-excerpt"> A challenge that many web designers face is the ability to be creative - whether brainstorming, collaborating, or prototyping. Unless you have an empty journal at hand, you’re often limited to opening <a class="post-link primary" href="/blog/resources/inspirational-tools-every-web-designer/">Read Now</a> </div> <footer class="post-footer"> <div class="post-author"> <a class="post-author-image-link" href="/blog/author/alexandra-murtaza/"> <img class="post-author-image" src="/blog/content/images/size/w150/2022/02/alexandra_murtaza.png" alt="Alexandra Murtaza"> </a> <div class="post-author-name hidden-xs hidden-sm"> <span class="post-author-by">By: </span> <a class="post-author-name-link" href="/blog/author/alexandra-murtaza/">Alexandra Murtaza</a> </div> </div> <div class="post-action"> <a class="post-link secondary" href="https://getpocket.com/edit?url=https://www.creative-tim.com/blog/resources/inspirational-tools-every-web-designer/" target="_blank" rel="noopener">Read Later</a> </div> </footer> </div> </article> <article class="post tag-educational-ui-ux tag-web-design tag-colors"> <div class="post-media container large"> <div class="u-placeholder horizontal"> <a class="post-image-link" href="/blog/educational-ui-ux/inspiring-website-color-schemes/"> <img class="post-image lazyload u-object-fit" data-srcset="/blog/content/images/size/w400/2022/03/color-scheme-website.jpg 400w, /blog/content/images/size/w750/2022/03/color-scheme-website.jpg 750w, /blog/content/images/size/w960/2022/03/color-scheme-website.jpg 960w, /blog/content/images/size/w1140/2022/03/color-scheme-website.jpg 1140w, /blog/content/images/size/w1920/2022/03/color-scheme-website.jpg 1920w" data-sizes="auto" src="/blog/content/images/size/w960/2022/03/color-scheme-website.jpg" srcset="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="7 Inspiring Website Color Schemes and Trends for 2022"> </a> </div> </div> <div class="container medium"> <header class="post-header big-title"> <h2 class="post-title"> <a class="post-title-link" href="/blog/educational-ui-ux/inspiring-website-color-schemes/">7 Inspiring Website Color Schemes and Trends for 2022</a> </h2> <div class="post-meta"> <div class="d-block mb-4"> <span class="post-meta-item post-meta-tags"> <a class="post-tag post-tag-educational-ui-ux" href="https://www.creative-tim.com/blog/educational-ui-ux/" title="Educational UI/UX">Educational UI/UX</a> </span> <span class="post-meta-item post-meta-length"> 5 min read </span> </div> <span class="post-meta-item post-meta-date"> Updated: <time datetime="2022-03-31"> 3 years ago </time> </span> <span class="post-meta-item post-meta-date"> Published: <time datetime="2022-03-31"> 3 years ago </time> </span> </div> </header> <div class="post-excerpt"> Color is a vital part of any visual design — it can set the tone, influence emotions, and establish trust. Color psychology shows that the colors of your site can affect how your visitors <a class="post-link primary" href="/blog/educational-ui-ux/inspiring-website-color-schemes/">Read Now</a> </div> <footer class="post-footer"> <div class="post-author"> <a class="post-author-image-link" href="/blog/author/guest-post/"> <img class="post-author-image" src="https://0.gravatar.com/avatar/986c1a4a96c44a3017304d6936f37609?s=512&d=monsterid&r=g" alt="Guest Post"> </a> <div class="post-author-name hidden-xs hidden-sm"> <span class="post-author-by">By: </span> <a class="post-author-name-link" href="/blog/author/guest-post/">Guest Post</a> </div> </div> <div class="post-action"> <a class="post-link secondary" href="https://getpocket.com/edit?url=https://www.creative-tim.com/blog/educational-ui-ux/inspiring-website-color-schemes/" target="_blank" rel="noopener">Read Later</a> </div> </footer> </div> </article> <article class="post tag-web-design tag-bootstrap tag-freebies tag-laravel tag-laravel-templates"> <div class="post-media container large"> <div class="u-placeholder horizontal"> <a class="post-image-link" href="/blog/web-design/free-dashboards-templates-laravel/"> <img class="post-image lazyload u-object-fit" data-srcset="/blog/content/images/size/w400/wordpress/2020/04/blog-3.jpg 400w, /blog/content/images/size/w750/wordpress/2020/04/blog-3.jpg 750w, /blog/content/images/size/w960/wordpress/2020/04/blog-3.jpg 960w, /blog/content/images/size/w1140/wordpress/2020/04/blog-3.jpg 1140w, /blog/content/images/size/w1920/wordpress/2020/04/blog-3.jpg 1920w" data-sizes="auto" src="/blog/content/images/size/w960/wordpress/2020/04/blog-3.jpg" srcset="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="10+ Free Dashboards and Templates for Laravel [2024]"> </a> </div> </div> <div class="container medium"> <header class="post-header big-title"> <h2 class="post-title"> <a class="post-title-link" href="/blog/web-design/free-dashboards-templates-laravel/">10+ Free Dashboards and Templates for Laravel [2024]</a> </h2> <div class="post-meta"> <div class="d-block mb-4"> <span class="post-meta-item post-meta-tags"> <a class="post-tag post-tag-web-design" href="https://www.creative-tim.com/blog/web-design/" title="web design">web design</a> </span> <span class="post-meta-item post-meta-length"> 10 min read </span> </div> <span class="post-meta-item post-meta-date"> Updated: <time datetime="2024-08-28"> 3 months ago </time> </span> <span class="post-meta-item post-meta-date"> Published: <time datetime="2022-03-16"> 3 years ago </time> </span> </div> </header> <div class="post-excerpt"> In this quickly evolving technological sector, Laravel has gained continuous popularity in building unique web applications over the last few years. If you are one of the Laravel fans, then you probably know <a class="post-link primary" href="/blog/web-design/free-dashboards-templates-laravel/">Read Now</a> </div> <footer class="post-footer"> <div class="post-author"> <a class="post-author-image-link" href="/blog/author/alexandra-murtaza/"> <img class="post-author-image" src="/blog/content/images/size/w150/2022/02/alexandra_murtaza.png" alt="Alexandra Murtaza"> </a> <div class="post-author-name hidden-xs hidden-sm"> <span class="post-author-by">By: </span> <a class="post-author-name-link" href="/blog/author/alexandra-murtaza/">Alexandra Murtaza</a> </div> </div> <div class="post-action"> <a class="post-link secondary" href="https://getpocket.com/edit?url=https://www.creative-tim.com/blog/web-design/free-dashboards-templates-laravel/" target="_blank" rel="noopener">Read Later</a> </div> </footer> </div> </article> <article class="post tag-educational-ui-ux tag-resources tag-web-design tag-trends"> <div class="post-media container large"> <div class="u-placeholder horizontal"> <a class="post-image-link" href="/blog/educational-ui-ux/best-web-design-trends/"> <img class="post-image lazyload u-object-fit" data-srcset="/blog/content/images/size/w400/2022/02/trends-blog.jpg 400w, /blog/content/images/size/w750/2022/02/trends-blog.jpg 750w, /blog/content/images/size/w960/2022/02/trends-blog.jpg 960w, /blog/content/images/size/w1140/2022/02/trends-blog.jpg 1140w, /blog/content/images/size/w1920/2022/02/trends-blog.jpg 1920w" data-sizes="auto" src="/blog/content/images/size/w960/2022/02/trends-blog.jpg" srcset="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="14 Web Design Trends For 2022 That You Should Know About"> </a> </div> </div> <div class="container medium"> <header class="post-header big-title"> <h2 class="post-title"> <a class="post-title-link" href="/blog/educational-ui-ux/best-web-design-trends/">14 Web Design Trends For 2022 That You Should Know About</a> </h2> <div class="post-meta"> <div class="d-block mb-4"> <span class="post-meta-item post-meta-tags"> <a class="post-tag post-tag-educational-ui-ux" href="https://www.creative-tim.com/blog/educational-ui-ux/" title="Educational UI/UX">Educational UI/UX</a> </span> <span class="post-meta-item post-meta-length"> 6 min read </span> </div> <span class="post-meta-item post-meta-date"> Updated: <time datetime="2022-02-15"> 3 years ago </time> </span> <span class="post-meta-item post-meta-date"> Published: <time datetime="2022-02-15"> 3 years ago </time> </span> </div> </header> <div class="post-excerpt"> Websites are no longer simply a portal to display content. Designers have started treating them as forms of art that amalgamate the perfect mix of play, delight, interaction, and a way to show <a class="post-link primary" href="/blog/educational-ui-ux/best-web-design-trends/">Read Now</a> </div> <footer class="post-footer"> <div class="post-author"> <a class="post-author-image-link" href="/blog/author/alexandra-murtaza/"> <img class="post-author-image" src="/blog/content/images/size/w150/2022/02/alexandra_murtaza.png" alt="Alexandra Murtaza"> </a> <div class="post-author-name hidden-xs hidden-sm"> <span class="post-author-by">By: </span> <a class="post-author-name-link" href="/blog/author/alexandra-murtaza/">Alexandra Murtaza</a> </div> </div> <div class="post-action"> <a class="post-link secondary" href="https://getpocket.com/edit?url=https://www.creative-tim.com/blog/educational-ui-ux/best-web-design-trends/" target="_blank" rel="noopener">Read Later</a> </div> </footer> </div> </article> <article class="post tag-web-design tag-hierarchy tag-homepage tag-layout tag-mobile-optimization tag-website tag-website-design"> <div class="post-media container large"> <div class="u-placeholder horizontal"> <a class="post-image-link" href="/blog/web-design/web-design-tips-outstanding-site/"> <img class="post-image lazyload u-object-fit" data-srcset="/blog/content/images/size/w400/wordpress/2020/11/tip-for-web-design.jpg 400w, /blog/content/images/size/w750/wordpress/2020/11/tip-for-web-design.jpg 750w, /blog/content/images/size/w960/wordpress/2020/11/tip-for-web-design.jpg 960w, /blog/content/images/size/w1140/wordpress/2020/11/tip-for-web-design.jpg 1140w, /blog/content/images/size/w1920/wordpress/2020/11/tip-for-web-design.jpg 1920w" data-sizes="auto" src="/blog/content/images/size/w960/wordpress/2020/11/tip-for-web-design.jpg" srcset="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="6 Web Design Tips for an Outstanding Site"> </a> </div> </div> <div class="container medium"> <header class="post-header big-title"> <h2 class="post-title"> <a class="post-title-link" href="/blog/web-design/web-design-tips-outstanding-site/">6 Web Design Tips for an Outstanding Site</a> </h2> <div class="post-meta"> <div class="d-block mb-4"> <span class="post-meta-item post-meta-tags"> <a class="post-tag post-tag-web-design" href="https://www.creative-tim.com/blog/web-design/" title="web design">web design</a> </span> <span class="post-meta-item post-meta-length"> 5 min read </span> </div> <span class="post-meta-item post-meta-date"> Updated: <time datetime="2022-07-18"> 2 years ago </time> </span> <span class="post-meta-item post-meta-date"> Published: <time datetime="2022-02-07"> 3 years ago </time> </span> </div> </header> <div class="post-excerpt"> The Internet is a cornerstone of the modern world. There is no aspect of our lives that hasn’t been touched or changed by it. Reception of the Internet’s influence <a class="post-link primary" href="/blog/web-design/web-design-tips-outstanding-site/">Read Now</a> </div> <footer class="post-footer"> <div class="post-author"> <a class="post-author-image-link" href="/blog/author/alexandra-murtaza/"> <img class="post-author-image" src="/blog/content/images/size/w150/2022/02/alexandra_murtaza.png" alt="Alexandra Murtaza"> </a> <div class="post-author-name hidden-xs hidden-sm"> <span class="post-author-by">By: </span> <a class="post-author-name-link" href="/blog/author/alexandra-murtaza/">Alexandra Murtaza</a> </div> </div> <div class="post-action"> <a class="post-link secondary" href="https://getpocket.com/edit?url=https://www.creative-tim.com/blog/web-design/web-design-tips-outstanding-site/" target="_blank" rel="noopener">Read Later</a> </div> </footer> </div> </article> <article class="post tag-educational-ui-ux tag-book tag-tutorial tag-web-design featured"> <div class="post-media container large"> <div class="u-placeholder horizontal"> <a class="post-image-link" href="/blog/educational-ui-ux/best-web-design-books/"> <img class="post-image lazyload u-object-fit" data-srcset="/blog/content/images/size/w400/2022/01/cover-blog.jpg 400w, /blog/content/images/size/w750/2022/01/cover-blog.jpg 750w, /blog/content/images/size/w960/2022/01/cover-blog.jpg 960w, /blog/content/images/size/w1140/2022/01/cover-blog.jpg 1140w, /blog/content/images/size/w1920/2022/01/cover-blog.jpg 1920w" data-sizes="auto" src="/blog/content/images/size/w960/2022/01/cover-blog.jpg" srcset="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="10+ Best UI/UX Books that Every Designer Should Read [2024]"> </a> </div> </div> <div class="container medium"> <header class="post-header big-title"> <h2 class="post-title"> <a class="post-title-link" href="/blog/educational-ui-ux/best-web-design-books/">10+ Best UI/UX Books that Every Designer Should Read [2024]</a> </h2> <div class="post-meta"> <div class="d-block mb-4"> <span class="post-meta-item post-meta-tags"> <a class="post-tag post-tag-educational-ui-ux" href="https://www.creative-tim.com/blog/educational-ui-ux/" title="Educational UI/UX">Educational UI/UX</a> </span> <span class="post-meta-item post-meta-length"> 9 min read </span> </div> <span class="post-meta-item post-meta-date"> Updated: <time datetime="2024-10-23"> a month ago </time> </span> <span class="post-meta-item post-meta-date"> Published: <time datetime="2022-01-27"> 3 years ago </time> </span> </div> </header> <div class="post-excerpt"> In this article, we’ve put together a list of our favorite UI/UX design books that will help any web designer who has just started their professional journey or web developers who <a class="post-link primary" href="/blog/educational-ui-ux/best-web-design-books/">Read Now</a> </div> <footer class="post-footer"> <div class="post-author"> <a class="post-author-image-link" href="/blog/author/alexandra-murtaza/"> <img class="post-author-image" src="/blog/content/images/size/w150/2022/02/alexandra_murtaza.png" alt="Alexandra Murtaza"> </a> <div class="post-author-name hidden-xs hidden-sm"> <span class="post-author-by">By: </span> <a class="post-author-name-link" href="/blog/author/alexandra-murtaza/">Alexandra Murtaza</a> </div> </div> <div class="post-action"> <a class="post-link secondary" href="https://getpocket.com/edit?url=https://www.creative-tim.com/blog/educational-ui-ux/best-web-design-books/" target="_blank" rel="noopener">Read Later</a> </div> </footer> </div> </article> <article class="post tag-creative-tim tag-educational-ui-ux tag-web-design tag-book featured"> <div class="post-media container large"> <div class="u-placeholder horizontal"> <a class="post-image-link" href="/blog/creative-tim/book-fundamentals-creating-ui-ux/"> <img class="post-image lazyload u-object-fit" data-srcset="/blog/content/images/size/w400/2022/01/cover--3-.jpg 400w, /blog/content/images/size/w750/2022/01/cover--3-.jpg 750w, /blog/content/images/size/w960/2022/01/cover--3-.jpg 960w, /blog/content/images/size/w1140/2022/01/cover--3-.jpg 1140w, /blog/content/images/size/w1920/2022/01/cover--3-.jpg 1920w" data-sizes="auto" src="/blog/content/images/size/w960/2022/01/cover--3-.jpg" srcset="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="Book Release: Fundamentals of Creating a Great UI/UX by Creative Tim"> </a> </div> </div> <div class="container medium"> <header class="post-header big-title"> <h2 class="post-title"> <a class="post-title-link" href="/blog/creative-tim/book-fundamentals-creating-ui-ux/">Book Release: Fundamentals of Creating a Great UI/UX by Creative Tim</a> </h2> <div class="post-meta"> <div class="d-block mb-4"> <span class="post-meta-item post-meta-tags"> <a class="post-tag post-tag-creative-tim" href="https://www.creative-tim.com/blog/creative-tim/" title="Creative Tim">Creative Tim</a> </span> <span class="post-meta-item post-meta-length"> 4 min read </span> </div> <span class="post-meta-item post-meta-date"> Updated: <time datetime="2023-11-06"> a year ago </time> </span> <span class="post-meta-item post-meta-date"> Published: <time datetime="2022-01-21"> 3 years ago </time> </span> </div> </header> <div class="post-excerpt"> We are so excited to announce that the pre-orders for our upcoming book, "Fundamentals of Creating a Great UI/UX", are already available starting from this week. With this new project, <a class="post-link primary" href="/blog/creative-tim/book-fundamentals-creating-ui-ux/">Read Now</a> </div> <footer class="post-footer"> <div class="post-author"> <a class="post-author-image-link" href="/blog/author/alexandra-murtaza/"> <img class="post-author-image" src="/blog/content/images/size/w150/2022/02/alexandra_murtaza.png" alt="Alexandra Murtaza"> </a> <div class="post-author-name hidden-xs hidden-sm"> <span class="post-author-by">By: </span> <a class="post-author-name-link" href="/blog/author/alexandra-murtaza/">Alexandra Murtaza</a> </div> </div> <div class="post-action"> <a class="post-link secondary" href="https://getpocket.com/edit?url=https://www.creative-tim.com/blog/creative-tim/book-fundamentals-creating-ui-ux/" target="_blank" rel="noopener">Read Later</a> </div> </footer> </div> </article> <article class="post tag-web-design tag-3d tag-3d-illustrations tag-animations tag-colors tag-dark-mode tag-glassmorphism tag-gradients tag-illustrations tag-minimalism tag-mobile-first-design tag-neumorphism tag-textures tag-typography tag-web-development"> <div class="post-media container large"> <div class="u-placeholder horizontal"> <a class="post-image-link" href="/blog/web-design/web-design-trends/"> <img class="post-image lazyload u-object-fit" data-srcset="/blog/content/images/size/w400/wordpress/2019/01/cover-2.png 400w, /blog/content/images/size/w750/wordpress/2019/01/cover-2.png 750w, /blog/content/images/size/w960/wordpress/2019/01/cover-2.png 960w, /blog/content/images/size/w1140/wordpress/2019/01/cover-2.png 1140w, /blog/content/images/size/w1920/wordpress/2019/01/cover-2.png 1920w" data-sizes="auto" src="/blog/content/images/size/w960/wordpress/2019/01/cover-2.png" srcset="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="18 Web Design Trends for 2022"> </a> </div> </div> <div class="container medium"> <header class="post-header big-title"> <h2 class="post-title"> <a class="post-title-link" href="/blog/web-design/web-design-trends/">18 Web Design Trends for 2022</a> </h2> <div class="post-meta"> <div class="d-block mb-4"> <span class="post-meta-item post-meta-tags"> <a class="post-tag post-tag-web-design" href="https://www.creative-tim.com/blog/web-design/" title="web design">web design</a> </span> <span class="post-meta-item post-meta-length"> 10 min read </span> </div> <span class="post-meta-item post-meta-date"> Updated: <time datetime="2024-07-25"> 4 months ago </time> </span> <span class="post-meta-item post-meta-date"> Published: <time datetime="2022-01-20"> 3 years ago </time> </span> </div> </header> <div class="post-excerpt"> The line between ourselves and our digital twins is blurring more and more; therefore, users are looking for realistic designs focused on purpose, not just good looks. This is the result of our <a class="post-link primary" href="/blog/web-design/web-design-trends/">Read Now</a> </div> <footer class="post-footer"> <div class="post-author"> <a class="post-author-image-link" href="/blog/author/alexandra-murtaza/"> <img class="post-author-image" src="/blog/content/images/size/w150/2022/02/alexandra_murtaza.png" alt="Alexandra Murtaza"> </a> <div class="post-author-name hidden-xs hidden-sm"> <span class="post-author-by">By: </span> <a class="post-author-name-link" href="/blog/author/alexandra-murtaza/">Alexandra Murtaza</a> </div> </div> <div class="post-action"> <a class="post-link secondary" href="https://getpocket.com/edit?url=https://www.creative-tim.com/blog/web-design/web-design-trends/" target="_blank" rel="noopener">Read Later</a> </div> </footer> </div> </article> </div> <nav class="pagination container large"> <div class="pagination-left"> </div> <span class="page-number hidden-xs hidden-sm">Page 1 of 26</span> <div class="pagination-right"> <a class="older-posts button-arrow button-arrow-right" href="/blog/web-design/page/2/"> Older Posts <i class="button-arrow-icon icon icon-arrow-right"></i> </a> </div> </nav> </main> </div> </div> <footer class="site-footer container"> <div> <a class="logo" href="https://www.creative-tim.com/" target="_blank"> <img class="logo-image mb-5 lg:mb-32" src="https://localhost:2368/content/images/2023/02/logo-creative-tim-black.png" alt="Creative Tim"> <img class="logo-image white mb-5 lg:mb-32" src="https://s3.amazonaws.com/creativetim_bucket/static-assets/logo-ct-blog-white.png"> </a> <p class="text-sm text-gray-600 dark:text-gray-400 mb-5 lg:mb-0"> © <script>document.write(new Date().getFullYear())</script><a href="https://www.creative-tim.com/" target="_blank" rel="noopener">  Creative Tim</a>, made with ❤️ for a better web. </a> </p> </div> <ul class="nav block md:flex flex-row"> <li class="text-start sm:mb-0 mb-4"> <div> <h6 class="mb-4 text-sm font-semibold uppercase text-gray-600">Company</h6> <ul class="flex-column mr-6"> <li class="mb-4"> <a class="text-gray-600 hover:text-gray-700 dark:text-gray-400" href="https://www.creative-tim.com/presentation" rel="nofollow" target="_blank"> About us </a> </li> <li class="mb-4"> <a class="text-gray-600 hover:text-gray-700 dark:text-gray-400" href="https://www.creative-tim.com/templates/free" rel="nofollow" target="_blank"> Freebies </a> </li> <li class="mb-4"> <a class="text-gray-600 hover:text-gray-700 dark:text-gray-400" href="https://www.creative-tim.com/templates/premium" rel="nofollow" target="_blank"> Premium </a> </li> <li class="mb-4"> <a class="text-gray-600 hover:text-gray-700 dark:text-gray-400" href="https://www.creative-tim.com/blog" rel="nofollow" target="_blank"> Blog </a> </li> <li class="mb-4"> <a class="text-gray-600 hover:text-gray-700 dark:text-gray-400" href="https://www.creative-tim.com/affiliates/new" rel="nofollow" target="_blank"> Affiliate Program </a> </li> <li class="mb-4"> <a class="text-gray-600 hover:text-gray-700 dark:text-gray-400" href="https://www.creative-tim.com/coupon" rel="nofollow" target="_blank"> Get coupon </a> </li> </ul> </div> </li> <li class="text-start md:ml-4 lg:ml-5 sm:mb-0 mb-4"> <div> <h6 class="mb-4 text-sm font-semibold uppercase text-gray-600">Help and Support</h6> <ul class="flex-column mr-6"> <li class="mb-4"> <a class="text-gray-600 hover:text-gray-700 dark:text-gray-400" href="https://www.creative-tim.com/knowledge-center" rel="nofollow" target="_blank"> Knowledge Center </a> </li> <li class="mb-4"> <a class="text-gray-600 hover:text-gray-700 dark:text-gray-400" href="https://www.creative-tim.com/contact-us" target="_blank"> Contact Us </a> </li> <li class="mb-4"> <a class="text-gray-600 hover:text-gray-700 dark:text-gray-400" href="https://www.creative-tim.com/support-terms" target="_blank"> Premium Support </a> </li> <li class="mb-4"> <a class="text-gray-600 hover:text-gray-700 dark:text-gray-400" href="https://www.creative-tim.com/sponsorships" rel="nofollow" target="_blank"> Sponsorship </a> </li> <li class="mb-4"> <a class="text-gray-600 hover:text-gray-700 dark:text-gray-400" href="https://www.creative-tim.com/services/updivision?ref=astro-ecommerce" rel="nofollow" target="_blank"> Custom Development </a> </li> </ul> </div> </li> <li class="text-start lg:ml-5 md:ml-4 sm:mb-0 mb-4"> <div> <h6 class="mb-4 text-sm font-semibold uppercase text-gray-600">Legal</h6> <ul class="flex-column mr-6"> <li class="mb-4"> <a class="text-gray-600 hover:text-gray-700 dark:text-gray-400" href="https://www.creative-tim.com/knowledge-center/terml-of-service/" rel="nofollow" target="_blank"> Terms & Conditions </a> </li> <li class="mb-4"> <a class="text-gray-600 hover:text-gray-700 dark:text-gray-400" href="https://www.creative-tim.com/knowledge-center/privacy-policy/" target="_blank"> Privacy Policy </a> </li> <li class="mb-4"> <a class="text-gray-600 hover:text-gray-700 dark:text-gray-400" href="https://www.creative-tim.com/license" target="_blank"> Licenses </a> </li> </ul> </div> </li> <li class="text-start lg:ml-5 md:ml-4 sm:mb-0 mb-4"> <div> <h6 class="mb-4 text-sm font-semibold uppercase text-gray-600">Resources</h6> <ul class="flex-column mr-6"> <li class="mb-4"> <a class="text-gray-600 hover:text-gray-700 dark:text-gray-400" href="https://www.creative-tim.com/jobs" rel="nofollow" target="_blank">Jobs</a> </li> <li class="mb-4"> <a class="text-gray-600 hover:text-gray-700 dark:text-gray-400" href="https://www.creative-tim.com/cheatsheet/bootstrap4" rel="nofollow" target="_blank">Bootstrap Cheat Sheet</a> </li> <li class="mb-4"> <a class="text-gray-600 hover:text-gray-700 dark:text-gray-400" href="https://www.creative-tim.com/tools" rel="nofollow" target="_blank">Third-Party Tools</a> </li> <li class="mb-4"> <a class="text-gray-600 hover:text-gray-700 dark:text-gray-400" href="https://iradesign.io/" rel="nofollow" target="_blank">Illustrations</a> </li> <li class="mb-4"> <a class="text-gray-600 hover:text-gray-700 dark:text-gray-400" href="https://www.creative-tim.com/bits" rel="nofollow" target="_blank">Bits</a> </li> <li class="mb-4"> <a class="text-gray-600 hover:text-gray-700 dark:text-gray-400" href="https://www.bluehost.com/?utm_medium=affiliate&irpid=105&clickid=P99C105S645N0B9A2D4499E0000V100&pb=affiliate_nonpromo&source=IR&utm_source=IR" rel="nofollow" target="_blank">Bluehost</a> </li> <li class="mb-4"> <a class="text-gray-600 hover:text-gray-700 dark:text-gray-400" href="https://www.digitalocean.com/?refcode=276af09d9975&utm_campaign=Referral_Invite&utm_medium=Referral_Program&utm_source=CopyPaste" rel="nofollow" target="_blank">Digital Ocean</a> </li> <li class="mb-4"> <a class="text-gray-600 hover:text-gray-700 dark:text-gray-400" href="https://www.creative-tim.com/gallery/get-shit-done-pro" rel="nofollow" target="_blank">Made with Creative Tim</a> </li> </ul> </div> </li> </ul> </footer> </div> <div class="dimmer"></div> <div class="off-canvas"> <div class="canvas-close"> <i class="canvas-icon icon icon-window-close"></i> </div> <div class="mobile-menu"></div> </div> <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"> </script> <script src="/blog/assets/built/main.min.js?v=bc77caee98"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/components/prism-core.min.js" integrity="sha512-9khQRAUBYEJDCDVP2yw3LRUQvjJ0Pjx0EShmaQjcHa6AXiOv6qHQu9lCAIR8O+/D8FtaCoJ2c0Tf9Xo7hYH01Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/plugins/autoloader/prism-autoloader.min.js" integrity="sha512-fTl/qcO1VgvKtOMApX2PdZzkziyr2stM65GYPLGuYMnuMm1z2JLJG6XVU7C/mR+E7xBUqCivykuhlzfqxXBXbg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <script src="https://polyfill.io/v3/polyfill.min.js?features=Promise%2CObject.entries%2CObject.assign"></script> <script src="https://cdn.jsdelivr.net/npm/algoliasearch@4.14.3/dist/algoliasearch.umd.js" integrity="sha256-xpIeHMyr5dPVIcLjKZ9plxUrg4lFJ11AMdoPLDEYtPk=" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script> <script type="text/javascript"> docsearch({ container: '#docsearch', appId: 'H5FHEK3TTR', indexName: 'creative-tim', apiKey: 'a322bdccce45153c3270b08da1a1c6e7', debug: true }); </script> <script type="text/javascript"> var prevScrollpos = window.pageYOffset; window.onscroll = function() { var currentScrollPos = window.pageYOffset; if (prevScrollpos > currentScrollPos) { document.getElementById("navbar").style.top = "0"; } else { document.getElementById("navbar").style.top = "-135px"; } prevScrollpos = currentScrollPos; } </script> </body> </html>

CINXE.COM

web design - Creative Tim's Blog - Fully coded design resources for web developers