Новости

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

3
1
1
1
1

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

Фирменный стиль блога в соцсетях: почему он важен и из каких частей состоит

Блогерам важно выделяться среди других создателей контента, и один из способов сделать это — разработатьфирменный стиль. В этой статье расскажем, из каких элементов складывается визуальное оформление группы, икак найти в нём собственную «фишку».

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

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

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

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

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

Обложка. Большой баннер в верхней части страницы. С помощью обложки вы можете больше рассказать о вашей группе, привлечь внимание и поделиться важной информацией. Обложки бывают статичные или динамичные со сменой до 10 слайдов. Рекомендованный размер — 1944×600 для веб-версии и 1024×768 для мобильной версии ОК.

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

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

В один пост можно добавить до 30 изображений — например, загрузить несколько снимков подряд и создать фотокарусель. Рекомендуемый размер для одиночных изображений — 900×600 или 1080×1080. Обратите внимание, что для фотокарусели важно заранее говорить квадратные картинки. Такие изображения не обрежутся при публикации.

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

Обложки для видео. В ОК можно подготовить ролик к публикации: добавить название, описание и обложку — картинку, которая будет показываться до начала просмотра. Для обложки подойдёт контрастное, чёткое и информативное изображение в основной цветовой гамме вашего блога.

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

Меню ссылок. Набор карточек со ссылками над лентой группы. Здесь можно закрепить наиболее важные публикации или рубрики, а также добавить картинки в фирменном стиле блога — чтобы все визуальные элементы смотрелись гармонично. Минимальный размер карточки — 168×112.

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

Для блока над лентой не нужно дополнительно создавать дизайн — в нём показывается только ранее опубликованный контент.

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

Рекомендуемый размер — 1000×1000. Добавьте также изображение каталога товаров в группе — картинку 500×500. Обратите внимание, что в ОК отображается не вся картинка, а только область 500×372.

Подробнее об оформлении группы в ОК мы рассказали в руководстве по интерфейсу для авторов ОК.

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

Рекомендуемый размер — 1000×1000. Добавьте также изображение каталога товаров в группе — картинку 500×500. Обратите внимание, что в ОК отображается не вся картинка, а только область 500×372.

Подробнее об оформлении группы в ОК мы рассказали в руководстве по интерфейсу для авторов ОК.

Дизайн фирменного стиля авторской группы в ОК разрабатывается поэтапно — от анализа предпочтений аудитории до изучения обратной связи от пользователей. Такой подход помогает блогеру создать продуманный и целостный визуальный образ. Рассмотрим каждый шаг более подробно.

При разработке фирменного стиля для нового блога изучите медиакит ОК и группы других авторов в ОК похожей тематики. Это поможет понять, что привлекает пользователей, и найти идеи для оформления.

А при изменении дизайна уже существующего блога в ОК проанализируйте статистику по вашей аудитории. Узнайте, какие публикации привлекают больше внимания.

Информация об аудитории и её предпочтениях — не единственный источник, который вам пригодится на подготовительном этапе. Задайте себе несколько вопросов:

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

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

Создайте цветовую палитру — 2-4 основных цвета. Они пригодятся для дизайна основных элементов оформления группы. Если вы часто используете фотографии и видео, а не графические иллюстрации, подумайте, в какой цветовой гамме будете обрабатывать изображения. Например, пастельной, чёрно-белой или с яркими оттенками.

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

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

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

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

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

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

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

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

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

Вероника Орлова, автор группы «Ranisa авторские украшения», говорит, что основа привлекательного стиля — это отражение себя. Создавайте оформление, которое нравится вам, и аудитория почувствует вашу искренность.

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

Вероника Орлова, автор группы «Ranisa авторские украшения», говорит, что основа привлекательного стиля — это отражение себя. Создавайте оформление, которое нравится вам, и аудитория почувствует вашу искренность.

Катерина Тихонова, автор группы «Собакологика», советует выбирать легко комбинируемые элементы, которые будут гармонично смотреться вместе и подчеркивать уникальность автора.

Катерина Тихонова, автор группы «Собакологика», советует выбирать легко комбинируемые элементы, которые будут гармонично смотреться вместе и подчеркивать уникальность автора.

Иногда авторам сложно продумать цельный фирменный стиль подготовить все нужные форматы изображений с первого раза — особенно если раньше не приходилось обрабатывать фотографии или разрабатывать дизайн. Команда по работе с комьюнити авторов ОК советует обратить внимание на:

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

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

Иногда авторам сложно продумать цельный фирменный стиль подготовить все нужные форматы изображений с первого раза — особенно если раньше не приходилось обрабатывать фотографии или разрабатывать дизайн. Команда по работе с комьюнити авторов ОК советует обратить внимание на:

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

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

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

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

В обучающей статье мы рассказали, как создать и отредактировать пост в ОК.

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

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

В обучающей статье мы рассказали, как создать и отредактировать пост в ОК.

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

Чтобы создать фирменный стиль для блога, нужно:

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

Чтобы создать фирменный стиль для блога, нужно:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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