Launched: 2014
Duration: 2 weeks

GifMeme Website.


Background

My friends over at the Microsoft Azure team asked me to design the UI for a simple web app that was to be demoed at the 2014 Microsoft Build Developers Conference.


What I Did

To avoid a cluttered, dark and cumbersome-to-use design that seemed to be a common trait among many meme sites, the visual design of the Gifmeme site needed to instead carry a clean, fresh, and well-balanced look and feel. Looking to industry examples like Pinterest and Etsy, a neutral palette with small pops of color in the logo, buttons and social icons were selected to create a sense of freshness and balance, allowing for the memes to take center stage.

The overall page layout uses a block-by-block content feel, flattening the information architecture by cascading content blocks down the page to create an almost window-shopping like experience.

To prototype the animation and interaction of how the meme containers would cascade down the page, I coded the front-end using Bootstrap with jQuery Masonry to maximize the efficiency of containing items with varying heights.

The result is a clean, minimalist and downright mesmerizing web app where every bit of screen space is used.

Like what you see?

Lets start talkin'

Copyright © 2013-17 Kat Estacio. All Rights Reserved.