VKontakte logo and VKontakte Avatar. What is the difference between a group logo and a group avatar? How to properly set up a VKontakte group - basic elements and useful tips

Hello friends! Today I would like to discuss with you a very important topic - website logos. A logo is not just a business card, it is the face of a company, company or even a website. Agree, we trust branded things, even if we don’t know what kind of brand it is and where it came from. A beautiful picture speaks of solidity, which means its owner can be trusted.

Internet resources, if they want to attract the attention and trust of users, must have their own memorable logo. But how can you make a logo for a website yourself if you don’t have a good designer or program at hand that can help or even perform this task automatically? This is exactly what I would like to talk about today. We will learn how to create a logo ourselves online, using the appropriate services, of which there are already quite a lot on the Internet.

As you know, the logo was first used by large and small large companies with the sole purpose of distinguishing your product from the gray mass of competitors’ analogues. People like signs much more than words, which is why a good quality picture can attract more attention than a high-quality slogan. It was used 100 years ago and is still used today. Including on the Internet.

What should the resource name be? There are some tips on how to create a logo in a way that makes it work. Before discussing them, let's discuss the types of logos found in virtual spaces.

Text

Perhaps the simplest option. Most often, such a sign represents the name of a blog or resource. Making a logo yourself in this case is not so difficult. All you need is a little design talent, because the basis - the inscription - is already there.

Symbolic

The complete opposite of the first one. In this case, no information, just a beautiful and memorable image. For anyone’s imagination there is simply an endless testing ground here. But it must be said that the picture does not have to be static. Some logos can even move.

Combined

This is some mixture of the first and second options. Here it is very important not to overdo it and maintain parity between graphics and text. Balance is the most important factor. This is why creating a combined logo yourself will be a difficult task. But with a little knowledge and good service it's not that difficult.

The question may immediately arise, which option to choose? I’ll say right away that there is no difference. Of the logos you see here, all are known and remembered. Therefore, the type of logo is not as important as the quality of its production. And here it is worth considering the following tips:

• The icon simply has to speed up the development of the project. If adding it doesn't change anything, then it's better to try something else.
• It must be original and unique. You should not attract negative attention from various anti-plagiarism activists. Black PR will not help the resource.
• The logo must be remembered the first time. Visual memory is the best tool to retain the user.
• It must be said that you can memorize in different ways. Both negative and positive. If you really want to create a logo yourself, it’s better to make it so that it doesn’t irritate.

Now we are full of theoretical knowledge about these mysterious icons. It's time to try creating one of them. Let's start by creating a text one.

Creating text logos

As I already said, we will use those services that are on the Internet. It’s stupid to talk about everyone, so here are a few of the most interesting ones in my opinion.

1. Service Creatr.cc

The resource is in English, but its interface is quite simple.

So, for our convenience, I divided the work area into several zones. In the first, we choose the general style of the future logo.

Zone No. 2 is responsible for the inscription itself. I want to warn you that this resource is not very friendly with the Cyrillic alphabet.

In the third piece of the page we select technical specifications main inscription. IN in this case these are the two colors of the characters and the overall appearance.

The fourth area is responsible for the small icon following the inscription. You can also place text in it by choosing its color. The geometric shape of the icon is also set here.

The fifth block, I think, is clear to everyone. We're talking about the background here. In addition to color, you can experiment with transparency.

In the sixth block we have buttons for setting various visual effects. If they are not needed, then they can be disabled without much difficulty.

At first glance, the service seems quite complicated, but in fact, making a logo yourself with its help is quite easy.

2. Cooltext.com

Here everything is a little more complicated, but for us this is a plus, because you can create something very original. As soon as the address hits the desired line, we are taken to a page where we will need to select the general style of the icon.

Having chosen one, go to new page, where we will create the image we need.

Everything is very simple here. We write line by line the right message, select its color, size, 3D effect and its properties, if any, color background and others technical parameters. Some of them will be selected separate page, for example, the type of font. Everything is very simple and clear. To get the logo into your possession, you will have to download it. Click the button at the bottom of the form and go to the page where you can upload the created image.

3. Grsites.com service

A little more complex, but quite digestible service. Here you immediately need to select a static or “live” icon we will create.

Static ones come in both color and black and white. We choose, for example, a color one and start creating our logo.

I recommend starting immediately with the second area where you can print required text and give it the desired effect. The remaining two areas below are responsible for selection the desired font and giving the inscription the desired effect. The last block allows you to select the icon format and its quality.

Let's return to the first block.

Here we have the color and condition adjustments gradient fill. I won’t talk about how a vertical gradient differs from a horizontal one. Everything is simple enough to figure out on your own.

I must say that I consider this service to be one of the most difficult, although for some it may turn out to be the most convenient. You can also create a logo yourself using it.

Well, the last thing we’ll look at when talking about text logos is button logos. It is very convenient to make them, and there are also countless services offering services for their creation. Here is one of them:

4.Flamingtext.com

Elementary. At the top we see a line indicating exactly what stage of creation we are at. StepbyStep we create the desired picture by selecting the desired style, font, color and other effects. Perhaps the simplest and most thoughtful service.

5. Dabuttonfactory.com service

A simple website editor that allows you to make a logo for a website very quickly and without much effort. On the left side of the screen there are buttons for changing the text of the logo button. We select the font, size, distance from the text to its shadow, if any. And, of course, we write the text information we need.

On the right side of the screen is the background editor. The choice of button shape here is not great and comes down to choosing the roundings of a standard rectangle, but still. Here you select the fill (one-, two-color or gradient) and its color. In this way, mass-produced and almost identical button logos are produced.

Well, the last way to make a logo for the site yourself is to use it for everyone famous program Photoshop. It is absolutely pointless to talk about how exactly something is created in it in this topic. If you can use the program, you will create a logo quickly and without problems. If not, then learning Photoshop can be stretched over 10 or even 20 full lessons. By the way, you can create a graphic or combined logo in it.

Such a process can be divided into several simpler stages. We determine the shape of our logo, its color, the font of the inscription and other little things before we start working. Believe me, it’s better to draw exactly when you know in advance what you want to get in the end.

If we talk about where to get ideas for creation, then I advise you to pay attention to already existing and popular logos. Same Coca-Cola or Playboy. Simple but very memorable, they are the perfect embodiment of a logo that will be remembered 200 years from now.

But this is an option more likely for artists than webmasters. You and I, mere mortals, would be better off using some clever service taken from the Internet. Well, that's what we'll do.

Creating a graphic logo

Service Onlinelogomaker.com

The first difficulty is to find the desired button go to the editor itself. You should be able to find it, especially if you pay attention to the red text below. Click the link and you will be taken to the editor page.

The essence of creating a picture comes down to two simple procedures. We select a picture and edit it, then create an inscription and edit it, if necessary. Tools can be found on the left side of the screen. Basically, our logo is ready. It's very simple and quick way create some pretty unique picture and use it for your own purposes.

Of course, no one canceled Photoshop. Do you know how to draw or edit an image already drawn by someone? The cards are in your hands. But here we will be talking about serious and even long hours of work. You can create a truly unique and stunning logo if you only have talent and a little perseverance.

Order a logo from specialists

Here I would highlight one resource - the domestic analogue of foreign logo generators.
Everything is quite simple here. You choose the area of ​​your business or the theme of the site, enter the company name and that’s it - the system itself will generate several dozen ready-made logos.
After selecting the desired logo, you can edit it - change the color, font, position of elements, add a shadow, etc. If you are satisfied with everything, then you can immediately proceed to downloading the logo.
But there are two options: download the logo for free in a small extension or in a large one (but for a fee that is set on the site).
In general, it's up to you. The service is notable for its speed, support for the Cyrillic alphabet and pretty good logos, but nice logo you will have to pay =). Although you can cheat - download a small logo and redraw it in Photoshop, changing the dimensions to the required ones. You can also create business cards and corporate forms in logaster.ru. For example, here's what I did for my site:

If you have no desire to create a picture or want to do this good specialist, then get ready to spend a little. I won’t talk about any design studios where the price of creating a logo borders on the stratosphere. We are simpler people, and therefore I suggest you turn your attention to freelancers. These useful people accumulate on all kinds of freelance exchanges. The main thing is to learn how to clearly and accurately set the task. It is quite difficult to explain to a person how you want the logo to look, because if you imagine a picture, then you will make it yourself. But the general direction will have to be set. Color, general style, possible image options - it’s better to think through all this before you contact a specialist. I bet many people are interested in the price of the issue. It is quite difficult to determine the scope, but on average, the procedure for creating a unique logo can cost 500-2000 rubles. It all depends on the complexity and, of course, the level of professionalism of the specialist.

(4 ratings, average: 5,00 out of 5)

Today we will find out the current avatar size for the VKontakte group. After reading the article, you will not only get the answer to this question, but you will also be able to download PSD template beautiful avatar and banner, made in the same style.

Taking into account everyone latest changes The maximum displayed avatar size for a VKontakte group is 200×500 px. It is worth noting that to obtain maximum quality you need to upload an image 2-3 times larger in size. Then the loss of picture quality will be less noticeable after uploading it to VK.

The main rule is to maintain the proportion of width to height: 2 to 5, respectively.

You now know the size, all that remains is to figure out when you should use the entire available height, and when you can make your avatar smaller. And this depends on several factors:

• Topic or niche;
• Product/service offered;
• Design

If you have a low-competition niche that is understandable to everyone, then it will be enough to place a logo, company name and sometimes a short explanation of your activities.

Titles Overheard | Ufa" or "Sports News | Ufa" does not need explanation - everything is clear. But the image of the logo with the name of the online store needs an explanation indicating the product that is sold there: “online children’s clothing store.”

Depending on the specifics of the product offered or service provided, additional space for benefits may be needed. By listing conditions that are beneficial to the client, you can stand out from your competitors. But because of them, the size of the avatar will have to be increased.

I don't think this is bad. If something helps increase conversions, you need to use this opportunity.

By playing with the design, you can get a completely beautiful and working version of your avatar maximum size, while placing a minimum of details on it.

This approach is acceptable for entertainment communities or groups of private photographers. And commercial communities with high level competition should make the most of the available avatar size.

Avatar and banner template

We have created a template that you can download from the link below. With it, it’s possible to make a professional avatar yourself, but it won’t be unique. While this doesn't mean it won't work, it may be worth considering individuality and reading our bonus offer.

Bonus

We offer a discount of 200 rubles to everyone who has read the article up to this paragraph and decides with us. When ordering, please include this code in the body of your email: HWC-DEZiGN-200. The code is only valid for one of your orders.

In this article we will look step by step at how to properly create, configure and properly design the VKontakte community.

Community creation

You can create a VKontakte community by going to the “groups”, “management”, “create community” tab.

Type of community and topic

First, you will need to decide on the type of community, depending on your goals, and choose the topic of the community.

Group registration

After choosing the type of community, you can move on to the most important thing, this is the design. The design of your community is a kind of business card of the company; depending on how high-quality the design is, your potential subscribers will draw conclusions about your work.
You can download the cover by going to “settings”, then clicking “download”.

On the cover you can place:

• Name
• logo
• motto
• contact information
• promotions or call to action
  Important point: the cover is the first thing a client will see when they go to your group, so the cover should be bright and attract attention.

Cover in the MTS community

Cover in the Tinkoff Bank community

Cover in the HeadShot community
Image sizes for designing the VKontakte community.
Cover size for VKontakte group 1590x400px
Avatar thumbnail size is a circle with a diameter of 200px

Also, VKontakte recently introduced dynamic covers for communities.
Dynamic covers have very rich functionality, with which you can display the last subscriber, the best commentator on the cover, set the background to change at your request, add a weather widget, time and much more.

Community Description

In the description, the main thing is to describe as briefly as possible the main advantages of the company.
Important point: there is no need to describe everything that your company has done, is doing or will do. No one will read a long description. You have a few seconds to attract attention before the client starts looking at posts on the community wall. Therefore, the description should contain only key points that reflect the essence of the community/company.

Lifehack: In order to make a description of the community in more detail (with photos, links and beautiful layout), you need to put a wiki post in the pinned post, in which there will be bright picture and a call to action.

Examples of wiki posts:

Group avatar

The community avatar is an important detail in general construction quality design, in this article we have highlighted several very important points, which need to be taken into account when creating a community avatar.
Taking into account the fact that now they mainly use community covers, the avatar itself in the group is displayed as a miniature. Therefore, here we will talk about how important it is to design the avatar miniature. As mentioned above, the avatar thumbnail size is a circle with a diameter of 200px.

1. 1. Text
      If you place text on an avatar thumbnail, it is important that it is large and does not extend beyond the avatar.
   2. Understanding
      It is necessary to place an image on the avatar that will make it clear what is depicted.
   3. Minimalism
      To make your avatar look relevant, you can make it in a minimalist style: fewer words and unnecessary elements that carry virtually no semantic meaning. The avatar thumbnail must be as simple and readable as possible.
   4. Attract attention
      So that the avatar miniature attracts attention. You need to design it so that it is not too white and boring, otherwise it will get lost against the background of the more colorful avatars of competitors.

What should I put on my avatar thumbnail?

Let's consider options for using an avatar thumbnail to attract subscribers to the community.

Community Settings

By going to the “community management” tab, you can come up with a short page address and indicate additional information.

Next, in the “links” tab, provide links to your page on other social networks and a link to your website.

In the “sections” tab, enable the necessary ones. It is more convenient to set up a limited community wall, so as not to rake it in the future from posts by spam bots.

Include products if your community is for selling products or services.

You can also add applications to the community and customize them for your purposes. For example, the Applications application is the most convenient for working with leads. This is online registration and acceptance of orders. Or, for example, the “Maps” application, with the addresses of your stores, offices, events. Using the Buy Ticket application, you can sell tickets to events directly on the community page, i.e. subscribers/customers will be able to buy a ticket without going to your website.

Wiki menu - beautiful and informative

This is another way to show the uniqueness of your community, attract the attention of customers, and also structure services, products and all information about the page. Plus, using the wiki menu, you can set up direct links to go directly to the company’s website.

Wiki menu examples:

You can see a detailed guide to creating a wiki menu here -

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, developing an 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 design elements of the group, then we will move on to their interaction in the form of various combinations and then we will talk about some useful features 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
The top block under the header can now contain three tabs: pinned post, information about the community and wiki menu (only in groups; there is no such tab on public pages). 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 possible area in the 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. At this size, the banner at the bottom coincides with the avtar. 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
IN lately Cards for reposts or shares 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 have absolutely no idea how the user will get to this very 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 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 responsiveness
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 words of the developers 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.