{"id":853,"date":"2018-07-16T11:18:16","date_gmt":"2018-07-16T10:18:16","guid":{"rendered":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/?p=853"},"modified":"2023-08-03T15:23:52","modified_gmt":"2023-08-03T14:23:52","slug":"using-animation-on-your-landing-page","status":"publish","type":"post","link":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/using-animation-on-your-landing-page\/","title":{"rendered":"Using animation on your landing page"},"content":{"rendered":"<p>Designing an effective landing page takes a lot of research, a good industry knowledge and a number of different web design techniques. From <a href=\"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/landing-page-typography\/\">typography<\/a> to imagery, you need to pull out all the stops to make sure your landing page grabs attention and converts those viewers. But how do you turn a landing page from a passive viewing experience, to an active one? How can you encourage users to interact with your website? Well, one way to start is to use animation. And here at <a href=\"https:\/\/www.pumpkinwebdesign.com\/website-designers-manchester\/\">Pumpkin Web Design Manchester<\/a>, we are Manchester&#8217;s leading <a href=\"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/responsive-web-design-or-adaptive-design\/\">web design team<\/a>. We work with a range of companies around Manchester, and the North West, to provide web design solutions that really get results. As a result, we have produced this guide to using animation on your landing page.<\/p>\n<h2>Designing your landing page<\/h2>\n<p>When it comes to website landing pages, you need to create something that doesn&#8217;t just look stunning, but that also encourages further exploration of your website. The landing page itself can direct users through the purchasing process, or encourage them to sign up. Or alternatively, it can be a simple way for users to navigate to a page with more relevant information.<\/p>\n<p>However, according to a<a href=\"https:\/\/www.snapapp.com\/interactive-content\"> DemandGen Report,<\/a> users are getting bored of the same old landing pages. The tired hero image with fancy typography is no longer grabbing attention as it used to. And up to 91% of your audience could be looking for something different. So what can you do? Well, this is where animation can be a great option.<\/p>\n<h3>Animation and web design<\/h3>\n<p>Using animation on your landing page can\u00a0create pockets of movement, and areas of interest for the user. Bringing your page to life with small, subtle elements of animation can really improve the user experience. While larger animations, as part of the visual content, can really improve your conversions by grabbing attention, and prompting user action. But you need to get the balance right, and experiment with what works for your website, your target audience, and your brand.<\/p>\n<h3>Using animation on your landing page<\/h3>\n<p>There are a variety of ways to use animation on your landing page. Here are some possibilities:<\/p>\n<ul>\n<li><strong><em>Using animation to guide users towards your goal-<\/em><\/strong> Each and every landing page has a goal. And knowing what your goal is will help you to determine how to use any animated features on your company landing page. For example, if you want your users to sign up, shop, or simply be more aware of your brand, you can use animated elements to help you achieve each of these goals.<\/li>\n<li><em><strong>Decide what to animate-<\/strong><\/em> In terms of your landing page, every element can theoretically be animated. But too much animation can have a negative effect. In general, pairing subtle animation features on headings and the call to action button works well for attracting attention to the right place. But large animations, or animations within the above the fold graphics can also be very effective. Either way, choose one option, and not both.<\/li>\n<li><strong><em>Consider how the animation should be triggered-<\/em> <\/strong>Do you want your animation to be triggered by user interaction, such as hovering, or clicking? Or will your animation be running at all times?<\/li>\n<\/ul>\n<p>For more information about any elements of professional web design, or for your own web design support, get in touch with the team today, here at <a href=\"https:\/\/www.pumpkinwebdesign.com\/website-designers-manchester\/\">Pumpkin Web Design Manchester.<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Designing an effective landing page takes a lot of research, a good industry knowledge and a number of different web design techniques. From typography to imagery, you need to pull out all the stops to make sure your landing page grabs attention and converts those viewers. But how do you turn a landing page from [&#8230;]\n","protected":false},"author":2,"featured_media":181,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[17],"tags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v20.10 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Using animation on your landing page - Pumpkin Web Design Manchester<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/using-animation-on-your-landing-page\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Using animation on your landing page - Pumpkin Web Design Manchester\" \/>\n<meta property=\"og:description\" content=\"Designing an effective landing page takes a lot of research, a good industry knowledge and a number of different web design techniques. From typography to imagery, you need to pull out all the stops to make sure your landing page grabs attention and converts those viewers. But how do you turn a landing page from [...]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/using-animation-on-your-landing-page\/\" \/>\n<meta property=\"og:site_name\" content=\"Pumpkin Web Design Manchester\" \/>\n<meta property=\"article:published_time\" content=\"2018-07-16T10:18:16+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-08-03T14:23:52+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/wp-content\/uploads\/2017\/12\/stunning-websites-for-manchester-businesses.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1000\" \/>\n\t<meta property=\"og:image:height\" content=\"667\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Pumpkin Web Design Manchester\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Pumpkin Web Design Manchester\" \/>\n\t<meta name=\"twitter:label2\" content=\"Estimated reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/using-animation-on-your-landing-page\/\",\"url\":\"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/using-animation-on-your-landing-page\/\",\"name\":\"Using animation on your landing page - Pumpkin Web Design Manchester\",\"isPartOf\":{\"@id\":\"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/#website\"},\"datePublished\":\"2018-07-16T10:18:16+00:00\",\"dateModified\":\"2023-08-03T14:23:52+00:00\",\"author\":{\"@id\":\"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/#\/schema\/person\/b2a999c4885984c18f9525b21a017d28\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/using-animation-on-your-landing-page\/#breadcrumb\"},\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/using-animation-on-your-landing-page\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/using-animation-on-your-landing-page\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Using animation on your landing page\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/#website\",\"url\":\"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/\",\"name\":\"Pumpkin Web Design Manchester\",\"description\":\"Full service digital agency\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-GB\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/#\/schema\/person\/b2a999c4885984c18f9525b21a017d28\",\"name\":\"Pumpkin Web Design Manchester\",\"description\":\"Providing top notch web design, across Manchester, since 2009\",\"url\":\"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/author\/g4oyprjmpvh3epn\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Using animation on your landing page - Pumpkin Web Design Manchester","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:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/using-animation-on-your-landing-page\/","og_locale":"en_GB","og_type":"article","og_title":"Using animation on your landing page - Pumpkin Web Design Manchester","og_description":"Designing an effective landing page takes a lot of research, a good industry knowledge and a number of different web design techniques. From typography to imagery, you need to pull out all the stops to make sure your landing page grabs attention and converts those viewers. But how do you turn a landing page from [...]","og_url":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/using-animation-on-your-landing-page\/","og_site_name":"Pumpkin Web Design Manchester","article_published_time":"2018-07-16T10:18:16+00:00","article_modified_time":"2023-08-03T14:23:52+00:00","og_image":[{"width":1000,"height":667,"url":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/wp-content\/uploads\/2017\/12\/stunning-websites-for-manchester-businesses.jpg","type":"image\/jpeg"}],"author":"Pumpkin Web Design Manchester","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Pumpkin Web Design Manchester","Estimated reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/using-animation-on-your-landing-page\/","url":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/using-animation-on-your-landing-page\/","name":"Using animation on your landing page - Pumpkin Web Design Manchester","isPartOf":{"@id":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/#website"},"datePublished":"2018-07-16T10:18:16+00:00","dateModified":"2023-08-03T14:23:52+00:00","author":{"@id":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/#\/schema\/person\/b2a999c4885984c18f9525b21a017d28"},"breadcrumb":{"@id":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/using-animation-on-your-landing-page\/#breadcrumb"},"inLanguage":"en-GB","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/using-animation-on-your-landing-page\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/using-animation-on-your-landing-page\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/"},{"@type":"ListItem","position":2,"name":"Using animation on your landing page"}]},{"@type":"WebSite","@id":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/#website","url":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/","name":"Pumpkin Web Design Manchester","description":"Full service digital agency","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-GB"},{"@type":"Person","@id":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/#\/schema\/person\/b2a999c4885984c18f9525b21a017d28","name":"Pumpkin Web Design Manchester","description":"Providing top notch web design, across Manchester, since 2009","url":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/author\/g4oyprjmpvh3epn\/"}]}},"_links":{"self":[{"href":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/wp-json\/wp\/v2\/posts\/853"}],"collection":[{"href":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/wp-json\/wp\/v2\/comments?post=853"}],"version-history":[{"count":2,"href":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/wp-json\/wp\/v2\/posts\/853\/revisions"}],"predecessor-version":[{"id":12858,"href":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/wp-json\/wp\/v2\/posts\/853\/revisions\/12858"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/wp-json\/wp\/v2\/media\/181"}],"wp:attachment":[{"href":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/wp-json\/wp\/v2\/media?parent=853"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/wp-json\/wp\/v2\/categories?post=853"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/wp-json\/wp\/v2\/tags?post=853"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}