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)
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.
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.
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).
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.