Introducing Webbygram, my vision of how Instagram on the web should feel.

Synopsis: I’m tired of Instagram not having a simple web app. So I built one.

I’m a huge, huge, huge Instagram fan. As a user, I’ve been enjoying the app for well over a year. I’ve posted 750 photos. I’ve probably made at least as many likes and I comments. I love the app.

As a developer, I’ve also been a long time fan. About a year ago, I launched PhotoPile, a simple, fun way to view Instagram photos on the web. Then, I launched MorningPics, a way to refresh old memories through a daily email. Both apps have done well and are completely built on top of the Instagram platform.

In fact, PhotoPile has done so well that Drew from The Next Web wrote a piece about it in January titled “This app nails what your Instagram profile should look like”, even saying:

The folks who made PhotoPile would be a good group of designers to bring in [to build the web version of Instagram].

Of course I was flattered since I did all the design and engineering work, but I actually disagreed with Drew. Although PhotoPile is a fun experience, there are a bunch of reasons why it wouldn’t make sense as the official Instagram web app. So I’ve been patiently waiting for Instagram to finally release their own.

Several other apps have built Instagram on the web experiences, including Webstagram. Although they’ve all been interesting, none of them resemble enough of the design and product ethos that exists in the native apps.

Instagram is put on a pedestal for being “mobile first”, meaning they launched on mobile before they launched on the web. But that term isn’t “mobile only”. Unfortunately, that’s how Instagram has stayed. They provide some very rough web views of individual photos, but that’s it.

Some would say that Instagram doesn’t need a web presence. I disagree. When I click an Instagram link on Twitter, I want to have a slightly similar experience than I would within the app. I want to be able to like the photo, or comment, or dig deeper and see what other photos that user has posted. I don’t need to be able to change settings, or even see my own home screen. I just want to interact with posted photos.

Path has managed to create a beautiful “mobile first” product with a beautiful accompanying web view. They didn’t port the whole app to the web. They just brought the important interaction points. I brought this up on Twitter the other day.

But instead of just continuing to bitch about it, I’m going to try to contribute. I did this a few months ago with Uber’s UI, and it ended up being a useful exercise when the company actually improved the UI.

the updated surge pricing screen seems to take into account some feedback from OneSheet creator Brenden Mulligan on his blog after the New Year’s Eve debacle.

Source: GigaOm

So I sat back and thought, what would the official Instagram Web UI look like? The result: Webbygram. A silly name, I know, but who cares.

It allows you to see a photo, like it, comment on it, and browse around. That’s it. It’s not supposed to completely mirror the Instagram native apps (so you wont see account settings). It’s meant to bring the important interaction points to a web interface.

Here are some of the rules I used when building it:

  1. It’s all about the images. Make them bold and beautiful.
  2. The colors and assets should be consistent between the app and the web. The icons are from Instagram. The brown background is from their website (which I used because there is no background in the app). The link colors are the same as within the app.
  3. The format should feel similar to the app. Although the web browser has greater width, I think one of the joys of Instagram is scrolling through one photo at a time. So I used the centered format to keep this interaction.
  4. Photos can have their own page. Within the app, photos are just part of a stream. Because it’s the web, they all can have their own page. This is, after all, what people link to on social networks.
  5. Photo lists can be simplified. Because the photos get their own page, I used this as an opportunity to simplify the photo lists. I moved all the likes, comments, and captions onto the photo pages (except liking on the lists - see #7). This allows for the photo lists to focus more on the actual photos (see #1).
  6. Make users more human. Because the web has more space, I wanted to make the contributors (likers, commenters) more visual and tangible. In the app, it just lists usernames. On Webbygram, it shows their photo and lists their full name if available.
  7. Liking photos from the list has to be easy. The double tapping in the app is so simple, that I wanted to make liking a photo on the web just as easy. When you hover over a photo on a list, you reveal a button that allows you to easily like the photo.
  8. The interface has to be minimal. The native apps are beautifully minimal, I wanted the web app to be as well. I tried to add the least amount of information as possible to each interaction.
  9. Photo metadata has to be browsable. In the native app, you can click a username and go to that user’s page, or click a hashtag and see all the photos with that hashtag. This is one of the biggest deficiencies of the Instagram web experience today. On Webbygram, everything is browsable. You can keep discovering new photos as you click usernames, user photos, hashtags, and soon, locations.
  10. It has to be simple.

So, with all this, I present Webbygram. It was a fun project to build that used a bunch of the codebase of PhotoPile with a whole new front end. (Another rule was that I needed to build it in under 12 hours). Hopefully you like it.

I fully expect members of the community to tear it apart, tell me why I’m wrong, etc.. If you do, please link to it in a comment, so all the discussion around this is centralized.

Hat-tips to: Ryan Marshall for writing the code that allows users to actually like and comment on photos. Danny Trinh for the Path web UI, which I used for inspiration. Elle Luna for helping me find a name. Instagram for building a phenomenal app and community.

  1. idlesi reblogged this from brendenmulligan
  2. brendenmulligan posted this