Terminé!

Más vale tarde que nunca, dicen.

Get your own - Open publication

Leer más

Avance: Pauta de Preproceso Visual

Alcancé a completar el segundo punto de la pauta, el de registro e impresiones. En mi cabeza los otros puntos están más o menos delineados, pero lamentablemente el tiempo no acompaña.

Aquí está mi avance...

Get your own - Open publication

Leer más

Se acabó la práctica!!!

Este jueves terminé mi primera práctica (horror, se viene la segunda...) y con mis compañeras de Melindrosa empezamos a trabajar en el proyecto semestral. Fue una semana larga y bien trabajada, con harto trasnoche y pelada de cables, pero no nos fue mal (lo que pasa es que en este taller sólo a unos pocos les va bien... a los demás nos puede ir "un poco mal", o "más o menos mal", o "bien mal", o "terrible de mal"...)

Mañana el blog queda enlazado desde mi sitio web, así que si llegaste aquí desde allá, te cuento que también estudio diseño gráfico y por estos días me doy de cabeza aprendiendo cómo desarrollar proyectos multimedia. Este blog describe el proceso de aprendizaje y sirve como plataforma para la entrega de algunos trabajos.

Y ahora, seguiré trabajando.

Leer más

Lo que aprendí haciendo mi sitio web...

(aquí está el gráfico de relación corregido para la re-entrega)

Más allá de lo que aprendí en términos de css, wireframes y tecnicalidades varias, mi proceso personal fue difícil y agotador.

El problema: un tema mal enfocado. El tema: el diseño gráfico sustentable. Parecía bueno, pero no me quedó clara la primera corrección y de ahí fue todo un espiral descendente.

La cosa con esto de los sitios web es que no es tan fácil como apretar Ctrl+Z porque para cambiar una sola cosa hay que cambiar todo. Y para cambiar el tema, bueno... éso hay que tenerlo bien claro y redondito desde un principio.

Aprendí que hay temas que parecen bien enfocados pero en realidad son demasiado amplios. A veces enfocarse en algo pequeñito y abrir desde ahí es mejor que tratar de abarcar mucho.

También aprendí que los gráficos de relación son súper útiles para esto, pero creo que no supe utilizarlos. Mientras trabajaba este fin de semana se me ocurrieron mil ideas mejores de cómo organizar el sitio, pero con los contenidos ya hechos y gran parte de la aplicación estructurada, era demasiada pega empezar de cero.

Hay que tener todo el contenido, primero. Estructurarlo para que se entienda. Y sólo al final viene el diseño.

El dilema era: ¿Se hace bien, o se hace entero? Faltó tiempo. Faltó tenerle más cariño al trabajo, pero en mi cabeza ya estaba todo mal. Igual lo terminé, casi, pero bien dentro de lo que pude. Me alegra que se haya terminado al fin.

Ahora borrón y proyecto nuevo.

Leer más

gato + alfombra = aspiradora llena de pelos

Estas últimas dos semanas han sido difíciles. Sin embargo hoy ocurrió algo que me hizo pensar en el verdadero (y últimamente más importante) sentido de las cosas.

Sucede que el pdf publicado dos entradas más abajo se lo llevó mi pololo a Hualañé para mostrarlo a los protagonistas del Puro Chile. Y hoy día me llegó el siguiente mail:

"Hola hualañecinos de corazón:
Les mando un material invaluable para mí por lo menos... y creo que les gustará mucho, de nuestras peripecias en Hualañé pal 18.
MUCHAS GRACIAS MARIANA!!!
Un abrazo
Francisco García G."

Entonces, sonriente, respondí:

"Gracias a ustedes!! Gracias Pancho por compartir, me pone contenta que les haya gustado mi trabajo... Yo he estado ultra estresada después del 18, el Negrito no se cansa de darme ánimo. Ni siquiera sé qué nota me saqué, pero ahora que lo compartes pienso que es más importante que a ustedes les guste y les quede de recuerdo!!! Gracias por recordarme qué es lo importante!!"

Ahora, luego de despegar vía aspiradora la mitad del gato de la alfombra, leo así:

"Mariana me emociona mucho recibir tan bellas fotos, yo quedé con muchas ganas de descubrir más ese hermoso lugar, pero ahora también recuerdo lo importante, el testimonio de los momentos y conversaciones que viví con la familia del Alejandro o con los profes del cole, o las chicas del bar, simplemente estar con ustedes... bellísimo.
Llena de nostalgias porque aquello que genera memoria produce una dignidad presente en el corazón de quien crea cada espacio, que sin duda te trae al origen... a estar en unión con lo más sagrado de la propia y común historia de los sujetos... porque sin duda estamos sujetos a otros... unidos a otros... me hace confirmar no querer ser Individuo... sino ser sujeto, estar sujeta a mi memoria, a la memoria de mi País, de mis compañeros de vida.
Gracias, infinitas gracias.
Amor
ItzaMaro"

y Mario...

"Mariana felicidad, puta q es lindo Hualañe, si así se cuenta, así se vive, vive Chile mierdaaaaaaa!!!!
Gracias por mostrarnos tu percepción de lo vivido, bellas fotos, bello encuentro, y lo más lindo, q bellas comunidades con las q estuviste, paré q viene de cerca la opinion jajaja.
Gracias, un abrazo, buena vida."

Más allá de las notas o de que esté bien o mal, mi Puro Chile, del que estoy ahora más orgullosa aún, trasciende las barreras del taller.

Salud por eso!

Leer más

Crónica del Bochinche Fiestero en Hualañé

A la noche subo el gráfico porque estoy ultra hiper atrasada para ir a clases. Adiós.

Get your own - Open publication

Leer más

Mi sitio de Diseño Sustentable no es sustentable... Plop!

Ésa fue la conclusión de mi querido amigo y ayudante Osvaldo el viernes en la tarde.

Aquí están los links al mapa de Arquitectura de la Información (corregido para la entrega del 12 de Septiembre), los wireframes del homepage, interiores, mapa del sitio y links, y galería y descargas; y también las últimas versiones de los mock-ups que usé para crear los css del sitio, el del homepage y el de interiores.

Estoy demasiado cansada para escribir más. Y también un poco chata de tanto mirar la pantalla.

Arroz.

Leer más

Mi primer mapa de A.I.

El encargo de esta semana (en realidad de la semana pasada) consistió en seleccionar un tema cercano para desarrollar una aplicación web basada en éste y en sus temáticas adyacentes. Este sitio será desarrollado y completado dentro de las próximas dos semanas.

Yo seleccioné el Diseño Gráfico Sustentable, y aquí están los primeros pasos para el desarrollo del sitio: temáticas, objetivos, mapa de arquitectura de la información (simplecito pa no confundir ni confundirse), y un zoom a una de las áreas.

Debo decir que de esta manera "paso a paso" esto de desarrollar un sitio web parece ser más factible de lo que al principio pensé. Es como tragarse una pastillota partida en pedacitos.

Aclaración para el profe: No quise ampliar el tema a "Diseño Sustentable" por temor a pecar de totalitaria. Me quedaré con el tema más cercano mejor.

Get your own - Open publication

Leer más

El pdf!

Get your own - Open publication

Leer más

Buscabilidad y Encontrabilidad

Aquí va el resultado de mis horas de observación... de las "raíces" de la web. Con ustedes, damas y caballeros, mis diez sitios de análisis.

(y mi Leer más que orgullosamente implementé solita...)

Sitio Web 1
Santander Santiago – Banco en Línea

El sitio del Santander Santiago parece haber sido desarrollado por varias personas, en varios momentos distintos. Si bien se mantienen los colores corporativos, hay incoherencias en el diseño de las distintas páginas, y la navegación se dificulta debido a que muchos menús coexisten en un mismo espacio.

CONTENIDOS
Coherencia en la rotulación:
La rotulación es coherente la mayoría de las veces, pero con pequeñas diferencias como por ejemplo, en el mapa del sitio, bajo Santander Universidades, aparecen “Joven Universitario”, “Jóvenes Profesionales”, “Docentes y Administrativos”, etc; mientras en la sección de Santander Universidades a la que se accede desde la página principal, aparecen “Plan Universitario”, “Plan Joven Profesional” y “Plan Funcionario y Académico”.

Aunque los links no enlazan a los mismos lugares, refieren a las mismas cosas, pero dispuestas de manera diferente.

Lógica en la navegación:
Los links más utilizados funcionan de manera correcta, pero sólo hasta un primer nivel de profundidad. Por ejemplo, si desde “ Nuestros Productos” me voy a “Plan Santander Personas” y luego a “Cuenta Corriente Moneda Nacional”, no puedo regresar a “Plan Santander Personas” desde el mismo sitio (los breadcrumbs no funcionan correctamente).

Como varios menús coexisten (a momentos hay tres y hasta cuatro menús, arriba, abajo y a los lados), los breadcrumbs no abarcan todo el mapa del sitio, sino sólo los niveles superiores.

Consistencia de los contenidos:
Generalmente hay consistencia, aunque sucede que la información es presentada de distintas formas. Por ejemplo, en el caso de las cuentas universitarias, hay enlaces a páginas “enganche”, en donde la información se muestra de manera amigable y con destacados; mientras que si uno sigue el link desde “Nuestros Productos”, se encuentra con información técnica dispuesta en tablas que no es muy amigable (por ende la gente no la lee!!! es como la letra chica!!!)

GRAFICA
Estructura visual que facilita la navegación:
El mayor problema de este sitio es que los menús cambian de posición, las páginas no tienen una retícula común sino que se ordenan según lo que contienen, y es fácil ver que las distintas áreas fueron desarrolladas por distintas personas.

Dentro del sitio seguro, la navegación es relativamente simple porque está más libre de recursos publicitarios; sin embargo, desde el sitio principal uno se ve bombardeado de propaganda y videos que dan a conocer distintos servicios.

Al usuario regular le molesta que le ofrezcan cosas que no requiere (como por ejemplo, cuando se ingresa al sitio seguro, que aparezca una oferta de un seguro antifraude), y por lo tanto se va directamente a ingresar su rut y clave para acceder a un sitio más “silencioso”. Al potencial cliente le será difícil encontrar lo que anda buscando, o más bien, volver a encontrarlo, ya que los links que deberían llevar a los mismos lugares no siempre son consistentes.

Contraste / Matiz:
El sitio utiliza escalas de grises y un rojo corporativo. A veces se acompaña de un amarillo que busca llamar la atención, en links y promociones. En general los textos son visibles (aunque quizás el tamaño del texto no es el óptimo), y el contraste es agradable a la lectura. Equivalente a la letra chica en web sería la letra con poco contraste.

Coherencia visual entre “homepage” e interiores:
Aquí es donde este sitio se cae. A medida que uno navega los enlaces, se da cuenta de que, si bien son secciones distintas del banco (Fondos Mutuos, Créditos Hipotecarios, etc), están todos dentro de un mismo sitio y debieran ser más coherentes visualmente. Sin embargo muchos presentan distintas disposiciones, distintas tipografías, distintos menús, distintos botones. Es como si el sitio se hubiese compuesto por partes, y no se hubiera actualizado la “forma” de aquéllas que eran más antiguas.

Sitio Web 2
Servicio de Impuestos Internos

El sitio del SII contiene una gran cantidad de información organizada en una serie de páginas coherentes entre sí, cuyo diseño sencillo es particularmente útil considerando la cantidad de usarios que acceden a ellas. Su página principal, sin embargo, deja mucho que desear.

CONTENIDOS
Coherencia en la rotulación:
La rotulación de los distintos documentos es altamente coherente, pues se ha privilegiado la información por sobre el diseño o la estética. Se puede ver que hay una especial preocupación por facilitar la búsqueda de esta información y que se pueda llegar a lo mismo a través de diferentes enlaces. Los documentos parecen estar ordenados y sin información supérflua (aunque la información sí es densa y está poco jerarquizada).

Lógica en la navegación:
Si bien la página principal es un caos de enlaces, la navegación se vuelve más lógica una vez que se accede a alguna de las áreas. A través de un menú superior se puede navegar entre áreas, y no es necesario volver al homepage.

Gracias al uso de breadcrumbs es fácil volver a encontrar un documento; y en páginas que albergan mucho texto, existen enlances que permiten “subir”.

Incluso, al acceder a la opción de pagos por internet, el sitio enlaza con sitios externos que automáticamente generan los pagos.

El sitio del SII no funciona correctamente con todos los browsers.

Consistencia de los contenidos:
Los contenidos son consistentes con sus enlaces, aunque a veces la búsqueda de información se dificulta pues los textos son demasiado largos y complejos de entender.

GRAFICA
Estructura visual que facilita la navegación:
Desde la página principal la navegación es compleja. Ésta se estructura en tres columnas cuyos links están esparcidos por todo el documento. Existen íconos que enlazan a las distintas áreas del sitio, pero éstos no tienen el efecto ni se les puede dar el uso que se pretendió. Sin embargo, una vez que uno accede a alguna de las áreas, estos íconos se ordenan en la parte superior de la página, creando un menú de fácil acceso, pero de difícil lectura.

Se percibe que no hay una hoja de estilos que controle la presentación de los documentos, ya que se han privilegiado otras funciones dentro del sitio. Tampoco hay jerarquización de la información, sino que los documentos aparecen en páginas interminables en donde a veces es difícil dar con lo que uno busca.

Contraste / Matiz:
El homepage de este sitio parece un arcoiris donde hay cosas que cambian de color y que se mueven por todos lados. La atención se distrae y es difícil leer y penetrar el documento por la cantidad de información visual mal jerarquizada que contiene.

El contraste no tiene problemas principalmente porque la mayoría de la presentación es controlada por el navegador, y el resto de los elementos son grandes y bien contrastados. Sin embargo, al ser todos los links del mismo color, es muy difícil encontrar lo que se busca, pues el texto se transforma en un gigantesco bloque azul.

Para el usuario novato, esta página principal es una pesadilla.

Coherencia visual entre “homepage” e interiores:
Baja coherencia. Los interiores están ordenados en una o dos columnas casi sin jerarquía, excepto por los links. Al parecer se “diseñó” la página principal pero se dejó a los navegadores la presentación de los interiores. Aparte de la serie de íconos en la parte superior de los documentos, no hay nada que indique que los documentos pertenecen al sitio del SII.

Sitio Web 3
FONASA


El sitio web de FONASA está bastante bien estructurado considerando que es un servicio público y en comparación al sitio del SII. La navegación es relativamente fácil, aunque algunos menús desaparecen y los breadcrumbs están pero no funcionan. Según el tipo de usuario, sin embargo, los códigos visuales no son los óptimos.

CONTENIDOS
Coherencia en la rotulación:
La rotulación de contenidos es coherente, y los contenidos se agrupan según la categoría de personas que consultan el sitio (beneficiarios, prestadores y empleadores). Como no es un sitio excesivamente grande, y la información está ordenada con rótulos que provienen seguramente de documentos impresos, no se ve mayor problema en este sentido.

Lógica en la navegación:
Existen ayudas visuales para ayudar la navegación, sin embargo, el regreso a los contenidos se vuelve difícil en ocasiones. Por ejemplo, los links de “volver portada” en la esquina superior derecha no regresan a la portada, sino que simplemente vuelven a la página anterior.

Desde el menú superior se puede acceder a los distintos grupos de información, pero el menú de la derecha, que aparece en la página portada y en algunas otras, no es un elemento permanente, si bien contiene información de utilidad que debiera ser accesible desde todo el sitio.

El sitio se estructura dentro de un mismo recuadro y de esta manera la navegación se simplifica, gracias tanto a ayudas visuales y a que pareciera que uno siempre está en un entorno “familiar”.

Consistencia de los contenidos:
Generalmente lo que se busca es lo que se encuentra, sin considerar que los contenidos a veces son densos por naturaleza y la jerarquización de los mismos es todavía muy básica.

El caso de los breadcrumbs que están presentes y funcionan en algunas páginas y en otras no, hacer pensar que el desarrollo del sitio está incompleto, y que hay algunos enlaces que no fueron trabajados del todo (seguramente porque serían los menos visitados).

GRAFICA
Estructura visual que facilita la navegación:
El sitio se estructura dentro de un mismo recuadro con un menú superior y uno a la izquierda que son comunes a todas las páginas. Existe una ayuda visual simple y efectiva que divide en colores la información pertinente a beneficiarios, prestadores y empleadores, y que se repite cada vez que esta división se hace patente.

Sin embargo, el menú de la derecha desaparece una vez que se abandona la página principal, y los breadcrumbs no son consistentes en todas las páginas, por lo que se dificulta la navegación.

En lugar del menú “que desaparece” hay un menú de sitios de interés e información relacionada al texto activo, de manera que el usuario puede “saltar” de una página a otra relacionada, sin devolverse. Lo que sí es difícil es volver a encontrar una información una vez que uno ha abandonado una página, pues las ayudas visuales en este sentido no son suficientes.

Contraste / Matiz:
El contraste de la gran mayoría de los elementos es adecuado, ya que se encuentran sobre fondos de color claro y utilizan colores oscuros, pero no negros. Es en los textos donde el contraste no es suficiente, especialmente cuando son textos largos sin ninguna jerarquía ni ritmo visual. Sólo bloques impenetrables de gris claro en donde las letras apenas se distinguen porque además la fuente es muy pequeña.

De esta manera se discrimina al usuario de más edad, que tiene más problemas de visión y que por lo tanto difícilmente leerá un artículo dentro de este sitio web.

Coherencia visual entre “homepage” e interiores:
El sitio es altamente coherente en este sentido, ya que los menús, tipografías, colorido y disposición de los elementos son consistentes de página a página. Se “ve” un sitio ordenado, limpio, atractivo, y esto además es consistente con el servicio que se ofrece.

Sitio Web 4
LAN.com (Chile)


CONTENIDOS
Coherencia en la rotulación:
Los rótulos son bastante coherentes considerando que este sitio web se basa principalmente en promociones y textos cortos, con bastante colorido y jerarquización, de manera de captar la atención del potencial cliente.

Hay pequeñas diferencias de rotulación desde los links, lo que en este sitio se debe a que los menús tienen textos cortos, y estos se expanden en las páginas enlazadas. Por ejemplo, “Ahorra tiempo” lleva a “Elige ahorrar tiempo, haz tu Check-in en LAN.com”, y también “Check-in” enlaza a la misma página, lo que es nada más que una estrategia para llevar al potencial cliente a un lugar determinado.

Lógica en la navegación:
La navegación es ayudada por un menú superior que divide el sitio en secciones, con distintas “páginas de bienvenida”. Luego hay un menú al lado derecho que permite navegar enlaces que tienen que ver con la sección, aunque en ocasiones llevan al usuario a otra sección directamente. Por ejemplo, si uno hace click en “Estado de Vuelo” dentro de la sección “Información de Viaje”, es llevado a la sección “Reservas y Servicios”. Esto prueba que las distintas secciones son dependientes unas de otras, y que sólo están separadas para permitir una navegación simplificada.

Consistencia de los contenidos:
En el caso de este sitio, en donde cada elemento es un “enganche” para el potencial cliente, hacer click en una cosa no siempre lleva a donde uno cree. El ejemplo más obvio es que hacer click en una promoción de viaje lleva directamente al menú donde se hace la reserva, y pide de inmediato fechas de ida, regreso, y número de pasajeros, sin ofrecer una página intermedia.

GRAFICA
Estructura visual que facilita la navegación:
Este sitio mantiene una estructura visual común para las distintas secciones, si bien los componentes varían. Los colores se repiten, creando una ley a través del sitio que hace que páginas con distribuciones dispares se asemejen mediante formas, colores y tamaños.

Los menús siempre se encuentran arriba y a la derecha (además de un menú al pie de la página con links menos requeridos), además de existir una línea de breadcrumbs que permite saber en qué parte del sitio se encuentra uno. Esto es especialmente útil cuando el sitio salta de una sección a otra, como se explicaba anteriormente.

Por otro lado, los “enganches” en este sitio son muchos, que se disponen como una especie de caja de bombones para que el potencial cliente “elija y caiga”. Se podría decir que esto facilita la navegación, o más bien, facilita la tentación (como la góndola de la caja del supermercado).

Contraste / Matiz:
El contraste es bueno (aunque no excelente) y los matices son consistentes a través del sitio (incluso en la fotografía). El look general del sitio tiene mucho que ver con el slogan de LAN: “el encanto de volar”. Los tonos pasteles y los contrastes suaves le dan al sitio un aire “liviano”, que invita al descanso.

Coherencia visual entre “homepage” e interiores:
La disposición de elementos, la repetición de colores, el estilo de las fotografías y los íconos crean una coherencia que va más allá de una repetición de retícula de página a página.
El hecho de que el sitio se estructure bajo un mismo menú y cabecera crean la ilusión de siempre estar en un entorno conocido, aunque la información vaya cambiando.

Sitio Web 5
Capital One Online Banking


CONTENIDOS
Coherencia en la rotulación:
Para ordenar la gran cantidad de información que existe en este sitio, es imperativo que la rotulación sea coherente. El sitio está dividido y subdividido varias veces, y cada una de las áreas (Tarjetas de Crédito, Préstamos, Banca, etc) tiene su propio menú superior.

Los menús al menos son coherentes en sus rótulos. Por ejemplo, en la cabecera del sitio principal hay un menú de “Productos” que se repite en todos los “subsitios”, y éste es coherente con los distintos subsitios que se despliegan.

Lógica en la navegación:
La manera en que este sitio está ordenado hace que la navegación sea mucho más lógica, ya que separa los distintos componentes por áreas de servicio (ya que el banco es también aseguradora y ofrece servicios para pequeñas empresas).

Siempre existe un enlace a la página principal, y además un menú superior desde donde se pueden navegar todos las distintas áreas.

Este sistema es bastante lógico pues el usuario viene decidido a buscar y a encontrar algo, y el sitio va depurando información supérflua según las preferencias indicadas (por ejemplo, hay un recuadro donde ingresar el ZIP code, de esta manera el sitio sabe dónde está ubicado el usuario y qué servicios ofrecerle según la disponibilidad en su área).

Consistencia de los contenidos:
Como es un sitio que ofrece productos y servicios, pasa a veces que hacer click en un link lleva directamente a un compromiso: hay que ingresar información personal para continuar navegando. Esto es de esperar en un banco, de todas maneras.

En el caso de la búsqueda de información, el sitio es transparente y ordenado; al mismo tiempo, va descartando información innecesaria, y es por esto que requiere de ciertos datos ingresados por el usuario (de manera de entregarle un mejor servicio e información de utilidad).

GRAFICA
Estructura visual que facilita la navegación:
Este sitio facilita el “encontrar” al usuario. Por medio de formularios y “subsitios”, la página principal lleva al cliente exactamente a donde quiere ir, y mantiene los enlaces en la parte superior como una ayuda visual para que el usuario pueda ir y venir dentro de los contenidos.

Los contenidos aparecen ordenados de distintas formas, y un ejemplo claro son las FAQ: Aparecen ordenadas según el tipo de usuario y su situación actual, y también por orden alfabético, ofreciendo una serie de opciones de búsqueda que hacen la navegación más simple.

Contraste / Matiz:
Buen contraste para lectura, siempre manteniendo los colores corporativos y áreas delimitadas por recuadros grises con degradados. Los grises... más claros y más oscuros, aparecen mucho en los sitios de corte “corporativo”, más serio y en donde se requiere una lectura constante y sin distracciones.

Coherencia visual entre “homepage” e interiores:
Hay coherencia visual a través de colores, tipografías y un menú superior en donde los textos cambian, pero la interfaz gráfica se mantiene. De hecho, uno puede pasar de la página principal a uno de los subsitios y no darse cuenta hasta que mira el menú superior.

Excepto por algunos de los enlaces, la mayoría de los subsitios se corresponden con el principal, aunque los elementos cambian de posición y a veces aparecen nuevos menús.
Comparado con el sitio del Santander Santiago, y considerando que hay mucha más información que administrar, éste sitio se ve más cohesionado.

Sitio Web 6
Barnes and Noble Bookstore


El sitio de una tienda de libros en Estados Unidos, que ofrece de todo, hasta juguetes y objetos de diseño para el hogar. Aquí todo es “buscable” y “encontrable”, y se ofrecen un sinnúmero de criterios de búsqueda para facilitar la misma, además de sugerencias y listados que ayudan al usuario a encontrar lo que busca, o a tentarse por lo que no.

CONTENIDOS
Coherencia en la rotulación:
Altamente coherente, ya que se trata de productos con criterios de búsqueda. Los nombres de los autores, de las obras, editoriales, años de edición, ISBNs, etc. son exactos, de manera de facilitar la búsqueda. También lo son las portadas de cada libro, e incluso sus interiores cuando se permite la visualización de éstos.

Además hay que considerar que es una tienda, por lo que la información no debe sufrir alteración alguna, debido a que los pedidos por internet, cuando eventualmente llegan al consumidor, deben ser tan coherentes como la búsqueda que se inició en el sitio.

Lógica en la navegación:
Aquí se podría hablar de coherencia en la clasificación. Las categorías son incontables, y los criterios de búsqueda aún más. El sitio provee al usuario una serie de listados que aparecen como menús a ambos costados de cada página, para facilitar la búsqueda o sugerir algún producto. La analogía de la “tienda online” es casi perfecta en este sitio, con “góndolas” presentando los bestsellers, las categorías más buscadas, los cds más vendidos.

En este sitio se pueden producir dos tipos de navegación: aquélla en la que el usuario busca algo específico, y aquélla en la que el usuario busca algo, pero no está muy seguro de qué es lo que busca. Por esta razón se le ofrecen criterios, se le hacen sugerencias, incluso del tipo “usuarios que compraron esto, también compraron...”.

La lógica de la navegación es, por lo tanto, permitir el “paseo” del usuario dentro del sitio con el más alto número de enlaces (de hecho, casi todo en las páginas enlaza a algún otro punto del sitio, excepto por las descripciones textuales).

Consistencia de los contenidos:
Los contenidos son altamente consistentes. Se puede encontrar cualquier cosa que esté disponible, y si no está, seguramente se darán sugerencias de artículos o productos similares. La categorización de productos es profunda, y esto permite que una y otra vez se encuentre lo que se busca (o lo que se encuentra!!! la idea es crear la necesidad!!!).

GRAFICA
Estructura visual que facilita la navegación:
Listas ordenadas, categorías y enlaces, enlaces, enlaces. La estructura visual del sitio es la de una librería: estantes con productos ordenados, nada muy llamativo, pero con jerarquía. Textos en distintas presentaciones, que invitan a hacer click, o a enfocar la mirada en distintos puntos de la página.

La estructura visual es atractiva, sin llamar mucho la atención. Es elegante.

Contraste / Matiz:
En este sitio es importante que los productos se destaquen, y se conviertan en objetos de deseo. Por lo tanto, se usan colores neutros, mezclados con el gris (mejor para la lectura), creando una paleta de colores que no compite con el contenido más importante.

El texto no “grita” en un contraste más bajo, y es necesario que sea discreto, educado y elegante.

Coherencia visual entre “homepage” e interiores:
El homepage de este sitio actúa como la góndola de ofertas. Ofrece una serie de productos para el visitante ocasional, y el menú principal para aquél que sabe a dónde se dirige. Tanto la organización de los elementos como la estética son constantes a través del sitio, y el homepage ofrece los menús de búsqueda en su estado más simple, de manera de preparar al usuario novato para los sistemas de navegación que encontrará.

Sitio Web 7
LOGODESIGNLOVE


Este blog sobre diseño de logotipos es actualizado constantemente y al contrario de otros sitios analizados, contiene muchos links que direccionan fuera de él. Es bastante nuevo, por lo que los archivos aún no son considerables, y la mayoría de los temas pueden verse en la columna que los agrupa por “Populares” y “Recientes”.

CONTENIDOS
Coherencia en la rotulación:
La rotulación de los temas de discusión es sintética y permite conocer de antemano el contenido. La gran mayoría contiene números o el nombre de alguna empresa sobre cuyo logo se discute, y esto ayuda al usuario a seleccionar un tema de su interés.

Lógica en la navegación:
La navegación es libre en un sitio como éste, que no tiene ningún fin de lucro (en comparación con los otros sitios analizados). Todo depende del nivel de interés del lector, y la acción de abandonar el sitio y luego regresar se espera y se fomenta.

Hay muchos enlaces que conectan con sitios externos, y la mayoría de los enlaces dentro del mismo sitio se ordenan en una lista en forma de columna.

Además, existe un menú superior en donde se puede acceder a los archivos del sitio, en caso de que se quiera revisar con más profundidad.

Consistencia de los contenidos:
Como es un sitio nuevo, casi todos los enlaces funcionan correctamente. Las temáticas son consistentes y aunque abarcan temas clásicos, humorísticos, de opinión, etc. se mantienen y relacionan dentro del tema principal.

GRAFICA
Estructura visual que facilita la navegación:
La estructura visual es la más típica de los blogs: en columnas. Hay un menú superior y una columna de links de interés, además de enlaces destacados en cada uno de los temas y sus respectivos comentarios. Como el listado de enlaces siempre se mantiene en el mismo lugar, el sitio es fácil de navegar (también ayuda que el contenido de éste sea aún bastante manejable).

El resto de la navegación es hacia afuera, también facilitada por links a otros sitios web y enlaces que interactúan con sitios externos. Es la idea.

Contraste / Matiz:
Lo interesante de este sitio es que el corazoncito gana mucha presencia por vivir en un mundo mayoritariamente gris. El contraste del gris oscuro sobre blanco es muy agradable a la lectura y debe serlo en un sitio en donde la discusión es la base de su existencia.

Coherencia visual entre “homepage” e interiores:
El homepage y los interiores son básicamente lo mismo. Los significados se mantienen gracias a que la estructura visual es similar en cada página, excepto por los elementos que componen el tema seleccionado. Sin embargo, el sitio es coherente pues alberga relativamente poca información en un formato común y repetitivo.

Sitio Web 8
Dagoba Organic Chocolate


CONTENIDOS
Coherencia en la rotulación:
Este sitio tiene la particularidad de que sus rótulos son algo “poéticos” en el espíritu de la marca. Por ejemplo, el enlace “Nuestra Historia” lleva a un texto titulado “La Historia del Arte de la Alquimia en Chocolate”.

La coherencia aquí se da licencias pues los textos no son de importancia vital, y tampoco están describiendo un producto específico. Más bien, buscan crear en el consumidor una imagen distinta dentro de los productores de chocolates, con textos que apelan a una sensibilidad especial y a la preferencia por lo orgánico y lo sustentable.

Lógica en la navegación:
La navegación se simplifica gracias a que el menú superior tiene un “sub” menú que aparece cuando el cursor se posiciona sobre los distintos enlaces. Además, existe un menú a pie de página y uno que aparece en las distintas páginas del sitio dependiendo de su contenido.

Como los contenidos son reducidos, la disposición de elementos en cada una de las páginas permite accederlos desde cualquier lugar en el sitio. En todo momento, los enlaces que hay alrededor funcionan y se mantienen, por lo que no es difícil “regresar” a un punto, a pesar de no existir ayudas visuales.

Además, las páginas que contienen texto poseen enlaces a otras áreas del sitio, logrando que los distintos contenidos interactúen y se complementen entre sí.

Consistencia de los contenidos:
Como el sitio no maneja una gran cantidad de información, sus contenidos son en general consistentes, aunque a momentos no se encuentre exactamente lo que se busca debido a la característica metafórica de los rótulos.

GRAFICA
Estructura visual que facilita la navegación:
Este sitio tiene una estructura común a todas las páginas que permite que el usuario navegue hacia las distintas áreas desde cualquier lugar del sitio. Esto se debe a que los enlaces no varían demasiado, y a que la información no alcanza niveles profundos (por lo tanto no hay necesidad de breadcrumbs o de otra ayuda visual que indique a qué nivel me encuentro).

Los enlaces dentro del texto aparecen en un color distinto, y en el caso de la tienda online, los distintos productos aparecen ordenados por categorías. También se introduce una línea de breadcrumbs que le permite al usuario saber bajo qué categoría se encuentra cada ítem seleccionado.

Contraste / Matiz:
Los matices utilizados son coherentes con el estilo del sitio y también con los principios que predica esta empresa. También tiene que ver con el producto.

El contraste es bueno para la lectura, aunque no así la selección de tipografía, que a ese tamaño a veces tiene demasiado detalle como para permitir una lectura relajada. Tampoco se hace uso de textos destacados o mejor jerarquizados en las páginas en donde hay mucho texto, y esto es importante sobre todo para la web, que no es un medio necesariamente cómodo para la lectura prolongada.

Coherencia visual entre “homepage” e interiores:
En ocasiones los interiores del sitio no son coherentes, tanto en la elección de estilos de texto como en la apariencia de elementos que son partes del diseño. Dos ejemplos:

Primero, el menú que aparece en la parte inferior de las páginas no es consistente entre página y página, y sólo en una pasada pueden observarse tres menús distintos, que no presentan un cambio lo suficientemente notable como para percibirse como intencionales o funcionales.

Segundo, el menú de la izquierda en las distintas páginas tiene distintos formatos; el menú de la tienda online tiene ribetes rústicos, y el menú de “Nuestra Historia”, ribetes sólidos y delgados y un tratamiento tipográfico que no tiene nada que ver con el otro menú.

Sitio Web 9
Jessica Claire Photographer


El sitio/blog de Jessica Claire es distinto a todos los demás sitios porque se trata de un sitio de fotografía, en donde gigantescas fotos se toman la pantalla completa y se intercalan con textos cortos escritos por la fotógrafa.

CONTENIDOS
Coherencia en la rotulación:
Los rótulos en este sitio sirven para categorizar y ordenar un gran número de posteos que principalmente tienen que ver con matrimonios, fiestas de compromiso u otros eventos “de alto glamour”. Los títulos no siempre son literales, sino que tienen que ver con la experiencia personal de la fotógrafa y de los clientes. Los enlaces, como también sucedía en el otro blog analizado, generalmente envían al usuario fuera del sitio, o a otra ventana.

En general, los rótulos utilizados son coherentes en cuanto sirven a la organización de contenidos.

Lógica en la navegación:
La navegación en este sitio, a no ser que uno sea cliente y busque sus propias fotos, obedece a la tentación por el “eye candy” que se ofrece. Hay enlaces que saltan a la vista entre todo el gris del texto, y son estos los que invitan a navegar sin rumbo por esta especie de confitería de fotografía digital.

El sitio también contiene un número de galerías estáticas, que se abren en nuevas ventanas, y como todo blog, la idea es compartir el mayor número de información y seguir navegando, por lo que los enlaces también envían al usuario fuera del sitio.

Sí sucede que al abrir links siempre se abren nuevas ventanas, quizás un intento por evitar que un usuario que ha encontrado algo que le guste, lo pierda de vista en su navegación. De esta manera, todas las páginas que se visitan dentro del sitio quedan abiertas una debajo de la otra.

Consistencia de los contenidos:
En el caso de las fotografías la consistencia es importante, ya que los textos las acompañan y por lo tanto no puede haber descripciones equivocadas. El gran número de visitas que tiene este sitio ayuda en el sentido de que un error puede detectarse en pocas horas, o incluso minutos.

GRAFICA
Estructura visual que facilita la navegación:
La inmensa mayorìa de sitios de fotografìa cargan las fotos una por una. Esto es efectivo pero no excelente, ya que es necesario esperar que cada foto cargue y luego pasar a la siguiente. En este sentido cargarlas todas en una larga página permite que con la barra de scroll el usuario revise las distintas imágenes, sin esperar entre una y otra.

Este sitio facilita la navegación si se considera que es una “vitrina” en donde no hay un rumbo predeterminado. Todo depende del interés del visitante, aunque sea necesario volver hasta el tope de la página para volver a usar el menú.

Contraste / Matiz:
El protagonismo se lo llevan las fotos, de todas maneras. El contraste de los textos es cómodo para la lectura, y el hecho de que los párrafos sean cortos la vuelve aún más agradable.

Coherencia visual entre “homepage” e interiores:
Se mantiene una paleta de colores, un fondo con una gráfica compleja, y elementos decorativos que se repiten para unir distintas partes del sitio. Las páginas del blog todas comparten un mismo formato, pero por ejemplo, las galerías también presentan detalles en verde y blanco.

Sitio Web 10
B & H Photo Super Store

CONTENIDOS
Coherencia en la rotulación:
La clave de este sitio es la precisión de los rótulos. Cada uno de los productos (más de 198.000!) están rotulados de manera de facilitar la búsqueda y el “vitrineo”, es decir, cada producto tiene una serie de categorías (tipo de producto, marca, precio, especificaciones técnicas, etc) que van desde las más generales hasta las más específicas.

Las categorías más generales son 15, y de éstas depende que el usuario pueda encontrar lo que busca. Luego en el menú superior de la página principal aparecen otras 16 categorías generales, algunas de las cuales coinciden con las 15 principales y otras que no. Se le da más visibilidad (por medio de fotografías-íconos) a las que con mayor frecuencia se accede.

Lógica en la navegación:
Depende principalmente de cuánta información tenga el usuario de lo que está buscando. Para el “vitrineo”, el sitio provee una serie de filtros, que fácilmente se seleccionan y quitan dependiendo de los resultados que se requieran. Además, para la lista de resultados, se dan opciones de ordenamiento, por ejemplo, del precio más alto al más bajo, o al revés.

El menú superior de 16 opciones siempre se mantiene visible, además de una línea de breadcrumbs que, en este caso, funciona a la perfección y además de ser una ayuda visual, permite la navegación.

Consistencia de los contenidos:
En un sitio como este los contenidos son altamente consistentes, porque tal como sucede en el sitio de Barnes and Noble, la información es utilizada por otros sistemas (humanos y automatizados) una vez que la compra ha sido realizada. Es interesante cómo aquí también entra en juego el prestigio de un negocio internacional, que no puede permitirse errores de ningún tipo.

La consistencia de los contenidos se basa en un constante feedback con los clientes, además de actualizaciones sucesivas y un servicio de primera calidad.
(Nota personal: He enviado consultas sobre productos a B&H, incluso sin saber qué era lo que buscaba, y su servicio es tan eficiente como el servicio en la misma tienda. Incluso tienen un chat online durante las horas de operación.)

GRAFICA
Estructura visual que facilita la navegación:
Definitivamente la tiene. Cada categoría principal tiene una página de subcategorías desde las cuales se puede acceder a listas ordenadas, A éstas listas se les pueden aplicar filtros (marca, precio, tamaño, capacidad, etc).

Luego, cuando uno accede directamente a las características técnicas de un producto, hay fotos, enlaces a accesorios, calculadoras que permiten hacer conversiones (para clientes internacionales o para comparar modelos u otros), y una serie de ayudas que le permiten al usuario encontrar exactamente lo que buscaba.

La información del producto aparece ordenada como un fichero, el cual a su vez tiene enlaces a los diferentes accesorios que se ofrecen. Por supuesto, el sitio provee dos sistemas de almacenamiento que permiten volver a revisar los ítemes seleccionados: uno es el carrito de compras, y otro es el “wishlist”, que se puede guardar si uno tiene una cuenta, e incluso puede ser revisado por terceras personas.

Contraste / Matiz:
Tiene contrastes suaves para los textos extensos, permitiendo una lectura descansada y agradable. Los links varían entre rojos oscuros, verdes y grises sobre fondos blancos, que son consistentes con los colores corporativos de la super tienda.

Coherencia visual entre “homepage” e interiores:
Gracias a una paleta de colores común, tipografías limpias y con suficiente interlineado, tablas claras con bordes finos y cabeceras redondeadas, etc., este sitio es coherente por donde se lo mire.

La simpleza es clave. Un conjunto pequeño de elementos que se repiten en distintas configuraciones, creando una unidad por el sólo hecho de no introducir elementos extraños donde no corresponde.

y eso po.

(conclusión infartante para final de disertación)

Leer más

Segundo Encargo: Tipos Latinos 2008

El segundo encargo consistió en crear un sistema de difusión para la Tercera Bienal de Tipografía Latinoamericana "Tipos Latinos 2008", y en hacer un boceto para luego traspasarlo a CSS.

Ja, yo hice mi boceto en una hojita suelta por ahí. Todo mal. Pero me encontré con una frase de Rubén Fontana que me hizo acordarme de mis profesores de taller de la Valpo...

"VEMOS LO QUE SABEMOS"

Quizás si me propongo observar la web como observaba las raíces de los árboles allá por el 2005 logre tomarle tanto cariño como le tomé al dibujo. Ya veremos.

Leer más

Primer Encargo: Buena Memoria - Mala Memoria

Nuestro primer encargo consistió en tomar el libro "Rostros y Rastros" del fotógrafo y diseñador Antonio Larrea, y recopilar textos para posteriormente crear un documento hipervinculado que abordara el tema desde distintas perspectivas (objetivas y subjetivas).

Yo, que me encontraba a muchos kilómetros de distancia de Valparaíso y de Chile, no encontré el momento de completar el encargo, y pensé que ya tendría un minuto para adentrarme más en el tema... craso error. Sin embargo me quedé con gusto a poco y eso es bueno.

Me pasó como al Mati, que dijo que en su casa no se hablaba de esas cosas. Con un papá de un lado y una mamá del otro, yo no supe nada de nada hasta que me encontré con una compañera que era de lo más socialista y que trató de reeducarme... pero igual no entendí na. De hecho, no entendí na hasta que tuve que entender algo porque se me ocurrió inscribirme en el Registro Electoral.

Pero el tema no era la política. Para mí el tema era la música y las fotos. Increíble colección de fotos que, ciertamente, se han atribuído a nadie durante demasiado tiempo. Fui donde mi papá y le tiré nombre por nombre pa ver si se acordaba de algo y su cara se transformó en una máquina del tiempo. Creo haber visto sólo la punta del iceberg.

Menos mal que aún hay tiempo de recuperar la memoria.

Leer más

Algo, en alguna parte, salió terriblemente mal... o no?

La clase del viernes me hizo pensar muchas cosas. Aquí estoy frente al computador, como el señor de la foto, aunque mucho más abrigada. Y pienso que realmente algo salió mal... Pienso que muchas de nuestras actividades cotidianas nos están alejando cada vez más de nuestra verdadera naturaleza humana. 

Cada vez el mundo es más rápido, cada vez hay más información, y parece que la carrera por tener más tiempo está logrando todo lo contrario. Me siento algo atrapada y sobrepasada.

Paren el mundo que me quiero bajar.  

Leer más

Érase una vez...

Mi Blog.

Mi Blog navegaba la web desde el 2005 en una barquita verde, con sólo un pasajero. Y se llamaba igual que éste, pero tenía otra dirección.

Entonces lo perdí. Nadie lo había visto y no tenía como contactarlo. Lo busqué durante horas hasta que dí con él, pero estaba tan viejito que decidí eliminarlo (qué cruel). Sólo bastó un click.

Y en su memoria hice este Nuevo Blog, que se llama igual, pero tiene otra dirección.

Ojalá seamos felices... por todo este semestre.

Fin.

Leer más