Guía de estilo básica para portales web de la Administración Pública de la Ciudad de México.

Transcripción

1 Guía de estilo básica para portales web de la Administración Pública de la Ciudad de México. (v1.3) Tipografía Estilos Colores Íconos Íconos con acciones Retículas Banners Dirección General de Mensaje y Nuevas Tecnologías OM

2 Guía de estilo básica para portales web de la AP CDMX La siguiente guía de estilo muestra los lineamientos a seguir para la creación de secciones y elementos dentro de los portales web de la cdmx.gob.mx Tipografía Siendo Helvetica Neue la tipografía institucional establecida en el Manual de Imagen de la CDMX se ha tomado como base para los portales web de la Administración Pública. *Como aun existe un porcentaje de usuarios que no tienen instalada la tipografía Helvetica Neue en su sistema operativo también deberán incluirse en el CSS las tipografías seguras para web Helvetica, Arial y Sans Serif. Helvetica Neue Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Ññ Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz ,. : - *! $ % / ( ) =?! ej. font-family: Helvetica Neue, Helvetica, Arial, sans-serif; Estilos Para ofrecerle un buena legibilidad al usuario se ha establecido un cuerpo de texto base de 18px del cual se han creado varios estilos para jerarquizar la información mostrada en el sitio. Encabezado H1 Tamaño: 36px Interlineado 42px Peso: Bold Color: # botón de acción / título sección Tamaño: 14px Peso:Bold Variante: Small-caps Color: # / #FF149B Encabezado H2 Tamaño: 29px Interineado: 35px Peso: Bold Color: # pie de página Tamaño: 14px Variante: Small-caps Color: # Encabezado H3 Tamaño: 22px Interlineado: 35px ó 28px Peso: Bold Color: # fecha y hora 12:00 Tamaño: 14px Peso: Italicas Variante: Small-caps Color: # Encabezado H4 Etiqueta Tamaño: 16px Color: # Este es el cuerpo del texto base a 18px Tamaño: 18px Interlineado: 28px o 26px Color: # Link o link y #tags Estilo: Subrayado Color: # ó #FF149B Esta es una cita textual Tamaño: 22px Interlineado: 28px Peso: Itálicas Color: #666666

3 Colores Se utilizan la gama de colores establecidos el Manual de Imagen de la CDMX en sus versiones RGB y adaptados a los colores seguros para web. RGB R: 029 G:029 B:027 #1D1D1B RGB R:255 G:20 B:155 #FF149B # # # # #CCCCCC #EFEFF2 #FFFFFF *Debido a que el magenta es el único color en el sitio, debe ser utilizado en pequeñas proporciones para resaltar información o llamar a realizar alguna acción. A A Íconos Se ha elegido la tipografía web Font Awesome 1 para la comunicación iconográfica de los portales web, se recomienda usar el siguiente set de íconos categorizados según su función. Tamaño: 18px Color: # Navegación Contenido Redes Sociales Ayuda y avisos Contacto Abrir en ventana nueva Video Facebook Alerta Correo electrónico Compartir Imagen / galería Twitter Aviso Teléfono Ingresar Nota / artículo Youtube Fijado Oficinas Usuario Documento Instagram Ayuda Web Retícula / lista Audio Flickr Información Top / bottom Reproducir Whatsapp Siguiente / anterior Evento / calendario / fecha Pinterest mostrar / ocultar contenido Lugar / mapa Zoom Fecha y hora Expandir / minimizar pantalla Enlace Aceptar / cancelar Etiqueta Cargando / procesando Descargar Cerrar ventana Imprimir Ir a contenido Lista contenido Buscar 1 fortawesome.github.io/font-awesome

4 Íconos con acciones (Botones) Se pueden crear botones de acción a partir del set de íconos establecidos. Botón 42px * 42px #FFFFFF border: 1px; # #CCCCCC # font-size: 22px # # #F0F0F2 font-size: 22px # # #F0F0F2 Compartir por correo Repoducir Compartir en Whatsapp Regresar arriba Compartir en Twitter Retícula Compartir en Facebook Lista Imprimir Buscar Ver artículo Pantalla completa Descargar Retículas Para que los portales web sean responsivos, es necesario diseñar las páginas y sus elementos en tres formatos distintos: Escritorio, tableta y móvil. Se recomienda utilizar los siguientes sistemas de retículas y medidas en la maquetación y producción de páginas y elementos del portal web. Escritorio Tableta Móvil 1,280px 768px 480px

5 Escritorio 1,280px 1,240px px 85px 85px Tableta 768px 703px px 30px Móvil 3 292px px 14px

6 Esta guía fue desarrollada por la Dirección General de Mensaje y Nuevas Tecnologías de Oficialia Mayor en un esfuerzo de unificar y mejorar la comunicación visual de los portales web de la Administración Pública de la CDMX. Para cualquier aclaración o comentario sobre el uso o aplicación de esta guía favor de ponerse en contacto con la Subdireccíon de Apoyo y Producción de Contenidos para Medios Electrónicos de la DGMyNT al correo electrónico: digital@cdmx.gob.mx 21 de junio del 2016 (v1.3) Dirección General de Mensaje y Nuevas Tecnologías OM