{"id":16430,"date":"2014-08-13T06:00:18","date_gmt":"2014-08-13T13:00:18","guid":{"rendered":"https:\/\/creativemarket.com\/blog\/?p=16430"},"modified":"2024-03-28T05:28:23","modified_gmt":"2024-03-28T12:28:23","slug":"5-professional-examples-of-animated-gifs-in-web-design","status":"publish","type":"post","link":"https:\/\/creativemarket.com\/blog\/5-professional-examples-of-animated-gifs-in-web-design","title":{"rendered":"5 Professional Examples of Animated GIFs in Web Design"},"content":{"rendered":"

The animated GIF is an interesting beast. These days, most of us think of it as a file type that’s ideally suited for distributing funny Internet memes. However, there’s recently been a resurgence in the use of animated GIFs in professional web design. Today we’re going to take a quick look at five websites that use animated GIFs in an attractive and interesting way. <\/p>\n

<\/span>Headscape<\/span><\/h2>\n

Headscape<\/a> is a digital media company based in the UK that creates simple, elegant designs for a wide range of customers. Its website homepage is a great example of how to use animated GIFs in a subtle, professional manner. The images play a small role in the overall effectiveness of the site, and the use of a GIF on a black-and-white scale conveys the office setting and the idea of design work and collaboration without going over the top. Combined with the monochromatic color scheme and the parallax scrolling, this GIF is quite effective.<\/p>\n

\"ALT\"<\/p>\n

<\/span>Invision<\/span><\/h2>\n

Invision<\/a> does a fantastic job of incorporating professional GIFs into its site. The design of the site is already gorgeous, and adding in a little animation propels it to the next level. The base of the page is a flat design with text floating over a beautiful image. Scroll down a little bit, and you’ll find GIFs of its prototyping tool in action. Viewers get to see the mouse floating over the app and gain a better understanding of how the app works. It’s simple, effective and professional.<\/p>\n

\"ALT\"<\/p>\n

<\/span>Macaw<\/span><\/h2>\n

Macaw<\/a> is a professional Web design tool that both designers and developers use. The app’s online documentation is streamlined and simple, with black text on a white background. Scrolling down, you find GIFs of different sections of the design tool in action, so you can experience what it’s like to use the tool.<\/p>\n

\"ALT\"<\/p>\n

<\/span>Giant Ant<\/span><\/h2>\n

Giant Ant<\/a> is a creative firm with an absolutely stunning website. It uses GIFs in a very discrete way. The home page is made up of one simple photo and delicate text overlays. Below the photo, you see cartoons of basic objects, and when you hover over the cartoons, they come alive as animated GIFs. This is a great way to add some dynamic content to a site without using more complicated techniques or videos.<\/p>\n

\"ALT\"<\/p>\n

<\/span>Tinke<\/span><\/h2>\n

Tinke<\/a> is a fitness and wellness tracker that measures heart rate, respiratory rate and other health factors. The site is a beautiful example of how GIFs can be combined with parallax scrolling effects to achieve a stunning result. Scrolling down the site, users get a complete walk-through of the product in live action. Users not only see how the tool works, but they also gain an understanding of how to use it with an iPhone and share information with other users.<\/p>\n

\"ALT\"<\/p>\n

<\/span>Let’s Give Them a Hand<\/span><\/h2>\n

\nIt’s great to see all these high end, professional uses of animated GIFs. These designers didn’t resort to the cliché of showing goofy clips of random celebrities but instead embraced the GIF as a powerful way to enrich their designs. We applaud the effort.
\n\"ALT\"\n<\/p>\n

<\/span>Who Else Has Great GIFs?<\/span><\/h2>\n

GIFs have definitely made a comeback in the design world, and designers are using them for everything from e-commerce to art. They can breathe a lot of life into a website and make it stand out from the competition. Using them on a website can enhance product imagery, improve the overall user experience and add personality and flair to a site with a lot of content.<\/p>\n

If you know of a site using animated GIFs in a professional and classy way, leave a link below so we can check it out!<\/p><\/p>\n","protected":false},"excerpt":{"rendered":"

The animated GIF is an interesting beast. These days, most of us think of it as a file type that’s ideally suited for distributing funny Internet memes. However, there’s recently been a resurgence in the use of animated GIFs in professional web design. Today we’re going to take a quick look at five websites that […]<\/p>\n","protected":false},"author":57,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[34],"tags":[138,719,847],"topics":[],"class_list":["post-16430","post","type-post","status-publish","format-standard","hentry","category-creative-inspiration","tag-animated","tag-ux","tag-gif"],"acf":[],"yoast_head":"\n5 Professional Examples of Animated GIFs in Web Design - Creative Market Blog<\/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:\/\/creativemarket.com\/blog\/5-professional-examples-of-animated-gifs-in-web-design\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"5 Professional Examples of Animated GIFs in Web Design\" \/>\n<meta property=\"og:description\" content=\"The animated GIF is an interesting beast. These days, most of us think of it as a file type that's ideally suited for distributing funny Internet memes.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/creativemarket.com\/blog\/5-professional-examples-of-animated-gifs-in-web-design\" \/>\n<meta property=\"og:site_name\" content=\"Creative Market Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/crtvmrkt\" \/>\n<meta property=\"article:published_time\" content=\"2014-08-13T13:00:18+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-03-28T12:28:23+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/d3ui957tjb5bqd.cloudfront.net\/uploads\/2014\/08\/28043013\/gifspiration-1.jpg.webp\" \/>\n<meta name=\"author\" content=\"Creative Market\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@creativemarket\" \/>\n<meta name=\"twitter:site\" content=\"@creativemarket\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Creative Market\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. 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:\\\/\\\/creativemarket.com\\\/blog\\\/5-professional-examples-of-animated-gifs-in-web-design\",\"url\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/5-professional-examples-of-animated-gifs-in-web-design\",\"name\":\"5 Professional Examples of Animated GIFs in Web Design - Creative Market Blog\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/5-professional-examples-of-animated-gifs-in-web-design#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/5-professional-examples-of-animated-gifs-in-web-design#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/d3ui957tjb5bqd.cloudfront.net\\\/uploads\\\/2014\\\/08\\\/28043013\\\/gifspiration-1.jpg.webp\",\"datePublished\":\"2014-08-13T13:00:18+00:00\",\"dateModified\":\"2024-03-28T12:28:23+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/#\\\/schema\\\/person\\\/d6927fab89f28e3dd8f6bb7b36219d66\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/5-professional-examples-of-animated-gifs-in-web-design#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/creativemarket.com\\\/blog\\\/5-professional-examples-of-animated-gifs-in-web-design\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/5-professional-examples-of-animated-gifs-in-web-design#primaryimage\",\"url\":\"https:\\\/\\\/d3ui957tjb5bqd.cloudfront.net\\\/uploads\\\/2014\\\/08\\\/28043013\\\/gifspiration-1.jpg.webp\",\"contentUrl\":\"https:\\\/\\\/d3ui957tjb5bqd.cloudfront.net\\\/uploads\\\/2014\\\/08\\\/28043013\\\/gifspiration-1.jpg.webp\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/5-professional-examples-of-animated-gifs-in-web-design#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"5 Professional Examples of Animated GIFs in Web Design\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/\",\"name\":\"Creative Market Blog\",\"description\":\"Creative Market Blog\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"5 Professional Examples of Animated GIFs in Web Design - Creative Market Blog","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:\/\/creativemarket.com\/blog\/5-professional-examples-of-animated-gifs-in-web-design","og_locale":"en_US","og_type":"article","og_title":"5 Professional Examples of Animated GIFs in Web Design","og_description":"The animated GIF is an interesting beast. These days, most of us think of it as a file type that's ideally suited for distributing funny Internet memes.","og_url":"https:\/\/creativemarket.com\/blog\/5-professional-examples-of-animated-gifs-in-web-design","og_site_name":"Creative Market Blog","article_publisher":"https:\/\/www.facebook.com\/crtvmrkt","article_published_time":"2014-08-13T13:00:18+00:00","article_modified_time":"2024-03-28T12:28:23+00:00","og_image":[{"url":"https:\/\/d3ui957tjb5bqd.cloudfront.net\/uploads\/2014\/08\/28043013\/gifspiration-1.jpg.webp","type":"","width":"","height":""}],"author":"Creative Market","twitter_card":"summary_large_image","twitter_creator":"@creativemarket","twitter_site":"@creativemarket","twitter_misc":{"Written by":"Creative Market","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/creativemarket.com\/blog\/5-professional-examples-of-animated-gifs-in-web-design","url":"https:\/\/creativemarket.com\/blog\/5-professional-examples-of-animated-gifs-in-web-design","name":"5 Professional Examples of Animated GIFs in Web Design - Creative Market Blog","isPartOf":{"@id":"https:\/\/creativemarket.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/creativemarket.com\/blog\/5-professional-examples-of-animated-gifs-in-web-design#primaryimage"},"image":{"@id":"https:\/\/creativemarket.com\/blog\/5-professional-examples-of-animated-gifs-in-web-design#primaryimage"},"thumbnailUrl":"https:\/\/d3ui957tjb5bqd.cloudfront.net\/uploads\/2014\/08\/28043013\/gifspiration-1.jpg.webp","datePublished":"2014-08-13T13:00:18+00:00","dateModified":"2024-03-28T12:28:23+00:00","author":{"@id":"https:\/\/creativemarket.com\/blog\/#\/schema\/person\/d6927fab89f28e3dd8f6bb7b36219d66"},"breadcrumb":{"@id":"https:\/\/creativemarket.com\/blog\/5-professional-examples-of-animated-gifs-in-web-design#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/creativemarket.com\/blog\/5-professional-examples-of-animated-gifs-in-web-design"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/creativemarket.com\/blog\/5-professional-examples-of-animated-gifs-in-web-design#primaryimage","url":"https:\/\/d3ui957tjb5bqd.cloudfront.net\/uploads\/2014\/08\/28043013\/gifspiration-1.jpg.webp","contentUrl":"https:\/\/d3ui957tjb5bqd.cloudfront.net\/uploads\/2014\/08\/28043013\/gifspiration-1.jpg.webp"},{"@type":"BreadcrumbList","@id":"https:\/\/creativemarket.com\/blog\/5-professional-examples-of-animated-gifs-in-web-design#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/creativemarket.com\/blog\/"},{"@type":"ListItem","position":2,"name":"5 Professional Examples of Animated GIFs in Web Design"}]},{"@type":"WebSite","@id":"https:\/\/creativemarket.com\/blog\/#website","url":"https:\/\/creativemarket.com\/blog\/","name":"Creative Market Blog","description":"Creative Market Blog","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/creativemarket.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/posts\/16430","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/users\/57"}],"replies":[{"embeddable":true,"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/comments?post=16430"}],"version-history":[{"count":0,"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/posts\/16430\/revisions"}],"wp:attachment":[{"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/media?parent=16430"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/categories?post=16430"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/tags?post=16430"},{"taxonomy":"topics","embeddable":true,"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/topics?post=16430"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}