Duration: 2 weeks
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.
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.