ipn manual identidad web

INSTITUTO POLITÉCNICO NACIONALMANUAL DE IDENTIDAD GRÁFICAPORTAL WEB INSTITUCIONAL 2012

México D.F., 2012Versión 1.0


ÍNDICE

Acerca de éste documento

Racional creativo

Colores

Tipografía

Proporciones

Elementos Generales

Módulos de Contenido

3

4

5

6

7

13

24

2


ACERCA DE ESTE DOCUMENTO

El Manual de Identidad Web del Instituto Politécnico Nacional tiene la finalidad de proveer de lineamientos para agencias, diseñadores y desarrolladores que se vean involucrados en la manutención y crecimiento de la plataforma web con base en el estilo gráfico propuesto para el rediseño 2012 del portal institucional y plantillas para sitios de la red que de éste deriven.

Conservar unidad gráfica es de suma importancia para el Instituto Politécnico Nacional, dando mensaje a la comunidad y sociedad en general de ser una entidad que se rige por normas y valores estruc-turados y sólidos. Siendo consistente con la confianza que en ésta institución se deposita en el desarrollo tecnológico de vanguardia. El éxito de una unidad gráfica depende de la participación de la comunidad involucrada.

En este documento se exponen los elementos de reticula, colores, tipografía y recomendaciones de uso que servirán como distintivo de identidad. La generación de nuevos componentes basados en este docu-mento serán sujetos a consideración y aprobación de la comuni-dad de desarrollo.

Éste documento tiene validez para todos los sitios de la red del Instituto Politécnico Nacional siempre y cuando el Portal Institucio-nal conserve los elementos aquí descritos como eje central.

3


RACIONAL CREATIVO

El desarrollo de interfases gráficas derivadas de un metodología permite el desarrollo de propuestas a partir de una estructura de información; donde en primer instancia se organizan los contenidos que serán entregados a las diversas audiencias receptoras a través de diagramas de Arquitectura de Información. Una jerarquización de elementos a desplegar dentro de cada página es derivada de la diagramación de Esqueletos de Diseño (Wireframes) que permiten al emisor y receptor localizar dentro de cada composición los principales elementos del mensaje, y de manera secundaria toda aquella información que complemente su experiencia.*

La Identidad Gráfica Institucional es sin duda el punto de partida para retomar los lineamientos tipográficos y estéticos y compositi-vos para continuar en una experiencia unitaria hacia otros dispositi-vos, la presencia uniformada.

La conjugación de los elementos anteriormente descritos establece la tipografía, gama de colores y elementos a integrar dentro de las propuestas gráficas. El objetivo de este rediseño es proponer nuevas estructuras donde por medio del manejo de elementos de diseño se pudiera crear un dinamismo en la información y una jerarquización de elementos con fines mercadológicos que con-trastarán con las versiones anteriores del portal y que por medio de estos recursos atraerán la atención de un público joven, enaltenci-endo los logros y valores del Instituto.

*Ver documentación de arquitectura de información generada para este proyecto.

4


COLORES

A partir de el color Guinda institucio-nal (Pantone 222C), se generó una gama de colores añadiendo colores incluyendo complementarios, neutros y contrastantes.

Los colores complementarios le dan sobriedad institucional al sitio.

Los colores contrastantes dan dina-mismo y frescura a elementos a resaltar.

Los colores neutros dan soporte y descanso visual para promover la lectura.

La descripción del color está expre-sada en código hexagecimal y su equivalente en mezcla RGB para su utilización en HTML's

#6D1A42

#363554

#DDDDE2

#F2F0F0

#FFFFFF

#FF9933

#DEDBCC

#000000

R: 109 G: 26 B: 66

R: 54 G: 53 B: 84

R: 221 G: 221 B: 226

R: 242 G: 242 B: 240

R: 255 G: 255 B: 255

R: 255 G: 153 B: 51

R: 222 G: 219 B: 204

R: 0 G: 0 B: 0

5


TIPOGRAFÍA

Utilizada en el lema del logotipo Institucional

Familia tipográfica desarrollada por Max Miedinger en 1957 para la fundición de tipografías Haas'sche Schriftgießerei (también conocida como "Haas") de Basilea, Suiza.

La familia tipográfica se caracteriza por carecer de remates de termi-nación (san serif). Su principal utilidad es en titulares. A puntajes muy peque-ños puede presentar problemas de legibilidad, por lo que el puntaje mínimo recomendado es de 10px. La familia se acerca a los tipos Clarendon como equivalentes con serif, sin embargo las características ópticas de la fuente se prestan para que la familia no sea combinada.

Helvética Regular

Aa Bc Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz0 1 2 3 4 5 6 7 8 9 0 @ ¿? ¡! “” , . - * & % $

Helvetica Italic


Helvética Bold


6


Proporciones

7


SITIO INSTITUCIONAL

PROPORCIONES

Se toma como base el diseño a una resolución de 1024 x 768 pixeles, considerando como área crítica de diseño un área de 950 x 600 pixeles.

El área crítica comprende los elemen-tos comprendidos al desplegar una pantalla a primer vistazo, restando elementos como interfaz del programa de exploración y barras de desplazamiento.

8

950

600


SITIO INSTITUCIONAL

PROPORCIONES

El primer segmento de la página principal surge a partir de las dimen-siones de la inserción de video (widescreen) con controles de naveg-ación para dimensiones totales de 640 x 360 pixeles, la segunda columna es resultado del área restante para completar el ancho de área crítica

La segunda región se deriva de una retícula de cuatro columnas respecto al área crítica

La tercer región divide en cinco columnas la zona de categorización de servicios

9


SITIO INSTITUCIONAL

PROPORCIONES

El primer segmento de la página principal surge a partir de las dimen-siones de la inserción de video (widescreen) con controles de naveg-ación para dimensiones totales de 640 x 360 pixeles, la segunda columna es resultado del área restante para completar el ancho de área crítica

La segunda región se deriva de una retícula de cuatro columnas respecto al área crítica

La tercer región divide en cinco columnas la zona de categorización de servicios

10


SITIO INSTITUCIONAL

PROPORCIONES

A partir de las dimensiones de la imagen centrales del home, derivan los tamaños de las imágenes subse-cuentes escalando a proporción

11


SITIO INSTITUCIONAL

PROPORCIONES

Las páginas interiores basan su diseño a partir de una retícula de 4 columnas de donde se crean módu-los sumando cuartos, de modo que éstos puedan ensamblar combinando elementos según la funcionalidad y jerarquía lo demande.

12


Elementos generales

13


SITIO INSTITUCIONAL

CABECERA

Alto total160pxAncho total100%

Zona de identidadAncho: 930pxAlto:99pxColor de fondo: #6d1a42

LogotipoCaracterística: Imagen PNGAncho: 60pxAlto: 99pxTítuloCaracterística: Texto de sistemaFuente: HelvéticaPuntaje: 18pxColor: #FFFFFFVariación: UppercaseSubtítuloTamaño: 14px

14


SITIO INSTITUCIONAL

MENÚ AUXILIAR

ContenedorAlto: 30pxColor de fondo: #dddddeTextoCaracterística: Texto de sistemaFuente: HelvéticaPuntaje: 11pxColor: #363654Padding derecho: 10pxPadding izquierdo: 10pxEstado OverBorde superiorAlto de borde: 2pxColor de borde: #ff9933Estado SeleccionadoBorde superiorAlto de borde: 2pxColor de borde: #6d1a42

15


SITIO INSTITUCIONAL

MENÚ PRINCIPAL

ContenedorAlto: 31 pxBorde inferiorAlto de borde: 1pxColor de borde: #f9f8f8 ListadoAlto: 30 pxBorde inferiorAlto de borde: 1pxColor de borde: #dfdedeVínculoCaracterística: Texto de sistemaFuente: HelvéticaPuntaje: 14pxColor: #363654Padding derecho: 14pxPadding izquierdo: 14pxEstado OverBorde inferiorAlto: 3pxColor de borde: #ff9933Estado SeleccionadoBorde inferiorAlto: 3pxColor de borde: #6d1a42

16


SITIO INSTITUCIONAL

MENÚ DE SERVICIOS

Contenedor GeneralAltura mínima: 260 px

Contenedor de AgrupaciónAncho: 185 pxColor de fondo: #f9f8f8Márgen derecho: 1px

Vínculo Título de secciónCaracterística: Texto de sistemaFuente: HelvéticaPuntaje: 13pxColor: #FFFPadding: 10pxColor de fondo: #6d1a42Borde izquierdo ancho: 10pxBoder izquierdo color: #FF9933

Vínculo Título de secciónseleccionadoColor de fondo: #6d1a42Borde izquierdo ancho: 10pxBoder izquierdo color: #FF9933

17


SITIO INSTITUCIONAL

MENÚ DE SERVICIOS

Elemento ListadoCaracterística: Texto de sistemaFuente: HelvéticaPuntaje: 12pxColor: #363554Padding inferior: 7pxPadding superior: 7pxBorde inferior alto: 1pxBorde inferior estilo: punteadoBoder izquierdo color: #CCC

Más informaciónCaracterística: Texto de sistemaFuente: HelvéticaPuntaje: 11pxColor: #6d1a42Alineación: Derecha

18


SITIO INSTITUCIONAL

PIÉ DE PÁGINA

Sitios de interés TítuloCaracterística: Texto de sistemaFuente: HelvéticaPuntaje: 14pxColor: #363554

Sitios de interés ImagenCaracterística: Imagen JPG, PNG o GIFTamaño: 148px x 53 pxMárgen Derecho : 5px

DivisiónBorde Inferior alto: 1pxBorde Inferior color: #DFDEDEBorde Superior alto: 1pxBorde Superior color: #F9F8F8

Medios SocialesCaracterística: Texto de sistemaFuente: HelvéticaPuntaje: 14pxColor: #363554Padding: 10pxAlineación: derechaFondo color: #FFF

Medios Sociales Imágen Característica: Imagen PNGTamaño: 32px x 32pxMárgen derecho: 5px

19


SITIO INSTITUCIONAL

PIÉ DE PÁGINA

Widget de traducción títuloCaracterística: Texto de sistemaFuente: HelvéticaPeso: BoldPuntaje: 18pxColor: #363554

Widget de traducción áreaAncho: 200pxAlto: 65px

MENÚ PIÉ DE PÁGINACaracterística: Texto de sistemaFuente: HelvéticaPuntaje: 11pxColor: #6d1a42Padding: 15px

Botón Directorio de sitios, Botón TransparenciaCaracterística: Texto de sistemaFuente: HelvéticaPuntaje: 11pxColor: #FFFFFFPadding: 15pxFondo color: #6D1A42Borde izquerdo ancho: 10px;Borde Izquierdo color: #FF9933

20


SITIO INSTITUCIONAL

PIÉ DE PÁGINA

Instituto títuloCaracterística: Texto de sistemaFuente: HelvéticaPuntaje: 14pxColor: #6d1a42

LegalesCaracterística: Texto de sistemaFuente: HelvéticaPuntaje: 11pxColor: #666666

21


SITIO DE DEPENDENCIA

CABECERA

Alto total124px

Zona de identidadAncho: 930pxAlto:63pxColor de fondo: #6d1a42

LogotipoCaracterística: Imagen PNGAncho: 40pxAlto: 63pxTítuloCaracterística: Texto de sistemaFuente: HelvéticaPuntaje: 12pxColor: #FFFFFFVariación: UppercaseSubtítuloPuntaje: 10px

Título DependenciaCaracterística: Texto de sistemaFuente: HelvéticaPuntaje: 22pxColor: #FF9933

22


SITIO DE DEPENDENCIA

MENÚ LATERAL

ContenedorAncho: 185px

Menú elementoCaracterística: Texto de sistemaFuente: HelvéticaPuntaje: 12pxColor: #363554Borde superior ancho: 1px;Borde superior color: #CCCCCCBorde inferior ancho: 1px;Borde inferior color: #FFFFFF

Menú overColor: #6d1a42Borde izquerdo ancho: 10px;Borde Izquierdo color: #FF9933Fondo color: #FFFFFF

Menú seleccionadoColor: #6d1a42Borde izquerdo ancho: 10px;Borde Izquierdo color: #FF9933Fondo color: #dddde2

23


Módulos de contenido

24


SITIO INSTITUCIONAL

PÁGINA DE INICIO

Carrusel de imágenesEl fin principal de éste módulo es de divulgación y difusión de actividades Politécnicas en el desarrollo científico, tecnológico y de investigación, así como logros. Los mensajes son dirigidos al público en general, a la prensa y a despertar el interés de atracción de talento para formar parte del Instituto. El detalle de estos contenidos aterrizará en notas desglosadas en el portal de Comunicación.

Un usuario promedio no pasará más de 10 segundos en la página principal por lo que no se recomienda exceder 5 notas en este espacio.

25


SITIO INSTITUCIONAL

PÁGINA DE INICIO

Carrusel de imágenesCaracterística: Imagen PNG, JPG, GIF o insersión de video*Ancho: 640pxAlto: 360px*Con video insertado no se mostrará zona de descripción

Zona de descripciónAncho: 640pxAlto: 125pxZona de descripción TítuloCaracterística: Texto de sistemaFuente: HelvéticaPuntaje: 22pxColor: #FF9933Zona de descripción ContenidoCaracterística: Texto de sistemaFuente: HelvéticaPuntaje: 14pxColor: #FFFFFFZona de descripción Leer másCaracterística: Texto de sistemaFuente: HelvéticaPuntaje: 11pxColor: #FFFFFFPadding izquierdo y derecho: 15pxPadding superior e inferior: 10pxBorde izquerdo ancho: 10px;Borde Izquierdo color: #FF9933Fondo color: #6d1a42

26


SITIO INSTITUCIONAL

PÁGINA DE INICIO

Escaparate de secciónLa finalidad de este módulo es promover contenidos dentro del mismo portal institucional, ya sea por la actualización de contenido o relevancia del mismo. Contará con título, una vista miniatura así como una breve descripción de la dependencia u oferta y una serie de vínculos (opcionales) que lleven al detalle de contenido expuesto.

27


SITIO INSTITUCIONAL

PÁGINA DE INICIO

Escaparate de secciónAncho: 290pxAlto: 360px

Escaparate TítuoAncho: 130pxAlto: 50pxCaracterística: Texto de sistemaFuente: HelvéticaPuntaje: 18pxColor: #FFFFFF

Escaparate Vista miniaturaAncho: 160pxAlto: 90px

Escaparate ContenidoCaracterística: Texto de sistemaFuente: HelvéticaPuntaje: 12pxColor: #333333

28


SITIO INSTITUCIONAL

PÁGINA DE INICIO

Escaparate VínculosPuntaje: 12pxColor: #6d1a42Borde inferior ancho: 1pxBorde inferior color: #CCCCCCBorde inferior estilo: punteado

Escaparate Leer másCaracterística: Texto de sistemaFuente: HelvéticaPuntaje: 11pxColor: #FFFFFFPadding izquierdo y derecho: 15pxPadding superior e inferior: 10pxBorde izquerdo ancho: 10pxBorde Izquierdo color: #FF9933Fondo color: #6d1a42

28


SITIO INSTITUCIONAL

PÁGINA DE INICIO

ProporcionesAncho: 235px

Agenda Politécnica TítuloPuntaje: 14pxColor: #FFFFFFBorde izquerdo ancho: 10pxBorde Izquierdo color: #FF9933Fondo color: #6d1a42

Agenda Politécnica EtiquetasPuntaje: 10pxColor: #6d1a42Alineación: derechaAgenda Politécnica FechasDía:Puntaje: 18pxColor: #FF9933Mes, Año:Puntaje: 12pxColor: #FF9933Agenda Politécnica EventoPuntaje: 13pxColor: #363554Peso: BoldAgenda Politécnica ConsultaPuntaje: 12pxColor: #363554Agenda Politécnica AgendaPuntaje: 18px

30


SITIO INSTITUCIONAL

PÁGINA DE INICIO

Zona de NoticiasSu finalidad es difundir actividades, convocatorias, eventos internos y comu-nicados dirigidos a la comunidad Politéc-nica. El detalle de estas notas radicará en páginas de contenido dentro del portal de Comunicación. Por omisión se desplegarán 3 notas, pudiendo estas crecer en triadas.

Noticia imagenAncho: 210pxAlto: 118px

Noticia títuloCaracterística: Texto de sistemaFuente: HelvéticaPuntaje: 14pxColor: #363554

Noticia contenido:Característica: Texto de sistemaFuente: HelvéticaPuntaje: 12pxColor: #666666

Noticia vínculoCaracterística: Texto de sistemaFuente: HelvéticaPuntaje: 10pxColor: #6d1a42

31


SITIO INSTITUCIONAL

MÓDULO 1a

UsoCabecera de subhome, cumple la finalidad de describir la dependencia u oferta de un modo general acompañado de una imagen representativa del tipo de actividad que se imparte o desempeña o el perfil de la audiencia a la cuál va dirigido, cuenta con liga única a sitio de dependencia, que ofrecerá más infor-mación

ProporcionesAncho: 930pxColor de fondo: #6d1a42

ImágenAncho: 370pxAlto: 208pxColor de fondo en rebase: #363554

TítuloCaracterística: Texto de sistemaFuente: HelvéticaPeso: BoldPuntaje: 24pxColor: #FF9933

32


SITIO INSTITUCIONAL

MÓDULO 1a

ContenidoPuntaje: 13pxColor: #dddde2

Leer másCaracterística: Texto de sistemaFuente: HelvéticaPuntaje: 11pxColor: #363554Padding izquierdo y derecho: 15pxPadding superior e inferior: 10pxBorde izquerdo ancho: 10px;Borde Izquierdo color: #FF9933Fondo color: #dedbcc

33


SITIO INSTITUCIONAL

MÓDULO 1a Variación

UsoCabecera de subhome que incluye en su descripción vínculos a material comple-mentario o accesos directos a dependen-cias relevantes

ListadoAncho: 175pxCaracterística: Texto de sistemaFuente: HelvéticaPuntaje: 13pxColor: #FFFFFFBorde inferior ancho: 1pxBorde inferior color: #dddde2Borde inferior estilo: punteado

34


SITIO INSTITUCIONAL

MÓDULO 1b

UsoMódulo dentro del cuerpo de contenido que destaca en alta importancia una dependencia, u oferta. Cuenta con descripción breve y liga a leer más.

ProporcionesAncho: 930pxColor de fondo: #363554

ImágenAncho: 370pxAlto: 208pxColor de fondo en rebase: #6d1a42

TítuloCaracterística: Texto de sistemaFuente: HelvéticaPeso: BoldPuntaje: 24pxColor: #FFFFFF


35


SITIO INSTITUCIONAL

MÓDULO 1c

UsoMódulo de contenido cuyo uso contem-pla listados de vínculos cuyo número y nombre sea basto. Los vínculos contarán categorías de segmentación y se acomo-darán en dos columnas. Un breve texto introductorio se mostrará al inicio del módulo junto con vínculo a leer más información.

ProporcionesAncho: 930pxColor de fondo: #FFFFFF

TítuloCaracterística: Texto de sistemaFuente: HelvéticaPeso: BoldPuntaje: 24pxColor: #363554

ContenidoPuntaje: 12pxColor: #cccccc

36


SITIO INSTITUCIONAL

MÓDULO 1c

SubtítuloCaracterística: Texto de sistemaFuente: HelvéticaPeso: BoldPuntaje: 18pxColor: #363554

VínculosPuntaje: 12pxColor: #6d1a42Borde inferior ancho: 1pxBorde inferior color: #ccccccBorde inferior estilo: punteado

37


SITIO INSTITUCIONAL

MÓDULO 1d1

UsoCabecera de Subhome de dependencia. Descripción de la dependencia cátedra o misión. Datos de contacto de la depen-dencia con vínculo a correo. Imagen representativa de actividad relativa a la cátedra o perfil de la audiencia.Imagen independiente central, utilizada cuando no se cuente con posibilidad de editar la imágen.





38


SITIO INSTITUCIONAL

MÓDULO 1d1

Área responsableAncho: 235pxColor de fondo: #dddde2

Título de dependenciaCaracterística: Texto de sistemaFuente: HelvéticaPeso: BoldPuntaje: 18pxColor: #363554

ContenidoPuntaje: 12pxColor: #666666

VínculoCaracterística: Texto de sistemaFuente: HelvéticaPuntaje: 11pxColor: #FFFFFFPadding izquierdo y derecho: 15pxPadding superior e inferior: 10pxBorde izquerdo ancho: 10px;Borde Izquierdo color: #FF9933Fondo color: #363554

39


SITIO INSTITUCIONAL

MÓDULO 1d1 Integrada

UsoCabecera de Subhome de dependencia. Descripción de la dependencia cátedra o misión. Datos de contacto de la depen-dencia con vínculo a correo. Imagen representativa de actividad relativa a la cátedra o perfil de la audiencia.Imagen central integrada, utilizada cuando los conocimientos de edición permitan integrar la imágen con el color de fondo.


40


SITIO INSTITUCIONAL

MÓDULO 1d2

UsoCabecera de Subhome de dependencia. Descripción de la dependencia cátedra o misión. Datos de contacto de la depen-dencia con vínculo a correo. Imagen representativa de actividad relativa a la cátedra o perfil de la audiencia.Imagen Lateral Izquierda, utilizada cuando la orientación de la imágen o relevancia conduzca visualmente la lectura de la imágen izquierda de forma harmónica.


41


SITIO INSTITUCIONAL

MÓDULO 1d3

UsoCabecera de Subhome de dependencia. Título de la dependencia. Datos de contacto de la dependencia con vínculo a correo. Imagen representativa de activi-dad relativa a la cátedra o perfil de la audiencia.Imagen Central extendida, utilizada cuando la dependencia no cuente con texto descriptivo, y además cuente con una imágen extendida de mayor impacto visual, además de logotipo representa-tivo.


Logotipo (logosímbolo)Característica: Imagen JPG, GIF o PNGAncho: 80pxAlto: 80px

TítuloPeso: BoldPuntaje: 24pxColor: #FF9933

TaglinePuntaje: 13pxColor: #FFFFFF

42


SITIO INSTITUCIONAL

MÓDULO 1d3

UsoMódulo de ancho completo de pantalla acompañado de imagen utilizado para aviso o evento importante colocado en la parte superior de la pantalla. Puede estar acompañado de una fecha.



TítuloCaracterística: Texto de sistemaFuente: HelvéticaPeso: BoldPuntaje: 24pxColor: #6d1a42

ContenidoPuntaje: 12pxColor: #666666FechaPuntaje: 18pxColor: #FF9933Fecha mes, añoPuntaje: 12pxColor: #FF9933

43


SITIO INSTITUCIONAL

MÓDULO 1j

UsoMódulo de ancho completo e imagen vertical utilizado en la retícula de acomodo de la sección "acerca de IPN". Imágen al costado izquierdo.





44


SITIO INSTITUCIONAL

MÓDULO 1l

UsoMódulo de ancho completo e imagen vertical utilizado en la retícula de acomodo de la sección "acerca de IPN". Imágen al costado derecho.





45


SITIO INSTITUCIONAL

MÓDULO 1t

UsoTítulo para conjunto de ligas relacionadas



46


SITIO INSTITUCIONAL

MÓDULO 2a

UsoMódulo de contenido cuyo uso contem-pla listados de vínculos cuyo número y nombre sea basto. Los vínculos se acomodarán en tres columnas. Un breve texto introductorio se mostrará al inicio del módulo junto con vínculo a leer más información. Va relacionado general-mente con la ficha de una dependencia.



ContenidoPuntaje: 12pxColor: #cccccc


47


SITIO INSTITUCIONAL

MÓDULO 2b

UsoMódulo descriptivo de oferta o depen-dencia de jerarquía secundaria (relevante para la audiencia pero no es la oferta principal). Posee vínculos. Relacionado generalmente con la ficha de una depen-dencia.



TítuloPeso: BoldPuntaje: 24pxColor: #363554

ContenidoAncho: 200pxPuntaje: 12pxColor: #666666

48


SITIO INSTITUCIONAL

VínculosAncho: 175pxPuntaje: 12pxColor: #6d1a42Borde inferior ancho: 1pxBorde inferior color: #ccccccBorde inferior estilo: punteado

49


SITIO INSTITUCIONAL

MÓDULO 2d

UsoMódulo descriptivo de oferta o depen-dencia de jerarquía secundaria (relevante para la audiencia pero no es la oferta principal). Posee vínculos. Se utiliza cuando el módulo 2b le antecede.

ProporcionesAncho: 685pxColor de fondo: #dddde2


TítuloPeso: BoldPuntaje: 24pxColor: #363554

ContenidoAncho: 200pxPuntaje: 12pxColor: #666666

50


SITIO INSTITUCIONAL

MÓDULO 2e

UsoTítulo para conjunto de ligas relacionadas pertenecientes a una dependencia específica. La ficha de la dependencia estará siempre vinculada.



DescripciónCaracterística: Texto de sistemaFuente: HelvéticaPuntaje: 14pxColor: #dddde2

51


SITIO INSTITUCIONAL

MÓDULO 2f

UsoMódulo utilizado en la retícula de acomodo de la sección "acerca de IPN". Complemento de contenido dividiendo temas relacionados (Acción vs creador). Acompañado de módulo 2b o 2h y/o cuando haya tonos guindas o azules a los costados.

ProporcionesAncho: 685pxColor de fondo: #dedbcc


DescripciónCaracterística: Texto de sistemaFuente: HelvéticaPuntaje: 12pxColor: #666666

52


SITIO INSTITUCIONAL

MÓDULO 2g

UsoMódulo utilizado en la retícula de acomodo de la sección "acerca de IPN". Complemento de contenido dividiendo temas relacionados (Acción vs creador). Acompañado de módulo 2b o 2h y/o cuando haya tonos beige o guindas a los costados.



DescripciónCaracterística: Texto de sistemaFuente: HelvéticaPuntaje: 12pxColor: #666666

53


SITIO INSTITUCIONAL

MÓDULO 2h

UsoMódulo utilizado en la retícula de acomodo de la sección "acerca de IPN". Su uso es posterior a un módulo 2b para dar dinamismo visual al acomodo fotográfico





54


SITIO INSTITUCIONAL

MÓDULO 2i

UsoMódulo de proporción media sin padding para la inserción de contenido multimedia libre


55


SITIO INSTITUCIONAL

MÓDULO 2j

UsoMódulo utilizado solamente en "acerca de IPN", uso de tamaños imágenes y tipografía orientado a enumerar caracter-ísticas especiales.


Columna de ImágenAncho: 235pxColor de fondo: #dedbcc

Título 1Característica: Texto de sistemaFuente: HelvéticaPeso: BoldPuntaje: 90pxColor: #363554Título 2Puntaje: 28px

ContenidoCaracterística: Texto de sistemaFuente: GeorgiaPeso: BoldPuntaje: 13pxColor: #666666Numeración color: #363554

56


SITIO INSTITUCIONAL

MÓDULO 2k

UsoMódulo de ancho medio e imagen vertical utilizado en la retícula de acomodo de la sección "acerca de IPN". Imágen al costado izquierdo. Utilizado posterior a una región blanca.





57


SITIO INSTITUCIONAL

MÓDULO 3a

UsoMódulo utilizado para referirse a una dependencia. La imagen a utilizar es una vista previa del sitio destino, el logotipo de la dependencia o una imagen que la represente. Situada del lado derecho de la composición acompañada general-mente de un listado de oferta académica o actividades de la misma.


ImágenAncho: 210pxAlto: 118px

TítuloCaracterística: Texto de sistemaFuente: HelvéticaPeso: BoldPuntaje:13pxColor: #363554

58


SITIO INSTITUCIONAL

MÓDULO 3b

UsoAcceso directo a contenido relacionado dentro del mismo portal, su utilidad generalmente es en la parte final de la página alternando con el módulo 3c. La imagen será alusiva a la actividad o tema de la página destino.

ProporcionesAncho: 235pxColor de fondo: #363554


TítuloCaracterística: Texto de sistemaFuente: HelvéticaPeso: BoldPuntaje:18pxColor: #FFFFFF

59


SITIO INSTITUCIONAL

MÓDULO 3b

ContenidoCaracterística: Texto de sistemaFuente: HelvéticaPuntaje:12pxColor: #dddde2

VínculosCaracterística: Texto de sistemaFuente: HelvéticaPuntaje: 11pxColor: #363554Padding izquierdo y derecho: 15pxPadding superior e inferior: 10pxBorde izquerdo ancho: 10px;Borde Izquierdo color: #FF9933Fondo color: #dedbcc

60


SITIO INSTITUCIONAL

MÓDULO 3c

UsoAcceso directo a contenido relacionado dentro del mismo portal, su utilidad generalmente es en la parte final de la página alternando con el módulo 3b. La imagen será alusiva a la actividad o tema de la página destino. La imagen puede ir en la parte inferior o superior según se requiera




61


SITIO INSTITUCIONAL

MÓDULO 3c

ContenidoCaracterística: Texto de sistemaFuente: HelvéticaPuntaje:12pxColor: #dddde2

VínculosCaracterística: Texto de sistemaFuente: HelvéticaPuntaje: 11pxColor: #363554Padding izquierdo y derecho: 15pxPadding superior e inferior: 10pxBorde izquerdo ancho: 10px;Borde Izquierdo color: #FF9933Fondo color: #dedbcc

62


SITIO INSTITUCIONAL

MÓDULO 3d

UsoMódulo de acceso directo a portal externo o liga interna, cuando posea información que exceda un módulo 3b o 3c pero no cuente aún con suficiente información para llenar un módulo 2b.



ContenidoPuntaje:12pxColor: #dddde2

VínculosPuntaje: 11pxColor: #363554Padding izquierdo y derecho: 15pxPadding superior e inferior: 10pxBorde izquerdo ancho: 10px;Borde Izquierdo color: #FF9933Fondo color: #dedbcc

63


SITIO INSTITUCIONAL

MÓDULO 3e

UsoAcceso directo a contenido relacionado dentro del mismo portal, su utilidad generalmente es en la parte final de la página alternando con el módulo 3b y 3c como una tercera opción para dinamismo de gama cromática. La imagen será alusiva a la actividad o tema de la página destino.



TítuloCaracterística: Texto de sistemaFuente: HelvéticaPeso: BoldPuntaje:18pxColor: #363554

64


SITIO INSTITUCIONAL

MÓDULO 4a v1

UsoMódulo con dos segmentos de vínculos, de los cuales uno de ellos contendrá textos cortos mientras el otro podrá tener textos un poco mas extensos pero reducidos en opciones. Se acompaña de dos módulos de tipo 3, generalmente en el final de la página



ContenidoPuntaje:12pxColor: #666666

65


SITIO INSTITUCIONAL

MÓDULO 4a v1

Vínculos tipo1Puntaje: 12pxColor: #6d1a42Borde inferior ancho: 1pxBorde inferior color: #cccccc Borde inferior estilo: punteado

Vínculos tipo 2Ancho: 175pxCaracterística: Texto de sistemaFuente: HelvéticaPuntaje: 13pxColor: #FFFFFFBorde inferior ancho: 1pxBorde inferior color: #dddde2Borde inferior estilo: punteado

66


SITIO INSTITUCIONAL

MÓDULO 4a v2

UsoListado de accesos directos agrupados en un módulo con imagen ilustrativa. Se acompaña de dos módulos de tipo 3, generalmente en el final de la página. La imágen puede ir del lado izquierdo o derecho según se requiera, la liga de “ver más” es opcional.





67


SITIO INSTITUCIONAL

MÓDULO 5a

UsoElemento de listado de vínculos a sitios y páginas de la red del Politécnico agrupa-das por categorías. Incluyen breve descripción, de oferta, misión u activi-dad, acompañado de vista miniatura de sitio destino o imagen representativa de la actividad desarrollada. Pueden estar precedidas del título de la categoría.Los vínculos harán referencia al URL destino, enfocandose en el dominio, pero excluyendo la ruta completa con fines de presentación, mas no de funcionalidad.



VínculosCaracterística: Texto de sistemaFuente: HelvéticaPuntaje: 10pxColor: #363554Padding: 10pxBorde izquerdo ancho: 10px;Borde Izquierdo color: #FF9933Fondo color: #dedbcc

68


SITIO INSTITUCIONAL

MÓDULO 5a



69


SITIO INSTITUCIONAL

MÓDULO 5b

UsoElemento dentro del listado de vínculos a sitios que destaca por su contenido y se sitúa al final de la lista del lado derecho. El elemento se distingue en color y en tamaño de imagen. Puede incluir ligas dentro del cuerpo de texto con referencia a ofertas o servicios específcos.





70


SITIO INSTITUCIONAL

MÓDULO 5b

UsoElementos destacados dentro de listado de vínculos. Representan ligas dirigidas a la misma audiencia pero con mayor mayor importancia colocados en pares a modo de cierre de listado. Las imágenes alternan de posición respecto al listado completo y contrapuestas entre sí.

ProporcionesAncho: 460px c/uColor de fondo: #6d1a42


TítuloCaracterística: Texto de sistemaFuente: HelvéticaPeso: BoldPuntaje: 16pxColor: #FFFFFF


71


SITIO INSTITUCIONAL

MÓDULO 5b

VínculosCaracterística: Texto de sistemaFuente: HelvéticaPuntaje: 10pxColor: #363554Padding: 10pxBorde izquerdo ancho: 10px;Borde Izquierdo color: #FF9933Fondo color: #dedbcc

72

ipn manual identidad web

Design