LC 2 2012

De Casiopea

Clase I

Diagramación Digital

Posee varias expresiones:

- Responsive Design (Diseño receptivo y adaptativo)
Diseño adaptable a varias plataformas.

- Mobile First
Se piensa desde el contenido, no del objeto. No es diseñado para el canal sino que debe estar preparado para todo aparato, gadget, etc.


Al diseñar siempre pensar en todos los contenidos, en vez de pensar en el móvil, pensar en el sistema en que el mensaje será enviado. El Diseñador debe desplegar el contenido de forma "espectacular". Se debe evitar diseñar distintas formas para distintos medios sino que Un diseño uniforme para todos los medios.

nota: "A List Apart" un sitio para diseñadores de sitios web.[1]

El Mundo Dividido

Análogo ------ prensa
Mundo predecible en su tiempo, se ve su principio y su fin.

Ej: Un Libro, se ve que comienza desde la página 5 hasta que termina en la página 300.

Mundo Cartesiano, se puede calcular que a mayor peso (cantidad de páginas) mayor tiempo se toma en leerlo.

   +peso = +tiempo

Digital --------- Web ---sitio web----- // -------- Mobile --- smartphone,tablet

No existe límite. No hay relación en la cantidad de páginas y el tiempo que toma llegar al contenido por la existencia de un elemento: el Hipervínculo.

Complejidad del Mundo Digital

Hipervínculo ( la madre de la web)

Los cuerpos gráficos digitales poseen una condición diferente ala de los cuerpos gráficos análogos.

Ej:
1. xxx
1.1 xxx
1.2 xxx
1.3 xxx
2. xxxx
2.1 xxx
2.2 xxx
2.3 xxx
Notación científica. Posee una Taxonomía natural para comprender las cosas. Ayuda a presentar y a organizar los contenidos de forma clara y precisa. Ayudó bastante para la composición y diagramación de la Web

La organización de contenidos comienza con los hombres que maravillados con la Naturaleza comenzaron a clasificar lo que veían. Estos son los Naturalistas que crearon la Taxonomía (Clasificación de los seres vivos).

Folksonomía: Taxonomía propia, cuando ordenamos los contenidos por nosotros mismos y etiquetamos a personas, familiares, etc.


El Lenguaje construye la Realidad

Como diseñadores creamos modos de lenguajes, es decir, realidades. Estas realidades existen, existen en sí mismas, pero le hace falta la interacción de lo otro para que exista en realidad. Si otro no conoce algo entonces para ese otro no existe.

Ej: - Una chica crea un Blog, sin links, sólo ella lo sabe.
-Entonces No existe, pues no está relacionado con otros, no está relacionado con la realidad.
- Se inventa un sólo Fax, sin otro no sirve para nada.


Aquí el blog sólo existe entre ella y un amigo:

Grafica LC2 - 1.jpg


Aquí el blog es compartido a un sitio web mas popular, es relacionado con otro.

Grafica LC2 - 2.jpg

Grafica LC2 - 3.jpg


Aquí el blog es relacionado a otros, por lo tanto vive en cuanto es leído.

Grafica LC2 - 4.jpg


La chica crea aplicaciones para su blog. Produjo un ecosistema tal que lo sostiene.

Grafica LC2 - 5.jpg


¿Para qué diseñamos?... ¿para un diario? , ¿para un IPhone?, ¿un Tablet?, ¿Un sitio web? Diseñamos un puente para que otros se relacionen.

Diagramación

Esquematización racional, Diagramación.

Grafica LC2 - 7.jpg

Grafica LC2 - 6.jpg


Se piensa en la Lógica de Contenidos, luego se piensa en la visualización, la interacción con el lector, la capa emocional.

Responsive Design

Grafica LC2 - 6.jpg

Grafica LC2 - 8.jpg

Grafica LC2 - 9.jpg

Pensamiento del contenido construye el lenguaje, se adelanta en lo que se va a ver primero y más. En cómo los usuarios consumen el contenido y crea el ecosistema de ello teniendo el control.

TAREA

Hacer una pagina de las clases y tareas del curso en un sitio google. Debe tener sección de bitácora y de Tareas, además estar en modo Público.

Link Google Site "C.Fattori". [2]


Clase II

Pre-Prensa Digital

Proceso de edición antes que el trabajo se imprima.
Este proceso existe desde la época de Gutenberg,ahora en la época moderna se le agregó la denominación "Digital".
Este proceso hay que verlo como el trabajo que hay que hacer para reproducir una imagen.


Este proceso se intermedia a tarvés de un software, ya sea InDesign o QuarkXPress.
La diferencia entre ambos software es que QuarkXPress trabaja bien con las tramas y se enfoca en la prensa. InDesign por el contrario trata de trabajar para distintos medios y aplicaciones por lo que en algo debe fallar. Sin Embrago ambos poseen el mismo nivel profesional.


Otra diferencia es el origen innoble de InDesign. Steve Jobs pensó en un programa para su nuevo sistema Macintosh. Piensa en un hardware+software, los piensa unidos, pues si se separa el hardware del software en distintas empresas, se pierde el control de alguno de ellos. Si no se tiene el control de lo que se está trabajando la obra se arruina. Así pide ayuda ala empresa Aldus que tiene como producto de creación de páginas el PageMaker(PM), el cual es ampliamente superado por QuarkXPress de Quark Inc. PM es un producto pensado para hacer Boletines escolares, así como el mal origen de PowerPoint está Prezi que es mejor.


lectura recomendada: Historia InDesign [3], Biografía de Steve Jobs [4]


Pre-prensa Digital convierte los datos en algo imprimible.

Grafica LC2 - 10.jpg


Al crear un archivo InDesign(.Indd), se le importan dos tipos de archivos: Textos (.txt) e Imágenes(Tiff, Jpg,Psd, Png, Eps).
Los textos deben ir al archivo Indd sin formato y las imágenes de una resolución dependiendo del soporte de impresión (revista, diario, folleto, etc).

Antes de crear un archivo Indd se debe realizar una maqueta, hecha a mano,donde se tomarán todas las decisiones de diseño. Es estratégico, de lo contrario se pierde tiempo tomar estas decisiones ante el computador.

Las decisiones de diseño son, por ejemplo, elegir el tipo de tipografía (sin serfi o con serif).
Se ven los estilos de Titulo (ej: S/S, 48 pt, centrado, 60% negro.) y también los estilos de Texto (ej: C/S, 12 pt, Justicado ala Izq., 100 %negro).


Grafica LC2 - 11.jpg


En el InDesign se aplican todas las decisiones tomadas anteriormente en la maqueta.
La Maqueta, que no es mas que el wireframe de lo que vamos a hacer, se pueden tomar entre otras estas decisiones:

- Tamaño de pagina
- margenes
- imágenes
- columnas
- geometria
- estilo de titulos
- estilo de textos
- caja de párrafos
- interlinea
-etc.


Estos archivos se trabajan en el mundo OFFSET | CMYK, donde los archivos digitales son transformados en 4 películas fotosensibles.
CMYK:Cian, Magenta, Yellow(amarillo), KeyColor(negro).


Grafica LC2 - 12.jpg


Al pasar el archivo en algo que se imprime se transforma en 4 películas con la imagen en positivo(+), luego se bañan en un químico que les saca una plancha en negativo(-), como a las fotografías. Y por último se doblan en un rodillo.


La prensa unta un pequeño rodillo con tinta la cual impregna con tinta la plancha en negativo, esta a la película en positivo, y esta última a otra plancha en negativo la cual imprime la hoja de papel con la imagen en positivo. Todo esto mientras los rodillos giran sincrónicamente.

En los medios Web se hace la misma maqueta, llamada Wireframe, donde se toman las mismas decisiones. El Wireframe es la discusión estricta y racional de lo que se va a hacer. Primero se discute la problemática estructural del Diseño.


TAREA

Hacer un wireframe desde una pagina X de un diario X en Ilustrator. Aquí se debe extraer toda la información estructural posible, todas las decisiones que construyen la página.

ESTRUCTURA Y DECISIONES DIARIO "EL PAÍS"

ESTRUCTURA

Estructura pag-chris.fattori.jpg
La página mide 40 x 27 cm con márgenes de 1 cm por lado.

MEDIDAS Y SECCIONES

Medidas y Secciones-chris.fattori.jpg

Se compone en una superficie de 35 x25 cm. son 5 columnas de 4,6 cm con margenes de 0,4 cm. Se divide la mitad con un margen de 0,2 cm y se divide an 6 cecciones horizontales con margenes de 0,8 cm.

COMPICISIÓN: IMÁGENES Y TEXTOS

Archivo:Imágenes texto-chris.fattori.jpg

IMÁGENES

Archivo:Imágenes-chris.fattori.jpg

TEXTOS

Textos-chris.fattori.jpg

DECISIONES TIPOGRÁFICAS

Utiliza 9 tipologias diferentes. 6 tipografías san serif y 3 con serif


Clase III

Cascadas de Estilos

Cascada de Estilos = Efecto Cascada: modificando uno afecto los siguientes.
Afecta a los criterios que se hayan asignado a los estilos de carácter o párrafos.
En CCS es un criterio de programación. Permite hacer cambios y ajustes de manera rápida y efectiva tanto para estilos de carácter, párrafos e imágenes.

Ej:
Títulos (cursiva)-> texto -> notas -> folios, tec. Serán cursiva
Títulos (negrita)-> texto -> notas -> folios, tec. Serán negrita

Al principio en InDesign solo había estilos de párrafo. Ahora el estilo tipográfico permite cambiar el diseño de manera más especifica.
Este cambio ( estilos tipográficos/estilos de párrafos) permite crear en HTML estilos "fotográficos". Así crear cascadas de estilos para todo.

  • Diseño: 80% diseño 20% producción. se diseña dibujando.

Importación de Archivos

El texto posee dos propiedades. Texto en sí y estilos. Enviar textos con estilos incrustados al Indesign es pérdida de tiempo. Se debe exportar en formato .txt sin estilos.


Grafica LC2- 3.jpg


Al enviar un doumento a la imprenta se dbe enviar en una misma carapeta el archivo Indd, las Fuentes y las Imágenes utilizadas.

Estilos Tipográficos & Estilos CSS

MUNDO ANÁLOGO:

Texto (estilos)---> Imprimir en tinta ---> Tipografías digitales pasan a ser imágenes --->se mide en puntos (pt)

MUNDO DIGITAL:

Texto (stilos)--->imprimir en pantalla---> Tipografías digitales se extraen de una computadora (web fonts)---< se miden en pixeles (antes)

Estilos+CSS.jpg

En El mundo digital se programan los estilos tanto de fuentes como de párrafos e imágenes.

Ej: font:Garamond/ Times New Roman/ con serif. Acá se le ordenó que para mostrar un guente en una pantalla busque la fuente "Garamond" en el computador del usuario, si no está que busque la fuente "Times New Roman", y si tampoco está que busque alguna fuente con serif.

CSS (Cascading Style Sheets («Cáscadas de estilos»)Aquí se programan los estilos de caracter, parrafos e imágenes.
HTML( HyperText Markup Language («lenguaje de marcado de hipertexto») Interpreta la programación y la muestra.

notas: CSS PORTAL/ simila textos css para windows. CODA/ Software de programación de códigos.OMNIGRAFFLE/ Programa de esquemas en vectores. Adobe Text Pro/ J. Veen, sitioweb de fuentes de textos.[5]. Google Web Fonts [6]

TAREA

Crear cascada de estilos en InDesign y en CSS. Basados en las fuentes vistas en el Diario.

Archivo:CGWFM-EL PAIS-Estilos Indd y Css.rar

Archivo:CGWFM-El País-Estilo.jpg


Una dificultad fue encontrar la manera de distinguir cada párrafo para aplicar un estilo diferente. Lo demás es solo especificación. Es muy satisfactorio ver lo que se hace con solo escribir, hay que tener un control total de lo que se escribe.

Clase IV

Responsive Design---Diseño Continuo

Diseño para Soportes

Análogo (prensa) ----------------------------------------------- Digitales (móvil, web, tablet)

Depende de la estructura como diseñemos para distintos soportes digitales.

Responsive Design: Diseño de Experiencias.


Experiencias:

1.- HTML

2.- CSS

3.- JAVASCRIPT


Html (Contenido): Etiquetas, atributos.

Ej: <hI>Hola mundo</hI> ---- <hI”activo”>for </hI> (clase desacado)

CSS (Visual): hI {fontsize:14 px;} (selectores)


Selectores principales:

Clases: Se pueden crear muchos. Pesa más que un selector. Generalizar.
Id: Único. Pesa más que una clase. Especificar.
El Diseño Busca Analogías, Busca Experiencias en el usuario.


Estructura

Análogo: 1- Tabla de contenidos. 2-Tablade cada contenido. 3- Maquetas estructurales.
Digital: Arquitectura de la Información.


Arquitectura de la Información

1. Tabla de Contenido-Tabla de Navegación
Especie de mapa conceptual que jerarquiza los contenidos a tratar.


2. Tabla de Objetos
Son las características propias de cada elemento del mapa. Ve relaciones


3. Maquetas estructurales
Visión objetiva de la organización realizada. Wireframe.
El hacer la tabla de navegación y sus wireframes, es una negociación con el cliente, aquí es donde se deciden las jerarquías, las decisiones fundamentales del contenido.


4. Diseño de interacción
Decisiones de cómo el diseño se comunica con el usuario. Se ubica entre el mapa de contenidos y la maqueta estructural. Se representa a través de otro mapa (partitura) cómo actúa el sistema en reacción al acto de una persona.


5. Diseño Visual

Aplicación estilos gráficos. Diseño de la interfaz, pagina tipo. Todos los tipos de textos, visualizaciones, fotografía, interacción.


TAREA

Crear Mapa de Navegación, contenido y Wireframe de un medio impreso para distintos soportes: Web, Tablet, Móvil. Tratar de realizar al menos la presentación diseñada de la home de algún soporte


Chris Fattori Mapa de Contenido.jpg



Wireframe Móbil 320px x 480px


Wireframe Tablet 800px x 600px

Chris Fattori Wireframe tablet vertical.jpg


Chris Fattori Wireframe tablet horizontal.jpg

Wireframe Web 1024px x 764px

Chris Fattori Wireframe web.jpg


Clase V

RENUNCIAR PARA ENFATIZAR

No todo puede ir en la home.Saber jerarquizar los contenidos.

Tips para Maquetear

Usar estilo de diario, es decir, usar la pantalla como un largo que se divide en dos partes en la que se presenta lo mas importante como primera pantalla y luego el resto.

Diferenciar interfaces. Cada soporte es diferente y cada uno tiene su propia manera de interactuar con el usuario ya sea en web, móbil o tablet.

Crear un enganche a la web, que sea mejor que la revista y retenga al lector, ya sea agregando enlaces, mejores fotos, artículos relacionados, etc.

Tarea IV - Corrección Tarea III

Crear Home Web, Mobil, Tablet: Wireframe y Diseño. Cascadas de Estilos CSS de texto, botones, imágenes, etc.

  • Títulos
  • enlaces
  • imágenes
  • listas
  • tablas
  • negritas/italicas
  • citas
  • formularios (casillas, género)

TAREA



Chris Fattori Mapa de Contenido.jpg



Wireframe Móbil 320px x 480px

Chris Fattori-Wireframe mobil horizontal.png


Chris Fattori-Wireframe mobil vertical.png

Wireframe Tablet 800px x 600px

Chris Fattori-Wireframe tablet horizontal.png


Chris Fattori-Wireframe tablet vertical.png

Wireframe Web 1024px x 764px

Chris Fattori-Wireframe web.png

Wireframe Web Reportaje 1024px x 764px

Chris Fattori-Wireframe web reportaje.png


Chris Fattori-Wireframe web reportaje 2.png

Wireframe web simulado

Chris Fattori-Wireframe web simulado.png

Archivo:Chris Fattori-Wireframe web-interactivo.rar

Wireframe web reportaje simulado

Chris Fattori-Wireframe web reportaje simulado.png


Chris Fattori-Wireframe web reportaje 2 simulado.png

Estilos



Clase VI

METODOLOGÍA

Para desenvolverse bien en el mundo del diseño(y en cualquier otro oficio)hay que mantener una forma en que se optimice trabajo. Esto es manteniendo una metodología.

metodología: Forma de construcción, jerarquía de contenidos y procesos a tratar.

estrategia: objetivo del trabajo, énfasis en el consumidor.

Documentar el trabajo: Mantener un registro de lo que se está haciendo. Soporte y apoyo.

Lo importante en cada trabajo es discriminar. Distinguir qué es lo importante y lo accesorio.

briefing: Resumen. Argumento de intenciones. En qué consiste el encargo.Declaración de Objetivos y Metas del proyecto.

objetivo: Qué se quiere.

meta : tiempo.

En cada proyecto tener claro : Quiénes son los encargados del producto. Quién financia el proyecto. Dejar claro el Presupuesto. Cotizar.

Ante un cliente mostrar siempre mostrar la metodología del trabajo.


Clase VII

RECAPITULACIÓN

Wireframes --------> visualización Visualización -----> no es el wireframe pintado

Lado racional: definir acción y reacción.

Visualización: no caer en que todo puede ser visualizado con estilo minimalista. Diferentes clientes, diferentes visualizaciones. Error pensar que el wireframe domina el lado emocional.

El wireframe es sólo una etapa en la construcción. El criterio (no la interfaz) racional que va a suceder. Transformar el wireframe. El diseño de la Interfaz es otro asunto, tiene que ver con otros asuntos (ej. Definición de una marca).

INTERFAZ

La Interfaz es el modo en que los colores, el movimiento de elemnots, las formas de estos elementos influyen subconscientemente al usuario.

Ej: Logo del Banco de Chile.

  • color: Azul - solidez ( teoría del color)
  • Tipografía: Gótica - Tradición.

Las maracas buscan comunicar y a quién comunicar a través del color y la letra.

La interfaz se estructura definiendo reglas. Estas deben ser coherentes y bien definidas. Deben ser claras y buscar que el usuario las aprenda con facilidad, no confundirlo irrumpiendo en las reglas ya establecidas por el diseñador.

La interfaz indica qué cosa y cómo reacciona de forma determinada el sistema ante la acción del usuario.

La interfaz y sus reglas responden ante los requerimientos del sistema y el usuario (velocidad, comprensión, transmisión de información, etc).

La Interfaz y las ciencias

La interfaz hace uso de la ciencia. Utiliza colores, letras, etc. medidos científicamente para responder en el subconsciente del usuario.

La interfaz al utilizar elementos ya conocidos por el inconsciente colectivo se vuelve poco innovador. Para cambiar las reglas de juego se debe realizar un estudio previo de los elementos que se quieran cambiar , o los nuevos que se quieran aplicar, o mirar lo que hace la competencia (benchmarking).

Por esta razón en el diseño de interfaces para sitios web se requiere de materias a parte del diseño, como psicólogos, programadores, etc. El diseñador toma decisiones, se apropia de las ciencias.

El Diseñador trabaja entre límites, uno de los principales es la velocidad, el poder transmitir la información de forma clara y rápida. Para esto hace uso de distintos estudios.

  • eyetracking: Mide el tiempo de visión y lugar de la mirada. Ayuda a determinar la interfaz.

Ver Luke Wroblewski, diseño de interfaces. "Web from Design".

Clase VIII

EXPORTACIÓN DE ARCHIVOS


Grafico 1.jpg


Grafico 2.png

DUDAS:¿Qué pasa con los colores especiales?

Colores difíciles: colores flúor. Difícilmente se trabajan en imprenta, son caros, toman mucho tiempo y costos realizarlos.

DISEÑO: Es un oficio de observación, de experimentación, aciertos y desaciertos. La preparación de tintas PANTONE es un oficio aparte, de ojo. Por esto trabajar con los que se especializan en ello. Por ejemplo trabajar con maquinistas de imprenta, pero estos se diferencian: Un maquinista de diario es diferente a un maquinista de impresión fina, distintos tactos, distintas técnicas. El Diseño es un oficio que se limita por avances técnicos y económicos.

EL MUNDO DIGITAL

La clave es la interconección de las cosas.

Universo impreso:
Un mundo limitado, acotado, con pocos errores, corregible.


Grafico 3.png


Universo digital: Es más comlejo, casi insalbable en caso de errores.

DISEÑO SEMÁNTICO

Se divide en contenido y presentación.
CONTENIDO: texto, imágenes, videos, sonidos, etc. Todos estos elementos tienen su ubicación en el gran universo de Internet, y se alojan en base de datos.
El Diseño semántico está basado en la teoría de conjuntos:
Universo --> Conjuntos --> Subconjuntos --> Unidades.
Ninguna unidad puede estar fuera de un conjunto.


Grafico 4.jpg


Grafico 5.jpg

Servidores: Son almacenamiento de información, discos duros que almacenan los documentos (conjuntos del Universo Internet).


IPV6: Ip = Internet protocol. Cada computadora tiene un código único. IPV6 permite que todo lo que tenga un código IP almacene varias carpetas (Subconjuntos) que podrían ser parte de un sitio web.


Análogo --> Sin estándar.
Digital --> Estandarizado. w3c.orgestandarizó la internet para que todos tengan acceso. Establece cuál es el HTML y cuál es el CSS.


LA ESTRUCTURA DE UN SITIO WEB

Se estructura en varias carpetas y subcarpetas que se relacionan entre sí a través de hipervínculos. Cambiar un objeto de una carpeta a otra rompe el vínculo y la estructura se perfora. Cada elemento (unidad) dentro de un sitio web posee un URL, una dirección conocida: Taxonomía, orden de contenidos.

Grafico 6.jpg



El index es un indice, fuera de cualquier carpeta sino no se lee, no pertenece a la estructura web.

Examen

Fattori-examen 1.jpg
Fattori-examen 2.jpg
Fattori-examen 3.jpg
Fattori-examen 4.jpg
Fattori-examen 5.jpg
Fattori-examen 6.jpg
Fattori-examen 7.jpg
Fattori-examen 8.jpg
Fattori-examen 9.jpg
Fattori-examen 10.jpg
Fattori-examen 11.jpg













Presentación PDF del original: [7]
Presentación PDF de la deconstrucción: [8]
Presentación PDF de la reconstrucción: [9]
Reconstrucción Indd: Archivo:Carpeta Chris.Fattori-Recostrucción-Wildflower.zip