Caso de Estudio: UNICEF
| Título | Caso de Estudio. UNICEF |
|---|---|
| Tipo de Proyecto | Proyecto de Taller |
| Período | 2013-2013 |
| Asignatura | Construcción de Diseño Gráfico 4, |
| Del Curso | Construcción 4º DG 2013, |
| Carreras | Diseño Gráfico"Diseño Gráfico" is not in the list (Arquitectura, Diseño, Magíster, Otra) of allowed values for the "Carreras Relacionadas" property. |
| Alumno(s) | Carlos Chávez |
| Profesor | Katherine 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:
Contenidos generales
Contenidos a partir del menú vertical
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.
Wireframe de Home Unicef.org
Screenshoot del Home (Unicef.org)
"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".
Wireframe correspondiente a la Sección Focus Area
Focus Area
La sección "Lugares" utilizando la misma grilla que Focus Areas
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.
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
Plan de Estrategia. 1 columna de texto única
Wireframe Plan de Estrategia. 1 columna de texto única
- Diagramación 2 columnas de Texto
Plan de Estrategia. 2 columnas de texto
Wireframe Plan de Estrategia. 2 columnas de texto
Galería de Fotos
La galería de foto no considera la utilización de side bar
Al seleccionar una imagen específica aparece un side bar que permite navegar fácilmente
Recursos Visuales
Logo
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.
Menu Desplegable
El sitio web contiene un menú desplegable horizontal y uno vertical, este último ubicado en el lado izquierdo de la pantalla.
El sitio web contiene un menù desplegable para las secciones "Focus Areas", "Where We Work" y "Press Centre".
Menú Vertical Desplegable
_19.13.34.png)
Dibujo Vectorial
El sitio utiliza dibujos vectoriales. los cuales aparecen en forma de Mapas o Infografías que acompañan la información escrita.
Detalle de uno de los mapas utilizados en la ubicación espacial de los sitios web.
Mapa de la sección "Ayuda Humanitaria para Niños"
Paleta de Colores
Variaciones específicas de Colores
El sitio utiliza diferentes colores para identificar cada para el "header" y el "footer", siendo éstos de color azul
Detalle de Foother
Detalle Header Home
_18.26.55.png){kind=small}
_18.59.10.png){kind=small}
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.
Color central and Eastern Europe
East Asia and the Pacific.JPG
Eastern ans Southern Africa
Latin America
Middle East
South Asia
West and Central Africa
Mutimedia
Detalle Ventana de reproducción de Videos en YouTube
Detalle del slider de imágenes utilizados en el Home
Estilos Tipográficos
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.
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.
UNICEFUSA.ORG y UNICEF.ORG
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.
Comparaciones en el Menú Lateral. Elementos en SIde Bar de Unicef.org carece de jerarquías visuales que faciliten 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.
UNICEF.CL
UNICEF.USA
UNICEF.ORG
UNICEF.ORG.UK
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.
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.
Screenshot USA Unicef's Work
Screenshot USA Donate
Unicef Media Centre
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.
Estudio Tipográfico Unicefusa.org
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.
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.
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".
Unicef.org.uk contempla un sitio menor específico para compras. (http://shop.unicef.org.uk/)
Estudio Tipográfico
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.
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
