Jak zrobić nagłówek na stronie publicznej. Projektowanie społeczności VKontakte: najbardziej szczegółowy przewodnik w RuNet dla strony grupowej lub publicznej

Jewgienija Kryukowa

*Aktualizacja artykułu.

Piękny design społeczności VKontakte to nie kaprys, ale ważny element budujący zaufanie użytkowników do Ciebie i Twojej firmy. Jeśli publiczna strona lub grupa została zaprojektowana nieprofesjonalnie, Twoi potencjalni klienci mogą całkiem logicznie dojść do wniosku, że jesteś równie zaniedbany w swojej pracy. Aby temu zapobiec, upewnij się, że Twoja strona VKontakte jest piękna, schludna i łatwa w obsłudze. Jak to zrobić? Czytaj poniżej.

Nie masz czasu i ochoty na zrozumienie tematu? Zamów projekt mediów społecznościowych od TexTerra. Opracujemy dla Ciebie jedną koncepcję i udostępnimy gotowe szablony w formacie .psd.

Aktualne rozmiary obrazów VKontakte

Jakiś czas temu twórcy sieci społecznościowej VKontakte wprowadzili nowy projekt. Doprowadziło to do zmian w wielkości i zasadach wyświetlania obrazu. Notatka, która zostanie podana poniżej, odpowiada wszystkim innowacjom i zawiera aktualnie istotne rozmiary.

Teraz przyjrzyjmy się bardziej szczegółowo każdemu punktowi.

Rozmiar awatara VK

Minimalny rozmiar awatara to 200 na 200 pikseli. Jeśli spróbujesz przesłać obraz o szerokości lub długości mniejszej niż 200 pikseli, pojawi się następujący błąd:

Maksymalny rozmiar awatara to 200 na 500 pikseli. Ale w zasadzie można przesyłać większe obrazy – do 7000 pikseli z każdej strony. Najważniejsze jest to, że współczynnik proporcji nie przekracza 2 do 5.

Pokażę ci na przykładzie.

Mam obraz. Jego rozmiar: 200 na 800 pikseli (stosunek 2 do 8). Przy ładowaniu nie ma żadnych błędów. Jednak nadal nie mogę użyć tego obrazu, ponieważ „Kontakt” nie pozwala mi na jego całkowite wybranie.

Okładka

Rozmiar okładki pełnej wersji serwisu wynosi 1590 na 400 pikseli.

Uwaga: w wersji mobilnej i aplikacjach nie wyświetla się pełna wersja okładki, a jedynie jej część o wymiarach 1196 na 400 pikseli. Zobacz, jak jest przycinany w aplikacji mobilnej:

Aby temu zapobiec, umieść główne elementy okładki w wymiarach 1196 na 400 pikseli.

Załączone obrazy

W zaktualizowanym projekcie Kontaktu szerokość kanału informacyjnego została stała. Oznacza to, że obrazy dołączone do postu nie są już rozciągnięte, ale pozostają takie, jakie są. Dlatego jeśli chcesz, aby Twój obraz zajmował całą przestrzeń w aktualnościach, jego szerokość musi wynosić co najmniej 510 pikseli. Najlepiej, jeśli jest to kwadrat lub prostokąt w orientacji poziomej.

Brzmi to trochę zagmatwanie :) Pokażę Ci więc na przykładzie.

Załóżmy, że mamy obraz w kształcie kwadratu o bokach 510 pikseli. Jeśli dołączymy go do naszego wpisu, będzie on bardzo dobrze wyglądał w aktualnościach na wszystkich urządzeniach:

A tak wygląda obraz poziomy w orientacji poziomej (szerokość 510 pikseli):

Jak widać, im węższy obraz (na wysokość), tym mniejszy wygląda w kanale smartfona. Aby to zobaczyć, spójrz na zdjęcie poniżej:

Oczywiste jest, że różnica tutaj nie jest szczególnie krytyczna, a użytkownicy smartfonów nadal będą patrzeć na Twój obraz, tyle że w drugim przypadku będą nieco bardziej komfortowi.

Obrazy do postów z linkami

Wszystkie te dane pochodzą z kodu znaczników Open Graph:

Jeśli nie określono opcji Open Graph, tytuł zostanie pobrany z metatagu Title, a obraz z artykułu. Jednocześnie możesz to łatwo zmienić - lub wybrać inny obraz z artykułu za pomocą specjalnych strzałek:

Lub prześlij swój:

Minimalny rozmiar obrazu, który możesz wykorzystać jako ogłoszenie w swoim artykule, to 537 na 240 pikseli. Można jednak przesyłać większe obrazy, pod warunkiem zachowania proporcji.

Obraz artykułu utworzonego w edytorze

Rozmiar obrazu okładki artykułu utworzonego w edytorze wynosi 510 na 286 pikseli. Lepiej, jeśli jest ciemny i mniej więcej monochromatyczny, ponieważ nazwa artykułu i społeczności gubi się na jasnym tle.

Dobry przykład:

Niezbyt dobry przykład:

Rozmiar zdjęć i filmów dla historii

Rozmiar zdjęć to 1080 na 1920 pikseli. Rozmiar wideo wynosi 720 na 1280 pikseli.

Specyfikacje techniczne nagrań wideo:

• do 15 sekund;
• nie więcej niż 5 MB;
• kodek h.264;
• Dźwięk AAC.

W relacjach muszą znajdować się zdjęcia i filmy w formacie pionowym.

Uwaga: historie w imieniu społeczności mogą obecnie dodawać tylko duże społeczności, dla których programiści VKontakte otworzyli tę funkcję. Odbywa się to za pomocą oficjalnej aplikacji. Nie można tego zrobić z poziomu komputera.

Przykłady dynamicznych coverów:

Okładka + opis społeczności + link do strony internetowej

Niektóre firmy specjalnie nie przypinają żadnych postów w nagłówku, aby użytkownicy mieli możliwość zapoznania się z podstawowymi informacjami o stronie i od razu przejść do serwisu.

Opis z hashtagami

Niektóre firmy dodają do standardowego opisu strony hashtagi, które ją charakteryzują. Dzieje się tak, aby strona miała wyraźniejszą trafność i dzięki temu znajdowała się wyżej w wyszukiwaniu odpowiednich zapytań. Szczerze mówiąc, nie wiem, czy ta metoda działa, czy nie. Nie widziałem żadnych przypadków na ten temat, więc jeśli ktoś wie, byłbym wdzięczny za udostępnienie linku.

Przypięty post informujący o czym jest strona

Jeśli chcesz opowiedzieć o swojej stronie bardziej szczegółowo (ze zdjęciami, linkami i pięknym układem), możesz dołączyć do nagłówka post na wiki lub artykuł utworzony w edytorze, z jasnym obrazkiem w ogłoszeniu, który zachęci użytkowników aby na to kliknąć. Przykład takiego wpisu:

A oto co widzi użytkownik po kliknięciu w link:

Nowe menu linków

Nie tak dawno temu programiści VKontakte w końcu zadowolili właścicieli społeczności nowym narzędziem, za pomocą którego można tworzyć menu - szybko i bez żadnych kłopotów ze stronami wiki. Wygląda dość prymitywnie, więc powiem Ci też, jak stworzyć piękne menu.

Menu pojawia się automatycznie, jeśli korzystasz z aplikacji społecznościowych lub masz podłączony sklep. Na przykład na poprzednim obrazku wszystkie trzy pozycje menu są łączami do aplikacji. Tutaj możesz dodać swoje - dla ważnych postów, albumów, dyskusji itp., aż do 7 sztuk (nie licząc aplikacji). Linki można jednak umieszczać wyłącznie w obrębie sieci społecznościowej, z wyjątkiem stron typu wiki.

Aby edytować menu, kliknij „Dostosuj” w prawym górnym rogu widżetu:

Aby dodać element menu, kliknij opcję Nowe łącze.

W oknie, które się otworzy, wybierz zdjęcie tytułowe (minimalny rozmiar – 376x256 px), wpisz nazwę pozycji menu (ważne, aby nie przekraczała 20 znaków ze spacjami), dodaj link i kliknij „Zapisz”.

Jeśli chcesz ukryć aplikację w menu, zmienić jej tytuł lub okładkę, kliknij „Edytuj” obok odpowiedniej pozycji. To samo można zrobić z innymi linkami, które zostały dodane ręcznie i wymagają poprawek.

Dane wyjściowe powinny wyglądać mniej więcej tak:

Menu grupy jest otwarte

Menu otwarte nazywam menu, które natychmiast pokazuje, z jakich elementów się składa. Oznacza to, że obraz ogłoszenia w poście na wiki całkowicie powiela jego treść. Dzięki temu użytkownicy od razu widzą, co ich czeka w środku. Pokażę ci na przykładzie.

Tak wygląda przypięty post w nagłówku strony Flatro:

Menu grupy jest zamknięte

Zamknięte menu to ten sam post na wiki, co w poprzednim akapicie, tylko ogłoszenie zawiera obraz bez elementów menu. Zwykle piszą na nim: „Menu”, „Menu nawigacyjne” lub „Nawigacja po materiałach publicznych”.

A oto co widzimy po kliknięciu:

Nawiasem mówiąc, warto zauważyć, że nie są to jedyne opcje. Zasadniczo możesz napisać na tym obrazku, co chcesz. Najważniejsze, że użytkownik chce na to kliknąć i rozumie, co go potem czeka. Przykład:

Połączone menu dla grupy

Połączone menu ma miejsce, gdy obraz w ogłoszeniu menu tworzy jeden obraz z awatarem. Poniżej szczegółowo opowiem Wam jak zrobić takie menu, a na razie tylko spójrzcie jak pięknie wygląda.

Czy chcesz pięknie zaprojektować swoją społeczność VKontakte, ale nie masz niezbędnych umiejętności? Rejestracja zamówienia w naszej firmie. Przygotujemy dla Ciebie avatar, okładkę, szablony nagłówków, menu i podglądów produktów.

GIF i awatar na jednym obrazie

Ale ta opcja projektowania kapelusza naprawdę mnie zachwyciła. Automatycznie odtwarzany GIF łączy się z awatarem w jedną kompozycję i przyciąga uwagę użytkowników, mimo że nie ma o nim żadnych informacji.

Swoją drogą, ten przykład zauważyłem w grupie marketera SMM Siergieja Szmakowa. Wyrażam mu zatem wdzięczność za znalezisko :)

Ukryte menu

Ukryte menu jest dostępne tylko dla grup (strony nie mają tej funkcjonalności). Aby go zobaczyć należy kliknąć w odpowiedni link. Zaletą tej metody projektowania jest to, że użytkownicy mogą zobaczyć główne informacje społeczności, a jeśli chcą skorzystać z menu, wystarczy jedno kliknięcie. Jest tu jednak mały minus – nie wszyscy użytkownicy wiedzą o istnieniu tej funkcji, przez co Twoje menu może zyskać mniej uwagi, niż gdyby było przypięte na górze strony.

Automatyczne odtwarzanie wideo

Pod koniec listopada 2015 r. W sieci społecznościowej VKontakte pojawiła się ciekawa innowacja - gdy tylko użytkownik odwiedzi Twoją stronę, wideo dołączone do nagłówka zaczyna się automatycznie odtwarzać. Dzięki tej technice możesz jeszcze bardziej przyciągnąć uwagę użytkowników (zwłaszcza tych, którzy odwiedzili Twoją stronę po raz pierwszy), a jednocześnie nie irytować tych, którzy nie lubią narzucania im treści, bo wideo odtwarza się bez dźwięku i praktycznie nie przeszkadza.

Jak dodać taki film do nagłówka swojej strony?

Aby to zrobić, muszą zostać spełnione trzy warunki:

• Dołącz film do posta i przypnij ten post na górze społeczności.
• Poza filmem do nagrania nie należy dołączać niczego innego. Opcjonalnie tylko wideo i tekst.
• Film należy przesłać do VKontakte - odtwarzacze innych firm nie są obsługiwane.

Post, który zyskuje dużo udostępnień

Innym sposobem produktywnego wykorzystania miejsca w nagłówku strony jest przypięcie w nim jednego z Twoich najskuteczniejszych postów – takiego, który otrzymał już i nadal otrzymuje dużą liczbę polubień i udostępnień. Dlaczego to robić, myślę, że wszyscy rozumieją - im więcej repostów, tym większy zasięg, tym więcej subskrypcji otrzymuje strona.

Zapowiedzi o nowych filmach, albumach, wydarzeniach

Prezentacja nowych produktów/usług

Rabaty i promocje

Obudowy, recenzje klientów

Reklama aplikacji

Praktyczne żarty

Zasady społeczności

Linki do innych sieci społecznościowych

Nie wymieniłem wszystkich opcji projektowania nagłówka. Zasadniczo na stronie tytułowej i przypiętym poście możesz umieścić dowolne informacje: oferty pracy, ogłoszenia, linki do najlepiej sprzedających się produktów itp. Nie ograniczaj się więc do powyższych przykładów. Użyj swojej wyobraźni i wykorzystaj projekt swojej społeczności, aby osiągnąć swoje cele.

Jaki powinien być awatar?

Avatar to nie tylko piękny wizerunek z logo Twojej firmy, ale narzędzie pracy marketera, dzięki któremu osiąga swoje cele. Przyjrzyjmy się szczegółowo, jak powinna wyglądać, aby przykuć uwagę użytkowników i zachęcić ich do wykonania docelowej akcji. Zacznijmy od miniatury.

Miniaturka awatara

1. Tekst na miniaturze awatara powinien być wystarczająco duży, aby można go było przeczytać.







2. Tekst nie powinien wykraczać poza miniaturę.







3. Użytkownicy powinni rozumieć, co jest widoczne na awatarze.







4. Jeśli to możliwe, lepiej nie korzystać ze zdjęć stockowych, gdyż często obniżają one wiarygodność firmy.




5. Niepożądane jest, aby miniatura awatara była zbyt wyblakła i nudna, w przeciwnym razie zostanie utracona na tle jaśniejszych awatarów konkurencji.



6. Jeśli chcesz, aby Twój awatar wyglądał nowocześnie, uczyń go minimalistycznym stylem: mniej tekstu, cieni, gradientów i elementów nie niosących żadnego obciążenia semantycznego. Twój awatar powinien być tak prosty i schludny, jak to tylko możliwe. Ten styl jest obecnie na topie.







7. Jeśli Twoim celem jest przyciągnięcie uwagi użytkowników i wyróżnienie się na tle innych awatarów w kanale, będziesz musiał użyć swojej wyobraźni. Zastanów się, na co sam zwracasz uwagę, szukając ciekawych społeczności? Na przykład nie raz przyciągnęły mnie awatary z płonącym światłem, co zwykle oznacza, że ​​nadeszła nowa wiadomość. To bardzo stara technika, ale z jakiegoś powodu wciąż na mnie wpływa – gdy zobaczę takie światło, na pewno nie spuszczę z niego wzroku.

Nie twierdzę, że ta technika zadziała na Twojej stronie. Chcę podkreślić, że istnieje wiele, wiele sposobów na wyróżnienie się, wystarczy zadać sobie pytanie i wykazać się odrobiną kreatywności. Oto na przykład kolejny ciekawy pomysł, na który sam bym nie wpadł:

Awatar to czarne kółko: duże i małe. Wydawałoby się, po co to w ogóle robić? Ale kiedy przewijasz listę społeczności, takie awatary przyciągają uwagę, ponieważ bardzo różnią się od wszystkich pozostałych.

Jakie informacje można umieścić na miniaturze awatara?

Mimo że miniatura awatara jest bardzo mała, można (i należy) jej użyć, aby przyciągnąć obserwujących do Twojej społeczności. Jak to zrobić? Przyjrzyjmy się kilku opcjom:

Ogłoszenie nowego produktu/usługi/wydarzenia

Zalety firmy/usługi/strony

Numer telefonu firmy

Korzystne ceny

Darmowa dostawa

Swoją drogą bardzo często do samej nazwy grupy dodawana jest informacja o tym, że firma zapewnia darmową dostawę, aby użytkownicy na pewno zwrócili na to uwagę.

Magazyn

Zawody

Wakaty

Jaki powinien być sam awatar?

Przyjrzałem się jaka powinna być miniaturka awatara i jaki tekst można by na niej umieścić. Przejdźmy teraz do samego awatara. Pełna wersja awatara będzie wyświetlana tylko w społeczności, w której nie jest zainstalowana okładka. Właśnie dla takich przypadków napisałem ten rozdział. Jak zatem powinien wyglądać awatar Twojej społeczności, aby użytkownicy od razu zrozumieli, że Twoja firma podeszła do tworzenia strony odpowiedzialnie i profesjonalnie.

1. Avatar musi być wysokiej jakości. O tym, jak to osiągnąć, pisałem nieco wyżej. Tym, którzy ominęli tę część, powiem krótko - rozmiar awatara powinien być 2-3 razy większy niż planowałeś.
2. Wskazane jest, aby awatar był połączony z menu: miał tę samą kolorystykę, miał te same czcionki, elementy itp. Dzięki temu nagłówek Twojej strony będzie wyglądał bardziej schludnie i profesjonalnie. Przykład:




3. Sam awatar i miniatura awatara mogą się różnić. Możesz na przykład narysować okrąg na swoim awatarze, zaprojektować go tak, jak lubisz, wybrać ten obszar jako miniaturę i zaprojektować resztę awatara w innym stylu.




Inną opcją jest podzielenie awatara na dwie części. Jeden przeznaczony jest dla miniatury, a drugi dla reszty awatara.




4. Aby zachęcić użytkowników do subskrybowania Twojej strony lub napisania wiadomości do przedstawiciela firmy, możesz umieścić odpowiednie wezwanie do działania na samym dole awatara i towarzyszyć mu strzałką wskazującą przycisk.




5. Staraj się nie umieszczać zbyt wielu informacji na swoim awatarze, w przeciwnym razie będzie on wyglądał na przeładowany i niechlujny. Dodaj do niego tylko najważniejsze punkty i pamiętaj, aby między nimi było „powietrze”.

Jakie informacje można umieścić na awatarze?

Zasadniczo możesz umieścić na swoim awatarze wszystko, co chcesz. W przeciwieństwie do miniatury, naprawdę jest tu miejsce na poruszanie się. Najważniejsze to nie nadużywać :)

Domena witryny

Telefon/adres/godziny otwarcia

Konkursy/promocje

Najczęściej kupowane produkty/nowości

informacja o dostawie

Reklama aplikacji mobilnej

Główne zalety firmy/strony/produktu itp.

Aktualizacja asortymentu/nowa kreatywność itp.

Informacja, że ​​Twoja społeczność jest oficjalna

Informacje o nadchodzących wydarzeniach

Adresy kont w innych sieciach społecznościowych

Rozszerzony opis strony

Przechwala się

Ogólnie rzecz biorąc, na swoim awatarze możesz umieścić absolutnie dowolne informacje. Zamieściłem tylko kilka pomysłów, abyś mógł zobaczyć, co robią inni i zainspirować się. Cóż, należy pamiętać o podstawowych zaleceniach: awatar powinien być wysokiej jakości, czcionka powinna być duża, a pomiędzy elementami powinno być więcej „powietrza”.

Jak stworzyć płynny awatar i menu

Aby utworzyć połączony awatar i menu, będziesz potrzebować programu Adobe Photoshop lub jego odpowiednika. Cały proces wyjaśnię na przykładzie Photoshopa. Więc chodźmy.

1. Pobierz szablon programu Photoshop, który przygotowałem specjalnie na potrzeby tego artykułu. W rozmiarze normalnym (menu – szerokość 510 pikseli, awatar – 200) lub powiększonym (menu – szerokość 1020 pikseli, awatar – 400).
2. Otwórz obraz, którego chcesz użyć jako podstawy.
3. Skopiuj go, wklej do szablonu i umieść tak, jak chcesz go wyciąć.

1. Dodaj efekty, tekst, grafikę itp.

1. Jeśli nie chcesz stracić części obrazu (w odstępie 50 pikseli), przesuń go w prawo, jak pokazano na poniższym GIF-ie:

1. Wybierz narzędzie „Wycinanie” i kliknij przycisk „Fragmenty wzdłuż prowadnic”.

1. Usuń niepotrzebne fragmenty (kliknij prawym przyciskiem myszy - „Usuń fragment”) i edytuj istniejące (kliknij prawym przyciskiem myszy - kliknij puste miejsce - weź żądany obszar i rozciągnij go do żądanego rozmiaru).

1. Przejdź do sekcji „Plik” i wybierz polecenie „Zapisz dla Internetu”.

1. Przejdź do lokalizacji, w której zapisałeś zdjęcia (pulpit lub inny konkretny katalog) i znajdź folder o nazwie „Obrazy”. To tutaj trafią Twoje zdjęcia. Teraz pozostaje tylko wypełnić je na stronie.

P.S. Wysokość awatara można zmienić według własnego uznania. Wziąłem maksymalny rozmiar - 500 pikseli, ale Twoja wartość może być mniejsza. Na przykład jak na stronie „Wiki Markup”:

Jak korzystać z widżetów

Widżety są również częścią projektu społeczności VK. Za ich pomocą użytkownik może: złożyć zamówienie, zapisać się do newslettera, wziąć udział w konkursie, przeczytać i zostawić recenzje, rozpocząć wyszukiwanie w społeczności, otrzymać prezent, kupon rabatowy itp.

Oto kilka przykładów wyglądu widżetów na stronie VKontakte:

klasa="incut">

Jak projektować obrazy do postów

Jeśli jesteś projektantem stron internetowych lub masz artystyczny gust i poczucie piękna, wymyślenie korporacyjnego stylu dla Twoich zdjęć nie będzie dla Ciebie trudne. Wydaje mi się jednak, że w tym artykule takie osoby będą w mniejszości (ja, notabene, też do nich nie należę). Dlatego przyjrzyjmy się bliżej, jak to się robi, na przykładach firm odnoszących sukcesy.

Nawiasem mówiąc, pamiętaj, że prawie wszystkie znane firmy VKontakte oznaczają swoje obrazy, to znaczy dodają małe logo, adres swojej strony lub znak wodny. Zwiększa to świadomość marki i chroni Twoje zdjęcia przed kopiowaniem. Czy warto to robić, każdy musi ocenić sam. Jedyne, co chciałbym doradzić, to: jeśli się na to zdecydujesz, postaraj się, aby Twoje logo nie było zbyt jasne i nie zajmowało zbyt dużo miejsca, w przeciwnym razie cały nacisk zostanie położony na nie, a obraz będzie stracić swoją atrakcyjność.

Gdzie mogę uzyskać dobre zdjęcia?

Na naszym blogu mamy dobry artykuł na ten temat - „”. Wszystkie są bezpłatne, ale niektóre wymagają rejestracji. Jeśli nie znajdziesz nic odpowiedniego dla siebie, spróbuj wyszukać według słowa kluczowego + tapeta (lub, jeśli w języku angielskim, tapeta). Zazwyczaj tego typu żądania skutkują obrazami o wysokiej jakości. Ale tutaj musisz zachować ostrożność i sprawdzić rodzaj licencji, w przeciwnym razie, jeśli prowadzisz poważną działalność, możesz wpaść w kłopoty.

Co powinni zrobić ci, którzy nie umieją pracować w Photoshopie?

Jeśli nigdy nie pracowałeś w Photoshopie (ani żadnym innym edytorze graficznym) i nie jesteś jeszcze gotowy poświęcić czasu na jego opanowanie, możesz skorzystać z usług, które mają już gotowe szablony obrazów dla różnych sieci społecznościowych:

1. Fotor.com

Następnie po lewej stronie ekranu wybierz interesujący nas szablon. Pamiętaj, że tylko te szablony, które nie mają ikony diamentu, są udostępniane bezpłatnie.

Wstawiamy go do szablonu, zaznaczamy lewym przyciskiem myszy, wybieramy komendę Warstwa (ikona kanapki) i klikamy Przesuń na dół. W ten sposób nasz obraz znajdzie się w tle, a wszystkie napisy zostaną na niego nałożone.

Następnie zmieniamy tekst, czcionkę, rozmiar czcionki, położenie napisu itp.

Następnie kliknij ikonę dyskietki, wybierz nazwę, format obrazu, jakość i kliknij przycisk Zaloguj się, aby pobrać.

Jak korzystać ze znaczników wiki

Cóż, tutaj dochodzimy do najciekawszego i jednocześnie trudnego fragmentu. Być może wśród czytelników są osoby, które nie wiedzą, czym jest znacznik wiki i słyszą to określenie po raz pierwszy. Dlatego specjalnie dla Ciebie podam definicję, którą podaje sam „Kontakt”.

Wiki znaczniki to język znaczników używany do formatowania tekstu na stronach internetowych (zwykle klasyfikowany jako projekty wiki) i umożliwiający łatwiejszy dostęp do możliwości języka HTML. W naszej witrynie strony wiki są dobrą alternatywą dla zwykłych postów i nawigacji tekstowej. Jeśli chcesz stworzyć duży artykuł z innym formatowaniem tekstu (pogrubienie, podkreślenie, nagłówki itp.), dodać do niego grafikę lub po prostu stworzyć kolorowe menu nawigacyjne dla swojej społeczności, wiki jest niezbędna.

Podobnie jak Wordpress (czy jakikolwiek inny CMS) posiada edytor HTML, za pomocą którego tworzysz artykuły, tak Contact posiada własny edytor do tworzenia i edytowania stron wiki. To wygląda tak:

Za pomocą tego edytora tworzone są menu nawigacyjne, a także artykuły ze zdjęciami, filmami i nagraniami audio. Poniżej omówię szczegółowo sposób pracy w tym edytorze, ale najpierw proszę o dodanie dwóch linków do zakładek. Pomogą ci one bardzo w nauce znaczników wiki.

Tworząc grupy i pomagając przyjaciołom, stwierdziłem, że niewygodne jest zapamiętywanie za każdym razem zalecanych rozmiarów. Na początku zapisywałam je w notatkach, później postanowiłam zrobić sobie szablony, którymi się z Wami dzielę.

Archiwum zawiera trzy szablony: dla VK, Facebooka i YouTube. Pliki w formacie PSD (Photoshop). Mają zalecany rozmiar i już przygotowane przewodniki dla różnych rozmiarów ekranów (komputery stacjonarne i urządzenia mobilne).

Znacznik dla nagłówka grupy/publicznego VKontakte

Chcę od razu ostrzec, że na urządzeniach mobilnych nagłówek jest obcięty na krawędziach i trochę u góry. VK nic na ten temat nie pisze podczas ładowania okładki. Korzystając z badań naukowych, ustaliłem szerokość bezpiecznego obszaru na 1200 px (wewnętrzne wytyczne dotyczące układu). Jeżeli okaże się, że przeoczyłem, proszę o informację w komentarzach. Poprawię to.

Oznaczenia grupy/publicznej okładki na Facebooku

• 820×312 px dla komputerów stacjonarnych,
• 640×360 px dla urządzeń mobilnych,
• 851x315 px, ale taki rozmiar jest uważany za optymalny i najszybszy.

Z jakiegoś powodu rozmiar telefonu komórkowego jest większy niż zalecany rozmiar obudowy dla komputera PC. Zrobiłem układ o rozmiarze 851x360.

Układ okładki kanału Youtube

• 2560x1440 px dla telewizorów,
• 2560x423 px dla komputerów stacjonarnych i laptopów,
• 1855×423 px dla tabletów,
• 1546×423 px dla telefonów komórkowych.

Tutaj, podobnie jak w przypadku VK, rozmiary dla urządzeń mobilnych nie są zgodne. Nie przeprowadziłem żadnych badań naukowych, ale zalecam zrobienie większych marginesów z wewnętrznych przewodników. Jeśli umieścisz coś na środku, umieść go na szerokość trzech czwartych. Myślę, że tego nie przegapisz. Będę również wdzięczny, jeśli w komentarzach podzielisz się swoimi rozmiarami z własnego doświadczenia.

To wszystko. Mam nadzieję, że uznasz to za przydatne. Zapytaj w komentarzach, jeśli coś jest niejasne. Powodzenia w Twojej kreatywności!

Elementy graficzne w projekcie społeczności VKontakte przyciągają uwagę odwiedzającego, zatrzymują ją, a także zwiększają rozpoznawalność grupy lub opinii publicznej wśród tysięcy podobnych społeczności. Dodatkowo menu graficzne ułatwia poruszanie się po sekcjach grupy, pomagając uczestnikom i innym użytkownikom sieci społecznościowej poruszać się po strukturze dużej społeczności.

Wyszukiwanie w VK lub przeglądanie portfolio projektantów pokaże wiele udanych przykładów projektów grupowych VKontakte, które możesz wykorzystać jako punkt wyjścia przy wyborze menu okładki dla swojej społeczności.

Stosowane są następujące rozmiary projektów grup VKontakte:

• Okładka strony pokazana jest u góry, na całej szerokości strony publicznej, w rozmiarze 1590 x 400 pikseli;
• Duży awatar - pionowy baner o wymiarach 200x500 px (proporcje 2:5), pokazany w prawym górnym rogu;
• W każdej wiadomości grupowej wyświetlany jest mały awatar, okrągły obrazek, o wymiarach 200x200 pikseli.
• Obraz menu dla grupy VKontakte, szerokość 510 pikseli, wysokość 307 (tak, aby dolna krawędź menu ładnie pasowała do dołu dużego awatara po prawej).

Jeśli w ustawieniach społeczności załadowano zdjęcie na okładkę, duży awatar po prawej stronie nie będzie wyświetlany.

Jak samodzielnie zrobić nagłówek dla grupy VKontakte

Aby nagłówek społeczności wyglądał pięknie, wszystkie jego elementy graficzne muszą być zaprojektowane w tym samym stylu (zestaw kolorów, logo, czcionki) lub stanowić część tego samego obrazka. Tworząc samodzielnie grupę VKontakte, pierwszym krokiem jest przygotowanie obrazu tła. Może to być zdjęcie tematyczne z bezpłatnych banków zdjęć (na przykład pixabay.com).

Otwórz obraz w edytorze graficznym. Przytnij lub skaluj do rozmiaru: długość 1590 px, wysokość 400 px.

Następnie możesz zastosować niezbędne napisy (nazwa grupy, hasło, wezwanie do przyłączenia się do społeczności). Teraz musisz przesłać okładkę do społeczności, aby to zrobić, przejdź do pozycji menu „Zarządzanie społecznością”:

Kliknij „Pobierz” w polu „Okładka społeczności”.

W kolejnym oknie wybierz plik okładki przygotowany wcześniej na Twoim komputerze i kliknij „Zapisz i kontynuuj”.

Teraz Twoja grupa będzie miała nową okładkę. Pamiętaj, że w tym przypadku pionowy obraz dużego awatara po prawej stronie nie będzie już wyświetlany.

• Obraz lub zdjęcie musi odpowiadać tematyce społeczności.
• Używaj obrazów wysokiej jakości.
• Nie naruszaj praw autorskich do obrazów innych osób (obecnie bezpłatne zasoby oferują dużą liczbę zdjęć i ilustracji).
• Nie przeciążaj okładki szczegółami.
• Jeśli w nagłówku umieścisz zdjęcie osoby, lepiej, aby nie patrzyła ona na odwiedzającego, a na najważniejszy element strony (menu, adres strony, wiadomość o promocji, połączenie).
• Używaj wysokiej jakości czcionek i zadbaj o czytelność tekstu w dowolnej skali.

Rozmiary nagłówków w publicznym VKontakte w nowym wyglądzie

Po przeprojektowaniu tej sieci społecznościowej pojawił się nowy element projektu - okładka. Jest to duży obraz poziomy o wymiarach 1590 na 400 pikseli. Nagłówek grupy VKontakte to obraz statyczny. Wystarczająco duży, aby umieścić na nim jasną, zapadającą w pamięć fotografię lub obraz oraz imię i nazwisko publiczności, hasło firmy, nazwę miejsca, harmonogram prac i inne napisy.

Jak zrobić menu dla grupy VK w nowym projekcie

Proces projektowania menu grupy VKontakte składa się z następujących kroków:

• Przygotowanie listy linków do menu (mogą to być strony, sekcje społecznościowe lub strony zewnętrzne).
• Przygotowanie obrazu tła.
• Nałożenie napisów i „przycisków” menu na obraz tła.
• Cięcie obrazu na części.
• Włącz stronę wiki.
• Ładowanie menu graficznego i formatowanie go za pomocą znaczników wiki.

Obraz tła powinien mieć szerokość 510 pikseli, a wysokość uzależniona jest od ilości i rozmieszczenia pozycji menu. Do pracy z obrazami potrzebny będzie edytor grafiki rastrowej; poniżej znajdują się przykłady wykorzystania bezpłatnego i lekkiego programu Paint.Net.

Należy od razu zaplanować rozmieszczenie pozycji menu, tak aby obraz można było pociąć na fragmenty tej samej wielkości. Jest to istotne, aby menu prawidłowo skalowało się na ekranie smartfonów czy tabletów.

Pionowe menu społeczności VK z elementami w jednej kolumnie

Otwórz obraz w edytorze. Używając narzędzia „Tekst” edytora, napisz pozycje menu na tle. Aby etykiety menu były widoczne, można je wyróżnić na kilka sposobów:

• Zakreśl go ramką;
• Zmień kolor tła pod literami;
• Dodaj cień do liter.

Na poniższym zrzucie ekranu każdy element jest podświetlony na jeden z poniższych sposobów.

Następnym krokiem jest pocięcie obrazu na części:

Proces wycinania obrazu można również wykonać za pomocą wygodnego narzędzia online www.imgonline.com.ua/cut-photo-into-pieces.php.

Następnie w menu „Zarządzanie społecznością” przejdź do pozycji „Sekcje” i w pozycji „Materiały” wybierz „Zastrzeżone” (oznacza to, że tylko administrator grupy może tworzyć i edytować strony).

Kliknij Zapisz i przejdź do grupy głównej. Obok sekcji z informacjami o grupie pojawiła się pozycja „Najnowsze wiadomości”.

Przejdź do tej sekcji i kliknij Edytuj. Zmień tytuł na „Menu”, a następnie kliknij ikonę aparatu, aby dodać obraz.

Kliknij dodany obraz i w oknie właściwości podaj link do żądanej sekcji.

VKontakte automatycznie zmniejsza obrazy do 400 pikseli i wstawia dodatkowe tagi. Aby to naprawić, musisz przejść do trybu edycji znaczników.

Każdy tag obrazu zaczyna się od „[[” i kończy na „]]” i składa się z trzech części oddzielonych znakiem „|”: identyfikatora obrazu, właściwości i linku. Należy dostosować wielkość obrazków i wstawić do ich właściwości znacznik „nopadding”. Właściwości obrazów są wymienione poprzez „;”.

Po zapisaniu zmian tworzenie menu jest zakończone.

Menu z elementami poziomymi lub wielowierszowymi

W tym przypadku przygotowanie obrazów odbywa się w ten sam sposób, ale ze źródłem wycinanym pionowo. Wycięte fragmenty są ładowane poprzez interfejs edycji strony. Względne położenie prostokątnych fragmentów ustala się za pomocą znaczników tabeli wiki w VK. Każdy znacznik obrazu łącza opisany w poprzedniej sekcji jest umieszczany wewnątrz komórki tabeli.

Zasady projektowania stołów:

• Początek oznaczony jest symbolem „(|), koniec tabeli oznaczony jest znakiem „|)”.
• Dodatkowe właściwości są wskazane po „|~”
• Nowa linia zaczyna się od „|-”.
• Każda komórka jest oddzielona znakiem „|”.

Aby wykluczyć dodatkowe spacje, należy określić parametry tabeli „fixed nopadding noborder”. Układ menu graficznego z 2 kolumnami i 2 wierszami wygląda następująco:

I samo menu w grupie:

Rozmiar awatara grupowego w nowym projekcie dla projektu publicznego VK

Społeczności VKontakte korzystają z dwóch opcji awatara:

• Jeśli okładka nie jest załadowana, w prawym górnym rogu zostanie wyświetlony duży prostokątny baner o wymiarach 200 na 500 pikseli.
• Miniaturka ma wymiary 200 x 200 pikseli i jest wyświetlana w postach i dyskusjach jako okrąg.

Okładka grupy VKontakte to nowy element projektu grupy po przeprojektowaniu. Wydaje się, że zrobienie jednego zdjęcia powinno być łatwe, jednak znalezienie idealnego jest dość trudne.

Okładka VKontakte to jedna z pierwszych rzeczy, które zobaczą ludzie odwiedzający Twoją grupę. Dlatego tak ważne jest, aby zrobić dobre wrażenie na odwiedzającym, przekazać jasne zrozumienie tematyki i zainteresowań grupy.

W kwietniu 2017 r. stał się dostępny dla społeczności. To zupełnie nowa funkcja i doskonała okazja do ożywienia (w dosłownym tego słowa znaczeniu) designu Twojej grupy w celu zwiększenia efektywności i wpływu promocji.

Z tego artykułu dowiesz się trzech rzeczy:

• Rozmiar okładki dla grupy VKontakte;
• Instrukcje, jak stworzyć okładkę VKontakte i jak wybrać idealne zdjęcie;
• Przykłady grup z wysokiej jakości okładkami.

Jaki rozmiar ma okładka grupy VKontakte?

Optymalny rozmiar obrazu dla okładki VKontakte może się różnić. Na komputerach obraz okładki jest wyświetlany w rozdzielczości 795 pikseli szerokości i 200 pikseli wysokości. W telefonach komórkowych dostosowuje się proporcjonalnie do szerokości ekranu. Jednak VKontakte zaleca przesłanie zdjęcia o rozmiarze co najmniej 1590 x 400 pikseli.

Rada: Jeśli znajdziesz obraz, który naprawdę Ci się podoba, ale jego proporcje nie są zalecane, nadal możesz go użyć! Przesyłając to zdjęcie, możesz wybrać widoczny obszar i odciąć wszystkie niepotrzebne części za pomocą wewnętrznych narzędzi VKontakte.

Opracowując projekt okładki należy pamiętać, że na urządzeniach mobilnych o szerokości ekranu mniejszej niż 400px krawędzie obrazu są przycinane do 196px, a około 83px zajmują ikony systemowe telefonu. Weź pod uwagę wygodę użytkowników mobilnych. Na VKontakte jest to większość.

Upewnij się, że tekst na okładce będzie wystarczająco czytelny na ekranie telefonu komórkowego, gdy okładka dopasuje się do swojej szerokości. Sprawdź także, czy ważne elementy na okładce nie są przysłonięte ikonami menu i osobistymi wiadomościami.

Poniżej znajduje się wizualny przykład tego, jak wygląda okładka na komputerze, oraz wskazane są wymiary od krawędzi do aktywnych elementów grupy.

Jak zrobić okładkę dla grupy VKontakte

Jeśli masz umiejętności projektowania, stwórz własną okładkę od podstaw, korzystając z oprogramowania takiego jak Adobe Photoshop. Wybór tej ścieżki pozwoli Ci stworzyć projekt dla Twojego biznesu tak, jak go sobie wyobrażasz.

Jeśli nie chcesz kupować i uczyć się Photoshopa, skorzystaj z usług online. Tutaj . W tej chwili jest to najpopularniejsza usługa.

Szablony okładek dla grupy VKontakte

Aby pomóc Ci w opracowaniu projektu, stworzyliśmy szablon okładki grupy w VK (1590x400px).

Porozmawiajmy o kilku dodatkowych szczegółach dotyczących pracy z naszym szablonem:

• Po otwarciu szablonu zobaczysz wygląd swojego projektu. Nie musisz przesyłać okładki na grupę, żeby ocenić jak wygląda.
• Aby stworzyć własną okładkę, kliknij dwukrotnie warstwę „okładka”. Spowoduje to przejście do wnętrza inteligentnego obiektu.
• Następnie możesz rozpocząć tworzenie, wszystkie rozmiary są wskazane w środku.

Ten i inne szablony możesz pobrać w artykule:.

Twoje zdjęcia

Rozumiemy, że nie każdy może być projektantem. Ale to nie znaczy, że nie każdy może mieć piękną okładkę społeczności VK. Oto kilka miejsc, w których możesz zajrzeć do tworzenia nagłówka, a także kilka wskazówek, które pokażą, że takie podejście może mieć sens dla Ciebie i Twojej firmy.

Na przykład, jeśli Twoja grupa dotyczy książek, możesz zrobić zdjęcie swoich półek z książkami i użyć go jako zdjęcia na okładkę. To zasygnalizuje, że lubisz książki i możesz spodziewać się, że inni fani książek dobrze zareagują na zdjęcie.

Zdjęcia seryjne

Jeśli nie masz żadnych osobistych zdjęć, które chciałbyś wykorzystać, poszukaj ich w serwisach fotograficznych (witrynach z bezpłatnymi obrazami), tam znajdziesz idealne zdjęcie na okładkę społeczności VK. Moje ulubione strony do wyszukiwania pięknych zdjęć to Unsplash i Pixabay.

Zachęcam do modyfikacji/udoskonalenia wszystkich wybranych zdjęć, tak aby nabrały one bardziej osobistego charakteru. Możesz skorzystać z narzędzi edytorów internetowych Fotor, Pablo lub Canva. Jeśli chcesz, za pomocą tych narzędzi możesz nawet ulepszyć swoje zdjęcia. Na przykład wybierz jeden ze swoich ulubionych cytatów i dodaj go nad zdjęciem.

Jak wybrać okładkę

Teraz, gdy wiemy, jak zrobić okładkę dla grupy VKontakte, pytanie brzmi: jaką treść dla niej wybrać? Czy istnieją zdjęcia, które działają lepiej niż inne?

Spójrzmy na kilka ważnych punktów:

• Zachowaj wymagane wymiary okładki (szerokość 1590px i wysokość 400px);
• Wybierz obrazy wysokiej jakości;
• Nie przeciążaj obrazu elementami wizualnymi;
• Wybierz zdjęcie na okładkę, koncentrując się na ogólnym projekcie grupy VKontakte;
• Używaj obrazów, które są oryginalne i pasują do Twojej marki.

Jakie obrazy przyciągają ludzi

Oto kilka elementów, które sprawiają, że obrazy są urzekające:

• Emocje: uczucia skłaniają ludzi do działania;
• Znaczenie: w tym to, co odpowiada zainteresowaniom odbiorców;
• Zabarwienie: dobór odpowiednich kolorów prowadzi do zwiększenia konwersji;
• Typografia: Wybór odpowiedniej czcionki sprawi, że Twój przekaz będzie jasny;
• Hashtagi i tekst: Znajdź odpowiednie słowa, które sprowokują odbiorców do podjęcia docelowego działania.

Komponentów tych można użyć podczas tworzenia okładki społeczności VKontakte, aby ludzie czuli się w określony sposób lub podejmowali określone działania.

Na przykład Coca-Cola używa na okładce popularnego czerwonego logo z napisem „smakuj… czuj” i szczęśliwą parą trzymającą drinka w tle. Ma to oczywiście na celu skłonienie ludzi do utwierdzenia się w przekonaniu, że picie coli oznacza szczęście. I to jest skuteczne!

Gdzie ludzie szukają?

Przy opracowywaniu idealnej okładki warto przyjrzeć się pewnym badaniom. Udało mi się znaleźć coś ciekawego na ten temat. Jest po angielsku, ale pokrótce przedstawię istotę.

Stwierdzono, że jeśli chcemy zwrócić uwagę na konkretny element obrazu, to stosując zasadę kolejki wizualnej, wzrok osoby na zdjęciu patrzącej na dany element skieruje widza w to miejsce. Może to być ciekawy sposób wykorzystania perspektywy danej osoby na okładce grupy VKontakte.

Kissmetrics odkryło również, że skuteczne może być dodanie elementu, który „wyskakuje” w okładce. Ważne, żeby był jeden taki element i taki, który wzywa do działania.

W poniższym przykładzie firma Electronic Arts o tym wie i daje do zrozumienia ludziom, że mogą kupić nową grę FIFA17.

Myśleć poza szablonowo

Okładki grupy VKontakte stały się świetnym sposobem na wyrażenie siebie, sposobem na wyróżnienie się. Oto kilka oryginalnych sposobów.

Przykłady grup z wysokiej jakości okładkami

Teraz, gdy wiemy, jak zrobić dobrą okładkę dla grupy VKontakte, możemy rzucić okiem na niektóre strony, które wykorzystują proste obrazy wysokiej jakości. Mamy nadzieję, że znajdziesz w nich trochę inspiracji.

Ponieważ teraz wykonujemy prace na zamówienie, będziemy w stanie odpowiedzieć na Twoje pytania dotyczące projektowania sieci społecznościowych, jeśli je posiadasz. Wyślij je na nasz e-mail lub napisz tutaj w komentarzach. Razem możemy stworzyć idealną osłonę dla Twojej grupy VKontakte i zwiększyć skuteczność Twoich wysiłków na rzecz jej promocji.

Obecnie istnieje wiele różnych opcji, dzięki którym możesz przyciągnąć odbiorców do swojej społeczności lub grupy. Istnieją specjalne boty, komunikatory i programy, które pozwalają stworzyć niepowtarzalną osłonę dla Twojej grupy.

Na VKontakte każdy administrator może pochwalić się unikalnym kapeluszem swojej społeczności. Jak to zrobić? Teraz opowiemy Ci o tym szczegółowo. Aby wykonać niepowtarzalną okładkę, należy dokładnie zapoznać się z niniejszą instrukcją.

• Krok pierwszy. Z pewnością wiele osób uważa, że ​​utworzenie nagłówka w VK jest łatwe i że nie ma w tym nic skomplikowanego. Ale w rzeczywistości nie jest to bardzo łatwe i należy je traktować poważnie. Aby więc stworzyć własną, niepowtarzalną okładkę, musisz najpierw udać się do swojej grupy i w tym celu musisz być co najwyżej właścicielem lub administratorem. Znajdź przycisk z trzema kropkami i kliknij go, wybierając „Zarządzanie społecznością”.
  
• Krok drugi. Wybierając tę ​​sekcję, automatycznie przejdziesz do „Ustawień”. Ta sekcja jest najważniejsza i niezbędna; należy w niej wybrać zakładkę „Okładka społeczności”.
  
  
• Krok trzeci. W celu zrób piękną czapkę w grupie na VK, musisz kliknąć „Pobierz”. Otworzy się przed tobą okno, w którym musisz wybrać potrzebny obraz. Zachowaj ostrożność przy wyborze zdjęcia; powinno być nie tylko interesujące, ale także mieć wysoką rozdzielczość 1590x400. .
  
  
• Krok czwarty. Następnie możesz „Powiększać” lub „Oddalać” obraz. Najważniejszą rzeczą do zapamiętania jest to, że im wyższa jakość, tym wyraźniejszy będzie obraz.
• Krok piąty. Tak więc, decydując się na zdjęcie i rozmiar, musisz kliknąć „Zapisz”, w tym momencie zobaczysz powiadomienie, że obraz został pomyślnie dodany, ale to nie wszystko. Musisz ponownie kliknąć „Zapisz” i dopiero wtedy nagłówek zostanie dodany.
  
  

Jeśli nagle przypadkowo umieścisz niewłaściwy nagłówek w grupie VKontakte , i nie wiesz, jak się tego pozbyć, to spieszymy, aby cię zadowolić, ten problem można rozwiązać! Wystarczy powtórzyć wszystko dokładnie tak, jak na schemacie i po prostu dodać ten, którego potrzebujesz zamiast losowego obrazu.

Tworzenie nagłówka za pomocą programów

Czasami wielu użytkowników korzysta z ciekawych programów, za pomocą których może stworzyć arcydzieło.

• dycover.ru – Ta usługa online cieszy się dużym zainteresowaniem wśród użytkowników. Ich główne zalety: prostota, szybkość, wygoda i niezawodność.
• Vk-oblozhki.ru– ten serwis internetowy przygotował już dla użytkowników gotowe okładki, które każdy może samodzielnie wybrać i ozdobić.

Teraz wiesz, jak ustawić nagłówek w grupie VKontakte. Jak widać nie jest to najprostsza sprawa. Jeśli jednak dokładnie przeczytasz i będziesz postępować zgodnie z tymi instrukcjami, na pewno odniesiesz sukces.