BITACORA LC1Waldo Ignacio Lpez Marcos / Diseo Grfico 2 ao.

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 diseo

Estrategias

Tcnicas de medios digitales

Usabilidad

Arquitectura de la informacin.

Modos del color.

Formatos de imagen.

Pre-prensa digital.

clase 127 / junio

Estrategias del Diseo

INTRODUCCIN.

Todo proyecto de diseo implica dos partes fundamentales; por un lado est el cliente quin tiene una inquietud ha resolver, y por otro lado est el disea-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 estratgico en donde el cliente, en po-cas palabras, entrega informacin de lo

que quiere lograr.

BENCHMARK: Consiste en analisis proyectos existentes (competencia) de lo que surgen guas 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 diseo, publicacin de dudas, contacto y tareas que se nos dan en las clases.

http://losdigitales.com Comunidad en la cual diseadores de todo el mundo presentan proyectos y conversan sobre temas de diseo. 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 pblicar 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 (tambin denominados tweets) basados en texto, con una longitud mxima de 140 caracteres, donde ge-neralmente se responde a la pregunta Qu ests haciendo?.

http://flickr.comes un sitio web para compartir imgenes sobre todo fotogrficas. 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 aadiremos nuevos aspectos necesarios.

Briefing: Se podra hablar de brief como un documento, elaborado por la agencia de diseo/publicidad, el cual se basa en informacin necesaria tanto de la empresa (historia) como la finalidad del proyecto (de qu trata, precio del proyecto, medios de distribucin y/o la finalidad que tiene la marca) para esto, la agencia hace uso de esta herramien-ta para crear un lazo de comunicacin entre esta y la empresa.

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

ponde al pblico objetivo. El proyecto va dirigida a este grupo de personas.

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

Benchmark: Es una tcnica 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, adems de contar con las ventajas.

Presentacin: Consiste en una pre

sentacin 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 prctica todas estas he-rramientas en la formacin de dos gru-pos de trabajos, los cuales simularn la experiencia de trabajar con los recur-sos entregados, segn lo dicho ante-riormente, el grupo tendr una sema-na para elaborar un Brief, Tabla Gantt, Benchmark y posterior presentacin 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

Tcnicas de medios digitales

Ya que todo proyecto de diseo va diri-gido a un usuario determinado, ya sea para un grupo especfico o ms amplio, el diseador 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 pblico, esta sea capaz de ma-nejar el sistema (o el objeto de diseo) 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 diseada. Cuando esto llega a cumplirse, el trabajo del diseador se considera cumplido.Para llegar a lo que he nombrado an-teriormente, el diseador 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 visin amplia al informarce.

Disear

Bibliotecologa

SociologaAntropologa

LingsticaPsicologa

EstadisticasMarketing

clase 311 / julio

La creacin de una imagen corpotativa podriamos tomarla como ejemplo de lo mencionado con respecto a cmo el diseador acude a otras ramas. La imagen corporativa corresponde a la imagen que representa lo que una com-paia significa. Para lograr este ejercicio en funcin de la percepcin, la imagen corporativa es creada por expertos en el area del marketing, en conjunto con diseadores y otros profesionales del area de las comunicaciones. El fin de la creacin de unaimagen corporativa es que sea atractiva para el pblico

clase 418 / julio

Usabilidad

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

MEDIR ESTUDIAR ANALIZAR CONOCER MODIFICAR.

La evaluacin a la cual es expuesto el objeto es a la experiencia misma de la utilizacin 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 diseo centrado en el usua-

rio. Podemos decir que el diseo es lo incorporado al proceso tcnico como un valor agregado, pero aun as, este valor es de gran importancia, ya que, del diseo del objeto depender el xi-to que puede conseguir en la excelente captacin por parte del usuario.

Definiciones de Usabilidad:

La Organizacin Internacional para la Estandarizacin (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 especficas de

clase 418 / julio

uso

ISO/IEC 9241:

Usabilidad es la eficiencia y satisfac-cin con la que un producto permite alcanzar objetivos especficos a usua-rios especficos en un contexto de uso especfico.

Existen distintos tipos de evaluaciones, algunos de ellos son:

Test de usuarios:

Corresponde a la observacin de como el usuario se comporta frente a la reali-dad del sitio, a partir de este estudio se pueden elaborar pautas segn 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 evaluacin por parte de usua-rios con caractersticas 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 evaluacin el cual se centra netamente en donde se fija la mirada. A partir de esta evalua-cin nos encontramos con los elemen-tos que son ms llamativos (por un

estado inconciente).

Heurstica de expertos:

La evaluacin de tipo Heurstica es el anlisis 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 ms optimo de un proyecto es de un 75% en el reconocimiento de problemas de usabilidad.

Accesibilidad:

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

clase 418 / julio

clase 525 / julio

Arquitectura de la informacin

La Arquitectura de la informacin 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 ms im-portante, qu es lo escencial, pasa as darle forma a la interfaz que estamos trabajando.

El modo en que se ordena la informa-cin que se transmite a traves de un medio es muy importante de considerar si se est estableciendo una comunica-cin entre el diseo y el usuario

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

para esto el diseador 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 interaccin 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-presentacin grfica de datos y de la eliminacin de todo tipo de atributo que estorbe su comprensin. Propugna un estilo sobrio en el que prime la informa-cin sobre el adorno

Cmo transformamos la informa-cin en comunicacin?

Se podra decir que se trae la informa-cin como en una especie de base de

datos y la podemos transformar en el sentido en que la graficamos a a tra-vs de capas de informacin, de esta manera se ordena y la convertimos en comunicacin.

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 absorcin 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 acta 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 cdigo 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 cdigo 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 opcin es aquella que hace uso de K lo mximo 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 imgenes calificadas en tono conti-nuo corresponde a imgenes 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 fotografa ms limpia que una ima-gen de medio tono.

RBG CMYK

clase 601 / agosto

Medio tono:

La composicin de una imagen de medio tono es distinta, ya que se con-truye a partir de puntos alineado con distintos tamaos: grandes para tonos oscuros, medianos tono intermedios y pequeos para tonos ms 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 impresin, como ejemplo podemos decir que una impresora de matices aplica entre 30 y 60 dpi y que una impresora inyeccin 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 lneas que contiene la impresin, mien-tras ms lneas 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 caractersticas del vector escaneado, que por lo general es de 24 bits.Adems, se puede medir la calidad de una imagen escaneada mediante la ca-lidad de su resolucin, 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-solucin, bits, colores, etc) ms 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 caractersticas del vector escaneado, que por lo general es de 24 bits.Adems, se puede medir la calidad de una imagen escaneada mediante la ca-lidad de su resolucin, 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-solucin, bits, colores, etc) ms que el tratado de la imagen dentro del com-putador.

Dentro de un archivo de imagen se res-catar la mayor cantidad de informa-cin, 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 tamao sern capaces de contener mayor infor-macin a mayor peso, o menor informa-cin 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 compresin con perdida, esto significa que al descomprimir la imagen, no obtendremos la misma informacin 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 compresin de imagenes que contengan grficos y textos tiende a perder muchisima infor-macin por lo que no es aconsejable trabajarlo en jpg.

GIFF:

Formato grfico 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 compresin sin perdi-da. El formato PNG permite trabajar en transparencias y canales alfa, adems

clase 708 / agosto

de posibles arreglos en gamma.

TIFF:

Formato de archivo de imgenes con etiquetas. El archivo Tiff contiene, ade-ms de los datos de imagenes como tal, etiquetas, de este modo es posi-ble tratar la imagen posteriormente sin perder informacin, 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-cin de los datos que han sido capta-dos por los sensores de la camara fo-togrfica. El formato RAW, debido a su captacin 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 informacin, 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 impresin. Dentro de este proceso el diseador se encarga de crear todo lo visible y no visible de un trabajo, de este modo podemos nombrar la seleccin de tipo-grafa, en la que consideramos colum-nas, tamaos, 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 informacin, ya sea de imagen como etiquetas (ejemplo: capas para photoshop). A partir de la definicin de todo lo correspondiente a los distintos elementos comienza un paso en donde las cosas comienzan a formar parte del espacio en donde sern 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 segn 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 tipografas designadas para la impresin, por lo que generalmente se adjuntan, al archivo .ing o .qx la fuente. Adems se suele usar cdigos dentro de la plantilla misma en donde se acla-ran notas sobre la tipografa.

clase 822 / agosto

he R 10/12 n100Este cdigo explica que la fuente est en Helvtica, 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, imgenes, 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 semntica puesto que con el estilo que se le da al texto, le estamos entregando un sentido de di-seo, el diseador, 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 tipografa la consideracin, tanto de la letra como del espacio que usa dicho texto. De acuerdo a esto, el diseador, 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 cmo va dispuesto estas caractersticas, alineada, tamao, mr-genes.

css

Off-line

Internet

Movil

TV-digital

contenido Diseo

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 presentacin de un do-cumento estructurado escrito en HTML o XML (y por extensin en XHTML). El W3C (World Wide Web Consortium) es el encargado de formular la especifica-cin de las hojas de estilo que servirn de estndar 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 ms 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 ). De esta manera se ob-tiene el beneficio de separar la informa-cin del estilo.

Estilo en linea:

Es un mtodo para insertar el lenguaje de estilo de pgina, 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 cdigo de HTML.

Estructura de codigo CSS

Ejemplo de codigo HTML

TAREA29 / agosto

31 / Agosto /2008. Entrega de Bitcora LC1

Waldo Ignacio Lpez MarcosDiseo Grfico 2 ao.

Profesor: Jorge Barahona.