Дизайн групп в ВК — Блог Фриланс Кодебай

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

Визуальная составляющая

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

Оформление профиля в цифрах конверсии.

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

1) Конверсия снизится на 1,5-3% при неграмотной аватарке группы.

2) 5-7% клиентов уйдут со страницы, если не увидят закрепленный пост с описанием продукта, скидок и выгоды.

3) Шапка группы — баннер вверху страницы. Обложка должна содержать информацию, отражать тематику группы, отвечать на вопрос клиента: «О чем страница?». При неверно оформленной шапке распрощаетесь с 10-12% потенциальными покупателями.

4) Товары и предложения группы. Раздел помещается в центре страницы с описанием и ценой продукта. При его отсутствии конверсия снизится на 3-5%: люди не хотят приобретать товар, не зная стоимости.

Хорошей конверсией считается 30-40% вступления в группу от общего количества посещений. Если группа оформлена плохо, цифры об этом скажут.

Как правильно оформить группу

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

Аватар

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

Название группы

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

Шапка профиля

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

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

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

Статистика

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

Альбомы и фото

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

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

Название товаров и описание делайте простыми, без сложных формулировок, чтобы клиент вас понял, а не увеличивал количество вопросов.

Фотографии или картинки в разделе “товары” должны быть высокого качества и выполнены в одном стиле.

Допустим, что купили бы вы? Торты на первой или второй картинке?

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

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

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

Сервисы-помощники в оформлении

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

2) Pixar. В приложении можно наложить фильтры, обработать, скорректировать и создать изображение с нуля. Работать в приложении можно прямо в браузере, без установки на компьютер.

3) Logomak.com. На платформе вы сможете подобрать шрифт, отрегулировать цвет, настроить элементы для логотипа.

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

профессиональные услуги для соцсетей в Самаре

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

Как корпоративный стиль компании в Самаре перекликается с интересами группы ВК

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

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

Ресайз для рекламных баннеров в Самаре под другие соцсети

У каждой рекламной площадки свои требования размера контента. Это касается и социальные сети. Поэтому мы предлагаем услугу адаптации рекламных баннеров под нужные размеры. Для узнаваемости бренда в рекламе используется один баннер, который мы размножим согласно правилам площадок.

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

Как оформить дизайн группы вконтакте. Как оформить группу Вконтакте? Чем интересен новый дизайн ВКонтакте

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

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

1. Горизонтальная обложка (шапка)
Начнем, пожалуй, с горизонтальной обложки или шапки. Разработчики ВКонтакта уверяют нас, что обложка за счет своего размера дает большую маневренность по предоставлению и визуализации информации. Обычно, помимо красивой картинки в шапке располагается логотип, сопроводительная информация, контакты, призыв вступить в группу, адрес сайта. У меня есть подозрение, что когда-нибудь обложки станут единственно возможным вариантом оформления группы, поэтому рекомендовала бы сразу переходить на них, дабы избежать форсмажорных редизайнов впоследствии.

Как загрузить обложку
Чтобы загрузить обложку, нужно перейти в Управление сообществом >> блок Основная информация >> Обложка сообщества >> Загрузить. Рекомендуемый размер обложки 1590×400 пикселей. В шапке не может быть никаких рабочих кнопок, на которые можно нажать — по сути это картинка и все. На сегодняшний день обложка видна на мобильных устройствах, и вроде бы уже видна в приложениях и клиентах.

Wiki вкладка Свежие новости

В верхнем блоке под шапкой теперь могут находиться три вкладки: закреплённая запись, информация о сообществе и wiki-меню (только в группах, на публичных страницах такой вкладки нет). Акцент по-прежнему делается на закреплённую запись, однако даже при её присутствии пользователь теперь всегда будет иметь доступ к информации о сообществе, переключаясь по вкладкам. Чтобы появилась вкладка wiki-меню (она изначально называется Свежие новости), нужно перейти в Управление сообществом » Разделы » Материалы » Ограниченные (или Открытые) » Сохранить.

2. Вертикальный аватар
Теперь обратим внимание на старый добрый аватар для группы размером 200х500 пикселей. Пока он также является способом оформления группы. Обычно на аватаре располагается следующая информация: логотип, сопроводительный текст или слоган, контакты, призыв вступить в группу. В мобильных устройствах весь аватар не виден, видна только его часть — миниатюра. Для оформления группы можно использовать либо горизонтальную шапку (обложку), либо вертикальный баннер. При наличии шапки вертикальный аватар не виден. На аватаре не может быть никаких рабочих кнопок, на которые можно нажать — по сути это картинка и все.

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

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

4. Баннер
Баннер (англ. banner — флаг, транспарант) — графическое изображение информационного, рекламного или побудительного характера. Баннер прикрепляется в виде картинки к записи и может иметь только одну внутреннюю ссылку. Многие до сих пор убеждены, что на главной странице с баннера можно сделать несколько ссылок. Это не так, только одна ссылка и все. Я бы выделила следующие виды баннеров.

4.1 Баннер информационный
Распространенный вид баннера, содержащий общую информацию о фирме, группе, услуге или мероприятии с развернутым перечнем преимуществ и прочими сопроводительными материалами. Часто используется как закрепленная запись в группе. Размер такого баннера 510х307 пикселя. При таком размере баннер по низу совпадает с аватаром. Если нет связки с аватаром, то можно использовать любые размеры. Я, например, использую размер 600х350 пикселей. Также удобен и набирает популярность сейчас формат квадрата 510х510 пикселей — при таком размере баннер занимает максимально большую площадь в новостной ленте.

4.2 Баннер для входа во внутреннее меню
Если в баннер из предыдущего пункта добавить броскую надпись «Открыть меню», то мы получим баннер, основная задача которого служить точкой входа во внутреннее меню. Иногда делают обманку в виде нескольких кнопок на баннер, но это иллюзия, при нажатии пользователь все равно попадает на внутреннюю станицу, а там уже каждая кнопка имеет свою собственную ссылку. Размер такого баннера 510х307 пикселя. При таком размере баннер по низу совпадает с автаром. Если вход в меню не завязан с аватаром, то можно делать любые размеры баннера, хоть узкую кнопку с надписью «Открыть меню». Главное, чтобы ширина баннера была не меньше 510 пикселей.

4.3 Карточка для репоста, акции
В последнее время особую актуальность приобрели карточки для репостов или акций. Ее задача — призыв к конкретному действию. В основном это «Вступи в группу, сделай репост или поставь лайк и выиграй приз». Такие баннеры используются в рамках рекламных компаний или акций как в собственных группах, так и для продвижения в других группах. Я обычно использую размеры 600х350 пикселей.

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

5. Конструкция аватар+закрепленный баннер
До недавнего времени эта модульная конструкция, состоящая из аватара и закрепленного баннера была самым популярным способом оформления групп. Более подробно о том, как делать такое оформление, расписано в уроке . С появлением шапки (обложки), возможно, популярность такого оформления слегка уменьшится.

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

6. Внутреннее навигационное меню
Меню в виде активных ссылок располагается на внутренней странице ВКонтакта и пишется с помощью команд wiki разметки. О том, как создать саму внутреннюю страницу расписано в уроке . С помощью меню пользователь осуществляет навигацию по группе. Ниже вы рассмотрим виды внутреннего меню, а пока остановимся на нескольких важных пунктах.

Точки входа во внутренне меню
Хочу отметить один тонкий момент, которому частенько не придают значения. Иногда клиенты заказывают у меня внутреннее меню, но при этом абсолютно не представляют, как пользователь попадет в это самое внутреннее меню. А попасть в него можно двумя способами: либо через закрепленный баннер (см. пункт 4.2), либо через текстовую ссылку в верхней вкладке под строкой статуса (см. рисунок ниже). Иногда еще текстовую ссылку располагают в блоке «Ссылки» в правом столбце интерфейса.

Ссылки внутреннего меню
Обычно при заказе клиенты указывают следующие пункты меню: О нас, Наши товары (каталог), Способы доставки, Оплата, Гарантии, Отзывы, Контакты, Акции, Скидки, Расписание, Как заказать, Портфолио, Вопросы и ответы, Инфо, Сделать заказ. Ссылки с пунктов меню могут идти на соответствующие разделы внешнего сайта. Тогда ссылка автоматически открывается в новом окне. В большинстве своем пункты ведут на внутренние страницы ВКонтакт. При этом страница открывается в том же окне и приходится делать ссылку или кнопку «Вернуться в главное меню».

Ссылки на альбомы с фотографиями и видео открываются в новом окне. Ссылки на топики с обсуждениями (например Отзывы), на диалоговое окошко для написания сообщений, на приложения (см. пункт 10), на выборку по хештегам (см. пункт 12) открываются в том же окне и в данном случае попасть обратно в меню можно только через главную страницу сайта, либо через кнопку «Назад» в браузере. Это, пожалуй, самый неудобный момент при таких ссылках.

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

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

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

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

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

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

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

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

Успешное оформление группы Вконтакте должно быть не только красивым, но ещё функциональным и удобным. Заставьте дизайн решать ваши маркетинговые задачи, чтобы группа привлекала платежеспособную и покупающую аудиторию к бренду и оставалась с ним навсегда.

5 шагов, как оформить группу в Контакте

Обложка

Обложка сообщества сегодня – важный инструмент оформления группы в Контакте бренда и её продвижения. Загрузить её можно в разделе ”Управление сообществом”, перейдя во вкладку “Настройки”. Высококлассное горизонтальное изображение в самой шапке сообщества играет роль главного промо-баннера компании в соцсети. Она задает настроение, информирует, повышает имидж, призывает к целевым действиям, продает одновременно.

1. Используйте иллюстрации высокого качества

Обложка сообщества вконтакте должна быть размером 1590х400 пикселей, но лучше загружать фото в 2-3 раза больше в формате.png. Так удастся избежать некачественного отображения.

2. Адаптируйте изображение под разные устройства

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

3. Разместите слоган и УТП

Пусть вашу философию а также преимущества клиент видит с первого экрана.

4. Отобразите товар/услугу, процесс или результат его использования

Так потенциальный заказчик сразу узнает, на чем вы специализируетесь и будет вовлечен в продукт.

5. Помогите клиентам сразу связаться с вами

Напишите на баннере телефон, e-mail, а также другие контакты компании. Если для вашего бизнеса важно территориальное расположение, например, вы представляется сферу общественного питания или horeca, адрес тоже будет не лишним.

6. Анонсируйте события

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

7. Презентуйте акции и скидки

Где как ни на главной площадке сказать аудитории, что именно сейчас она может сделать у вас заказ в 2 раза дешевле? Главное, не забудьте поменять иллюстрацию после завершения срока действия предложения.

8. Предлагайте совершить целевое действие

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

Загрузите аватар и выберите миниатюру

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

При использовании максимального размера аватара 200х500 пикселей размер картинки в закрепленной записи необходимо сделать размером 510х308 пикселей. Отличный вовлекающий прием – закрепление загруженного через плеер соцсети видео, которое стилистически продолжает аватар.

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

Правила оформления ВК миниатюры аватара сообщества

Миниатюра – это небольшое круглое изображение, которое кадрируется с большого аватара, и отображается в поиске по группам, в списке сообществ каждого пользователя и слева под обложкой, если такая имеется. Вот несколько советов по её дизайну.

1. Миниатюра должна быть понятна аудитории

Не стоит размещать кусок странной иллюстрации. Визуализируйте то, что впоследствии ЦА будет ассоциироваться с брендом, например логотип, иконку товара/услуги, а может главного маркетингового персонажа бренда.

2. Пускайте в ход только качественные фотографии

Лучше загрузить исходник в 2-3 раза больше требуемого размера, так о жутких пиксельных “квадратиках”, которые выставляют вас не в лучшем свете, можно будет забыть.

3. Разрабатывайте собственные иллюстрации

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

4. Контрастные фону страницы картинки – то, что нужно

При оформлении ВК миниатюр так броско, “кругляшок” выделится в ленте среди других групп и не сольется с фоном страницы.

5. Разместите контакты или УТП компании

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

6. Сделайте текст крупным и читабельным

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

7. Применяйте нестандартные формы

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

Разработайте меню

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

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

Разработайте витрину товаров

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

Оформление постов

1. Используйте доступные размеры изображений в полную силу

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

2. Разработайте индивидуальный стиль постов

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

3. Размещайте короткий текст на картинке

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

4. Сделайте несколько шаблонов для разных целей

Например, для цитат применяйте один шаблон презентации визуальной информации, для анонса материалов с сайта – другой, а для конкурсов третий.

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

), сделать меню.

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

Делаем красивую графику

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

• Аватар для группы — 200×300 пикс
• Баннер в описании — 510×271 пикс

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

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

Для начала загружаем аватарку. Идем в группу, и нажимаем «Загрузить фотографию» .

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

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

Идем на стену. Здесь в блоке «Добавить запись» , нажмите на значок «Фотография» .

Загрузите вторую подготовленную картинку. Обязательно выберите публикацию от имени сообщества. И затем нажмите «Отправить» .

Теперь запись нужно закрепить (см. ). Возвращаемся к новой записи, и в правом верхнем углу разворачиваем меню. Здесь нажимаем «Закрепить» .

Теперь обновите страницу, и посмотрите результат.

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

Как создать меню в группе вконтакте

Давайте вернемся к нашему примеру и представим, что необходимо сделать кнопку «Подробнее» . Она уже есть на картинке. Как нам сделать ее именно кнопкой, чтобы при нажатии, человек попадал на наш основной сайт? Сейчас покажу.

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

Открываем нашу картинку в редакторе, и активируем инструмент «Раскройка» .

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

Теперь нажимаем Alt+Ctrl+Shift+S , чтобы сохранить готовые изображения.

Https://vk.com/pages?oid=-120208137&p=меню

Смотрите, после символов «odi=- » , вам нужно вставить id своей группы (см. ). А в самом конце ссылки, напишите название для вашей страницы с меню. В примере мы так и оставим «Меню» .

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

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

Далее переходим в раздел «Редактирование» . Здесь для каждого изображения нам нужно убрать отступы, чтобы они слились в единую картинку. Для этого в коде добавьте вот такое значение «nopadding;» . И добавьте ссылку на нужную страницу или сайт, прописав значение «https://site.ru/page.html» (указывайте свои адреса!). В нашем примере кнопка «Подробнее» , должна вести на сайт сайт. Вот что должно получиться.

[] []

Сохраняем страницу. Не забываем скопировать ее адрес из адресной строки. Она должна быть вида:

Https://vk.com/page-120208137_52523487

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

Вот такое меню у нас получилось в итоге.

Шапка группы ВКонтакте

Она включает в себя название сообщества, URL, статус, описание. Эти блоки отыгрывают немаловажную роль, поскольку влияют на ранжирование (внутренний поиск социальной сети + поисковики). А еще они являются визитной карточкой любого сообщества. Это именно то, на что обращает внимание пользователь при первом посещении группы. В шапке необходимо указать ключевую информацию о деятельности компании. Гостю страницы сразу должно быть понятно, чем вы занимаетесь, и какие услуги/товары предлагаете.

Название группы ВК

Лимит системы – 48 символов. Название – это ключевик, с помощью которого вы продвигаете свое сообщество в сети. Вместе с ключевой фразой можно написать название бренда/магазина/мастерской.

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

Статус сообщества

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

• Оповестить аудиторию о новых акциях и скидках;
• Оставить контактные данные для обратной связи с менеджером.

Лимит системы – 140 символов (с пробелами). Да, это маленькое пространство, но его можно заполнить разумно. В статусе также можно разместить ключевик (если есть такая необходимость). Как уже говорилось, это положительно повлияет на ранжирование.

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

URL-адрес группы ВКонтакте

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

Для этого откройте раздел «Управление сообществом». Далее перейдите в «Настройки». Там вы найдете изначальный URL-адрес. Сотрите все лишнее и добавьте новый вариант названия (оно должно быть написано на латинице).

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

Описание группы

Вы указали название группы. Теперь настало время рассказать, чему/кому она посвящена. Чем вы занимаетесь? С кем сотрудничаете? Сколько лет на рынке? Многие владельцы или администраторы сообществ игнорируют эти вполне логичные вопросы, ответы на которые могут стать идеальным описанием. Вместо этого они создают нечто подобное:

Пример №1

Пример №2

Пример №3

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

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

Одарят ли они доверием компанию, которая даже рассказать о себе внятно не может?

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

• Нейтральное приветствие или плавное введение в курс дела. Оно должно быть связано непосредственно с деятельностью компании. Не бойтесь начинать с ключевых слов;
• Краткое перечисление основных услуг. Чтобы пользователям было удобно читать, оформите его в виде списка;
• Особенности вашей компании. Кратко расскажите о ключевых преимуществах бренда. Что отличает вас от конкурентов? (по факту, а не в самых смелых фантазиях). Если занимаетесь самовосхвалением, всегда добавляйте подтверждающие аргументы;
• Укажите контактные данные (желательно несколько вариантов).

Постарайтесь создать компактное описание. Вы еще успеете развернуто рассказать о себе. И было бы хорошо, если бы у аудитории хватало терпения для того, чтобы целиком осилить ознакомление с шапкой группы. Опытные пользователи социальной сети ВКонтакте указали свой рекомендуемый объем для описания группы – 500-1000 символов без пробелов.

Вы уже имели возможность ознакомиться с неудачными вариантами описания. Теперь изучите хороший пример:

Оформление группы ВК

Ломаете голову над тем, что лучше выбрать – аватарку или обложку? Сейчас вы поймете, почему обложка является наиболее удачным вариантом. На это есть свои причины:

1. Обложка красиво располагается по всему периметру шапки. Это добавляет сообществу эстетичности и привлекательности. Разумеется, если обложка сделана качественно.
2. На ней можно указать множество различной информации, и этот текст не будет рябить в глазах, как это обычно случается с аватаркой (когда на маленьком изображении пишут целую диссертацию).
3. Аватарка останется в группе и будет фигурировать на миниатюре. Кликнув по аватарке, пользователь сможет посмотреть на неё вблизи.

Контактные данные

Информация о компании (преимущества)

Название и логотип

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

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

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

Просто взгляните на удачный пример обложки для сообщества ВКонтакте (кулинарная тематика). Красота, не правда ли?

Стильно, уместно, радует глаз.

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

Но достаточно обойтись стандартным сочетанием: Обложка + Аватарка + Меню. Вот что из этого может получиться:

Контент группы ВКонтакте

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

Собственно, для размещения этой информации и предпринимались все предыдущие действия. Самое время отправляться в дальнее плаванье! Идеальный контент в сообществе ВК – это 80% полезной/познавательной/важной информации, и 20% рекламы.

Вы принялись за создание контента. Учтите следующие нюансы:

Доступность языка

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

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

Цепляющие детали

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

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

Форматы контента

Здесь можно выделить лишь одно правило: РАЗНООБРАЗИЕ. Чередуйте фотографии, видеозаписи, аудио-файлы, инфографику и многое другое. Взаимодействуйте с публикой, отвечайте на вопросы, проводите конкурсы и онлайн-трансляции.

Оформление текста

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

Правильные ссылки

Часто бывает так, что сообщество ВКонтакте создается для привлечения трафика на сайт. Стало быть, контент группы содержит ссылки для перехода на различные страницы. Чтобы ссылка была правильной, у неё должна быть URL-метка. Также рекомендуется использовать сокращатели ссылок. Метки созданы для вас (чтобы отслеживать трафик), а сокращенные адреса – для комфорта участников сообщества.

Оптимальное время для размещения контента

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

Заключение

1. Создайте грамотную и привлекательную шапку;
2. Позаботьтесь об оригинальном и стильном оформлении группы;
3. Оптимизируйте все ключевые разделы в сообществе;
4. Публикуйте правильный контент.

Мне нравится 0

Оформление сообщества ВКонтакте (дизайн группы ВК) «Юридическая консультация Галиной Натальи»

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

 

 

Обложка сообщества

 

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

 

Живая обложка

 

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

Такая обложка воспроизводится только в мобильном приложении ВКонтакте.

 

Аватар сообщества

 

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

 

Меню сообщества

 

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

 

Обложка фотоальбома

 

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

 

Виджеты

 

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

 

Плитки (баннеры) с информацией

 

Зачастую, это второе (после верхней шапки), что видит пользователь зайдя в сообщество.

 

Форма заявки

 

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

 

Написание постов

 

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

 

Заключение

 

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

 

Всем удачи!

 

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

Как сделать дизайн группы вконтакте эффективным. Дизайн группы вконтакте

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

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

Инструменты и подходы

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

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

Раньше на каждом экране приложения использовались свои иконки в разных цветах и размерах. Например, newsfeed_search, wall_search_gray и т.д. Теперь мы сделали иконки универсальными и можем переиспользовать их. Всего одна иконка поиска вместо пяти разных.

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

Все основные компоненты для каждой платформы собираются в коллекцию — UI Kit. Вот как это выглядит:

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

В 2015 году мы полностью перешли с Photoshop на Sketch для проектирования наших интерфейсов. Для распределения задач мы используем Trello, а рабочие файлы синхронизируются в Dropbox. Создаём прототипы в Principle, Framer и Origami, пробуем новые инструменты и плагины.

Ставим цели

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

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

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

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

Навигация

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

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

Сам по себе таббар — ни разу не новинка. Сейчас это стандартный подход к навигации на Android и iOS. У нас он когда-то тоже был:

Обратите внимание на 2011 год — всё довольно просто, если функциональность приложения вмещается в пять вкладок.

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

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

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

Что ж, отлично. Осталось понять, что будет во вкладках. Здесь нужно отметить, что идеологически мы почти не практикуем A/B тестирование UX на больших выборках живых людей. Даже глобальный редизайн полной версии сайта после выкатки на часть пользователей допиливался только в отношении каких-то мелких деталей. Принципиальные вопросы вроде приоритета разделов мы решаем ретроспективно, планируя будущее на основе обширного опыта из прошлого.

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

А что же старое доброе меню? Здесь мы дали себе волю в создании концептов:

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

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

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

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

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

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

Лента новостей

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

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

И самое главное — мы покрасили лайк. Да, теперь он красный (ну почти, #FF3347), сочный и заметный. Больше никаких сомнений, лайкнули Вы эту роскошную статью или ещё только собираетесь. Мы давно к этому шли. Первые эксперименты с цветом сердечка мы начали ещё в 2014 году, в процессе создания нового дизайна веб-версии ВКонтакте.

Аудиоплеер

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

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

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

Мы сделали экран с текущей композицией центральным, предусмотрев возможность свайпом переходить к тексту песни и к плейлисту. Благодаря этому экраны не перегружены контролами, а пользователь может сосредоточиться именно на том, что ему сейчас нужно. А отдельная иконка списка не позволит запутаться в экранах — Вы всегда знаете, где искать плейлист.

Редактор историй

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

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

Подводим итоги

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

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

«Мгновенно заметить лайк от топовой тян, написать ей «привет, как дела» и тут же вернуться к мемасикам в ленте — изи как никогда.»

Муртол Лазвачев, активный пользователь ВКонтакте

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

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

С чего начать работу над дизайном?

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

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

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

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

Люди не хотят покупать товар/услугу – они хотят получить решение их проблем.

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

Важные элементы в дизайне групп Вконтакте

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

Аватар

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

Используйте только качественные изображения и забудьте про клипарты с бесплатных фотостоков. Поиск картинок для эффективного дизайна группы Вконтакте нужно производить на сайтах pinterest.com, freepik.com, flaticon.com или в крайнем случае google.ru. Но лучше подбирать изображения на платных фотостоках. Поисковые запросы вводите только на английском языке. Если испытываете трудности с английским, то смело используйте Гугл переводчик.

А чтобы вам было легче принять верное решение, мы дарим 500 рулей на оформление меню каждому перешедшему по указанной ссылке. Для получения скидки просто укажите код HWC1817-500- menu при отправке заявки.

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

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

Продуманный дизайн группы ВКонтакте вызывает доверие у покупателя. Группа начинает работать как полноценный сайт. Правда есть несколько отличий – это менее сложные условия содержания и с ведением и раскруткой справиться легче. Это является значительным преимуществом.

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

Основные элементы дизайна группы ВКонтакте

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

Обложка

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

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

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

Аватар

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

Миниатюра

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

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

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

Меню

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

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

Что же можно включить в меню? Это, прежде всего, информация о вас, история возникновения компании или обратная связь с вами, ответы на часто задаваемые вопросы (FAQ), рейтинги, бланки заказов и многое другое.

Баннер

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

Как правильно создавать дизайн группы ВКонтакте?

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

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

Если вы хотите использовать интересные и новые картинки, а не заезженные варианты, которые шаблонно мелькают в тысяче групп, то для поиска используйте сервис pinterest, freepik, flaticon или google. Запросы стоит давать на английском языке. Если вы не уверены в своих знаниях, то используйте любой переводчик, вбив туда ключевые слова для поиска.

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

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

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

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

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

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

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

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

Как сделать новый дизайн группы вконтакте. Как сделать дизайн группы вконтакте эффективным

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

Как красиво оформить группу в Контакте

Создание баннера

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

Этап 1

Открываем Photoshop, создаем новый документ с размерами 630х725 пикселей. Заливаем его белым цветом. Вырезаем в слое два окна. Сквозь эти окошки будет выглядывать графическое оформление Контакта. Вначале выделим прямоугольную область размером 200х710 пикселей, нажмем кнопку «Del». Далее выделяем прямоугольную область размером 382х442 пикселя, совмещаем получившиеся прямоугольники понизу и нажимаем клавишу «Del».

Этап 2

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

Этап 3

Далее правую прямоугольную область размером 200х710 пикс. сохраним как отдельное изображение. Получился полностью готовый рисунок для оформления группы. Его нужно загрузить в блок, который расположен в верхнем углу страницы справа. Для этого нажмите кнопку «Загрузить фотографию».

Для чего же левая картинка? Мы разрезаем ее на несколько частей (зависит от количества пунктов меню). К примеру, у нас меню имеет 5 пунктов, значит, на выходе получится 5 картинок 382х50 пикселей.

Этап 4

Пять полученных картинок нужно загрузить в альбом группы. Далее заходим на страничку группы и выделяем блок «Новости», переименовываем его в «Меню группы», после чего нажимаем «Редактировать».

Этап 5

Вот мы и подошли к заключительному этапу руководства «Как красиво оформить группу в Контакте». Открываем вкладку с названием «Исходный который находится в нижнем окошке, необходимо скопировать, а затем вставить в «Исходный код». В тексте кода заменяем photo на наименования файлов и отмечаем высоту файла (382 пикселя). Теперь вставляем адреса ссылок меню. Наименование файла берется из альбома.

Этап 6

Для идеального совмещения картинок нужно выполнить несколько условий:

Наименование группы должно умещаться в одну строку;

Адрес сайта — тоже одна строка.

Описание должно содержать 10 строк.

Wiki-разметка Вконтакте

Чтобы понять, как красиво оформить нужно также ознакомиться с понятием Wiki-разметки.

Что это такое?

Итак, Wiki-разметка — это система, предназначенная для редактирования страниц аналогично HTML. Перед началом оформления группы Вконтакте, определитесь с его видом. Оформление бывает графическое и текстовое.

Оформление текстового меню

Код для меню будет выглядеть вот так:

Начало и конец кода обозначаются тегами. Каждая иконка будет иметь вид [], затем описание.

Графическое меню

Код такого меню будет составляться по такому принципу:

! !! !!

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

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

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

НУ что же, поехали составлять оформлять меню для групп вконтакте?

Как оформить меню в группе вконтакте самостоятельно

Да, именно самостоятельно, ведь после прочтения данной статьи, вам не понадобятся услуги фрилансеров. Хотя это дело не дорогое, за 1500 вам смогут сделать сделать меню на workzila (подробный опыт о работе с этой биржей я писал ).

Так вот, что нам потребуется для оформления группы в вк:

1. Макет (графическое расположение элементов) — мы ведь должны знать где что должно находиться.

2. Базовые знания wiki-разметки. (о самых самых стандартных вещах мы поговорим чуть ниже, а для подробного изучения — рекомендую эту группу ).

3. Базовые навыки работы с фотошопом. Нужно будет вырезать куски макета нужного размера.

Где брать макеты для меню?

Макеты для оформления меню вконтакте можно брать разными способами, например:

1. На фрилансе или томже Workzilla.

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

3. Можно загуглить и скачать уже готовые. Поверьте, таких не мало.

Ну с другой стороны… Зачем гуглить? Просто подпишитесь на обновления моего сайта. И покликайте по кнопкам соц сетей ниже.

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

Главное условия — быть подписчиком и пройтись по соц кнопкам.!

Спасибо. Теперь вы можете скачать архив по этой ссылке .
Не забудьте пройтись по остальным соц кнопкам.

Размеры аватаров и меню, которые пригодятся для оформления групп вк

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

Как видите, в группе для аватарки нужен размер 200 в ширину и 500 пикселей в высоту. А для картинки основного меню — 395 пикселей ширины и 289 пикселей высоты.

Вот, в принципе и все что нужно. Есть макеты, есть понимание размеров.

Творческая часть закончилась — осталось дело за малым. Начинаем техническую часть всего процесса создания меню для групп.

Как самостоятельно оформить группу вконтакте, имея макеты на руках

Итак, у нас есть макеты дизайна группы. Сейчас нужно вырезать нужные части.

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

Теперь меню, его нужно вырезать. Не само меню конечно, но каждую часть для меню (кнопки) точно нужно повырезать.

Сначала немного ликбеза.

Чем отличается меню группы от меню паблика?

Отличаются они тем, что меню группы — это уже и есть по сути набор кнопок. Но это меню всегда скрыто! Всегда! А меню паблика — всегда открыто и по сути — это закрепленный пост-ссылка, ведущий на страницу с разделами самого меню (кнопками).

Итак, еще раз: в группе — чтобы увидеть меню, нужно нажать на кнопку «Меню группы» , по-умолчанию эта кнопка называется «Свежие новости».

А в паблике (в группе, кстати, тоже можно) — меню — всегда открыто.

Но эта картинка — это одна большая и красивая ссылка, которая ведет на более крупной отдельное меню. Вот:

Эта картинка-кнопка на меню создается через закрепленный пост. Это просто пост в группе, который мы закрепляем навсегда! Этот пост-ссылка ведет на отдельную страницу, которую мы нежно, предварительно создадим.

Как создать отдельную страницу для меню вконтакте

Чтобы создать страницу для будущего меню (навигации) — нужно отправить запрос в вк следующий:

где XXX – номер группы, YYY – название страницы (здесь все знаки вопросов и тире обязательны).

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

Я ввёл следующий запрос

И у меня открылась сразу созданная страница с возможностью её редактирования.

Вот здесь-то и нужно будет вставлять ваш код самого меню с помощью wiki-разметки. Но об этом чуть позже.

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

Как делать закрепленный пост в группе или паблике

Да, и в любом типе сообщества закрепленный пост создается одинаково! Делается всё очень просто.

И в появившемся окне нажимаем кнопку «Закрепить» — все просто!

Многие группы, кстати, используют закрепленные посты как объявления. Если время актуальности этого объявления прошло — вы просто нажимаете опять на дату публикации и на кнопку «Открепить».

На самом деле все сейчас используют именно этот способ меню.

Угадайте почему?

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

Нарезка макета для оформления группы или паблика

Так, для аватарки всё понятно, мы тут ничего не нарезаем. Мы создали картинку нужного размера и залили её в ВК. Всё. С аватаркой для группы мы закончили!

Теперь меню.

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

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

Нажимаем на меню, видим картинку.

Нам нужно выделить «кликабельные» зоны.

т.е. выделить сами кнопки. Давайте я выделю эти зоны для вас красными линиями.

У нас получается сколько? 5 картинок. И не каждая из картинок будет кнопкой!! Как видим верхняя большая картинка — это не кнопка, а сама по себе…

Так, мы по этим линиям вырезали картинки. Теперь нужно из «залить» в ВК.

Если вы создавали для меню отдельную страницу, то нажимайте на кнопку «Наполнить содержимым» на только что созданной странице.

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

Залили и у вас должно появится следующее:

Возможно у вас появится просто код, как на картинке ниже. Если нет — нажмите кнопку «Исходный код» , эту кнопку я выделил на верхней картинке. И увидите следующее:

Здесь нам нужно выстроить все картинки в ряд, чтобы не путаться (ну, я так делаю).

И, чтобы между картинками не было отступов — вписать тег «nopadding», выглядеть это должно вот так:

вот это вот page-58190479_45419120 — это адрес самой страницы вконтакте, вы этот идентификатор найдете в адресной строке вашего браузера.

Вот и всё 🙂 Правда не сложно?

Вот что получилось в коде у меня в итоге. Если у вас нечто подобное — значит всё в порядке.

Если у вас с каким-то из пунктов возникли проблемы — прошу, обращайтесь. Буду рад помочь.

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

prospero | sociate | socialtools

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

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

Как оформить название группы Вконтакте?

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

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

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

Как оформить статус для группы Вконтакте?

Статус группы Вконтакте менее важен, чем ее название, однако на него стоит обратить внимание. Давайте разберемся, как правильно оформить статус для группы Вконтакте ? Главное не стоит его сильно перегружать, в нем должна содержаться только самая важная информация:

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

Как оформить описание группы Вконтакте?

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

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

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

Как сделать аватар для группы Вконтакте?

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

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

При создании аватара для группы Вконтакте следует помнить о его миниатюре, которая составляет по ширине и высоте 200 px. Так что основную информативную нагрузку аватара (название или описание группы, девиз, призыв к действию и прочее) нужно разместить в одной области, которая будет соответствовать заданным размерам.

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

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

А если Вы хотите создавать сложные и красивые аватары для групп Вконтакте , с нуля рисуя каждую деталь, тогда обучитесь программе Photoshop, научитесь пользоваться ею профессионально. Это можно сделать несколькими способами:

• Пробовать все самостоятельно путем проб и ошибок.
• Читать статьи о данной программе и смотреть видеоролики.
• Прочитать книгу или посмотреть обучающий курс.

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

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

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

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

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

Успешное оформление группы Вконтакте должно быть не только красивым, но ещё функциональным и удобным. Заставьте дизайн решать ваши маркетинговые задачи, чтобы группа привлекала платежеспособную и покупающую аудиторию к бренду и оставалась с ним навсегда.

5 шагов, как оформить группу в Контакте

Обложка

Обложка сообщества сегодня – важный инструмент оформления группы в Контакте бренда и её продвижения. Загрузить её можно в разделе ”Управление сообществом”, перейдя во вкладку “Настройки”. Высококлассное горизонтальное изображение в самой шапке сообщества играет роль главного промо-баннера компании в соцсети. Она задает настроение, информирует, повышает имидж, призывает к целевым действиям, продает одновременно.

1. Используйте иллюстрации высокого качества

Обложка сообщества вконтакте должна быть размером 1590х400 пикселей, но лучше загружать фото в 2-3 раза больше в формате.png. Так удастся избежать некачественного отображения.

2. Адаптируйте изображение под разные устройства

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

3. Разместите слоган и УТП

Пусть вашу философию а также преимущества клиент видит с первого экрана.

4. Отобразите товар/услугу, процесс или результат его использования

Так потенциальный заказчик сразу узнает, на чем вы специализируетесь и будет вовлечен в продукт.

5. Помогите клиентам сразу связаться с вами

Напишите на баннере телефон, e-mail, а также другие контакты компании. Если для вашего бизнеса важно территориальное расположение, например, вы представляется сферу общественного питания или horeca, адрес тоже будет не лишним.

6. Анонсируйте события

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

7. Презентуйте акции и скидки

Где как ни на главной площадке сказать аудитории, что именно сейчас она может сделать у вас заказ в 2 раза дешевле? Главное, не забудьте поменять иллюстрацию после завершения срока действия предложения.

8. Предлагайте совершить целевое действие

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

Загрузите аватар и выберите миниатюру

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

При использовании максимального размера аватара 200х500 пикселей размер картинки в закрепленной записи необходимо сделать размером 510х308 пикселей. Отличный вовлекающий прием – закрепление загруженного через плеер соцсети видео, которое стилистически продолжает аватар.

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

Правила оформления ВК миниатюры аватара сообщества

Миниатюра – это небольшое круглое изображение, которое кадрируется с большого аватара, и отображается в поиске по группам, в списке сообществ каждого пользователя и слева под обложкой, если такая имеется. Вот несколько советов по её дизайну.

1. Миниатюра должна быть понятна аудитории

Не стоит размещать кусок странной иллюстрации. Визуализируйте то, что впоследствии ЦА будет ассоциироваться с брендом, например логотип, иконку товара/услуги, а может главного маркетингового персонажа бренда.

2. Пускайте в ход только качественные фотографии

Лучше загрузить исходник в 2-3 раза больше требуемого размера, так о жутких пиксельных “квадратиках”, которые выставляют вас не в лучшем свете, можно будет забыть.

3. Разрабатывайте собственные иллюстрации

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

4. Контрастные фону страницы картинки – то, что нужно

При оформлении ВК миниатюр так броско, “кругляшок” выделится в ленте среди других групп и не сольется с фоном страницы.

5. Разместите контакты или УТП компании

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

6. Сделайте текст крупным и читабельным

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

7. Применяйте нестандартные формы

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

Разработайте меню

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

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

Разработайте витрину товаров

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

Оформление постов

1. Используйте доступные размеры изображений в полную силу

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

2. Разработайте индивидуальный стиль постов

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

3. Размещайте короткий текст на картинке

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

4. Сделайте несколько шаблонов для разных целей

Например, для цитат применяйте один шаблон презентации визуальной информации, для анонса материалов с сайта – другой, а для конкурсов третий.

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

Дизайн группы ВКонтакте «под ключ», кейс по оформлению группы ВК с лендингом и примерами

Самой популярной услугой среди наших клиентов является дизайн группы ВКонтакте «под ключ» с вики-лендингом и это не удивительно! Вы получаете полностью оформленную группу к приему заказов уже через несколько дней. Ваши клиенты не останутся равнодушными!

Что входит в дизайн группы «под ключ»:

Обложка группы ВКонтакте

Обложка группы ВКонтакте натяжные потолки Атлант Воронеж

1. Аватар (миниатюра аватара)

Рекламный баннер (открывает меню), который так же можно использовать для оформления промо поста в группе ВКонтакте

Баннер группы ВКонтакте

• Вики-лендинг (вид меню)

Презинтация дизайна группы ВКонтакте — Александра

• Шаблоны для постов 3 шт.

Шаблон для публикации брендированных постов

• Обложки фотоальбомов

• Карточки товаров (товары)

• Обложки каталога товаров

Что дает дизайн группы ВКонтакте

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

Похожие Статьи

Все просто! Посмотрите сами:

• Разработанный фирменный стиль Вашей группы, который Вы можете использовать для создания визиток, листовок или сайта.
• Привлекательное оформление в едином стиле.
• Рекламный баннер (открывает меню) для привлечения клиентов и проведения акций в закрепленном посте.
• Уникальный вики-лендинг, который наглядно презентует Ваши услуги и товары через меню группы. Вашим подписчикам нужно просто кликнуть на баннер. Так же Вы можете подавать рекламу сразу на вики-лендинг или прикреплять его к своим публикациям.
• Красивые и узнаваемые публикации в группе, которые легко оформить с помощью разработанных нами шаблонов для постов. Важным преимуществом является и то, что данные посты легко опубликовать в своем аккаунте Instagram или отрепостить по другим соцсетям.
• Карточки товаров будут яркими и привлекательными, а не просто «картинками» в плохом качестве.
• Ваши фотоальбомы приобретут читабельный и понятный для клиентов вид.
• Вы сможете оформить все свои соцсети и сайт в единый стиль по разработанному нами дизайну.

И все это дизайн группы ВКонтакте «под ключ», который гарантирует высокие результаты на развитие Вашего онлайн-бизнеса и привлечение новых клиентов.

Знакомимся с заказчиком Александр Шеремет — мастер по натяжным потолкам в Воронеже

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

Александр Шеремет – это мастер с большой буквы! Пройдя долгий путь от работы на «дядю» до открытия собственного бизнеса, он успел поработать и монтажником, и начальником, а в итоге совместил эти профессии в компании «Атлант», которая специализируется на монтаже натяжных потолков в Воронеже и области. Также у него Вы можете приобрести напольные покрытия (линолеум, ламинат, паркет) и заказать установку входных и межкомнатных дверей.

Какие перед нами стояли задачи

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

У Александра довольно большой спектр услуг, который нужно было упаковать в дизайне группы ВКонтакте. Здесь мы сделали акцент на вики-лендинг, в котором разместили основные услуги с крупными фото и кнопочками заказа для каждого раздела.

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

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

Отзывы в группе ВКонтакте о работе Александра:

Что получил заказчик по завершению работы

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

Сравните как выглядел дизайн группы ВКонтакте до и после:

Группа Александра до разработки дизайна под ключДизайн группы ВКонтакте под ключ для Александра

1 000 подписчиков в свою группу АЛЕКСАНДР привлек с помощью конкурса, проведенного в группе бесплатный воронеж

Отзывы о проведенных им конкурсах: Отзыв о проведенном Александре розыгрыше в Бесплатный Воронеж

Вам понравился наш кейс по дизайну группы ВКонтакте «под ключ»? Напишите свое мнение в комментариях к записи. С уважением, Ирина Филипенко, дизайнер данного проекта.

Как оформить верхнюю часть группы ВКонтакте. Как оформить группу ВК и сделать красивое меню

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

Обратите внимание, что примерно двадцатого октября администраторы Вконтакте обрезали аватарки групп, сделав их 200 * 500 пикселей.Исходя из этого, немного подкорректируйте урок. Или просто сделать нижнее меню: 382 * 232 и 200 * 500.

Дизайн группы Вконтакте

Создайте в фотошопе новый белый документ 630 * 725 пикселей. В слое вырежьте два окна, через которые будет виден графический дизайн, а именно прямоугольник 200 * 710 и нажмите Del, а прямоугольник 382 * 442, соедините прямоугольники внизу и снова нажмите Del.

Мы разместим наш графический дизайн под этим слоем. Ставим картинку, затем текст, в левом прямоугольнике создаем пять точек (количество зависит от того, сколько вам нужно).

Сохраните правый прямоугольник как отдельную картинку 200 * 710. Итак, первая картинка готова для украшения. Его необходимо загрузить в блок, расположенный в правом верхнем углу группы «Загрузить фото». Обрежьте левую картинку по количеству точек. Получаем 5 картинок 50 * 382.

Загружаем все пять картинок в основной альбом страницы группы («Мои фото» — «Мои альбомы» — «Добавить фото»). Переходим на страницу группы и под описанием видим блок «Новости» (можно переименовать) — «Редактировать».

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

Перейдите на вкладку «Исходный код» и вставьте туда следующий код (лучше визуальный редактор не использовать, он выбивает настройки):

[]
[]
[]
[]
[]

Не забудьте в коде заменить слово фото на имя ваших файлов и указать высоту файла (ширина уже задана), а также указать url ссылок меню.

Чтобы картинки можно было объединить, название группы должно быть размещено в одной строке, описание группы — в 10 строках, а URL-адрес веб-сайта — в 1. Нажмите на картинку, чтобы увидеть, как она работает. .

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

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

Как красиво оформить группу в ВКонтакте

Создание баннера

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

Stage 1

Откройте Photoshop, создайте новый документ размером 630×725 пикселей. Залейте его белым. Вырежьте в слое два окна. Графический дизайн Контакта будет смотреться через эти окна. Сначала выделите прямоугольную область размером 200×710 пикселей, нажмите кнопку «Del». Затем выделите прямоугольную область размером 382×442 пикселя, выровняйте получившиеся прямоугольники по низу и нажмите клавишу «Del».

Stage 2

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

Stage 3

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

Для чего левое изображение? Разрезаем на несколько частей (в зависимости от количества пунктов меню). Например, в нашем меню 5 пунктов, а это значит, что на выходе будет 5 изображений размером 382×50 пикселей.

Stage 4

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

Этап 5

Итак, мы подошли к завершающему этапу гайда «Как красиво оформить группу во ВКонтакте».Откройте вкладку с названием «Оригинал, который находится в нижнем окне, необходимо скопировать, а затем вставить в« Исходный код ». В тексте кода замените фото на имена файлов и отметьте высоту файла (382 пикселей) .Теперь вставьте адреса ссылок меню. Имя файла взято из альбома.

Stage 6

Для идеального совмещения картинок необходимо выполнить несколько условий:

Название группы должно соответствовать одна строка;

Адрес сайта тоже одна строка.

Описание должно состоять из 10 строк.

Вконтакте вики-разметка

Чтобы понять, как красиво оформить, также необходимо ознакомиться с концепцией вики-разметки.

Что это такое?

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

Текстовое оформление меню

Код для меню будет выглядеть так:

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

Графическое меню

Код такого меню будет составлен по следующему принципу:

! !! !!

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

.

Мы выпустили новую книгу «Контент-маркетинг в социальных сетях: как попасть в головы подписчиков и полюбить свой бренд».

Группа ВКонтакте — это ваше лицо, поэтому дизайн группы Вконтакте требует особого внимания. Конечно, вы можете заказать дизайн группы Вконтакте у специалистов. В этом случае стоимость будет зависеть от объема работ и специфики. В среднем сложное оформление группы в контакте с макетом меню и другими серверами стоит от 1000 рублей и выше. Если вас интересует самостоятельное оформление группы Вконтакте, то эта статья для вас.Прежде всего, укажем, что это абсолютно реально.

Размер элемента

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

Давайте рассмотрим каждый элемент отдельно:

Шапку конструируем

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

Вот несколько вариантов того, что можно поместить в шапку:

Аватар

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

Хорошая миниатюра аватара соответствует следующим критериям:

1. Текст на нем крупный и хорошо виден, легко читаемый.
2. Изображение и текст четкие, не пытайтесь втиснуть в аватар слишком много.
3. Лучше использовать оригинальный образ, сделанный вами, а не загруженный.
4. Используйте яркие цвета, чтобы выделиться на фоне остальных изображений, умело используйте контраст.
5. Аватарки, выполненные в стиле минимализм, смотрятся эффектно: минимум текста и лишних деталей, максимум красоты и простоты.
6. Включите свое воображение, чтобы привлечь и заинтересовать пользователя — черный квадрат, горящий значок сообщения и т. Д.

А вот несколько вариантов размещения информации в миниатюре: анонсы, преимущества, контакты, низкие цены, акции, конкурсы и так далее.

Требования к аватарам:

1. Качество.Для этого используйте изображения в 2-3 раза больше необходимого размера.
2. Единый стиль. Все элементы должны сочетаться в цветовой гамме и общем стиле.
3. Разнообразие. Лучше, если эскиз и сам аватар будут разными изображениями.

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

Виджеты

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

Картинки для постов

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

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

Для создания качественных и привлекательных картинок, которые помогут сделать красивый дизайн группы Kkontakte, рекомендуется использовать Photoshop. Если вы владеете данной программой, воспользуйтесь одним из упрощенных аналогов программы: Fotor.com или Canva.com.

Редактирование статей

Как зарегистрировать группу ВК? Редактируйте статьи в нем с помощью редактора, вы можете найти его по этой иконке:

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

Разметка вики

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

Давайте разберемся, как создать вики-страницу: открыть, просмотреть и вставить в адресную строку: http: // vk.com / pages? oid = -111 & p = Created_page, где «111» — это идентификатор группы, а «Created_page» — это название статьи со словами, написанными с подчеркиванием. Мы часто переключаемся в режим кода, поэтому сразу же посмотрим, как это сделать:

Текст форматируется в простом и понятном редакторе, похожем на Word. Но у него нет возможности изменять шрифты, вместо этого он использует теги: h2, h3, h4, жирный и курсив.

При необходимости вы можете вставить ссылку в текст с помощью шаблона: [ссылка на статью | текст ссылки].

Чтобы вставить картинку, кликните по иконке камеры, удобнее это делать в кодовом режиме, который позволит сразу указать нужные размеры и поместить картинку посередине.

Есть и более сложные варианты:

Здесь сначала делается изображение в Photoshop, которое затем делится на части с помощью «Вырезки», затем готовые изображения вставляются в пост вики и к ним прикрепляются ссылки.

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

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

Осталось только обезопасить почту.

Вместо вывода

Несколько советов, как оформить группу Вконтакте:

1. Когда вы разрабатываете дизайн (неважно, используете ли вы старую версию или думаете, как оформить группу Вконтакте в новом дизайне) всегда думайте, как он будет выглядеть в мобильной версии, все ли будет понятно и удобно.
2. Не стесняйтесь экспериментировать и разрабатывать решения, которые не используют ваши конкуренты. Это просто плюс.
3. Совершенно плоское и симметричное меню иногда может показаться скучным, поэтому не зацикливайтесь на идеальных формах.

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

Прежде всего, нужно красиво оформить. Ведь мы, как известно, все оцениваем «по одежде». Эта статья поможет вам красиво оформить группу Вконтакте самостоятельно.

Как оформить название группы Вконтакте?

Первое, на что нужно обратить внимание при создании группы Вконтакте — это заголовок … При выборе имени нужно учитывать три основных параметра:

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

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

Как оформить статус группе Вконтакте?

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

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

Как оформить описание группы Вконтакте?

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

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

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

Как сделать аватарку для группы Вконтакте?

Теперь попробуем разобраться в одном из важнейших аспектов дизайна группы Вконтакте — как сделать аватарку? Для тех, у кого есть свои деньги, вы можете зарегистрироваться на бирже фрилансеров и заказать аватарку и другие элементы для группы (баннер, меню и т. Д.)) от опытного веб-дизайнера. Но можно пойти другим путем, сделайте аватарку для группы Вконтакте сами.

В первую очередь нужно определиться, какого размера вам потребуется для создания аватара для группы Вконтакте. Максимальная ширина группового аватара составляет 200 букв (далее просто пикселей), а максимальная высота — 500 пикселей. Большие аватары будут уменьшены, чтобы соответствовать указанным пропорциям. Аватары, размер которых меньше указанного, напротив, будут увеличиваться и искажаться на экране.Поэтому создайте аватар для группы Вконтакте шириной 200 пикселей и высотой от 200 до 500 пикселей.

Создавая аватарку для группы Вконтакте, помните о его миниатюре, которая составляет 200 пикселей по ширине и высоте. Поэтому основную информативную нагрузку аватара (название или описание группы, девиз, призыв к действию и т. Д.) Следует размещать в одной области, которая будет соответствовать заданным размерам.

Самый простой способ сделать аватарку для группы Вконтакте в фотошопе … И совсем не обязательно это знать и уметь пользоваться всеми функциями. Достаточно научиться пользоваться основными инструментами (выделение элементов, работа со слоями и т. Д.). Ниже вы можете увидеть пример аватара, который я сделал для группы Вконтакте.

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

А если вы хотите создать сложных и красивых аватарок для групп Вконтакте , прорисовывая каждую деталь с нуля, то изучите Photoshop, научитесь пользоваться им профессионально.Это можно сделать несколькими способами:

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

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

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

Самым простым способом освоить Photoshop будет видеокурс. Поскольку в нем будет представлена ​​вся информация от простого к сложному, с подробным описанием и обучением всем основам работы с программой. И могу порекомендовать вам аналогичный видеокурс.

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

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

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

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

Но если ваше сообщество непривлекательно и, как все, кто захочет там остаться? Я думаю никто !!! Так что давайте украсим наши группы качественным дизайном и научимся делать это очень быстро.Перед тем, как приступить к созданию графики и нашего будущего меню, вам необходимо установить на свой компьютер программу Photoshop для дальнейшей нарезки картинок. Многие спросят, зачем вообще нужно вырезать картинки. Дело в том, что для каждой ссылки меню нам нужно будет создать отдельную полосу из общего баннера.

На сегодняшний день существует несколько видов создаваемого меню:

• Открыть с активными точками;
• Закрыто как закрепленная запись;
• С отдельными картинками или общей смежной картинкой баннера и меню.

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

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

Закрытое меню группы ВК

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

Меню будет таким:

Групповое открытое меню (закрепленный материал)

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

Как сделать красивое меню для группы ВКонтакте: пошаговая инструкция

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

• Для аватарки 200×332 пикселей;
• Для главного баннера размер меню 395×282 пикселей.

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

Чтобы было понятно, если высота главного аватара группы равна 332, то мы вычитаем из нее 50 и получаем высоту главного меню равную 282.Если габариты значения не имеют, то высоту можно выставить произвольно.

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

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

Давайте создадим новый холст в Photoshop размером 600×350 пикселей, который мы будем использовать в качестве трафарета, вырезав в нем отверстия для наших изображений. Для работы нам нужно перевести размеры всех элементов и линейок в пиксель, и это делается по следующему пути: «Edit-setting-main» и здесь мы уже устанавливаем пиксели.

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

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

У вас должно получиться:

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

Отлично. После того, как вы разместили изображение нашего дизайна, нам просто нужно выбрать «Сохранить для Интернета», и на выходе мы получим 2 наших изображения.Теперь мы возвращаемся в нашу группу и можем заполнить основной аватар (вертикаль). Мы будем использовать баннер для меню чуть позже, когда будем работать с кодом разметки вики.

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

Итак, вернемся в Photoshop и создадим новый холст размером 400×300 пикселей. Затем выбираем в разделе: файл-место и выбираем картинку для фона меню.

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

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

Обратите внимание, что у вас должно быть:

• Материалы открываются в «ограниченном» режиме;
• Обсуждения включены;
• Папка с фотографиями открыта для всех.

Теперь осталось настроить нашу страницу, где она будет отображаться в меню. Для этого перейдите на главную страницу сообщества, выберите свежие материалы, отредактируйте и вызовите «НАШЕ МЕНЮ».

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

При работе в текстовом редакторе, если после загрузки картинок щелкнуть значок в виде скобок в правом верхнем углу, то мы должны увидеть следующий код:

Совет: Важным моментом после загрузки изображений является удаление отступов.Это решается вставкой «nopadding» перед размерами изображения.

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

[]
где xxxxx — id вашей картинки
yyyyy — ширина в пикселях (не более 388)

Должно получиться так:

Теперь наши картинки собраны в отдельный баннер.А чтобы добавить ссылку на каждый элемент, просто нажмите с отключенной разметкой на картинке и в разделе ссылок вставьте скопированный URL.

И вот мы подошли к самому важному и последнему пункту создания нашего меню ВКонтакте. Теперь нам нужно сохранить нашу страницу с картинками и скопировать ее адрес. В моем случае это выглядит так:

http://vk.com/page-116682062_51411604?act=edit&hid=183950676&section=edit

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

Перейдите на домашнюю страницу и выполните следующие действия:

Шаг № 1.

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

Шаг № 2.

Прикрепите к сообщению изображение нашей заготовки меню и нажмите «Отправить».

Шаг № 3.

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

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

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

В результате работы у нас получится вот такое меню.

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

ВАЖНО: После изменения дизайна ВК в 2016 году были внесены новые изменения при создании изображений и требования к картинкам о которых.

Скачать шаблон группового меню ВК + все исходники урока

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

Прилагаю видео, чтобы закрепить прочитанное -))).

Самостоятельно составлять групповое меню ВКонтакте. Дизайн группы ВКонтакте: особенности и фишки

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

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

Ну-ну А вы пошли оформлять меню для групп ВКонтакте?

Как самому оформить меню в группе ВКонтакте

Да, самостоятельно, потому что после прочтения этой статьи вам не понадобятся услуги фрилансеров. Хотя это дело не дорогое, за 1500 можно сделать меню на workzila (подробный опыт работы с этой биржей я писал).

Вот что нам нужно для регистрации группы в ВК:

1. Макет (графическое расположение элементов) — ведь мы должны знать, где то, что должно располагаться.

2. Базовые знания вики-разметки. (о самых стандартных вещах мы поговорим ниже, а для детального изучения — рекомендую эту группу).

3. Базовые навыки Photoshop. Вам нужно будет вырезать кусочки макета нужного размера.

Где взять макеты меню?

Макеты для оформления меню ВКонтакте можно взять разными способами, например:

1. Freelance или Workzilla.

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

3. Можно погуглить и скачать готовые. Поверьте, их много.

Ну с другой стороны … Зачем гуглить? Просто подпишитесь на обновления моего сайта. И нажмите на кнопки социальных сетей ниже.

Специально для вас я подготовил архив, в котором более 100 различных вариантов оформления для оформления групп ВКонтакте! … Распакованный архив занимает около 2,5 гигабайт.

Главное условие — быть подписчиком и следить за социальными кнопками.!

Спасибо. Теперь вы можете скачать архив по этой ссылке.
Не забудьте пройти остальные социальные кнопки.

Размеры аватарок и меню, которые пригодятся для украшения групп ВК

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

Как видите, группе аватаров требуется размер 200 пикселей в ширину и 500 пикселей в высоту. А для изображения главного меню — 395 пикселей в ширину и 289 пикселей в высоту.

Вот в принципе все, что нужно. Есть макеты, есть понимание размеров.

Творческая часть окончена — мало что осталось сделать. Начнем с технической части всего процесса создания меню для групп.

Как самостоятельно оформить группу ВКонтакте, имея под рукой макеты

Итак, у нас есть макеты группового дизайна.Теперь вам нужно вырезать нужные части.

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

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

Во-первых, небольшая ликбез.

В чем разница между групповым меню и общедоступным меню?

Отличаются тем, что групповое меню уже, по сути, набор кнопок. Но это меню всегда скрыто! Всегда! А публичное меню всегда открыто и, по сути, представляет собой закрепленную пост-ссылку, ведущую на страницу с разделами самого меню (кнопками).

Итак, еще раз: в группе — чтобы увидеть меню, нужно нажать на кнопку «Меню группы», по умолчанию эта кнопка называется «Свежие новости».

И на публике (в группе, кстати, тоже можно) — меню всегда открыто.

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

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

Как создать отдельную страницу для меню ВКонтакте

Для создания страницы будущего меню (навигации) необходимо отправить запрос в ВК следующего содержания:

, где XXX — номер группы, YYY — имя страницы (здесь требуются все вопросительные знаки и тире).

Более того, рекомендую сделать имя нормальным, привлекательным и значимым, потому что оно будет светиться, и люди этим именем будут добавлять определенное впечатление о вас и вашей группе. Например «Навигация» или «Групповое меню» — это нормальные названия, но вроде бы банальные. Использовать свое воображение.

Я ввел следующий запрос

И я открыл сразу созданную страницу с возможностью ее редактирования.

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

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

Как сделать закрепленный пост в группе или паблике

Да, и в любом типе сообщества закрепленный пост создается одинаково! Все сделано очень просто.

И в появившемся окне нажимаем кнопку «Исправить» — все просто!

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

Фактически, теперь каждый использует именно этот метод меню.

Угадайте, почему?

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

Нарезка макета для создания группового или общедоступного

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

Теперь меню.

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

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

Щелкните по меню, смотрите картинку.

Нам нужно выбрать «кликабельные» зоны.

тех. выбираем сами кнопки. Позвольте мне выделить вам эти области красными линиями.

Сколько мы получаем? 5 картинок. И не на каждой картинке будет кнопка !! Как видите, верхняя большая картинка не кнопка, а сама по себе …

Итак, вырезаем картинки по этим линиям. Теперь нужно «залить» в ВК.

Если вы создали отдельную страницу для меню, нажмите кнопку «Заполнить содержимым» на вновь созданной странице.

Если вы не создавали эту страницу, а использовали готовую страницу для меню, то редактор страниц прямо перед вами и вы можете сразу загружать фото:

Заполните, и у вас должно получиться:

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

Здесь нужно расположить все картинки в ряд, чтобы не запутаться (ну, я так и делаю).

А чтобы между картинками не было отступов, добавьте тег nopadding, он должен выглядеть так:

это page-581

_45419120 — это адрес самой страницы ВКонтакте, этот идентификатор вы найдете в адресной строке браузера.

Вот и все 🙂 Разве не сложно?

Это то, что я получил в итоге в коде. Если у вас есть что-то подобное, то все в порядке.

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

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

prospero | общаться | социальные инструменты

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

Тема данной статьи — новый дизайн ВКонтакте. Снова изменилось, теперь в группе можно установить горизонтальное покрытие. Оформлять свое сообщество ВК с такой шапкой намного интереснее. Откровенно говоря, никаких знаний Photoshop здесь не требуется. А сделать красивую картинку без особых навыков можно даже в PowerPoint, Fotor, Canva, Pixlr Editor.

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

Загрузка новой крышки

А теперь разберемся, как включить возможность установки горизонтального заголовка. Нажимаем на кнопку «Контроль».

Далее нажимаем на последнюю и загружаем новую обложку группы ВКонтакте.Вот тут и можно понять, что скачиваемый файл может быть любого размера! Но не менее 1590 × 400 пикселей. Создаем прототип обложки в любом редакторе. Далее мы можем выбрать и сохранить область, соответствующую требованиям ВК. Вот подсказка, где найти изображение обложки, какой редактор использовать для

Чем интересен новый дизайн ВКонтакте?

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

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

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

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

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

Как сделать обложку для группы Вконтакте онлайн

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

П.С. Надеюсь, эта информация будет вам полезна.

P.S.S. Включайте свое творчество и удачи во все ваши начинания!

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

Разметка

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

В этой статье мы тоже не можем обойтись без Wiki, но здесь мы используем ее по минимуму, так что не особо вникайте)).Для начала нам необходимо создать интерактивное меню для вашей группы, для этого нам необходимо сделать подготовительные шаги. Во-первых, давайте изменим некоторые настройки в группе. Заходим в «Управление сообществом», затем в «Обсуждения», и здесь нам нужно подключить «Материалы» и сделать обсуждения открытыми, как показано на картинке

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

Делаем шаблон для группы ВК как на картинке ниже.

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

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

При сохранении проекта в Фотошопе, удалив все ненужные элементы (Фотошоп вырезает и сохраняет с ними все картинки и белые поля), нужно изменить названия картинок, желательно для удобства, пронумеровав их по порядку, согласно как они будут размещены в меню…

Фууухххх, мы с этим этапом тоже закончили)) Осталось не так много! Затем переходим к самой группе. После того, как мы изменили некоторые настройки (в начале этой статьи), мы увидим на стене новые вкладки: «Обсуждения» и «Последние новости». Нажмите на ярлык «Новая тема» на вкладке обсуждения и создайте страницу меню.

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

На стене вы увидите созданное сообщение. Далее таким же образом вы создаете необходимое количество страниц (в зависимости от того, сколько разделов меню у вас есть).

Все готово? если да, то приступаем к редактированию нашего меню. Для этого воспользуемся вкладкой «Свежие новости». Опять же, не стесняйтесь нажимать «Редактировать».

Мы снова видим с вами окно редактора, которого мы больше не боимся)), мы с ним уже встречались. Перейдя в режим визуального редактирования (для этого используйте значок камеры в редакторе ВК) загружаем все наши картинки (фрагменты меню) в той последовательности, в которой они будут во всем изображении.Измените название на понятное посетителям. Затем переходим в режим wiki-разметки и редактируем код (подробно о wiki-разметке мы расскажем в следующей статье, я расскажу вам интересную вещь.

Пример кода для предполагаемого меню:

Здесь очень важен один момент — для фрагментов, не выполняющих роль кнопки, вместо ссылки на страницу нужно написать тег «nolink». В противном случае фрагмент станет интерактивным, и когда ваш пользователь щелкнет по нему, сам фрагмент откроется как независимое изображение, но вам это нужно?

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

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

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

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

), составьте меню.

Сейчас я покажу вам , как сделать меню в группе ВКонтакте, и правильно оформить .

Делаем красивую графику

В новом дизайне сайта Вконтакте изменены размеры графики. Ниже вы найдете фактические значения.

• Аватар группы — 200 × 300 пикселей
• Баннер в описании — 510 × 271 пикселей

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

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

Сначала загрузите аватар. Зайдите в группу и нажмите «Загрузить фото».

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

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

Идем к стене. Здесь в блоке «Добавить заметку» нажмите на значок «Фото».

Загрузите второе подготовленное изображение. Обязательно выберите публикацию от имени сообщества. А затем нажмите «Отправить».

Теперь запись нужно закрепить (см.). Возвращаемся к новой записи и раскрываем меню в правом верхнем углу. Здесь нажимаем «Исправить».

Теперь обновите страницу и посмотрите результат.

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

Как создать меню в группе ВКонтакте

Вернемся к нашему примеру и представим, что нам нужно сделать кнопку «Подробности». Это уже есть на картинке. Как мы можем сделать его кнопкой, чтобы при нажатии человек попадал на наш основной сайт? Сейчас покажу.

Чтобы сделать кнопки меню активными, мы должны вырезать их как отдельные изображения.Для этого нам понадобится фотошоп.

Открываем нашу картинку в редакторе, и активируем инструмент «Вырезка».

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

Теперь нажмите Alt + Ctrl + Shift + S, чтобы сохранить готовые изображения.

https://vk.com/pages?oid=-120208137&p=menu

Посмотрите, после символов «odi = -» нужно вставить id вашей группы (см.).И в самом конце ссылки напишите заголовок для своей страницы меню. В этом примере мы оставим «Меню» как есть.

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

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

Далее переходим в раздел «Редактирование» … Здесь для каждого изображения нам нужно убрать отступы, чтобы они сливались в единое изображение.Для этого в коде добавьте следующее значение nopadding; … И добавьте ссылку на нужную страницу или сайт, прописав значение «https://site.ru/page.html» (введите свои адреса!). В нашем примере кнопка «Подробности» должна вести на сайт. Вот что должно получиться.

[] []

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

https://vk.com/page-120208137_52523487

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

Вот меню, которое у нас получилось.

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

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

1. Горизонтальная крышка (жатка)
Начнем с горизонтальной крышки или жатки. Разработчики ВКонтакте уверяют, что обложка за счет своего размера дает большую маневренность в предоставлении и визуализации информации. Обычно, помимо красивой картинки, в шапке есть логотип, сопроводительная информация, контакты, призыв присоединиться к группе и адрес сайта. У меня есть подозрение, что когда-нибудь чехлы станут единственно возможным вариантом дизайна для группы, поэтому рекомендую сразу перейти на них, чтобы в дальнейшем избежать форс-мажорных редизайнов.

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

Вкладка Wiki Последние новости
В верхнем блоке под заголовком теперь могут быть три вкладки: закрепленная запись, информация о сообществе и вики-меню (только в группах, на публичных страницах такой вкладки нет). Акцент по-прежнему делается на закрепленный пост, но даже при его наличии у пользователя теперь всегда будет доступ к информации о сообществе, переключаясь между вкладками. Чтобы увидеть вкладку меню вики (первоначально называвшуюся «Свежие новости»), вам нужно перейти в Управление сообществом »Разделы» Контент »Запрещено (или открыто)» Сохранить.

2. Вертикальный аватар
А теперь обратим внимание на старый добрый групповой аватар размером 200×500 пикселей. Пока это еще и способ украшения группы. Обычно на аватаре располагается следующая информация: логотип, сопроводительный текст или слоган, контакты, звонок для присоединения к группе. На мобильных устройствах аватар не виден полностью, видна только его часть — миниатюра. Для украшения группы можно использовать либо горизонтальный заголовок (обложку), либо вертикальный баннер.Если есть заголовок, вертикальный аватар не виден. На аватаре не может быть никаких рабочих кнопок, на которые можно было бы нажимать — собственно, это картинка и все.

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

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

4. Баннер
Баннер (англ. Banner — флаг, знамя) — графическое изображение информационного, рекламного или побудительного характера. Баннер прикрепляется к сообщению в виде изображения и может иметь только одну внутреннюю ссылку. Многие до сих пор убеждены, что с баннера на главной странице можно сделать несколько ссылок.Это не тот случай, всего одна ссылка и все. Я бы выделил следующие типы баннеров.

4.1 Информационный баннер
Распространенный тип баннера, содержащий общую информацию о компании, группе, услуге или мероприятии с подробным списком преимуществ и другими сопутствующими материалами. Часто используется как закрепленный пост в группе. Размер такого баннера 510х307 пикселей. В этом размере баннер внизу совпадает с аватаркой. Если ссылки с аватаркой нет, то можно использовать любой размер.Например, я использую 600×350 пикселей. Формат квадрата 510х510 пикселей тоже удобен и сейчас набирает популярность — при таком размере баннер занимает максимально большую площадь в ленте новостей.

4.2 Баннер для входа во внутреннее меню
Если мы добавим к баннеру из предыдущего абзаца броскую надпись «Открыть меню», то мы получим баннер, основная задача которого — служить точкой входа в внутреннее меню. Иногда делают уловку в виде нескольких кнопок на баннере, но это иллюзия, когда пользователь нажимает, пользователь все равно попадает на внутреннюю страницу, и там каждая кнопка имеет свою ссылку.Размер такого баннера 510х307 пикселей. При таком размере баннер внизу совпадает с аватаркой. Если вход в меню не привязан к аватарке, то можно сделать баннер любого размера, даже узкую кнопку с надписью «Открыть меню». Главное, чтобы ширина баннера была не менее 510 пикселей.

4.3 Карты для репостов, акций
В последнее время особую актуальность приобрели карты для репостов или акций. Его задача — призывать к конкретным действиям.В основном это «Присоединяйтесь к группе, делайте репост или ставьте лайк и выигрывайте приз». Такие баннеры используются в рамках рекламных кампаний или акций как в собственных группах, так и для продвижения в других группах. Я обычно использую 600×350 пикселей.

4.4 Баннер с гифкой
После того, как разработчики ВК в начале года сделали больший размер для гифок, гифки сразу встали в ряд с информационными баннерами. Например, на GIF-баннере можно дать изображения нескольких изменяющихся товаров или текстов — движение сразу привлекает внимание.А когда в июне была добавлена ​​функция автозапуска гифок в ленте новостей, гифки стали объектом пристального внимания рекламодателей и маркетологов.

5. Дизайн аватара + прикрепленный баннер
До недавнего времени этот модульный дизайн, состоящий из аватара и прикрепленного баннера, был самым популярным способом украшения групп. Подробнее о том, как сделать такую ​​конструкцию, рассказано в уроке. С появлением кепки (чехла) популярность этого дизайна может немного снизиться.

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

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

Точки входа во внутреннее меню
Хочу отметить один тонкий момент, который часто упускается из виду.Иногда клиенты заказывают у меня внутреннее меню, но при этом совершенно не представляют, как пользователь попадет в это самое внутреннее меню. И попасть в него можно двумя способами: либо через фиксированный баннер (см. Пункт 4.2), либо через текстовую ссылку в верхней вкладке под строкой состояния (см. Рис. Ниже). Иногда текстовая ссылка также помещается в блок «Ссылки» в правом столбце интерфейса.

Внутренние ссылки меню
Обычно при заказе покупатели указывают следующие пункты меню: О нас, Наши товары (каталог), Способы доставки, Оплата, Гарантии, Отзывы, Контакты, Акции, Скидки, График, Как сделать заказ, Портфолио , Вопросы и ответы, Информация, Сделайте заказ.Ссылки из пунктов меню могут переходить в соответствующие разделы внешнего сайта. Тогда ссылка автоматически откроется в новом окне. Большинство точек ведет на внутренние страницы ВКонтакте. В этом случае страница открывается в том же окне, и вам необходимо сделать ссылку или кнопку «Вернуться в главное меню».

Ссылки на альбомы с фото и видео откроются в новом окне. Ссылки на темы с обсуждениями (например, Обзоры), на диалоговое окно для написания сообщений, на приложения (см. Параграф 10), на выборку по хэштегам (см. Параграф 12) открываются в том же окне и в этом случае вы можете получить вернуться в меню можно только через главную страницу сайта или через кнопку «Назад» в браузере.Это, пожалуй, самый неудобный момент с такими ссылками.

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

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

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

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

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

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

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

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

Как украсить группу в контакте. Дизайн группы ВКонтакте: особенности и фишки

В этой статье мы шаг за шагом рассмотрим, как правильно создать, настроить и правильно спроектировать сообщество ВКонтакте

Здание сообщества

Вы можете создать сообщество ВКонтакте, перейдя в «группы», » управление », вкладка« Создать сообщество ».

Тип и тема сообщества

Для начала вам нужно будет определиться с типом сообщества в зависимости от ваших целей и выбрать тему сообщества.

Оформление группы

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

На обложке можно разместить:

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

Обложка в сообществе МТС

Обложка в сообществе Тинькофф Банк

Обложка в сообществе «HeadShot»
Размеры изображений для оформления сообщества ВКонтакте.
Размер обложки для группы ВКонтакте 1590x400px
Размер аватара — круг 200px

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

Сообщество Описание

В описании главное — как можно короче описать основные преимущества компании.
Важный момент: нет необходимости описывать все, что ваша компания делала, делает или будет делать. Никто не прочитает длинное описание. У вас есть несколько секунд, чтобы привлечь внимание, прежде чем клиент начнет просматривать сообщения на стене сообщества. Поэтому описание должно содержать только ключевые моменты, отражающие суть сообщества / компании.

Лайфхак: Для того, чтобы описание сообщества было более подробным (с фото, ссылками и красивым макетом), нужно в фиксированной записи разместить вики-пост, в котором будет яркая картинка и призыв к действию.

Примеры сообщений вики:

Групповой аватар

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

1. 1. Текст
      Если вы размещаете текст на миниатюре аватара, важно, чтобы он был большим и не выходил за пределы аватара.
   2. Понимание
      На аватаре необходимо разместить изображение, на котором будет понятно, что изображено.
   3. Minimalism
      Чтобы ваш аватар выглядел актуальным, вы можете сделать его в стиле минимализма: меньше слов и лишних элементов, не несущих практически никакой смысловой нагрузки.Миниатюра аватара должна быть максимально простой и удобочитаемой.
   4. Привлечь внимание
      Чтобы эскиз аватара привлекал внимание. Его нужно расположить так, чтобы он не был слишком белым и скучным, иначе он потеряется на фоне более красочных аватарок конкурентов.

Что поместить на миниатюру аватара?

Рассмотрим варианты использования миниатюры аватара для привлечения подписчиков в сообщество.

Настройки сообщества

Перейдя на вкладку «Управление сообществом», вы можете найти короткий URL-адрес для страницы и предоставить дополнительную информацию.

Далее во вкладке «Ссылки» укажите ссылки на свою страницу в других социальных сетях и ссылку на свой сайт.

Во вкладке «Разделы» включите необходимое. Удобнее поставить ограниченную стену сообщества, чтобы в будущем не выгребать ее из публикаций спам-ботов.

Включите продукты, если ваше сообщество продает товары или услуги.

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

Wiki-меню — красивое и информативное

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

Примеры вики-меню:

Вы можете увидеть подробное руководство по созданию вики-меню здесь —

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

Инструкции сообщества по проектированию

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

Создать баннер

Баннер, в данном случае мы будем называть аватарку сообщества, а также графическое меню, которые идеально сочетаются друг с другом. Часто это одно изображение, разделенное на два блока. Вам нужен фотошоп. Вы можете бесплатно скачать эту программу из Интернета. А вот и сама инструкция:

1. Откройте Photoshop и создайте в этой программе новый документ размером 630×725 пикселей.Залейте все белым.
2. Вырежьте в слое два окна (200×710 и 382×442 пикселей). Именно через эти окна будет отображаться графический дизайн сообщества. Объединяем два окна внизу.
3. На картинке пишем текст и пункты меню, которые вы запланировали. В принципе, это ответ на вопрос, как оформить меню группы ВКонтакте.
4. Сохраните отдельно созданный прямоугольник размером 200×710 пикселей.Это аватар вашей группы или паблика.
5. Нам нужно разрезать левую часть изображения (382×442) на пару частей. Сколько их будет, зависит от количества пунктов в меню вашего сообщества.
6. Открываем ВКонтакте в браузере Orbitum или любом другом. Полученные картинки сохраняются и загружаются в альбом вашей группы.
7. Перейдите в «Новости» — «Редактировать» — вкладку «Исходный код». Код, который вы увидите в нижнем окне, вставляется в файл «Source… «. Измените фото на имя файла, а также укажите высоту файла. Вручную вставьте url ссылки меню.
8. Для того, чтобы ваши изображения гармонично и правильно сочетались, название сообщества должно быть в одной строке, описание должно быть в 10 строках, а также URL сайта должен быть в одной строке.

Wiki-разметка в помощь

Если вы всерьез интересуетесь, как устроить группу ВКонтакте, вам обязательно стоит знать, что такая вещь, как Wiki-разметка, играет в этом деле очень важную роль.Что это вообще такое? Это, скажем так, альтернатива HTML. Как вы уже догадались, эта разметка также используется при редактировании статей Википедии. Но сейчас не об этом. Для правильного оформления сообщества ВКонтакте нам понадобится вики-разметка:
И первое, и второе — без кавычек! Что ж, теперь вы уже точно знаете все о том, как правильно, грамотно и красиво оформлять паблики и группы ВКонтакте. Удачи!

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

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

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

Шаг 1.
Создайте новый документ в Photoshop, размером около 850×700 пикселей, залейте его белым цветом. В этом примере я сразу наложил поверх интерфейса ВКонтакте для наглядности. Теперь нам нужно вырезать два окна в слое, через которые будет виден сам графический дизайн. Сначала выберите прямоугольник 200×500 пикселей и нажмите Del. Затем выберите прямоугольник 510×309 и также нажмите Del.

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

Шаг 2.
Теперь мы размещаем весь наш графический дизайн под этим слоем. В данном случае я ставил картинку с основным фоном, потом писал текст, а потом в левый прямоугольник.

Шаг 3.
Теперь сразу сохраняем правый прямоугольник (аватар) как отдельную картинку размером 200×500 пикселей.Это готовая картина для украшения группы. Он загружается в блок в правом верхнем углу группы, где написано «Обновить фото». А левую картинку нужно разрезать на несколько картинок по количеству пунктов меню. В данном случае это 5 картинок шириной 510 пикселей.

Шаг 4.
На этом шаге нам нужно загрузить наши вырезанные картинки во ВКонтакте. Для этого сразу под описанием группы выберите блок «Свежие новости», на мой взгляд, именно так он называется в оригинале.Я переименовал его в «Меню». Щелкните «Редактировать». Важный! Во-первых, у вас должна быть открытая группа, а не страница. Так как на Странице такого пункта просто нет. Во-вторых, в меню «Управление сообществом»> «Информация»> «Контент» должен быть выбран пункт «Публичный».

Шаг 5.
Итак, во вкладке «Редактирование» мы щелкаем по значку камеры и загружаем наши пять нарезанных изображений меню. ВКонтакте загрузит их по-своему, уменьшив размер до 400 пикселей по ширине и присвоив изображению тег noborder.На следующем этапе нам нужно немного подправить код.

Шаг 6.
А именно, устанавливаем исходные размеры изображения и меняем тег noborder на тег nopadding. Нам также нужно указать URL-адрес ссылок из каждого пункта меню. В этом случае первая ссылка ведет на внутреннюю страницу ВКонтакте, а остальные четыре ссылки ведут прямо на страницы моего сайта.

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

[] [] []

Шаг 7.
Еще раз повторяю, чтобы открыть это меню нужно нажать на надпись «Меню». И так всегда складывается. Читайте комментарии к посту, там много вопросов разобрались. Что ж, присоединяйтесь к моей группе во ВКонтакте.

Привет, друзья!

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

Что входит в дизайн?

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

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

Аватар

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

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

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

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

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

В среднем на проектирование обоих элементов уходит день или два. Беру это с запасом. Вы можете посчитать, сколько на этом сможете заработать.Итак, я вернусь к тренировкам. Речь идет о самом курсе: http://www.1day1step.ru/design.php … Цены там вполне адекватные для обучения, и можно отбить после 2-х клиентов.

Меню сообщества

Теперь поговорим о меню сообщества. Меню построено на дизайне и так называемой вики-разметке. Этому тоже можно научиться.

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

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

Брендированные сообщения

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

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

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

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

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

• Аватар. До недавнего времени верхняя крышка играла важную роль в обществе. Но приверженцы старого стиля все же могут использовать его в базе.Аватар должен содержать основную информацию о компании: логотип, название компании, контактные данные и несколько слов о направлении деятельности. Одна из самых важных частей аватара — это миниатюра, видимая в поисковой системе контактов и в ленте новостей. Аватар имеет ширину 200 пикселей.
• Крышка. В новом дизайне обложка стала основным элементом графического оформления сообщества. При входе в группу первое, на что обращает внимание человек, — это обложка, поэтому она должна максимально отражать вашу деятельность.Также здесь должна быть размещена контактная информация и логотип компании. Рекомендуемый размер обложки указывается в настройках группы при загрузке.
• Баннер перехода в меню. Традиционно кнопка меню в стиле сообщества размещается на изображении перехода. Дополнительно рекомендуем разместить там потенциально интересное предложение для клиентов.
• Изображение с элементами меню. Элемент навигации, который позволяет пользователям последовательно перемещаться по содержимому группы. В меню можно разместить всю необходимую участникам информацию: доставку, оплату, контакты, о компании, каталог и многое другое.При создании рисунка лучше выбрать его так, чтобы можно было легко добавлять новые кнопки в меню, или заранее продумывать пункты меню, избегая дальнейшего переделки.
• Навигационные картинки для внутренних страниц. Эти элементы используются для удобной навигации пользователя по разделам сообщества и для того, чтобы внутренние страницы выглядели приятнее.

IMAPRO — Маркетинг Вконтакте

Vkontakte (VK) — самая популярная российская социальная сеть, аналогичная Facebook.Вконтакте более 120 миллионов пользователей в России и странах Восточной Европы — Украине, Беларуси, России и Казахстане.

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

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

Базовый пакет: Создание группы Вконтакте + ведение группы в течение одного месяца.

Цена 300 евро + НДС

Сюда входят:

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

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

Цена от 200 евро + НДС

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

Цена от 100 евро + НДС (sopimuksen kesto минимум 3 кк)

Смотрите также наши специальные предложения

Примеры нашей предыдущей работы:

Атака клонов Facebook: Вконтакте

Международные грабежи успешных веб-компаний можно найти повсюду, от Frazr, немецкого клона Twitter, до Digg Malaysia, малазийского клона рейтингового сайта Digg.

Чтобы не отставать, российская социальная сеть Vkontakte (или «виртуальный контакт») практически полностью скопировала внешний вид Facebook, не говоря уже о темпах ее роста.См. График Alexa и галерею снимков экрана ниже.

Копирование Facebook уже оказалось прибыльным в других странах.

В Германии клон Facebook StudiVZ был куплен немецкой издательской компанией примерно за 100 миллионов долларов; Сообщается, что в Китае клон Facebook Xiaonei был куплен более крупной китайской интернет-компанией за нераскрытую сумму.

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

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

Повышение рейтинга Alexa в Вконтакте:

Гениальный дизайн Вконтакте:

И, не забываем, StudiVZ красный версия:

Наконец, есть приветственная страница Xianei — такая же, как у Facebook, но с рекламой предстоящих Олимпийских игр в Пекине (гордый партнер по рекламе: Coca Cola).

Спасибо, Игорь!

VentureBeat

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

• актуальная информация по интересующим вас вопросам
• наши информационные бюллетени
• закрытого контента для лидеров мнений и доступ со скидкой к нашим призовым мероприятиям, таким как Transform 2021 : Подробнее
• сетевых функций и многое другое

Стать участником

ВКонтакте запустила почтовый сервис с коротким доменом @ vk.com

ВКонтакте запустила почтовый сервис с коротким доменом @ vk.com — Aroged

Социальная сеть «ВКонтакте» объявила о запуске собственного почтового сервиса «VK Mail». Любой желающий может создать почту с доменом @ vk.com.Об этом сообщила пресс-служба коммуникационной площадки.

Вы можете подключиться к почте, используя единую учетную запись VK Connect. Разработчики обещают пользователям настраиваемый минималистичный дизайн и надежную защиту электронной почты. Сервис также предложит сортировку писем и умные ответы на основе машинного обучения. Система самостоятельно распределяет письма по папкам «Письма себе», «Новости» и «Социальные сети», «Рассылки».

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

«VK Mail — это продолжение нашего экосистемного подхода. Мы предлагаем удобные продукты и связываем их друг с другом для удобного и быстрого решения проблем пользователей. Новый сервис не заменит Mail.ru Mail: он получит лучшие разработки от команды по созданию почтовых сервисов и продолжит развиваться за счет интеграции с мессенджером ВКонтакте и соцсетями, максимальной персонализации, более смелых технологических решений для молодой аудитории.«, — рассказала вице-президент по экосистемным продуктам ВКонтакте Анна Артамонова.

«VK Mail» доступен не только на настольных устройствах, но и в виде мобильных приложений на iOS и Android, которые можно скачать в Play Market и App Store.

Если вы заметили ошибку, выделите ее мышью и нажмите CTRL + ENTER.

Нет результата

Просмотреть все результаты

© Aroged 2021.