Новости

С оранжевого на белый: как Одноклассники обновили дизайн мобильного приложения в iOS

8 июля 2019
4 мин. чтения
С оранжевого на белый: как Одноклассники обновили дизайн мобильного приложения в iOS

Одноклассники убрали на второй план фирменный оранжевый цвет в мобильном приложении на iOS. Следующий шаг — редизайн Android-приложения и унификация веб-версии и мобильных приложений.

В течение 2018 года Одноклассники разрабатывали дизайн-концепты, чтобы сделать продукты современными и простыми. В веб-версии обновились витрины видео и подарков, а мобильная версия ОК на iOS полностью обновилась в этом году.

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

С оранжевого на белый: как Одноклассники обновили дизайн мобильного приложения в iOS

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

«Мы переработали главную страницу, чтобы выгодно выделяться среди наших конкурентов. Люди любят украшать свои страницы самостоятельно, и ОК даст им такую возможность. Пользователи могут менять обложку на главной странице в зависимости от настроения, также ее можно украсить подарками друзей», — говорит Алексей Черепененков, руководитель отдела дизайна социальной сети Одноклассники.

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

«Мы остановились на текущем варианте по нескольким причинам. Во-первых, яркие цвета — это тренд. Мы хотим слышать мир и давать ему то, что он просит. Если в следующем году станет модным что-то другое, мы быстро адаптируемся под новые запросы, — рассказывает Черепененков.

Плоский стиль иллюстраций, как менее трудоемкий в работе, позволяет это сделать. Еще одна задача, которую мы ставили перед новыми иллюстрациями, — позитивное влияние на настроение людей. Даже если некое изображение сообщает о неполадках или о том, что раздел пуст, персонажи в нем подают это так, чтобы вызвать у человека улыбку. А это очень для нас как для соцсети, заточенной на искренность и эмоциональное общение пользователей».

Унификация трех платформ — это глобальная цель для Одноклассников. Обновление мобильного приложения на Android и сокращение его различий с приложением на iOS позволит пользователям чувствовать себя одинаково комфортно на обеих платформах.

Также в планах у дизайнеров ОК — постепенное обновление веб-версии. Одними из первых разделов, которые уже получили обновления в веб-версии стали «Видео» и «Подарки». Дизайнеры упростили витрины, чтобы не отвлекать пользователей от контента.

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

В социальной сети не выкатывают обновление одним днем, так как заботятся о пользователях. По словам Алексея, люди любят новые красивые вещи, периодически меняют телефоны, одежду и автомобили, но не любят, когда резко меняется опыт их использования. «Пользователям нравится, что современный автомобиль может взять на себя сложную работу с парковкой в тесном пространстве, но они не хотят использовать  джойстик компьютерной приставки вместо привычного руля».

В команде дизайна соцсети около 10 человек, работающих из Москвы, Санкт-Петербурга и Риги. Среди них есть проектировщики и иллюстраторы. Проектировщики постоянно совершенствуют сервисы, делая их удобнее для пользователей с точки зрения визуальной эргономики и дизайна. Иллюстраторы создают все визуальные элементы, включая иконки, большие иллюстрации для страницы авторизации, отрисовывают трёхмерные маски дополненной реальности в видеотрансляциях, создают анимированные ролики к праздникам.

«К нам в команду попадают лучшие из лучших: каждый имеет очень богатый опыт работы в своей отрасли и относится к своему делу с любовью. А как иначе, если твоим сервисом пользуются десятки миллионов людей?», — говорит Алексей.

2
1
1
1
1

Материалы по теме

Как создавать качественный дизайн для соцсетей: интервью с командой DENZEL

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

В этой статье команда дизайна бренда DENZEL расскажет, как правильно оформлять группу в ОК, использовать тренды в работе над проектом и создавать визуальный контент, который понравится целевой аудитории.

Дизайнерам, которые создают визуальный стиль для брендов или авторского блога, стоит помнить: тренды непостоянны. То, что сегодня в часто используется, завтра может устареть. 

Актуальные тренды современного дизайна обычно связаны с новыми визуальными приёмами или свежим взглядом на то, что существовало раньше. Могу выделить несколько популярных подходов:

Минимализм. Использование простых форм — достаточно старая идея. Сейчас дизайнеры применяют минимализм с яркими цветовыми сочетаниями — например, неоновым жёлтым или розовым. 

Крупный план. Можно снять объект с близкого ракурса, чтобы сделать картинку премиальнее. К примеру, поставить товар близко к камере и показать его детали.

Гиперреалистичные иллюстрации в 2D и 3D. Это графика, которая выглядит как реальные объекты. Например, их часто используют банки, добавляя на картинки модели телефонов с приложениями и свои карты.

Креативная типографика. Это, например, подбор интересных сочетаний шрифтов, которые сами по себе передаёт определённую эмоцию и настроение подписчикам.

Если вы создаёте дизайн без системы, а с опорой на определённый приём — например, 3D-графику — то со временем вам придется менять стиль, чтобы оставаться в тренде. Из-за этого может быть сложно построить единый визуальный стиль. Поэтому важно всегда следовать собственному брендбуку, чтобы не зависеть от изменчивых трендов.

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

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

Я использую все виды визуального контента, чтобы посты лучше выглядели в ленте пользователя. Кроме специально подготовленных картинок к публикациям в группе бренда можно добавлять и обычные фотографии.

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

Бренды при создании визуального контента допускают несколько частых ошибок:

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

Делают контент с неверным посылом. В этом случае картинка не решает задачи, важные для бренда или блогера — например, не показывает товар в продающем посте.

Используют изображения низкого качества. Важно выбирать снимки в высоком разрешении и с подходящего ракурса, чтобы показать продукт с нужной стороны. 

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

Неверно расставляют акценты. Многие посты в соцсетях состоят из текста и изображения. Важно правильно расставить акценты: то, что вы хотите выделить, должно быть заметным. Например, если мы продаём бензопилу по акции, то в первую очередь нужен акцент на тексте «Скидка 20%». 

Не создают уникальные визуальные образы. Важно уметь выделяться среди других компаний. Если у бренда нет собственного привлекательного визуала, покупатели могут не заметить продукт среди других предложений. 

Слепо следуют трендам или их игнорируют. Дизайнеру важно находить баланс и использовать популярные идеи так, чтобы они соответствовали бренду и его задачам.

Для брендов хорошо быть современными. Но я бы подумал, стоит ли компании использовать последние тенденции в общении с клиентами. Дизайнерам легко зацепить внимание аудитории чем-то «модным», как спиннер в своё время. С таким подходом нужно быть осторожным, если вы представляете крупный бренд или блог с продуманным позиционированием — здесь цена ошибки очень высока. 

В большинстве случаев мы в DENZEL отказываемся от современных трендовых идей, потому что они могут навредить нашей компании, несмотря на большое количество реакций от пользователей.

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

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

Чтобы реклама была успешной, нужно учесть несколько моментов: 

  • пол, возраст, интересы и привычки тех, кому вы продаёте товар;
  • лаконичный креатив, который не перегружен текстом — пользователям ОК часто нравятся простые картинки с искренними эмоциями;
  • понятный и короткий текст с чётким призывом к действию — CTA.

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

Результаты рекламы по разным аудиториям будут отличаться. Даже похожие изображения в разное время получают разные реакции от пользователей. В одном месяце он привлекает клиентов, а в другом — нет. 

Дело в том, что на реакцию аудитории может влиять большое количество факторов: не только сам шаблон рекламного креатива, но и товар на картинке, текстовое описание, сезонные тренды, экономическая ситуация и действия конкурентов. Мы проводим A/B-тестирование, чтобы понять, какие элементы креатива наиболее привлекательны для аудитории в этот момент. 

Картинки, созданные нейросетями, активно используют в современном дизайне. Например, ИИ помогает экономить время: вместо того чтобы создавать визуал с нуля, мы можем написать запрос и сгенерировать изображение, которое можно отретушировать, доработать и добавить в наш проект.

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

Например, мы продаём фонтанчик для пруда. Таким снимков нет ни в интернете, ни у нас. Но нейросеть может по нашему запросу — промпту — сгенерировать изображения, которое показывают работу нашего товара. Такое решение относительно дёшево для компании и позволяет сэкономить время дизайнера. 

Но при генерации картинок не обойтись без участия специалиста. Чтобы написать промт, нужно обладать навыками дизайнера, уметь генерировать изображения и пробовать разные варианты. В большинстве случаев придётся исправлять ошибки нейросети и ретушировать картинку.

Чтобы оформить группу в ОК, подготовьте несколько стандартных элементов:

  • обложку;
  • логотип в векторном формате;
  • иконки для меню группы;
  • цвета и шрифты.

Оформите всё это в единый документ — UI-Kit. Это сборник готовых компонентов, которые можно использовать для графического дизайна или создания интерфейсов. Когда нужно сделать новую картинку, необходимые материалы и шаблоны будут под рукой. UI-Kit поможет поддерживать единый визуальный стиль группы.

Если вы до этого никогда не занимались визуальным оформлением группы в ОК, не стоит полагаться на собственное чутьё. Обратитесь к профессионалам, чтобы получить помощь на старте. 

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

Мы советуем дизайнерам, которые начинают работать над визуалом для группы бренда или блога в ОК, придерживаться нескольких рекомендаций:

Начните с поиска референсов. Не пытайтесь сразу придумать что-то уникальное и своё, это сложно и требует серьезной подготовительной работы. Например, вы можете взять чьи-то готовые идеи и адаптировать их под ваши задачи. Это будет хорошим стартом.

Не перегружайте картинку информацией. Не нужно добавлять в иллюстрацию слишком много текста или лишние дополнительные картинки — соблюдайте баланс. 

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

Создавайте простые и грамотные тексты. Избавляйтесь от причастных и деепричастных оборотов, а также лишних слов. Следите за орфографией: проверяйте склонения и спряжения слов.

Не заставляйте пользователей много «думать». Из-за размышлений человек устаёт и теряет время, которое мог бы потратить на отдых. Если картинки неконтрастные, а шрифты трудночитаемые, пользователям будет сложно быстро понять ключевой посыл иллюстрации. Старайтесь использовать простые визуальные решения. Например, добавляйте простые шрифты, пишите текст достаточно крупно и делайте изображение контрастным.

Хороший дизайн помогает бренду выделиться среди конкурентов в ОК и привлечь внимание аудитории, готовой приобрести продукт или услугу. Компания может выделиться, если продумает использование трендов: минимализма, крупных планов, очень реалистичных изображений и необычного написания текстов. Нейросети помогут дизайнерам сэкономить рабочее время при создании креативов — но важно использовать этот инструмент уместно и с умом.

Начать оформление группы можно с подготовки нескольких стандартных элементов:

  • обложки;
  • логотипа в векторном формате;
  • иконок для меню группы;
  • цветов и шрифтов.

Все элементы можно объединить в один документ — UI-Kit. Им будет удобно пользоваться при работе над новыми картинками.

Команда DENZEL подготовила несколько простых рекомендаций для тех, кто работает над визуалом бренда в ОК:

  • начинайте работу с подбора референсов;
  • не перегружайте изображение контентом — текстовыми блоками и дополнительными иллюстрациями;
  • используйте только заранее выбранные шрифты и цвета
  • добавляйте на картинку простые и грамотные тексты — без сложных оборотов и ошибок;
  • не заставляйте пользователей много «думать» и всматриваться в ваш креатив, чтобы его понять.
9 советов по типографике в баннерах для соцсетей или вечерний разговор с котом (и маркетологами)

Евгений Непомнящий арт-директор студии UDGF: «Этот блог читают обычно маркетологи и медиаменеджеры. Чтобы рассказать им про типографику просто и понятно,…

Планерка: тренды дизайна и переход в метавселенную

Планерка — рубрика, в которой мы делимся глобальными историями из digital-мира, которые случились на прошлой неделе. Заходите в блог в…

15 259
4 мин.