Рекомендации касаемо оформления основных элементов группы ВКонтакте

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

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

ООбложки десктопные

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

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

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

Мы в очередной раз выяснили, что адаптация нам нужна, но все еще не понимаем, как адаптировать обложку. Все очень просто! Существуют зоны, которые либо отсутствуют при просмотре с мобильного приложения, либо частично прикрыты элементами интерфейса (см. Рис.1).

Рис.1

Коротко о каждой из зон:

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

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

Рис. 2
Макет десктопной обложки с цветными зонами.
Ссылка
Пароль к архиву — 20194

ЖЖивые обложки

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

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

Устанавливается подобная обложка очень просто. Заходите в управление сообществом, напротив пункта «Обложка сообщества» жмем на «Управление». В открывшемся окне видим 5 ячеек для загрузки 5-ти живых обложек, добавляем, выходим, все готово!

Правда, поставить обложку, опираясь только на ее размеры (1080х1920px), будет не самым верным решением. Есть особенности, которые нужно изучить и учесть при построении композиции, а именно зоны, которые скрыты при первом знакомстве с обложкой, и зоны, которые частично скрыты элементами интерфейса приложения (см. Рис. 3).

Рис. 3

Коротко о каждой из зон:

  • Красная зона — это зона, которая полностью скрыта при первом внешнем знакомстве с обложкой, и будет скрыта до тех пор, пока пользователь не нажмет на обложку (развернет её). Понятно, что ничего жизненно важного в данной области размещать не стоит.
  • Желтая зона — это зона, в которой размещается название группы и миниатюра группы. Не рекомендую размещать в данной зоне текст, так как он будет конфликтовать с названием и станет нечитаемым.
  • Синяя зона — это зона, в которой расположены кнопки интерфейса, они маленькие и ничего не закрывают, однако помните, они там есть.
  • Зеленая зона — это основная видимая зона, в которой я рекомендую располагать все, что душе угодно, будь то текст или важная часть изображения.

В качестве примера прикрепляю скрин своей обложки в свернутом и развернутом виде (см. Рис. 4).

Рис. 4
Макет живой обложки с цветными зонами.
Ссылка
Пароль к архиву — 20194

ББаннеры для статей

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

Скажу сразу, что таких макетов в природе существовать не может из-за ряда причин. Первая — расположение кнопок и текста зависит напрямую от количества строк в заголовке статьи. Но тут Вы можете мне возразить и сказать, тогда же можно подготовить макеты для разного количества строк и будет все ок. И вот вторая причина (см. Рис. 5), даже если Вы использовали точный макет для своего количества строк, при просмотре с мобильного все может съехать и пойти не по плану.

Рис. 5

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

Правда, я все равно подготовил макет с примерными зонами, в которых будут располагаться элементы интерфейса (заголовок статьи и кнопка) вне зависимости от количества строк (см. Рис. 6).

Рис. 6

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

Коротко о каждой из зон:

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

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

Я рекомендую обязательно использовать фотографию в баннере, даже если Вы хотите его каким-то образом стилизовать. Очень показательный пример (см. Рис. 7). В нем я продемонстрировал неправильный (свой) и правильный (сторонний) пример оформления баннера для статьи.

Рис. 7

Вы можете очередной раз возразить мне и сказать, что мой баннер тоже очень подходит для такого формата. Но это только до тех пор, пока Вы не попадете в каталог статей, который, кстати, тоже ввели довольно недавно (см. Рис. 8).

Рис. 8
Макет баннера для статьи с цветными зонами.
Ссылка
Пароль к архиву — 20194

Спасибо, что уделили так много времени на прочтение статьи, надеюсь, информация была Вам полезна, и Вы готовы применять ее на практике. Не забывайте оценивать посты в группе, весь этот многочасовой труд я посвящаю Вам. Спасибо за внимание!

Максим Чащин

4164