BENCHMARKING estudio de referentes web

Benchmarking

Francisco J. Leal Montti Taller Multimedia VI 29 de Agosto, 2008 Diseño Gtafico



Benchmarking Estudio de Referentes

1

Benchmarking

Benchmarking

Índice Introducción

3

6

Gmail

10

Diseño Emergente

14

Memoria Chilena

18

Taringa!

22

Wikipedia

26

Carabineros de Chile

30

Valparaíso Zona de Diseño

34

Unión de los Tipógrafos

38

Diseño Shakespear

42

Chilquinta

Benchmarking

4

Benchmarking



Ensayo sobre Estudio de Referencias Web

Análisis referencial sobre sitios Web con una perspectiva grafica y de arquitectura de la información, es un buen sitio?, me ayuda?, encuentro lo que busco?.

Ya lo veremos.

Estudiar los sistemas que utilizan los sitios web permiten establecer el panorama en el que se encuentra el quehacer de los diseñadores que elaboran propuestas en el entorno web, entender los movimientos de estos y prepararse para no cometer los errores que el análisis arroje.

5

Benchmarking

Gmail Gmail es un servicio gratuito de correo Web basado en búsquedas que combina las mejores funciones del correo electrónico tradicional con la tecnología de búsqueda de Google. Esta aplicación facilita la búsqueda de mensajes, lo que te permitirá acabar con el desorden de “Recibidos”. Además de ofrecer un método completamente nuevo para leer y efectuar el seguimiento de los mensajes, Gmail incluye 2,9 GB de espacio de almacenamiento y aumenta con el tiempo.

6

Benchmarking

Aspectos de navegación:

Aspectos gráficos:

Rotulación: el rotulado del sitio interactúa perfectamente en relación a los contenidos a los que hace referencia y utiliza metáforas ampliamente divulgadas (por ejemplo papelera), lo que genera una suerte de familiarización preasumida por lo que no es preciso entenderlas, están, por así decirlo, en el inconciente colectivo.

Estructura: la estructura grafica mantiene un orden visual centrado en los contenidos (mails) de hecho en el “área de contenidos” es donde se concentra el peso visual, sigue un orden (diagramación) repetido continuamente en sitios de servicios (head=top, menu=Le�, content=center/right), una estructuración sencilla y eficiente.

Visual: los aspectos visuales son sumamente relevantes ya que al tener una paleta cromática con un bajo nivel de saturación del color, ayuda ostensiblemente a la lectura, pues precisamente el sitio es para leer mails, este factor influye en que el lector no se canse tempranamente en la lectura.

La temperatura cromática es fría (evita la irritación ocular) y la tipografía utilizada es de palo seco lo que acentúa lo anterior, aunque eh aquí la única falencia que encontré y tiene relación con factores técnicos tipográficos que son: La tipografía utilizada (Arial), los problemas de lectura se manifiestan en la poca diferenciación de ciertos caracteres como la “r+n” que pueden Consistencia de Contenidos: como es un servicio de correo Web los contenidos confundirse con una “m”, entre otras cosas son generados a través de lo que el usuario y sus contactos transfieren entre si, por lo que poca relación tienen con el sitio en si (a excepción de que esta Coherencia Visual: la coherencia visual entre el home y el interior se transferencia son mails), lo interesante de esto es como se manejan dichos mantiene a través de la paleta cromática, tipografía y diagramación, no así, contenidos e interactúan con la interfaz de herramientas, por otra parte con la estructura, aunque esto no considerado una falencia debido a que, el los contenidos del sitio tienen relación a la documentación de este y a las vinculo visual entre ambas paginas es evidente y esta diferencia de estructura utilidades que presta, logrando un nivel de coherencia, digamos, perfecta. responde mas bien a una solución visual a favor de los contenidos.

Navegación: la navegación del sitio se apoya directamente en la rotulación por lo que se hace coherente en función de los contenidos (mails).

Existen dos menús, uno para las aplicaciones y utilidades del sitio y otra con acceso a los contenidos, estos permanecen permanentemente acompañando al usuario favoreciendo un contenido dinámico, además ofrece un sistema de búsqueda sumamente precisa y útil (testeado) un chat entre contactos, un sistema de etiquetas, y notificaciones rss (noticias) lo que lo hace un sitio sumamente versátil y fácil de usar.

7

Benchmarking

8

Benchmarking

9

Benchmarking

DEm Diseño Emergente es un sitio presentado como una Comunidad de estudiantes de Diseño en Chile, de todas las disciplinas de diseño. Se plantea como una red de vinculación e intercambio para el desarrollo y fortalecimiento de la disciplina en Chile, y el mecanismo de promoción de la labor del Diseño en su etapa formativa.

10

Benchmarking

Aspectos de navegación:

Aspectos gráficos:

Rotulación: el rotulado del sitio es sumamente simple mezclando metáforas Estructura: la estructura grafica de DEm mantiene un orden visual modulado con textos referenciales, alude a la documentación del sitio y a los de modo tal que se leen a primera vista dos columnas subdivididas en contenidos diversos, todos relacionados entre si, tiene una lectura inicial contenidos. horizontal y a medida que se interioriza en los contenidos se vuelve Navegación: gracias a la rotulación que posee el sitio, el sistema de vertical. navegación se hace rápidamente y de una manera, digamos, visual, ya que, primordialmente los contenidos son imágenes y en su mayoría actúan como Visual: Dem tiene un diseño sumamente rígido (todo es cuadrado o rectangular) lo que talvez alude a lo académico y metodológico, pero además hipervínculo, el acceso a los contenidos textuales es también rápido. contribuye en no entorpecer lo que los usuarios muestran, así no quitan Consistencia de Contenidos: el sitio posee una concepción clara y un protagonismo y se hace de una manera estructurada (talvez demasiado), la enfoque de contenidos claros, todo lo que en el sitio se muestra tiene relación paleta cromática es reducida y con una temperatura mas bien calida pero no directa con estos, así no encontramos ni publicidad ni contenidos fuera de saturada lo que la hace agradable a la vista. contexto.

Coherencia Visual: el sitio mantiene una línea grafica constante, no existiendo demasiadas diferencias de una pagina a otra.

11

Benchmarking

12

Benchmarking

13

Benchmarking

Memoria Chilena: Memoria Chilena es un portal de contenidos culturales que ofrece investigaciones y documentos relativos a los temas claves que conforman la identidad de Chile, accesibles a través de las áreas de Historia, Literatura, Ciencias Sociales, Música y Artes Visuales.

También es una biblioteca virtual, que pone al alcance de navegantes de todo el mundo los valiosos materiales que preserva la Biblioteca Nacional de Chile y otras instituciones de la Dirección de Bibliotecas, Archivos y Museos (DIBAM): libros, fotografías, cartas, manuscritos, ilustraciones, mapas y registros sonoros.

14

Benchmarking

Aspectos gráficos:

Aspectos de navegación:

Estructura: la estructura de Memoria Chilena en términos gráficos, no esta tan bien realizada como en aspectos de contenidos pues, entre una pagina y otra de un mismo modulo, la disposición de los elementos cambia de una manera mas bien accidental, es decir, cambian parámetros de márgenes y ubicaciones fotográficas, la diagramación no es constante lo que perjudica el reconocimiento y la concentración del usuario, lo que claramente tiene Navegación: esta misma estructura de rótulos es parte de la navegación relación con la programación del sitio. del sitio que pretende entregar los contenidos de una manera similar a un catalogo o biblioteca, la navegación es eficiente y rápida si se busca algo en Visual: Memoria Chilena sigue un patrón modular, en términos visuales, particular, como también, si se busca algo no concreto, por ejemplo en una ya que la paleta cromática varia según el modulo de contenidos, esto es investigación donde la posibilidad de encontrar nuevo material es siempre interesante debido a lo diverso de estos (que de alguna manera se relacionan entre si, Historia) hace necesaria un sistema de diferenciación, también importante. desde una perspectiva cromática o visual, tomando en cuenta el diverso Consistencia de Contenidos: memoria chilena posee una increíble cantidad universo de usuarios. de contenidos que están muy bien estructurados y modulados como también En un aspecto de lectura, que es para lo que fue creado el sitio, cumple con vinculados, por ejemplo si me encuentro dentro del modulo “música” y los aspectos técnicos para facilitarla, así nos encontramos con tipografías de encuentro un autor y lo sigo biográficamente terminare navegando dentro cómoda legibilidad y colores con baja saturación (en los textos). del modulo “historia”, esto si bien es una característica de navegación, lo es también de contenidos ya que, los documentos están tan bien realizados Coherencia Visual: el sitio tiene una línea grafica que pretende mantener que este enlace entre módulos-documentos favorece al enriquecimiento de unidad entre los diversos temas lo que se refleja principalmente por la estructura y la paleta cromática, no así con la diagramación que presenta un los contenidos. problema ya mencionado.

Rotulación: Rotulación: el rotulado de memoria chilena sigue un código referencial, así nos encontramos con menús con palabras como “historia”,”literatura”, etc. Las metáforas en el sistema de rotulado, son prácticamente nulas y se basan en lo específico de los contenidos, con el fin de facilitar la búsqueda y no confundir al usuario.

15

Benchmarking

16

Benchmarking

17

Benchmarking

Taringa!: Taringa! Es un sitio con la intenci贸n de compartir contenido en la Web (nada nuevo) a modo de comunidad virtual.

18

Benchmarking

Aspectos gráficos:

Aspectos de navegación:

Estructura: como se dijo anteriormente el sitio posee una estructura similar al de un blog, aunque desde una perspectiva de estructura grafica, se vuelve un poco mas complejo ya que, resulta como un blog que contiene muchos blog (los usuarios acumulan contenido) aunque siempre con un mismo patrón o plantilla.

Resulta eficiente para lo que se busca generar, y es sumamente simple; una Navegación: sigue el mismo patrón que un blog, incluso talvez más sencillo columna de contenidos y otra de perfil de usuario. aun, un enlace te lleva al contenido y luego de vuelta, es un sistema lineal y Visual: la grafica del sitio es muy simple por no decir fome y no representa se genera mayor tráfico al desplazarse a través de los usuarios. nada novedoso, la paleta es pobre (2 colores), en resumen tiene una apariencia Consistencia de Contenidos: el contenido de Taringa! Es sumamente diverso sumamente sencilla, en términos de legibilidad hay ciertas falencias que y no responde a un tema determinado, hay de lo que se te ocurra (y mas) tienen que ver con cuerpos demasiado pequeños para la lectura en pantalla (como por ejemplo en el home). muy común en este tipo de sitios, el concepto es compartir, lo que sea.

Rotulación:Taringa! Posee una rotulación bastante común con metáforas coloquiales, ya que, principalmente los usuarios son jóvenes, así nos encontramos con palabras como “novatos” en el menú, también el rotulado de los contenidos, al ser elaborados por los usuarios, no tienen un común denominador mas allá de lo que se puede llamar “lúdico”.

Coherencia Visual: la coherencia aquí no juega un papel primordial estableciéndose un vínculo visual más que otra cosa, la diversidad de material es enorme, no se me ocurre como más explicarlo.

19

Benchmarking

20

Benchmarking

21

Benchmarking

Wikipedia Wikipedia es una enciclopedia libre, es decir, cualquier usuario puede incluir contenido o modiďŹ car parte del que ya existe en lĂ­nea.

22

Benchmarking

Aspectos de navegación:

Aspectos gráficos:

Rotulación:como sucede con Memoria Chilena, los rótulos de Wikipedia Estructura: el diseño del sitio es más bien plano, proyectada a los contenidos, son de un carácter formal ya que los contenidos así lo ameritan obviando nuevamente nos encontramos con una estructura rígida con un bloque de metáforas comúnmente usadas, incluso no hay “home” o “inicio” sino texto enorme y una diagramación pobre con una sola columna. “portada”.

Visual: los aspectos visuales responden a una lectura adecuada en pantalla Navegación: la navegación de Wikipedia sigue un patrón de “interiorización” en términos tipográficos y cromáticos pero la caja de texto es tan ancha que de los contenidos ya que su estructura permite que el usuario vaya desde el lector se cansara de leer tempranamente sobre todo en textos extensos, en una idea general de contenido a uno particular y viceversa, el sistema se cuanto a las imágenes, la mayoría de los documentos tienen bastante pocas basa una vinculación de documentos sumamente compleja pero eficiente. aunque con enlaces externos para acceder a contenido multimedia.

Consistencia de Contenidos: la consistencia de los contenidos se aferra a la Coherencia Visual: el sitio mantiene un diseño monótono que da la idea de palabra “enciclopedia” siendo este el vínculo que existe para la cantidad de continuidad, esto es aceptable, lo que podría calificarse como coherente, es una lastima que esta coherencia sea tan pobre para un sitio con tan amplio temas que abarcan. y excelente contenido.

23

Benchmarking

24

Benchmarking

25

Benchmarking

Carabineros institución policial de chile. De principio a fin… pésimo.

26

Benchmarking

Aspectos gráficos:

Aspectos de navegación:

Rotulación: el rotulado del sitio deja bastante que desear, primero por que no Estructura: sigue un sistema (antisistema) que podría señalarse como tiene unidad conceptual y segundo por que las metáforas son incongruentes, “teoría del caos”. así nos encontramos con botes como “Fono Niños” o “Carabineros en No hay estructura.

Cifras”, incomprensible.

Visual: verde, mucho verde, para luego llegar a azules, blancos etc. Para que Navegación: primero nos encontramos con un home sumamente hablar de tipografía, son utilizadas un cuanto hay de familias tipográficas. desordenado y sin jerarquía, no existe un menú principal.

Segundo: existen enlaces que despliegan la información con destino blank Coherencia Visual: ausente. y otros en top, lo que puede hacer pensar al usuario que entra y sale del P.D. existe carabineros tv. (No hablare del tema). sitio.

Consistencia de Contenidos: peor aun, existe información hasta del santoral y precios de monedas extranjeras, por que?... el horario esta desactualizado, y el problema de jerarquía de la información hace que los contenidos estén revueltos y poco claros.

27

Benchmarking

28

Benchmarking

29

Benchmarking

Valparaíso Zona de Diseño Esta iniciativa tuvo su partida el 2003, con el objetivo de posicionar a Valparaíso como referente del diseño en Chile, al igual que otras ciudades como Milán, Barcelona y Buenos Aires, generando de esta forma un área de desarrollo en torno a esta disciplina, que en el día de hoy se torna fundamental para agregar valor a productos y servicios.

30

Benchmarking

Aspectos de navegación:

Aspectos gráficos:

Rotulación: el rotulado del sitio es de corte referencial, muy preciso a lo Estructura: contempla una estructura típica de blog (de echo lo es) que conlleva manteniendo relación con el contenido de una manera optima, apareciendo un head, una columna izquierda con menú y aplicaciones varias y una central con contenidos, subdividiéndose en la visualización de mantiene un código o lenguaje formal. artículos y volviendo a ser una cuando se entra en un post.

Navegación: el sitio posee un menú dividido en dos módulos uno propio para la documentación del sitio y otro para los artículos, que se divide por Visual: la grafica del sitio no posee elementos novedosos pero cumple con temas genéricos lo que propicia una navegación ordenada y guiada durante legibilidad y temperatura para facilitar su lectura, utiliza cuerpos de texto aceptables. todo el proceso.

Consistencia de Contenidos: los contenidos son propios del área a la que se Coherencia Visual: los elementos que interactúan con el contenido y el dirige el sitio y no se encuentran temas que difieran de el, los artículos son contenido mismo son coherentes con el contexto. interesantes desde el punto de vista del lenguaje manteniendo una buena redacción, talvez la única problemática en relación a los contenidos sea la falta de diferenciación de los temas, es decir, no se hace diferencia en las distintas ramas del diseño, juntándolo todo por igual.

31

Benchmarking

32

Benchmarking

33

Benchmarking

Unión de los Tipógrafos es una publicación a modo de revista o periódico de corte noticioso sobre el acontecer tipográfico nacional y latinoamericano.

34

Benchmarking

Aspectos de navegación:

Aspectos gráficos:

Rotulación: la rotulación del sitio responde a un código editorial debido al carácter con que se enfoca, así nos encontramos con rótulos como “colofón” propio del mundo editorial, mantiene un lenguaje formal respetando el contexto y el carácter de la publicación.

Estructura: el sitio mantiene una estructura durante todo el recorrido, no existiendo variantes ni diferencias de estructura de ningún tipo, esto genera una unidad visual agradable y no permite que el usuario sienta que ha dejado el sitio sin haberlo hecho

Visual: la grafica del sitio es agradable y sencilla permite una lectura fluida ya que los anchos de columna son idóneos para la lectura continua, la paleta cromática se maneja de tal manera que generan un cierto reposo visual a través de las texturas y saltos de línea (entradas de aire) e indudablemente el uso tipográfico es optimo además del uso de imágenes que ayudan a Consistencia de Contenidos: como era de esperarse los contenidos del sitio mantener una diagramación única. son sumamente consistentes y mantienen una línea editorial constante, no aparecen contenidos fuera de foco y están sumamente bien catalogados y Coherencia Visual: existe una coherencia visual en todos los aspectos y el sitio esta muy bien diseñado en función del propósito, los contenidos ordenados en un sistema de archivos. mantienen una estrecha relación entre si.

Navegación: el sitio mantiene la característica de blog en cuanto a su navegación, un menú abundante en contenido y acompaña durante todo el proceso al usuario lo que facilita el encuentro de contenido al usuario y posee un sistema de búsqueda.

35

Benchmarking

36

Benchmarking

37

Benchmarking

Dise単o Shakespear portafolio y/o catalogo del estudio de dise単o de Ronald Shakespear.

38

Benchmarking

Aspectos de navegación:

Aspectos gráficos:

Rotulación: el rotulado sigue un patrón de lenguaje formal y enfocado de Estructura: la estructura del sitio es similar a la de una galería fotográfica en manera tal que funciona como un catalogo de proyectos, nos encontramos línea existiendo básicamente dos áreas de contenidos, menú y fotografías. con palabras como ”packaging” para especificar un área del trabajo del Visual: es difícil establecer un criterio visual ya que prácticamente el sitio equipo. esta construido en base a fotografías y los pocos contenidos textuales Navegación: la navegación del sitio genera una idea de linealidad ya que están supeditados a estas, pero lo poco que se puede analizar en relación a posee un control que te desplaza de “adelante” hacia “atrás”. Esto permite cromatismos, es la idea de mantener la atención en el contenido fotográfico ver el contenido como si hojeáramos una revista, además posee un menú que destacándose las transparencias y grises como una manera de neutralizar acompaña al usuario durante toda la visita lo que hace que esta navegación estas áreas, desde el punto de vista tipográfico, la utilización de cuerpos grandes y de palo seco ayudan a mantener una lectura rápida y sin pausas lineal sea justificada y práctica. (para así volver rápidamente a la fotografía).

Consistencia de Contenidos: la consistencia de los contenidos es evidente ya que se trata de una muestra de trabajos, es un portafolio con apariencia Coherencia Visual: existe una coherencia visual durante todo el sitio y los contenidos textuales tienen directa relación con la imagen ya que actúan de galería. como referencia.

39

Benchmarking

40

Benchmarking

41

Benchmarking

Chilquinta web de la compañía eléctrica de la quinta región.

42

Benchmarking

Aspectos de navegación:

Aspectos gráficos:

Rotulación: el rotulado del sitio mantiene un lenguaje formal y preciso para Estructura: el sitio sigue una estructura tradicional y no representa novedad alguna, posee una diagramación simple, dispuesta en dos columnas una de los contenidos a los cuales hace referencia. acceso al cliente y otra de contenidos.

Navegación: el sitio posee un menú desplegable donde rotula los contenidos ordenadamente, lo que permite al usuario moverse libremente a través del Visual: en términos gráficos, el sitio mantiene cierta estructura rígida con sitio, dicho menú esta presente constantemente, pero no existe un sistema bloques de texto toscos y con problemas de espaciado entre palabras, hay un mal uso tipográfico en términos de lecturabilidad y escasa utilización de vínculos entre documentos. de recursos visuales y de formato de texto, las imágenes son pobres y Consistencia de Contenidos: los contenidos del sitio están bien estructurados escasas pero tienen cierta relación al contenido que acompañan, hay ciertos y tienen directa relación con la empresa no existiendo contenidos problemas de saturación en partes aisladas como por ejemplo tablas con descontextualizados ni marginados, hay una buena modulación de estos. texto, aunque en términos generales hay una buena temperatura para la lectura.

Coherencia Visual: se mantiene coherencia en casi todos los aspectos del sitio y ocasionalmente se encuentran variaciones en la diagramación

43

Benchmarking

44

Benchmarking

45

Francisco Leal Montti 2008

Benchmarking

Benchmarking

ď ¨ď Š

47