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 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.
Part IV: The Marketing One-Pager
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 GIPHY Emoji, so were able to use the emoji as section accents.
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.