Guía de Diseño Web

1

ÍNDICE

Estructura y Composición 2

Tipografía, Imágenes y Documentos 3

Pleca Institucional “Header” y Footer 4

Home (Inicio) 5

Subsitios y Slide Principal 6

Composición de Slide Principal 7

Sitios de Interés y Agenda 8

Cartel Digital 10

Composición Cartel Digital 11

Cartel Digital Ejemplo (vertical) 12

Cartel Digital Ejemplo (horizontal) 13

Página (Ejemplo) 14

Composición Página Ejemplo 15

Slide Inferior y Composición de Slide Inferior 9

2

Estructuray composición

3

- Tipografía.

- ImÁgenes.

- Documentos.

Títulos: Open Sans, Helvetica (Sans Serif) a 19.5pt.Color: #7b123f.

Textos: Open Sans, Helvetica (Sans Serif) a 10.5pt.Color: #676767.

Se permite el uso de Itálica y Bold, siempre y cuando se respete el color antes mencionado.

Formatos permitidos: PDF.

O�cios, circulares, actas, memorándums, formularios, etc. En formato PDF, menor a 1 MB.

Todo archivo deberá ser renombrado antes de solicitar su publicación, (minúsculas y separación con guión medio) ejemplo: “documento-ejemplo”.

Formatos permitidos: PNG, menores a 120 kb.Resolución: Máxima 72 ppp.** El tamaño puede variar según las necesidades del Sitio.

4

- Pleca Institucional “Header”.

- Footer.

Plantilla establecida por Área Central (Portal Web) no puede ser modi�cada ya que cuenta con lineamientos establecios por Gobernación.

Toda Página dentro del Sitio, debe cumplir con el mismo “Header”, si una Página es creada desde otra área ajena a la Unidad de Informática - UPIICSA, deberá cumplir con éste.

Plantilla establecida por Área Central (Portal Web) no puede ser modi�cada ya que cuenta con lineamientos establecios por Gobernación.

Toda Página dentro del Sitio, debe cumplir con el mismo “Footer”, si una Página es creada desde otra área ajena a la Unidad de Informática - UPIICSA, deberá cumplir con éste.

5

HOME(INICIO)

6

- Subsitios

- Slide Principal

Establecidos por Área Central (Portal Web) pueden ser modi�cados según las necesidades de la Unidad Académica (UPIICSA).

Dedicado a publicaciones de interés general, tales como:

- Comunidad Politécnica.- Comunidad UPIICSA.- Público Externo.

No se permite la difusión de Eventos para un público menor a los antesmencionados, de ser necesario se someterá a valoración por el áreacorrespondiente de hacer la difusión.

Sólo se permite un máximo de 5 publicaciones.

Características técnicas:

- Documentos (o�cios, circulares, actas, memorándums, etc.), en formato

PDF, menor a 1 MB.- Imágenes en formato “png”, menores a 120 kb.- Resolución: Máxima 72 ppp.- 1920 x 600px.** El tamaño puede variar según las necesidades del Sitio.

7

- Composición de Slide Principal

Título

DatosDiseño

-Título:

Este debe ser notorio, de aquí parte el atraer a nuestro espectador, causar interés para consultar mayor información, que obtendrá al dar clic en la imagen.

-Datos:

Información breve del evento, fecha y hora, ubicación, eslogan, etc.

-Diseño:

No cargar de elementos, en el caso de escudos y logotipos, es indispensable utilizar colores y formas o�ciales, de lo contrario no se publicará; ya que no se estarían respetando los lineamientos establecidos por dichos elementos. No es necesario replicar los elementos visuales del apartado superior del Sitio; es redundante y saturaría el área de diseño.

8

Sitios de mayor concurrencia por nuestros espectadores. Estos deben atraer a nuestros 3 targets ( Público Externo, Comunidad Politécnica yComunidad UPIICSA), no se permite dar enlace a Páginas o Sitios con menoraudiencia, al ser lo primero que ve el espectador ingresando al Sitio.

Eventos Académicos, Tecnológicos, Culturales, Deportivos y de Interés Social.

Características técnicas:

- Documentos, en formato PDF, menor a 1 MB.- Imágenes en formato “png”, menores a 120 kb.- Resolución: Máxima 72 ppp.- 1920 x 500px.** El tamaño puede variar según las necesidades del Sitio.

- Sitios de Interés.

- Agenda.

9

Diseño y Datos

Avisos secundarios, enfocados a un público en especí�co, con la �nalidad de reducir las publicaciones que se cargan en el Slide Principal.

Características técnicas:

- Documentos (o�cios, circulares, actas, memorándums, etc.), en formato PDF, menor a 1 MB.- Imágenes en formato “png”, menores a 120 kb.- Resolución: Máxima 72 ppp.- 560 x 380px.** El tamaño puede variar según las necesidades del Sitio.

-Diseño y Datos:

Debido al tamaño, es necesario hacer los datos, un conjunto con el diseño, si se requiere incluir, de lo contrario el título pasa a ser parte del diseño; causando impacto en nuestros espectadores y consulten a detalle la información al dar clic en la imagen.

- Slider Inferior.

- Composición de Slider Inferior.

10

Carteldigital

11

El contenido a llamar, mediante Slide Principal , Slide Inferior, Agenda u otro apartado dentro del Sitio, deberá cumplir con las siguientes características técnicas y visuales para su difusión. Es importante tomar en cuenta que, trípticos, dípticos, folletos u otro contenido de carácter de impresión, no se publicarán, ya que no pertenecen al medio multimedia.

- Características técnicas:

Formato PDF, tamaño menor a 1 MB.Medidas: Vertical a 612 x 792px, Horizontal a 792 x 612px.

-Características visuales:En ambas presentaciones (vertical y horizontal), se divide en tres secciones:

- Pleca Institucional:

Está compuesta por los logotipos utilizados (tanto de la SEP como del Instituto) en la imagen de la Administración Pública Federal 2014-2024.

- Área de diseño:

Información detallada del evento, ya sea con imágenes o texto.

- Composición Cartel Digital

12

- Cartel Digital, Ejemplo (Vertical).

ÁREA DE ARTE

ÁREA DE FIRMA INSTITUCIONAL OFICIAL

Área de Protección

En la pleca blanca de abajo, únicamente colocar la página de internet oficial del IPN (tipografía Montserrat SemiBold) centrada sobre una pleca blanca

www.ipn.mx

110

13

- Cartel Digital, Ejemplo (Horizontal).

ÁREA DE FIRMA INSTITUCIONAL OFICIAL

Área de Protección

En la pleca blanca de abajo, únicamente colocar la página de internet oficial del IPN (tipografía Montserrat SemiBold) centrada sobre una pleca blanca

ÁREA DE ARTE

www.ipn.mx

14

Página(Ejemplo)

15

- Composición Página Ejemplo

PlecaInstitucional (Header)

Slide

TipografíaÁrea decontenido

Footer