Проектируем новый образ Instagram, вдохновившись сообществом

213

Вы читаете перевод статьи “Designing a New Look for Instagram, Inspired by the Community”. Над переводом работали Nancy Pong и Ринат Шайхутдинов. При поддержке iSpring.

Сегодня мы анонсировали новый образ Instagram: приложение изменилось как внутри, так и снаружи. Мы создали новую иконку Instagram и набор согласованных иконок для Hyperlapse, Layout и Boomerang. Мы также обновили пользовательский интерфейс — дизайн стал проще, согласованнее и теперь помогает фотографиям и видео пользователей сиять во всей красе.

Вдохновение

Когда Instagram только появился, там можно было легко редактировать фотки и делиться ими с друзьями. Через пять лет приложение развилось в нечто большее. Теперь Instagram — это сообщество людей с самыми разнообразными интересами; пользователи размещают больше фотографий и видео, чем когда-либо, используют инструменты Boomerang и Layout, ищут друг друга новыми способами через Explore.


Интересуетесь свежими статьями по дизайну? Вступайте в группу на Facebook.


В прошлом году несколько ребят (и я в их числе) стали разбираться: как отразить в образе бренда развитие последних лет, при этом сохраняя наследие и дух Instagram. Мы хотели создать образ, который отражал бы сообщество Instagram во всех его формах самовыражения — прошлых, настоящих и будущих.

Задача: Выказать уважение индивидуальности Instargram, и при этом отразить развитие бренда.

Мы счастливы, что люди любят нашу иконку и хотят сделать ее частью своих жизней: будь то шедевр под хэштегом #myinstagramlogo или кусочек торта Instagram. И как не любить эту округлую форму, эти приятные “на ощупь” текстуры, этот коричневый цвет оттенка мишки Тедди, эту покрытую глазурью линзу и эту радугу!

Со временем у людей формируются глубокие связи и ассоциации с брендами, логотипами и продуктами, поэтому нельзя менять образы лишь затем, чтобы привнести что-то новенькое. Тем не менее, иконка и дизайн Instagram отчасти ммм… перестали соответствовать образу сообщества, и мы решили сделать их лучше.

Давайте начнем

Преимущество оригинальной скевоморфной иконки было в том, что она, будучи простым набором пикселей, воспринималась как нечто осязаемое. Поэтому изначально мы попытались модернизировать иконку в том виде, в каком она была. Мы начали с основ: убрали орнамент, сделали иконку плоской — и получили более яркую, плоскую версию. Стала ли иконка лучше? Не придется ли снова переделывать ее на следующий год?

У нового плоского варианта не было того визуального веса, который присутствовал в оригинале — поэтому мы сфокусировались на элементах, которые привлекали людей в классической иконке: их нужно было сохранить. По личному опыту мы знали, что людям нравилась радуга, а ключевым визуальным элементом была линза камеры. Кроме того, мы просили людей в компании нарисовать иконку по памяти за 5 секунд: почти все рисовали радугу, линзу и видоискатель.

Осознав это, мы решили преобразовать ключевые элементы в более современную иконку, которая бы обеспечила баланс между авторитетностью и разносторонностью Instagram.

Решение: Радуга и линза — это наш мостик

Цвет

Если линза — это мостик к более простому, четкому глифу, то радуга — это мостик к цветному градиенту. Цвет всегда был очень важной частью Instagram — это видно по классической иконке приложения, по количеству фильтров и по фотографиям и видео пользователей.

Когда мы начали фантазировать на тему радуги, нам хотелось остановиться на чем-то минималистичном, но гораздо более теплом и энергичном — чтобы выгодно дополнить глиф.

Глиф

Мы поняли, что нужно отойти от изображения камеры и создать гибкий, масштабируемый глиф — но предыдущий глиф оказался плохой основой для новой иконки. Чтобы сохранить гравитацию предыдущей иконки, нужно было решить: как придать новому символу больше характера, и при этом убрать все лишнее?

Этот вопрос постепенно перерос в: “Насколько далеко нам стоит зайти?”. Если сделать глиф слишком абстрактным, Instagram утратит свою душу, свою историю. Если глиф будет слишком буквальным, возникнет вопрос: зачем вообще понадобилось что-то менять?

После множества полировок, мы сошлись на версии глифа, которая по-прежнему напоминала камеру, но также определяла фундамент на долгие годы вперед.

Наш корпоративный стиль

У нашей линейки приложений — Layout, Boomerang и Hyperlapse — теперь тоже обновленный единый стиль. Мы пронесли градиент через каждую иконку, и применили везде одну и ту же сетку, чтобы система выглядела согласованно. Кроме того, мы обновили иконки Layout и Boomerang, чтобы они лучше отражали суть своих приложений: коллекции фотографий и небольшие закольцованные видео.

Новый интерфейс

Параллельно с иконкой мы начали переделывать пользовательский интерфейс: хотелось создать нечто простое и понятное, чтобы в центре внимания были именно посты пользователей.

Пользователь входит в Instagram через цветную дверку иконки, а вот внутри приложения цвет задают фотографии и видео пользователей. Поэтому мы убрали цвета и шумы из основного интерфейса — в котором главную роль играет контент пользователей; а в других разделах — таких как регистрация или домашний экран — сделали цвета ярче.

Устранив цвета и шумы в основном интерфейсе, мы заметили некоторые паттерны взаимодействия, не свойственные iOS и Android устройствам. Мы ввели новые типы взаимодействия и применили стандартные компененты iOS и Android — теперь люди смогут лучше ориентироваться в приложении. Кроме того, и новый дизайн иконок смотрится на iOS и Android естественнее.

Взгляд вперед

Развитие сообщества вдохновило нас: надеемся, что нам удалось ухватить ту живость, творчество и оптимизм, которые пользователи ежедневно привносят в Instagram. Очень хочется, чтобы люди воспринимали новую иконку как творческую искру и как частичку самих себя. Мы с нетерпением ждем удивительных последствий этих изменений.

Благодарности этим ребятам:

Джою-Винсенту Нименцвердрит, Эрику Году и Роберту Пэтбури за их работу над этим проектом, а также Коулу Райсу и Тиму Ван Дамму за их работу над оригинальной иконкой и глифом.

А еще Джону Лаксу и Джули Чжо за их отзывы об этой статье.


Мобильное приложение «Заметки о психике» | Mental Notes

Подкидывает идеи, как привлечь, удержать и направить внимание пользователя.

Mental notes — это колода из 53 карточек с описанием психофизиологических моделей поведения людей, которые лежат в основе принципов веб-дизайна. Они помогают дизайнерам, проектировщикам лучше понять поведение пользователей и найти эффективные решения при создании дизайна интерфейсов.

Скачать приложение в Appstore →
Бренд-кейсы

Посты в категории Брендинг

Топ-10 горячих навыков 2019-го и как их освоить

Ольга Жолудова

4 июня 2019

Посты в категории Брендинг

Семишаговый тест на определение качества логотипа по Полу Рэнду

Ольга Жолудова

30 марта 2019

Посты в категории Брендинг

Магическая формула бренда: Карта опыта взаимодействия с брендом (BrX)

Ольга Жолудова

7 июня 2017