New design vkontakte. New Vkontakte design - horizontal cover of the VKontakte Redesign group

The topic of this article is new design In contact with. Changed again, now you can set a horizontal cover in a group. Making your VK community with such a header is much more interesting. Frankly, no Photoshop knowledge is required here. And you can make a beautiful picture without special skills even in PowerPoint, Fotor, Canva, Pixlr Editor.

Going to the group, you will notice that in those groups the buttons “Pinned entry”, “Information” and “Press menu” have become visible. Before, they were hidden. Naturally, all the design of the groups immediately went.

Downloading a new cover

And now let's figure out how to enable the ability to set a horizontal header. Let's click on the "Manage" button.

Then we click on the last one, and upload a new cover of the VKontakte group. This is where you can understand that the download file can be of any size! But no less than 1590×400 px. We create a cover prototype in any editor. Next, we can select and save the area that meets the requirements of the VC. Here's a hint on where to find the cover image, which editor to use to

What is interesting about the new design of VKontakte?

The main thing: there is more space for information. Now here you can write the name of the group, the purpose of its creation, a call to action, and so on. This design will be logically complete and more functional. But you can leave old design, it's a matter of taste for everyone.

When you design a horizontal cover, you will notice that the internal menu now somehow falls out of the general context. I think it would be better to pin the picture to go to the menu. And use it to host wiki pages in a group.

At the same time, I would like the developers to add some other possibility for setting a beautiful transition to the Wiki page.

It should be noted that since 2016 the developers social network Vkontakte is actively trying to set up this network to promote business. Make it more business friendly. From my point of view, this is very good and very much in demand among many Internet entrepreneurs.

But most importantly, in my opinion, they need to carefully consider the “Bans” system so that entrepreneurs can work calmly without interfering with those users who come to have fun on the social network.

How to make a Vkontakte group cover online

Turn on your creativity and choose what you like the horizontal cover or the already familiar Vkontakte design. Creating online and installing a new cover is visually, step by step, presented in the video below the article.

P.S. I hope this information is useful to you.

P.S.S. Turn on your creativity and good luck in all your endeavors!

Today at the Dribbble Meetup conference, Pavel Shumakov, Lead Designer at VKontakte, presented a new design for the VKontakte website, the company's mobile clients on iOS and Android, and a brand new photo app.

VKontakte chose to continue the intrigue about the new site design and even blurred the screenshot at the presentation. But even this example is enough to give a general impression of the redesign. The site is divided into so-called "islands" - each entry or any other block is visually separated from each other. The width of the site and its font will be increased.

Deadline: until the end of 2015.

Photo application VKontakte


Personally, it was more interesting for us to look at a completely new product from VKontakte - photo application. It's kind of like Instagram. It was announced back at our LIVE Event 2014, but we, like you, saw it for the first time only today, and were impressed. The new application is being developed together with professional photographers. In it, in addition to the obvious features, such as color correction, you can create your own filters and share them with friends. The application is fully synchronized with VKontakte.


Deadlines: we hope to have the app released this summer, because it will be more relevant than ever at this time.

The long-awaited Material Design in the VKontakte Android client. Complete redesign of the entire application. Even our Yabloko colleagues looked at him and became a little envious. It also became possible to order the production of bags with a logo. Now this process will become convenient and fast.

Deadline: soon.

Video catalog and new recordings for iPhone


But iPhone owners have something to rejoice about. They have long received their redesign, which remains relevant even now, so at the presentation we were shown new recordings and, of course, the implemented video catalog. Obviously, these are not the only upcoming changes.

Fast redesign mobile applications and iOS. First concept updates appearance published in official blog"VKontakte", in which, among other things, Knyazev also spoke about the work of designers in the company.
In clients and iOS, the tabbar will again appear - a single navigation bar with tabs at the bottom of the screen, covering the main functionality. By the way, the designers of the social network abandoned it in 2012. In the new design vision, the tabbar includes the main sections of VKontakte: News, Search and Recommendations, Messages, Notifications, and the user menu. Sidebar, judging by the published screenshots, they will completely remove it in the redesign of applications.




In addition to the radically new user interface, the designers of VKontakte with the upcoming update of the appearance will add several functional innovations. In the Search and Recommendations section, rectangular stories of nearby users will appear, as well as a feed of potentially interesting entries from new authors. The lead designer on VKontakte describes the new section as “such a sticky thing, where you can find something of high quality and unfamiliar, taking into account personal preferences.” A view counter will be introduced in the news feed (now it is displayed only when the post is opened), and the likes will turn red.

When will the updated

Runet is poor in redesign reviews of well-known sites and services. This article is not about fixing that. My goal is to discuss with the community a solution to one of the problems of the web version of Vkontakte.

In last year's VK redesign competition, the authors of the competition mentioned problems with the web version. The number one problem they called the narrow width of the site. I agree with the Vkontakte team and decided to build my own solution to combat this problem.

Pain

Problem #1 - Narrow Screen


In addition to the screen width, I identified 2 more problems.

Problem #2 - Different style of web version and apps



Problem #3 - Messenger

Messenger in VK appeared relatively recently. His first version was noticeably out of style and over time this was decided. The main problem of the messenger, in my opinion, is that it lives in parallel with the site. The message window is small. And although it scales, it is tied to absolute coordinates - it is not convenient to use the service. On Facebook, the messenger also lives separately from the site, while spawning many small correspondence windows.



Theory - ways to get wider

Let's first decide what a narrow screen is. The current width of the VC is 791px. In the competition task, it was said to adapt the site to a resolution of 1024px. As I see it, the solution to the problem of a narrow screen will be the interface working at a resolution of 1024-1600px. That is, the interface is capable of working both at a narrow (1024px) resolution and at a wide (1440+px) resolution.

1. Physical stretch

The decision in the forehead - we make the site rubber.

Pros:
+ Easy to implement

Minuses:
− Content becomes unreadable
− It is necessary to completely revise some sections of the site (for example, friends)

2. Parallel presentation

The reception was seen in iA's 2006 Facebook redesign concept - the comments are located to the right of the posts. 5 years ago I tried it on one of my projects.

Pros:
+ Posts are arranged linearly, not broken by comments
+ Comments on posts are immediately visible without additional transitions

Minuses:
− Uneven density of information on the screen
− A version under 1024pc can be created with great difficulty or forced to differ from the wide
- It is necessary to completely revise some sections of the site

3. Sliding panels

An approach that has become popular in web services: CRM systems, task managers. The screen consists of dependent panels. The panels appear to the right of each other, if the screen does not fit everything, then the left panels are hidden as the right ones appear.

Pros:
+ On small resolutions, you can switch panels, on large resolutions, show everything at once
+ Similarity of the interface with the version for tablets

Minuses:
− Not the usual option for web users
− The site is not located in the center of the screen, but on the left
− Large amount of architectural work
− Lack of linear view, you need to click on the news to read the comments

4. Two windows

Interface with two active working sections on the screen.

Pros:
+ Requires few changes to the current interface

Minuses:
− It is not clear how to work with 2 modes at the same time and why

5. Two columns

The information display mode is similar to the timeline on Facebook. The concept based on this variant, won in the VK redesign competition.

Pros:
+ Easy to arrange information
+ Uniform density of data on the screen

Minuses:
− Attention splits when reading the news
− Facebook

6. Cards

Transition from vertical storytelling to grid side. An example is Pinterest.

Pros:
+ Easily scales to any resolution

Minuses:
− Difficult to perceive content (difficult to relearn)
- It is necessary to completely revise all sections of the site

Practice is my decision

I built my solution on the 4th approach: a screen with two active windows. The second window is the messenger. This allows you to chat while reading the news. At the same time, without using 2 browser tabs.

On small (<1440пк) экранах окно чата сворачивается.

If desired, it opens on top of the main content. The scenario of conducting correspondence while reading the news also works.

The user panel itself with the latest correspondence remains on the screen in all sections of the site:

Details behind the scenes

If you look closely at the screenshots, you can see other changes in the interface:

1. Background. There was a background to increase the contrast of the blocks.


2. Division into blocks. Posts were pasted into independent blocks.


3. Likes moved up. Perhaps the most controversial change and probably deserves a separate discussion.

4. The old top menu is gone. All its functions have already been duplicated in the sections of the site. In its place was a tab level. Thus it was possible to reduce one navigation floor. Filters (rarely used item) moved to dropdown list. Another navigation floor is missing.

5. Two modes of viewing friends. One is borrowed from the web version, the other from the tablet. It is difficult to assess which is more popular and more convenient.


6. Personal notes. There was a block of personal notes about each friend. Who liked it, take it here - VK Memos.

7. Web calls. They were already in VK before, but they were made as a separate mode of operation. Now this is an inconspicuous feature that does not interfere with the main surfing and communication.


Instead of a postscript

How can there be a redesign of a social network without a user page prototype.
The current version is overloaded with information: music, videos, groups, publics, photos, photos on the map, photo albums, friends, mutual friends, online friends, subscribers ... I decided to cut off everything superfluous:


That's all, thanks for your attention.

Write about the new design? Well finally!

!!! Attention!!! In general, I immediately warn you that I evaluate design not only as a user, but also as a designer (including those related to the web) and I will write a lot not only about the design itself, but also about why there are so many dissatisfied. And there will be many letters!

About why everything is so unusual:

As soon as the new design with limited beta testing became available on April 1 (because of which everyone doubted the seriousness of the update), I immediately went to the VK blog and connected. After that, he began to jump through all the sections and see what and how there. On the first day, I found about five bugs, which I immediately sent to the administration for correction. They didn’t fix only one that is considered logical (the fact that you can’t send an image to a friend, for example, from a community or a feed and then save it to an album. The logic is that they say they sent it themselves, so why save), but this thing was in the past design.

After that, I posted in my community with a summary of the redesign and a vote. It became interesting how the first users will react. Most complained about not being able to find some functionality, such as a toggle switch in messages (which is easy to find if you hover the mouse over the edge of the dialog box). Yes, such interface elements are very unusual against the background of everything that has been in RuNet lately. But this is not a problem with the new design. This is the problem of the design thinking that has been formed in Runet in recent years. We very rarely make progressive and good (!) design that becomes more convenient and evolves smoothly and evenly, allowing the user to get used to new elements that are more intuitive and correct in terms of UX (user experience is that part of interface design that is responsible for accessibility user and convenience). Instead, we have sharp jumps in the most progressive developers, which cause a wave of misunderstanding on the part of users. And all this against the backdrop of a huge number of sites with a terrible design, which is inconvenient but just plain familiar. And all because sites are usually made either cheaply or according to the principle "that's how they need it." Those who have the potential and can create progress simply do not work for the money that is offered in RuNet, and go to do good and expensive work for foreign guys. This is all very sad, and that is why the introduction of a new VK design resembles the baptism of Russia. But after a while, users will get used to it, remember where something has changed and understand that everything is not so bad.

About the fact that "mow under Facebook, well, at least the feed without other people's likes!".

The fact is that design is evolving and so far it is considered optimal, which is also called the design of forms and content. It was developed not so long ago by Google and many have picked it up.

Everything in it is based on proportional elements and accents, which makes it very simple and understandable in the skillful hands of the developer. Here are all these panels with a profile leaving from the left in applications, for example, - that's all it is.

Let's remember how the same phones looked 10-15 years ago. Each Nokia model was something completely new: all these slide-out panels, screens that fold out in all directions, the craziest keyboard layouts - it was all very cool. At the same time, I don’t remember complaints about a lack of understanding of new products, because everything was so new, interesting and cool!

But with progress, everything came down to a simple plate with a button on top and two on the side (or three on the back like LGE). Now the product is either like someone else's, or new and not understandable. Now there is no point in reinventing the wheel, especially if it is less convenient than the one that already exists. It's just that now the design of devices and interfaces, web design have come to an optimum and it is becoming increasingly difficult to do better. Large manufacturers are not so stupid that they copy from each other, they are so literate that they accept the rules that determine convenience, and they finally came to a common concept.

The same goes for social media design. Developers are the last thing they want to be told they stole the design. No. No one will judge you if you make a chair like thousands of other chairs. Ikea does just that: they make painfully banal, but simple and good things. Then what is the problem with web design?

Now here is my subjective "think" about the newest VK:

Got better. Here's the truth. The old version has changed so little that it already looks more like the old thematic forums from the 2000s than a modern social network. Now the mobile version and applications began to have a lot in common with the site. It's wonderful. There is a logical connection between them. In the communities, these ugly multi-story avatars disappeared for half a page with "Subscribe" and so on. Now you can check alerts with a click without leaving the page, it's just likes and replies, not a graph for a separate contemplation. Photos with answers now complement each other when opened, and do not go down to infinity.

About messages: I communicate a lot on VK (5-20 dialogues a day) and this new format makes me very happy. Those who are not satisfied can easily switch to the old format by clicking on the gear at the bottom of the screen and changing the settings. Everyone should be happy, right?

At the same time I agree