{"id":3396,"date":"2019-12-06T12:32:01","date_gmt":"2019-12-06T11:32:01","guid":{"rendered":"https:\/\/capturly.com\/blog\/?p=3396"},"modified":"2022-01-20T16:28:41","modified_gmt":"2022-01-20T15:28:41","slug":"how-to-use-5-common-design-elements-to-boost-conversions-with-examples","status":"publish","type":"post","link":"https:\/\/capturly.com\/blog\/how-to-use-5-common-design-elements-to-boost-conversions-with-examples\/","title":{"rendered":"How to Use 5 Common Design Elements to Boost Conversions (with examples)\u00a0"},"content":{"rendered":"<p><span style=\"font-weight: 400;\">Web design is a huge discipline with many schools of thought.\u00a0<\/span><span style=\"font-weight: 400;\">You have those who rely on dark patterns to get users to take action, o<\/span><span style=\"font-weight: 400;\">ther organizations swear by brutalism.\u00a0<\/span><span style=\"font-weight: 400;\">Don\u2019t forget about material design and minimalism.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Whatever school of thought you happen to belong to, there are common <a href=\"https:\/\/www.sociallyinfused.com\/website-design\/the-ultimate-guide-to-web-design\/\">web design<\/a> elements almost every website has. When used properly, they can help increase conversions.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">In this article, you\u2019ll get a rundown of what web design elements are and how you can optimize them to increase your conversions.\u00a0<\/span><\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_53 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title \" >Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/capturly.com\/blog\/how-to-use-5-common-design-elements-to-boost-conversions-with-examples\/#What_are_web_design_elements\" title=\"What are web design elements\u00a0\">What are web design elements\u00a0<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/capturly.com\/blog\/how-to-use-5-common-design-elements-to-boost-conversions-with-examples\/#Making_colors_your_secret_weapon\" title=\"Making colors your secret weapon\">Making colors your secret weapon<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/capturly.com\/blog\/how-to-use-5-common-design-elements-to-boost-conversions-with-examples\/#White_space_and_proportions\" title=\"White space and proportions\">White space and proportions<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/capturly.com\/blog\/how-to-use-5-common-design-elements-to-boost-conversions-with-examples\/#Visual_hierarchy\" title=\"Visual hierarchy\">Visual hierarchy<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/capturly.com\/blog\/how-to-use-5-common-design-elements-to-boost-conversions-with-examples\/#Breaking_up_forms\" title=\"Breaking up forms\">Breaking up forms<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/capturly.com\/blog\/how-to-use-5-common-design-elements-to-boost-conversions-with-examples\/#Visual_cues\" title=\"Visual cues\u00a0\">Visual cues\u00a0<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/capturly.com\/blog\/how-to-use-5-common-design-elements-to-boost-conversions-with-examples\/#Conclusion\" title=\"Conclusion\">Conclusion<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"What_are_web_design_elements\"><\/span><b>What are web design elements\u00a0<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">In the context of this article, a web design element is anything a user sees or is able to interact with on a webpage. This definition is purposely broad because it\u2019s important to think outside the box when optimizing your website.\u00a0 A few things to consider are:\u00a0<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Buttons\u00a0<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Menus<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Images<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Negative or white space<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Colors<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Textures\u00a0<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Links<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Etc.\u00a0<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">It can be daunting to fine-tune a website to meet your conversion goals. It\u2019s also a must. When you get it right, people are excited to read your content, sign up for your newsletter, and pay for your products.\u00a0<\/span><\/p>\n<blockquote><p><span style=\"font-weight: 400;\">Everything from the colors you use to the way they\u2019re placed on the page can affect a visitor\u2019s perception of your brand.<\/span><\/p><\/blockquote>\n<p><a href=\"https:\/\/www.emerald.com\/insight\/content\/doi\/10.1108\/00251740610673332\/full\/html\"><span style=\"font-weight: 400;\">In a study<\/span><\/a><span style=\"font-weight: 400;\"> by Satyendra Singh, it was found that colors account for 62 \u2013 90 percent of an assessment of people and products.\u00a0<\/span><\/p>\n<p><a href=\"https:\/\/www.uxpin.com\/studio\/blog\/ux-case-study-designing-whitespace-to-improve-conversions\/\"><span style=\"font-weight: 400;\">In an interesting case study<\/span><\/a><span style=\"font-weight: 400;\">, gDiaper was able to increase overall site conversions by 20% after adding white space between 2 callouts. The use of those specific elements also increased by 150%.\u00a0<\/span><\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter wp-image-3402 size-large\" src=\"https:\/\/capturly.com\/blog\/wp-content\/uploads\/2019\/12\/gdiaper-1024x418.png\" alt=\"white space to boost conversion\" width=\"760\" height=\"310\" srcset=\"https:\/\/capturly.com\/blog\/wp-content\/uploads\/2019\/12\/gdiaper.png 1024w, https:\/\/capturly.com\/blog\/wp-content\/uploads\/2019\/12\/gdiaper-300x122.png 300w, https:\/\/capturly.com\/blog\/wp-content\/uploads\/2019\/12\/gdiaper-768x314.png 768w\" sizes=\"(max-width: 760px) 100vw, 760px\" \/><\/p>\n<p><span style=\"font-weight: 400;\">Even if the changes you make are subtle, they can have a huge impact on your conversions, and by extension, your revenue. Keep in mind that designs may take a bit of work to get 100% right so be sure to <\/span><span style=\"font-weight: 400;\">implement usability testing<\/span><span style=\"font-weight: 400;\"> with small portions of your audience before rolling out changes sitewide.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Let\u2019s look at 5 elements you can tweak for maximum impact.\u00a0<\/span><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Making_colors_your_secret_weapon\"><\/span><b>Making colors your secret weapon<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Color is an important design element. It helps emphasize (or deemphasize) specific areas of the page. For example, a CTA button can pop against the background or blend in. In either instance, it affects your conversions.\u00a0<\/span><\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter wp-image-3403 size-large\" src=\"https:\/\/capturly.com\/blog\/wp-content\/uploads\/2019\/12\/Postmates-design-elements-1024x524.png\" alt=\"colours as design elements\" width=\"760\" height=\"389\" srcset=\"https:\/\/capturly.com\/blog\/wp-content\/uploads\/2019\/12\/Postmates-design-elements-1024x524.png 1024w, https:\/\/capturly.com\/blog\/wp-content\/uploads\/2019\/12\/Postmates-design-elements-300x154.png 300w, https:\/\/capturly.com\/blog\/wp-content\/uploads\/2019\/12\/Postmates-design-elements-768x393.png 768w, https:\/\/capturly.com\/blog\/wp-content\/uploads\/2019\/12\/Postmates-design-elements.png 1119w\" sizes=\"(max-width: 760px) 100vw, 760px\" \/><\/p>\n<p><a href=\"https:\/\/postmates.com\/\"><span style=\"font-weight: 400;\">Postmates<\/span><\/a><span style=\"font-weight: 400;\"> has a CTA button that contrasts with the rest of the page. It draws the eyes and encourages visitors to click.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The first step is deciding on your color palette. What\u2019s your primary color, secondary color, and your accents? Afterward, choose the color you want to use for your CTA buttons. Consider using one CTA button color per page so your visitors know exactly what buttons represent.\u00a0You might need to revisit your knowledge and take some <a href=\"https:\/\/www.udemy.com\/topic\/graphic-design\/\">graphic design courses<\/a> to stay up to date with the most recent trends in color theory for better conversions<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Another strategy is when you have primary actions and secondary actions, using a contrasting color for the primary action and a color that\u2019s not as visible for the secondary action.\u00a0<\/span><\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter wp-image-3404 size-large\" src=\"https:\/\/capturly.com\/blog\/wp-content\/uploads\/2019\/12\/Instapage-contrasting-buttons-1024x382.png\" alt=\"contrasting colours for actions\" width=\"760\" height=\"284\" srcset=\"https:\/\/capturly.com\/blog\/wp-content\/uploads\/2019\/12\/Instapage-contrasting-buttons-1024x382.png 1024w, https:\/\/capturly.com\/blog\/wp-content\/uploads\/2019\/12\/Instapage-contrasting-buttons-300x112.png 300w, https:\/\/capturly.com\/blog\/wp-content\/uploads\/2019\/12\/Instapage-contrasting-buttons-768x286.png 768w, https:\/\/capturly.com\/blog\/wp-content\/uploads\/2019\/12\/Instapage-contrasting-buttons.png 1347w\" sizes=\"(max-width: 760px) 100vw, 760px\" \/><\/p>\n<p><span style=\"font-weight: 400;\">In the example above from Instapage, the main CTA is white and stands out against the background of the page. The secondary CTA only has an outline and blends in with the rest of the page.\u00a0\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Beyond using contrasting colors to emphasize and deemphasize specific actions, it\u2019s important to understand the emotions color elicits in your visitors. Here\u2019s a quick rundown of what specific colors mean and the emotions your visitors may experience.\u00a0<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Red: danger, passion, and importance<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Orange: confidence, energy, optimism (Note: in some context, orange may <\/span><a href=\"http:\/\/users.marshall.edu\/~skeens24\/ATE%20628%20Reflections\/Unit%207\/Does%20Orange%20Mean%20Cheap.pdf\"><span style=\"font-weight: 400;\">denote cheapness<\/span><\/a><span style=\"font-weight: 400;\"> so be sure you\u2019re creating the right image before using it).<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Yellow: sun, happiness, attention<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Green: nature, growth, success<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Blue: comfort, relaxation, trust<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Purple: Luxury, spirituality, creativity<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Black: Power, elegance, sophistication<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">White: health, virtue, cleanliness<\/span><\/li>\n<\/ul>\n<p><a href=\"http:\/\/www.joehallock.com\/edu\/COM498\/preferences.html\"><span style=\"font-weight: 400;\">Studies have shown<\/span><\/a><span style=\"font-weight: 400;\"> there are further nuances in color preferences based on gender. Both men and women prefer blue while women dislike brown and men dislike yellow the most. Take this information, combine it with the top <\/span><a href=\"https:\/\/venngage.com\/blog\/graphic-design-trends\/\"><span style=\"font-weight: 400;\">graphic design trends,<\/span><\/a><span style=\"font-weight: 400;\"> and create designs that move your visitors to action.\u00a0<\/span><\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter wp-image-3405 size-large\" src=\"https:\/\/capturly.com\/blog\/wp-content\/uploads\/2019\/12\/Color-examples-1024x498.png\" alt=\"graphic design trend\" width=\"760\" height=\"370\" srcset=\"https:\/\/capturly.com\/blog\/wp-content\/uploads\/2019\/12\/Color-examples-1024x498.png 1024w, https:\/\/capturly.com\/blog\/wp-content\/uploads\/2019\/12\/Color-examples-300x146.png 300w, https:\/\/capturly.com\/blog\/wp-content\/uploads\/2019\/12\/Color-examples-768x374.png 768w, https:\/\/capturly.com\/blog\/wp-content\/uploads\/2019\/12\/Color-examples.png 1281w\" sizes=\"(max-width: 760px) 100vw, 760px\" \/><\/p>\n<p><a href=\"https:\/\/itsnotviolent.com\/\"><span style=\"font-weight: 400;\">It\u2019s Not Violent<\/span><\/a><span style=\"font-weight: 400;\"> uses many colors to emphasize content and lead visitors to the main CTA. There\u2019s red to denote danger and importance. There\u2019s green to emphasize the CTA and let people know they\u2019re clicking for growth. Yellow is also used in the CTA to communicate happiness and attention.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Consider how you can use colors to communicate your messages to visitors and <\/span><a href=\"https:\/\/capturly.com\/blog\/5-quick-ways-to-improve-your-websites-conversion-rate-immediately\/\"><span style=\"font-weight: 400;\">increase conversions.<\/span><\/a><span style=\"font-weight: 400;\">\u00a0<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Do contrasting buttons work for you?\u00a0<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Can you use colors to emphasize specific elements?<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Can colors be used to deemphasize elements?\u00a0<\/span><\/li>\n<\/ul>\n<h2><span class=\"ez-toc-section\" id=\"White_space_and_proportions\"><\/span><b>White space and proportions<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">White space, also known as negative space, is the area between elements. It helps focus attention on the most important aspects of your message. At the same time, it can be used to help with comprehension and retention.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">There are two types of white space.<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><b>Macro:<\/b><span style=\"font-weight: 400;\"> This is the space between major elements such as text blocks, buttons, menus, images, etc.\u00a0<\/span><\/li>\n<li style=\"font-weight: 400;\"><b>Micro:<\/b><span style=\"font-weight: 400;\"> Is the space between small elements such as letter spacing and line-height.\u00a0<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">White space can also be active and passive. Active white space moves people through a page and draws their attention to CTAs or other elements you want them to interact with. Passive white space occurs without active input from a designer. It tends to form naturally between elements such as graphics and text.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Of course, white space doesn\u2019t have to be white. It\u2019s any negative space (irrespective of color) that doesn\u2019t have another element inside.\u00a0<\/span><span style=\"font-weight: 400;\"><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter wp-image-3406 size-large\" src=\"https:\/\/capturly.com\/blog\/wp-content\/uploads\/2019\/12\/White-space-1024x455.png\" alt=\"any negative space can be white space\" width=\"760\" height=\"338\" srcset=\"https:\/\/capturly.com\/blog\/wp-content\/uploads\/2019\/12\/White-space-1024x455.png 1024w, https:\/\/capturly.com\/blog\/wp-content\/uploads\/2019\/12\/White-space-300x133.png 300w, https:\/\/capturly.com\/blog\/wp-content\/uploads\/2019\/12\/White-space-768x341.png 768w, https:\/\/capturly.com\/blog\/wp-content\/uploads\/2019\/12\/White-space.png 1297w\" sizes=\"(max-width: 760px) 100vw, 760px\" \/><\/span><\/p>\n<p><a href=\"https:\/\/en.dianadanieli.com\/\"><span style=\"font-weight: 400;\">Diana Danieli<\/span><\/a><span style=\"font-weight: 400;\"> uses a lot of space between the text elements and the images on the page. It helps the visitor view each part of the page, one at a time, instead of trying to absorb everything at once. The end result is better flow and comprehension.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Another aspect to consider when using space and placing elements is the design and photographic principle called the rule of thirds. It states that images should be divided into nine equal parts by two horizontal and vertical lines. The main parts of the design are placed along the lines, at the intersections, or on either side of the center boxes.\u00a0<\/span><\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter wp-image-3407 size-large\" src=\"https:\/\/capturly.com\/blog\/wp-content\/uploads\/2019\/12\/Rule-of-three-proportions-1024x474.jpg\" alt=\"rule of third ux\" width=\"760\" height=\"352\" srcset=\"https:\/\/capturly.com\/blog\/wp-content\/uploads\/2019\/12\/Rule-of-three-proportions-1024x474.jpg 1024w, https:\/\/capturly.com\/blog\/wp-content\/uploads\/2019\/12\/Rule-of-three-proportions-300x139.jpg 300w, https:\/\/capturly.com\/blog\/wp-content\/uploads\/2019\/12\/Rule-of-three-proportions-768x356.jpg 768w, https:\/\/capturly.com\/blog\/wp-content\/uploads\/2019\/12\/Rule-of-three-proportions.jpg 1350w\" sizes=\"(max-width: 760px) 100vw, 760px\" \/><\/p>\n<p><a href=\"https:\/\/www.kyleads.com\/\"><span style=\"font-weight: 400;\">KyLeads<\/span><\/a><span style=\"font-weight: 400;\">\u2019 CTA is on the bottom line in the center of the page. It draws attention because of its position, color, and white space used to emphasize it.\u00a0<\/span><\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter wp-image-3408 size-large\" src=\"https:\/\/capturly.com\/blog\/wp-content\/uploads\/2019\/12\/Rule-of-thirds-makeswift-1024x474.jpg\" alt=\"rule of third example\" width=\"760\" height=\"352\" srcset=\"https:\/\/capturly.com\/blog\/wp-content\/uploads\/2019\/12\/Rule-of-thirds-makeswift-1024x474.jpg 1024w, https:\/\/capturly.com\/blog\/wp-content\/uploads\/2019\/12\/Rule-of-thirds-makeswift-300x139.jpg 300w, https:\/\/capturly.com\/blog\/wp-content\/uploads\/2019\/12\/Rule-of-thirds-makeswift-768x356.jpg 768w, https:\/\/capturly.com\/blog\/wp-content\/uploads\/2019\/12\/Rule-of-thirds-makeswift.jpg 1350w\" sizes=\"(max-width: 760px) 100vw, 760px\" \/><\/p>\n<p><a href=\"https:\/\/www.makeswift.com\/\"><span style=\"font-weight: 400;\">Makeswift<\/span><\/a><span style=\"font-weight: 400;\"> has major elements in the top left box and the bottom left box. The text is squarely on the left-hand side and draws the eyes to important information.\u00a0<\/span><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Visual_hierarchy\"><\/span><b>Visual hierarchy<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Visual hierarchy is a simple concept that focuses on the arrangement of elements so they communicate importance. This is often used on the homepage of websites to communicate a <\/span><a href=\"https:\/\/www.resultist.com\/blog\/what-is-a-value-proposition\"><span style=\"font-weight: 400;\">value proposition<\/span><\/a><span style=\"font-weight: 400;\"> and identify their target market.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">There are many things you can use to create visual hierarchy and communicate a message. A few of them are:\u00a0<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Size<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Color\u00a0<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Alignment<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Texture\/style<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">The most common of these factors are size and alignment. At the same time, it\u2019s important to understand how people naturally read pages. <\/span><a href=\"https:\/\/www.nngroup.com\/articles\/f-shaped-pattern-reading-web-content\/\"><span style=\"font-weight: 400;\">In multiple studies<\/span><\/a><span style=\"font-weight: 400;\">, it was found that people consume content in an F-shaped pattern.\u00a0<\/span><\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter wp-image-3410 size-full\" src=\"https:\/\/capturly.com\/blog\/wp-content\/uploads\/2019\/12\/F-shaped-patter-e1576745008294.png\" alt=\"content in f shaped pattern\" width=\"760\" height=\"662\" \/><\/p>\n<p><span style=\"font-weight: 400;\">You can take advantage of this when placing elements on your page by putting the most important information on the left and making it larger.\u00a0<\/span><\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter wp-image-3411 size-large\" src=\"https:\/\/capturly.com\/blog\/wp-content\/uploads\/2019\/12\/visual-heirarchy-1024x448.png\" alt=\"visual hierarchy in ux\" width=\"760\" height=\"333\" srcset=\"https:\/\/capturly.com\/blog\/wp-content\/uploads\/2019\/12\/visual-heirarchy-1024x448.png 1024w, https:\/\/capturly.com\/blog\/wp-content\/uploads\/2019\/12\/visual-heirarchy-300x131.png 300w, https:\/\/capturly.com\/blog\/wp-content\/uploads\/2019\/12\/visual-heirarchy-768x336.png 768w, https:\/\/capturly.com\/blog\/wp-content\/uploads\/2019\/12\/visual-heirarchy.png 1312w\" sizes=\"(max-width: 760px) 100vw, 760px\" \/><\/p>\n<p><span style=\"font-weight: 400;\">In the example from <\/span><a href=\"https:\/\/www.reformcollective.com\/\"><span style=\"font-weight: 400;\">Reform Collective<\/span><\/a><span style=\"font-weight: 400;\">, the most important information is larger and placed on the left. Secondary information is placed on top and other information and imagery are placed below or to the right of the main text.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Consider rearranging your page so the messages you want your visitors to encounter first are on the left, are larger, and possibly have contrasting colors to draw the eye. Whatever you place on the right should support the content on the left of the page.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">An interesting benefit of properly using visual hierarchy is <\/span><a href=\"https:\/\/helpjuice.com\/blog\/customer-satisfaction\"><span style=\"font-weight: 400;\">increased customer satisfaction<\/span><\/a><span style=\"font-weight: 400;\">. This happens because people are able to find the information they need to make an educated decision without sifting through irrelevant content.\u00a0<\/span><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Breaking_up_forms\"><\/span><b>Breaking up forms<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Forms are the bread and butter of the digital world. Without them, it\u2019s difficult to capture leads and follow up with contacts to close the sale. It\u2019s commonly accepted that 95%+ or more of your visitors will leave without taking any action on your website. Over 70% will never return.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Forms that capture contact information are an ideal way to stay in contact with <\/span><a href=\"https:\/\/capturly.com\/blog\/time-effortless-way-to-understand-your-visitors\/\"><span style=\"font-weight: 400;\">visitors, understand them<\/span><\/a><span style=\"font-weight: 400;\">, and ensure they come back or buy from you over time. Not all forms are created equally. One company wanted me to give up all my information just to get a few templates.\u00a0<\/span><\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter wp-image-3412 size-full\" src=\"https:\/\/capturly.com\/blog\/wp-content\/uploads\/2019\/12\/Long-forms-e1576745131836.png\" alt=\"breaking up form\" width=\"760\" height=\"450\" \/><\/p>\n<p><span style=\"font-weight: 400;\">I decided to pass on the opportunity because they wanted too much on the first interaction. The<\/span><a href=\"https:\/\/capturly.com\/blog\/sign-up-form-mistakes-that-kill-conversion-rate\/\"><span style=\"font-weight: 400;\"> form itself was a bit daunting too<\/span><\/a><span style=\"font-weight: 400;\">. Many businesses need a lot of information to qualify leads but there\u2019s a better way to <\/span><a href=\"https:\/\/www.kyleads.com\/blog\/questionnaire\/\"><span style=\"font-weight: 400;\">ask questions<\/span><\/a><span style=\"font-weight: 400;\"> and get the information you need.\u00a0\u00a0<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Multi-step forms<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Multi-step forms are simply forms that spread out information collected over multiple steps. They can also ask for consent before presenting the form that\u2019ll be filled out. These are commonly called Yes-No opt-ins.\u00a0<\/span><\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter wp-image-3413 size-full\" src=\"https:\/\/capturly.com\/blog\/wp-content\/uploads\/2019\/12\/Klymit-popup-e1576745219613.jpg\" alt=\"multi-step forms\" width=\"760\" height=\"568\" \/><\/p>\n<p><span style=\"font-weight: 400;\">After the positive answer to your initial question, the form appears for them to fill out. Because people have already expressed interest, conversions are higher.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Take it a step further by creating multiple pages or progressive forms that only ask for one piece of information at a time. This prevents your visitors from being overwhelmed by a long form that asks for many pieces of information.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Another effective strategy is to break up the form and show a progress bar. It creates the right expectations for your users and builds a slight sense of accomplishment when they\u2019ve finished.\u00a0<\/span><\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter wp-image-3414 size-full\" src=\"https:\/\/capturly.com\/blog\/wp-content\/uploads\/2019\/12\/Example-of-progress-bar-e1576745268653.png\" alt=\"example of progress bar\" width=\"760\" height=\"437\" \/><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Visual_cues\"><\/span><b>Visual cues\u00a0<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">The last aspect of web design I want to touch on is visual cues (also known as directional cues). These are elements on a webpage that subtly draw attention to important areas. Many things can be used as a visual cue but the most effective ones are arrows or lines and imagery with a clear line of sight.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">There are two types of visual cues: implicit and explicit.\u00a0<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Implicit visual cues<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Implicit visual cues draw attention based on things like color, shape, or contrast. They\u2019re subtle and tend to be glossed over by visitors and are registered unconsciously. They don\u2019t point at any particular object but can still work well to persuade visitors.\u00a0<\/span><\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter wp-image-3415 size-large\" src=\"https:\/\/capturly.com\/blog\/wp-content\/uploads\/2019\/12\/Leadpages-implicit-visual-cue-1024x438.png\" alt=\"clicks into customers\" width=\"760\" height=\"325\" srcset=\"https:\/\/capturly.com\/blog\/wp-content\/uploads\/2019\/12\/Leadpages-implicit-visual-cue-1024x438.png 1024w, https:\/\/capturly.com\/blog\/wp-content\/uploads\/2019\/12\/Leadpages-implicit-visual-cue-300x128.png 300w, https:\/\/capturly.com\/blog\/wp-content\/uploads\/2019\/12\/Leadpages-implicit-visual-cue-768x328.png 768w, https:\/\/capturly.com\/blog\/wp-content\/uploads\/2019\/12\/Leadpages-implicit-visual-cue.png 1347w\" sizes=\"(max-width: 760px) 100vw, 760px\" \/><\/p>\n<p><a href=\"https:\/\/leadpages.net\/\"><span style=\"font-weight: 400;\">Leadpages<\/span><\/a><span style=\"font-weight: 400;\"> uses color as an implicit visual cue to draw users towards the \u201cStart Free Trial\u201d button right above the fold.\u00a0<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Explicit visual cues<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">People are more familiar with implicit visual cues and if you\u2019ve ever been on the receiving end of a <\/span><a href=\"https:\/\/betterproposals.io\/proposal-templates\/simple-web-design-proposal-template\"><span style=\"font-weight: 400;\">web design proposal<\/span><\/a><span style=\"font-weight: 400;\"> then you\u2019ll be familiar with them. Explicit visual cues tend to use imagery, lines, or arrows to draw the attention of the website visitor.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Humans learn to follow the line of sight of others when they\u2019re still children and this quality stays with us as we grow. When you see an image of people looking in a certain direction, you unconsciously follow their line of sight.\u00a0<\/span><\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter wp-image-3416 size-large\" src=\"https:\/\/capturly.com\/blog\/wp-content\/uploads\/2019\/12\/Icims-explicit-visual-cue-1024x438.png\" alt=\"explicit visual cues\" width=\"760\" height=\"325\" srcset=\"https:\/\/capturly.com\/blog\/wp-content\/uploads\/2019\/12\/Icims-explicit-visual-cue-1024x438.png 1024w, https:\/\/capturly.com\/blog\/wp-content\/uploads\/2019\/12\/Icims-explicit-visual-cue-300x128.png 300w, https:\/\/capturly.com\/blog\/wp-content\/uploads\/2019\/12\/Icims-explicit-visual-cue-768x328.png 768w, https:\/\/capturly.com\/blog\/wp-content\/uploads\/2019\/12\/Icims-explicit-visual-cue.png 1347w\" sizes=\"(max-width: 760px) 100vw, 760px\" \/><\/p>\n<p><span style=\"font-weight: 400;\">In the image from ICMIS, two people are looking directly at the form which ensures visitors will also look at the form.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The Bigs is a <\/span><a href=\"https:\/\/www.kyleads.com\/blog\/podcast-hosting\/\"><span style=\"font-weight: 400;\">group of podcast hosts<\/span><\/a><span style=\"font-weight: 400;\"> and creators involved in the Chicago sports media scene. Their landing page uses a combination of explicit visual cues, colors, and white space to draw attention exactly where they want it to go.<\/span><\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter wp-image-3417 size-large\" src=\"https:\/\/capturly.com\/blog\/wp-content\/uploads\/2019\/12\/Visual-cues-1024x479.png\" alt=\"explicit visual cues, colors, and white space\" width=\"760\" height=\"356\" srcset=\"https:\/\/capturly.com\/blog\/wp-content\/uploads\/2019\/12\/Visual-cues-1024x479.png 1024w, https:\/\/capturly.com\/blog\/wp-content\/uploads\/2019\/12\/Visual-cues-300x140.png 300w, https:\/\/capturly.com\/blog\/wp-content\/uploads\/2019\/12\/Visual-cues-768x360.png 768w, https:\/\/capturly.com\/blog\/wp-content\/uploads\/2019\/12\/Visual-cues.png 1181w\" sizes=\"(max-width: 760px) 100vw, 760px\" \/><\/p>\n<p><span style=\"font-weight: 400;\">Arrows are another effective way to take advantage of explicit cues. They\u2019ve <\/span><a href=\"https:\/\/conversionxl.com\/research-study\/visual-cue-study\/\"><span style=\"font-weight: 400;\">even been shown<\/span><\/a><span style=\"font-weight: 400;\"> to hold attention longer than a human\u2019s line of sight.\u00a0<\/span><\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter wp-image-3418 size-large\" src=\"https:\/\/capturly.com\/blog\/wp-content\/uploads\/2019\/12\/Bear-CSS-arrows-1024x473.png\" alt=\"arrow pointing to cta\" width=\"760\" height=\"351\" srcset=\"https:\/\/capturly.com\/blog\/wp-content\/uploads\/2019\/12\/Bear-CSS-arrows-1024x473.png 1024w, https:\/\/capturly.com\/blog\/wp-content\/uploads\/2019\/12\/Bear-CSS-arrows-300x139.png 300w, https:\/\/capturly.com\/blog\/wp-content\/uploads\/2019\/12\/Bear-CSS-arrows-768x355.png 768w, https:\/\/capturly.com\/blog\/wp-content\/uploads\/2019\/12\/Bear-CSS-arrows.png 1246w\" sizes=\"(max-width: 760px) 100vw, 760px\" \/><\/p>\n<p><span style=\"font-weight: 400;\">As the example above shows, it doesn\u2019t even have to be a true arrow. It can be a design or graphic that\u2019s pointing directly at the form or CTA you want to draw attention too.\u00a0<\/span><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Conclusion\"><\/span><b>Conclusion<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Web design is always evolving. What works well today may not hit the mark tomorrow. This article has gone through five elements you can optimize for any design and increase conversions.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Start with one or two and see how they affect conversions. After you see a positive impact implement the other ones mentioned one by one. In the end, your website will be able to convert a large number of visitors and help you meet your goals.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Let me know what design elements you\u2019re using to increase conversions in the comments and don\u2019t forget to share.\u00a0<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Web design is a huge discipline with many schools of thought.\u00a0You have those who rely on dark patterns to get users to take action, other organizations swear by brutalism.\u00a0Don\u2019t forget about material design and minimalism.\u00a0 Whatever school of thought you happen to belong to, there are common web design elements almost every website has. When<\/p>\n","protected":false},"author":28,"featured_media":3428,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,6],"tags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v20.13 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to Use 5 Common Design Elements to Boost Conversions (with examples)\u00a0 - Capturly Blog<\/title>\n<meta name=\"description\" content=\"What web design elements are and how you can optimize them to increase your conversions rate. Elements you can optimize on your website to meet your goals.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/capturly.com\/blog\/how-to-use-5-common-design-elements-to-boost-conversions-with-examples\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Use 5 Common Design Elements to Boost Conversions (with examples)\u00a0 - Capturly Blog\" \/>\n<meta property=\"og:description\" content=\"What web design elements are and how you can optimize them to increase your conversions rate. Elements you can optimize on your website to meet your goals.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/capturly.com\/blog\/how-to-use-5-common-design-elements-to-boost-conversions-with-examples\/\" \/>\n<meta property=\"og:site_name\" content=\"Capturly Blog\" \/>\n<meta property=\"article:published_time\" content=\"2019-12-06T11:32:01+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-01-20T15:28:41+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/capturly.com\/blog\/wp-content\/uploads\/2019\/12\/green-chameleon-WvuTnXz1hSc-unsplash.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"3000\" \/>\n\t<meta property=\"og:image:height\" content=\"1976\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Gabriella\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Gabriella\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"10 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/capturly.com\/blog\/how-to-use-5-common-design-elements-to-boost-conversions-with-examples\/\",\"url\":\"https:\/\/capturly.com\/blog\/how-to-use-5-common-design-elements-to-boost-conversions-with-examples\/\",\"name\":\"How to Use 5 Common Design Elements to Boost Conversions (with examples)\u00a0 - Capturly Blog\",\"isPartOf\":{\"@id\":\"https:\/\/capturly.com\/blog\/#website\"},\"datePublished\":\"2019-12-06T11:32:01+00:00\",\"dateModified\":\"2022-01-20T15:28:41+00:00\",\"author\":{\"@id\":\"https:\/\/capturly.com\/blog\/#\/schema\/person\/8f82d825cb4e6832343ec8b5cfb2c56c\"},\"description\":\"What web design elements are and how you can optimize them to increase your conversions rate. Elements you can optimize on your website to meet your goals.\",\"breadcrumb\":{\"@id\":\"https:\/\/capturly.com\/blog\/how-to-use-5-common-design-elements-to-boost-conversions-with-examples\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/capturly.com\/blog\/how-to-use-5-common-design-elements-to-boost-conversions-with-examples\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/capturly.com\/blog\/how-to-use-5-common-design-elements-to-boost-conversions-with-examples\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/capturly.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Use 5 Common Design Elements to Boost Conversions (with examples)\u00a0\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/capturly.com\/blog\/#website\",\"url\":\"https:\/\/capturly.com\/blog\/\",\"name\":\"Capturly Blog\",\"description\":\"Optimize your website\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/capturly.com\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/capturly.com\/blog\/#\/schema\/person\/8f82d825cb4e6832343ec8b5cfb2c56c\",\"name\":\"Gabriella\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/capturly.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/091c6f9c03cf9182f0fcca2711f99667?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/091c6f9c03cf9182f0fcca2711f99667?s=96&d=mm&r=g\",\"caption\":\"Gabriella\"},\"url\":\"https:\/\/capturly.com\/blog\/author\/gabriella\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Use 5 Common Design Elements to Boost Conversions (with examples)\u00a0 - Capturly Blog","description":"What web design elements are and how you can optimize them to increase your conversions rate. Elements you can optimize on your website to meet your goals.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/capturly.com\/blog\/how-to-use-5-common-design-elements-to-boost-conversions-with-examples\/","og_locale":"en_US","og_type":"article","og_title":"How to Use 5 Common Design Elements to Boost Conversions (with examples)\u00a0 - Capturly Blog","og_description":"What web design elements are and how you can optimize them to increase your conversions rate. Elements you can optimize on your website to meet your goals.","og_url":"https:\/\/capturly.com\/blog\/how-to-use-5-common-design-elements-to-boost-conversions-with-examples\/","og_site_name":"Capturly Blog","article_published_time":"2019-12-06T11:32:01+00:00","article_modified_time":"2022-01-20T15:28:41+00:00","og_image":[{"width":3000,"height":1976,"url":"https:\/\/capturly.com\/blog\/wp-content\/uploads\/2019\/12\/green-chameleon-WvuTnXz1hSc-unsplash.jpg","type":"image\/jpeg"}],"author":"Gabriella","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Gabriella","Est. reading time":"10 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/capturly.com\/blog\/how-to-use-5-common-design-elements-to-boost-conversions-with-examples\/","url":"https:\/\/capturly.com\/blog\/how-to-use-5-common-design-elements-to-boost-conversions-with-examples\/","name":"How to Use 5 Common Design Elements to Boost Conversions (with examples)\u00a0 - Capturly Blog","isPartOf":{"@id":"https:\/\/capturly.com\/blog\/#website"},"datePublished":"2019-12-06T11:32:01+00:00","dateModified":"2022-01-20T15:28:41+00:00","author":{"@id":"https:\/\/capturly.com\/blog\/#\/schema\/person\/8f82d825cb4e6832343ec8b5cfb2c56c"},"description":"What web design elements are and how you can optimize them to increase your conversions rate. Elements you can optimize on your website to meet your goals.","breadcrumb":{"@id":"https:\/\/capturly.com\/blog\/how-to-use-5-common-design-elements-to-boost-conversions-with-examples\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/capturly.com\/blog\/how-to-use-5-common-design-elements-to-boost-conversions-with-examples\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/capturly.com\/blog\/how-to-use-5-common-design-elements-to-boost-conversions-with-examples\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/capturly.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to Use 5 Common Design Elements to Boost Conversions (with examples)\u00a0"}]},{"@type":"WebSite","@id":"https:\/\/capturly.com\/blog\/#website","url":"https:\/\/capturly.com\/blog\/","name":"Capturly Blog","description":"Optimize your website","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/capturly.com\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/capturly.com\/blog\/#\/schema\/person\/8f82d825cb4e6832343ec8b5cfb2c56c","name":"Gabriella","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/capturly.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/091c6f9c03cf9182f0fcca2711f99667?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/091c6f9c03cf9182f0fcca2711f99667?s=96&d=mm&r=g","caption":"Gabriella"},"url":"https:\/\/capturly.com\/blog\/author\/gabriella\/"}]}},"_links":{"self":[{"href":"https:\/\/capturly.com\/blog\/wp-json\/wp\/v2\/posts\/3396"}],"collection":[{"href":"https:\/\/capturly.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/capturly.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/capturly.com\/blog\/wp-json\/wp\/v2\/users\/28"}],"replies":[{"embeddable":true,"href":"https:\/\/capturly.com\/blog\/wp-json\/wp\/v2\/comments?post=3396"}],"version-history":[{"count":9,"href":"https:\/\/capturly.com\/blog\/wp-json\/wp\/v2\/posts\/3396\/revisions"}],"predecessor-version":[{"id":5074,"href":"https:\/\/capturly.com\/blog\/wp-json\/wp\/v2\/posts\/3396\/revisions\/5074"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/capturly.com\/blog\/wp-json\/wp\/v2\/media\/3428"}],"wp:attachment":[{"href":"https:\/\/capturly.com\/blog\/wp-json\/wp\/v2\/media?parent=3396"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/capturly.com\/blog\/wp-json\/wp\/v2\/categories?post=3396"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/capturly.com\/blog\/wp-json\/wp\/v2\/tags?post=3396"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}