Capn Design

Entries tagged UX GIFS

UX GIFS: Ebony's Masthead

Posted July 19, 2013

Masthead Change

We’ve lived through several years of publications working out what to do with their giant masthead and navigation bars. There’s been plenty of success, but Ebony Magazine has the most elegant I’ve seen. It took a recent inelegant solution (you can ignore the article, obvs) to remind me that this is still a tough thing to do well. Thanks, Ebony!

UX GIFS: Making FiftyThree

Posted July 9, 2013

Hero image at large scale

Hero image at medium scale

Hero image at small scale

FiftyThree, creaters of the sketching app Paper, recently started a blog devoted to the making of their products. The hero section has a great CSS-powered animation when you first load the page. What’s more impressive is that it works well at several breakpoints. Beautiful stuff.

UX GIFS: Instagram's Hover State

Posted July 8, 2013

hover state for instagram's web view

This is the first in what I intend to be a regular series. I frequently come across well-designed interfaces and want to share them. A lot of these will be animated gifs and I’m still fiddling with settings. If you have tips, I’m all ears.

The best thing about Instagram’s iPhone app is the way it focuses almost entirely on the content. A single image (or, now, video) takes up nearly the entire viewport. Sure, there are comments and metadata, but the focus on huge imagery makes it easy to browse and gives no doubt that the service is about engaging photography.

Even on their user profiles—which show a grid of images and have a very different success metric—they let the images speak for themselves.

A few months back, Instagram launched a web version for logged-in users. With new technology (I know, nutty that desktop browsers are new for many products these days) comes new opportunities for interaction design. With their web version, they’ve unlocked the mystical hover state on user profiles.

As you can see above, they’ve continued the trend of letting the images speak for themselves. By adding a hover state, they can provide more data to show the engagement for each photo. If the goal is to help you find the interesting people, they’ve added another quantifiable data point for you to consider.

Also, rolling over a bunch of them in a row looks awesome.

Recent Entries