Rethinking Instagram (On the Web)S

Surely by now we've all seen the latest addition to Instagram, the long awaited website. What did you think of the turn out? 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:

Rethinking Instagram (On the Web)

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 that "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. Okay, enough rambling about the past. Onto the new stuff.

My idea for Instagram on the web

First, let's look at the main feed.

Rethinking Instagram (On the Web)S

I really wanted my Instagram feed to be easily scannable. With this new feed I created, I can clearly view at least 3 full posts to the 1 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.

Rethinking Instagram (On the Web)S

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.

Rethinking Instagram (On the Web)

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

Rethinking Instagram (On the Web)S

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.

Rethinking Instagram (On the Web)

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.

Rethinking Instagram (On the Web)

The Tech Block 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.