Guía de diseño web para los sitios web de las dependencias del IPN

creados sobre la plataforma MoDX

Tabla de contenido

Guía de diseño web ..................................................................................... 1

Introducción ......................................................................................................................... 2

Objetivo ............................................................................................................................... 2

Base gráfica gob.mx .............................................................................................................. 3

Arquitectura de la información ............................................................................................. 4 Estructura general de la página.................................................................................................................. 5 Estructura general del portal institucional ................................................................................................. 5 Estructura general para Unidades Académicas ......................................................................................... 7 Estructura general para Áreas centrales .................................................................................................... 8 Estructura general de Secciones de Estudios de Posgrado e Investigación y Centros de Investigación ... 9 Contenedor de información (layout) ....................................................................................................... 10 Tipos de layout ......................................................................................................................................... 10

Estilo visual ........................................................................................................................ 25 Tipografía .................................................................................................................................................. 25 Helvetica y sans son el complemento de la base tipográfica a utilizar. ................................................... 26 Componente títulos.................................................................................................................................. 27 Paleta de color .......................................................................................................................................... 28 Imágenes .................................................................................................................................................. 29 Componentes de Slider e Imagen ............................................................................................................ 29 Imagen para slider .................................................................................................................................... 29 Contenedor principal centrado ................................................................................................................ 30 Componente slider central ....................................................................................................................... 31 Imagen responsiva dentro de layout fullwidth ........................................................................................ 31 Imagen responsiva dentro de layout contenedor centrado .................................................................... 32 Imagen para contenedor .......................................................................................................................... 32 Background ............................................................................................................................................... 33 Background con imagen ........................................................................................................................... 35

Creación de contenidos (restricciones y sugerencias) ........................................................... 37 Componente Banderín y escudo .............................................................................................................. 37 Componente menú principal.................................................................................................................... 37 Componente menú principal, menú manual (id) y breadcrumbs ............................................................ 38 Background patrón y Componentes párrafo y texto MarkDown ........................................................... 39 Texto y columnas ...................................................................................................................................... 41 Imágenes para contenido y para slider .................................................................................................... 41 Componentes de imagen-texto vertical y componente noticias ............................................................. 45 Componente ícono ................................................................................................................................... 46 Paginas internas ....................................................................................................................................... 47 Componente video ................................................................................................................................... 47 Componente Menú lateral ....................................................................................................................... 48 Componente listas .................................................................................................................................... 48 Componente redes sociales ..................................................................................................................... 48 Componente Comunicados Noticia horizontal ........................................................................................ 48

Introducción La nueva plataforma institucional del Instituto Politécnico Nacional supone un salto en la funcionalidad, dando un giro a su versión anterior y realizando una profunda modificación de usabilidad, accesibilidad, organización de los contenidos, aspecto visual y soporte tecnológico. La guía de diseño web para el portal y las dependencias del Instituto Politécnico Nacional tiene como objetivo establecer criterios que guíen la construcción de sitios web apegados a la imagen institucional, criterios accesibilidad y usabilidad.

Objetivo Con el objetivo homogenizar la estructura del contenido y de guardar coherencia en todo el portal y los sitios de las dependencias politécnicas se ha redactado esta Guía de diseño web. Estableciendo pautas para un desarrollo coherente y comprensible que ayude a una correcta construcción, edición y crecimiento de los sitios web buscando que este documento permita asimilar ágilmente los objetivos en cuanto a usabilidad e imagen se refiera.

Ayudar a los usuarios a encontrar lo que buscan

Las directrices que toma esta guía de diseño web son:

• Arquitectura de la información

• Estilo visual

• Creación de contenidos

Base gráfica gob.mx Todas las dependencias politécnicas deberán observar los criterios técnicos metodologías, instructivos, manuales, estándares, principios de homologación y demás instrumentos y además la incorporación de líneas de acción de la Estrategia Digital Nacional (5.1), Asegurando cumplir con la ejecución y políticas de implementación en materia de tecnologías de la información y comunicaciones. Con el objetivo de estandarizar la estructura de los contenidos, se ha realizado el siguiente documento, que funciona como guía que se deberá de cumplir al momento de realizar la construcción de todo aquello que tenga un dominio en internet (sitios web, formularios web, micro sitios, portales y sistemas) como se muestra en las siguientes imágenes Encabezado

Pie

para mayor información consulta la liga: https://www.gob.mx/guias/grafica

Arquitectura de la información

El sitio debe de estar dominado por el contenido Jacob Nilsen

Se entiende por Arquitectura de la Información (AI) a la disciplina que planifica y diseña la estructura sobre la que descansa el contenido de la web. Su misión es organizar la información del portal y la forma en la que esta estará dispuesta en la interfaz para así ayudar a los usuarios a encontrar, manejar y comprender la información. Por esta razón, es muy importante tener en cuenta al usuario cuando se integran los contenidos en el portal y se diseña la navegación. Algunos de los inconvenientes que pudimos observar en los sitios institucionales anteriores eran:

• Redundancia de logotipo institucional

• Iconos, textos, enlaces e imágenes condensados en espacios reducidos

• Demasiadas imágenes en el slider principal

• Ligas rotas El objetivo principal que se ha perseguido es el de definir una correcta arquitectura de información para facilitar a nuestros usuarios que accedan de manera sencilla a todo el contenido. Otra problemática que encontramos fue el hecho de que Navegabilidad y usabilidad entre los sitios de las dependencias funcionan de distinta manera, lo que significa una reducción de fluidez al momento de buscar información, aumento en el tiempo de aprendizaje en el “uso y manejo del sitio” y si existía la necesidad de visitar otro sitio institucional, el usuario se encontraba con una navegación y usabilidad distinta en cada sitio web. El diseño web de este portal se ha centrado en el usuario asumiendo que todo el proceso de diseño y desarrollo del sitio web debe estar conducido por él, sus necesidades, características y objetivos.

Estructura general de la página Para realizar una estructura general que representará la identidad institucional en sitios web, se realizó un benchmarketing para identificar los temas que se involucran en cada perfil de las dependencias politécnicas. Por lo que a la hora de diseñar la estructura básica de cada una de las páginas que componen el portal se ha optado por un esquema que se basa en grandes contenedores diferenciados horizontalmente. Este deberá ser utilizado por las dependencias politécnicas ya que proporciona flexibilidad a la hora de incorporar contenidos extensos y facilita la navegación del usuario. A su vez establece elementos comunes que garantizan la coherencia y la consistencia de las secciones y páginas del sitio. Por lo que se recomienda que la unidades se apeguen al diseño de la plantilla proporcionada para cada perfil con el que cuenta el instituto.

Estructura general del portal institucional Esta es la estructura que conforma el portal del Instituto Politécnico Nacional

Estructura general para Unidades Académicas

En la estructura general para Unidades Académicas encontramos de arriba a abajo Escudo, Menú, Nombre de la escuela, Slider, iconos, comunicados, oferta educativa, enlaces de interés, contenedor de información, ubicación. Tanto la cabecera como el pie son elementos fijos sin posibilidad de editar. Consulta la plantilla en el siguiente vínculo.

• Nivel medio superior : https://dev.desarrolloweb.ipn.mx/nms/

• Nivel superior: https://dev.desarrolloweb.ipn.mx/ns/

Estructura general para Áreas centrales

En la estructura general para Áreas Centrales encontramos de arriba a abajo Menú, Nombre de la escuela, Slider, iconos, enlaces de interés, contenedor de información, ubicación. Tanto la cabecera como el pie son elementos fijos sin posibilidad de editar. Consulta la plantilla en el siguiente vínculo: https://dev.desarrolloweb.ipn.mx/cpwi/inicio.html

Estructura general de Secciones de Estudios de Posgrado e Investigación y Centros de Investigación

Consulta la plantilla en el siguiente vínculo. https://dev.desarrolloweb.ipn.mx/plantillaps/

Contenedor de información (layout) El contenedor de información se dispone para el contenido de relevancia e interés para la operación y funcionamiento requerido por cada dependencia, misma que deberá ser de criterios claros, sencillos, estandarizados y apegados a los intereses y búsquedas de los usuarios, para que mejore su experiencia e interacción. El uso de los bloques horizontales están elaborados de manera que puedas utilizar temas específicos o de relevancia o interés para denotar al usuario y permita su navegación.

Lo importante es la estructura y la arquitectura de la información, lograr una sencillez en los flujos por los cuales se llega a la información. (ux nigths 1)

Tipos de layout Los espacios para los contenedores layout se presentan de la siguiente manera.

Layout Full Width Ocupa todo el ancho de la pantalla ya que definiendo el encabezado y el pie de página con un comportamiento responsivo, así como el uso y manejo de los layouts y componentes para el uso de imágenes o sliders.

Layout principal Este layout fue desarrollado para ocupar el ancho de pantalla con comportamiento responsivo y solamente es para el uso y manejo de sliders, imágenes responsivas y contenedores con layout

Layout principal centrado Este layout fue desarrollado con un ancho máximo de 1170px dividido en 12 columnas y se centra dejando un espacio en los costados. Su principal función es contener todos los componentes disponibles en plataforma los cuales se ajustarán de manera responsiva.

Cabe señalar que basándonos en los layouts anteriores y para el uso y manejo de la información se crearon los siguientes:

Columnas iguales – 2 columnas 6/6

Columnas iguales – 3 columnas 4/4/4

Columnas iguales

Columnas iguales

Columnas iguales – 4 columnas 3/3/3/3

Columnas iguales – 6 columnas 2/2/2/2/2/2

Columnas iguales

Columnas iguales

Columnas diferentes – 2 columnas 2/10

Columnas diferentes – 2 columnas 10/2

Columnas diferentes – 2 columnas 4/8

Columnas diferentes – 2 columnas 8/4

Columnas diferentes – 2 columnas 3/9

Columnas diferentes – 2 columnas 9/3

Columnas diferentes – 2 columnas 7/5

Columnas diferentes – 2 columnas 5/7

Columna centrada – 1 columna of1 / 10 / of1

Columna centrada – 2 columnas of1 / 5 / 5 / of1

Columna centrada – 1 columna of1 / 7 / 3 / of1

Columna centrada – 2 columnas of2 / 4 / 4 / of2

Columna centrada – 4 columnas of2 / 2 / 2 / 2 / 2 / of2

Columna centrada – 5 columnas of1 / 2 / 2 / 2 / 2 / 2 / of1

Iconos – 3 columnas of1 / 2 / of2 / 2 / of2 / 2 / of1

Iconos – 4 columnas of2 / 2 / 2 / 2 / 2 / of2

Iconos – 5 columnas of1 / 2 / 2 / 2 / 2 / 2 / of1

Iconos – 6 columnas 2/ 2 / 2 / 2 / 2 / 2

Carrusel de 3 elementos por pantalla

Carrusel de 4 elementos por pantalla

Carrusel de 6 elementos por pantalla

Para saber más sobre contenedores layout visita la siguiente liga: Contenedor layout

Estilo visual Tipografía La tipografía principal utilizada en el sitio web es Open Sans que es una fuente de apariencia neutral, no usa patines y es idónea para uso web por su fácil legibilidad 1.

Con los mismos atributos de pertenecer al tipo Sans Serif, no usa patines, moderna y accesible2, ideal para uso web, se usa la tipografía Roboto.

1 https://fonts.google.com/specimen/Open+Sans 2 https://fonts.google.com/specimen/Roboto

Helvetica y sans son el complemento de la base tipográfica a utilizar.

Componente títulos La correcta utilización de los encabezados H1 y sus hermanas menores son de las herramientas más potentes con las que se cuenta al momento de hablar de posicionamiento SEO (Search Engine Optimization) y visibilidad del sitio web en los motores de búsqueda.

Paleta de color Para homologar y mantener una identidad institucional en sitios web se creó una paleta de color para ser utilizada en el menú principal, contenedores de backgrounds detenidamente para la armonización con el contexto del sitio. Esta paleta de color tiene descrito sus valores en hexadecimal y en RGB

Colores principales

La paleta de color secundaria, si bien no es obligatorio usarla, si es una sugerencia para utilizarlos en imágenes, iconos o gráficos de apoyo, los colores de esta paleta se escogieron detenidamente para la armonización con el contexto del sitio.

Colores secundarios

cabe señalar que si alguna dependencia requiere un color en especifico puede solicitarlo via correo a cpwi@ipn.mx y será evaluado e implementado si se requiere.

Imágenes Los componentes de imagen son de gran valor gráfico que enriquecen el contenido. Las imágenes del portal irán siempre optimizadas para web a 72 PPI en formato JPG y GIF. Sin rebasar a un peso del archivo de 120 kb. En el caso del formato .png se utilizará en los casos que el diseño requiera imágenes con fondo transparente tanto en imágenes como en iconos. Siempre respetando el peso máximo por imagen de 120kb. El publicador será responsable de que éstas respeten los derechos de propiedad intelectual.

Componentes de Slider e Imagen A continuación, se presentan los diferentes formatos para el manejo de slider e imágenes responsivas que nos podemos encontrar en la plataforma.

Imagen para slider El componente de slider es creado para tener la funcionalidad de colocar aquello que involucra actividades principales propias de su unidad o su identidad académica ejemplo: alumnos, instalaciones, investigaciones, eventos de su importancia, evitando colocar eventos o noticias de otras unidades, para difundir estos temas se crearon otros componentes, que veremos más adelante.

Este componente puede utilizarse en formato fullwidth que se ajusta en su totalidad del ancho de cualquier dispositivo. Tamaño de imagen para componente 1920 x 450 pixeles.

Otra opción de dimensiones es la imagen en 1920 x 250 pixeles.

Contenedor principal centrado Este componente recibe imágenes en dimensiones 1170 x 400px ajustado a 12 columnas.

Componente slider central Esta imagen es parte de un slider central con la particularidad de visualizar un fragmento de las imágenes que componen el slider central, no tiene vinculación. La medida para esta imagen es 900 x 400px

Imagen responsiva dentro de layout fullwidth Imagen para mostrarse a pantalla completa, regularmente usada en el Inicio. Su medida es 1920 x 450px

Imagen responsiva dentro de layout contenedor centrado Esta imagen esta delimitada por el ancho del contenedor principal centrado, puede usarse en cualquier parte del cuerpo del sitio web. Su medida es 1170 x 400px

Imagen para contenedor Esta imagen es para usar en cualquier contenedor que no sea slider El tamaño único para esta imagen es 580 x 260px La siguiente imagen ilustra las distintas formas de acomodar las imágenes según el layout que las contenga.

Background Para ayudar a la identificación entre un contenedor layout y otro, se recomienda apoyarse en los colores de fondo para lograr una distinción de contenidos, dichos colores de fondo están disponibles en los ajustes de cada contenedor layout background. Puedes ver el uso de los contenedores layout background a través de esta liga: Contenedor layout background

Los colores que están disponibles en los ajustes son los siguientes:

Background con imagen Una variación para el uso de color de fondo es el background con imagen, el cual toma una imagen precargada, reduce su opacidad y le aplica un color para lograr un color y textura de fondo única y que puede acompañar a los contenidos solo de manera decorativa. Las imágenes que se ocupan para este componente tienen una dimensión de 1920 x 500 px. Imagen original

Background con imagen con aplicación de color

Elementos como íconos quedan bien con este tipo de fondo

Creación de contenidos (restricciones y sugerencias) A continuación veremos solo algunos de los componentes disponibles en la plataforma MoDX y las consideraciones graficas y de usabilidad que debemos tener en cuenta al momento de cargar información en ellos.

Componente Banderín y escudo (este componente solo se utiliza

para las escuelas)

Puedes encontrar el escudo de tu escuela optimizado para usarlo en este componente en la siguiente liga Escudos escuelas

Componente menú principal El menú principal se sitúa en la parte superior del sitio, tiene por objetivo tener los titulares del total de la información ya categorizada, una de las principales recomendaciones es evitar utilizar siglas o nombres demasiado extensos.

El menú tiene la posibilidad de contener solo 1 nivel de submenú, para el cual se recomienda de igual forma evitar usar siglas o nombres demasiado extensos

Si quieres obtener más información sobre el componente menú, visita la siguiente liga, Agregar menú principal

Componente menú principal, menú manual (id) y breadcrumbs Para las páginas interiores lo correcto es usar después del menú principal el menú manual (id) para los casos en los que el contenido contenga varios subtemas. Los breadcrumbs deben de incluirse en todas las páginas interiores.

Background patrón y Componentes párrafo y texto MarkDown Evitar usar los grandes párrafos de texto sobre cualquier background patrón, debido a que dificulta la legibilidad

Para los casos en donde se ocupen grandes textos algunas sugerencias son: Iniciar con un resumen, descripción general o introducción breve sobre un color sólido, ya sea blanco o de otros color opcional del componente, enseguida un botón que vincule hacia un pdf.

También puede sumarse una imagen para dar soporte al texto

El texto también puede ser dividido en columnas

Evitando dejar vacíos

Es preferible ajustar el texto en ambas columnas o incluir una imagen

También debes de evitar un solo color en todo el cuerpo del contenido

Texto y columnas Cuando se trata de incluir textos e imágenes usando layouts de dos columnas siempre hay una opción que mejor se adapte al contenido para lograr una mejor disposición de los elementos utilizados. En el siguiente caso se está ocupando el componente layout 2 columnas 6/6 para contener una determinada cantidad de texto acompañado de unan imagen, esta composición deja un gran espacio en blanco.

Una mejor opción es utilizar el componente layout 2 columnas of1 /7/3/ of1, en la siguiente imagen se puede observar que las columnas 1 y 12 se desactivan ( of1 ) y solo se activan las 10 columnas centrales, de las cuales se ocupan 7 para el texto y 3 para la imagen, lo que hace que los contenidos se distribuyan de una forma más uniforme

Imágenes para contenido y para slider De los aspectos más importantes que deben de considerarse a la hora de incluir imágenes en los contenidos son:

• Agregar el atributo ALT a todas las imágenes que se incluyan

• NO incluir imágenes muy grandes dentro del cuerpo, mejor utiliza una liga externa o pdf.

• NO incluir textos descriptivos, datos informáticos como fechas, teléfonos

o correos electrónicos dentro de la imagen, aunque esta sea muy grande lo ideal es colocarlos como texto markdown y la imagen solo usarla como soporte de la información. Los textos dentro de imágenes suelen volverse ilegibles cuando se visualizan en dispositivos móviles, además de que se vuelven datos invisibles en los motores de búsqueda.

• Utilizar los recursos disponibles de la manera que los contenidos se disponga de forma clara y fácil identificar. La imagen siguiente representa una mejor forma de acomodar la oferta educativa comparada con la imagen del anterior punto.

• Es muy importante siempre utilizar imágenes que cumplan con las medidas correspondientes al componente a utilizar. Para mejor referencia consulta la pág. 30 de esta guía

• También es importante incluir el atributo ALT a cada imagen que se ocupe en el contenido

• En los sliders no solo en lo ancho sino en lo alto deben de respetarse las dimensiones

• En la siguiente imagen se ocupa un componente de slider en un layout fullwidth, la imagen es menor al tamaño recomendado (1920x450px) por lo que el resultado mostrará una imagen con muy poca definición.

• NO colocar el escudo de la escuela en las imágenes para slider, para evitar una redundancia de escudos.

• NO incluir convocatorias ni temáticas de otras unidades, solo incluir referentes a su unidad

Componentes de imagen-texto vertical y componente noticias Este tipo de componentes soy muy útiles como gancho visual y como antesala para mostrar más información. Evitar usar demasiado texto descriptivo en un componente y escaso texto en otros.

Otro caso similar es usar imágenes que no corresponden al tamaño requerido.

Para mejor referencia consulta la pág. 30 de esta guía

Los textos de descripción deben de ser breves y calculando que sea similar en número de caracteres que las demás noticias.

Componente ícono Los íconos en el sitio web tienen la función de persuadir discretamente al usuario, son un acento visual que nos guía. Una de la recomendación que hacemos es mantener el mismo estilo gráfico al momento de diseñar y utilizar los íconos en el sitio web. Es decir, si se están usando una circunferencia para envolver un icono, todos los iconos del grupo deberán estar envueltos en una circunferencia, si se utiliza un degradado, sombra o brillo, todos los iconos de ese grupo deberán usarlos también. Ejemplo

Paginas internas Cuando se crean páginas internas hay que considerar al momento de titularla no usar caracteres especiales.

o usar espacios

Y tampoco crear una página interna solo para incluir poco texto.

Componente video • No meterlo en carrusel si no corresponde al tamaño de las demás

imágenes

Componente Menú lateral • Evitar crear menús laterales con muchas opciones y pocos textos en su

interior

Componente de listas • Evitar crear listas extensas de una sola columna

• Seccionar la lista en columnas

Componente Comunicados Noticia horizontal • En las comunicados o noticia horizontal, evitar poner el nombre del

mes completos.

• Se recomienda Fechas abreviadas en el componente

Componente Time Line de redes sociales • Evita insertar el Time line en un layout fullwith