15 Ways to Animate Your Content with GIFs

#GIF4docs @fosteronomo


15 Ways to Animate Your Content with

Daniel Foster




https://www.google.com/trends/explore#q=gif

https://www.google.com/trends/explore#q=gif


http://cinemagraphs.com/travel/

http://cinemagraphs.com/travel/


https://www.reddit.com/r/perfectloops/comments/1z0aqi/hmb_while_i_switch_my_ride/

https://www.reddit.com/r/perfectloops/comments/1z0aqi/hmb_while_i_switch_my_ride/


Why GIF?

Creation• Quick to capture

• No audio hassle

• No aspect ratio concerns

Distribution

• Goes where images go

• No hosting hassle

• Relatively lightweight

• Device agnostic

Consumption

• Low friction (0 clicks)

• No speakers needed

• Motion attracts attention


Use #1: Steps


http://docs.helpscout.net/article/593-custom-fields

http://docs.helpscout.net/article/593-custom-fields



https://docs.oracle.com/cloud/latest/reportingcs_use/BILUG/GUID-C20AF9E2-FAA9-416E-A00E-D52A4542B3F0.htm#BILUG465

https://docs.oracle.com/cloud/latest/reportingcs_use/BILUG/GUID-C20AF9E2-FAA9-416E-A00E-D52A4542B3F0.htm#BILUG465


https://docs.oracle.com/cloud/latest/data-visualization-cloud/BIDVC/GUID-A498DC2D-A815-408F-839D-22F4EA1E03C3.htm#BIDVC-GUID-816A00C6-856C-4B22-BD2C-0B340F129547

https://docs.oracle.com/cloud/latest/data-visualization-cloud/BIDVC/GUID-A498DC2D-A815-408F-839D-22F4EA1E03C3.htm#BIDVC-GUID-816A00C6-856C-4B22-BD2C-0B340F129547


https://support.google.com/helpouts/answer/6093046?hl=en

https://support.google.com/helpouts/answer/6093046?hl=en


https://support.google.com/maps/answer/1610636?hl=sv&rd=1&co=GENIE.Platform=Android&oco=1

https://support.google.com/maps/answer/1610636?hl=sv&rd=1&co=GENIE.Platform=Android&oco=1


Use #2: Series of Steps



Use #3: Interactive Elements


http://docs.helpscout.net/article/99-traffic-cop

http://docs.helpscout.net/article/99-traffic-cop


Use #4: Cause and Effect


https://knowledge.autodesk.com/support/maya/learn-explore/caas/CloudHelp/cloudhelp/2016/ENU/Maya/files/GUID-AA669F09-9CDB-4327-BC37-3E4ECD6A0E69-htm.html

https://knowledge.autodesk.com/support/maya/learn-explore/caas/CloudHelp/cloudhelp/2016/ENU/Maya/files/GUID-AA669F09-9CDB-4327-BC37-3E4ECD6A0E69-htm.html


http://www.geforce.com/whats-new/articles/crysis-2-directx-11-ultra-upgrade

http://www.geforce.com/whats-new/articles/crysis-2-directx-11-ultra-upgrade




Use #5: Compare Techniques


http://www.overthemonster.com/2015/4/22/8450353/hanley-ramirez-manny-ramirez-swing-mechanics-red-sox

http://www.overthemonster.com/2015/4/22/8450353/hanley-ramirez-manny-ramirez-swing-mechanics-red-sox


http://www.tastingtable.com/entry_detail/national/14983/How_to_Chop_an_Onion___Ignacio_Mattos_and_David_Tanis.htm





Use #6: Compare Similar Things


http://imgur.com/vHDMwVR

http://imgur.com/vHDMwVR


Use #7: Before and After


http://www.ehow.com/contributor/debbie_williams/

http://www.ehow.com/contributor/debbie_williams/



Use #8: On-boarding / Walkthrough



Use #9: Mini-Demos



https://docs.adobe.com/docs/en/aem/6-2/release-notes.html





https://docs.intercom.io/intercom-s-key-features-explained/what-s-included-with-real-time-messaging

https://docs.intercom.io/intercom-s-key-features-explained/what-s-included-with-real-time-messaging



https://helpdesk.lastpass.com/

https://helpdesk.lastpass.com/



Use #10: Teaser


https://twitter.com/periscopeco/status/686880399751036928

https://twitter.com/periscopeco/status/686880399751036928


https://twitter.com/knownissues/status/732303944035106817

https://twitter.com/knownissues/status/732303944035106817


Use #11: Concept Illustration


https://confluence.atlassian.com/display/Purchasing/Introducing+Atlassian+account

https://confluence.atlassian.com/display/Purchasing/Introducing+Atlassian+account


https://confluence.atlassian.com/bitbucketserver/bitbucket-server-4-3-release-notes-794211212.html

https://confluence.atlassian.com/bitbucketserver/bitbucket-server-4-3-release-notes-794211212.html


Use #12: Prototyping



Use #13: Bug Report / Helpdesk Ticket




Use #14: Quick Tip or Answer



Email client support for animated GIF

https://litmus.com/blog/a-guide-to-animated-gifs-in-email







Use #15: Reaction






Creation Tools

GIF-specific

• Recordit (Win and OS X)

• Licecap (Win and OS X)

• Giphy (iOS, OS X, web)

• GIF Brewery (OS X)

• Cinemagraph Pro (iOS, OS X)

• ImgFlip (web)

• GifMaker (web)

• GIF Studio (Android)

Multi-purpose• Snagit 13/4 (Win and OS X)

• Camtasia (Win and OS X)

• Photoshop (Win and OS X)


Uses Recap

1. Steps

2. Series of Steps

3. Interactive Elements

4. Cause and Effect

5. Compare Techniques

6. Compare Similar Things

7. Before and After

8. On-Boarding/Walkthrough

9. Mini-demos

10. Teaser

11. Concept Illustration

12. Prototyping

13. Bug Report / Helpdesk Ticket

14. Quick Tip or Answer

15. Reaction


Tips Recap

• Ideal for 1-4 steps (video for > 4)

• Overcome friction

• Dimensions: balance clarity, file size, platform constrains

• Cropping > scaling

• Short duration (<10 sec)

• Stately pace

• Pause or fade at loop

• Platform gotchas: email, PPT, Keynote


Questions and Discussion

• …

• …

• …

• …

• Anyone using GIF?

• What did I miss?

• Did you fill out the presentation feedback survey on Sched?


Get in touch!

Daniel Foster@fosteronomo

[email protected]

linkedin.com/in/danielfoster

https://twitter.com/fosteronomo

mailto:[email protected]

https://www.linkedin.com/in/danielfoster

15 Ways to Animate Your Content with GIFs

Business