{"id":1514,"date":"2023-01-04T05:55:33","date_gmt":"2023-01-04T05:55:33","guid":{"rendered":"https:\/\/www.chittlesoft.com\/blog\/?p=1514"},"modified":"2024-08-07T12:35:03","modified_gmt":"2024-08-07T12:35:03","slug":"latest-website-design-trends-our-top-10-for-2023","status":"publish","type":"post","link":"https:\/\/www.chittlesoft.com\/blog\/latest-website-design-trends-our-top-10-for-2023\/","title":{"rendered":"Latest Website Design Trends: Our Top 10 for 2023"},"content":{"rendered":"\n<figure class=\"wp-block-image size-full is-resized\"><img fetchpriority=\"high\" decoding=\"async\" src=\"https:\/\/www.chittlesoft.com\/blog\/wp-content\/uploads\/2022\/02\/Blog-78.jpg\" alt=\"\" class=\"wp-image-7269\" width=\"1200\" height=\"533\" srcset=\"https:\/\/www.chittlesoft.com\/blog\/wp-content\/uploads\/2022\/02\/Blog-78.jpg 770w, https:\/\/www.chittlesoft.com\/blog\/wp-content\/uploads\/2022\/02\/Blog-78-300x133.jpg 300w, https:\/\/www.chittlesoft.com\/blog\/wp-content\/uploads\/2022\/02\/Blog-78-768x341.jpg 768w, https:\/\/www.chittlesoft.com\/blog\/wp-content\/uploads\/2022\/02\/Blog-78-155x69.jpg 155w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" \/><\/figure>\n\n\n\n<p><span style=\"font-weight: 400;\">Is your website aligned with the latest website design trends and ready to beat the competition in 2023? Keep reading to see if it\u2019s time for an update\u2014which could mean a few quick changes, or a completely fresh look.&nbsp;<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">For organizations across industries, the start of a new year is a chance to reflect on goals and make strategic updates. A great place to begin is <a href=\"https:\/\/chittlesoft.com\/services\/website-design.html\" target=\"_blank\" rel=\"noreferrer noopener\">refreshing your website<\/a>, which we consider the cornerstone of your brand\u2019s online presence.\u00a0<\/span><\/p>\n\n\n\n<p><strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-neeon-button-dark-gray-color\">Is your website optimized for driving growth? Learn how an updated design can<\/mark> <\/strong><a href=\"https:\/\/www.chittlesoft.com\/services\/website-design.html\"><strong>boost your website performance<\/strong><\/a><strong>.<\/strong><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Businesses are always looking for new ways to connect better with their audiences. Offering a top-notch, engaging website experience helps this, opening up new and exciting possibilities.<\/span><\/p>\n\n\n\n<p>On state-of-the-art websites, the customer knows they are the focal point\u2014an approach we explore more in our <a href=\"https:\/\/www.chittlesoft.com\/blog\/design-thinking-in-5-stages\/\" target=\"_blank\" rel=\"noreferrer noopener\">5 Stages of Design Thinking<\/a>&nbsp;series.&nbsp;<\/p>\n\n\n\n<p>How will websites offer that experience in 2023? Going by the latest website design trends, we\u2019re likely to see increased interest and investment in the following:&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"1-chatbots\"><b>1. Chatbots<\/b><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">Chatbots aren\u2019t unusual to find on websites now, and users are getting increasingly comfortable interacting with them.&nbsp;<\/span><\/p>\n\n\n\n<p>As they become more sophisticated and gain a deeper understanding of natural language, they will have more benefits to offer businesses and are likely to become a more popular choice on company websites.&nbsp;<\/p>\n\n\n\n<p>By using them, you can get to know potential customers better, find out what information they need before they make a purchase decision, and learn about other problems that your future products or services could solve for them.&nbsp;<\/p>\n\n\n\n<p>With all those benefits, it\u2019s no wonder that chatbots are one of the latest website design trends!<\/p>\n\n\n\n<p><strong><em>Suggestion<\/em><\/strong><em>: Web developers should stay on top of advancements in artificial intelligence and machine learning to know what changes are in store, both for users and for developers.<\/em><\/p>\n\n\n\n<figure class=\"wp-block-image alignnone is-resized wp-image-1525 size-full\"><img decoding=\"async\" src=\"https:\/\/www.chittlesoft.com\/blog\/wp-content\/uploads\/2019\/12\/untitled-1.gif\" alt=\"\" class=\"wp-image-1525\" width=\"1200\" height=\"900\"\/><figcaption class=\"wp-element-caption\">Chatbot by Mushfiq<\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"2-voice-assistants\"><b>2. Voice assistants<\/b><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">Google says 27% of the global online population is using voice search on mobile now. Other stats indicate that the adoption of voice technology and use of voice assistants continues to grow rapidly.&nbsp;<\/span><\/p>\n\n\n\n<p>In line with this, the latest website design trends show that more businesses will turn to voice assistants to make browsing and navigation easier for users in the coming year.<\/p>\n\n\n\n<p><strong><em>Suggestion<\/em><\/strong><em>: When using a voice assistant, pay attention to your customers\u2019 questions and apply your observations to your marketing by ensuring your web and social content answers them.<\/em><\/p>\n\n\n\n<figure class=\"wp-block-video\"><video controls src=\"https:\/\/www.chittlesoft.com\/blog\/wp-content\/uploads\/2022\/02\/dribbble_mona_hq.mp4\"><\/video><figcaption class=\"wp-element-caption\"><em>Mona Microsoft A.I. &#8211; Play Music by Aur\u00e9lien Salomon<\/em><\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"3-augmented-reality\"><b>3. Augmented reality<\/b><\/h3>\n\n\n\n<p>When you shop online for a new outfit in 2023, you may find your experience improved by AR. This technology has been in the works for years, to allow shoppers to try on clothing virtually.<\/p>\n\n\n\n<p>Similarly, for B2B businesses, AR technology can help product features come alive for potential customers.<\/p>\n\n\n\n<p>AR has the power to create more compelling experiences for buyers and is expected to have a strong impact on sales. Per the latest website design trends, businesses in various industries will be looking to explore its potential.&nbsp;<\/p>\n\n\n\n<p><strong><em>Suggestion<\/em><\/strong><em>: AR is becoming a part of our lives in new and exciting ways. To stay current, plan regular AR assessments and updates, so your customer gets an experience that matches what they get everywhere else.&nbsp;<\/em><\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"Future Shopping: AR Apps From Gap, Amazon and More\" width=\"1200\" height=\"675\" src=\"https:\/\/www.youtube.com\/embed\/toJFwFC5AeY?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"4-data-visualizations-storytelling\"><b>4. <\/b><strong>Data visualizations &amp; storytelling<\/strong><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">Brands use story formats to engage users and speak to them.&nbsp;<\/span><\/p>\n\n\n\n<p>As website content becomes more conversational, adding more data visualizations or data storytelling could be a good move for many B2B businesses.&nbsp;<\/p>\n\n\n\n<p>A creative presentation of the user\u2019s problem and how your product can solve it can help potential buyers understand how what you\u2019re selling them fits into their lives. The latest website design trends suggest that we\u2019ll be seeing more of this in 2023.<\/p>\n\n\n\n<p><strong><em>Suggestion<\/em><\/strong><em>: Consider using animation in your data visualization for greater impact.<\/em><\/p>\n\n\n\n<figure class=\"wp-block-video\"><video controls src=\"https:\/\/www.chittlesoft.com\/blog\/wp-content\/uploads\/2022\/02\/IBM_Infograms_Dribbble.mp4\"><\/video><figcaption class=\"wp-element-caption\"><em>Infograms by ampersandrew<\/em><\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"5-3d-digital-artwork\"><b>5. 3D digital artwork<\/b><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">While minimalism remains important to design in 2023, the latest website design trends tell us we\u2019re going to need new ways to grab attention.&nbsp;<\/span><\/p>\n\n\n\n<p>One way to do this is 3D digital artwork. 3D modeling programs are becoming more accessible, making it more possible for web designers to incorporate them into websites.<\/p>\n\n\n\n<p><strong><em>Suggestion<\/em><\/strong><em>: Opt for bright colors in small doses to draw attention without distracting.&nbsp;<\/em><\/p>\n\n\n\n<figure class=\"wp-block-video\"><video controls src=\"https:\/\/www.chittlesoft.com\/blog\/wp-content\/uploads\/2022\/02\/tear.mp4\"><\/video><figcaption class=\"wp-element-caption\"><em>Wear &amp; Tear by Mark Dearman<\/em><\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"6-oversized-elements-and-bold-typography\"><b>6. <\/b><strong>Oversized elements and bold typography<\/strong><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">As designers explore new ways to add interest against minimalistic backgrounds in 2023, we\u2019re likely to see enlarged icons, brutalist typography, and other bold, assertive elements.<\/span><\/p>\n\n\n\n<p>Minimalistic, efficient designs are still amongst the latest website design trends, but this year, we may see an increased desire to be bolder and louder. This approach can help <a href=\"https:\/\/chittlesoft.com\/services\/website-content-writing.html\" target=\"_blank\" rel=\"noreferrer noopener\">make your website copy impactful<\/a>.\u00a0<\/p>\n\n\n\n<p>In terms of shape, more designers are choosing design elements with organic shapes and curved lines over sharp lines.\u00a0<\/p>\n\n\n\n<p><strong><em>Suggestion<\/em><\/strong><em>: Choose the elements you want to emphasize very carefully, keeping in mind what you want users to remember about you.<\/em><\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img decoding=\"async\" src=\"https:\/\/www.chittlesoft.com\/blog\/wp-content\/uploads\/2022\/02\/SS.png\" alt=\"\" class=\"wp-image-7249\" width=\"1199\" height=\"894\" srcset=\"https:\/\/www.chittlesoft.com\/blog\/wp-content\/uploads\/2022\/02\/SS.png 998w, https:\/\/www.chittlesoft.com\/blog\/wp-content\/uploads\/2022\/02\/SS-300x224.png 300w, https:\/\/www.chittlesoft.com\/blog\/wp-content\/uploads\/2022\/02\/SS-768x573.png 768w, https:\/\/www.chittlesoft.com\/blog\/wp-content\/uploads\/2022\/02\/SS-155x116.png 155w\" sizes=\"(max-width: 1199px) 100vw, 1199px\" \/><figcaption class=\"wp-element-caption\"><em>Simon Deighton<\/em><\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"7-micro-animation\"><b>7. Micro-animation<\/b><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">We\u2019ve seen&nbsp;<a href=\"https:\/\/www.chittlesoft.com\/blog\/3-major-trends-in-animation-were-seeing-in-2019\/\" target=\"_blank\" rel=\"noreferrer noopener\">micro-animation<\/a>&nbsp;grow in popularity over the last few years.&nbsp;<\/span><\/p>\n\n\n\n<p>The latest website design trends indicate that businesses will continue exploring them for navigation, notifications, and more. They offer a great way to boost emotional engagement while presenting yourself as a company that\u2019s digitally proficient.<\/p>\n\n\n\n<p><strong><em>Suggestion<\/em><\/strong><em>: If you\u2019re wondering where to use micro-animations, look for elements that you originally planned to highlight using bold colors and see if you can animate them instead.<\/em><\/p>\n\n\n\n<figure class=\"wp-block-video\"><video controls src=\"https:\/\/www.chittlesoft.com\/blog\/wp-content\/uploads\/2019\/12\/Micro-animation.mp4\"><\/video><figcaption class=\"wp-element-caption\"><em>File operations with micro-animations by Shahnawaz Sharief<\/em><\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"8-split-screen-layouts\"><strong>8. Split-screen layouts<\/strong><\/h3>\n\n\n\n<p>Many designers are going back to this trend that\u2019s been in and out over the years. A split-screen layout can provide a powerful visual experience with text and call-to-action buttons placed strategically on either side.&nbsp;<\/p>\n\n\n\n<p>Splitting the screen into distinct parts also helps users find what they\u2019re looking for, with ease. It\u2019s now one of the latest website design trends we\u2019re seeing.<\/p>\n\n\n\n<p><strong><em>Suggestion<\/em><\/strong><em>: Try a split-screen format when you want to highlight an important CTA.<\/em><\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.chittlesoft.com\/blog\/wp-content\/uploads\/2022\/02\/SWM-1024x763.png\" alt=\"\" class=\"wp-image-7252\" width=\"1200\" height=\"894\" srcset=\"https:\/\/www.chittlesoft.com\/blog\/wp-content\/uploads\/2022\/02\/SWM-1024x763.png 1024w, https:\/\/www.chittlesoft.com\/blog\/wp-content\/uploads\/2022\/02\/SWM-300x224.png 300w, https:\/\/www.chittlesoft.com\/blog\/wp-content\/uploads\/2022\/02\/SWM-768x573.png 768w, https:\/\/www.chittlesoft.com\/blog\/wp-content\/uploads\/2022\/02\/SWM-155x116.png 155w, https:\/\/www.chittlesoft.com\/blog\/wp-content\/uploads\/2022\/02\/SWM.png 1250w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" \/><figcaption class=\"wp-element-caption\"><em>Home by Shaun Moynihan<\/em><\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"9-mega-menus\"><strong>9. Mega menus<\/strong><\/h3>\n\n\n\n<p>Mega menus include multiple columns and links, and are much more informative than a dropdown or hamburger menu. They\u2019re also an instant sign that your website has been updated in line with the latest website design trends.&nbsp;<\/p>\n\n\n\n<p>When designed well, they are user-friendly and engaging. These menus are great for websites with many pages, in many different categories, such as products, services, blogs, events, resource libraries, and more.&nbsp;<\/p>\n\n\n\n<p>With icons and illustrations, there\u2019s so much you can do to make your menu experience memorable and helpful for your users.&nbsp;<\/p>\n\n\n\n<p><strong><em>Suggestion<\/em><\/strong><em>: Try a split-screen format when you want to highlight an important CTA.<\/em><\/p>\n\n\n\n<figure class=\"wp-block-video\"><video controls src=\"https:\/\/www.chittlesoft.com\/blog\/wp-content\/uploads\/2022\/02\/figma-smart-animate-dribbble.mp4\"><\/video><figcaption class=\"wp-element-caption\"><em>Dropdown mega menu by Charli Prangley<\/em><\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"10-dark-ui\"><strong>10. Dark UI<\/strong><\/h3>\n\n\n\n<p>Dark mode is easy on the eyes\u2014it looks sophisticated and cuts down on eye strain. At the same time, it makes colors and other visual elements pop.<\/p>\n\n\n\n<p>If you use a dark UI to create a user experience that\u2019s relaxing as well as dynamic, users will be encouraged to spend more time on your website.&nbsp;<\/p>\n\n\n\n<p>Because more users are now opting for dark, soothing viewing experiences, a dark UI is gaining popularity, and is one of the latest website design trends to be aware of.<\/p>\n\n\n\n<p><strong><em>Suggestion<\/em><\/strong><em>: Try a split-screen format when you want to highlight an important CTA.<\/em><\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.chittlesoft.com\/blog\/wp-content\/uploads\/2022\/02\/BB-1024x764.png\" alt=\"\" class=\"wp-image-7254\" width=\"1200\" height=\"895\" srcset=\"https:\/\/www.chittlesoft.com\/blog\/wp-content\/uploads\/2022\/02\/BB-1024x764.png 1024w, https:\/\/www.chittlesoft.com\/blog\/wp-content\/uploads\/2022\/02\/BB-300x224.png 300w, https:\/\/www.chittlesoft.com\/blog\/wp-content\/uploads\/2022\/02\/BB-768x573.png 768w, https:\/\/www.chittlesoft.com\/blog\/wp-content\/uploads\/2022\/02\/BB-155x116.png 155w, https:\/\/www.chittlesoft.com\/blog\/wp-content\/uploads\/2022\/02\/BB.png 1258w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" \/><figcaption class=\"wp-element-caption\"><em>Dark mode header concept by Tran Mau Tri Tam<\/em><\/figcaption><\/figure>\n\n\n\n<p><span style=\"font-weight: 400;\">At Chittlesoft, we study trends to create effective <a href=\"https:\/\/www.chittlesoft.com\/services\/sales-enablement.html\" target=\"_blank\" rel=\"noreferrer noopener\">sales enablement<\/a> solutions and <a href=\"https:\/\/www.chittlesoft.com\/services\/marketing-collateral.html\" target=\"_blank\" rel=\"noreferrer noopener\">marketing collateral<\/a> that delight your customers and meet their expectations. We know how important it is to keep an eye on the latest website design trends and stay current.<\/span><\/p>\n\n\n\n<p>But we also know works for one brand may not be the right choice for another. It\u2019s essential to make choices that benefit your brand and help you serve your customers best.&nbsp;<\/p>\n\n\n\n<p>Deciding on the best options for your brand is something the Chittlesoft team can help you with. We specialize in Digital Design Services for corporate clients, so<a href=\"https:\/\/www.chittlesoft.com\/contactus.html\" target=\"_blank\" rel=\"noreferrer noopener\"> talk to us<\/a> for a fresh, expert perspective on what your brand needs to grow.&nbsp;<\/p>\n\n\n\n<p>We hope this blog has inspired you to <a href=\"https:\/\/chittlesoft.com\/services\/website-design.html\" target=\"_blank\" rel=\"noreferrer noopener\">update your website design\u00a0<\/a>for a successful 2023!<\/p>\n\n\n\n<style>\n.row {\n  display: flex;\n}\n.row .col {\n  flex: 1;\n}\n.nav .nav-item\n{\n      padding-bottom: 10px;\n}\n\n\/* Accordion styles *\/\n.tabs {\n  border-radius: 8px;\n  overflow: hidden;\n  box-shadow: 0 4px 4px -2px rgba(0, 0, 0, 0.5);\n}\n\n.tab {\n  width: 100%;\n  color: white;\n  overflow: hidden;\n}\n.tab-label {\n  display: flex;\n  justify-content: space-between;\n  padding: 1em;\n  background: #2c3e50;\n  font-weight: bold;\n  cursor: pointer;\n  \/* Icon *\/\n}\n.tab-label:hover {\n  background: #1a252f;\n}\n.tab-label::after {\n  content: \"\u276f\";\n  width: 1em;\n  height: 1em;\n  text-align: center;\n  transition: all 0.35s;\n}\n.tab-content {\n  max-height: 0;\n  padding: 0 1em;\n  color: #2c3e50;\n  background: white;\n  transition: all 0.35s;\n}\n.tab-close {\n  display: flex;\n  justify-content: flex-end;\n  padding: 1em;\n  font-size: 0.75em;\n  background: #2c3e50;\n  cursor: pointer;\n}\n.tab-close:hover {\n  background: #1a252f;\n}\n\ninput:checked + .tab-label {\n  background: #1a252f;\n}\ninput:checked + .tab-label::after {\n  transform: rotate(90deg);\n}\ninput:checked ~ .tab-content {\n  max-height: 100%;\n  padding: 1em;\n}\n.FAQS-section{\n  display: none;\n}\n<\/style>\n<div class=\"row\">\n  <div class=\"col\">\n    <div class=\"tabs\">\n      <div class=\"tab\">\n        <input type=\"checkbox\" id=\"FAQsBlock\" class=\"FAQS-section\">\n        <label class=\"tab-label\" for=\"FAQsBlock\">FAQs:<\/label>\n        <div class=\"tab-content\">\n          <ul class=\"\">              \n            <div class=\"nav-item\">\n\n                <h3>1. What are some user expectations a website should meet?<\/h3>\n\n                <p>In line with the latest website design trends, your website should meet user expectations by being easy to navigate, loading quickly and smoothly, and providing relevant and useful information.<\/p>\n\n                <p> Additionally, it should have a clean and visually appealing design, be mobile-friendly, have clear calls-to-action, offer secure transactions, protect user data, provide accessible content, and offer exceptional customer service and support.<\/p>\n\n            <\/div>\n\n            <div class=\"nav-item\">\n                <h3>2. What are some key steps in the website design process?<\/h3>\n\n                <p> The website design process typically involves several key steps: <\/p>\n\t\t<p> 1. Defining the project goals\n\t\t    2. Creating a sitemap and wireframes\n\t\t    3. Choosing a design style and color scheme\n\t\t    4. Designing the user interface and user experience\n\t\t    5. Developing the website using HTML\/CSS\/JavaScript\n\t\t    6. Testing the site for functionality and usability, before and after its launch\n\t\t <\/p>\n\t\t<p> Once your website is running smoothly, it\u2019s important to create a plan for maintenance and updates. <\/p>\n\t\t\n            <\/div>    \n\n            <div class=\"nav-item\">\n                <h3>3. How do I optimize my website for search engines? <\/h3>\n\n                <p> To optimize your website for search engines, start with keyword research to identify relevant and popular search terms. Then, incorporate those keywords into your website&#8217;s content, metadata, and URL structure.<\/p>\n <p>You can also improve SEO by building high-quality links to your site from reputable sources, using descriptive and concise title tags and meta descriptions, and ensuring your site is mobile-friendly and loads quickly. Consistent and <a href=\"https:\/\/www.chittlesoft.com\/services\/website-content-writing.html\">high-quality content creation <\/a> can also improve your site&#8217;s search engine ranking.<\/p>\n            <\/div>  \n <div class=\"nav-item\">\n                <h3>4. How can I make my website accessible to people with disabilities?<\/h3>\n\n                <p> To make your website accessible to people with disabilities, follow accessibility guidelines, make content accessible with proper labeling and formatting, use accessible plugins, and optimize for mobile. As you design your website, remember to seek input and feedback from people with disabilities.<\/p>\n            <\/div>  \n <div class=\"nav-item\">\n                <h3>5. How often should I update my website?<\/h3>\n\n                <p> The frequency of website updates depends on the specific needs and goals of a business. However, as a general rule, websites should be updated at least every 2-3 years to keep up with the latest website design trends and technology advancements.<\/p>\n<p> Regular <a href=\"https:\/\/www.chittlesoft.com\/services\/website-content-writing.html\">content updates <\/a>, such as blog posts or product updates, can also improve search engine rankings and keep visitors engaged.<\/p>\n            <\/div> \n          <\/ul>\n        <\/div>\n      <\/div>      \n    <\/div>\n  <\/div>\n<\/div>\n\n\n\n<style>\n.row {\n  display: flex;\n}\n.row .col {\n  flex: 1;\n}\n\n\/* Accordion styles *\/\n.tabs {\n  border-radius: 8px;\n  overflow: hidden;\n  box-shadow: 0 4px 4px -2px rgba(0, 0, 0, 0.5);\n}\n\n.tab {\n  width: 100%;\n  color: white;\n  overflow: hidden;\n}\n.tab-label {\n  display: flex;\n  justify-content: space-between;\n  padding: 1em;\n  background: #2c3e50;\n  font-weight: bold;\n  cursor: pointer;\n  \/* Icon *\/\n}\n.tab-label:hover {\n  background: #1a252f;\n}\n.tab-label::after {\n  content: \"\u276f\";\n  width: 1em;\n  height: 1em;\n  text-align: center;\n  transition: all 0.35s;\n}\n.tab-content {\n  max-height: 0;\n  padding: 0 1em;\n  color: #2c3e50;\n  background: white;\n  transition: all 0.35s;\n}\n.tab-close {\n  display: flex;\n  justify-content: flex-end;\n  padding: 1em;\n  font-size: 0.75em;\n  background: #2c3e50;\n  cursor: pointer;\n}\n.tab-close:hover {\n  background: #1a252f;\n}\n\ninput:checked + .tab-label {\n  background: #1a252f;\n}\ninput:checked + .tab-label::after {\n  transform: rotate(90deg);\n}\ninput:checked ~ .tab-content {\n  max-height: 100%;\n  padding: 1em;\n}\n#chck1 {\n  visibility: hidden;\n}\n.nav .nav-item\n{\n     padding-bottom: 10px;\n}\n<\/style>\n<div class=\"row\">\n  <div class=\"col\">\n    <div class=\"tabs\">\n      <div class=\"tab\">\n        <input type=\"checkbox\" id=\"chck1\">\n        <label class=\"tab-label\" for=\"chck1\">Key References:<\/label>\n        <div class=\"tab-content\">\n          <ul class=\"nav\">\n            <li class=\"nav-item\">\n                 1. Think with Google:\n                <a href=\"https:\/\/www.thinkwithgoogle.com\/marketing-strategies\/search\/voice-search-mobile-use-statistics\/\" target=\"_blank\" rel=\"noopener\">https:\/\/www.thinkwithgoogle.com\/marketing-strategies\/search\/voice-search-mobile-use-statistics\/<\/a>\n            <\/li>\n            <li class=\"nav-item\">\n                 2. Why AR Clothing Try-On is Nearly Here:\n                 <a href=\"https:\/\/www.voguebusiness.com\/technology\/why-ar-clothing-try-on-is-nearly-here\" target=\"_blank\" rel=\"noopener\">https:\/\/www.voguebusiness.com\/technology\/why-ar-clothing-try-on-is-nearly-here<\/a>\n            <\/li>\n            <li class=\"nav-item\">\n                 3. Top 40 Best B2B Websites on the Internet:\n                <a href=\"https:\/\/thomasdigital.com\/industry\/b2b-websites\" target=\"_blank\" rel=\"noopener\">https:\/\/thomasdigital.com\/industry\/b2b-websites<\/a>\n            <\/li>\n            <li class=\"nav-item\">\n                 4. 10 Website Design Trends to Expect in 2023:\n                <a href=\"https:\/\/elementor.com\/blog\/web-design-trends\/#brutalist\" target=\"_blank\" rel=\"noopener\">https:\/\/elementor.com\/blog\/web-design-trends\/#brutalist<\/a>\n            <\/li>\n            <li class=\"nav-item\">\n                 5. The 29 Dominating Web Design Trends for 2023\n                <a href=\"https:\/\/blog.hubspot.com\/marketing\/web-design-trends-2017\" target=\"_blank\" rel=\"noopener\">https:\/\/blog.hubspot.com\/marketing\/web-design-trends-2017<\/a>\n            <\/li>\n            <li class=\"nav-item\">\n                 6. Freepik\n                <a href=\"https:\/\/www.freepik.com\/photos\/technology\" target=\"_blank\" rel=\"noopener\">Technology photo created by rawpixel.com &#8211; www.freepik.com<\/a>\n            <\/li>       \n          <\/ul>\n        <\/div>\n      <\/div>      \n    <\/div>\n  <\/div> \n<\/div>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Is your website aligned with the latest website design trends and ready to beat the competition in 2023? Keep reading to see if it\u2019s time for an update\u2014which could mean a few quick changes, or a completely fresh look.&nbsp; For organizations across industries, the start of a new year is a chance to reflect on [&hellip;]<\/p>\n","protected":false},"author":9,"featured_media":7274,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[59],"tags":[101,97],"class_list":["post-1514","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design","tag-designs","tag-website-design"],"_links":{"self":[{"href":"https:\/\/www.chittlesoft.com\/blog\/wp-json\/wp\/v2\/posts\/1514","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.chittlesoft.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.chittlesoft.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.chittlesoft.com\/blog\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/www.chittlesoft.com\/blog\/wp-json\/wp\/v2\/comments?post=1514"}],"version-history":[{"count":32,"href":"https:\/\/www.chittlesoft.com\/blog\/wp-json\/wp\/v2\/posts\/1514\/revisions"}],"predecessor-version":[{"id":10263,"href":"https:\/\/www.chittlesoft.com\/blog\/wp-json\/wp\/v2\/posts\/1514\/revisions\/10263"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.chittlesoft.com\/blog\/wp-json\/wp\/v2\/media\/7274"}],"wp:attachment":[{"href":"https:\/\/www.chittlesoft.com\/blog\/wp-json\/wp\/v2\/media?parent=1514"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.chittlesoft.com\/blog\/wp-json\/wp\/v2\/categories?post=1514"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.chittlesoft.com\/blog\/wp-json\/wp\/v2\/tags?post=1514"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}