Designing a New Look for Instagram, Inspired by the Community

Posted 2 weeks ago by Ian Spalter

1V7GYJQ_4lykfDzOf9q17eA

Last May, we announced a new look for Instagram, inside and outside the app. We created a new Instagram app icon and a set of unified icons for Hyperlapse, Layout, and Boomerang. We’ve also refreshed the user interface with a simpler, more consistent design that helps people’s photos and videos shine.

Inspiration

When Instagram was founded, it was a place to easily edit and share photos. Five years later, things have evolved. Instagram is now a diverse community of interests where people are sharing more photos and videos than ever before; using new tools like Boomerang and Layout, and connecting in new ways through Explore.

Last year, a group of us started digging into how we could support this evolution while staying true to Instagram’s heritage and spirit. We wanted to create a look that would represent the community’s full range of expression — past, present, and future.

“We wanted to create a look that represented the community’s full range of expression — past, present, & future.”

Challenge: Honor Instagram’s identity while reflecting its growth

Whether it’s a #myinstagramlogo art piece or an Instagram cake, we feel lucky to have an icon that people love and want to make their own. Between the round shape with grippy textures, teddy-bear brown, candied lens, and rainbow, there’s a lot to love.

“Brands, logos and products develop deep connections and associations with people.”

Brands, logos and products develop deep connections and associations with people, so you don’t just want to change them for the sake of novelty. But the Instagram icon and design was beginning to feel, well…not reflective of the community, and we thought we could make it better.

Let’s begin

The original icon’s skeuomorphic style had the benefit of making it feel tangible despite being pixels, and our initial explorations involved trying to modernize it as it was. We started with the basics, removed ornamentation, and flattened the icon. And we arrived at a brighter, flatter option — but was it better? Would we feel the need to do this again in a year?

Since these early “flattening” explorations lacked the visual weight of the original, we turned our focus to figuring out exactly what people loved about the classic icon and how we could carry that over.

Anecdotally, we knew that people loved the rainbow and the camera lens was a key visual element. As a part of our process, we also asked people at the company to draw the Instagram icon from memory in 5 seconds. Almost all of them drew the rainbow, lens, and viewfinder.

With this insight, we decided to translate these elements into a more modern app icon that strikes a balance between recognition and versatility.

Solution: The rainbow and camera lens as a bridge

Color

If the lens is a bridge into the bolder, simpler glyph, the rainbow is a bridge into the colorful gradient. Color has always been a huge part of Instagram — you see it in the classic app icon, filters, and the community’s photos and videos.

When we started reimagining the rainbow, we looked at more minimal options, but ultimately we needed more warmth and energy to complement the glyph.

Glyph

We realized we needed to move past a rendered camera to get a flexible, scalable glyph, but the previous glyph proved to be a weak basis for an icon. To maintain the previous icon’s gravity, we had to figure out how to give the new mark more character while also removing what was unnecessary.

The question then became, how far do we go? If you abstract too much, the glyph doesn’t feel tied to the history and soul of Instagram. If you make it too literal, it’s hard to justify changing from what we currently have.

After a lot of refinement, we landed on a glyph that still suggests a camera, but also sets the groundwork for years to come.

One visual identity

Our family of apps — Layout, Boomerang, and Hyperlapse — also have a new, unified look. We carried the gradient through each icon, and designed them on the same grid to make the system feel cohesive. We also updated the Layout and Boomerang icons to better represent what the apps help you create — a collection of photos, or a mini video that loops forward and backward.

1GjkqVTzmtSAoF62cZcIvog

New UI

Around the same time we started rethinking the icon, we began iterating on the UI, working to create something simple and clean so that people’s posts are the focus in the app.

While the icon is a colorful doorway into the Instagram app, once inside the app, we believe the color should come directly from the community’s photos and videos. We stripped the color and noise from surfaces where people’s content should take center stage, and boosted color on other surfaces like sign up flows and home screens.

1BO_gO-0X-TPX8z12driOBg

As we reduced color and noise in the UI, we saw interaction patterns that no longer felt native on iOS and Android devices. By paring down the new interactions and using standard iOS and Android components, fonts, and patterns, people will be navigating familiar terrain. We also redesigned our icons in a way that feels at home on Android and iOS.

Looking ahead

The evolution of the community has been inspiring, and we hope that we’ve captured some of the life, creativity, and optimism people bring to Instagram every day. Our hope is that people will see this app icon as a new creative spark — something to have fun with and make their own. We’re excited for where this will take us.

Shouts outs to:

Joy-Vincent Niemantsverdriet, Eric Goud and Robert Padbury for their great work on this project; and Cole Rise and Tim Van Damme for their work on the original app icon and glyph.

Jon Lax and Julie Zhuo for their feedback on this post.

This article was originally posted on Ian’s Medium page.

Get Marvel for iOS and Android

Get Marvel for iOS and Android

Design and prototype on the go!

Ian is Head of Design at Instagram and was previously Sr. UX Manager at YouTube, and Director of UX & Design at Foursquare. Born and raised in NY.

Related Posts

As a designer, your toolbox empowers you to do research, define personas, explore UX patterns, lo-fi sketch, and even refine what agile design means. It’s time to apply these skills to the one product that needs it most – yourself. Before you embrace this concept, let’s paint a picture. You’re a design consultant and you’ve been hired to lead the… Read More →

This is a story about a GV style design sprint. If you’ve never heard of this, you can learn more here. Europe’s leading smart thermostat platform Toon® just opened up its API on toonapi.com. Toon is now accessible to developers, designers, startups, corporates and universities to re-imagine smart home and energy solutions. With this community, Toon wants to create smart… Read More →

In November 2016 I found myself leaving a really truly great experience design team at a solid software company to go onto… nothing. Happily for me, marriage took me to a different town which then made me look at the prospect of a new job, new team, new design challenges and purpose. Leaving a decent job and great team made me… Read More →