Creando una miniatura para un grupo en VK. Cómo organizar correctamente un grupo VKontakte: elementos básicos y chips útiles

En este artículo, me gustaría sistematizar todo mi conocimiento sobre el diseño de grupos VKontakte en base a mi experiencia de interacción con clientes y sus preferencias. Además, durante los últimos seis meses, VKontakte ha realizado muchos cambios que muchos ni siquiera sospechan. Me gustaría detenerme en algunas innovaciones con más detalle, ya que entre ellas hay cosas realmente valiosas y útiles. Parece que todos ya nos hemos recuperado de algún shock tras el rediseño de VKontakte, y detrás de los cambios visibles, se reveló la multivariancia del funcionamiento y contenido del grupo. Así que ahora el diseño de grupos implica un procedimiento complejo que no se limita exclusivamente al componente gráfico en forma de bellas imágenes. Ahora los propietarios deben tener en cuenta muchos matices de la construcción de una estructura de grupo, según el tema del negocio y la conveniencia de los usuarios.

Esto se refiere principalmente a la elección del diseño gráfico entre dos opciones mutuamente excluyentes, desarrollar un menú interno, elegir un punto de entrada al menú interno, comprender la diferencia entre un catálogo y una vitrina de productos, preparar materiales promocionales para promover un grupo, utilizar aplicaciones útiles... Pero lo primero es lo primero. Primero, veremos los elementos principales del diseño del grupo, luego pasaremos a su interacción en forma de varias combinaciones y luego hablaremos sobre algunos trucos y sutilezas útiles.

1. Cubierta horizontal (encabezado)
Comencemos con una portada o encabezado horizontal. Los desarrolladores de VKontakte aseguran que la cubierta, por su tamaño, otorga una gran flexibilidad en el suministro y visualización de la información. Por lo general, además hermosa foto en el encabezado hay un logotipo, información adjunta, contactos, un llamamiento para unirse al grupo, la dirección del sitio. Tengo la sospecha de que algún día las mantas serán las únicas opción posible registro del grupo, por lo tanto, recomendaría cambiar inmediatamente a ellos para evitar rediseños de fuerza mayor más adelante.

Cómo subir una portada
Para descargar la portada, debe ir a Gestión de la comunidad >> Información básica >> Portada de la comunidad >> Descargar. El tamaño de portada recomendado es de 1590 × 400 píxeles. No puede haber ningún botón de trabajo en el encabezado en el que pueda hacer clic; de hecho, esta es una imagen y eso es todo. A partir de hoy, la portada es visible en dispositivos móviles ah, y parece que ya está visible en aplicaciones y clientes.

Pestaña Wiki Últimas noticias
En el bloque superior debajo del encabezado, ahora puede haber tres pestañas: una entrada fijada, información sobre la comunidad y un menú wiki (solo en grupos, no existe dicha pestaña en las páginas públicas). El énfasis todavía está en la publicación fijada, pero incluso con su presencia, el usuario ahora siempre tendrá acceso a la información sobre la comunidad, cambiando de pestañas. Para ver la pestaña del menú wiki (originalmente llamada Fresh News), debe ir a Community Management »Secciones» Contenido »Restringido (o Abierto)» Guardar.

2. Avatar vertical
Ahora dirijamos nuestra atención al viejo avatar grupal, de 200x500 píxeles de tamaño. Hasta ahora, también es una forma de decorar un grupo. Por lo general, la siguiente información se encuentra en el avatar: logotipo, texto o eslogan que lo acompaña, contactos, llamada para unirse al grupo. En los dispositivos móviles, el avatar completo no es visible, solo una parte es visible: una miniatura. Para decorar el grupo, puede usar un encabezado horizontal (portada) o un banner vertical. Si hay un encabezado, el avatar vertical no es visible. No puede haber ningún botón de trabajo en el avatar en el que pueda hacer clic; de hecho, esta es una imagen y eso es todo.

3. Miniatura
Actualmente, se utiliza un avatar vertical para crear una miniatura, cuyo tamaño mínimo es de 200x200 píxeles. La miniatura se usa en publicaciones y publicaciones como un círculo pequeño en el título y como un círculo más grande en algunas selecciones y menciones de la comunidad. En relación con la transición a una forma redondeada, los requisitos para las miniaturas se han vuelto más estrictos. Para que el texto en una miniatura se lea completamente, visualmente no debe ir más allá de los límites del círculo.

Cómo subir una miniatura
La miniatura se ha convertido en un elemento completamente independiente, y al usar la portada (cabecera) en el diseño del grupo, ahora tienes que hacer una miniatura aparte, tenlo en cuenta. Si el grupo no tiene un encabezado (portada), para descargar una miniatura, debe hacer clic en "Cargar foto" en el bloque de avatar (arriba a la derecha). Si hay un encabezado (portada) en el diseño, para descargar la miniatura, debe hacer clic en el círculo inmediatamente debajo del encabezado y seleccionar el elemento "Cargar foto" allí.

4. Banner
Pancarta (pancarta en inglés - bandera, pancarta) - imagen grafica informativos, publicitarios o de incentivo. El banner se adjunta como una imagen a la publicación y solo puede tener un enlace interno. Mucha gente todavía está convencida de que se pueden crear varios enlaces desde un banner en la página de inicio. Este no es el caso, solo un enlace y ya está. Destacaría los siguientes tipos de banners.

4.1 Banner de información
Un tipo común de banner que contiene información general sobre una empresa, grupo, servicio o evento con una lista detallada de ventajas y otros materiales de acompañamiento. A menudo se usa como publicación fijada en un grupo. El tamaño de dicho banner es de 510x307 píxeles. En este tamaño, el banner en la parte inferior coincide con el avatar. Si no hay un vínculo con el avatar, puede usar cualquier tamaño. Por ejemplo, utilizo 600x350 píxeles. El formato de un cuadrado de 510x510 píxeles también es conveniente y está ganando popularidad ahora: con este tamaño, el banner ocupa el área más grande posible en el servicio de noticias.

4.2 Banner para ingresar al menú interno
Si agregamos una inscripción pegadiza "Abrir menú" al banner del párrafo anterior, obtendremos un banner, cuya tarea principal es servir como punto de entrada al menú interno. A veces hacen un truco en forma de varios botones en el banner, pero esto es una ilusión, cuando el usuario hace clic, todavía llega a la página interna, y allí cada botón tiene su propio enlace. El tamaño de dicho banner es de 510x307 píxeles. Con este tamaño, el banner de la parte inferior coincide con el avatar. Si la entrada al menú no está vinculada a un avatar, puede crear cualquier tamaño de banner, incluso un botón estrecho con la inscripción "Abrir menú". Lo principal es que el ancho del banner debe ser de al menos 510 píxeles.

4.3 Tarjeta para repost, promociones
Recientemente, las tarjetas para reposts o promociones han adquirido especial relevancia. Su tarea es llamar a acciones concretas. Básicamente se trata de "Únete a un grupo, vuelve a publicar o me gusta y gana un premio". Dichos banners se utilizan como parte de campañas publicitarias o promociones tanto en sus propios grupos como para la promoción en otros grupos. Yo suelo utilizar 600x350 píxeles.

4.4 Banner con animación gif
Después de que los desarrolladores de VK hicieron un tamaño más grande para las imágenes gif a principios de año, los gifs se colocaron inmediatamente en una fila con pancartas de información. Por ejemplo, en un banner GIF, puede proporcionar imágenes de varios productos o textos cambiantes; el movimiento atrae la atención de inmediato. Y cuando se agregó la función en junio animaciones gif autorun en el servicio de noticias, los gifs se han convertido en el objeto de una gran atención por parte de anunciantes y especialistas en marketing.

5. Diseño de avatar + banner fijo
Hasta hace poco, este diseño modular, que constaba de un avatar y un banner con alfileres, era la forma más popular de decorar grupos. En la lección se describen más detalles sobre cómo hacer un diseño de este tipo. Con la llegada de la tapa (cubierta), la popularidad de este diseño puede disminuir ligeramente.

Además, existe la posibilidad de que VKontakt vuelva a cambiar algunos parámetros de los bloques y luego todo el diseño salga volando, como ya ha sucedido dos veces en los últimos seis meses. Entonces, queridos propietarios de grupos, al elegir un diseño para su grupo, tomen en cuenta este hecho. Sí, y una cosa más, en los dispositivos móviles, toda la belleza de una sola imagen no es visible, ya que no se muestra el avatar, sino solo una miniatura, y la publicación anclada se encuentra justo debajo.

6. Menú de navegación interno
Menú en el formulario enlaces activos se encuentra en la página interna de VKontakte y está escrito usando comandos de marcado wiki. En la lección se describe cómo crear la página interior. Con la ayuda del menú, el usuario navega por el grupo. A continuación, considerará los tipos de menú interno, pero por ahora vamos a detenernos en algunos puntos importantes.

Puntos de entrada en el menú interno
Quiero señalar un punto sutil que a menudo se pasa por alto. A veces, los clientes me piden un menú interno, pero al mismo tiempo no tienen la menor idea de cómo llegará el usuario a este menú interno. Y puede acceder a él de dos formas: a través de un banner fijo (consulte el párrafo 4.2) o mediante un enlace de texto en la pestaña superior debajo de la barra de estado (consulte la figura siguiente). A veces, un enlace de texto también se coloca en el bloque "Enlaces" en la columna derecha de la interfaz.

Enlaces de menú internos
Por lo general, al realizar el pedido, los clientes indican los siguientes elementos del menú: Acerca de nosotros, Nuestros productos (catálogo), Métodos de entrega, Pago, Garantías, Reseñas, Contactos, Promociones, Descuentos, Programación, Cómo realizar pedidos, Portafolio, Preguntas y respuestas, Información, Hacer un pedido. Los enlaces de los elementos del menú pueden ir a las secciones correspondientes del sitio externo. Luego, el enlace se abrirá automáticamente en una nueva ventana. La mayoría de los puntos conducen a las páginas internas de VKontakte. En este caso, la página se abre en la misma ventana y hay que hacer un enlace o un botón "Volver al menú principal".

Los enlaces a álbumes con fotos y videos se abrirán en una nueva ventana. Enlaces a temas con discusiones (por ejemplo, Reseñas), a un cuadro de diálogo para escribir mensajes, a aplicaciones (ver párrafo 10), a una selección por hashtags (ver párrafo 12) se abren en la misma ventana y en este caso puede obtener volver al menú solo a través de pagina de inicio sitio, o mediante el botón "Atrás" en el navegador. Este es quizás el momento más inconveniente con estos enlaces.

Editar menús
Los clientes a menudo me preguntan si es posible editar el menú interno. Yo respondo si tu usuario seguro y está familiarizado con los modos de edición y marcado de wiki, entonces puede editar. Pero si no está familiarizado con todo esto, entonces absolutamente no. En este caso, simplemente elimine todos los ajustes.

Citaré las palabras de los propios desarrolladores de VKontakte. “Un simple consejo le ahorrará mucha energía y nervios: trabaje solo en un modo. O es el modo visual o el modo de marcado wiki. Es el cambio entre estos dos modos en el proceso de trabajar en el marcado lo que trae la mayoría de los problemas: las imágenes pueden encogerse, varios parámetros pueden desaparecer. Este es uno de esos momentos que definitivamente se corregirá en el futuro, pero por ahora debes tener esto en cuenta ".

Capacidad de respuesta móvil
Y una cosa más sobre la adaptabilidad. Para que el menú interno tenga el mismo aspecto en dispositivos móviles, debe componer en tablas. Entonces la imagen quedará fijada. De lo contrario, cuando se reduce el tamaño de la pantalla, las imágenes tienden a deslizarse una debajo de la otra, violando el orden originalmente concebido.

Aquí, de nuevo, las palabras de los desarrolladores a expensas de la adaptabilidad. "El menú wiki se muestra en navegadores móviles pero no se adaptará al tamaño de la pantalla, lo que puede hacer que las imágenes se vean diferentes de lo que aparecen en la computadora. Se pueden encontrar guías en la red para adaptar el marcado wiki para dispositivos móviles, pero ni siquiera ellas garantizan un rendimiento del 100% en todos los dispositivos ".

7. Tipos de menú de navegación interno
A continuación se muestran los tipos más comunes de menús internos. Existen soluciones más sencillas y presupuestarias con un alto grado de fiabilidad. Y hay diseños más complejos y laboriosos en cuanto a gráficos y maquetación. Pero se ven más impresionantes.

7.2 Menú gráfico grande
En este caso, la fila vertical de enlaces se ubica en una imagen de fondo grande y tiene una estructura rígidamente fija. Aquí tienes un tutorial.

7.3 Menú en forma de iconos, mosaicos
Este diseño asume varias filas y columnas en forma de iconos gráficos e inscripciones a ellos, o mosaicos gráficos multicolores o monocromáticos.

7.4 Menú dinámico con efecto de navegación
Un diseño muy impresionante que imita la navegación del sitio con el efecto de hacer clic en los botones o marcar los enlaces visitados. Dicho menú es bastante difícil de administrar y requiere habilidades para comunicarse con el marcado wiki, ya que también tendrá que editar la información de las páginas en el marcado wiki. Aquí hay un tutorial sobre este tema.

La mayoría de los administradores piensan que al elevar un grupo al primer lugar para una palabra clave en el contacto principal, se llevarán la mayor parte del tráfico de búsqueda y los clientes interesados. A veces, realmente resulta así, pero en el 90% de los casos, los propietarios del grupo se olvidan del diseño de alta calidad del grupo e incluso estar en primer lugar dejan pasar a los clientes calientes.

¿Por qué está pasando esto?

La razón es muy simple: el diseño de mala calidad del avance de búsqueda de la comunidad. En pocas palabras, su grupo de búsqueda debe destacarse de la competencia y coincidir con la consulta de búsqueda ingresada tanto como sea posible. Solo si se cumplen estas condiciones de manera de calidad podrás conseguir una comunidad con un CTR alto y una alta probabilidad de ventas posteriores.

¿Cómo influir en el rendimiento de búsqueda de la comunidad?

El apalancamiento más efectivo en el CTR de un grupo es la miniatura del avatar.
La miniatura juega un papel muy importante en el grupo, ya que se muestra en todos los lugares donde se menciona al grupo:

• en las noticias del grupo
• en el motor de búsqueda de contactos
• en la búsqueda de Google y Yandex
• en enlaces de otras comunidades
• en el servicio de noticias de los usuarios de VK

No se pueden ignorar detalles con un alcance tan amplio. Y en diseño de grupo se debe prestar especial atención a la miniatura.

Principios para crear miniaturas en las que se puede hacer clic.

1) La fila asociativa del cliente al escribir su solicitud.
Piense en lo que su cliente potencial espera ver al escribir una consulta para la que está resaltado en la búsqueda. Por ejemplo, si una madre joven elige un mono de bebé, lo más probable es que espere ver en la imagen una imagen de un mono o de un bebé feliz con un mono bonito.

2) Gama de colores y contraste con la competencia.
Al elegir una imagen para una miniatura de grupo, mire las miniaturas de sus competidores. Qué colores se utilizan, la densidad de los elementos de la imagen, sus logotipos. La tarea principal es crear una miniatura que se destaque del fondo de otras. Por ejemplo, si la mayor parte de las miniaturas son verdes, haz que las tuyas sean rojas, si todas están tenues, haz que las tuyas sean brillantes, si todas son coloridas, haz que las tuyas sean monocromáticas. Recuerda, ¡la tarea principal es destacar y mantener la consulta relevante!

3) Palabras clave en la imagen.
En nuestra experiencia, colocar una frase de palabras clave en una imagen también tiene un efecto positivo en las tasas de clics en miniaturas, el tráfico de la comunidad y el rendimiento general. promoción del grupo.

4) Logotipo de la empresa.
También puede colocar su logo en la miniatura. La situación ideal sería que el logotipo cumpliera con los principios anteriores.

Cuando trabajamos con nuestros clientes, siempre tenemos en cuenta todos los matices, incluidas las miniaturas de grupos de alta calidad y en las que se puede hacer clic, así como otros puntos que afectan de manera clave la venta de productos a través de grupos VK.

El diseño exitoso de un grupo Vkontakte no solo debe ser hermoso, sino también funcional y conveniente. Obtenga el diseño para resolver sus objetivos de marketing para que el grupo atraiga a audiencias que pagan y compran a la marca y se quede con ella para siempre.

5 pasos sobre cómo organizar un grupo en VKontakte

Cubrir

La cobertura comunitaria de hoy es una herramienta importante para diseñar un grupo en la marca VKontakte y promoverlo. Puedes descargarlo en la sección "Gestión de la comunidad" yendo a la pestaña "Configuración". Una imagen horizontal de alta calidad en el encabezado de la propia comunidad actúa como el principal banner promocional de la empresa en la red social. Establece el estado de ánimo, informa, mejora la imagen, pide acciones específicas y vende al mismo tiempo.

1. Utilice ilustraciones de alta calidad

La portada de la comunidad VKontakte debe tener un tamaño de 1590x400 píxeles, pero es mejor subir fotos 2-3 veces más grandes en formato .png. Esto evitará una visualización de mala calidad.

2. Adapte la imagen para diferentes dispositivos

Tenga en cuenta que esta imagen puede aparecer de manera diferente con diferentes dispositivos- en los bordes móviles se cortarán, por lo que es mejor todo lo más información importante lugar más cerca del centro.

3. Coloque su eslogan y PVU

Deje que el cliente vea su filosofía y se beneficie desde la primera pantalla.

4. Mostrar el producto / servicio, proceso o resultado de su uso.

Por lo tanto, el cliente potencial sabrá de inmediato en qué se especializa y participará en el producto.

5. Ayude a los clientes a comunicarse con usted de inmediato

Escriba su número de teléfono, correo electrónico y otros contactos de la empresa en el banner. Si la ubicación territorial es importante para su negocio, por ejemplo, parece estar en la industria de la restauración o la horeca, la dirección tampoco será superflua.

6. Anunciar eventos

¿Está promocionando conciertos, esperando una nueva colección o lanzamiento de producto, organizando un festival / conferencia / día del cliente? Cuéntele a todos los que visitan la comunidad.

7. Presentar promociones y descuentos

¿Dónde, no importa cómo en el sitio principal, decirle a la audiencia que ahora mismo puede hacer un pedido 2 veces más barato? Lo más importante es que no olvide cambiar la obra de arte una vez finalizada la oferta.

8. Ofrezca realizar la acción deseada.

Cuando se carga la portada de la comunidad, se colocan dos botones horizontalmente en la esquina inferior derecha: escribir un mensaje y unirse a un grupo. Apúntelos con una flecha para captar aún más la atención de su audiencia. Entonces, si un producto se muestra en un banner, puede ofrecer pedirlo inmediatamente en mensajes. Y si hay un compendio últimas noticias- suscríbete para recibir siempre la información más actualizada.

Sube un avatar y selecciona una miniatura

Algunas marcas aún no adoptan la portada, prefiriendo el aspecto antiguo de la primera pantalla del grupo, utilizando la combinación de un avatar con una entrada fija como el llamado “encabezado”. En este caso, una imagen es la continuación de la otra. Se ve más impresionante cuando la foto termina al mismo nivel que el avatar.

Cuando se usa el tamaño de avatar máximo de 200x500 píxeles, el tamaño de la imagen en la publicación fijada debe ser 510x308 píxeles. Una excelente técnica de participación es fijar el video subido a través del reproductor de redes sociales, que continúa estilísticamente el avatar.

Si usa una portada como encabezado, el avatar siempre se mostrará como una miniatura.

Reglas para el diseño de miniaturas de avatar de la comunidad VK

Una miniatura es una imagen circular pequeña que se recorta de un avatar grande y aparece en la búsqueda de grupo, en la lista de la comunidad de cada usuario y a la izquierda debajo de la portada, si está disponible. A continuación se ofrecen algunos consejos de diseño.

1. La miniatura debe ser comprensible para el público.

No publiques una ilustración extraña. Visualice lo que el público objetivo asociará más tarde con la marca, por ejemplo, un logotipo, un icono de un producto / servicio o tal vez el personaje principal de marketing de la marca.

2. Utilice solo fotografías de alta calidad

Es mejor descargar el código fuente 2-3 veces más grande que el tamaño requerido, para que puedas olvidarte de los espeluznantes "cuadrados" de píxeles que te hacen ver no con la mejor luz.

3. Diseña tus propias ilustraciones

Las imágenes de archivo estándar se verán baratas y poco profesionales, y los usuarios se convertirán en sinónimo de desconfianza de la marca. Realiza diseños únicos con el mismo concepto y colores que el resto del diseño.

4. Contraste del fondo de las imágenes de la página: lo que necesita

Cuando las miniaturas de VK están diseñadas de forma tan llamativa, la "ronda" se destacará en el feed entre otros grupos y no se fusionará con el fondo de la página.

5. Coloque los contactos o USP de la empresa

Dependiendo del propósito que establezca para la miniatura, colóquela número de contacto o dirección del sitio web, información sobre envío gratuito, indicación del precio más bajo en un segmento o promoción.

6.Haga que el texto sea grande y legible

Es mejor no utilizar fuentes serif o cursiva, ya que son demasiado “ruidosas” cuando se ven desde las pantallas de PC, dispositivos móviles y teléfonos inteligentes, lo que satura la vista. Asegúrese de que el texto no vaya más allá de la miniatura recortada. Esto le permitirá transmitir el mensaje al usuario de forma correcta y eficaz.

7. Utilice formas no estándar

Por ejemplo, en el patrón redondo requerido, escriba un polígono u otra forma geométrica sobre un fondo blanco. Crea un efecto de notificación no leído o un ícono en línea.

Diseñar un menú

El menú es un elemento importante del diseño del grupo en Contacto, lo que facilita a los usuarios navegar por el grupo; será más conveniente para las personas encontrar la información que necesitan. Cada elemento y página se crea en un lenguaje de programación especial: el marcado Wiki. Con él, puede hacer clic en las imágenes y crear páginas convenientes dentro de la red social como si fuera una página de un sitio web.

Puede utilizar menús abiertos y cerrados. En el primer caso, el usuario ve inmediatamente las secciones que se incluyen en él, en el segundo, están precedidas por una imagen de vista previa con la inscripción "Menú". El menú también puede convertirse visualmente en una continuación del avatar, en caso de que esté utilizando la versión anterior del diseño de la comunidad.

Diseñar una vitrina de productos

Al colocar productos en la vitrina de la comunidad, recuerde que los primeros 3 objetos siempre están visibles para los usuarios. Coloque los más populares y ordenados en ellos cargando una imagen de presentación con el mismo estilo. Publique aquí iconos uniformes o fotos de los propios productos. Los productos se pueden colocar servicios. En el diseño, muestre el proceso de prestación del servicio o su resultado. El tamaño de dicha imagen será cuadrado: 400x400 píxeles.

Diseño de publicaciones

1. Utilice los tamaños de imagen disponibles en todo su potencial

El ancho máximo de una imagen en el feed es de 510 píxeles. Las imágenes cuadradas con 510x510 píxeles e imágenes rectangulares con 510x300 píxeles se ven más impresionantes.

2. Desarrolle un estilo de publicación individual

Para que sus publicaciones se vean individuales, cree un estilo, fuente y combinación de colores consistentes.

3. Coloque un texto corto en la imagen.

Por ejemplo, puede dividir la imagen en 2 partes: texto y gráfico, o escribir texto, mientras oscurece el fondo. Para hacer que el texto sea visible sin un fondo oscuro, escríbalo en un calco subyacente (bloque de gráficos de alto contraste de un color uniforme) o agregue una sombra al cuadro de texto. Las fotos con un marco se ven bien.

4.Haz varias plantillas para diferentes propósitos.

Por ejemplo, use una plantilla de presentación visual para citas, otra para anuncios en sitios web y una tercera para concursos.

Utilice estas técnicas al 100% y su empresa estará representada en Vkontakte la mejor manera, y será conveniente para los clientes interactuar con él. ¡Pero no olvides que todo necesita una medida! Busque ideas aún más frescas para diseñar una comunidad VK en la página de servicios de la agencia Tesla Target.

Evgeniya Kryukova

* Actualización del artículo.

El hermoso diseño de la comunidad VKontakte no es un capricho, sino un elemento importante que genera la confianza del usuario en usted y su empresa. Si un pagina publica o el grupo no es profesional, sus clientes potenciales pueden concluir lógicamente que usted es igualmente negligente con su trabajo. Para evitar que esto suceda, asegúrese de que su página de VKontakte sea hermosa, ordenada y fácil de usar. ¿Cómo hacerlo? Lee abajo.

Tamaños reales de imágenes "VKontakte"

Hace algún tiempo los desarrolladores red social Lanzamiento de "VKontakte" nuevo diseño... Esto llevó al hecho de que el tamaño y los principios de visualización de imágenes han cambiado. La nota, que se presentará a continuación, corresponde a todas las innovaciones y contiene las dimensiones que son relevantes para este momento hora.

Ahora echemos un vistazo más de cerca a cada elemento.

Tamaño del avatar VK

El tamaño mínimo del avatar es de 200 x 200 píxeles. Si intenta cargar una imagen de menos de 200 píxeles de ancho o largo, verá un error como este:

El tamaño máximo de avatar es 200 x 500 píxeles. Pero, en principio, puede cargar imágenes y tamaños más grandes, hasta 7000 píxeles en cada lado. Lo principal es que la proporción de sus lados no excede de 2 a 5.

Déjame mostrarte un ejemplo.

Tengo una imagen. Su tamaño es de 200 por 800 píxeles (relación de 2 a 8). No se produce ningún error durante la carga. Sin embargo, sigo sin poder utilizar esta imagen, ya que "Contacto" no me permite seleccionarla por completo.

Cubrir

El tamaño de la portada de la versión completa del sitio es de 1590 x 400 píxeles.

Tenga en cuenta: en version móvil y aplicaciones, no se muestra la versión completa de la portada, sino solo una parte de la misma de 1196 x 400 píxeles. Vea cómo se recorta en la aplicación móvil:

Para evitar que esto suceda, coloque los elementos principales de su portada dentro de 1196 por 400 píxeles.

Imágenes adjuntas

En el diseño actualizado de "Contacto", el ancho del servicio de noticias se ha vuelto fijo. Esto significa que las imágenes adjuntas a una publicación ya no se estiran, sino que permanecen como están. Por lo tanto, si desea que su imagen ocupe completamente el espacio asignado en el servicio de noticias, su ancho debe ser de al menos 510 píxeles. Es mejor si es un cuadrado o un rectángulo en orientación horizontal.

Suena un poco confuso :) Así que te lo mostraré con un ejemplo.

Digamos que tenemos una imagen cuadrada con lados de 510 píxeles. Si lo adjuntamos a nuestra publicación, se verá muy bien en el feed de noticias en todos los dispositivos:

Y así es como se ve una imagen horizontal en orientación horizontal (ancho 510 píxeles):

Como puede ver, cuanto más estrecha es la imagen (en altura), más pequeña se ve en la alimentación de los teléfonos inteligentes. Para verificar esto, mire la imagen a continuación:

Está claro que la diferencia no es particularmente crítica aquí, y los usuarios de teléfonos inteligentes aún considerarán su imagen, solo que en el segundo caso estarán un poco más cómodos.

Imágenes para publicaciones con un enlace

Todos estos datos se toman del código de marcado de Open Graph:

Si no se especifica Open Graph, el título se toma de la metaetiqueta Título y la imagen se toma del artículo. Al mismo tiempo, se puede cambiar fácilmente, o puede elegir otra imagen del artículo usando flechas especiales:

O sube el tuyo propio:

El tamaño mínimo de imagen que puede utilizar como vista previa de su artículo es de 537 por 240 píxeles. Sin embargo, puede cargar imágenes más grandes siempre que la relación de aspecto sea correcta.

Imagen de un artículo creado en el editor

El tamaño de la imagen para la portada del artículo, creada en el editor, es de 510 por 286 píxeles. Es mejor si es oscuro y más o menos monocromático, ya que el título del artículo y la comunidad se pierde sobre un fondo claro.

Buen ejemplo:

No es un buen ejemplo:

Tamaño de foto y video para historias

El tamaño de las fotos es de 1080 por 1920 píxeles. El tamaño del video es de 720 por 1280 píxeles.

Especificaciones para grabaciones de video:

• hasta 15 segundos;
• no más de 5 MB;
• códec h.264;
• Sonido AAC.

Las historias deben usar fotos y videos en formato vertical.

Tenga en cuenta: las historias en nombre de las comunidades en este momento solo pueden ser agregadas por comunidades grandes para las cuales los desarrolladores de VKontakte han abierto esta función. Y esto se hace usando aplicación oficial... Esto no se puede hacer desde una computadora.

Ejemplos de pieles dinámicas:

Portada + descripción de la comunidad + enlace al sitio web

Algunas empresas no corrigen específicamente ninguna publicación en el encabezado para que los usuarios puedan leer la información básica sobre la página e ir directamente al sitio.

Descripción con hashtags

Algunas empresas agregan hashtags a la descripción estándar de la página que la caracteriza. Esto se hace para que la página tenga una relevancia más clara y, por ello, sea más alta en la búsqueda de consultas relevantes. Para ser honesto, no sé si este método funciona o no. No he conocido ningún caso sobre este tema, así que si alguien lo sabe, le agradeceré que comparta un enlace.

Publicación fijada que dice de qué se trata la página

Si desea contar sobre su página con más detalle (con fotos, enlaces y un diseño hermoso), puede adjuntar una publicación wiki o un artículo, escrito en el editor, con una imagen brillante en el anuncio del encabezado, que animará a los usuarios a hacer clic en él. Un ejemplo de una publicación de este tipo:

Y esto es lo que ve el usuario después de hacer clic en el enlace:

Nuevo menú de enlaces

No hace mucho tiempo, los desarrolladores de VKontakte finalmente complacieron a los propietarios de la comunidad con una nueva herramienta con la que pueden crear menús, rápidamente y sin ningún tormento con las páginas wiki. Parece algo primitivo, así que cómo crear hermoso menú, Yo también te lo diré.

El menú aparece automáticamente si usa aplicaciones de la comunidad o tiene una tienda conectada. Por ejemplo, en la imagen anterior, los tres elementos del menú son enlaces a aplicaciones. Puedes agregar el tuyo aquí - en registros importantes, álbumes, discusiones, etc., hasta 7 piezas (excluyendo la aplicación). Pero solo puede vincular recursos dentro de la red social, a excepción de las páginas wiki.

Para editar el menú, haga clic en "Personalizar" en la esquina superior derecha del widget:

Para agregar un elemento de menú, haga clic en Nuevo vínculo.

En la ventana que se abre, seleccione la portada (tamaño mínimo - 376x256 px), ingrese el nombre del elemento del menú (es importante mantener dentro de los 20 caracteres con espacios), agregue un enlace y haga clic en “Guardar”.

Si desea ocultar una aplicación del menú, cambie su título o portada, haga clic en "Cambiar" frente al elemento correspondiente. Lo mismo se puede hacer con el resto de enlaces que se agregaron manualmente y requieren ajuste.

La salida debería verse así:

Menú de grupo abierto

Un menú abierto, lo llamo un menú de este tipo, que muestra inmediatamente en qué elementos se compone. Es decir, la imagen de vista previa de la publicación wiki duplica completamente su contenido. Así, los usuarios ven inmediatamente lo que les espera en su interior. Déjame mostrarte un ejemplo.

Así es como se ve la publicación anclada en el encabezado de la página Flatro:

Menú de grupo cerrado

Un menú cerrado es la misma publicación de wiki que en el párrafo anterior, solo el anuncio tiene una imagen en la que no hay elementos de menú. Suelen escribir en él: "Menú", "Menú de navegación" o "Navegación por materiales públicos".

Y esto es lo que vemos cuando hacemos clic en él:

Por cierto, cabe destacar que estas no son las únicas opciones. Básicamente, puedes escribir lo que quieras en esta imagen. Lo principal es que el usuario quiere hacer clic en él y entiende lo que le espera después de eso. Ejemplo:

Menú fusión para el grupo

Un menú combinado es cuando la imagen en el anuncio de su menú es una imagen con el avatar. A continuación, le diré en detalle cómo hacer un menú de este tipo, pero por ahora, solo vea lo hermoso que se ve.

¿Quieres diseñar bellamente tu comunidad VKontakte, pero no tienes las habilidades necesarias? Solicitar registro en nuestra empresa. Prepararemos un avatar, portada, plantillas para títulos, menús y vistas previas de productos para usted.

GIF y avatar en una imagen

Pero esta opción para el diseño de la gorra realmente me impresionó mucho. El GIF que se reproduce automáticamente se fusiona con el avatar en una sola composición y atrae la atención de los usuarios, aunque no haya ninguna información al respecto.

Por cierto, vi este ejemplo en el grupo del especialista en marketing de SMM Sergey Shmakov. Entonces, por el hallazgo le expreso mi gratitud :)

Menú oculto

El menú oculto está disponible solo para grupos (las páginas no tienen esta funcionalidad). Para verlo, debe hacer clic en el enlace correspondiente. La ventaja de este método de diseño es que los usuarios pueden ver la información básica de la comunidad, y si quieren utilizar el menú, solo necesitan hacer un clic. Sin embargo, aquí hay un pequeño inconveniente: no todos los usuarios son conscientes de la existencia de esta función, por lo que su menú puede recibir menos atención que si estuviera anclado en la parte superior de la página.

Reproducción automática de video

A fines de noviembre de 2015, apareció una innovación interesante en la red social VKontakte: tan pronto como el usuario visita su página, el video adjunto al encabezado comienza a reproducirse automáticamente. Con esta técnica, puedes atraer aún más la atención de los usuarios (especialmente de los que visitaron tu página por primera vez), y al mismo tiempo, no molestar a los que no les gusta cuando se les impone su contenido, porque el video se reproduce sin suena y prácticamente no interfiere ...

¿Cómo agregar un video de este tipo al encabezado de su página?

Para hacer esto, se deben cumplir tres condiciones:

• Adjunte un video a una publicación y fije esta publicación en la parte superior de la comunidad.
• Aparte del video, no se debe adjuntar nada más a la grabación. Solo el video y el texto son opcionales.
• El video debe ser cargado por VKontakte; los reproductores de terceros no son compatibles.

Una publicación que recibe muchas acciones

Otra forma de usar productivamente el espacio en el encabezado de su página es fijarle una de sus publicaciones más exitosas, la que ya ganó y continúa obteniendo una gran cantidad de me gusta y compartidos. Creo que todo el mundo entiende por qué hacer esto: cuantas más publicaciones, más cobertura, más suscripciones obtiene la página.

Anuncios de nuevos clips, álbumes y eventos.

Presentación de nuevos productos / servicios

Descuentos y promociones

Casos, opiniones de clientes

Publicidad de aplicaciones

Bromas

Reglas de la comunidad

Enlaces a otras redes sociales

He enumerado lejos de todas las opciones para el diseño del encabezado. Básicamente, puedes publicar cualquier información en la portada y en la publicación fijada: vacantes, anuncios, enlaces a los productos más vendidos, etc. Así que no te limites a los ejemplos anteriores. Sea creativo y utilice el diseño de su comunidad para lograr sus objetivos.

¿Qué debería ser un avatar?

Un avatar no es solo una hermosa imagen con el logo de su empresa, sino una herramienta de trabajo para un comercializador, con la ayuda de la cual logra sus objetivos. Echemos un vistazo más de cerca a lo que debería ser para atraer la atención de los usuarios y alentarlos a realizar la acción específica. Comencemos con una miniatura.

Miniatura de avatar

1. El texto de la miniatura del avatar debe ser lo suficientemente grande para ser legible.







2. El texto no debe ir más allá de la miniatura.







3. Los usuarios deben comprender lo que se muestra en el avatar.







4. Si es posible, es mejor no utilizar imágenes de archivo, ya que a menudo disminuyen la credibilidad de la empresa.




5. No es deseable que la miniatura del avatar sea demasiado aburrida y aburrida, de lo contrario se perderá en el contexto de los avatares más brillantes de los competidores.



6. Si quieres que tu avatar luzca moderno, hazlo en un estilo minimalista: menos texto, sombras, degradados y elementos que no tengan carga semántica. Tu avatar debe ser lo más simple y ordenado posible. Este estilo es tendencia ahora.







7. Si tu objetivo es atraer la atención de los usuarios y destacar sobre el fondo de otros avatares en el feed, tendrás que encender la imaginación. Piensa en lo que tú mismo prestas atención cuando buscas comunidades interesantes. Aquí, por ejemplo, he sido atraído repetidamente por avatares con una luz encendida, lo que generalmente indica que ha llegado un nuevo mensaje. Esta es una técnica muy antigua, pero por alguna razón todavía me afecta: cuando vea una luz así, definitivamente la mantendré pendiente.

No estoy sugiriendo que este truco funcione también con tu página. El mensaje que quiero transmitir es que hay muchísimas formas de destacar, solo necesitas hacer esta pregunta y mostrar un poco de creatividad. Por ejemplo, aquí hay otra idea interesante en la que yo mismo difícilmente habría pensado:

El avatar es un círculo negro: grande y pequeño. Parecería, ¿por qué hacer esto en absoluto? Pero cuando se desplaza por la lista de comunidades, estos avatares llaman la atención, porque son muy diferentes a los demás.

¿Qué información se puede colocar en la miniatura del avatar?

Aunque la miniatura del avatar es muy pequeña, puede (y debe) usarse para atraer seguidores a su comunidad. ¿Cómo hacerlo? Veamos algunas opciones:

Anuncio de nuevo producto / servicio / evento

Ventajas de la empresa / servicio / página

Número de teléfono de la empresa

Precios favorables

Envío gratis

Por cierto, muy a menudo la información que la empresa proporciona con envío gratuito se agrega al nombre del propio grupo, por lo que los usuarios definitivamente le prestarán atención.

Promociones

Concursos

Vacantes

¿Cuál debería ser el avatar en sí?

Consideré cómo debería verse la miniatura del avatar y qué texto se puede colocar en ella. Ahora pasemos al avatar en sí. Versión completa El avatar solo se mostrará en la comunidad que no tenga una cubierta instalada. Es para tales casos que escribí esta sección. Entonces, cuál debe ser el avatar de tu comunidad para que los usuarios entiendan de inmediato que tu empresa abordó la creación de la página de manera responsable y profesional.

1. El avatar debe ser de alta calidad. Cómo lograr esto, escribí un poco más arriba. Para aquellos que se perdieron esta parte, les diré en pocas palabras: el tamaño del avatar debe ser 2-3 veces más grande de lo que planeó.
2. Es deseable que el avatar se combine con el menú: tiene el mismo esquema de color, tiene las mismas fuentes, elementos, etc. Gracias a esto, el encabezado de tu página se verá más ordenado y profesional. Ejemplo:




3. El avatar en sí y la miniatura del avatar pueden ser diferentes. Por ejemplo, puede dibujar un círculo en su avatar, darle el estilo que desee, seleccionar esa área como miniatura y diseñar el resto del avatar con un estilo diferente.




Otra opción es dividir el avatar en dos partes. Uno es para la miniatura y otro para el resto del avatar.




4. Para animar a los usuarios a suscribirse a su página o escribir un mensaje a un representante de la empresa, puede colocar un llamado a la acción correspondiente en la parte inferior del avatar y acompañarlo con una flecha que apunta al botón.




5. Trate de no publicar demasiada información sobre su avatar, de lo contrario se verá abrumado y desordenado. Agregue solo los puntos más importantes y asegúrese de que haya "aire" entre ellos.

¿Qué información se puede colocar en el avatar?

Básicamente, puedes colocar cualquier cosa en tu avatar. A diferencia de las miniaturas, realmente hay un lugar donde deambular. Lo más importante es que no lo uses en exceso :)

Dominio del sitio

Teléfono / dirección / horario de atención

Concursos / promociones

Productos más comprados / artículos nuevos

información sobre la entrega

Publicidad en aplicaciones móviles

Las principales ventajas de la empresa / página / producto, etc.

Actualización de rango / nueva creatividad, etc.

Información de que su comunidad es oficial

Información sobre próximos eventos

Direcciones de cuenta en otras redes sociales

Descripción ampliada de la página

Se jacta

En general, se puede colocar absolutamente cualquier información en el avatar. He proporcionado solo algunas ideas para que pueda ver lo que otros están haciendo e inspirarse con sus ejemplos. Bueno, ten en cuenta las recomendaciones básicas: el avatar debe ser de alta calidad, la fuente debe ser grande y debe haber más "aire" entre los elementos.

Cómo crear un avatar y un menú fusionados

Para hacer un avatar y un menú combinados, necesita un programa Adobe Photoshop o su equivalente. Explicaré todo el proceso usando el ejemplo de Photoshop. Entonces vamos.

1. Descarga la plantilla de Photoshop que he preparado especialmente para este artículo. Tamaño normal (menú - 510 píxeles de ancho, avatar - 200) o ampliado (menú - 1020 píxeles de ancho, avatar - 400).
2. Abra la imagen en la que desea basarse.
3. Cópialo, pégalo en la plantilla y colócalo de la forma en que te gustaría cortarlo.

1. Agregue efectos, texto, gráficos y más.

1. Si no desea que se pierda parte de la imagen (en ese espacio, que es de 50 píxeles), muévala hacia la derecha como se muestra en el siguiente gif:

1. Seleccione la herramienta "Cortar" y haga clic en el botón "Cortes por guías".

1. Elimine los fragmentos innecesarios (haga clic con el botón derecho - "Eliminar fragmento") y edite los existentes (haga clic con el botón derecho - haga clic en un espacio vacío - tome área deseada y estírelo al tamaño deseado).

1. Vaya a la sección "Archivo" y seleccione el comando "Guardar para Web".

1. Navegue hasta la ubicación donde guardó las imágenes (escritorio o algún directorio específico) y busque una carpeta llamada "Imágenes". Aquí es donde estarán tus imágenes. Ahora todo lo que queda es llenarlos en la página.

PD La altura del avatar se puede cambiar a su discreción. Yo tomé talla máxima- 500 píxeles, pero su valor puede ser menor. Por ejemplo, como en la página Wiki Markup:

Cómo usar widgets

Los widgets también forman parte del diseño de la comunidad VK. Con la ayuda de ellos, el usuario puede: realizar un pedido, suscribirse a su lista de correo, participar en un concurso, leer y dejar reseñas, abrir una búsqueda en la comunidad, recibir un regalo, un cupón de descuento, etc.

Aquí hay algunos ejemplos de cómo se ven los widgets en una página de VKontakte:

class = "incut">

Cómo diseñar imágenes para publicaciones

Si eres diseñador web o tienes un gusto artístico y un sentido de la belleza, entonces debería ser fácil para ti crear una identidad corporativa para tus imágenes. Sin embargo, me parece que esas personas en este artículo serán una minoría (yo, por cierto, tampoco les pertenezco). Por lo tanto, echemos un vistazo más de cerca a cómo se hace esto, basándonos en ejemplos de empresas exitosas.

Por cierto, tenga en cuenta que casi todas las empresas VKontakte conocidas marcan sus imágenes, es decir, agregan un pequeño logotipo, la dirección de su página o una marca de agua. Esto aumenta el conocimiento de la marca y protege sus imágenes para que no se copien. Si vale la pena hacerlo, todos deciden por sí mismos. Lo único que me gustaría aconsejarle: si decide hacer esto, intente asegurarse de que su logotipo no sea demasiado brillante y no ocupe demasiado espacio, de lo contrario, todo el énfasis se destinará a él y la imagen desaparecerá. pierde su atractivo.

¿Dónde puedo conseguir buenas imágenes?

Tenemos un buen artículo de blog sobre este tema: "". Todos son gratuitos, pero algunos requieren registro. Si no encuentra nada adecuado para usted, intente buscar por palabra clave+ papel tapiz (o, si está en inglés, papel tapiz). Por lo general, se publican imágenes de alta calidad para tal solicitud. Pero aquí debe tener cuidado y verificar el tipo de licencia, de lo contrario, si tiene un negocio serio, puede tener problemas.

¿Y los que no saben trabajar en Photoshop?

Si nunca ha trabajado en Photoshop (o cualquier otro editores gráficos) y mientras no esté listo para dedicar tiempo para dominarlo, puede usar los servicios que ya tienen plantillas listas para usar imágenes para diferentes redes sociales:

1. Fotor.com

Después de eso, en el lado izquierdo de la pantalla, seleccionamos la plantilla que nos interesa. Tenga en cuenta que solo las plantillas que no tienen un icono de diamante se proporcionan de forma gratuita.

Péguelo en la plantilla, selecciónelo con el botón izquierdo del mouse, seleccione el comando Capa (icono de sándwich) y haga clic en Mover al final. Así, nuestra imagen pasará a un segundo plano, y encima de ella se superpondrán todas las inscripciones.

Después de eso, cambiamos el texto, la fuente, el tamaño de la fuente, la posición de la inscripción, etc.

Luego haga clic en el icono del disquete, seleccione el nombre, el formato de imagen, la calidad y haga clic en el botón Iniciar sesión para descargar.

Cómo usar el marcado wiki

Pues aquí llegamos al apartado más interesante y a la vez difícil. Quizás entre los lectores hay personas que no saben qué es el marcado wiki y, por lo general, escuchan este término por primera vez. Por eso, especialmente para ti, te daré una definición que viene dada por el propio "Contacto".

El marcado de wiki es un lenguaje de marcado que se utiliza para formatear texto en sitios web (que generalmente pertenecen a la clase de proyectos wiki) y le permite simplificar el acceso a las capacidades del lenguaje HTML. En las páginas wiki de nuestro sitio - buena alternativa grabaciones regulares y navegación de texto. Ya sea que necesite crear un artículo grande con diferentes formatos de texto (negrita, subrayado, encabezados, etc.) o agregarle gráficos, o simplemente crear un menú de navegación colorido en su comunidad, la wiki es indispensable.

Al igual que Wordpress (o cualquier otro CMS) tiene un editor HTML con el que crea artículos, Contact tiene su propio editor para crear y editar páginas wiki. Se parece a esto:

Con la ayuda de este editor se crean menús de navegación, así como artículos con imágenes, videos y grabaciones de audio. A continuación analizaré en detalle cómo trabajar en este editor, pero primero les pido que agreguen dos enlaces a sus marcadores. Te ayudarán mucho a aprender el marcado wiki.