Обложка для группы ВК

Аватар страницы

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

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

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

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

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

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

• Про хорошее разрешение мы уже писали выше. Старайтесь, чтобы на картинке не было артефактов: они выглядят неаккуратно и снижают доверие пользователей.
• Можно поделить изображение на две части: для миниатюры и для остального аватара. Еще один прием – нарисовать на картинке круг и оформить немного иначе, чем остальное изображение: это будет миниатюра.
• Главное – чтобы аватарка сочеталась с общим стилем вашего сообщества и оформление не выглядело аляповато. Надо смотреть на цветовую гамму, особенности дизайна и подачи.
• Экспериментируйте, чтобы привлечь внимание. Можно, например, добавить внизу картинки стрелку, которая будет указывать на кнопку «Подписаться», если позволяет стиль.

Какую информацию разместить. Иногда аватар – это просто картинка, но чаще на него добавляют важные для пользователя сведения. Аватарку посетитель видит первой – даже раньше, чем описание. Поэтому, если вы хотите быстро что-то донести, стоит вынести это на аватар или миниатюру – во втором случае понадобится формулировать более кратко, буквально в 2–3 слова. Добавить можно любые из перечисленных сведений:

• анонсы и презентации;
• притягивающие взгляд символы;
• сведения об акциях и скидках;
• ключевые преимущества;
• цену какого-нибудь популярного товара;
• номер телефона.

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

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

1. Откройте в редакторе изображение, из которого вы хотите сделать оформление. Правая часть шириной 200–400 пикселей будет аватаркой. Левая, более широкая, будет использоваться в качестве меню.
2. Верх левой части понадобится обрезать, поэтому там не должно быть важной информации. С помощью выделения, направляющих или других инструментов графического редактора «раскроите» изображение.
3. По отдельности оформите аватарку и меню.
4. Удалите части картинки, которые не будут использоваться: 50 пикселей между аватаром и меню, верхнюю левую часть.
5. Сохраните участки изображения по отдельности.

Использование редактора статей

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

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

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

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

• Кроме названия, есть заголовки. Ими можно выделять блоки текста. «ВКонтакте» поддерживает два вида: заголовок и подзаголовок – аналогично H2 и H3 в верстке страниц сайта.
• Превратить в подзаголовок можно любой текст. Просто выделите нужную строку – появится меню. Большая буква H – это H2, маленькая – H3.
• На заголовки можно оставлять ссылки. Если лонгрид большой, в его начале стоит сделать якорное меню с линками на блоки. Для этого в уже сохраненной статье наведите курсор на подзаголовок – сбоку появится изображение цепочки. Кликните на него, и ссылка на этот блок текста скопируется в буфер.

Основное форматирование. Чтобы открылось меню форматирования, надо выделить какой-то участок текста – автоматически появится список. Шрифт можно сделать жирным, наклонным или зачеркнутым, оформить как цитату или ссылку.

• Цитата – это пиктограмма с кавычками-запятыми. Ее можно оформить двумя способами, нажав на пиктограмму один или два раза. Первый клик – выравнивание по левому краю, второй – по центру.
• Чтобы создать ссылку, нажмите на изображение цепочки. Появится окно, куда надо будет ввести URL, – после этого линк будет готов.
• Чтобы создать новый абзац, достаточно просто нажать Enter.

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

• картинку;
• видеоролик;
• аудиозапись;
• опрос;
• товар из карточек «ВКонтакте» или с AliExpress;
• GIF-анимацию.

Изображение и «гифку» можно загрузить свои либо выбрать из сохраненных или из поиска по библиотеке «ВКонтакте». Аудио, видео и товары достаточно только выбрать из библиотеки. Если хотите вставить что-то, чего нет в ВК, сначала понадобится загрузить этот контент в соответствующем разделе. Опрос вы можете только создать: прикрепить уже существующий не получится.

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

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

Обтекание текстом для аудиозаписей и других видов контента настроить не получится.

Добавление обложки. Когда статья полностью дописана и отформатирована, ее надо подготовить к публикации. В ленте лонгрид отображается как затемненная картинка, поверх которой находятся название и кнопка «Читать». Эта картинка – и есть обложка.

• Если не добавлять обложку в статью, алгоритм автоматически выберет первое изображение среди контента. Оно редко бывает релевантным – поэтому лучше найти картинку, которая будет отображать суть лонгрида.
• В правом верхнем углу редактора находится блок «Публикация». После нажатия на него открывается меню, где можно добавить обложку. Картинка загружается с компьютера.
• Учтите советы по поводу обложки, которые перечислялись в верхней части статьи. На картинке не должно быть слишком много шума, и лучше, чтобы она была темной, так на ней будет хорошо видно светлый текст.

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

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

Как отображаются статьи. Несколько удобных для всех деталей:

• функция InstantView подгружает контент мгновенно. Пользователю не приходится ждать: лонгрид открывается в ту же секунду. Такие, казалось бы, мелочи важны: из них складывается привлекательность того или иного инструмента для людей;
• в ленте новостей публикация выглядит эффектно и лаконично;
• URL автоматически формируются понятными и доступными. При желании их можно изменить на что-то более актуальное;
• если кому-то неудобно читать с белого фона, он может включить ночной режим – такая возможность у статей есть;
• после окончания одной публикации сразу начинается другая. Получается бесконечная лента, которая дополнительно удерживает пользователей;
• в шапке статьи есть кнопка «Подписаться» – это важно для набора подписчиков.

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

Как оформить изображения к постам

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

И вот вам сразу несколько примеров для вдохновения:

Стиль оформления страницы интернет-университета «Нетология»

Стиль оформления страницы бренда «Knorr»

Стиль оформления страницы «Факт дня»

Стиль оформления страницы «Интернет-маркетинг от А до Я»

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

Какой должна быть правильная обложка для группы vk

Идеальный баннер для паблика ВК должен отвечать следующим критериям:

• Оригинальность. Обложка — эта первое, что видят пользователи, заходя в группу. А, как известно, встречают по одёжке. Именно поэтому баннер обязательно должен быть не только привлекательным, но и креативным. Идеально, если в нем будет какая-то «вкусная» фишка, запоминающийся дизайн, интрига, игра слов. Всё это обязательно зацепит внимание юзеров, и они станут поклонниками страницы.
• Модные тенденции. Баннер обязательно должен соответствовать современным представлением о стиле и красоте. Если креатив и фантазия — не Ваш конёк, обратитесь к элегантной классике. Главное — отказаться от шаблонов, избитых образов и «баянов», которые мгновенно покроют вековой пылью даже самый свежий паблик. Поиграйте с вышедшими недавно фильмами, последними событиями, мемами, героями интернет-мира и шоу-бизнеса. Как говорится, будь в тренде!
• Психологические приёмы. SMM-специалисты разработали целый набор психологических «фишек», которые помогут привлечь внимание пользователей к группе с помощью обложки. К примеру, наибольшей эффективностью обладает изображение с человеком (людьми), смотрящими в сторону, где размещена важная информация.
• Отсутствие спама. Навсегда откажитесь от размещения на баннере навязчивых призывов вступить в группу. Большинство пользователей проигнорируют такой паблик, даже если контент в нём отличается высочайшим качеством. Еще одна неудачная идея — это указание телефонного номера или ссылки на другой сайт. Это делает обложку похожей на дешевые промо-листовки. Авторы продающих пабликов могут разместить на обложке своё самое «горячее» предложение, которое гарантированно заинтересует настоящих и потенциальных клиентов.
• Качественное изображение. Конечно, идеальный вариант — это лично сделанное профессиональное фото. Однако в большинстве случаев это невозможно. Чаще всего для обложки паблика выбирают готовые стоковые изображения, которые соответствуют ряду критериев. Они должны содержать эмоциональный, невербальный призыв к определенному действию, соответствовать целевой аудитории, а их цветовая гамма — создавать у пользователей приятно впечатление.
• Оригинальный шрифт. Создавая заставку, не стоит зацикливаться на узнаваемых «вордовских» шрифтах. Фантазируйте, но не перегибайте палку — витиеватые трудночитаемые вязи пусть останутся в стороне. Остаётся добавить грамотные хэштеги, и идеальная обложка для группы ВК — перед Вами!

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

Куда загрузить файл обложки

1. Откройте в меню группы раздел Управление.

   

2. Нажмите в строке Обложка сообщества ссылку Загрузить.

   

3. В открывшемся окне нажмите Выбрать файл и укажите файл вашей обложки.

   

4. Проверьте как загрузилось, если все ОК, нажмите Сохранить и продолжить.

   

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

   

6. Так выглядит загруженная обложка в группе

   

Меню ссылок

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

Меню появляется автоматически, если вы используете приложения сообществ или у вас подключен магазин. Например, на предыдущей картинке все три пункта меню – ссылки на приложения. Вы можете добавлять сюда свои – на важные записи, альбомы, обсуждения и т. д., до 7 штук (не считая приложения). Но ссылаться можно только на ресурсы внутри соцсети.

Чтобы отредактировать меню, нажмите на «Настроить» в правом верхнем углу виджета:

Чтобы добавить пункт меню, нажмите «Новая ссылка».

В раскрывшемся окошке выберите обложку, введите название пункта меню (важно уложиться в 20 символов с пробелами), добавьте ссылку и нажмите «Сохранить».

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

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

Мобильная верстка и адаптивность

Чтобы создать адаптивную навигацию, надо:

1. Взять картинку, которая будет использоваться в качестве меню, и разрезать ее на одинаковые части. Даже если верхняя часть – шапка, ее все равно понадобится нарезать.
2. Внимательно проследить за шириной получившихся картинок. 3 столбца – не более 190 пикселей, 4 – 150 px, 5 – 110 px. В общем, если суммировать ширину всех идущих в ряд изображений, должно получиться не больше 600 пикселей. Контент в вики-странице не может быть шире.
3. Сверстать нарезанные картинки в виде таблицы, которая автоматически будет сжиматься под размер экрана. Именно для этого в первом пункте надо было разрезать даже шапку. В таблицу не поместилось бы изображение, отличающееся по размеру от остальных.

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

Основы табличной верстки. Вспомним определение: вики-разметка – язык, который создан, чтобы верстать было проще, а людям не приходилось пользоваться полноценным HTML. Поэтому и таблицы здесь создавать несложно, если сравнивать с HTML. Понадобится только изучить табличные теги.

• {| – начало таблицы. После него в той же строке можно ставить теги nopadding, noborder – они понадобятся для меню. Параметр noborder нужен, чтобы сделать границы невидимыми: так они не будут перекрывать картинку.
• | – центрированный заголовок, необязательный элемент.
• |~ – указание размеров ячеек. После этого сочетания символов нужно прописать ширину каждого столбца в пикселях столько раз, сколько их всего в меню. Например, для навигации в три столбика – трижды.
• |- – новая строка. Всегда надо ставить после создания таблицы.
• | – начало ячейки.
• ! – так называемая «темная» ячейка. Текст в ней жирный и вертикальный. Для меню практически не используется.
• |} – конец таблицы.

Простая таблица выглядит примерно так.

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

• Если верхняя часть меню – это шапка с заголовком, и ссылок там нет, не надо загружать ее отдельным изображением. Верстка может «съехать».
• Лучше, как говорилось выше, тоже нарезать ее на одинаковые кусочки и вставить в соответствующие ячейки таблицы.

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

Оформление изображений для группы

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• Водяные знаки лучше размещать так, чтобы они не мешали просмотру контента, но в случае кражи картинки их нельзя было обрезать. Например, по центру, но в незаметном месте или в небольшом размере – чтобы не закрывали информацию.
• Хороший вариант – сделать ватермарку полупрозрачной. Так она не будет бросаться в глаза и мешать.
• Не делайте водяные знаки аляповатыми и броскими: это только отвратит людей. Использовать их стоит только для уникальных картинок, тех, которые создали вы сами. Это забавные фото с подписями, рекламные фотографии, изображения-цитаты и многое другое.

Подбор хороших изображений. Для всего перечисленного нужны картинки. И добавлять их сразу из поиска – не лучшая идея: они могут быть защищены авторским правом. К тому же не всегда картинки из поиска существуют в хорошем качестве. Лучше пользоваться фотостоками: они есть платные и бесплатные.

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

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

Выбор графического редактора. Далеко не у всех есть средства на Adobe Photoshop, к тому же не каждый умеет с ним работать. Это не страшно: похожие функции сейчас есть у множества программ для ПК и мобильных устройств, даже у онлайн-сервисов.

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

Во всех таких сервисах нужна регистрация.

Размеры изображений и видео

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

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

• 1 590 х 400 пикселей – для полной версии, которую человек видит с компьютера;
• 1 196 х 400 пикселей – для мобильной версии и приложений.

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

Аватар. Минимальный размер – 200 х 200 px. Максимальный, в принципе, не ограничен, но соотношение сторон не должно превышать 2:5, иначе картинка обрежется. ВК в любом случае предложит обрезать изображение, но чаще всего это можно проигнорировать.

Если соотношение сторон больше чем 2:5, обрезать какую-то часть придется точно. Если загрузить слишком маленькое изображение, «ВКонтакте» сообщит об ошибке, как и при загрузке чересчур масштабного, больше 7 000 пикселей по одной из сторон. Но мы рекомендуем выбирать картинки в большом разрешении в пределах разумного: соцсеть любит сжимать изображения и портить их качество. Об этом поговорим чуть позже.

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

• занимало всю ширину ленты – а она фиксированная и равна 510 пикселей;
• было квадратным или прямоугольным в горизонтальной ориентации – такие картинки смотрятся лучше.

То есть ширина прикрепленного изображения должна быть равна не менее 510 px. Высота может быть любой. Лучше всего смотрятся квадраты и горизонтальные прямоугольники с небольшой разницей между сторонами.

Картинки у постов со ссылкой. Если оформить публикацию и вставить в нее ссылку, «ВКонтакте» автоматически подгрузит изображение – одну из фотографий на странице, куда вы ссылаетесь. Если на страничке есть разметка OpenGraph, алгоритм выберет размеченное изображение.

• В левом верхнем углу есть меню со стрелками. С его помощью можно выбрать другое изображение со страницы, на которую вы ссылаетесь.
• Сбоку от стрелок – пиктограмма, изображающая фотоаппарат. Нужна, если ни одна из картинок в статье вам не подходит, и вы хотите загрузить собственную.
• Размер прикрепленного к ссылке изображения – 537 x 240 пикселей. Он может быть больше, но пропорция должна сохраняться. Иначе «Контакт» обрежет картинку самостоятельно или предложит вам это сделать.

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

• желательно, чтобы оно было темным и не очень контрастным. Название статьи отображается белыми буквами, кнопка «Читать» тоже белая. Если картинку сделать, например, светло-серой, буквы будут блекло смотреться и тяжело читаться;
• размер – 510 x 286 px или больше. Главное – чтобы сохранялись пропорции. Если они иные, VK самостоятельно обрезает картинку.

Обложка для альбома. Для фотоальбомов выбирают изображение, которое будет отражать суть. Например, в интернет-магазинах, оформленных как группа ВК, это выглядит так: альбом с платьями – обложка с популярной моделью или подписью «Платья».

Желательно, чтобы все картинки были выполнены в единой стилистике. Размер обложки – 1 200 x 800 или больше, но с сохранением пропорций. В мобильной версии «ВКонтакте» автоматически обрезает изображение по высоте, убирая 200 пикселей снизу. Это надо учитывать: не размещайте в этой области важную информацию.

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

• формат – только вертикальный, чтобы контент лучше отображался с мобильного телефона;
• можно загружать картинки размером 1 080 x 1 920 px или аналогичных пропорций. Если выбрать большее разрешение, история будет смотреться лучше;
• для видео доступное разрешение ниже: 720 x 1 280 px. Ролик должен весить не больше 5 Мб и длиться не более 15 секунд. Следует использовать кодек h.264 и звук AAC.

Кстати, история – это теперь еще и формат рекламного объявления. Для картинок и видео в рекламе-истории действуют те же правила.

Заставка для видео. Когда видеоролик не запущен, пользователь видит на его фоне картинку. Это или случайно выбранный кадр из видео, или специально загруженная заставка. Второй вариант лучше для дизайна: случайные кадры могут смотреться невыгодно и нарушать общее впечатление от контента. Загружать надо картинку в разрешении 1 280 x 720 пикселей.

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

• если загрузить в вики-страницу картинку, она автоматически уменьшится до 400 пикселей в ширину;
• можно кликнуть по изображению и выставить свои размеры, если вам хочется, чтобы оно было больше или меньше. Но не забывайте, что ширина блока контента на странице с вики-разметкой – всего 607 пикселей. Выставить размер больше не получится.

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

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

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

Шапка страницы

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

• понятно, что тут происходит;
• видно самую важную информацию;
• легко найти то, что может ему пригодиться.

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

Стационарные и динамические обложки. Обложки, о которых мы говорили выше, загружаются в разделе «Информация о странице». Разные компании и сообщества используют инструмент по-разному. В шапке можно размещать:

Последнее возможно за счет так называемых динамических обложек. Они автоматически меняют информацию на картинке. Создаются они с помощью специальных сервисов, обычно платных: DyCover, Letscover и других. Стоимость для одного сообщества – в пределах 100–200 рублей в месяц. Не так много – а вовлеченность повышает.

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

• Сделать живую обложку можно там же, где и обычную. Просто вместо одной картинки надо загрузить несколько изображений или видеоролик.
• Видео может длиться до 30 секунд, размер не должен превышать 20 Мб. Видеоролики со звуком разрешены, пользователь будет его слышать.
• Оптимальное разрешение – 1 080 x 1 920.

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

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

Заключение

Легко заметить, что даже на этапе оформления сообщество отнимает немало сил и времени. Если вы готовы заниматься этим самостоятельно, надеемся, что материал вам поможет: мы постарались собрать все, что может понадобиться начинающему. Но если вам кажется, что для вас это слишком сложно, – профессионалы всегда помогут.

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

Теги

Вам также будет интересно