Manual Digital GTO 2022
Manual Digital GTO 2022
Manual Digital GTO 2022
CONTENIDOS DIGITALES
CONTENIDOS
IDENTIDAD GRÁFICA
Tipografías oficiales
Proxima Nova
Proxima Nova es la familia tipográfica oficial para todas las piezas de comunicación, de carácter estándar, de divulgación y
Baloo 2
La tipografía Baloo se usa para piezas de marketing o comunicación de manera muy moderada para lograr alto impacto. La
de cobertura. La familia contiene todos los pesos necesarios para hacer notoria la jerarquía de contenido editorial, sin tipografía incluye los pesos necesarios para marcar diferencia entre las jerarquías de texto. Principalmente se usa en títulos
embargo, se presentan los más frecuentemente usados: y encabezados de campañas activas, en materiales como: vídeos, folletos, banners impresos y digitales; aunque en
ocasiones se utiliza para diseños editales más complejos.
Semibold Destacar frases dentro un texto. Medium Destacar frases dentro un texto.
NOTA: En este apartado solamente se especifican las tipografías autorizadas para uso oficial en campañas de esta
administración, posteriormente encontrarán los tamaños recomendados para su uso en medios digitales.
IDENTIDAD GRÁFICA
Colores oficiales
Eje Desarrollo Social y Humano Eje Desarrollo Económico Incluyente Staff del Gobernador Eje Seguridad y Paz Social
R: 255 R: 255 R: 255 R: 101
G: 90 G: 130 G: 130 G: 128
B: 200 B: 0 B: 255 B: 160
#FF5AC8 #FF8200 #0082FF #6580A0
Eje Educación de Calidad Eje Desarrollo Ordenado y Sostenible Eje Gobierno Humano y Efectivo
R: 185 R: 50 R: 0
G: 200 G: 170 G: 169
B: 230 B: 0 B: 133
#B9C8E6 #32AA00 #00A985
IDENTIDAD GRÁFICA
IDENTIDAD WEB
Estructura Web
Datos generales
El framework en el cual está desarrolla esta plantilla es Django, y se implementa por el nivel de
seguridad y flexibilidad de desarrollo que ofrece.
El <body> de la plantilla web tiene un ancho de 1600 pixeles (px).
El <body> está diseñado a 12 columnas, y se puede dividir en 3 (520 px de ancho) o 4 columnas (385
px de ancho), respetando el ancho total del mismo. Esta jerarquía permite ordenar elementos con
base en la relevancia que cada dependencia establezca.
El medianil entre columnas es de 20 px, siendo esta la misma distancia entre contenidos
verticalmente.
Para la publicación de boletines desde el Sistema de Boletines de Gobierno del Estado, acercarse a
Estrategia Digital para solicitar el <script> para darlos de alta en cada sitio web.
Para que un sitio web sea indexado de mejor manera, hay que considerar lo siguiente: usar palabras
clave en el contenido, usar etiquetas de títulos (h1, h2, h3, h4) correctamente, agregar títulos (<title>)
de página a cada una de ellas, usar etiqueta <alt> para imágenes, subir imágenes con nombres claros
y que hagan referencia a lo que muestran, agregar etiqueta <meta description> en el header.
IDENTIDAD WEB
Estructura Web
Header y menú de navegación
1. Barra superior. Tiene una altura de 80px y un ancho que cubre el 100% del navegador, es decir, es mayor que 1,600 px. El color de fondo es #E4ECFA.
2. El bloque de accesos directos es:
Contacto. Este apartado puede variar por cada dependencia, pero debe incluir una forma de contacto directo para el usuario: la opción de llámanos, debe ser contacto teléfonico y la opción de
8
escríbenos, debe habilitar la opción para escribir un correo electrónico a la dirección designada por la dependencia, ya sea que abra en una nueva pestaña o inicie el cliente del correo del usuario.
Directorio. Este enlace tiene que estar vinculado al directorio de funcionarios de la Unidad de Transparencia y Archivos del Poder Ejecutivo.
Transparencia. Este enlace debe estar vinculado a la información de la dependencia en la Unidad de Transparencia y Archivos del Poder Ejecutivo.
3. Enlaces directos a los perfiles de redes sociales que cada dependencia tenga.
4. Opciones de selección de idiomas. Estrategia Digital proporcionará a cada dependencia el <script> para instalar en su sitio web, y así poder realizar seguimiento al mismo. En caso de requerir apoyo
técnico para su instalación, acercarse al área de Estrategia Digital.
5. Logotipo. Debe ser logotipo para fondos claros y tiene una medida de 316px de ancho.
6. Menú de navegación. Se usa la tipografía Proxima Nova, de peso Medium y un tamaño de 18pts. (el tamaño puede variar). Se recomienda no incluir más de 7 botones en el menú, ya que de lo contrario
se saturaría, además, de ser posible que sean textos de una sola línea o máximo dos, como se ve en la imagen. Es importante incluir un botón de Transparencia, con vínculo a la Unidad de Transparencia
y Archivos del Poder Ejecutivo.
7. Mapa de sitio y búsqueda. Estos iconos deben estar presentes ya que forman parte de las funciones de usabilidad de todo sitio web.
8. Muestra de menú dropdown. Habrá casos donde cada botón del menú de navegación tenga un submenú estilo dropdown, mismo que deberá mostrarse como en la figura 7, teniendo un efecto :hover
con el color oficial del eje al que pertenece la dependencia, para resaltar el elemento que se está visitando.
9. Accesibilidad. Es el apartado que permite a usuarios con discapacidades navegar el sitio, la herramienta que se implementa es UserWay.org, y debe estar flotante en la esquina inferior derecha, en la
página 11 se específica más a detalle de este tema.
2 3 4
1
5 6 7
IDENTIDAD WEB
Estructura Web
IDENTIDAD WEB
Estructura Web
Footer
El background-color cubre el 100% del navegador, es decir, es mayor que 1,600 px. El color de fondo es #E4ECFA. 5. Leyenda de Aviso Legal y Copyright, este texto debe estar actualizado con cada año que pase.
1. El bloque oficial de Gobierno del Estado tiene una medida de 680px de ancho (5 columnas), y debe incluir: Logotipo de Gobierno del Estado.
Logotipo de Gobierno del Estado. Logotipo de Norma Mexicana en Igualdad Laboral y no Discriminación.
Logotipo de Norma Mexicana en Igualdad Laboral y no Discriminación. 6. Enlaces directos a las redes sociales de la dependencia, tiene unda medida de 398px de ancho (4 columnas), así como los
2. Bloque de contacto y sedes oficiales de la dependencia correspondiente. links a los canales de WhatsApp y Telegram del Gobierno del Estado.
3. Reporte de problema del sitio web, mismo que deberá habilitar un formulario de contacto con el webmaster del sitio o la
persona designada por la dependencia para dar seguimiento a la solicitud de información.
4. Bloque de información pública tiene unda medida de 537px de ancho (4 columnas) y de incluir:
Enlaces a información pública de la Unidad de Transparencia y Archivos del Poder Ejecutivo:
Directorio. Auditorías.
Estructura orgánica. Solicitudes respondidas.
Tabulador de sueldos. Cuenta pública.
Indicadores y metas. Aviso de privacidad integral.
Muestra de formulario de
contacto para problemas
del sitio web.
4 6
3
5
IDENTIDAD WEB
Versión Móvil
1
NOTA: El diseño se realizó teniendo en cuenta una pantalla con resolución de 390px de ancho, esto puede variar con los
Header móvil
diferente dispositivos móviles que se encuentran en el mercado, se sugiere tomar como base este diseño y realizar los
ajustes necesarios para implementarlo en las diferentes pantallas.
La altura de este primer bloque se recomienda ser de 50 píxeles e incluir los botones de contacto y selección de idiomas, el Footer móvil
botón de accesibilidad deberá ser flotante en el sitio.
Incluir el logotipo de la dependencia a la izquierda de la pantalla. A la derecha debe incluir el menú tipo hamburguesa y un
buscador. 1
El espacio para campañas activas deberá ser del ancho total de la pantalla con una altura que no sea invasiva para el usuario.
El bloque de destacados deberá ser del ancho total de la pantalla, cada botón debe tener una altura de 40 px y el texto debe
Destacados
usar la tipografía Proxima Nova Regular a 14 px.
móvil
Este bloque se organiza la información pertinente a cada dependencia, con base en las necesidades y prioridades de la
misma. Se sugiere incluir gestos como arrastrar elementos con el dedo, para que la navegación móvil sea intuitiva.
El footer deberá contener logotipo de Gobierno del Estado y ley de igualdad laboral, enlaces a la Unidad de Transparencia
y Archivos del Poder Ejecutivo, ubicación, redes y leyenda de copyright.
IDENTIDAD WEB
Accesibilidad
Como cumplimiento de la Norma Mexicana en Igualdad Laboral y No Discriminación todos los sitios web del Gobierno del
Estado de Guanajuato deben incluir servicios de accesibilidad en ellos.
Es imperativo que las opciones de Accesibilidad estén disponibles en todas y cada una de las secciones de todos los sitios web
del Gobierno del Estado de Guanajuato.
La herramienta a utilizar es UserWay (https://userway.org), esta herramienta permite habilitar más de 10 opciones de
accesibilidad en el sitio web, permitiéndole a personas con discapacidad o discapacidades tener una experiencia fluida e
incluyente en el mismo.
¿Cómo funciona?
Estrategia Digital proporcionará a cada dependencia el <script> para instalar en su sitio web, y así poder realizar seguimiento
al mismo. En caso de requerir apoyo técnico para su instalación, acercarse al área de Estrategia Digital.
IDENTIDAD WEB
Banner Promocional
Como parte de las labores de actualización y difusión del área de Estrategia Digital de la Coordinación General de Información
Estratégica, se ha incluido un espacio promocional en el sitio web de Gobierno del Estado de Guanajuato para difundir Muestra versión móvil
campañas activas y de interés para nuestros usuarios.
Este espacio deberá ser incluido en todos los sitios web de las dependencias que esta administración supervisa, en su versión
de escritorio y en su versión móvil.
Para la implementación de dichos banners publicitarios, deben colocar dos códigos Iframede tamaño de 1200*90 px y
apoyarse con sus informáticos y modificar el CSS para colocar el segundo código de 300*250 px para que aparezca
adecuadamente para dispositivos móviles.
Dicho banner será colocado antes del footer de cada página y sección que administre la dependencia..
<!-- Revive Adserver Etiqueta iFrame - Generated with Revive Adserver v5.0.2 -->
<iframe id='ab84c17a' name='ab84c17a'
src='http://app.guanajuato.gob.mx/revive/www/delivery/afr.php?zoneid=246&cb=INSERT_RANDOM_NUMBER_HERE'
frameborder='0' scrolling='no' width='1200' height='90' allow='autoplay'><a
href='http://app.guanajuato.gob.mx/revive/www/delivery/ck.php?n=a0dda632&cb=INSERT_RANDOM_NUMBER_HERE'
target='_blank'><img
src='http://app.guanajuato.gob.mx/revive/www/delivery/avw.php?zoneid=246&cb=INSERT_RANDOM_NUMBER_HERE&
amp;n=a0dda632' border='0' alt='' /></a></iframe>
Muestra versión de escritorio.
Lineamientos generales
Para la apertura de cualquier cuenta de redes sociales relacionada con el Gobierno del Estado de Guanajuato es necesario
solicitar la validación del área de Estrategia Digital de la Coordinación General de Información Estratégica, junto a la
justificación de la apertura de éste canal.
Definir la estrategia de la Dependencia en redes sociales de acuerdo a los objetivos de la institución y compartirla con el
área de Estrategia Digital de la Coordinación General de Información Estratégica.
Compartir el área de Estrategia Digital de la Coordinación General de Información Estratégica el nombre de la persona que
estará encargada de operar directamente las redes sociales de la dependencia/ institución.
Compartir los accesos/contraseñas de las Redes Sociales al área de Estrategia Digital de la Coordinación General de
Información Estratégica.
Definir los canales de distribución del contenido digital ejemplo: Facebook, Twitter, Instagram.
Definir un calendario de publicaciones.
Publicación de banners/Imagen o video deben estar apegados a los lineamientos de imagen del MANUAL DE
CONTENIDOS DIGITALES, del área de Estrategia Digital de la Coordinación General de Información Estratégica.
Monitoreo constante de medios y usuarios.
Crear una estrategia de respuestas al usuario en redes sociales.
Generar un reporte mensual del crecimiento y alcances de cada cuenta.
Al detectar temas delicados que puedan generar una crisis en la reputación de la institución o el gobierno es importante
comunicarlo a la brevedad al área de Estrategia Digital de la Coordinación General de Información Estratégica.
Facebook
La cuenta institucional debe ser una FanPage, desde la cual debe de estar asignado con el rol de ADMINISTRADOR la
cuenta: atencion_internet@guanajuato.gob.mx
En caso de contar con Perfil Comercial, compartir la propiedad comercial con la cuenta de Guanajuato Gobierno del Estado.
Compartir el correo y contraseña de la cuenta con la que se haya creado la FanPage de la dependencia a la Dirección de
Estrategia Digital, con la finalidad de tenerla en resguardo ante cualquier eventualidad.
Uso de Twitter
Redacción de contenido (copys) acciones del @gobiernogto. De la misma forma evita el uso excesivo de ellos, puedes confundir a tu lector.
Calendarización
Sigue a los usuarios correctos
Twitter permite programar tuits desde la versión web de la red social. Dando click en el ícono de calendario, antes de
Verifica los usuarios a los que das follow o seguir, revisa si son afines al tema o relacionados con tu institución.
publicar el contenido.
Encuentra usuarios con los que puedas generar interacción con tu cuenta, ya sea en eventos relacionados a tu institución
busca que compartan tu información.
Uso de Twitter
¿En qué ayuda el share, like o el comentar? Herramientas de interés o novedades en la plataforma
Spaces: Permite interactuar con tus seguidores a través de salas de voz, Temas de actualidad, Debates, Charlas informativas,
El share y like en Twitter, nos permite amplificar el alcance de nuestros mensajes y el generar un comentario fortalece la
Entretenimiento.
conversación y también el posicionamiento del tweet en la página inicial de nuestros seguidores.
Antes de dar cualquier RT o Like, verifiquemos que estemos usando la cuenta correcta.
Peleccionar quién puede responder nuestros tweets, e incluso ocultar respuestas en los tweets.
Hay que cuidar los RTS que damos, que estén relacionados con nuestros eventos, invitados, colaboradores, instituciones.
Dar RTs de temas muy alejados a nosotros puede generar confusión al momento en que nuevos usuarios visiten nuestro
perfil.
Podemos generar interacciones o conversaciones con otras cuentas afines a nuestros temas, sobre diversos temas de interés
para ambas audiencias.
Uso de Twitter
Publicación de videos
Para la publicación de videos en Twitter, permite videos de una duraciòn máxima de 2 minutos y 20 segundos en formato
Landscape (16:9) en formato mp4, ya que este permite subir videos de alta calidad con un peso apto para redes sociales.
Agrega subtítulos a tus videos, ya que esto permite al usuario poder comprender el contexto del video cuando no lo pueda
reproducir con volumen alto.
Las resoluciones sugeridas son: 1920x1080 (FullHD) y 1280x720 (HD).
1200 px
Acércate a Estrategia Digital para conocer más de este tema.
Uso de Facebook
Calendarización
en cuenta que la proporción es cuadrada.
Calendarizar tus publicaciones es una gran forma de llevar el control de las mismas, te ahorrará tiempo a largo plazo y te Uso de fotografías y/o banners
permitirá lograr una visión más clara de tus productos. Recuerda, la organización es sinónimo de calidad. Cada publicación admite más de 10 fotografías, sin embargo, no es necesario ocupar todos los espacios de fotografías disponibles,
con 1 foto que sea clara y de calidad puede acompañar perfectamente el mensaje.
Hashtags
Además, en la publicación de fotografías o banners podrás etiquetar directamente en la publicación hasta 10 cuentas diferentes que
sean afines a tu contenido.
Permite identificar y facilitar la búsqueda relacionados con algún tema en específico, esto hace posible que el usuario se Se sugiere contar con banco de imágenes de obras y acciones que impulsa la dependencia o institución que se actualice
una a la conversación en ese tema. constantemente para que acompañe tus publicaciones.
Por ello te recomendamos utilizar un Hashtag en tus campañas publicitarias.
Publicación de Facebook
Uso de Facebook
Publicación de videos
Para la publicación de videos en Facebook siempre usa el formato Landscape (16:9) en formato mp4, ya que este permite
subir videos de alta calidad con un peso apto para redes sociales.
Agrega subtítulos a tus videos, ya que esto permite al usuario poder comprender el contexto del video cuando no lo pueda 1080 px
reproducir con volumen alto.
Las resoluciones sugeridas son: 1920x1080 (FullHD) y 1280x720 (HD).
Acércate a Estrategia Digital para conocer más de este tema.
Formatos de contenidos
Medidas recomendadas para:
Portada de Facebook: 2050*780 px, espacio visible de 1300*640 px al centro.
Foto de perfil de Facebook: 500*500 px.
Publicación de imagen en Facebook: 1080*1080 px.
Historias de Facebook: 1080*1920 px 1080 px
Publicación de vídeo en Facebook: 1920*1080 o 1280*720px (mínimo) con compresión para web H.264 (.mp4) Portada de Facebook
2050*780 px
Historias
de Facebook
Espacio visible
1300*640 px
1920 px
Uso de Instagram
Formatos de contenidos
Medidas recomendadas para:
Foto de perfil de Instagram: 500*500 px.
Publicación de imagen en Instagram: 1080*1080 px.
Historias de Instagram: 1080*1920 px, pueden ser imagen jpg o png, o bien, video de 15 segundos. (recomendado).
Publicación de vídeo en Instagram:
Publicación en feed 1080*1080 px, 1920*1080 o 1280*720px (mínimo) con compresión para web H.264 (.mp4)
Publicación de reels 1080*1920 px con compresión para web H.264 (.mp4) duración máxima 1 minuto. Historias de Instagram
Publicación de Instagram
1920 px
1080 px
1080 px
1080 px
Uso de TikTok
Abraza tu creatividad e individualidad usando la variedad de herramientas creativas, sonidos y efectos de TikTok. TikTok ha
llegado con fuerza y es un canal social para complementar tu estrategia de marketing en redes sociales.
Son vídeos de corta duración, que va desde 15 segundos hasta un máximo de 60. En él, los usuarios comparten vídeos de
cualquier tipo con música de forma legal, voces de películas o actores famosos e incluso tu propia voz.
El último trimestre del 2021 Facebook reportó haber perdido más de 1 millón de usuarios diarios, eso se traduce en 90
millones de usuarios en 3 meses, dentro de la edad de 15 y 22 años. Esos usuarios perdidos los ganó Tik Tok, reportando
650 mil usuarios nuevos diarios durante el mismo tiempo.
TikTok está hecho para todas las edades. El 60% de los usuarios comprenden su edad entre 15 y 24 años y un 26% entre 25
y 44. Eso sí, las chicas usan más la app (60%) que los chicos (40%).
Las marcas usan TikTok para mostrar su lado más cercano y humano. Es una forma de conectar con tus posibles clientes
desde un punto de vista desenfadado.
TikTok cuenta con un algoritmo que te muestra vídeos según tus intereses. Puedes entrar en tendencias y ver qué se
mueve por TikTok, desde los hashtag más populares o los temas del momento.
Formatos de contenidos
No se pueden abrir cuentas si NO se tiene planeación de contenidos.
El formato a utilizar es vertical (portrait).
- Si el video se hace en programa de edición, considerar la medida 1080 x 1920
Considerar el uso no mayor a 5 hashtag
Buscar hashtag que sea sobre tu tema y dos de tendencia (siempre y cuando no afecten la imagen institucional)
Considerar si se graba a personas, contar con los permisos para el uso de imagen.
Creación de copys cortos.
Los videos dentro de la plataforma se recomienda no mayores a 1 min.
Mensajes cortos y precisos dentro de los videos.
Cuidar a las personas que representen a la marca.
Utilizar personas que tengan identidad al guanajuatense y no a extranjeros.
Uso de YouTube
Publicación de videos
Para la publicación de videos en Youtube siempre usa el formato Landscape (16:9) en formato mp4, ya que este permite subir
videos de alta calidad con un peso apto para redes sociales. Agrega subtítulos a tus videos, ya que esto permite al usuario
poder comprender el contexto del video cuando no lo pueda reproducir con volumen alto.
Las resoluciones sugeridas son: 1920x1080 (FullHD) y 1280x720 (HD). Acércate a Estrategia Digital para conocer más de este
tema.
Medidas para Shorts: 1080 x 1920 de hasta 60 segundos de duración
Formatos de contenidos
Medidas recomendadas para:
Foto de perfil de YouTube: 800*800 px.
Miniatura de videos (thumbnail): 1280*720px.
Portada de canal: 2560*1440px
Banner: 2120*1192px
Todas pueden ser imagen jpg o png.