Rethinking Instagram.com (FREE PSD)
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, but I did think 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 again test my skills and design the Instagram I wanted to see 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 features large images that we can all agree 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. Kevin Systrom says in a blog post, “Instagram for the web is focused on making the browsing experience a fast, simple and enjoyable one” about the new site. 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.(You can find a larger view here.)
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 is 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 is even the ability to turn off comments and just scan photos. I’m a 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.(You can find a larger view here.)
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? Leave me a note on the sidebar, and let me know what you think.
Now that we’ve gone over the main feed page, let’s look at my new profile page. (You can find a larger view here.)
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 — @dannpetty.
