LC 2 2012
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:
Aquí el blog es compartido a un sitio web mas popular, es relacionado con otro.
Aquí el blog es relacionado a otros, por lo tanto vive en cuanto es leído.
La chica crea aplicaciones para su blog. Produjo un ecosistema tal que lo sostiene.
¿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.
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
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.
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).
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).
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
La página mide 40 x 27 cm con márgenes de 1 cm por lado.
MEDIDAS Y SECCIONES
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
DECISIONES TIPOGRÁFICAS
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.
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)
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
Wireframe Móbil 320px x 480px
Wireframe Tablet 800px x 600px
Wireframe Web 1024px x 764px
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
Wireframe Móbil 320px x 480px
Wireframe Tablet 800px x 600px
Wireframe Web 1024px x 764px
Wireframe Web Reportaje 1024px x 764px
Wireframe web simulado
Archivo:Chris Fattori-Wireframe web-interactivo.rar
Wireframe web reportaje simulado
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
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.
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.
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.
El index es un indice, fuera de cualquier carpeta sino no se lee, no pertenece a la estructura web.
Examen
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
