BITACORA LC1Waldo Ignacio López Marcos / Diseño Gráfico 2º año.

Indice

clase 1

clase 2

clase 3

clase 4

clase 5

clase 6

clase 7

clase 8

27 / junio

04 / julio

11 / julio

18 / julio

25 / julio

01 / agosto

08 / agosto

22 / agosto

Estrategias del diseño

Estrategias

Técnicas de medios digitales

Usabilidad

Arquitectura de la información.

Modos del color.

Formatos de imagen.

Pre-prensa digital.

clase 127 / junio

Estrategias del Diseño

INTRODUCCIÓN.

Todo proyecto de diseño implica dos partes fundamentales; por un lado está el cliente quién tiene una inquietud ha resolver, y por otro lado está el diseña-dor que viene a transformar una idea abstracta en algo concreto en una suer-te de puente entre el cliente y a lo que se apunta. Para que este proyecto se resuelva debe contar con un numero de pasos primeros que constan de eva-luaciones que dirigidas a la finalidad de este. Es así como se establece un pri-mer momento de estrategias en donde podemos apuntar:

BRIEF: Se construye un cuestionario estratégico en donde el cliente, en po-cas palabras, entrega información de lo

que quiere lograr.

BENCHMARK: Consiste en analisis proyectos existentes (competencia) de lo que surgen guías para establecer al-gunos parametros de debilidades y for-talezas hacia el futuro proyecto.

CONVERSACIONES GUIADAS: Co-rresponde al estudio del usuario que atiende al perfil social del proyecto.

Por último, se cierra este primer periodo, previo al inicio del proyecto en donde se presenta al cliente el analisis realizado (coaching).

En forma de orden para todo lo que res-pecta al taller de LC1, haremos uso de algunas herramientas _haciendo cuen-tas propias_ para distintos aspectos, ya sea: ayuda, actualidad sobre temas de diseño, publicación de dudas, contacto y tareas que se nos dan en las clases.

http://losdigitales.com Comunidad en la cual diseñadores de todo el mundo presentan proyectos y conversan sobre temas de diseño. http://wordpress.comSitio de blog en el cual está registrado el blog del curso http://lenguaje1.wor-dpress.com. http://slideshare.netSitio en donde se puede públicar archi-

vos de tipo PDF y powerpoint. Estos archivos son mostrados en forma de presentaciones.

http://twitter.comes un servicio gratuito de MicroBlog-ging, que hace las veces de red social y que permite a sus usuarios enviar micro-posts (también denominados “tweets”) basados en texto, con una longitud máxima de 140 caracteres, donde ge-neralmente se responde a la pregunta ¿Qué estás haciendo?.

http://flickr.comes un sitio web para compartir imágenes sobre todo fotográficas. Puede usarse como soporte a diferentes comunida-des on-line con diferente soporte en plataformas.

clase 127 / junio

clase 204 / Julio

Estrategias

Profundizaremos los elementos que for-man parte de este primer momento el cual denominamos Estrategia del dise-ño, a esto añadiremos nuevos aspectos necesarios.

Briefing: Se podría hablar de brief como un documento, elaborado por la agencia de diseño/publicidad, el cual se basa en información necesaria tanto de la empresa (historia) como la finalidad del proyecto (de qué trata, precio del proyecto, medios de distribución y/o la finalidad que tiene la marca) para esto, la agencia hace uso de esta herramien-ta para crear un lazo de comunicación entre esta y la empresa.

Target: Es uno de los principales fines que se busca hallar en el Brief y corres-

ponde al público objetivo. El proyecto va dirigida a este grupo de personas.

Tabla Gant: Corresponde a una herra-mienta gráfica cuyo objetivo es mostrar tiempos expecificos de cada tarea den-tro del periodo de un proyecto.

Benchmark: Es una técnica usada para realizar una comparativa de las empre-sas que corresponden a la competen-cia y mediante el cual se reconocen las ventajas y desventajas con las cuales se cuentan. A partir de estas desventa-jas que presenta el mercado se puede basar la fortaleza del proyecto el cual desarrollaremos, además de contar con las ventajas.

Presentación: Consiste en una pre

sentación en la cual damos cuenta de la estrategia que usaremos para abordar el proyecto, basandoce en las ventajas y desventajas que ha arrojado el Ben-chmark.

Pondremos en práctica todas estas he-rramientas en la formación de dos gru-pos de trabajos, los cuales simularán la experiencia de trabajar con los recur-sos entregados, según lo dicho ante-riormente, el grupo tendrá una sema-na para elaborar un Brief, Tabla Gantt, Benchmark y posterior presentación al cliente.

clase 204 / Julio

Esquema que muestra el proceso completo de un proyecto el cual con-siste en 6 pasos, el primero de ellos es el de Estrategia.

clase 311 / julio

Técnicas de medios digitales

Ya que todo proyecto de diseño va diri-gido a un usuario determinado, ya sea para un grupo específico o más amplio, el diseñador debe conocer a este usua-rio y: “crear DESDE el usuario PARA el usuario”. Es por eso que adopta el pa-pel de la persona que cuando el proyec-to sea público, esta sea capaz de ma-nejar el sistema (o el objeto de diseño) sin la necesidad de un manual sino que es el mismo usuario que a partir de su experiencia se hace parte de esta nue-va realidad diseñada. Cuando esto llega a cumplirse, el trabajo del diseñador se considera cumplido.Para llegar a lo que he nombrado an-teriormente, el diseñador debe conocer aspectos de otras ramas, para esto busca respuestas ante las preguntas que surgen en otras ramas, las cuales

le serviran como herramientas para en-frentar el proyecto de la mejor manera y con una visión amplia al informarce.

Diseñar

Bibliotecología

SociologíaAntropología

LingüísticaPsicología

EstadisticasMarketing

clase 311 / julio

La creación de una imagen corpotativa podriamos tomarla como ejemplo de lo mencionado con respecto a cómo el diseñador acude a otras ramas. La imagen corporativa corresponde a la imagen que representa lo que una com-pañia significa. Para lograr este ejercicio en función de la percepción, la imagen corporativa es creada por expertos en el area del marketing, en conjunto con diseñadores y otros profesionales del area de las comunicaciones. El fin de la creación de unaimagen corporativa es que sea atractiva para el público

clase 418 / julio

Usabilidad

La usabilidad la encontramos en el se-gundo momento de la rueda del proyec-to y como parte importante del diseño es la experiencia misma de:

· MEDIR· ESTUDIAR· ANALIZAR· CONOCER· MODIFICAR.

La evaluación a la cual es expuesto el objeto es a la experiencia misma de la utilización que le dará el usuario.Es por eso que la usabilidad establece-rá elementos a considerar luego de un estudio en donde se aplican los puntos nombrados arriba.El modelo conceptual de la usabilidad proviene del diseño centrado en el usua-

rio. Podemos decir que el diseño es lo incorporado al proceso técnico como un valor agregado, pero aun así, este valor es de gran importancia, ya que, del diseño del objeto dependerá el éxi-to que puede conseguir en la excelente captación por parte del usuario.

Definiciones de Usabilidad:

La Organización Internacional para la Estandarización (ISO) ofrece dos defini-ciones de usabilidad:

ISO/IEC 9126:

“La usabilidad se refiere a la capacidad de un software de ser comprendido, aprendido, usado y ser atractivo para el usuario, en condiciones específicas de

clase 418 / julio

uso”

ISO/IEC 9241:

“Usabilidad es la eficiencia y satisfac-ción con la que un producto permite alcanzar objetivos específicos a usua-rios específicos en un contexto de uso específico”.

Existen distintos tipos de evaluaciones, algunos de ellos son:

Test de usuarios:

Corresponde a la observación de como el usuario se comporta frente a la reali-dad del sitio, a partir de este estudio se pueden elaborar pautas según lo que el usuario de prueba fue capaz de captar y lo que no logró comprender.

Expert Review:

Se entiende por Expert Reviwe a un

tipo de evaluación por parte de usua-rios con características de expertos dentro del area al cual son expuestos. Estos expertos, al realizar el Test, son los que proponen los criterios a seguir a partir de las ventajas y desventajas que presenta lo evaluado.

Eyestracking:

Consiste en un tipo de evaluación el cual se centra netamente en donde se fija la mirada. A partir de esta evalua-ción nos encontramos con los elemen-tos que son más llamativos (por un

estado inconciente).

Heurística de expertos:

La evaluación de tipo Heurística es el análisis del proyecto por parte de ex-

pertos en usabilidad, lo que se preten-de con esto es conseguir cifras con lo que respecta a problemas que puede presentar. Se dice que el nivel más optimo de un proyecto es de un 75% en el reconocimiento de problemas de usabilidad.

Accesibilidad:

Es la capacidad que le entrega el di-seño para que lo evaluado sea acce-sible a la mayor cantidad de usuarios posible.

clase 418 / julio

clase 525 / julio

Arquitectura de la información

La Arquitectura de la información es el tercer momento dentro del proceso del proyecto, se puede decir que reco-ge todo lo que ha arrojado los distintos Test por los que ha pasado el proyecto y en este paso nos encargamos de es-tructurar a partir de qué es lo más im-portante, qué es lo escencial, pasa así darle forma a la interfaz que estamos trabajando.

El modo en que se ordena la informa-ción que se transmite a traves de un medio es muy importante de considerar si se está estableciendo una comunica-ción entre el diseño y el usuario

En la arquitectura de la información es necesario que el usuario logre encontrar este nexo entre el sistema y si mismo,

para esto el diseñador piensa en entre-garle el gobierno absoluto como suce-de en los sitios webs.

Se entiende por Experiencia del Usuario el conjunto de factores y ele-mentos que determinan la interacción satisfactoria del usuario con un entorno o dispositivo concretos y son capaces de generar en él un conjunto de emo-ciones positivas sobre el sitio y su uso.

clase 525 / julio

Edward Rolf Tufte

Es defensor del minimalismo en la re-presentación gráfica de datos y de la eliminación de todo tipo de atributo que estorbe su comprensión. Propugna un estilo sobrio en el que prime la informa-ción sobre el adorno

¿Cómo transformamos la informa-ción en comunicación?

Se podría decir que se trae la informa-ción como en una especie de base de

datos y la podemos transformar en el sentido en que la graficamos a a tra-vés de capas de información, de esta manera se ordena y la convertimos en comunicación.

clase 601 / agosto

Modos del color

Existen dos modelos para trabajar el color en medio digitales: CMYK, abreviatura de Cyan, Magenta, Ye-llow & Key o Black; y RGB que es la sigla de “Red, Green & Blue”.

CYMYK: La mezcla de colores CMY ideales es sustractiva (pues imprimir cian, magenta y amarillo en fondo blanco resulta en el color negro). El modelo CMYK se basa en la absorción de la luz. El color que presenta un objeto corresponde a la parte de la luz que incide sobre este y que no es absor-bida por el objeto.El cian es el opuesto al rojo, lo que significa que actúa como un filtro que absorbe dicho color (-R +G +B).

Magenta es el opuesto al verde (+R -G +B) y amarillo el opuesto al azul (+R +G -B).

RBG: El código de colores aditivos RGB, rojo - verde - azul, se basa en la mezcla de estos 3 colores para conseguir toda la gama completa. Cada uno de los colo-res toma un valor entre 0 y 255, un to-tal de 256, con los que se consigue un total de 256 x 256 x 256 = 16.777.216 colores distintos.

Este valor se representa en hexadeci-mal, con lo que el rango va de 00 a FF por cada uno de ellos. El código se ex-presa así: #RRGGBB siendo cada uno de los valores de 2 cifras el rango de

de los 3 colores, con lo que optenemos el valor final que representa a cada color. Se puede mapear un color RGB dado a uno de los muchos colores CMYK semi-equivalentes posibles. La mejor opción es aquella que hace uso de K lo máximo posible, y proporciones res-tantes de CMY lo menos posible. A su vez para convertir entre RGB y CMYK, se utiliza un valor CMY intermedio. Los valores de color se representan como un vector, pudiendo variar cada uno de ellos entre 0.0 (color inexistente) y 1.0 (color totalmente saturado).

Tono continuo:

Las imágenes calificadas en tono conti-nuo corresponde a imágenes con gran riqueza de grises o colores, los cuales se funden unos con otros de forma que es inperceptible para el ojo, esto crea una fotografía más limpia que una ima-gen de medio tono.

RBG CMYK

clase 601 / agosto

Medio tono:

La composición de una imagen de medio tono es distinta, ya que se con-truye a partir de puntos alineado con distintos tamaños: grandes para tonos oscuros, medianos tono intermedios y pequeños para tonos más claros.

DPI: (Dots per inch)

es una unidad de medida aplicable a las impresiones del medio digital y corres-ponde a la cantidad de puntos de tin-ta existentes en un rango lineal de una pulgada.Mientras mayor cantidad de DPI se tra-ducen dentro de una imagen, mayor calidad y nitides tendrá la impresión, como ejemplo podemos decir que una impresora de matices aplica entre 30 y 60 dpi y que una impresora inyección e tinta lo hará hacia los 300 dpi, mien-tras que una laser estará entre los 600 a 1200 dpi.

LPI: (lines per inch)

corresponde a otro factor de medida de la imagen, esta vez centrado en las líneas que contiene la impresión, mien-tras más líneas posee mayor calidad y nitidez contiene la imagen.

clase 601 / agosto

clase 708 / agosto

Formatos de imagen

Imagenes Scanner:

El Scaneo de imagenes, las cuales nor-malmente son RGB son enviadas me-diante una interfaz entrada/salida. La calidad de la imagen dependerá de las características del vector escaneado, que por lo general es de 24 bits.Además, se puede medir la calidad de una imagen escaneada mediante la ca-lidad de su resolución, medida en dpi.El resultado de la imagen correspon-de a una archivo manejable dentro del computador, el cual puede ser editado en photoshop. Se aconseja que en un primer momento sea el scanner el que se ocupe de la calidad de imagen (re-solución, bits, colores, etc) más que el tratado de la imagen dentro del com-putador.

Imagenes Scanner:

El Scaneo de imagenes, las cuales nor-malmente son RGB son enviadas me-diante una interfaz entrada/salida. La calidad de la imagen dependerá de las características del vector escaneado, que por lo general es de 24 bits.Además, se puede medir la calidad de una imagen escaneada mediante la ca-lidad de su resolución, medida en dpi.El resultado de la imagen correspon-de a una archivo manejable dentro del computador, el cual puede ser editado en photoshop. Se aconseja que en un primer momento sea el scanner el que se ocupe de la calidad de imagen (re-solución, bits, colores, etc) más que el tratado de la imagen dentro del com-putador.

Dentro de un archivo de imagen se res-catará la mayor cantidad de informa-ción, dependiendo del tipo de archivo con el cual se está trabajando.De este modo podemos hablar de dis-tintos tipos de archivo para imagenes, los cuales, dependiendo de su tamaño serán capaces de contener mayor infor-mación a mayor peso, o menor informa-ción a menor peso. Esto dependerá del uso que se le quiere dar a la imagen.

Algunos tipos de archivos de ima-gen:

JPEG: (jpg)

Algoritmo creado para almacenar ar-chivos de 24 bits de profundidad o en escala de grises. Corresponde a un ar-chivo de compresión con perdida, esto significa que al descomprimir la imagen, no obtendremos la misma información que teniamos al comprimirla.Este tipo de Archivo es popular den-

tro de internet, debido a su peso livia-no/medio y una calidad considerable. Hay que considerar que la compresión de imagenes que contengan gráficos y textos tiende a perder muchisima infor-mación por lo que no es aconsejable trabajarlo en jpg.

GIFF:

Formato gráfico muy utilizado en inter-net debido a su capacidad para trans-mitir imagenes y animaciones en peso liviano.Posee una profundidad de color de 8 bits, permite transparencia de 1 bit, esto significa que cada pixel puede ser transparente o no.

PNG:

A diferencia de JPG, este algoritmo po-see la cualidad de compresión sin perdi-da. El formato PNG permite trabajar en transparencias y canales alfa, además

clase 708 / agosto

de posibles arreglos en gamma.

TIFF:

Formato de archivo de imágenes con etiquetas. El archivo Tiff contiene, ade-más de los datos de imagenes como tal, etiquetas, de este modo es posi-ble tratar la imagen posteriormente sin perder información, tanto de la imagen como de las “capas” que contiene.

RAW:

es un poderoso formato de imagen que

es capaz de contener toda la informa-ción de los datos que han sido capta-dos por los sensores de la camara fo-tográfica. El formato RAW, debido a su captación de gran profundidad del color es capaz de captar de 30 a 36 bits/pixel. Debido a que el formato es capaz de contener toda esta información, es un archivo demasiado grande.

clase 708 / agosto

clase 822 / agosto

Pre-prensa digital

La pre-prensa corresponde a todo el proceso digital previo a la impresión. Dentro de este proceso el diseñador se encarga de crear todo lo visible y no visible de un trabajo, de este modo podemos nombrar la selección de tipo-grafía, en la que consideramos colum-nas, tamaños, cuerpo, etc; conjunto con esto está la imagen, la cual, para pre-prensa aun no es definitiva y puede y debe de pasar por distintos proce-sos, es por esto que se suele trabajar con archivos que permitan conservar toda la información, ya sea de imagen como etiquetas (ejemplo: capas para photoshop). A partir de la definición de todo lo correspondiente a los distintos elementos comienza un paso en donde las cosas comienzan a formar parte del espacio en donde serán mostradas, a

pre-prensa

de esto surgen plantillas, las cuales son trabajadas en programas como InDe-sign o Quarkxpress y se encargan de contener los elementos según las pau-tas de cada plantilla.

Al momento de enviar un archivo a la im-prenta es necesario contar con algunos consideraciones, como por ejemplo, que el sistema de la imprenta no con-tenga las tipografías designadas para la impresión, por lo que generalmente se adjuntan, al archivo .ing o .qx la fuente. Además se suele usar códigos dentro de la plantilla misma en donde se acla-ran notas sobre la tipografía.

clase 822 / agosto

he R 10/12 n100Este código explica que la fuente está en Helvética, Regular, de cuerpo 10 e interli-neado 12 y es negra en 100%.

Comunmente, para evitar estos proble-mas, se creo el formato pdf, el cual co-rresponde a un formato de almacena-miento de documentos, este formato es de tipo compuesto ya que dentro de si contiene elementos de tipo vectoriales, imágenes, textos, etc.

TAREA29 / agosto

Cascada de estilos.

La cascada de estilos corresponde a la forma que le daremos a un texto. Tiene mucho que ver con la semántica puesto que con el estilo que se le da al texto, le estamos entregando un sentido de di-seño, el diseñador, con la cascada de estilos busca que el texto sea consumi-ble para el usuario.

Se considera como una cascada de es-tilo en una tipografía la consideración, tanto de la letra como del espacio que usa dicho texto. De acuerdo a esto, el diseñador, dependiendo del texto selecciona un tipo de fuente, cuerpo, interlineado, color, tipo de letra (altas, bajas o versalitas), etc; por otro lado se considera el cómo va dispuesto estas características, alineada, tamaño, már-genes.

css

Off-line

Internet

Movil

TV-digital

contenido Diseño

TAREA29 / agosto

lo dicho anteriormente corresponde a la base del mundo online en lo que res-pecta a las cascadas de estilos.

Dentro del mundo online se denomina CSS (Cascading Style Sheets) a la hoja que compone los estilos.El CSS es un lenguaje formal usado para definir la presentación de un do-cumento estructurado escrito en HTML o XML (y por extensión en XHTML). El W3C (World Wide Web Consortium) es el encargado de formular la especifica-ción de las hojas de estilo que servirán de estándar para los agentes de usuario o navegadores.Existen tres tipos de insertar la CSS en el desarrollo de un sitio.

Estilo Externo:

Este estilo separa el codigo CSS del HTML en dos archivos diferentes, es la forma de programar más ordenada puesto que separa todo lo que corres-

ponde al texto de todo lo que es forma-to que le daremos a dicho texto.

Estilo Interno:

que es una hoja de estilo que está in-crustada dentro de un documento HTML. (Va a la derecha dentro del ele-mento <head>). De esta manera se ob-tiene el beneficio de separar la informa-ción del estilo.

Estilo en linea:

Es un método para insertar el lenguaje de estilo de página, directamente, den-tro de una etiqueta HTML.

h1 { color: red; text-decoration: underline; }p { text-indent: 20px; border: 1px dotted gray; line-height: 200%; }

estructura general de una linea de código de HTML.

Estructura de codigo CSS

Ejemplo de codigo HTML

TAREA29 / agosto

31 / Agosto /2008. Entrega de Bitácora LC1

Waldo Ignacio López MarcosDiseño Gráfico 2º año.

Profesor: Jorge Barahona.