Caso de Estudio: UNICEF

De Casiopea



TítuloCaso de Estudio. UNICEF
Tipo de ProyectoProyecto de Taller
Período2013-2013
AsignaturaConstrucción de Diseño Gráfico 4
Del CursoConstrucción 4º DG 2013
CarrerasDiseño Gráfico
Alumno(s)Carlos Chávez
ProfesorKatherine Exss

Caso de Estudio: Sitio Web UNICEF. Estudio de línea gráfica, estructura y contenidos del sitio

Unicef.org

El Fondo de las Naciones Unidas para la Infancia o Unicef fue creado por la Asamblea General de las Naciones Unidas en 1946 para ayudar a los niños de Europa después de la Segunda Guerra Mundial.

Primero fue conocido como Unicef, acrónimo de United Nations International Children's Emergency Fund o en español, Fondo Internacional de Emergencia de las Naciones Unidas para la Infancia. En 1953, Unicef se convierte en organismo permanente dentro del sistema de Naciones Unidas, encargado de ayudar a los niños y proteger sus derechos. Su nombre fue reducido a Fondo de las Naciones Unidas para la Infancia (United Nations Children's Fund), pero se mantuvo el acrónimo Unicef por el que es conocido hasta ahora.

Unicef trabaja en 193 países y territorios para ayudar a garantizar a los niños el derecho a sobrevivir y a desarrollarse desde la primera infancia hasta la adolescencia. Unicef es el mayor proveedor de vacunas para los países en desarrollo, trabaja para mejorar la salud y la nutrición de la infancia; el abastecimiento de agua y saneamiento de calidad; la educación básica de calidad para todos los niños y la protección contra la violencia, la explotación y el VIH/SIDA. Unicef está financiado en su totalidad por las contribuciones voluntarias de individuos, empresas, fundaciones y gobiernos.


Fuente: Wikipedia, Unicef (http://es.wikipedia.org/wiki/Unicef)


Contenidos

Debido a la extensa cantidad de contenidos, se decide dividir según los diferentes menús de navegación del sitio. Según lo anterior, el menú horizontal contiene los siguientes contenidos:

Maquetación

Se identifican 4 tipos de grilla para el sitio UNICEF.ORG. Dependiendo se la sección se dividen en:

  • Home: página inicial. Se caracteriza por la implementación de 2 menús principales (uno horizontal y otro vertical).
  • Focus Area y Places: página diagramada en forma de cuadrilla. Contiene información sobre las diferentes áreas de trabajo de Unicef.
  • Contenido: éstos a su vez se dividen en aquellos que utilizan una columna para el cuerpo de texto y aquellos que utilizan dos.
  • Plan de Estrategia: plantea una diagramación con variaciones en la caja de texto, siento éstos de 1 o 2 columnas.
  • Employment: difiere estéticamente del home, sin embargo conserva el header y footer.


Home

Se caracteriza por la utilización de un header y un footer con fondo azul, los cuales delimitan el centro del sitio, siendo éste utilizado por un menú lateral que permite la visualización de información en el mismo sitio (evitando abrir una pestaña nueva).

El sitio además cuenta con un menú horizontal ubicado en el footer, el cual permite el acceso a la información general del sitio.

Paralelamente, el sitio ofrece 5 alternativas de idioma para el usuario; inglés, español, francés, árabe y chino.

En el sector izquierdo de la página, se ubica la barra de búsqueda, seguida de un menú vertical con enlaces a secciones específicas del sitio.


"Focus Area" Y "Places"

Se caracteriza por la utilización del color azul en su fondo. La página se convierte en una extensión del footer y header.

La diagramación propone una cuadriculización del espacio, generando cuadros de textos independientes de tamaños similares a modo de "casillas".

Employment

Ésta sección presenta cambios en el menú lateral y la paleta de colores, sin embargo conserva el header y el footer. Entre los cambios visuales se encuentra la eliminación del color naranjo y la utilización de un fondo de página gris.

Employment-01.jpg

Plan de Estrategia

La diagramación de la página de contenido se caracteriza por poseer dos versionas. Una que utiliza una columna ùnica para el cuerpo de texto, y la que otra que utiliza 2 columnas de texto


  • Diagramación 1 columna de Texto


  • Diagramación 2 columnas de Texto

Galería de Fotos

Recursos Visuales

Variaciones en los fondos de los logos en cada una de los sitios web estudiados. No se observan cambios en la forma sino que en el fondo. Éstos varían sutilmente entre páginas web, ya sea mediante la aplicación de gradientes o cambios en la tonalidad del celeste.

LOGOSUNICEF-01.jpg

Menu Desplegable

El sitio web contiene un menú desplegable horizontal y uno vertical, este último ubicado en el lado izquierdo de la pantalla.

Dibujo Vectorial

El sitio utiliza dibujos vectoriales. los cuales aparecen en forma de Mapas o Infografías que acompañan la información escrita.

Paleta de Colores

Colores unicef.org-02.jpg

Variaciones específicas de Colores

El sitio utiliza diferentes colores para identificar cada para el "header" y el "footer", siendo éstos de color azul



En la sección "Accion Humanitaria para Niños" se utiliza un color distintivo para cada región geográfica de la que se habla. Ésto permite relacionar visualmente un contenido escrito a un lugar específico.


Mutimedia

Estilos Tipográficos

Estudio tipografico unicef.org-01.jpg


Comparaciones tipográficas y variaciones extraídas del screenshot anterior. Se observa cómo varían las tipografías dependiendo del menú al que corresponden. Se observa cierta predominancia de tamaño en los textos de la caja principal de texto, contrastando así con los textos correspondientes a los menús laterales.


Tipos comparacion-01.jpg


Debilidades evidenciadas

Excesivo uso de Sub-categorías

Resulta interesante la comparación entre el sitio Unicef.org con Unicefusa.org, en la forma de distribuir los contenidos en el "Home".

Unicef.org se caracteriza por el excesivo uso de títulos y subtítulo en los menús del Home. Cada menú desplegable ofrece una infinidad de alternativas para el usuario lo cual dificulta su recorrido por el sitio. Los títulos utilizados para los links resultan confusos en cuanto las similitudes entre ellos y la reiteración de palabras causan desorden visual.

Distinto es el caso de Unicefusa.org, sitio que reduce considerablemente las opciones ofrecidas al usuario en el home. Los menús ya no son desplegables, lo cual permite una experiencia de usuario ordenada y no tan abrupta.

Inconsistencias Gráficas del Side Bar

La claridad gráfica y el uso de recursos visuales determinará la facilidad de lectura y la experiencia del usuario.

En el caso a continuación presentado, se comparan dos "side bars", uno correspondiente al sitio web "UNICEFUSA.ORG" (izquierda) y el otro a "UNICEF.ORG" (derecha). En el primero, se evidencia el uso de un fondo que distingue el side bar del resto de la página. Esto permite agrupar todas las categorías en un momento único de lectura. Distinto es lo que sucede con el side bar de "Unicef.org". En él, las categorías y subcategorías carecen de unicidad, siendo estas incluso muy extensas confundiendo la lectura de una línea a otra. Por otro lado, los vínculos adquieren colores distintos al ser visitados (hover:visited) lo cual complejiza aún más la lectura.


Otros países

Los sitios varían dependiendo de cada país. No existe una normativa gráfica en relación a la diagramación, sin embargo se evidencia cierto cuidado en conservar el logo de Unicef.

La diagramación en el caso de Unicef Chile se caracteriza por la ubicación de los contenidos al lado izquierdo de la pantalla. Ésto produce una impresión de desequilibrio. Unicef Argentina, diagrama los contenidos de la misma manera, sin embargo, a diferencia de Unicef Chile, ésta respeta la grilla definida otorgando más orden visual a la página.



Unicefusa.org

Contenidos

El mapa de contenidos se basa en la existencia de dos menús, uno contiene la información general de sitio, mientras que el otro está orientado hacia las donaciones, compras, etc.

Contenidos generalesusa-01.jpg

Maquetación

Unicefusa.org constituye un ejemplo de estudio en cuanto el sitio utiliza una grilla constante la cual es aplicada transversalmente a todas las páginas del sitio. En los siguientes ejemplos se observa como la misma grilla es utilizada en el Home, en la Sección de Donación y el Media Center.



El sitio contiene un sub-sitio dedicado a los Voluntarios de Unicef. (su URL: "http://volunteers.unicefusa.org/"). Ésta utiliza la misma grilla que el sitio principal, sin embargo presenta diferencias en los elementos visuales utilizados, especialmente en los fondos del menú lateral.


Volunteers.jpg

Estudio Tipográfico Unicefusa.org

Estudio tipografico unicefusa.org-02.jpg

Paletas de Colores

La comparación presentada a continuación ejemplica las diferencias gráficas en las paletas de color entre Unicef USA (sitio) y Unicef.org (metasitio). Se observa claramente como los colores utilizados en Unicef USA tienden a ser más brillantes que los utilizados en Unicef.org. Caso contrario es el de Unicef.org, donde los colores tienden a ser más opacos y oscuros.

Color unicef.org-04.jpg Colores unicef.org-02.jpg

Unicef.org.uk

Contenidos

El sitio utiliza un menú inferior que permite acceder a cada una de las sub-categorías de las opciones que aparecen en el menú principal. Ésto facilita el acceso a sitios específicos. Vale destacar además que esta misma fórmula es utilizada en el sitio www.unicef.org, sin embargo en ésta última el número de sub-categorías aumenta considerablemente dificultando en cierto grado la navegación.

Contenidos generales unicef.org.uk-01.jpg

Maquetación

Home:

AL igual que los sitios anteriormente estudiados, Unicef.org.uk,implementa la utilización de un header con fondo azul, sin embargo el footer esta vez es de color negro.

Por otro lado, el menú se divide en aquellos botones que conducen hacia la información general del sitio y aquellos que conducen hacia la opción "Donate".


What is UNICEF- - UNICEF UK.jpg


Unicef.org.uk contempla un sitio menor específico para compras. (http://shop.unicef.org.uk/)

Our shop - UNICEF UK.png

Estudio Tipográfico

Estudio tipografico unicef.org.uk-04.jpg

Paleta de Colores

La paleta de colores deja de utilizar el naranjo, para utilizar el rojo en la opción "Donate". La utilización de un verde claro permite vincular visualmente el azul con el rojo. Por otro lado el azul se reduce a sólo un tono.

Colores unicef.org-02.jpgColor unicef.org-04.jpgEstudiocolores unicef.org.uk-06.jpg

Conclusiones

En base al estudio realizado, podemos afirmar que resulta difícil considerar al sitio web www.unicef.org un meta-sitio propiamente tal. Una de las características esenciales de un sitio que cumpla con esta denominación es su capacidad de unificar y re-direccionar a otros espacios sin la necesidad de abandonar el espacio que se está navegando.

En el caso de Unicef.org, se observa un sitio web que no se hace cargo de su calidad de meta-sitio. Ésto debido a que no existen reglas gráficas claras que unifiquen cada una de uno de los sub-sitios al meta-sitio mayor.

El sitio incluso presenta inconsistencias en su propia construcción, evidenciadas por los repetidos cambios experimentados por la barra de menú lateral o la aparición o desaparición de ésta.

Por otro lado, la excesiva presencia de sub-categorías hace muy difícil la navegación en cuanto los títulos no describen correctamente sus contenidos. En algunos casos, la rotulación de 2 secciones distintas presentan demasiadas semejanzas (en la redacción o la repetición de palabras) lo cual hace más difícil la búsqueda de contenidos específicos.

Por otro lado, el estudio de contenido en cada uno de los sitios evidenció la poca similitud que existe entre ellos. Si un visitante desea donar dinero en Chile, debe elegir distintas opciones que quien desea donar dinero en el sitio de Unicef.org. (en el sitio web de Unicef Chile ni siquiera se nombra la palabra "DONAR")

Lo que debemos destacar es el esfuerzo por intentar unificar visualmente cada uno de los sitios a través del logo, el cual en la mayoría de los casos se presenta sin modificaciones. De la misma manera, el color azul juega un papel primordial en la construcción de la unificación gráfica, sin embargo se evidencian claras variaciones en éste, lo cual debilita la similitud entre los sub-sitios.

Presentación

http://wiki.ead.pucv.cl/index.php/Archivo:Unicef_presentacion.pdf