BITÁCORALENGUAJE COMPUTACIONAL 1

Javiera Albornoz ValdiviesoD I S E Ñ O G R Á F I CO

BITÁCORA LC1.Clase Primera/27 junio 2008.

ESTRATEGIA DE DISEÑO.

CONTENIDOS Presentados en el curso.

1_Metodologia

-Estrategia -Estudio usuarios -Arquitectura de la información -Diseño visual -Diseño front (producción).

CONTENIDOSPresentados en la clase.

1_Introduccion acerca del oficio.2_Metodología del diseño centrado en el usuario. a.briefing b.benchmarck c.coaching d.conversaciones guiadas.

El oficio del diseñador gráfico en la era digital.

El oficio esta viviendo una de las transformaciones más grandes desde la imprenta.

¿Cómo un diseñador enfrenta desde la perspectiva del trabajo?

¿Cómo me reinvento en este nuevo tiempo?¿Cómo muta el diseño?, oficio.

El oficio pasa por una cuestión estética muy fuerte pero tiene una metodología.El oficio se nutre de todo lo que le pasa al mundo, no hay diseñador ignorante.

DISEÑADOR: TRADUCE LO QUE QUIERE DECIR

¿Cómo podemos hacer estrategia para el diseño?

METODOLOGÍA DEL DISEÑO CENTRADA EN EL USUARIO.

El usuario tiene preferencias, es capaz de recordar in-mediatamente una marca.(set evocado).

Observar el comportamiento de los usuarios se hace a través de la OBSERVACIÓN.

Para diseñar es necesario tener una METODOLOGÍA, investigar como se ordenan los contenidos; siendo el diseño la construcción de lo que no existe.

PASOS A SEGUIR EN UN PROYECTO DE DISEÑO:

- BENCHMARCK: Análisis comparativo para poder encontrar las ventajas y desventajas en relación a la competencia.

- BRIEF: Es la declaración escrita de las intenciones del cliente.

- COACHING: Es el entrenamiento que se le hace a los clientes para explicarle porque se hacen las cosas en el diseño de su producto.

- TARGET: La audiencia a la que decea llegar el pro-ducto.

- CONVERSACIONES GUIADAS: se conversa con los clientes y se trata de conocer sus gustos y prefe-rencias.

DISEÑO TÉCNICO EMOCIONAL

ESTRATEGIA/DISEÑO/PRODUCCIÓN

El briefing como herramuenta para conocer al cliente y sus intenciones, además al ser escrita deja constancia de lo requerido.

BITÁCORA LC1.Clase segunda/04 julio 2008

CONTENIDOSPresentados en la clase.

Metodología de diseño centrada en usuario.1_ Estrategia de diseño: -Brief -Tabla gantt -Entrevistas usuarios -Modelos y escenarios -Benchmarck -AP -Wireframes

Un proyecto de diseño gráfico, cosntruye algo capaz de construir COMUNICACIÓN, dandole vida a un ser vivo.

ESTRATEGIA: Comprometerse el encargo, sa parte a través de un BRIEF, se crea un CONTEXTO.El cliente da de manera ordenada los objetivos del proyecto, lo que el quiere, por ESCRITO.También se especifican los recursos para el proyecto, el público al que quiere llegar(especifico), precisando por escrito los compromisos.

PLANES DE IMPLEMENTACIÓN ¿Qué se va a hacer? ¿ cuando se lanza?

TABLA GANTT: Despues del brief, es una asiganación de tareas en el tiempo y con su respectivo presupues-to y responsable a cargo.(faenas).

Ejemplo: Si quiero vender paltas debo saber los cos-tos del kilo, mas la bencina en transportarla, mas la hora de hombre pagada y la utilidad.El precio es en relación al mercado.

$1000 paltas+$100 bencina+$50 tiempo=$1150.Si hago oferta de $1800 la utilidad es de $650 por kg.

BENCHMARCK:Herramienta para ver ventajas y des-ventajas con respecto a la competencia, su análisis permitira posteriores deciciones.Se le hace la misma pregunta, o puntos a verificar a cada una de las competencias para luego obtener CONCLUSIONES, es decir, copiar algo o no repetir errores.

El benchmark analiza las ventajas y desventajas en relación a la competencia.

BITÁCORA LC1.Clase tercera/ 11 julio 2008

CONTENIDOSPresentados en la clase

1_Presentación de los trabajos grupales: -Benchmark de cada grupo -Carta gantt.

2_Portafolios de cada diseñador

3_El diseño y sus disciplinas afines.

Cada grupo expone su trabajo, se marca la diferencia entre imagen corporativa y logo, ya que la imagen corporativa involucra una serie de ELEMENTOS que definen el producto, como la marca desea ser mostrada.

FORMA/ COLOR/ LOGO/ CARACTERISTICAS

El diseñador no debe entregar un trabajo por ade-lantado, sino en cambio puede mostrar al cliente un PORTAFOLIOS con sus trabajos, a modo de que pueda conocer su mano, además de en su curriculum incluir distintos aspectos que puedan generar ventajas con respecto a la competencia, como por ejemplo hablar idiomas.

ESTUDIO DEL COMPORTAMIENTO DEL USUARIO

Para conocer al usuario, no se puede confiar en la subjetividad del gusto, porque lo que puede ser bueno para mi no necesariamente lo es para los demás, para conocerlo hay que ESTUDIARLO.

ESTUDIAR PARA CONOCER AL USUARIO SUS:

Motivaciones/ Necesidades/ Lo que compran/ etc.

PARA CONOCER AL USUARIO EXISTEN:

Estudios de merdado/ Foco group

El diseño necesita resspuestas para poder resolver desde el diseño las incognitas en relación al asuario, por lo tanto debe hacerse de conocimientos que no son propios, o ayudarse de personas que si manejen las disciplinas afines y que son necesarias para el oficio.

El diseño involucra también distintas areas del conoci-miento para su oficio.

BITÁCORA LC1.Clase cuarta/18 julio 2008

USABILIDAD.

CONTENIDOSPresentados en la clase.

Usabilidad.¿cientifcar el diseño?

1_Tipos de evaluación. -Heurística por expertos. -Test de usuarios(laboratorios). -Eyetracking -Accesibilidad. -Expert review.

2_Qué medimos? Tipos de evaluación. -Visibilidad del sistema. -Correspondencia entre sistema y mundo real. -Libertad y control del usuario. -Consistencia y estándares. -Prevención de errores. -Recordar v/s aprender -Flexibilidad y eficiencia de uso -Estética y diseño. -Ayuda -Documentación de ayuda.

La usabilidad es una parte importante de la metodolo-gia del diseño, para comprobarlo es necesario realizar PRUEBAS, TESTS.

La manifestación misma del producto es su DISEÑO, un ejemplo de esto son los ipods, celulares, que dan cuenta de la tendencia a lo táctil.

Una sociedad adquiere tiempo en digerir los conoci-mientos; la próblematica de las artes y el diseño apare-ce con la BAUHAUS.

Los japónenes asumieron el diseño como INOVACIÓN que genera LIDERAZGO.

FUTURE DESIGN es observar el comportamiento de las personas para ver como reemplaza las cosas por objetos de diseño, es decir plantearse la pregun-ta, ¿qué cosas se pueden diseñar para su vida?, para esta respuesta es necesario la OBESERVACIÓN.

La usabilidad genera el RE-DISEÑO.

En cualquier poryecto se debe estar seguro de existirá un RETORNO DE LA INVERSIÓN(ROI); por tanto de-berá existir un INVESTIGACIÓN de la industria.

Para lograr que un producto se venda primero debe ser TESTEADO, el diseño requiere de factores de la ciencia como la PRUEBA Y ERROR.

Existe dentro del oficio una constante discusión entre

DISEÑO V/S INGENIERIAESTÉTICO EMOCIONAL/FUNCIÓN

(sacrificar el uno por el otro)

Para evaluar un producto: -Heurística: son los criterios de medidad. -Test de usuarios: probar el producto en relación a las personas que lo usarán. -Eyetracking: es una máquina que mide donde el usuario tiene puesta la mirada (sirve para saber donde esta el foco de atención). -Accesibilidad: Capacidad de los diseños de ser ad-quirido por la mayor cantidad de personas (relación productos, costos) -Expert review. Se testea el producto con personas que saben del teman sobre el que se esta trabajando, así ellos pueden dirimir acerca de este desde su mira-da experta.

LA USABILIDAD EN CIFRAS:

Con testeart el producto con sólo 5 usuarios se puede saber el 75% de usabilidad de este, se obtienen nume-ros que indican QUIENES Y CUANTOS.

Los aspectos sobre los cuales se mide un producto (nombrados en la tabla de contenidos, punto dos), son los que nos dan los parámetros acerca de que cosas deben funcionar correctamente y de una cierta manera para el buen uso del producto.

En la imagen siguiente se muestra un producto que es usado por millones de personas en el mundo, esta ca-pacidad de ser utilizable se da en la medida en que el producto es diseñado y a la vez evaluado PENSANDO EN EL USUARIO.

ARQUITECTURA DE LA I N F O R M A C I Ó N .

Organizando un sitio web

CONTENIDOS.Presentados en la clase.

1_Diseñadores arquitectos de la información. -Edward Tufte -Jesse James Garret -Louis Rosenfeld -Peter Morville. -Nathan Shedroff -Richard Saul Wurman.

¿Porqué el diseño debe preocuparse de la arquitectura de la información?

Para responder esta pregunta aparece uno de los di-señadores mas importantes de los ultimos 30 años; Edward Tufte, quien nos habla de la relevancia del ACCESO, ALMACENAMIENTO Y ORDEN DE LA IN-FORMACIÓN.

BITÁCORA LC1.Clase quinta/25 julio 2008.

El conocimiento de la información es tan importan-te, que incluso Napoleón llego a perder la batalla de Waterloo debido a que no tenia conocimientos de la información del clima y sus inclemencias.

Tufte se dio cuenta de que la INFORMACIÓN SE USA PARA TOMAR DECISIONES, y que a la vez transfor-mar los DATOS EN INFORMACIÓN ya no es suficien-te.

Tufte abre nuevas fronteras y nos dice que hay que TRANSFORMAR LA INFORMACIÓN EN COMUNICA-

CIÓN.

Las unidades discretas para los medios eléctronicos no deben ser usadas como datos, sino deben conectarse a BASES DE DATOS QUE ENTRE ELLOS CONSTRU-

YEN COMUNICACIÓN.

GRÁFICAR A MODO DE UN GOLPE DE VISTA.En este caso hay varios factores gráficos que estan en juego y que generan la comunicación visual, los dibujos asociados al número y a una palabra, además de un lugar geografico espécifico son capaces de COMUNICAR EL DATO.

EL USUARIO DEJA EVIDENCIAS HERMOZAS DE INFORMACIÓN.

Los diseñadores trabajan con la belleza, pese a que los productos deben ser utilizables.

LA MANERA DE ORGANIZAR EL CONTENIDO es fundamental a la hora de comunicar un mensaje; di-señadores como PUENTES QUE GENERAN COMU-NICACIÓN.

Esto fue lo que ocurrio con el diseño del plano del me-tro de londres, cuya capacidad de abstraer un recorrido y de mostrarlo a a través de signos lo hacian compren-sible desde su IMAGEN.

¿Qué es la arquitectura de la información?Según Jesse James Garret, se define en como las per-sonas procesan y construyen relaciones entre sus dife-rentes elementos.

El diseño visual como la CULMINACIÓN de un antes bastante trabajaso que incluye una serie de faenas, dentro de las que se incluye la arquitectura de la infor-mación.

Siendo los REQUERIMIENTOS DEL CONTENIDO fundamentales para que el diseño sea efectivo, ya que PROVIENEN DEL USUARIO.

Jesse James Garret, autor del libro “ The elements of the user experience”.

La arquitectura de la información, es cosntruir el espa-cio digital con la información para que sea utilizable.

Existen estandarés de ciertos porductos, que con un solo GESTO producen una interacción clara y precisa.

Por ejemplo la rueda no se ha reinventado, sino que se ha OPTIMIZADO A TRAVÉS DEL TIEMPO.

Otro arquitecto de la información relevante es Louis Rosenfeld, quien habla del uso de herramientas técni-cas y experiencias de diciplina que ven la información como algo importante y valioso por si mismo.

La arquitectura de la información como la cola que mueve al perro.

Peter Morville, arquitecto de la información y su propo-sición de 3 circulos.

Nos habla de que el arte y la ciencia de organizar y estiquetar para apoyar las capacidades de uso y bus-queda.

Richard Saul Wurman.Oraganización de los patrones inherentes a la infor-mación.

Nathan Shedroff

La arquitectura de la información es casi invisible.

Un porducto de diseño debe ser:

UTILIZABLE / UTIL / DESEABLE / ENCONTRABLE / VALIOSO / CREIBLE / ACCESIBLE.

Nathan Shedroff; experience design, habla de que lo importante no es el producto, es la EXPERIENCIA.Sistema para organizar datos, para poder transformar-los en información.

C O L O R E I M P R E S I Ó N.Propiedades del color y términos de

impresión.

CONTENIDOSPresentados en la clase

1_Módelos de color. -Área de tono continuo. -Tramas del semitono./ cuatricromía. -Efecto Moiré. -Tintas planas y matices. -Colores de cuatricromía. -Separación de colores. -Reserva o Sobreimpresión. -Trapping o reventado. -Imagenes mapa de Bits/resolución de salida -Lineatura o frecuencia de trama.2_Charla de Basilio.

PDF=Portable Document File.

Módelos de color: se separan en modelo aditivo y modelo sustractivo.Es importante saber de donde vienen las cosas para poder entenderlas.(esto en relación al formato de la in-formación).

BITÁCORA LC1.Clase sexta/01 agosto 2008

En los sistemas de impresión existen las áreas de tono continuo, las tramas de semitono (en blanco y negro) y la cuatricromía (que son tramas en 4 colores)

Se hace la análogia con los puntillistas, quienes yuxtaponían el color, así como las tintas de offset que se traslucen entre ellas generando la ILUSIÓN DEL COLOR.

El efecto Moiré, es un efecto de saturación de los pun-tos de giros que les podemos hacer a las tramas.

Un modelo de color determina la relación entre valo-res de color, y un espacio de color define el significa-do de esos valores de color. El modelo de color Lab tiene un espacio de color fijo, y entonces es indepen-diente del hardware. Pero el resto de modelos de color (RGB, CMYK, etc.) pueden tener diferentes espacios de color, por lo que son dependientes del hardware.RGB y CMYK son los modelos de color más importantes

¿Cómo los colores se comportan en estas tecnologias? -Respecto de los ángulos. -Respecto de las tintas

Existen tintas planas y matices.Las tintas planas se pueden separar en tramas de 100 a 0.

Maneras de hacer grises: -Se hace tinta especia. -Se simula a través de tramas (matices de 1 color).

RGB_Los colores base, rojo, verde y azul.

Módelo de color RGB.

Para enviar un trabajo gráfico a la imprenta se debe enviar el In Design, la foto y la tipografía; esto se puede facilitar en un archivo PDF que contiene toda la infor-mación sin modificaciones.

What you see, What you get.

El soporte de PDF es importante su resolución DPI (Dot Per Inch), lo cual esta intimamente ligado al so-porte, pantalla o impresora.

DPI: press_200 medium_150 screem_72

El máximo de resolución es de 300 hacia arriba para poder mandarlo a la imprenta.

Con la explosión de los medios digitales es necesario abrir la mente a las nuevas posibilidades.

por ejemplo:

¿cómo el auto se comunica conmigo?interfaz, luces, radio, signos... todo diseñado por dise-ñadores.

Resolución.Dots Per Inch. Puntos por Pulgada.

DISEÑO FRONT:Exposición de Basilio.

Basilio nos cuenta de como el parte con un bosquejo (diseño) y luego le sigue la metodología con la arqui-tectura de la información.

El diseño tiene que traducir a su soporte; en Front se traduce la imagen en un código, que es el que permi-te ver en el medio digital.

Es un LENGUAJE en el que se habla en CÓDIGOS, no con dibujos; así como en la escultura, su lengua son las gubias.

Para diseñar todo responde la estrategia de diseño , el diseñador front es el quinto paso de todo el estudio previo.

Todo se gráfica o se escribe en etiquetas, estructurar el contenido y valorizarlo semanticamente.

websites en funcionamiento.

CONTENIDOS.Presentados en la clase.

1_Revisión de los blogs.

2_HTTP.

3_Scanners. -Modos de scanner. -Reflectante o pelicula. -Tipo auto exposición. -Tipos de imagen. -Escalar una imagen. -Ajustes. Histograma / Densitometro.

4_Formato de imagenes.

La clase comienza con la revisión de los blogs de los alumnos y las dudas correspondientes al proceso, es necesario siempre poner el link ya que en internert lo esencial es VINCULARSE.

¿Cuál es el lenguaje que tenemos que usar los dise-ñadores?

Lenguaje técnico.

BITÁCORA LC1.Clase séptima/08 agosto 2008

En diseño es necesario hablar las cosas claras para así lograr dar soluciones, decir por el nombre para dar RESPUESTAS.

La falta de educación de los diseñadores es una cur-va que viene en ascenso , los diseñadores tienen que ser cultos para así entender los clientes y expresar ideas.

HTTP:

H= hyperT= textT=transportP=protocol

Scanners:

Los scanners de las multitiendas que son a los que generalmente tenemos acceso, no son profesionales ya que son de cama (aficionados), y es el que emula la fotocopia; los profesionales son de tambor o caja fija.

El problema con los scanners es que sus drivers es-tan dirigidos para el mercado domestico.

-Los scanners presentan 3 modos: fácil, automatico y profesional. -Si es algo reflectante o una pelicula. -Tipo auto exposición, puede ser foto o documento. OSR: scanner que lee la tipografía y transportan el texto para ser editado. -Tipos de imagenes, esta directamente relacionada con los bits de la imagen (3 colores) RGB. (rojo, verde y azul).

Mientras más bits más información tiene el archivo.

PPP: Puntos Por Pulgada.

DPI: Dot Per Inch.

Los scanner de las multitiendas son para uso domes-tico, es decir de uso de aficionados.

IMAGEN ANALOGO SCANNER / DIGITALIZO /PELICULA / IMPRESIÓN

IMAGEN ANOLOGO.

Escalar una imagen.

Si se quiere escalar una imagen de 10 a 20 por ejem-plo en 300 DPI, deben pasarse a 600 DPI.Se escala al 300% y aumenta la resolución.

Ajustes:

-Histograma: es la información técnica de los claro y oscuro de una imagen, se recomienda no manipular-los y que la imagen scaneada sea lo más parecida a la original.

La pantalla funciona con 72 DPI, y lo que se imprimirá viene con TRAMAS, la trama viene de la línea.

Dos tipos de resolución:la del punto y la de lineas por pulgada.

LPI:Line Per Inch.

-Densitometro: herramienta sobre los colores impues-tos para saber la carga de color que tienen.

El histograma es una herramienta de uso comun en el photoshop.

Para guardar los archivos es importante determinar su formtao de imagen, de esto dependerá la información guardada por archivo.

-Multi tif:Mac linus.

Formatos Gráficos.(de ellos depende el comportamien-to de la imagen).

esp / gif / png / raw / jpg (la más usada comunmente).

Imagen en jpg, sigue siendo el formato mas usado.

Los formatos JPG y GIF son de perdida de informa-ción.

El formato TIF es el más fiel y rico para la informa-ción.

RESOLUCIÓN DE IMAGEN.

La resolución de imagen indica cuánto detalle pue-de observarse en una imagen.

El término es comúnmente utilizado en relación a imá-genes de fotografía digital, pero también se utiliza para describir cuán nítida (como antónimo de granular) es una imagen de fotografía convencional (o fotografía química).

Tener mayor resolución se traduce en obtener una ima-gen con más detalle o calidad visual. Para las imáge-nes digitales almacenadas como mapa de bits, la convención es describir la resolución de la imagen con dos números enteros, donde el primero es la cantidad de columnas de píxeles (cuántos píxeles tiene la ima-gen a lo ancho) y el segundo es la cantidad de filas de píxeles (cuántos píxeles tiene la imagen a lo alto).

Otras convenciones incluyen describir la resolución en una unidad de superficie (por ejemplo píxeles por pulgada). A continuación se presenta una ilustración sobre cómo se vería la misma imagen en diferentes resoluciones.

La convención que le sigue en popularidad es descri-bir el número total de píxeles en la imagen (usualmente expresado como la cantidad de megapíxeles), que pue-de ser calculado multiplicando la cantidad de columnas de píxeles por la cantidad de filas de píxeles.

Para saber cuál es la resolución de una cámara digital debemos conocer los píxeles de ancho x alto a los que es capaz de obtener una imagen.

Así una camara capaz de obtener una imagen de 1600 x 1200 píxeles tiene una resolución de 1600x1200=1.920.000 píxeles, es decir 1,92 mega-píxeles.

Además, hay que considerar la resolución de impre-sión, es decir, los puntos por pulgada (ppp) a los que se puede imprimir una imagen digital de calidad.

A partir de 200 ppp podemos decir que la resolución de impresión es buena, y si queremos asegurarnos debemos alcanzar los 300 ppp porque muchas veces la óptica de la cámara, la limpieza de la lente o el pro-cesador de imágenes de la cámara digital disminuyen la calidad.

Para saber cual es la resolución de impresión máxi-ma que permite una imagen digital hay que dividir el ancho de esa imagen (por ejemplo, 1600 entre la resolución de impresión 200, 1600/200 = 8 pulgadas).

Esto significa que la máxima longitud de foto que se puede obtener en papel para una foto digital de 1600 píxeles de largo es de 8 pulgadas de largo en calidad 200 ppp (1600/300=5.33 pulgadas en el caso de una resolución de 300 ppp). Una pulgada equivale a 2,54 centímetros

LINEAS POR PULGADAS E IMPRESIÓN.

Las líneas por pulgada representan el número de líneas en una pulgada que hay en imagenes de tonos medios, o imagenes procesadas a cuatro colores. En teoría, mientras más lineas por pulgada, más detalla-das serán las fotos.

Esto no debe ser confundido con “puntos por pulga-da”, que es un término referido a la resolución en las computadoras.

Las imprentas pueden utilizar desde, digamos, 65 LPI (líneas por pulgada) para producir imagenes granu-ladas como en los periódicos antiguos, hasta 300 LPI para intentar reproducir algo muy cercano a una fotografía de tono continuo. La mayoría de los produc-tos impresos se imprimen dentro de un rango de 133 LPI hasta 200 LPI.

Podemos elegir diferentes resoluciones, dependiendo del papel que se utilizará o el efecto que queramos lograr.

En papel satinado, utilizaremos usualmente LPI más altas, mientras que en papel común obtendremos mejores resultados si utilizamos valores más bajos. Esto se debe a las diferentes maneras en que la tinta se adhiere a cada tipo de hoja.

LPI (lines per inch): Número de líneas por pulgada de una trama de tomo tradicional (puede estar compren-dida entre 55 y 200, generalmente) y se refiere a la frecuencia de líneas de puntos horizontales y vertica-les que forman la trama en una película.

Patrones con ángulos de trama marcados y frecuen-cia de líneas por pulgada superpuestos para formar

patrones muaré.