• Dimensions of the top banner in VK groups. Designing a community in the new VKontakte design: is it difficult?

    Despite its relatively low CTR, many companies will continue to invest their budgets in banners. And there are reasons for this. Display advertising allows you to increase brand awareness and expand its reach.

    Banner advertising on VKontakte

    The site offers several promotion formats, one of which is a text-graphic block. It is only displayed in full version social networks on the right.

    A banner can link to any external resource, VKontakte group or community, as well as an application. There are 3 main types of blocks:

    1. Image and text (145x85)
    2. Large image (145x165)
    3. Community promotion (145x145)

    How to create a VKontakte banner

    You can make a banner anywhere graphic editor. Create an image suitable size and give free rein to your imagination.

    You can also use online services and ready-made templates, which will make your banner look more professional. For example, Canva or Easil.

    How to place a VK banner

    Select the format that suits you best and create a banner.

    Set your target audience. The narrower the sample, the greater the chance of attracting the attention of interested users.

    Set payment for 1000 impressions or for conversions. The choice will depend on your goals: increase brand awareness or drive traffic? Don't forget to name your campaign.

    Check all the details and click Create ad. After that, in the Advertising campaigns section you will be able to start and stop displaying the banner, as well as track statistics.

    Examples of VKontakte banners

    Creating and placing a banner is not difficult, but how to make it visible and effective? Below we look at 50 examples of advertisements that attract attention.

    FOR FREE

    The most tempting and eye-catching ad is an offer to receive something valuable for free. Users actively react to this “magic” word and advertisers take advantage of it.

    CALL

    Another effective technique is a challenge: “Become!”, “Find out!”, “Weak?” Such formulations motivate to take action.

    VALUE

    The most obvious strategy to attract traffic is to communicate the value you offer.

    INTRIGUE

    PERSONAL BRAND

    On large quantities banners you can see the faces of specialists who offer to make your life better. Effective reception to build trust.

    ILLUSTRATIONS

    If personal branding isn't your thing, grab attention with a strong illustration and character. See how it works.

    MEM

    IN lately specialists in private chats, newbie targetologists, SMM specialists, as well as entrepreneurs who are trying their hand at V promotional posts, very often they ask the question “what size is needed? for a promotional post?. That is why, using examples, I decided to describe in detail what format should be banner for promotional post, so that it is displayed beautifully and as voluminously as possible on PCs, mobile phones and tablets. Well, let's go :)

    For a clear example, I will compare two banners with sizes 1280*720 and 800*525. Yes, by the way, the size and quality of the banner can be different - the most important thing here is the proportions. So, here's what such a banner looks like in the news feed on different devices:

    PC - OLD DESIGN VKONTAKTE



    As you can see, a banner with a size of 800*525 on the right has a much larger indentation than when using a size of 1280*720. Although it is wider and covers a larger area for viewing through the news feed. Let's see how these banners will look in the new VKontakte design.

    PC - NEW DESIGN VKONTAKTE


    Well, in the new VKontakte design, both of these sizes differ only in height, while the width remains the same. And, unlike old version VK, we don’t see much indentation on the right. But the 800*525 banner captures a much larger visible area in the news feed than the 1280*720 size - the picture is higher and larger!

    Now let's see what these banners will look like in mobile version VKontakte applications on iOS.

    MOBILE - NEWS FEED


    Just like in the new VKontakte design, a banner size of 800*525 looks much larger (taller) than a banner with a size of 1280*720. And this is a very big plus for the mobile version, because the news viewing area there is small and advertising with this banner size will take over most of it!

    Well, now let's see what a square image will look like in the news feed! For clarity, I will make a table.

    PC - old design VKontaktePC - new design of VKontakteMobile - VKontakte application







    Well, now we are clearly convinced that greater overview they get pictures with a size of 800*525 and higher, approaching a square shape. But! Don’t forget that promo posts also contain text, so when you choose the image size, don’t forget that to view the text on various devices, the picture should not take up all the visible space in the news feed! This is important!

    Since now part of the audience “sits” on VKontakte through the new design, and most through the old one, it is better to use the size 800*525. Yes, we tried and messed around with other sizes, trying to reduce the indentation from the right edge, but it only increased and the smallest indentation (taking into account more viewing via mobile) turned out with a size of 800*525.

    Well, that's all for today. Thank you for your attention and quality promotions! 😉

    Thank you for your attention!

    In the summer of 2016, the developers of the social network Vkontakte finally surprised their users with a completely updated design. To be honest, regulars of this site had a very mixed reaction to the new design, to a greater extent this concerned the owners of communities with a leaked picture as a design (avatar + banner). The distance between the pinned news and the avatar has literally doubled, the banner has become noticeably larger and lowered, and the community thumbnail is now not a square, but a round area - all these awkward moments caused a lot of problems for people who ordered and installed the design for their groups earlier. The only way out in this situation was to rework the old design to meet new requirements while maintaining the concept.

    Although designing VKontakte communities seems quite troublesome (especially when compared with other social networks, where a rectangular cover and a square avatar are generally sufficient), this is actually not entirely true. Next, the requirements for graphic images and, in general, ways to design a group as such will be described.

    The first way to make your community selling and attractive is the standard “avatar+banner+menu” scheme.

    Avatar

    The avatar remained in the size of 200 by 500 pixels (but still better than 400 by 1000 with a margin of quality), although initially, during beta testing of the new design, such a size option as 200 by 300 was considered. The thumbnail is now round, but if this circle is inscribed in a square , then its dimensions will be 200 by 200 pixels, as it was before.

    Banner (pinned post)

    Optimal size banner is 1024 by 680 pixels (with a margin of quality). I’ve come across many variations of the ideal banner size on the Internet, but still, at 1024 by 680, parts of the banner are not cut off when viewed from a computer, from a regular mobile version, or from an Android application. It is also worth noting that the banner is now lower due to the duplication of the community name in the area above the image and the transfer of the posting date from the area under the image to the place under the duplicate name. Another important point- this is the lack of clickability on a banner from a mobile device. Those. From a phone, people will have to click on the link below the picture, rather than on the picture itself.

    Menu

    In terms of menu design and wiki markup, nothing has changed in general. As before, I use a menu width of 606 pixels and any length value. For responsiveness on mobile devices, it is better to layout the navigation inside the table - this way, when viewed on a phone, it is simply proportionally compressed to fit the screen. But if you created a navigation where the items are simply located one below the other, then you don’t have to do this - the table method is only necessary for those types of menus where the number of buttons in a row is more than one. In general, for the convenience of users, it is better not to make menus only in the form of links to materials, but to create wiki pages with a complex structure.

    If you need a single image for design, then first upload an avatar and a banner in the form of a pinned news to some group for experiments. Copy all the data from the sample community into your group: status, name (this is important, because this data is duplicated in the news) and ask the client for a text that will be above the banner.
    After this, you can take a sample using a screenshot, which must be placed in Photoshop.

    There is also such a design method as “cover + banner + menu”. In general, you can leave only the cover and put on it all the most important information. But in any case, the avatar must be set: it will not be visible in the group itself, but the community miniature will be taken from it. The optimal cover size is 1590 by 400 pixels, and you can upload the image using the “Community Management” - “Community Cover: Upload” command.

    Image sizes for VKontakte design

    • Avatar: 200 by 500 pixels (quality 400 by 1000 pixels);
    • Avatar thumbnail 200 by 200px
    • Banner or size of a pinned post in a group: 1024 by 680 pixels, but not less than 510px in width;
    • Menu: width 606px;
    • Cover 1590 by 400 pixels.

    The number of active users and fans of social networks is approaching 100% of the total number of users world wide web. At the same time, the leading position in RuNet is consistently occupied by social network VKontakte. In addition, it is considered the most widespread - more than 150 million registered users, and this does not take into account bots, abandoned and fake accounts.

    This fact could not but be used in advertising campaigns. Today VKontakte offers the most convenient advertising, both for ordinary users, such for advertising agencies. At the same time, VKontakte banners are the most popular. Users effectively use them to develop business and inform about events in community groups:

    1. VKontakte banners

    A VKontakte banner is a static or animated picture with a signature and slogan, which at the same time is a link, by clicking on which you can go to a page with more detailed information about a product, service, or event. This action called " click on the banner».

    Advertising on the social network VKontakte is represented by two banners on the left. However, the profit from them can exceed the wildest expectations. The interesting thing is that you can post not only advertising banners In VKontakte, designed to sell a product/service, but also those that will be of interest to ordinary users.

    This hybrid of professional and user advertising can kill two birds with one stone. Thanks to it, the administration of the leading Russian social network almost doubled the target audience of advertisers:


    Types of advertising on VKontakte

    Conventionally, VKontakte advertising is divided into two types ( by payment method). It can be called target and non-target. If with targeted advertising you pay for clicks on the banner, then with non-targeted advertising you pay for impressions. Moreover, 1000 impressions are much cheaper than 1 click. Whatever you say, with 1000 impressions, the subject will most likely make at least 1 click. Therefore, the second option turns out to be more profitable.

    • Picture. A thematic image characterizing your product/service, social network page, etc.;
    • Name. This could be a loud slogan, the name of the company;
    • Signature. Short entry or unique selling proposition ( if the size of the banner allows it to fit).

    VKontakte advertising rules


    2. Why are VKontakte banners needed?

    In addition to wide audience coverage and high popularity, VKontakte banner advertising has one very important advantage - the possibility of precise targeting. Almost 90% of the success of an advertising campaign depends on the correct settings. After all, you are not interested in all VKontakte participants, but only in a certain part of them.

    VK settings will allow you to independently determine which part of the audience your banner will be shown. There is targeting by age, geography, gender, etc.

    By properly setting up your targeting, you will eliminate unnecessary impressions, thereby optimizing your budget for your advertising campaign.

    As is the case with other advertising platforms, it is important to understand what exactly is worth promoting through VKontakte. The main purpose of visiting a social network is communication and entertainment. From this we can conclude that it is best to advertise consumer goods, which can also give good result advertising conducted for the purpose of lead generation. Almost any highly specialized advertisement on VKontakte is doomed to failure.

    Before inserting a banner, check whether the advertised product/brand has a community, fan group, or public page. Their presence will significantly increase the chances of success of your advertising campaign.

    Also, please note price category. There is no point in promoting products on social networks that cost more than $200:


    3. How to place a VKontakte banner? Cheat sheet for beginners, secrets and tips

    Before adding a banner, follow the “Advertising” link in the page footer:



    Click on " Create an ad" and we see the following list:


    Here you need to choose what exactly you will advertise: VKontakte application (IFrame and Flash), community ( public, group or meeting), video recording ( with a link to the advertiser's website) or external site.

    The last option is the most popular. A link from such a VKontakte banner usually redirects users to landing page (landing page).


    VKontakte banner advertising formats

    There are three types of ads you can use:

    • Picture+text. Here you can place a VKontakte banner 90 by 65 pixels with a title (25 characters) and description (60 characters);
    • Big picture. It is possible to add a banner measuring 90 by 120 pixels without a description and with a title of 25 characters;
    • Exclusive option. Banner 90 by 160 pixels with a title of 25 characters. Its main advantage is that while it is running, no other ads are shown. However, the cost of such advertising is 2 times higher.

    By selecting required format and after loading the data, you should indicate the topic and subsection ( geography, demographics, interests, education and work, as well as additional parameters). IN additional parameters can be clarified operating system, device type, retargeting groups, browser.

    The more accurately it is configured target audience, the better the CTR, and with good traffic, the conversion.

    At the final stage of setup, before making a VKontakte banner, we indicate the payment method ( for impressions or conversions), advertising platforms ( You can additionally select social network partner sites), transition cost. We assign a name to the advertising campaign.

    Click " Create an ad"! And we wait for it to pass moderation. As a rule, within a couple of hours your VKontakte banners will begin to be shown to potential clients. Now your task is to monitor the statistics provided by the VKontakte social network and make timely decisions to improve indicators.

    4. How to insert a banner into a VKontakte group?

    Let's look at how to make a banner in a VKontakte group.

    Step 1. Go to the group page:


    Step 2. In the block on the right, select the item “ Advertise the community»:


    Before making a banner, we determine the format of the banner, transitions or impressions. We save and wait for the banner to pass moderation:


    5. Banner advertising on VKontakte

    Banner advertising on VKontakte often serves as image support and helps promote new brands. However, this does not mean that it cannot be selling or less effective than contextual one. Banner advertising contributes to the formation of a loyal audience, providing pent-up demand. It gradually turns the user into a potential client. If you need to rebrand or enter the market with a new product, VKontakte banners work great for recognition.

    Advertising on Facebook is designed for older audiences; Odnoklassniki covers regions well. At the same time, banner advertising on VKontakte - universal solution, allowing you to promote brands and new products among young people. She works where your potential clients relax, and speaks to them in their language, is in their area of ​​interest.

    When creating banners, it is important to take into account the characteristics of the audience and use features corporate identity. The more professionally a banner is created, the more noticeable and effective it is.

    6. How to create a VKontakte banner for your own website, why is it needed and how can it be used?

    A clickable banner provides a link to any page on the site. When creating it, you should consider the following points. After uploading the banner to the media files of your site, add the code anywhere on the resource. For example, you decide to add a VKontakte banner to the sidebar:

    Go to widgets and add the following code:

    In the “link address” field, indicate the address of the page where you want to redirect the visitor after he clicks on the banner. “Path to image” is a link to the banner. Copy the link to the image and paste it instead of “Path to image".

    Testing is one of the most important stages in the implementation of a successful advertising campaign. When choosing a VKontakte banner for a site, you need to consider creating several headings, images and texts. Analyze statistics and make changes to settings, this will allow you to optimize your advertising campaign:


    7. Creating banners for VKontakte

    You can limit yourself simple image, however, personalization for a specific user and the interactivity of the banner will allow you to achieve high results.

    So, the banner should contain information that arouses interest, a motivator for conversion/click, be beautiful, and have a professional graphic design.

    There are several ways to create banners:

    • Order from a designer;
    • Independent creation in a graphic editor;
    • Usage special programs to create banners;
    • Creation using online services.

    One of the most effective, simple and quick ways is the creation of banners online. For these purposes, you can use a service such as bannerfans.com. Russian-language interface and a large selection of templates will allow you to create an interesting layout.

    In this article, I would like to systematize all my knowledge on designing VKontakte groups based on my experience of interacting with clients and their preferences. Moreover, over the past six months, VKontakte has made many changes that many are not even aware of. I wanted to dwell on some of the innovations in more detail, because among them there are really worthwhile and useful things. We all seem to have recovered from some shock after the VKontakte redesign, and for visible changes The multivariate functioning and content of the group was revealed. So now the design of groups involves a complex procedure that is not limited solely to the graphic component in the form of beautiful pictures. Now owners need to take into account many nuances of building a group structure, depending on the topic of the business and the convenience of users.

    It's mostly about choice. graphic design of two mutually exclusive options, development internal menu, choosing an entry point to the internal menu, understanding the difference between a catalog and a product display, preparing promotional materials to promote the group, using useful applications. But, first things first. First we will look at the basic elements of group design, then we will move on to their interaction in the form of various combinations and then we will talk about some useful tips and subtleties.

    1. Horizontal cover (header)
    Let's start, perhaps, with horizontal cover or hats. VKontakte developers assure us that the cover, due to its size, provides greater maneuverability in providing and visualizing information. Usually, in addition to beautiful picture The header contains the logo, accompanying information, contacts, a call to join the group, and the website address. I have a suspicion that someday covers will be the only thing possible option group design, so I would recommend switching to them immediately in order to avoid force majeure redesigns later.





    How to upload a cover
    To download the cover, you need to go to Community Management >> Basic Information block >> Community Cover >> Upload. Recommended cover size is 1590x400 pixels. There cannot be any working buttons in the header that can be clicked - essentially it’s a picture and that’s it. Today, the cover is visible on mobile devices, and seems to be already visible in applications and clients.

    Wiki tab Latest news
    In the top block under the header there can now be three tabs: pinned post, information about the community and wiki menu (only in groups on public pages there is no such tab). The emphasis is still on the pinned post, but even with its presence, the user will now always have access to information about the community by switching between tabs. For the wiki menu tab to appear (it is initially called Latest News), you need to go to Community Management » Sections » Materials » Restricted (or Open) » Save.

    2. Vertical avatar
    Now let's turn our attention to the good old avatar for a group measuring 200x500 pixels. For now, it is also a way to design a group. Typically, the avatar contains the following information: logo, accompanying text or slogan, contacts, call to join the group. On mobile devices, the entire avatar is not visible, only part of it is visible—the thumbnail. To create a group, you can use either horizontal header(cover) or vertical banner. If there is a header, the vertical avatar is not visible. There cannot be any working buttons on the avatar that can be pressed - essentially it’s a picture and that’s it.

    3. Miniature
    Currently, a vertical avatar is used to create a thumbnail, the minimum size of which is 200x200 pixels. The thumbnail is used in posts and entries in the form of a small circle near the title and in the form of a larger circle in some selections and community mentions. In connection with the transition to a round shape, the requirements for miniatures have become more stringent. In order for the text on the miniature to be fully readable, it must visually not extend beyond the boundaries of the circle.

    How to upload a thumbnail
    The miniature has become a completely independent element, and when using the cover (header) in the design of the group, you now have to make a separate miniature, keep in mind. If the group does not have a header (cover), then to upload a thumbnail you need to click “Upload photo” in the avatar block (top right). If the design contains a header (cover), then to upload the thumbnail you need to click on the circle immediately under the header and select “Upload photo” there.

    4. Banner
    Banner (English banner - flag, banner) - graphic image informational, advertising or promotional. The banner is attached as a picture to the post and can only have one internal link. Many are still convinced that several links can be made from a banner on the main page. This is not true, just one link and that's it. I would highlight the following types of banners.

    4.1 Informational banner
    A common type of banner containing general information about a company, group, service or event with a detailed list of benefits and other accompanying materials. Often used as a pinned post in a group. The size of this banner is 510x307 pixels. At this size, the bottom of the banner coincides with the avatar. If there is no connection with the avatar, then you can use any size. For example, I use the size 600x350 pixels. The square format of 510x510 pixels is also convenient and gaining popularity now - with this size, the banner occupies the largest area possible. news feed.

    4.2 Banner to enter the internal menu
    If we add the catchy inscription “Open menu” to the banner from the previous paragraph, then we will get a banner whose main task is to serve as an entry point to the internal menu. Sometimes they create a decoy in the form of several buttons on a banner, but this is an illusion; when clicked, the user still gets to the internal page, and there each button has its own link. The size of this banner is 510x307 pixels. With this size, the bottom of the banner coincides with the avatar. If the entrance to the menu is not tied to the avatar, then you can make the banner any size, even a narrow button with the inscription “Open menu”. The main thing is that the banner width is at least 510 pixels.

    4.3 Card for repost, promotions
    Recently, cards for reposts or promotions have become especially relevant. Its task is a call to specific action. Basically it’s “Join the group, repost or like and win a prize.” Such banners are used as part of advertising campaigns or promotions both in their own groups and for promotion in other groups. I usually use 600x350 pixels.

    4.4 Banner with gif animation
    After the VK developers did at the beginning of the year larger size For gif images, GIFs immediately stood on par with information banners. For example, on a GIF banner you can show images of several changing products or texts - movement immediately attracts attention. And when the function was added in June autorun gif animations in the news feed, GIFs have become the object of close attention of advertisers and marketers.

    5. Avatar+fixed banner design
    Until recently, this modular design, consisting of an avatar and a pinned banner, was the most popular way to design groups. More details on how to do this design are described in the lesson. With the advent of the header (cover), the popularity of this design may decrease slightly.

    Plus, there is a possibility that VKontakte will again change some parameters of the blocks and then the entire design will fall off, as has happened twice already last six months. So, dear group owners, when choosing a design for your group, take this fact into account. Yes, and one more thing, in mobile devices all the beauty of a single picture is not visible, since the avatar is not displayed, but only a thumbnail, and the pinned post is located just below.

    6. Internal navigation menu
    Menu as active links is located on the internal page of VKontakte and is written using the commands wiki markup. How to create the inner page itself is described in the lesson. Using the menu, the user navigates through the group. Below you will look at the types of internal menus, but for now we will focus on several important points.

    Entry points to the internal menu
    I would like to point out one subtle point that is often not given importance. Sometimes clients order an internal menu from me, but they have absolutely no idea how the user will get to this internal menu. And you can get to it in two ways: either through a pinned banner (see paragraph 4.2), or through a text link in the top tab under the status line (see figure below). Sometimes a text link is also placed in the “Links” block in the right column of the interface.

    Internal menu links
    Typically, when ordering, customers indicate the following menu items: About us, Our products (catalog), Delivery methods, Payment, Guarantees, Reviews, Contacts, Promotions, Discounts, Schedule, How to order, Portfolio, Questions and answers, Info, Place an order. Links from menu items can go to the corresponding sections of the external site. Then the link automatically opens in a new window. Most of the points lead to internal pages VKontakte. In this case, the page opens in the same window and you have to make a link or a “Return to main menu” button.

    Links to albums with photos and videos open in a new window. Links to topics with discussions (for example Reviews), to a dialog box for writing messages, to applications (see point 10), to selection by hashtags (see point 12) open in the same window and in in this case You can get back to the menu only through home page website, or through the “Back” button in the browser. This is perhaps the most inconvenient moment with such links.

    Editing the menu
    Clients often ask me if it is possible to edit the internal menu. My answer is, if you are a confident user and are familiar with wiki markup and editing modes, then you can edit. But if you are not familiar with all this, then absolutely not. In this case, you will simply ruin all the settings.

    I will quote the words of the VKontakte developers themselves. “One simple piece of advice will save you a lot of effort and nerves: work in only one mode. Either it is visual mode or wiki markup mode. It is switching between these two modes while working on the markup that brings most of the problems: pictures may become smaller, various parameters may disappear. This is one of those things that will definitely be corrected in the future, but for now we need to keep this fact in mind.”

    Mobile responsive
    And one more thing about adaptability. To make the internal menu look the same on mobile devices, you need to layout it on tables. Then the image will be rigidly fixed. Otherwise, when the screen size is reduced, the pictures tend to move one under the other, violating the originally intended order.

    Here, again, are the developers’ words about adaptability. "The wiki menu is displayed in mobile browsers, but does not adapt to screen size, which may cause images to look different than they would on a computer. You can find guides online on how to adapt wiki markup to mobile devices, but even they do not guarantee 100% performance on all devices.”

    7. Types of internal navigation menu
    Below are the most common types of internal menus. There are simpler and budget solutions with a high degree of reliability. And there are more complex and labor-intensive designs in terms of graphics and layout. But they look more impressive.

    7.2 Large graphical menu
    In this case, a vertical row of links is located on a large background image and has a rigidly fixed structure. Here's the lesson.

    7.3 Menu in the form of icons, tiles
    This design involves several rows and columns in the form graphic icons and inscriptions for them, or graphic multi-colored or monochrome tiles.

    7.4 Dynamic menu with navigation effect
    A very impressive design that simulates site navigation with the effect of button clicks or other markings of visited links. Such a menu is quite difficult to manage and requires skills in communicating with wiki markup, since you will also have to edit information on pages in wiki markup. Here is a lesson on this topic.

    Read more: