ministerio de desarrollo social · articular miradas y conceptos para lograr que comunicación e...

Ministerio deDesarrollo SocialManual de Identidad Visual

ComunicaciónDigital

DOCUMENTO DE USO INTERNOQueda prohibida la reproducción total o parcial de esta publicación periódica, por cualquier medio o procedimiento, sin para ello contar con la autorización previa, expresa y por escrito del editor.

MINISTERIO DE DESARROLLO SOCIAL DE LA NACIÓNAv. 9 de Julio 1925 | C1073ABA | CABA | República Argentina© 2015 Todos los derechos reservados

Una web para todosAccesibilidad 7Usabilidad 9Diseño responsivo 11

Nuestra IdentidadMarcas 14Color 15Firmas 16Tipografía 17Morfología 18Iconografía 19Círculos 22Fotografía 23Headers 24Botones 29Imágenes 30Overs 32

Contenidos

Una webpara todos

Una web para todos

Las tecnologías de información y comunicación abren desde hace más de una década una serie de oportunidades para que las administraciones públicas puedan transformarse en organizaciones más abiertas y eficaces. No sólo actúan como una nueva fuente de innovación, también constituyen un ámbito propicio para profundizar la relación entre gobierno y ciudadanía.

En este escenario, los sitios web y las redes sociales se suman progresivamente a una variedad de canales, a través de los cuales las administraciones comunican políticas y servicios para responder a necesidades ciudadanas. Asumir la condición estratégica de la comunicación digital resulta vital para cualquier gobierno en este contexto, entendiendo que su principal búsqueda es la de garantizar derechos.

A través de este breve manual buscamos plasmar, de manera sintética, los criterios más significativos para el desarrollo de las webs que ofrecemos a nuestros públicos. Hacer sitios accesibles, intuitivos, funcionales y centrados en las expectativas de los usuarios ya no puede ser el resultado de un ejercicio voluntario. Promover la igualdad de oportunidades es, sobre todo, un compromiso y una responsabilidad.

Acercamos además, una serie de pautas para la aplicación de los signos y elementos de identidad que constituyen la base del sistema gráfico de la comunicación digital del ministerio. De este modo, buscamos articular miradas y conceptos para lograr que comunicación e identidad visual sean dos componentes integrados en un enfoque orientado hacia la inclusión.

5Manual de Identidad Visual | Nuestra Identidad

funcional | intuitiva | accesible | útil | atractiva | responsiva | dinámica centrada en el usuario | integrada | segura | medible

Accesibilidad

Ministerio de Desarrollo Social Manual de Identidad Visual

¿Qué es laaccesibilidadweb?

Un web para todosAccesibilidad

Para garantizar un acceso equitativo y con igualdad de oportunidades a todas las personas, desarrollamos un sitio web accesible que respeta los estándares establecidos tanto por normas nacionales como internacionales (*).

Con una web accesible posibilitamos que cualquier persona pueda percibir, entender, navegar e interactuar con los contenidos de nuestro sitio, independientemente de sus capacidades y habilidades, cualquiera sea el tipo de hardware, software o infraestructura de red que utilice para hacerlo (**).


(*) En Argentina, los organismos públicos deben cumplir con la Ley Nº 26.653 de “Accesibilidad de la información en las páginas web”, sancionada en 2010 y reglamentada a través del Decreto 355/2013.

(**) Según el Censo Nacional de 2010, en Argentina viven más de 5,1 millones de personas con algún tipo de discapacidad, dificultad o limitación permanente (representa el 12,9% del total de la población).


Usabilidad


¿Qué es la usabilidadweb?

Una web para todosUsabilidad


Planificamos nuestra web teniendo en cuenta la experiencia del usuario. Para optimizar el proceso de desarrollo, trabajamos articulando tres disciplinas: la usabilidad, la arquitectura de la información y el diseño de interacción.

Centrados en el análisis de métricas y en la escucha activa de consultas y demandas realizadas por la ciudadanía, diseñamos interfaces amigables y jerarquizamos los contenidos para facilitar sus múltiples posibilidades de uso.

Diseño centradoen la experienciade los usuarios Usabilidad

Diseñode

interacción

Arquitecturade la

información

DiseñoResponsivo


Una web para todosDiseño responsive

¿Qué es el diseño responsive?

Cada dispositivo tecnológico tiene características propias que deben ser tenidas en cuenta en los desarrollos web. A través de un diseño responsivo, facilitamos el acceso y la lectura de nuestros contenidos, sea cual sea el dispositivo desde el que ingresan nuestros usuarios: computadoras de escritorio, notebooks, tablets y una gran variedad de teléfonos inteligentes. El diseño responsivo permite redimensionar y colocar los elementos de la web de manera que se adapten a los diferentes tamaños de pantalla y resoluciones. De esta manera, se logra una correcta visualización de nuestro sitio en cada uno de los dispositivos de acceso (*).

(*) El ingreso a nuestra web desde dispositivos móviles se incrementó más de un 11.000% en tan solo 4 años (de 7095 sesiones en 2011 a 808.000 en 2015). En la actualidad, 1 de cada 3 visitantes accede al sitio desde un teléfono celular o tablet.


NuestraIdentidad


Nuestra identidad

Un sistema de identidad visual es un conjunto de elementos gráficos dispuestos según una combinatoria regulada, que busca garantizar una clara identificación de una organización.

Para cumplir con ese objetivo, este breve apartado cuenta con lineamientos para la aplicación de la marca como así también modalidades de uso de imágenes, iconografía, colores y firmas institucionales de la web del Ministerio de Desarrollo Social.


Nuestra IdentidadMarcas

El logotipo del Ministerio de Desarrollo es la marca que se utiliza en el header del sitio. El mismo será utilizado para volver a la página de inicio. No puede ser alterado ni recreado bajo ninguna circunstancia. Tampoco se le deben añadir otros atributos (sombras, bordes o cambios tipográficos).

Existe además un sistema de marcas para identificar los ejes de las políticas sociales que implementa el organismo. Cada submarca está destinada a clasificar y visibilizar de manera integrada los programas e iniciativas que la componen.

Se presenta también la marca de DesarrolloSocial.TV, la web TV oficial del ministerio. Se utilizará para la presentación de contenidos audiovisuales ubicados en los sidebar del sitio institucional.

Sistema de marcas / Políticas Sociales

Logotipo Ministerio de Desarrollo Social

Logotipo DSTV


El color primario es el azul, sobrio y estable. Surge de la actual marca del Ministerio de Desarrollo Social. Los colores secundarios tienen su origen en la identidad de las marcas de los ejes de políticas sociales vigentes. Estos identificadores deben respetar la paleta de color correspondiente a cada uno de ellos. (*)

Nuestra IdentidadColor

(*) Cualquier variación posterior a la creación del presente manual, deberá ser debidamente documentada y regulada en una versión actualizada.

#E9EBECR1 G68 B136

#AA1E5DR170 G30 B93

65%

# CA5529R202 G85 B41

65%

# 649941R100 G153 B65

65%

# 098494R9 G132 B148

65%

#014488R1 G68 B136



En el footer del sitio se utilizarán siempre las firmas institucionales. Respetarán el orden, las proporciones y espacio mínimo de actuación.

Nuestra IdentidadFirmas

1x 1x

1x1x

1x1x

1x

Tamaño mínimo para aplicaciones digitales

Área de actuación

40 px



Roboto Light es la fuente principal del sitio (*). Es una tipografía sans serif, de trazos modernos y claros. Permite una lectura limpia y dinámica de los textos. Se utilizan las variables Italic, Medium y Bold para destacar conceptos y marcar jerarquías.

Esta tipografía se encuentra Disponible en Google Fonts.

(*) Como fuentes de sistema se incluyen en la programación las fuentes Arial y Helvética.

Nuestra identidadTipografía

Roboto Light

ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789”#$%&/()=¿?¡!

Roboto Medium


Roboto Light Italic


Roboto Bold


Light

MediumItalic

Bold


El círculo y el cuadrado son las figuras utilizadas para la identidad visual de nuestra web. Se priorizan formas simples y en colores plenos para facilitar la lectura e identificación.

Nuestra identidadMorfología


PermanenciaFirmeza

EstabilidadHonestidad

LimpiezaEsmero

Equilibrio

MovimientoTotalidadIntegridad

RealizaciónUnidad

ProtecciónMatriz

Ministerio de Desarrollo Social

Los íconos son simples, lineales y deberán aplicarse en colores plenos, contenidos en un círculo.

Nuestra IdentidadIconografía

2x

Biblioteca Virtual

Informes MapaInteractivo

Historiasde inclusión

Guía detrámites

Búsqueda guiada

DesarrolloSocial tv

EfeméridesBiblioteca Virtual

Informes MapaInteractivo

Historiasde inclusión

Guía detrámites

Búsqueda guiada

Efemérides



El mapa interactivo tiene su propio sistema de íconos para identificar a qué política refiere la información georreferenciada.

Cada nuevo ícono deberá representar en su diseño la política que simboliza. A su vez, debe estar acompañado de la elección y evaluación de un nuevo color que pueda convivir en el mapa y diferenciarse del resto.

Nuestra IdentidadIconografía / Mapa interactivo

Centros de Referencia

Centros deAtención

Local

ConsejoFederal de la

Niñez

Emprendimientos Marca Colectiva

FeriasPermanentes

Institucionesde microcrédito

ConsejoNacional de las Mujeres

CentrosIntegradores Comunitarios

Consejo Federal de Discapacidad

Juegos Nacionales Evita

ProHuerta

Consejo Federal de Mayores

MonotributoSocial



Nuestra IdentidadIconografía / Usos incorrectos

No alterar el color ni los contenedores. No utilizar los íconos sin su contenedor.

No alterar el estilio gráfico de los íconos ni utilizar fotos en su lugar.

No utilizar colores fuera de los establecidos en las paletas principales y secundarias del presente manual.

No utilizar fondos que compliquen la lectura del ícono.



Los círculos son un elemento distintivo del diseño. La forma curva se destaca visualmente sobre el resto, como un elemento amigable y de fácil identificación al momento de necesitar la acción del usuario.

El círculo ofrece mayor espacio blanco a su alrededor y ofrece aire al diseño. De esa manera brinda limpieza y descanso visual a la lectura de los elementos.

LayoutCírculos



Las fotografías son un elemento fundamental en la construcción de la identidad de la web del Ministerio de Desarrollo Social. Son testimonios reales de los logros alcanzados por el acceso a una política del organismo.

Las imágenes no son de catálogo. Siempre deberán utilizarse fotografías de los destinatarios reales de las políticas. Deben mostrar personas en actitud positiva, trabajando en oficios o en actividades recreativas que transmitan valores asociados a la inclusión, el desarrollo y la solidaridad.

Nuestra IdentidadFotografía

diversidadcultural

educación

comunidad

superación

trabajo

diversidadsexual



El header de home mantiene el uso del azul como color institucional primario, siempre con el blanco como fondo.

Las políticas sociales se identifican, según el eje al que pertenezcan, con el color correspondiente a cada marca. Las fotos que las ilustren pueden ser aplicadas en blanco y negro o en color.

El título aparece en un círculo con el color identificatorio aplicado al 65% de su valor, ocupando 1/3 del espacio. Deben contener personas en primer plano. Las figuras principales ocuparán los 2/3 restantes del espacio.

LayoutHeaders

2/3 área imagen, primer plano1/3 área título65% color de fondo



LayoutHeaders



LayoutHeaders

Los fondos no deben confundirse con las imágenes principales. Las figuras principales deben ocupar un espacio destacado dentro de los 2/3 de espacio.


LayoutHeaders

Las imágenes no deberán manipularse al extremo de perder resolución y calidad.


LayoutHeaders

Los fondos deben integrarse a la imagen principal como parte de la toma fotográfica, conservando proporciones lógicas entre elementos.



Los botones mantienen el uso del círculo, con el texto en mayúsculas, pudiendo éstos usarse en:- azul (positivo), over en celeste- blanco (invertido), over azul- dentro de las políticas sociales, con el color correspondiente a la misma

Nuestra IdentidadBotones

Botón azul (positivo)

Botón azul (positivo)Botón blanco (negativo / over)

Botón celeste (over)



LayoutImágenes

1366 x 2711366 x 353

680 x 200

903 x 593

342 x 240

270 x 150

903 x 593 903 x 593

903 x 593

Las dimensiones que se indican en píxeles corresponden al tamaño de carga que deberán tener para ser subidas en el backend. Dado el diseño responsivo, desde la programación se redimensionarán para su correcta visualización, dependiendo del dispositivo desde el que se está navegando.


903 x 593


LayoutImágenes

160 x190

903 x 593

903x593

903x593


LayoutOvers


Para las landing de Políticas Sociales y Guía de trámites se recurre a los mosaicos de imágenes en blanco y negro que ilustran a cada opción ofrecida.

En la parte superior se utiliza un camino con nodos que permite filtrar por temática. Mientras que el over convierte a la imagen en color para motivar al usuario a la acción.

Comunicación Digital

Ministerio de Desarrollo Social de la Nación(011) 4379-3817

[email protected]

/MDSNacion

/MDSNacion

/MDSNacion

www.desarrollosocial.gob.arwww.desarrollosocial.tv

ministerio de desarrollo social · articular miradas y conceptos para lograr que comunicación e...

Documents