VISUALIZACIÓN DE INFORMACIÓN

(NIVEL DE SATISFACCIÓN)

Brief:

¿Cómo definir el nivel de satisfacción de lo hecho durante la carrera de diseño gráfico en el tiempo que se ha cursado?. ¿Está relacionado con las expectativas, los objetivos alcanzados, las calificaciones, el esfuerzo, lo aprendido, lo sufrido, los proyectos, el crecimiento personal y académico, las materias, el proyecto de vida como diseñador…?

Objetivos:

• Mediante una metáfora visual, articular visualmente el concepto definido para Nivel de Satisfacción, junto con la información correspondiente al pensum de la carrera.
• Utilizar las herramientas aprendidas en clase (teoría de sistemas, tipografía como señal, diseño de pictogramas, gráfica instruccional, visualización de información)

¿Qué deben hacer? / *trabajo individual

• Definir su propio concepto de Nivel de Satisfacción académico.
• Escoger una metáfora visual que sirva de recurso narrativo para explicar ese Nivel de Satisfacción.
• Articular los dos puntos anteriores teniendo como insumo principal la información correspondiente al pensum de la carrera y respetar su estructura (fundamentaciones, materias, créditos, horas cursadas).
• Presentar una visualización de esa información. La técnica de elaboración –no de presentación es libre (impreso, digital, video, etc).

Fases del trabajo

• Fase 1 / Sábado 20
- Pautas del trabajo, envío del brief por mail.

• Fase 2 / Lunes 22 de marzo (festivo)
- Primer avance. Enviar por mail su definición de NS y posibles analogías.
El mail deben enviarlo antes del medio día a roxana@mottif.com con copia a roxana6@hotmail.com de la siguiente manera:

-       No va como archivo adjunto sino como texto dentro del mail para poder responderles ahí mismo

-       El subject debe tener el nombre de cada uno/una + 01_descripción. Ej: Pedro Villegas + 01_descripción

• Fase 3 / Miércoles 24 de marzo
- Segundo avance para la clase:

- Esquema a mano o digital que de cuenta de la información que van a utiizar (datos del pensum, notas, créditos, etc)

- Lluvia de ideas y bocetos de la manera en que piensan trabajar la metáfora visual que permita aproximarse a su concepto de Nivel de satisfacción. Ej: alguien siente que su nivel de satisfacción se relaciona con un viaje intergaláctico en el que se viaja para conocer mundos distintos. Un sistema solar en el que las galaxias representan las funadamentaciones de la carrera y planetas que equivalen a ,aterías, años luz que suponen las horas de trabajo en cada materia, densidad del planeta que equivale a créditos, etc…

• Fase 4 / Viernes 26 de marzo
- Tercer avance para clase

- Esquema general (mapa conceptual/gráficos) para mostrar la manera en que van a trabajar la información, la manera en que piensan articularla

• Fase 5 / Lunes 5 de abril
- cuarto avance para clase

- Prototipo en el que se vean la información articulada y posibilidades para definir el tipo de gráfica y lenguaje que se va a utilizar, teniendo en cuenta la metáfora visual escogida.

• Fase 6 / miércoles 7 o viernes 9 de abril

- PreEntrega.

NOTA. ESTA FECHA DE PREENTREGA, AL IGUAL QUE LA ENTREGA O FECHAS ADICIONALES DE CORRECCIÓN VIA MAIL LAS ORGANIZAMOS AL REGRESO DE SEMANA SANTA

Parámetros a evaluar

- Coherencia y articulación entre la definición de NS, analogía, pensum.
- Creatividad en la propuesta.
- Calidad en el manejo de recursos gráficos y conceptos estudiados.
- Formalización, recorridos de lectura, formato de presentación.
- Presentación.

¿Cómo definir el nivel de satisfacción de lo hecho durante la carrera de diseño gráfico en el tiempo que se ha cursado?. ¿Está relacionado con las expectativas, los objetivos alcanzados, las calificaciones, el esfuerzo, lo aprendido, lo sufrido, los proyectos, el crecimiento personal y académico, las materias, el proyecto de vida como diseñador…?

Objetivos:

•    Mediante una analogía, articular visualmente el concepto definido para Nivel de Satisfacción, junto con la información correspondiente al pensum de la carrera.

•    Utilizar las herramientas aprendidas en clase (teoría de sistemas, tipografía como señal, diseño de pictogramas, gráfica instruccional, visualización de información)

¿Qué deben hacer? / *trabajo individual

•    Definir su propio concepto de Nivel de Satisfacción académico.

•    Escoger una analogía que sirva de recurso narrativo para explicar ese Nivel de Satisfacción.

•    Articular los dos puntos anteriores teniendo como insumo principal la información correspondiente al pensum de la carrera y respetar su estructura (fundamentaciones, materias, créditos, horas cursadas).

•    Presentar una visualización de esa información. La técnica de elaboración –no de presentación es libre (impreso, digital, video, etc).

Fases del trabajo

• Fase 1 /  fechas por definir

- Pautas del trabajo.

• Fase 2 /  fechas por definir

- Primer avance. Presentar impresa su definición de NS y posibles analogías.

• Fase 3 /  fechas por definir

- Segundo avance. Bocetos digitales del esquema general para articular la información y posibilidades para definir el tipo de gráfica y lenguaje que se va a utilizar, teniendo en cuenta la analogía escogida.

• Fase 4 /  fechas por definir

- Tercer avance. Bocetos en papel. Primera articulación de la información.

• Fase 5 /  fechas por definir

- Preentrega.

• Fase 6 /  fechas por definir

- Entrega.

Parámetros a evaluar

- Coherencia y articulación entre la definición de NS, analogía, pensum.

- Creatividad en la propuesta.

- Calidad en el manejo de recursos gráficos y conceptos estudiados.

- Formalización, recorridos de lectura, formato de presentación.

- Presentación.

MAPAS TURÍSTICOS DE CUIDADES
www.redmaps.com
Non For Tourists Guide
London AZ
Mapa de Bogota

MIND THE GAPS

CURATING THE CITY:
Mapa Virtual, la cuidad hecha Museo

DE OTROS MAPAS
Time Travel Tube Map
Mapas de la memoria
Mapa literario de NY
Folksongs
Soundseeker

VIDEOS

What is information?

A Communications primer: a film by Eames (1953).

LINKS RELACIONADOS

Diseño de Información:
Blog de infografía.

Information Design:
Articulos en diseño de información.

Infosthetics:
“this weblog explores the symbiotic relationship between creative design and the field of information visualization.”

Stamen:
Estudio de diseño especializado en diseño interactivo.

Visualization and infographics:
Del blog Designing the news.

Infographic News:
Infografía y actualidad.

Noticias Infográficas:
El mismo blog de infographic news pero en español.

Density Design Lab:
Blog acerca del diseño de comunicación y su complejidad.

We feel fine:
Proyecto de Jonathan Harris and Sep Kamvar, una exploración de las sensaciones humanas.

Universe:
Otro proyecto de Jonathan Harris elaborado en Processing.

Twistori:
Proyecto inspirado en wefeelfine y basado en twitter.

Visual Complexity:
Varios proyectos relacionados con visualización.

Moodstream Getty Images:
Moods creados a partir de las fotografías de Getty.

Santiago Ortiz:
Portafolio en linea del un matemático y programador colombiano.

Visualizador de noticias ESPECTRA:
Las noticias vistas de otra manera.

Fluid Dynamic Media Design:
La página de los creadores de ESPECTRA, tienen otros proyectos.

They Rule:
“They Rule allows you to create maps of the interlocking directories of the top companies in the US in 2004.” ( Relaciones entre los grandes empresarios de los Estados Unidos).

INSTRUCCIÓN:
1. f. Acción de instruir.
2. f. Caudal de conocimientos adquiridos.
3. f. Curso que sigue un proceso o expediente que se está formando o instruyendo.
4. f. Conjunto de reglas o advertencias para algún fin. U. m. en pl.
5. f. Inform. Expresión formada por números y letras que indica, en una computadora, la operación que debe realizar y los datos correspondientes.
6. f. pl. Órdenes que se dictan a los agentes diplomáticos o a los jefes de fuerzas navales.

 ¿Por qué necesitamos instrucciones?

1. Necesitamos ayuda para saber qué hacer en caso de…

2. Para no perder ni hacer perder el tiempo

3. Debido a la dificultad de manejo que presentan los productos que usamos a diario

4. Por el diseño deficiente de interfaces que hacen parecer que los objetos son fáciles de usar /Menos botones y más prestaciones / La dificultad se oculta.

Links Relacionados:

Secret Websites, Coded Messages: The New World of Immersive Games:
¿Cómo se pueden utilizar las instrucciones en juegos o publicidad?

Red Issue:
¿Cómo se puede modificar la manera como una página web es visualizada y explorada?
Red Issue – Womens Clothing. Possible gestures. Explore. Learn. Enjoy.

Ikea:
las instrucciones para armar estantes, silla, armario.

Video:

Royksopp – Remind me: Video de la banda noruega,

Links relacionados:

Wireframes:
Arquitectura de Información.

The Grid System:
“ The grid system is an aid, not a guarantee.
It permits a number of possible uses and each
designer can look for a solution appropriate to his
personal style. But one must learn how to use the
grid.”

Zoom
Picture Book by Istvan Banyai:
Ejemplo que ilustra como el TODO de un sistema es relativo al punto de vista.

I LEGO N.Y.:
Abstract city por Christoph Niemann.

Videos:

The powers of 10: Video de Charles and Ray Eames.
Ejemplo que ilustra como el TODO de un sistema es relativo al punto de vista.

Instalación de Janet Cardiff & George Bures Miller: The Forty-Part Motet.
La música como una composición de subsistemas que terminan conformando un todo, melódico.

Philip Glass: Einstein on the beach.

EL SIGNO
[ presentación en clase ]

Links Relacionados:

Touch and Go:
Animación pictográfica acerca de varios lugares en un aeropuerto.

RAPP Branding:
Página de la empresa, ver el video donde muestran qué hacen.

Videos:

History of Internet: Video realizando con Pictogramas (ver en pantalla completa).

Qué es “lo bogotano”. De qué manera podemos representarlo. Cómo podemos comunicar esos rasgos de “lo bogotano” a través de una serie de elementos pictográficos

Objetivos:

- Definir rasgos que hablen de “lo bogotano”. Ej: tomar onces, vivir abrigados, ser serios, etc. O escoger un aspecto de “lo bogotano” que pueda ser visto a través de distintos momentos. Ej: lugares turísticos: Monserrate, Museo del Oro, Maloka, etc…
- Concretar lo particular de esos aspectos y traducirlos en imagen.
- Modificar el sentido de un sistema pictográfico ya existente (AIGA), para poder comunicar “lo bogotano”

¿Qué deben hacer? / *trabajo en grupo

* · Definir el aspecto y los 6 momentos o  rasgos a partir de la pregunta ¿qué es lo bogotano?
* · A partir de un proceso de abstracción, partir de imágenes complejas y realistas, a la síntesis pictográfica
* · Tomar como modelo el sistema pictográfico de la AIGA, y haciendo modificaciones que no alteren la estructura original, adaptar a este sistema esos rasgos de “lo bogotano”, guardando unidad entre los 6 nuevos pictogramas.

**si trabajan:
en parejas: se hacen 6 pictogramas
grupo de 3 personas: se hacen 6 pictogramas
grupo es de 4 personas: se hacen 8 pictogramas

Fases del trabajo
• Fase 1 / V4 de febrero
- Presentación del brief

• Fase 2 / L7 de febrero
- Presentar por escrito, impreso, un texto que defina el tema a trabajar. El aspecto y sus 6/8 momentos o los 6/8 rasgos de “lo bogotano”.
- presentar imágenes que sirvan de base para llegar a la síntesis. Ej. fotografías.

• Fase 2 /Mc9 de febrero
- Primer avance. Presentar bocetos de los pictogramas.
- Presentar ideas de posible aplicación (ideas para usar en el manual de instrucciones).

• Fase 3 / V11 de febrero
- Segundo avance. Presentar pictogramas ajustados según las sugerencias de la clase anterior. Entregar impreso en papel bond. Tamaño 8×8, impresión económica.
- Aplicación en color (criterios de uso)

• Fase 4 / Mc 16 de febrero
- Entrega del sistema en formato tabloide:
1. versión blanco y negro / con el título del tema, grupo de trabajo y  los 6/8 pictogramas de 8×8 cada uno.
2. las mismas características pero versión en color
3. bitácora digital que evidencie el proceso.

Parámetros a evaluar

- Propuesta de concepto y desarrollo del mismo
- Manejo de recursos gráficos y conceptos estudiados.
- Creatividad de la propuesta y adaptación del sistema AIGA
- Solución y aportes en la aplicación del nuevo sistema de pictogramas.

www.albertocairo.com

http://www.informationdesign.org/

CASOS DE ESTUDIO, REDIRECCIONAN A OTROS PROYECTOS, ARTÍCULOS: REDISEÑO NEWYORKTIMES, DISEÑO INSTRUCCIONAL, DISEÑO INTERACTIVO, USABILIDAD, EXPERIENCIA DEL USUARIO, INFOGRAFÍA, ARQUITECTURA DE INFORMACIÓN

http://niceone.org/infodesign/

CASOS DE ESTUDIO DISEÑO DE INFORMACIÓN, GRÁFICOS ESTADÍSTICOS

http://www.infosthetics.com/

ANIMACIONES, VISUALIZACIÓN DE INFORMACIÓN, DATOS, EN COLABORACIÓN CON NIGEL HOLMES

http://www.visualcomplexity.com/vc/

CASOS DE ESTUDIO, VISUALIZACIÓN DE INFORMACIÓN, GRÁFICOS, ESQUEMAS, MAPAS MENTALES, INTERACTIVOS, MAPAS

http://www.smashingmagazine.com/2007/08/02/data-visualization-modern-approaches/

VISUALIZACIÓN DE DATOS, MAPAS DE PERCEPCIÓN

http://stamen.com/

http://www.tfl.gov.uk/gettingaround/1106.aspx

http://www.worldmapper.org/