Copertine già pronte per VK 1590 400. Design della comunità VKontakte: la guida più dettagliata in RuNet per un gruppo o una pagina pubblica

Con l'avvento del social network VKontakte, gli imprenditori hanno iniziato a lanciare attivamente attività su Internet e cercare nuove fonti di reddito: i gruppi e le pagine pubbliche sono diventati uno strumento per guadagnare denaro. La copertina di un gruppo VKontakte non è solo una bella immagine, è un biglietto da visita per i tuoi clienti. Quanto meglio impacchetterai la tua community, maggiore sarà la possibilità che ordinino da te e non dai tuoi concorrenti.

Copertina per negozio di abbigliamento progettata nel nostro studio di progettazione grafica

La copertina del gruppo VKontakte è una piccola parte del design richiesto e, se ti stai solo cimentando come uomo d'affari online, questa è l'opzione di imballaggio più economica. Idealmente, un gruppo VKontakte o una pagina pubblica dovrebbe contenere: un banner pubblicitario accattivante (apre il menu), una copertina, un menu (navigazione o destinazione wiki), prodotti dal design accattivante e copertine di album fotografici, nonché post con marchio. Tutto ciò crea il volto della tua attività e influenza il modo in cui i clienti ti percepiscono.

Cosa inserire sulla copertina di un gruppo VKontakte:

Quando progetti la copertina di un gruppo VKontakte, considera la versione mobile. Se il design è molto ritagliato, i punti importanti verranno nascosti (contatti, servizi, logo, ecc.), perderai alcuni clienti. Su PC e laptop la copertina viene visualizzata per intero, ma sui dispositivi mobili viene ritagliata a sinistra e a destra di 197 px e scurita nella parte superiore di 83 px.

Non sovraccaricare la copertina del cinturino con informazioni. Dovrebbe essere facile ma informativo!

Dove posso ordinare un disegno di copertina?

Puoi ordinare il design della copertina di un gruppo VKontakte da un designer in uno scambio freelance, trovare un artista sui social network o cercare il sito web di uno studio web su Internet.

Ciascuno di questi metodi ha le sue caratteristiche. Risparmierai denaro sullo scambio freelance, ma nella maggior parte dei casi troverai un designer alle prime armi o uno studente. Per lo studio web lavorano designer esperti e selezionati, ma anche lo studio riceverà il proprio vantaggio dall'ordine. È più semplice effettuare un ordine tramite i gruppi VKontakte: vedrai immediatamente il lavoro del designer e confronti i prezzi di diversi artisti.

Nel mercato dei servizi, i prezzi per la progettazione di una copertura VKontakte vanno da 500 a 3.500 rubli. e non è solo così. I principianti lavorano meno, ma il loro livello non è alto; gli studi sono intermediari e lavorano con un markup; e i designer famosi di successo lavorano per se stessi.

Come impostare la copertina su un gruppo?

Nel tuo gruppo, nell'angolo in alto a destra dello schermo sotto "avatar" ci sono tre punti "...", fai clic su di essi e nella finestra che appare, seleziona la sezione "Gestione comunità", in essa sotto le informazioni sul gruppo vedrai la scritta: "Copertura comunità" e le azioni "Scarica" ​​e "Elimina". Aggiungi una copertina e torna alla pagina principale per vedere il risultato.

Una volta installata la copertina, potrai sostituirla in qualsiasi momento semplicemente passandoci sopra con il cursore del mouse e selezionando l'azione “Carica, modifica o elimina copertina”. Puoi scoprire di più su come inserire una copertina in un gruppo nel nostro video:

Esempi del nostro lavoro sulla progettazione di gruppi “quello che era allora”.

La cosa principale che è cambiata è un'altra imitazione di Facebook sotto forma di copertina della comunità. Non c'è ancora una copertina per le pagine personali, ma penso che lo sarà nel prossimo futuro. imitazione di un concorrente in persona.

Dimensioni della copertina della community VK e nuove funzionalità

Per scaricare la copertina accedi alla pagina di gestione della community e nella prima pagina clicca su “Download” accanto alla voce “Copertina Community”. La dimensione della copertina è 795x200 px o 1590x400 px per schermi ad alta definizione.

I pulsanti presenti sull'avatar erano comodamente posizionati sotto la copertura lungo l'intera larghezza. Rimane anche l'avatar della comunità all'inizio della copertina, ma sotto forma di una piccola miniatura della comunità.

Al posto della voce fissata, ora si trovano tre tipi di informazioni sotto forma di schede:

• post appuntato
• informazioni sulla comunità
• menu community (se creato)

A proposito, questo è abbastanza conveniente. In precedenza, nell'intestazione della comunità ce n'era uno dei 3, ma ora è possibile consentire agli utenti di vederli tutti e 3 passando da una scheda all'altra.

Come previsto originariamente, la prima scheda è la voce bloccata, quindi viene data priorità alle altre.

Tra le novità anche il blocco degli amici che si sono uniti alla community è stato leggermente modificato.

A proposito, come avveniva un tempo con le merci, questa innovazione non funziona ancora sui dispositivi mobili, ma promettono di migliorare questa omissione in futuro.

6 Mi piace

Molti proprietari di comunità desiderano creare una copertina per un gruppo su VK online. Nel nostro articolo cercheremo di comprendere tutte le sfumature della procedura e di fornire consigli agli utenti.

VK è un sito che viene costantemente aggiornato e migliorato. Gli amministratori dei gruppi ora hanno molti strumenti per personalizzare la propria community. Uno di questi sta creando una copertina per un gruppo VK online.

Ma cos'è? Questa è un'immagine speciale inserita nell'intestazione del gruppo. Perché hai bisogno di una copertura?

1. Ti permette di migliorare il design.
2. Riesce a dare alla pagina uno stile speciale.
3. Amerai il nuovo design.
4. La copertina può raccontare il tema della comunità.
5. I gruppi con un bel design suscitano il massimo interesse tra gli utenti.
6. Le persone saranno più disposte a iscriversi alla comunità.
7. È possibile adattare l'immagine alla versione completa e mobile del sito.
8. Creare una copertina è abbastanza semplice, questa procedura non dovrebbe causare problemi.

Come realizzare una bellissima copertina per un gruppo in VK?

I costi di manodopera per la creazione dipendono dai tuoi desideri. In generale, gli amministratori dei gruppi hanno due opzioni:

• Scatta la foto finita e pubblicala.
• Crea la tua immagine unica.

Naturalmente, il secondo metodo è molto più complicato. Per creare una copertina unica dovrai utilizzare un editor di foto. È necessario avere almeno competenze minime nel lavorare con programmi come Photoshop per ottenere il risultato desiderato.

Copertura per gruppo VK: dimensioni

Le dimensioni possono variare. Ad esempio, su un PC la copertina viene visualizzata con una risoluzione di 795x200 pixel. Sugli smartphone si adatta allo schermo del dispositivo.

Ma non è sempre possibile trovare un’immagine esattamente con questa risoluzione! Non preoccuparti, quando carichi un'immagine, il sistema ti chiederà di ritagliarla. Seleziona la parte che desideri, i bordi verranno rimossi automaticamente.

È importante ricordare che l'immagine di copertina viene visualizzata in modo diverso sui dispositivi mobili rispetto ai PC. È ritagliato a 83px nella parte superiore, questo spazio è occupato dalle icone di sistema. Inoltre, sugli smartphone con larghezza del display fino a 400px, i bordi vengono ritagliati di 196px.

Di conseguenza, una piccola area sarà invisibile agli utenti di dispositivi mobili. È meglio lasciarlo vuoto in modo che solo lo sfondo dell'immagine sia ai bordi, quindi gli elementi non verranno tagliati.

Programma per creare una copertina per un gruppo su VK

Modi disponibili per creare un'intestazione per un gruppo:

1. Scarica l'immagine finita per la copertina.
2. Fallo attraverso un servizio online.
3. Ordina da specialisti.
4. Utilizza editor di foto e creane uno tuo.

Internet è pieno di immagini e modelli gratuiti in formato psd. Puoi adattarli al tuo gruppo e inserirli nell'intestazione della comunità. Questa è l'opzione più semplice oggi.

Puoi utilizzare programmi speciali: Adobe Photoshop, Pixelmator, ecc. Ma devi essere in grado di lavorare con queste applicazioni, padroneggiarle richiederà tempo.

Come realizzare una copertina per un gruppo su VK in Photoshop

Adobe Photoshop è il programma di editing di immagini più popolare. Ti consente di creare rapidamente una copertina se hai determinate abilità. Il vantaggio principale di questo metodo è che è possibile sviluppare un design unico.

Importante! Come base, seleziona sempre immagini più grandi delle dimensioni consigliate. Sarà necessario regolare l'immagine alla risoluzione desiderata. Ma in caso di allungamento, la qualità dell'immagine si deteriora in modo significativo, il che è inaccettabile.

Apri Photoshop. Nel menu, seleziona la voce per creare un nuovo file. Per salvarlo è necessario impostare i seguenti parametri:

• Indicare immediatamente il nome del file.
• Dimensioni: 1590x
• Lo sfondo è trasparente.
• Modalità colore: colori RGB a 8 bit.
• Risoluzione: 72 pixel per pollice.

Ora trova un'immagine su Internet, copiala e incollala nel programma. Per adattare la dimensione necessaria:

1. Vai alla voce "Modifica".
2. Quindi a "Trasformazione".
3. Ora seleziona la sezione “Ridimensionamento”.
4. Tieni premuto Maiusc.
5. Utilizzare il pulsante sinistro del mouse per catturare un angolo dell'immagine.
6. Adatta l'immagine per adattarla ai bordi.
7. Per confermare l'azione, premere Invio.

Devi scrivere il nome della comunità. Per fare questo è necessario:

• Seleziona l'opzione per creare un nuovo livello.
• Fare clic sul pulsante per aggiungere testo.
• Seleziona un'area per il suo posizionamento.
• Seleziona dimensione, colore, carattere.
• Inserisci il nome della comunità.
• Apri il pannello degli stili.
• Scegli quello appropriato in modo che il testo appaia bello.

Hai una copertina piuttosto semplice. Secondo le istruzioni, quasi tutti gli utenti possono farlo. Naturalmente, creare un'intestazione con molti elementi richiederà molto più tempo.

1. Aprire nel menu "File".
2. Seleziona "Salva per Web".
3. Specificare il set PNG-24.
4. Salva l'immagine.

Come caricare un'immagine finita?

Per caricare un'immagine nel gruppo avrai bisogno di:

• Entra nella comunità.
• Seleziona un elemento da controllare dal menu.
• Trova un'opzione con una copertura comunitaria.
• Seleziona un elemento da scaricare.
• Si aprirà un modulo di aggiunta.
• È possibile selezionare un'immagine in Explorer o trascinarla nella finestra.
• Caricalo sul sito.
• Conferma il salvataggio.

Vai alla pagina principale della community e valuta il risultato. Se hai seguito i consigli sulle dimensioni, l'immagine si adatterà perfettamente.

Hai imparato come creare una copertina per un gruppo in VK. Il processo non è così complicato, basta tenere conto di tutti i suggerimenti forniti.

Copertura dinamica per il gruppo VK

Ora è possibile creare una copertina dinamica. Il processo di preparazione è molto più complicato e dovrai dedicare molto più tempo.

Qual è la differenza tra un'intestazione dinamica e una normale? In esso, le immagini possono essere aggiornate. La frequenza di modifica viene configurata separatamente durante la creazione.

Ma perché hai bisogno di un'intestazione dinamica? Ci sono molte opzioni per usarlo:

1. Puoi visualizzare il tuo sistema CRM.
2. Riesco a creare un timer.
3. Visualizza il giorno della settimana, la data, l'ora.
4. Mostra i nomi delle ultime persone che si sono iscritte.
5. Fornire informazioni aggiuntive.
6. Tali coperture sono adatte per gruppi di aziende.

L'intestazione consente di inserire varie informazioni che possono essere ottenute da VK o da qualsiasi altro sito. Le opzioni per utilizzarlo dipendono solo dalle tue esigenze.

Come funziona?

Il principio è abbastanza semplice:

• È in preparazione un modello standard.
• Le zone per i dati aggiornati sono allocate nei posti giusti.
• Per il funzionamento completo avrai bisogno di uno script speciale.

Perché hai bisogno di una sceneggiatura?

Lo script viene utilizzato per ricevere dati e visualizzarli in aree designate. Cioè scarica le informazioni dalla fonte e le trasferisce sulla copertina, ed è un elemento di collegamento.

La frequenza di aggiornamento viene regolata in base ai tuoi desideri. È possibile selezionare il valore ottimale in modo che le informazioni correnti vengano visualizzate nell'intestazione.

Creare una copertina dinamica con una sceneggiatura è più difficile di una normale. Saranno necessarie molte più conoscenze e software specializzati. Pertanto, è meglio affidare questa procedura ai professionisti. Allora puoi essere sicuro del perfetto funzionamento.

Come collegare lo script?

Dopo aver completato il progetto, gli specialisti ti forniranno:

1. Disposizione del progetto.
2. Fonti in formato PSD.
3. Copione.
4. Chiave di licenza per l'associazione.

I professionisti coinvolti nello sviluppo del design per le comunità assumono i compiti principali. Per questo motivo, è possibile risparmiare tempo e non approfondire tutte le sfumature della creazione di tali copertine.

Affinché lo script funzioni, dovrai installarlo da qualche parte. Ci sono diverse opzioni:

• Sul tuo computer di casa.
• Sul server dell'azienda coinvolta nello sviluppo.
• A un server remoto.

Puoi installare lo script sul tuo PC. Ma il computer deve funzionare 24 ore su 24. Se il dispositivo è spento, le informazioni nell'intestazione non verranno più aggiornate. Pertanto, pochi proprietari di comunità utilizzano questo metodo.

Puoi pagare per l'hosting e installare lo script su un server remoto. Il costo del servizio parte da 80 rubli al mese. Ma devi scegliere un hosting affidabile che possa garantire un funzionamento ininterrotto.

Molte aziende che progettano comunità offrono l'installazione dello script sul proprio server. Il costo del servizio è basso, la quota di abbonamento di solito non supera i 100 rubli al mese. Inoltre, i dipendenti dell'azienda supporteranno il funzionamento dello script.

• indicare il tema e l'orientamento del gruppo;
• far risparmiare tempo agli utenti nell'esplorazione della community;
• visualizzare i dettagli di contatto in un posto ben visibile;
• creare il giusto mood e l'atmosfera tematica;
• motivare commenti e Mi piace;
• svolgere altre funzioni speciali.

In contatto con

In questo social network, per progettare un gruppo o una pagina pubblica, puoi utilizzare un avatar, una copertina, un menu wiki, solo voci wiki, icone per prodotti e illustrazioni per post. Se si sceglie la dimensione sbagliata, la qualità dell'immagine potrebbe deteriorarsi o risultare troppo piccola. C'è un'opinione su Internet secondo cui la dimensione dell'immagine influisce sul posizionamento nello smart feed, quindi dovrebbe essere almeno 1024 px. Abbiamo chiesto supporto e abbiamo scoperto che le dimensioni non contano, l'importante è il contenuto.

Risposta di supporto sull'impatto delle dimensioni dell'immagine sulla posizione nei risultati di ricerca

Il modo in cui lo smart tape legge il contenuto dell'illustrazione non è molto chiaro. Se lo sai, scrivi nei commenti, te ne saremo grati.

Copertina

Dimensioni: 1590×400 px, area visibile per la versione mobile 1196×400 px.

Questa è un'immagine orizzontale allungata nell'intestazione della comunità; non è cliccabile.

Copertina del nostro gruppo vk.com/prcyru

La copertina non è obbligatoria per la community; se non la installi l'avatar del gruppo si aprirà in formato intero a destra.

Gruppo senza copertura

Per evitare che la qualità della copertina si deteriori, l'amministrazione VKontakte consiglia di caricare un'immagine con una dimensione di 1590×400 px. Ma nella versione mobile, l'intera copertina non si adatta allo schermo, i bordi a destra e a sinistra sono ritagliati a 197px, quindi tutti i dati, i testi e le immagini che non possono essere tagliati sono meglio posizionati nell'area visibile, questa è 1196x400 px. E in alto, a circa 83 px, c'è una striscia con indicatori di comunicazione, livello di carica e altro.

Schema di copertina con segni

Le scritte rientrano nell'area visibile, l'icona delle impostazioni si sovrappone al testo solo per gli amministratori della comunità

Parte del titolo sulla copertina è stata tagliata

Molte persone consigliano di mettere delle frecce sulla copertina che incoraggino a cliccare su iscriviti o a scrivere un messaggio.

La freccia punta al pulsante di invio

La freccia punta a un pulsante con un messaggio

Screenshot delle statistiche del gruppo PR-CY

Se il pubblico guarda più spesso il gruppo dai telefoni cellulari, tale icona non ha senso, perché nell'applicazione mobile viene spostata e punta alla miniatura dell'avatar e non al pulsante di iscrizione o di messaggio.

La freccia punta all'avatar

La freccia indica un campo vuoto

Per evitare di contrassegnare le aree da soli, abbiamo realizzato un modello in formato psd con guide che delimitano le aree. Può essere scaricato.

Non molto tempo fa, VKontakte ha introdotto una funzione di copertina dinamica, il che significa che la copertina avrà dati variabili e verrà aggiornata dopo un certo periodo di tempo. Questa cover è comoda perché puoi visualizzare quasi tutto su di essa: i portali delle città potrebbero richiedere tempo, tassi di cambio, ingorghi o meteo, i gruppi che tengono promozioni o organizzano eventi trarranno vantaggio da un timer per il conto alla rovescia e la visualizzazione degli avatar degli utenti più attivi può essere incoraggiato a lasciare commenti o mettere mi piace ai post.

Un esempio di visualizzazione degli avatar dei partecipanti attivi sulla copertina

Avatar del nuovo abbonato in copertina

Per una copertina dinamica è necessaria un'immagine normale su cui verranno allegati gli inserti con avatar, meteo, ecc., uno script collegato a un gruppo e un hosting con supporto CronTAB dove verrà installato lo script. Se imposti l'aggiornamento della copertina troppo frequentemente, ad esempio ogni secondo, potresti aver bisogno di un anti-captcha.

Pyotr Samokhin ha parlato di come scrivere una sceneggiatura da solo su HabraHabr. Se non vuoi capirlo da solo, ci sono servizi di progettazione a pagamento ai quali puoi collegare un gruppo e personalizzare la copertina con le applicazioni necessarie pagando una piccola quota di abbonamento.

La funzionalità potrebbe essere diversa, ad esempio il design della community potrebbe cambiare completamente dopo aver cliccato sull'abbonamento. Funzioni aggiuntive sono sviluppate separatamente, puoi scrivere qualcosa tu stesso, puoi trovare gruppi nella ricerca su VKontakte stesso, dove sviluppano e vendono tali applicazioni.

Avatar

Dimensioni: non meno di 200x500 px e non più di 7000 px, proporzioni da 2 a 5.

Se un gruppo ha un'immagine di copertina, l'avatar verrà presentato solo come miniatura; la versione completa può essere visualizzata cliccando. Se non è presente alcuna copertina, verrà visualizzata per intero. Per confronto, il gruppo PR-CY con copertina e avatar e una variante dello stesso gruppo senza copertina:

Con copertina e avatar

Solo con un avatar

L'avatar può avere qualsiasi dimensione, non meno di 200x500 px e non più di 7000 px su ciascun lato, ma le proporzioni massime sono da 2 a 5. Cioè, non sarà possibile installare un'immagine molto allungata, noi provato:

L'editor non consente di selezionare un campo più allungato.

Menù Wiki

Dimensioni: la larghezza della pagina interna è di 607 px, la copertina è larga almeno 600 px.

Il formato wiki di VKontakte implica una pagina con la possibilità di formattare testo, creare elenchi e sottotitoli, inserire immagini cliccabili con transizioni a sezioni VKontakte e siti di terze parti. Nel formato wiki, spesso creano un menu e lo fissano nell'intestazione del gruppo per facilitare la navigazione nella comunità e fornire tutte le informazioni importanti in un unico posto.

Per un menu wiki avrai bisogno di una copertina, che servirà da illustrazione per il collegamento alla pagina del menu, e alle sezioni interne.

Copertina del menù

Frammento di sezioni all'interno del menu

La larghezza del campo per le pagine wiki è 607 pixel. Le immagini possono essere allungate o rimpicciolite specificando la dimensione nell'editor, che si apre facendo clic sull'immagine. Ma quando allungato e ridotto, la qualità peggiora. Le immagini vengono caricate automaticamente con un'altezza di 400 px.

Editor di immagini Wiki

La pagina wiki con le sezioni del menu è configurata nell'editor. Parleremo in dettaglio di come creare un menu wiki in un gruppo in un articolo separato. Successivamente, in un post sulla bacheca viene inserito un collegamento alla pagina; non è necessario, ma è auspicabile un'immagine. È selezionato come illustrazione normale per un post. Alleghiamo e salviamo il post, ora si aprirà la pagina wiki cliccando su “Visualizza” o sull'illustrazione.

Post di prova con il menu wiki

Messaggi

Dimensioni: almeno 600 px di larghezza per i post normali, almeno 510x288 px per un articolo nell'editor.

I post del feed supportano qualsiasi immagine, ma i diversi post hanno le proprie limitazioni.

Solo che il post può avere qualsiasi dimensione, ma è meglio che sia largo almeno 600 px, altrimenti l'immagine risulterà piccola e di scarsa qualità. Ad esempio, abbiamo scattato una foto quadrata, immagini con orientamento orizzontale e verticale, 1000 px di larghezza.

Visualizzazione sul desktop

Vediamo che le immagini sono allineate alla larghezza dello schermo, un'immagine quadrata occupa più spazio e l'immagine ha un bell'aspetto con orientamento orizzontale. Nell'orientamento verticale sulla versione desktop si sposta lateralmente e non è allineato al centro, mentre su mobile è al centro, ma si formano dei margini bianchi sui lati.

Visualizzazione mobile

Esiste un altro formato di post: un articolo nell'editor. La copertina dovrebbe essere orizzontale, l'immagine verrà compressa a una dimensione di 510x288 px. È meglio posizionare le immagini più lontano dal centro; non è nemmeno necessario scrivere un titolo, apparirà automaticamente al centro. Il titolo è scritto in carattere bianco, ma è evidenziato con un'ombra, in modo che le illustrazioni scure abbiano un aspetto migliore, ma il testo non venga perso su quelle chiare.

Illustrazione per un articolo con sfondo chiaro

Illustrazione di un articolo con sfondo scuro

Merce

Dimensioni: non meno di 600 px.

I prodotti devono essere illustrati; senza foto non verranno pubblicati. Puoi caricare immagini con qualsiasi orientamento, ma assicurati di selezionare un quadrato come miniatura per la linea di prodotti:

L'editor non consente di allungare l'area di selezione delle miniature

Il quadrato installato verrà mostrato nella riga prodotto; cliccandolo si aprirà la scheda prodotto con l'immagine originale.

Miniatura di un prodotto della linea di prodotti

Apri la scheda prodotto

Riga con i prodotti del gruppo PR-CY

Apri la scheda prodotto

La dimensione dell'immagine stessa non deve essere inferiore a 400 e non superiore a 6000 px per lato. E ti consigliamo di progettare le immagini delle schede prodotto nello stesso stile in modo che abbiano un bell'aspetto nell'elenco dei riquadri.

Se vuoi saperne di più sulla gestione dei gruppi sui social network, potrebbero interessarti gli altri nostri articoli della serie SMM.

Il bellissimo design della community VKontakte non è un capriccio, ma un elemento importante che crea fiducia negli utenti in te e nella tua azienda. Se una pagina o un gruppo pubblico è progettato in modo non professionale, i tuoi potenziali clienti potrebbero logicamente concludere che sei altrettanto negligente nel tuo lavoro. Per evitare che ciò accada, assicurati che la tua pagina VKontakte sia bella, ordinata e facile da usare. Come farlo? Leggere sotto.

Dimensioni attuali delle immagini VKontakte

Qualche tempo fa, gli sviluppatori del social network VKontakte hanno lanciato un nuovo design. Ciò ha portato a cambiamenti nelle dimensioni e nei principi di visualizzazione delle immagini. Il promemoria, che verrà fornito di seguito, corrisponde a tutte le innovazioni e contiene le dimensioni rilevanti al momento.

Ora entriamo più nel dettaglio su ogni punto.

Dimensioni dell'avatar VK

La dimensione minima dell'avatar è 200 x 200 pixel. Se provi a caricare un'immagine larga o lunga meno di 200 pixel, vedrai un errore come questo:

La dimensione massima dell'avatar è 200 x 500 pixel. Ma, in linea di principio, puoi caricare immagini più grandi – fino a 7000 pixel su ciascun lato. La cosa principale è che le proporzioni non superino 2 a 5.

Te lo mostrerò con un esempio.

Ho un'immagine. Le sue dimensioni: 200 x 800 pixel (rapporto da 2 a 8). Non ci sono errori durante il caricamento. Tuttavia non riesco ancora a utilizzare questa immagine perché "Contatti" non mi consente di selezionarla completamente.

Copertina

La dimensione della copertina per la versione completa del sito è 1590 x 400 pixel.

Attenzione: nella versione mobile e nelle applicazioni non viene visualizzata la versione completa della copertina, ma solo una parte di essa che misura 1196 x 400 pixel. Guarda come viene ritagliato nell'app mobile:

Per evitare che ciò accada, posiziona gli elementi principali della tua copertina entro 1196 x 400 pixel.

Immagini allegate

Nel design aggiornato di Contact, la larghezza del feed di notizie è stata fissata. Ciò significa che le immagini allegate al post non vengono più allungate, ma rimangono così come sono. Pertanto, se vuoi che la tua immagine occupi tutto lo spazio nel news feed, la sua larghezza deve essere di almeno 510 pixel. È meglio se è un quadrato o un rettangolo con orientamento orizzontale.

Sembra un po' confuso :) Quindi te lo mostrerò con un esempio.

Diciamo di avere un'immagine di forma quadrata con lati di 510 pixel. Se lo alleghiamo al nostro post, apparirà molto bene nel feed delle notizie su tutti i dispositivi:

Ed ecco come appare un'immagine orizzontale con orientamento orizzontale (larghezza 510 pixel):

Come puoi vedere, più stretta è l'immagine (in altezza), più piccola apparirà nel feed dello smartphone. Per vederlo, guarda l'immagine qui sotto:

È chiaro che la differenza qui non è particolarmente critica, e gli utenti di smartphone guarderanno comunque la tua immagine, solo che nel secondo caso si sentiranno un po' più a loro agio.

Immagini per post con collegamenti

Tutti questi dati provengono dal codice di markup Open Graph:

Se Open Graph non è specificato, il titolo viene preso dal meta tag Title e l'immagine dall'articolo. Allo stesso tempo, puoi facilmente cambiarlo o selezionare un'altra immagine dall'articolo utilizzando frecce speciali:

Oppure carica il tuo:

La dimensione minima di un'immagine che puoi utilizzare come annuncio per il tuo articolo è 537 x 240 pixel. Tuttavia, puoi caricare immagini più grandi purché vengano mantenute le proporzioni.

Immagine per un articolo creato nell'editor

La dimensione dell'immagine per la copertina di un articolo creato nell'editor è 510 x 286 pixel. È meglio se di colore scuro e più o meno monocromatico, poiché su sfondo chiaro si perde il nome dell'articolo e della comunità.

Buon esempio:

Non è un ottimo esempio:

Dimensioni di foto e video per le storie

La dimensione delle foto è 1080 x 1920 pixel. La dimensione del video è 720 x 1280 pixel.

Specifiche tecniche per le registrazioni video:

• fino a 15 secondi;
• non più di 5 MB;
• codec h.264;
• Suono AAC.

Le storie devono utilizzare foto e video in formato verticale.

Nota: le storie per conto delle comunità attualmente possono essere aggiunte solo da grandi comunità per le quali gli sviluppatori VKontakte hanno aperto questa funzione. E questo viene fatto utilizzando l'applicazione ufficiale. Questa operazione non può essere eseguita da un computer.

Dimensioni della copertina dell'album fotografico

Dimensioni dell'immagine video

1280 x 720 pixel.

Pagina Wiki

La larghezza dell'area del contenuto di una pagina wiki è 607 pixel. Se carichi un'immagine più grande, verrà caricata automaticamente con una larghezza di 400 pixel. Esempio: ho un'immagine che misura 1366 x 768. Se la aggiungo alla pagina wiki, ecco come apparirà:

Per modificare la dimensione di un'immagine è necessario cliccarci sopra e impostare i valori desiderati:

Parlerò in dettaglio di come lavorare con le pagine wiki di seguito. Pertanto non ci soffermeremo qui su questo punto.

Come assicurarsi che le immagini VKontakte non si riducano? L'influenza dello sfondo e delle dimensioni sulla qualità dell'immagine.

Se hai mai provato a caricare immagini VKontakte (non importa se si trattava di un'immagine avatar o semplicemente di una foto del tuo viaggio), probabilmente sai già che tendono a ridursi. Ciò è particolarmente evidente su uno sfondo scuro (e soprattutto rosso) e quando l'immagine non è di dimensioni troppo grandi. Esempio:

Come assicurarsi che la qualità delle immagini non si deteriori?

Per evitare che l'immagine si riduca (o meglio si restringa, ma in misura molto minore), è necessario renderla 2-3 volte più grande della dimensione desiderata. Se ad esempio dobbiamo realizzare un avatar di 200 x 500 pixel, scattiamo una foto di 400 x 1000 pixel. Se devi creare un menu con una dimensione di 510 per 400 pixel, prendi 1020 per 800.

L'immagine su sfondo blu scuro, che ho mostrato appena sopra, ha una dimensione di 510 x 350. L'ho ingrandita il doppio (1020 x 700) e l'ho salvata. Questo è quello che ne è venuto fuori:

Come sistemarlo? La risposta è molto semplice: devi scegliere uno sfondo diverso. Il fatto è che i pixel sono visibili meglio su uno sfondo scuro che su uno chiaro. Pertanto, se vuoi ottenere una qualità perfetta (anche se l'immagine sopra sembra già abbastanza normale), devi modificare leggermente la combinazione di colori. Ad esempio, rendi lo sfondo bianco e il testo blu:

Come progettare un'intestazione di pagina

L'intestazione della tua pagina o gruppo pubblico è la prima cosa che gli utenti vedono quando vengono a visitarti. Nella maggior parte dei casi, questo luogo contiene un menu di navigazione per materiali pubblici, alcuni post interessanti o annunci importanti. Diamo un'occhiata ad esempi di come diverse aziende utilizzano questo spazio.

Copertina

Non molto tempo fa, VKontakte ha introdotto un aggiornamento: ora puoi caricare copertine grandi e belle (1590 per 400 pixel) sulle pagine. Per fare ciò, vai alle impostazioni e fai clic sul pulsante "Download".

Sulla copertina puoi inserire tutto ciò che desideri: dal nome e motto della tua azienda, a tutti i tipi di promozioni, offerte e persino concorsi.

Consiglio di prestare particolare attenzione alle possibilità di una copertina dinamica. Leggi il nostro articolo su come funziona, per quali scopi può essere utilizzato e con quali servizi può essere installato.

Esempi di copertine dinamiche:

Copertina + descrizione della community + collegamento al sito web

Alcune aziende specificatamente non fissano alcun post nell'intestazione in modo che gli utenti abbiano l'opportunità di leggere le informazioni di base sulla pagina e accedere immediatamente al sito.

Descrizione con hashtag

Alcune aziende aggiungono degli hashtag alla descrizione standard della pagina che la caratterizzano. Questo viene fatto in modo che la pagina abbia una pertinenza più chiara e, per questo motivo, sia più alta nella ricerca di query pertinenti. Onestamente non so se questo metodo funzioni oppure no. Non ho visto nessun caso su questo argomento, quindi se qualcuno lo sa, sarei grato se potessi condividere il link.

Post appuntato che spiega di cosa tratta la pagina

Se vuoi raccontare la tua pagina in modo più dettagliato (con foto, collegamenti e un bel layout), puoi allegare all'intestazione un post wiki o un articolo realizzato nell'editor, con un'immagine luminosa sull'annuncio che incoraggerà gli utenti per fare clic su di esso. Un esempio di un post del genere:

E questo è ciò che l'utente vede dopo aver cliccato sul collegamento:

Il menu del gruppo è aperto

Chiamo menu aperto un menu che mostra immediatamente in quali elementi è composto. Cioè, l'immagine dell'annuncio del post wiki duplica completamente il suo contenuto. Pertanto, gli utenti vedono immediatamente cosa li attende all'interno. Te lo mostrerò con un esempio.

Ecco come appare un post appuntato nell'intestazione della pagina Flatro:

Il menu del gruppo è chiuso

Un menu chiuso è lo stesso post wiki del paragrafo precedente, solo che l'annuncio contiene un'immagine senza voci di menu. Di solito ci scrivono sopra: “Menu”, “Menu di navigazione” o “Navigazione attraverso materiali pubblici”.

E questo è ciò che vediamo quando facciamo clic su di esso:

A proposito, vale la pena notare che queste non sono le uniche opzioni. Fondamentalmente, puoi scrivere quello che vuoi su questa immagine. La cosa principale è che l'utente vuole fare clic su di esso e capisce cosa lo attende dopo. Esempio:

Menu unito per un gruppo

Un menu unito avviene quando l'immagine nell'annuncio del tuo menu forma un'unica immagine con l'avatar. Di seguito ti dirò in dettaglio come realizzare un menu del genere, ma per ora guarda quanto è bello.

GIF e avatar in un'unica immagine

Ma questa opzione di design per il cappello mi ha davvero deliziato. La GIF riprodotta automaticamente si fonde con l'avatar in un'unica composizione e attira l'attenzione degli utenti, anche se non ci sono informazioni al riguardo.

A proposito, ho notato questo esempio nel gruppo del marketer SMM Sergei Shmakov. Quindi gli esprimo la mia gratitudine per il ritrovamento :)

Menù nascosto

Il menu nascosto è disponibile solo per i gruppi (le pagine non hanno questa funzionalità). Per vederlo è necessario cliccare sul link apposito. Il vantaggio di questo metodo di progettazione è che gli utenti possono vedere le informazioni principali della comunità e, se vogliono utilizzare il menu, basta fare un clic. Tuttavia, qui c'è un piccolo svantaggio: non tutti gli utenti conoscono l'esistenza di questa funzione, quindi il tuo menu potrebbe ricevere meno attenzione che se fosse bloccato nella parte superiore della pagina.

Video con riproduzione automatica

Alla fine di novembre 2015, sul social network VKontakte è apparsa un'innovazione interessante: non appena un utente visita la tua pagina, il video allegato all'intestazione inizia a essere riprodotto automaticamente. Con questa tecnica potrai attirare ancora più attenzione da parte degli utenti (soprattutto quelli che hanno visitato la tua pagina per la prima volta) e, allo stesso tempo, non irritare chi non ama farsi imporre i propri contenuti, perché il video viene riprodotto senza suono e praticamente non interferisce.

Come aggiungere un video del genere all'intestazione della tua pagina?

Per fare ciò devono essere soddisfatte tre condizioni:

• Allega il video al post e fissa questo post nella parte superiore della community.
• A parte il video, alla registrazione non deve essere allegato nient'altro. Solo video e testo opzionali.
• Il video deve essere caricato su VKontakte: i lettori di terze parti non sono supportati.

Un post che ottiene tantissime condivisioni

Un altro modo per utilizzare in modo produttivo lo spazio nell'intestazione della tua pagina è appuntare al suo interno uno dei tuoi post di maggior successo, uno che ha già ricevuto e continua a ricevere un gran numero di Mi piace e condivisioni. Perché farlo, penso che tutti capiscano: più ripubblicazioni, maggiore è la portata, più abbonamenti riceve la pagina.

Annunci di nuovi video, album, eventi

Presentazione di nuovi prodotti/servizi

Sconti e promozioni

Casi, recensioni dei clienti

Pubblicità dell'applicazione

Scherzi pratici

Regole della comunità

Collegamenti ad altri social network

Non ho elencato tutte le opzioni di progettazione dell'intestazione. Fondamentalmente, puoi inserire qualsiasi tipo di informazione nella tua copertina e nel post appuntato: offerte di lavoro, annunci, collegamenti ai prodotti più venduti, ecc. Quindi non limitarti agli esempi sopra. Usa la tua immaginazione e usa il design della tua comunità per raggiungere i tuoi obiettivi.

Come dovrebbe essere un avatar?

Un avatar non è solo una bella immagine con il logo della tua azienda, ma uno strumento di lavoro di un marketer con il quale raggiunge i suoi obiettivi. Vediamo nel dettaglio come dovrebbe essere per attirare l'attenzione degli utenti e invogliarli a compiere l'azione target. Cominciamo con la miniatura.

Miniatura dell'avatar

1. Il testo sulla miniatura del tuo avatar dovrebbe essere abbastanza grande da poter essere letto.







2. Il testo non dovrebbe estendersi oltre la miniatura.







3. Gli utenti dovrebbero capire cosa viene mostrato sull'avatar.







4. Se possibile, è meglio non utilizzare immagini stock, poiché spesso riducono la credibilità dell’azienda.




5. Non è auspicabile che la miniatura dell'avatar sia troppo sbiadita e noiosa, altrimenti andrà persa sullo sfondo degli avatar più luminosi dei concorrenti.



6. Se vuoi che il tuo avatar abbia un aspetto moderno, realizzalo in uno stile minimalista: meno testo, ombre, sfumature ed elementi che non portano alcun carico semantico. Il tuo avatar dovrebbe essere il più semplice e ordinato possibile. Questo stile è attualmente di tendenza.







7. Se il tuo obiettivo è attirare l'attenzione degli utenti e distinguerti dagli altri avatar nel feed, dovrai usare la tua immaginazione. Pensa a cosa presti attenzione quando cerchi comunità interessanti? Ad esempio, più di una volta sono stato attratto da avatar con una luce accesa, che solitamente indica l'arrivo di un nuovo messaggio. Questa è una tecnica molto antica, ma per qualche motivo mi colpisce ancora: quando vedrò una luce del genere, terrò sicuramente lo sguardo su di essa.

Non sto dicendo che questa tecnica funzionerà sulla tua pagina. Il punto che voglio far capire è che ci sono molti, molti modi per distinguersi, devi solo chiedertelo ed essere un po’ creativo. Ecco, ad esempio, un'altra idea interessante a cui difficilmente avrei pensato da solo:

L'avatar è un cerchio nero: grande e piccolo. Sembrerebbe, perché farlo? Ma quando si scorre l'elenco delle comunità, questi avatar attirano l'attenzione perché sono molto diversi da tutti gli altri.

Quali informazioni possono essere inserite nella miniatura di un avatar?

Anche se la miniatura dell'avatar è molto piccola, può (e dovrebbe) essere utilizzata per attirare follower nella tua community. Come farlo? Diamo un'occhiata ad alcune opzioni:

Annuncio di un nuovo prodotto/servizio/evento

Vantaggi dell'azienda/servizio/pagina

Numero di telefono dell'azienda

Prezzi favorevoli

Spedizione gratuita

A proposito, molto spesso l'informazione che l'azienda fornisce la consegna gratuita viene aggiunta al nome del gruppo stesso in modo che gli utenti prestino sicuramente attenzione ad essa.

Azione

Concorsi

Posti vacanti

Come dovrebbe essere l'avatar stesso?

Ho guardato quale dovrebbe essere la miniatura dell'avatar e quale testo potrebbe essere inserito su di essa. Passiamo ora all'avatar stesso. La versione completa dell'avatar verrà visualizzata solo nella community in cui la cover non è installata. È per questi casi che ho scritto questa sezione. Quindi, come dovrebbe essere l'avatar della tua community in modo che gli utenti capiscano immediatamente che la tua azienda ha affrontato la creazione della pagina in modo responsabile e professionale.

1. L'avatar deve essere di alta qualità. Ho scritto su come raggiungere questo obiettivo un po 'più in alto. Per coloro che si sono persi questa parte, te lo dirò brevemente: la dimensione dell'avatar dovrebbe essere 2-3 volte più grande di quella pianificata.
2. È consigliabile che l'avatar sia combinato con il menu: abbia la stessa combinazione di colori, abbia gli stessi caratteri, elementi, ecc. Grazie a ciò, l'intestazione della tua pagina apparirà più ordinata e professionale. Esempio:
3. L'avatar stesso e la miniatura dell'avatar potrebbero essere diversi. Ad esempio, puoi disegnare un cerchio sul tuo avatar, progettarlo come preferisci, selezionare quell'area come miniatura e progettare il resto dell'avatar in uno stile diverso.




Un'altra opzione è dividere l'avatar in due parti. Uno è per la miniatura e il secondo è per il resto dell'avatar.




4. Per incoraggiare gli utenti a iscriversi alla tua pagina o a scrivere un messaggio a un rappresentante dell'azienda, puoi inserire un invito all'azione corrispondente nella parte inferiore dell'avatar e accompagnarlo con una freccia che punta al pulsante.




5. Cerca di non inserire troppe informazioni sul tuo avatar, altrimenti sembrerà sovraccarico e disordinato. Aggiungi solo i punti più importanti e assicurati che ci sia "aria" tra di loro.

Quali informazioni possono essere inserite in un avatar?

Fondamentalmente, puoi mettere tutto quello che vuoi sul tuo avatar. A differenza della miniatura, qui c'è davvero spazio per girovagare. L'importante è non abusarne :)

Dominio del sito

Telefono/indirizzo/orari di apertura

Concorsi/promozioni

Prodotti più acquistati/nuovi articoli

informazioni sulla consegna

Pubblicità su app mobili

I principali vantaggi dell’azienda/pagina/prodotto, ecc.

Aggiornamento dell'assortimento/nuova creatività, ecc.

Informazioni che la tua comunità è ufficiale

Informazioni sui prossimi eventi

Indirizzi di account in altri social network

Descrizione estesa della pagina

Si vanta

In generale, puoi inserire assolutamente qualsiasi informazione sul tuo avatar. Ho appena incluso alcune idee in modo che tu possa vedere cosa stanno facendo gli altri e trarre ispirazione. Bene, tieni a mente i consigli di base: l'avatar dovrebbe essere di alta qualità, il carattere dovrebbe essere grande e dovrebbe esserci più "aria" tra gli elementi.

Come creare un avatar e un menu senza soluzione di continuità

Per creare un avatar e un menu uniti, avrai bisogno di Adobe Photoshop o un suo equivalente. Spiegherò l'intero processo utilizzando Photoshop come esempio. Quindi andiamo.

1. Scarica il modello Photoshop che ho preparato appositamente per questo articolo. In dimensioni normali (menu – 510 pixel di larghezza, avatar – 200) o ingrandite (menu – 1020 pixel di larghezza, avatar – 400).
2. Apri l'immagine che desideri utilizzare come base.
3. Copialo, incollalo nel modello e posizionalo nel modo in cui vorresti tagliarlo.

1. Aggiungi effetti, testo, grafica, ecc.

1. Se non vuoi perdere parte dell'immagine (nello spazio di 50px), spostala a destra come mostrato nella seguente GIF:

1. Seleziona lo strumento “Taglio” e fai clic sul pulsante “Frammenti lungo le guide”.

1. Elimina i frammenti non necessari (fai clic con il pulsante destro del mouse - "Elimina frammento") e modifica quelli esistenti (fai clic con il pulsante destro del mouse - fai clic in uno spazio vuoto - prendi l'area desiderata e allungala alla dimensione desiderata).

1. Vai alla sezione "File" e seleziona il comando "Salva per Web".

1. Vai nella posizione in cui hai salvato le immagini (desktop o una directory specifica) e trova una cartella chiamata "Immagini". Qui è dove andranno le tue immagini. Ora non resta che compilarli nella pagina.

PS L'altezza dell'avatar può essere modificata a tua discrezione. Ho preso la dimensione massima: 500 pixel, ma il tuo valore potrebbe essere inferiore. Ad esempio, come nella pagina “Wiki Markup”:

Come utilizzare i widget

Anche i widget fanno parte del design della comunità VK. Utilizzandoli l'utente può: effettuare un ordine, iscriversi alla propria newsletter, partecipare ad un concorso, leggere e lasciare recensioni, aprire una ricerca nella community, ricevere un regalo, un buono sconto, ecc.

Ecco alcuni esempi di come appaiono i widget nella pagina VKontakte:

Come progettare immagini per i post

Se sei un web designer o hai un gusto artistico e un senso della bellezza, non sarà difficile per te trovare uno stile aziendale per le tue immagini. Tuttavia, mi sembra che queste persone saranno in minoranza in questo articolo (a proposito, non sono nemmeno uno di loro). Pertanto, diamo uno sguardo più da vicino a come ciò viene fatto, sulla base di esempi di aziende di successo.

A proposito, tieni presente che quasi tutte le famose aziende VKontakte marchiano le loro immagini, ovvero aggiungono un piccolo logo, l'indirizzo della loro pagina o una filigrana. Ciò aumenta la notorietà del marchio e protegge le tue immagini dalla copiatura. Spetta a ciascuno decidere se valga la pena farlo o meno. L'unica cosa che mi sento di consigliare è: se decidete di fare questo, cercate di fare in modo che il vostro logo non sia troppo luminoso e non occupi troppo spazio, altrimenti tutta l'enfasi andrà su di esso, e l'immagine verrà perdere la sua attrattiva.

Dove posso trovare buone immagini?

Abbiamo un buon articolo su questo argomento sul nostro blog - "". Sono tutti gratuiti, ma alcuni richiedono la registrazione. Se non trovi nulla di adatto a te, prova a cercare per parola chiave + sfondo (o, se in inglese, sfondo). In genere, questo tipo di richiesta produce immagini di alta qualità. Ma qui bisogna stare attenti e controllare il tipo di licenza, altrimenti, se hai un'attività seria, potresti finire nei guai.

Cosa dovrebbe fare chi non sa lavorare con Photoshop?

Se non hai mai lavorato con Photoshop (o altri editor grafici) e non sei ancora pronto a dedicare tempo a padroneggiarlo, puoi utilizzare servizi che dispongono già di modelli di immagini già pronti per diversi social network:

1. Fotor.com

Successivamente, sul lato sinistro dello schermo, seleziona il modello che ci interessa. Tieni presente che solo i modelli che non hanno l'icona del diamante vengono forniti gratuitamente.

Lo inseriamo nel template, lo selezioniamo con il tasto sinistro del mouse, selezioniamo il comando Layer (icona sandwich) e clicchiamo su Sposta in fondo. In questo modo la nostra immagine andrà in secondo piano e tutte le iscrizioni si sovrapporranno ad essa.

Successivamente, modifichiamo il testo, il carattere, la dimensione del carattere, la posizione dell'iscrizione, ecc.

Clicca quindi sull'icona del floppy disk, seleziona il nome, il formato dell'immagine, la qualità e clicca sul pulsante Accedi per scaricare.

2. Canva.com

Un altro servizio che ti aiuterà a progettare magnificamente la tua immagine. Funziona secondo lo stesso principio del precedente. Registrati al servizio (puoi utilizzare il tuo account Google+ o la tua email).

Scegli il tuo campo di attività. Saltiamo il passaggio in cui ti viene chiesto di invitare gli amici. Arriviamo al menu principale, dove selezioniamo un post di Facebook se abbiamo bisogno di una foto rettangolare o un post di Instagram se è quadrata.

Seleziona un modello (se il modello è contrassegnato come "GRATUITO", significa che è gratuito), modifica il testo.

Se necessario, carica la tua immagine, regola le dimensioni, modifica il testo, il carattere e la posizione dell'iscrizione. Successivamente, fai clic sul pulsante "Download", seleziona il formato dell'immagine e salvalo sul tuo computer o su qualsiasi altro dispositivo.

Come formattare gli articoli nell'editor

Recentemente VKontakte ha reso possibile scrivere articoli in un editor speciale. Per creare un articolo è necessario cliccare sulla lettera “T”:

Come utilizzare il markup wiki

Bene, qui arriviamo alla sezione più interessante e allo stesso tempo difficile. Forse ci sono persone tra i lettori che non sanno cosa sia il markup wiki e sentono questo termine per la prima volta. Pertanto, soprattutto per te, darò la definizione che dà lo stesso “Contatto”.

Il markup wiki è un linguaggio di markup utilizzato per formattare il testo sui siti Web (solitamente classificati come progetti wiki) e consente un accesso più semplice alle funzionalità del linguaggio HTML. Sul nostro sito, le pagine wiki sono una buona alternativa ai post regolari e alla navigazione testuale. Se devi creare un articolo di grandi dimensioni con una diversa formattazione del testo (grassetto, sottolineato, titoli, ecc.) o aggiungere grafica, o semplicemente creare un menu di navigazione colorato per la tua comunità, un wiki è indispensabile.

Proprio come Wordpress (o qualsiasi altro CMS) ha un editor HTML con cui crei articoli, Contact ha un proprio editor per creare e modificare pagine wiki. Sembra questo:

Utilizzando questo editor vengono creati menu di navigazione, nonché articoli con immagini, video e registrazioni audio. Di seguito discuterò in dettaglio come lavorare in questo editor, ma prima ti chiedo di aggiungere due collegamenti ai segnalibri. Ti aiuteranno molto nell'apprendimento del markup wiki.