Start building with the power of GIPHY. GIPHY SDK helps integrate the world's largest GIF library, customize a suite of powerful features, and boost engagement. For this project, we applied our loopy learnings to create a slick GIPHY experience that can be embedded seamlessly in any app – as well as branding, a marketing page, ui kit, & developer portal.

Part 1: The SDK

The SDK comes with two layout types: waterfall (a vertical multi-column grid) & carousel (a single horizontal row).

To help fit in with as many apps as possible, it also comes with two core color schemes: light & dark. Of course, the colors are also all individually customizable to suit everyone's needs.

As a core principle that we used to define the direction throughout, everything is customizable– not just the color scheme & layout, but also the entire flow. Want your users to open directly into search results, and forego any sort of gif landing or trending feed? Caaan do.

Personally, we as a team (and individually) feel a lot more comfortable being able preview a GIF before sending, but plenty of apps (Tinder, for example) prefer the quicker route of just sending the GIF right away. One of our optional screens is a GIF Preview that includes uploader attribution. (shown below)

With the help of front-end based-god (link: target: _blank text: Jonny), we created an SDK Example App to help communicate all of the various configurations.

Here's Unfold's SDK integration: With Unfold, your Instagram and Snapchat Stories will look like they took hours to craft—even if you pieced yours together in less than a minute.

Part II: The UI Kit

Where the SDK Example App was made to facilitate developers, for designers we also created an SDK UI Kit for Sketch. It's a (much cleaned up) version of the same file that we used to design the SDK.

Designers can drop their app into a single symbol and see the SDK come to life on top of it. Check out the kit and our design guidelines here.

Designs were made for both iPhone and Android – it's important to feel as native to the platform as possible.

Apps can use any entry point to the SDK that they'd like, but to get the ball rolling (and also to selfishly encourage our own branding!) we included a bunch of buttons.

Part III: The Branding

Designing the SDK is only one piece of this project – for the SDK to be successful, we need it to be used. Marketing for the SDK has to convincingly message that it's a cool and easy integration that will add value to their app. The full flow of our SDK touches project managers, engineers, end-users, & even GIPHY marketers.

For the branding, we worked closely with Dark Igloo. Working off of the concept of the SDK as "Building blocks of GIPHY", these pieces are all configurations derived from our logo.

After a few rounds, we landed on these three core configurations – they're variations on the corner piece of the GIPHY logo. We opted for an isometric 📷 3D view, as the SDK can be seen as a "stack" on top of an app.

The last step for the branding was to morph the three configurations into a looping logo. I originally tried to get this done in software that I knew (After Effects), but eventually caved to learning Cinema4D. I quickly fell in love.

The final full logo.

The final full logo.

A few low-fidelity stages of wires for the one-pager. We broke the page out into a few sections: 1) an attention-grabbing header, 2) the highest value hooks, 3) an interlude of GIPHY content, 4) a few snippets of how to integrate the SDK, 5) what it looks like, 6) our other pre-existing developer offerings, & 7) a final capture CTA.

Knowing that people will fall off with a page this lengthy, we prioritized content from top-to-bottom (and shuffled things around a bit during the wireframing process).

The header tells everything that's needed to be known as succinctly and visually as possible. Visitors can either scroll for more general information, dive into the docs, or get started right away.

An interactive carousel showing a few of the different layout & content-type configurations. We were super fortunate to be launching this product hand-in-hand with (link: text: GIPHY Emoji target: _blank), so were able to use the emoji as section accents.

Want to take a closer look at the marketing page? Either look at the real thing or look at the original Sketch file in our Abstract Collection.

Hey, thanks

Wow, that was a long one! The GIPHY SDK was a truly comprehensive product for us, touching ux/ui, branding, & motion. Interested in reading even more?? Take a look at GIPHY's Engineering Blog or some light press from Mac Observer.