Rethinking Instagram (On The Web)

Rethinking Instagram (On The Web)

Surely, by now, we’ve all seen the latest addition to Instagram, the long-awaited website. What did you think of the turnout? Was it what you expected? To be perfectly honest, I had no idea what to expect. My hope was that they would create some sort of a nice grid layout. To my surprise, they did not. As a long-time interface designer, I wanted to test my skills and design the Instagram I wanted for myself.

First off, let’s look at what they have now:

You can see that the current Instagram design looks slightly different than the product does on the phone. There’s more texture, gradients, shadows, and some of the details are laid out a bit differently. The feed (image on the left) feels like a simple Tumblr theme or like a blog. It has large images that don’t scale well and look best only on our phones or in smaller thumbnails. They’ve moved the usernames to the left of the images and right-aligned them. The simple commenting and liking, which, in my opinion, is one of the greatest features of Instagram, definitely did not carry over well to the web. Man, who knows what that darker grey column is for behind the images.

I find the feed very hard to explore. After a few scrolls, I’m only 3-4 images deep and ready to move on. CEO and co-founder, Kevin Systrom, says, “Instagram for the web is focused on making the browsing experience a fast, simple and enjoyable one.” The beauty of Instagram on the phone is that it’s so easy to digest your feed within a few swipes. I’m not sure the current web presence does the same.

The user profile page (image above on the right) is very similar to Facebook and less similar to the previous feed page. Anyone else see a big disconnect? Here, we’re starting to see a nice grid which is easier to explore. But why is this view only available on a users profile? I won’t talk too much about the “timeline feature image” on top, but I will say that I wish I could choose the images that appear there. OK, enough rambling about the past. Onto the new stuff.

My idea for Instagram on the web

First, let’s look at the main feed.

I really wanted my Instagram feed to be easily scannable. With this new feed I created, I can clearly view at least three full posts to the one post that I was able to view on the current site. In my opinion, this brings back some of the fun the mobile version has with scannability. You’ll also notice I kept the comments and liking system pretty much the same as you would see on the phone. It’s simple, small and out of the way, but there if you want them. I chose a flexible grid —- much like Pinterest, some would say -— which helps keep the page interesting and less of a cookie-cutter grid with everything always in line. Pages like this can get boring quickly, so throwing things off align helps.

I also added a few small features that might be nice, like filtering between recent and most popular posts today. There’s even the ability to turn off comments and just scan photos. I’m a big fan of non-repeating UI elements in grid layouts. What that means for this Instagram redesign is that I hid the “like” and “comment” buttons to only appear on the image during rollover. It keeps things much cleaner, yet still allows quick access to those features. You can also click the post to view a larger image in an overlay where those features are more prominent.

Now, let’s look at the two feeds side by side. On the left is the current Instagram, and on the right is my version. Which one do you prefer? Let me know what you think.

Now that we’ve gone over the main feed page, let’s look at my new profile page.

I wanted my user profile page to look exactly like the feed. I mean, it should right? The only difference is that I added a “user info bar” on top that includes the username, bio, and stats, just like on the phone. Here are the two side by side to get a better idea of the difference.

On the left is the current Instagram profile page, and on the right is mine. You can see you get a lot more content on the original which some users might like. However I feel there’s a big disconnect between the two. I would much rather have people view the version on the right, since it’s more social and isn’t throwing so much content at once at the viewer. We could probably even loose the user avatar and username here. I left it in for clarity purposes.

Well, that’s my rethinking of Instagram on the web. I hope you enjoyed it, and thanks for reading. The team over at Instagram worked really hard on getting the current website up, and it shows. It’s a beautiful site. It’s just always fun to look at things in a new light sometimes. I would love to hear your thoughts on Twitter.

You can find more of Dan Petty’s design work and commentary here, or follow him on Twitter.

The TechBlock carries select tech-related content that’s produced in-house or hand-picked from user submissions that meet our criteria. To publish with us or to learn more about the publishing process, visit our publisher page. [clear]