el “disiosho” po

esto es… no muy completo.

Pdf Maquetacion Ambiental

pincha para ver tamaño completo

Bueno este es el BluePrint, Wireframes y Mockups del sitio Caja de Cartón.

Wireframe Contenido

Mockup Inicio

Puedes verlo Aqui

Saludos

Análisis referencial sobre sitios Web con una perspectiva Gráfica 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 permite 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.

Version On-Line

1.- 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.

Aspectos de navegación:

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 pre asumida por lo que no es preciso entenderlas, están, por así decirlo, en el inconciente colectivo.

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.

Consistencia de Contenidos: como es un servicio de correo Web los contenidos 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 transferencia son mails), lo interesante de esto es como se manejan dichos contenidos e interactúan con la interfaz de herramientas, por otra parte los contenidos del sitio tienen relación a la documentación de este y a las utilidades que presta, logrando un nivel de coherencia, digamos, perfecta.

Aspectos gráficos:

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

Visual: los aspectos visuales de Gmail 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:

Al ser “Arial” la tipografía utilizada los problemas de lectura se manifiestan en la poca diferenciación de ciertos caracteres como la “r+n” que pueden confundirse (en cuerpos pequeños) con una “m”, la similitud de caja entre la “i” mayúscula con la “l” minúscula, entre otras cosas (ya conocidas de “Arial”).

Coherencia Visual: la coherencia visual entre el home y el interior se mantiene a través de la paleta cromática, tipografía y diagramación, no así, con la estructura, aunque esto no considerado una falencia debido a que, el vinculo visual entre ambas paginas es evidente y esta diferencia de estructura responde mas bien a una solución visual a favor de los contenidos.

_____________________________________________________________________

2.- 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.

Aspectos de navegación:

Rotulación: el rotulado del sitio es sumamente simple mezclando metáforas con textos referenciales, alude a la documentación del sitio y a los contenidos.

Navegación: gracias a la rotulación que posee el sitio, el sistema de 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 hipervínculo, el acceso a los contenidos textuales es también rápido.

Consistencia de Contenidos: el sitio posee una concepción clara y un enfoque de contenidos claros, todo lo que en el sitio se muestra tiene relación directa con estos, así no encontramos ni publicidad ni contenidos fuera de contexto.

Aspectos gráficos:

Estructura: la estructura grafica de DEm mantiene un orden visual modulado de modo tal que se leen a primera vista dos columnas subdivididas en contenidos diversos, todos relacionados entre si, tiene una lectura inicial horizontal y a medida que se interioriza en los contenidos se vuelve vertical.

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 contribuye en no entorpecer lo que los usuarios muestran, así no quitan protagonismo y se hace de una manera estructurada (talvez demasiado), la paleta cromática es reducida y con una temperatura mas bien calida pero no saturada lo que la hace agradable a la vista.

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

_____________________________________________________________________

3.- 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.

Aspectos de navegació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.

Navegación: esta misma estructura de rótulos es parte de la navegación 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 particular, como también, si se busca algo no concreto, por ejemplo en una investigación donde la posibilidad de encontrar nuevo material es siempre importante.

Consistencia de Contenidos: memoria chilena posee una increíble cantidad de contenidos que están muy bien estructurados y modulados como también vinculados, por ejemplo si me encuentro dentro del modulo “música” y encuentro un autor y lo sigo biográficamente terminare navegando dentro 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 que este enlace entre módulos-documentos favorece al enriquecimiento de los contenidos.

Aspectos gráficos:

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 relación con la programación del sitio.

Visual: Memoria Chilena sigue un patrón modular, en términos visuales, ya que la paleta cromática varia según el modulo de contenidos, esto es 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 desde una perspectiva cromática o visual, tomando en cuenta el diverso universo de usuarios.

En un aspecto de lectura, que es para lo que fue creado el sitio, cumple con los aspectos técnicos para facilitarla, así nos encontramos con tipografías de cómoda legibilidad y colores con baja saturación (en los textos).

Coherencia Visual: el sitio tiene una línea grafica que pretende mantener 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 problema ya mencionado.

_____________________________________________________________________

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

Aspectos de navegación:

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”.

Navegación: sigue el mismo patrón que un blog, incluso talvez más sencillo aun, un enlace te lleva al contenido y luego de vuelta, es un sistema lineal y se genera mayor tráfico al desplazarse a través de los usuarios.

Consistencia de Contenidos: el contenido de Taringa! Es sumamente diverso y no responde a un tema determinado, hay de lo que se te ocurra (y mas) muy común en este tipo de sitios, el concepto es compartir, lo que sea.

Aspectos gráficos:

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 columna de contenidos y otra de perfil de usuario.

Visual: la grafica del sitio es muy simple por no decir fome y no representa nada novedoso, la paleta es pobre (2 colores), en resumen tiene una apariencia sumamente sencilla, en términos de legibilidad hay ciertas falencias que tienen que ver con cuerpos demasiado pequeños para la lectura en pantalla (como por ejemplo en el home).

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.

_____________________________________________________________________

5.- Wikipedia: Wikipedia es una enciclopedia libre, es decir, cualquier usuario puede incluir contenido o modificar parte del que ya existe en línea.

Aspectos de navegación:

Rotulación: como sucede con Memoria Chilena, los rótulos de Wikipedia son de un carácter formal ya que los contenidos así lo ameritan obviando metáforas comúnmente usadas, incluso no hay “home” o “inicio” sino “portada”.

Navegación: la navegación de Wikipedia sigue un patrón de “interiorización” de los contenidos ya que su estructura permite que el usuario vaya desde una idea general de contenido a uno particular y viceversa, el sistema se basa una vinculación de documentos sumamente compleja pero eficiente.

Consistencia de Contenidos: la consistencia de los contenidos se aferra a la palabra “enciclopedia” siendo este el vínculo que existe para la cantidad de temas que abarcan.

Aspectos gráficos:

Estructura: el diseño del sitio es más bien plano, proyectada a los contenidos, nuevamente nos encontramos con una estructura rígida con un bloque de texto enorme y una diagramación pobre con una sola columna.

Visual: los aspectos visuales responden a una lectura adecuada en pantalla en términos tipográficos y cromáticos pero la caja de texto es tan ancha que el lector se cansara de leer tempranamente sobre todo en textos extensos, en cuanto a las imágenes, la mayoría de los documentos tienen bastante pocas aunque con enlaces externos para acceder a contenido multimedia.

Coherencia Visual: el sitio mantiene un diseño monótono que da la idea 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 y excelente contenido.

_____________________________________________________________________

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

Aspectos de navegación:

Rotulación: el rotulado del sitio deja bastante que desear, primero por que no tiene unidad conceptual y segundo por que las metáforas son incongruentes, así nos encontramos con botes como “Fono Niños” o “Carabineros en Cifras”, incomprensible.

Navegación: primero nos encontramos con un home sumamente desordenado y sin jerarquía, no existe un menú principal.

Segundo: existen enlaces que despliegan la información con destino blank y otros en top, lo que puede hacer pensar al usuario que entra y sale del 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.

Aspectos gráficos:

Estructura: sigue un sistema (antisistema) que podría señalarse como “teoría del caos”.

No hay estructura.

Visual: verde, mucho verde, para luego llegar a azules, blancos etc. Para que hablar de tipografía, son utilizadas un cuanto hay de familias tipográficas.

Coherencia Visual: ausente.

P.D. existe carabineros tv. (No hablare del tema).

_____________________________________________________________________

7.-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.

Aspectos de navegación:

Rotulación: el rotulado del sitio es de corte referencial, muy preciso a lo que conlleva manteniendo relación con el contenido de una manera optima, mantiene un código o lenguaje formal.

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 temas genéricos lo que propicia una navegación ordenada y guiada durante todo el proceso.

Consistencia de Contenidos: los contenidos son propios del área a la que se dirige el sitio y no se encuentran temas que difieran de el, los artículos son 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.

Aspectos gráficos:

Estructura: contempla una estructura típica de blog (de echo lo es) apareciendo un head, una columna izquierda con menú y aplicaciones varias y una central con contenidos, subdividiéndose en la visualización de artículos y volviendo a ser una cuando se entra en un post.

Visual: la grafica del sitio no posee elementos novedosos pero cumple con legibilidad y temperatura para facilitar su lectura, utiliza cuerpos de texto aceptables.

Coherencia Visual: los elementos que interactúan con el contenido y el contenido mismo son coherentes con el contexto.

_____________________________________________________________________

8.-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.

Aspectos de navegación:

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.

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.

Consistencia de Contenidos: como era de esperarse los contenidos del sitio son sumamente consistentes y mantienen una línea editorial constante, no aparecen contenidos fuera de foco y están sumamente bien catalogados y ordenados en un sistema de archivos.

Aspectos gráficos:

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 mantener una diagramación única.

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 mantienen una estrecha relación entre si.

_____________________________________________________________________

9.- Diseño Shakespear: portafolio y/o catalogo del estudio de diseño de Ronald Shakespear.

Aspectos de navegación:

Rotulación: el rotulado sigue un patrón de lenguaje formal y enfocado de manera tal que funciona como un catalogo de proyectos, nos encontramos con palabras como ”packaging” para especificar un área del trabajo del equipo.

Navegación: la navegación del sitio genera una idea de linealidad ya que posee un control que te desplaza de “adelante” hacia “atrás”. Esto permite ver el contenido como si hojeáramos una revista, además posee un menú que acompaña al usuario durante toda la visita lo que hace que esta navegación lineal sea justificada y práctica.

Consistencia de Contenidos: la consistencia de los contenidos es evidente ya que se trata de una muestra de trabajos, es un portafolio con apariencia de galería.

Aspectos gráficos:

Estructura: la estructura del sitio es similar a la de una galería fotográfica en línea existiendo básicamente dos áreas de contenidos, menú y fotografías.

Visual: es difícil establecer un criterio visual ya que prácticamente el sitio esta construido en base a fotografías y los pocos contenidos textuales están supeditados a estas, pero lo poco que se puede analizar en relación a cromatismos, es la idea de mantener la atención en el contenido fotográfico destacándose las transparencias y grises como una manera de neutralizar 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 (para así volver rápidamente a la fotografía).

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 como referencia.

_____________________________________________________________________

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

Aspectos de navegación:

Rotulación: el rotulado del sitio mantiene un lenguaje formal y preciso para los contenidos a los cuales hace referencia.

Navegación: el sitio posee un menú desplegable donde rotula los contenidos ordenadamente, lo que permite al usuario moverse libremente a través del sitio, dicho menú esta presente constantemente, pero no existe un sistema de vínculos entre documentos.

Consistencia de Contenidos: los contenidos del sitio están bien estructurados y tienen directa relación con la empresa no existiendo contenidos descontextualizados ni marginados, hay una buena modulación de estos.

Aspectos gráficos:

Estructura: el sitio sigue una estructura tradicional y no representa novedad alguna, posee una diagramación simple, dispuesta en dos columnas una de acceso al cliente y otra de contenidos.

Visual: en términos gráficos, el sitio mantiene cierta estructura rígida con 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 recursos visuales y de formato de texto, las imágenes son pobres y escasas pero tienen cierta relación al contenido que acompañan, hay ciertos problemas de saturación en partes aisladas como por ejemplo tablas con 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.

This is the End.

“Diseño de documento hipervinculado (con enlaces-links) con énfasis en la imagen (lo importante) que aborde el tema con multi-perspectiva (muchas voces) ocupando elementos subjetivos (personales) y objetivos (registro).”

Así explica Jorge el primer encargo del Taller, en el que, como material (contenido), se utiliza el libro de Antonio Larrea, “Rostros & Rastros” específicamente la fotografía.

Este material es recopilado (por el autor) en un periodo histórico de nuestro país, en el que los conflictos sociales estaban en plena efervescencia, por lo que el contenido político es, de cierta forma, inherente a las imágenes y lo que se retrata en ellas, incluso los retratados, ya que el arte, así también los artistas, responden a una suerte de válvula cultural en relación a los conflictos sociales de la época.

Entonces, como presencialmente, soy ajeno a estos hechos, decidí encausar los contenidos de una manera lineal, histórica, cronológica (objetiva) dotándola del factor oral-presencial-vivencial (subjetiva) rescatado de hechos, experiencias, personas, que vivieron directa e indirectamente lo ocurrido, así pues, la mezcla resultante (multi-perspectiva) fue algo así como un “cuento”, un breve relato en el que (desde una visión literaria) se destacan:

“PRINCIPIO“

Tomando el contexto histórico en el que se desarrolla el tema del encargo y lo que finalmente desencadena los sucesos, que las imágenes contienen como mensaje y evidencia, nos encontramos que toda esta “revolución” cultural, artística o como quiera llamarse, tiene directa relación con la problemática social en la que estaba sumergida la población, no solo a una escala local, nacional, sino que también, a un nivel continental y cultural, Latinoamericano, es entonces, sinónimo de unión.
El protagonista: el pobre, el marginal, las minorías étnicas y políticas, “LA MUGRE”

“DESARROLLO“

“La Mugre” lava su cara, se educa y reclama, aparece el arte del pobre, los pobres son mas, es un arte popular. El rescate de tradiciones populares en todos sus aspectos culturales.

Se transforma el contenido artístico en protesta y denuncia, pero también, en la expresión de las clases mas pobres. La cuestión, el objeto, “La Cosa”

“DESENLACE“

El desenlace critico, en consecuencia del actuar popular, de las “nuevas” políticas y opiniones y por sobre todo de las (p)artes involucradas.

Un Golpe de Estado, Muerte, “La Peste”.

Con esta modulación de los contenidos, se genera una unidad conceptual, textual y visual respetando un orden cronológico que vincula secuencíalmente todo una proceso histórico (sin pretender ser un historiador ni mucho menos).

En resumen, lo que se busco, fue una manera de generar un lazo entre la división modular de un contenido a través de un “vinculo conceptual” que permita descubrir cada modulo a través de hipervinculos que ampliaran cada modulo (aunque falto vincular (con hipervinculos)  los módulos entre si).

This is the End.

Aquí les dejo una acercamiento para crear su blog en wordpress, ojala les sea útil pues, al parecer, varios no cacharon como hacerlo, aunque la idea es que exploren el tablero y lo conozcan, ya que después la cosa sera mas seria, la verdad es bastante fácil, aunque pareciera no serlo.

conociendo_wordpress (Pdf 3,48 MB)

A explorar entonces, suerte y animo

Saludos

Como comente en Taller, estube buscando las tipografías que salieron del estudio tipografico (valga la redundancia) de los diseñadores Kote Soto Buzzetti y Tono Rojas Herrera que, en su búsqueda de una identidad letrista, generan un grupo de tipos denominadas “Urbano-Populares” rescatadas de letreros, carteles de las calles, y que luego son reinventadas dando origen a estas, bueno para no extenderme mas les dejo estas joyitas para que las disfruten.

Tipografías Urbano-Populares

saludos

Bueno para empezar les dejo una lista de tags (los mas básicos) con ejemplos de uso para que los que no están familiarizados con este lenguaje vayan comprendiéndolo y así avanzar mas rápido en el taller que quien sabe hasta donde nos llevara.

lista tags basicos (Pdf 484 KB)

Ver On-Line

Saludos

Esto es lo primero, saludos para todos!

Con el deseo de participar en el taller de Jorge y convertir esta experiencia en algo fructífero es que pongo a su disposición los conocimientos que he adquirido durante mi paso por Duoc, ojala ustedes también lo vean así y podamos convertir en escuela a la escuela, se que (a los que conozco) también están con esa disposición.

Good change!