Группы с красивым меню вконтакте. Оформление группы вконтакте с учетом нововведений. Видео — Дизайн группы Вконтакте

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

Чтобы вы сразу поняли о чем идет речь – выкладываю пример оформленной группы:

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

Шаг 1 . В графическом редакторе (лучше всего использовать adobe photoshop) нужно создать документ размером 630 на 725 пикселей. Далее в первом слое вырезаем 2 окна, которые и будут являться меню и аватаркой. Первым делом выделаем прямоугольник размером 200 на 500 пикселей и нажимаем клавишу DEL.
__________________
Сразу оговорюсь, что в уроках на других сайтах вы можете найти советы, где говорят о том, что обрезать нужно прямоугольник размером 200*710. ЭТО НЕ ПРАВИЛЬНО. Сейчас в социальной сети вконтакте есть ограничение на высоту авы и в случае использования высоты в 710 px – она получится обрезанной.

__________________

Теперь вырезаем меню – еще один прямоугольник размером 382 на 232 и жмем также клавишу “делит”. Прямоугольники должны быть соединены внизу.

Заготовка готова.

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

Шаг 3 . Правый прямоугольник можно сохранять. Не забывайте про размер 200 на 500. Это готовая аватарка для вашей группы. Можете сразу загрузить ее в правом верхнем углу группы/паблика.

Что касается прямоугольника с размеченными пунктами меню, то его нужно будет нарезать на несколько картинок (в данном случае 5). Ширина 382, а вот высота рассчитывается индивидуально, но должна быть не менее 50 пикселей.

Шаг 4 . Теперь нужно 5 получившихся фото загрузить в альбом сообщества.

Как только дело сделано – нужно взяться за редактирования блока новостей в группе. Переходим в “свежие новости” и жмем на кнопку “редактировать”

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

Шаг 5 . Во вкладке “редактирование” вставляем cследующий код:
[]
[]
[]
[]
[]

Начинаем его править.
photo – представление ссылки на фотографию. Откройте одну из 5 загруженных вами фото с меню группы и в строке браузера в увидите что-то вроде этого –
http://vk.com/photo72120765_272239411

72120765_272239411 – и есть тот самый необходимый код фотографии. Можно просто использовать имя файла.

Шаг 6 . Необходимо совместить картинки от аватарки меню, если они разъехались. Для этого нужно сделать 3 вещи:
Название группы должно быть в одну строчку
Описание в 10 строк (тут иногда нужен подгон)
Вебсайт также в одну строчку.

Вот что примерно должно у вас получиться:

Как видите, сделать оформление для группы вконтакте совсем несложно. Если у вас есть вопросы – задавайте их в комментариях, а если не хотите “париться” – вам прямая дорога на фриланс.

Создание оформления, описанного в данной статье обойдется Вам в 15-25 у.е.

Привет! Я - Адель Давлетшин, руководитель SMM-проектов в бюро ДругМедиа

Личные сообщения сообщества

Наверняка, уже все видели кнопку« Написать сообщение» и знают про сообщения сообщества. Эта функция позволяет наладить обратную связь с администрацией сообщества. Если комментарий под новостью месяц назад или в одном из десятка обсуждений администраторы могут не заметить, то +1 в сообщениях сообщества не заметить трудно.

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

Прикольно, что можно написать сообщение-приветствие. А еще можно добавить группу в левое меню соцсети, где напротив сообщества появится +1, когда вы получите новое сообщение в группу.

Описание, инфо

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

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

Советы по составлению описания группы мы уже писали в этой статье:

Вики-меню

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

Научиться работать с вики-разметкой можно здесь: vk.com/wiki

Приложения

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

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

Товары

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

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

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

Обсуждения

Ссылки

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

Альбомы

Контакты

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

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

• Хорошие обложка и раздел« товар»

• Короткое и понятное описание

• Заполненный с пользой раздел с вики-страницами

• Интересный тест

• Простое и понятное меню

• Полезные обсуждения

• Яркие обложки альбомов

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

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

Привет, друзья!

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

Что входит в оформление?

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

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

Аватарка

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

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

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

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

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

В среднем на оформление обоих элементов может уйти сутки-двое. Это я беру с запасом. Можете посчитать сколько вы можете зарабатывать сами на этом. Так вот вернусь к обучению. Вот собственно сам курс о котором идет речь: http://www.1day1step.ru/design.php . Цены там вполне себе адекватные на обучение, а отбить можно после 2 клиентов.

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

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

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

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

Брендированные посты

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

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

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

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

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

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

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

При просмотре группы пользователь в первую очередь обращает внимание на аватару и меню. Ниже будет рассказано о том, как создать две картинки в программе 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-разметки. Узнать о ней больше можно, посетив официальную группу Вконтакте. Там представлено много полезной информации и видеоуроков о том, как красиво оформить

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

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

Оформление группы Вконтакте

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

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

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


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


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


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

[]
[]
[]
[]
[]

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

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

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