1 Estética para Entornos Virtuales UNAD 205111 ESTÉTICA PARA ENTORNOS VIRTUALES ESPECIALIZACION EN EDUCACION SUPERIOR A DISTANCIA UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA – UNAD AUTOR CRISTHIAN ANTONIO SALAMANCA GARCÍA 2008 © Autor: Cristhian Salamanca 2 Estética para Entornos Virtuales UNAD CONTENIDO INTRODUCCIÓN AL MODULO UNIDAD I: LENGUAJE VISUAL INTRODUCCIÓN A LA UNIDAD CAPÍTULO 1: ESTÉTICA Y DISEÑO LECCIÓN 1: LA ESTÉTICA Y LA PERCEPCIÓN DE BELLEZA I LECCIÓN 2: LA ESTÉTICA Y LA PERCEPCIÓN DE BELLEZA II LECCIÓN 3: DISEÑO NO ES SÓLO DECORACIÓN LECCIÓN 4: PAUL RAND Y JOHN MAEDA LECCIÓN 5: ELEMENTOS DEL DISEÑO CAPÍTULO 2: LOS COMPONENTES DEL DISEÑO I LECCIÓN 1: LA CUADRÍCULA LECCIÓN 2: PRINCIPIOS DEL DISEÑO I LECCIÓN 3: PRINCIPIOS DEL DISEÑO II LECCIÓN 4: TEORÍA DEL COLOR I LECCIÓN 5: TEORÍA DEL COLOR II CAPÍTULO 3: LOS COMPONENTES DEL DISEÑO II LECCIÓN 1: TIPOGRAFÍA I LECCIÓN 2: TIPOGRAFÍA II LECCIÓN 3: GRÁFICA WEB LECCIÓN 4: COLORES WEB LECCIÓN 5: ESTILO VISUAL Autor: Cristhian Salamanca 3 Estética para Entornos Virtuales UNAD UNIT II: ESTÉTICA APLICADA INTRODUCCIÓN A LA UNIDAD CAPÍTULO 1: DISEÑO VISUAL EN ACCIÓN LECCIÓN 1: FORMA Y CONTENIDO LECCIÓN 2: TIPOS DE SITIOS WEB EDUCATIVOS LECCIÓN 3: HTML LECCIÓN 4: CSS LECCIÓN 5: MANEJO DEL TEXTO PARA LA WEB CAPÍTULO 2: PREPRODUCCIÓN WEB LECCIÓN 1: ASPECTOS BÁSICOS DEL DISEÑO DE INTERFAZ LECCIÓN 2: DISEÑO DE INFORMACIÓN LECCIÓN 3: OBJETIVOS LECCIÓN 4: AUDIENCIA LECCIÓN 5: HERRAMIENTAS CAPÍTULO 3: PRINCIPIOS DEL DISEÑO DIGITAL LECCIÓN 1: PLANEACIÓN, ORGANIZACIÓN Y FLUJOGRAMA LECCIÓN 2: DISEÑO INTERACTIVO LECCIÓN 3: NAVEGABILIDAD LECCIÓN 4: USABILIDAD LECCIÓN 5: FUNCIONALIDAD Autor: Cristhian Salamanca 4 Estética para Entornos Virtuales UNAD INTRODUCCIÓN AL MODULO En el mundo en que vivimos, cada vez más son las personas que reciben educación visual a través de los diferentes medios de comunicación- televisión, Internet, cines, periódicos, revistas, youtube, etc.- generando que cada nuevo producto diseñado trate de cumplir con estándares y objetivos que le permitan llevar el mensaje de manera efectiva. De toda ésta gran masa de medios, son los medios digitales- o también llamados virtuales- los que han revolucionando la forma en que los seres humanos nos comunicamos, permitiendo que personas de distintas razas, color de piel y credos puedan confluir en un mismo escenario con objetivos similares. Por ésta razón es importante hablar de la Estética que deben tener los productos diseñados para este medio. La Estética- o la ciencia de lo bello- es un palabra que se deriva de las voces griegas αισθητική (aisthetikê) “sensación”, percepción”, de αἴσθησις (aisthesis) “sensación, sensibilidad”, e ικά (ica) “relativo a”. La estética estudia las razones y las emociones que genera una pieza de arte. La estética es también una reflexión sobre el arte, analizando filosóficamente los valores que en ella están contenidos. En otras palabras la Estética nos permite evaluar nuestro sentido del gusto y sentimientos. Pero, estamos hablando de la estética orientada a los ambientes virtuales, dónde claramente no se habla de arte sino del diseño visual. Entonces ¿Es el diseño arte? Es una pregunta que ha generado cualquier tipo de controversias, ya sea a favor o en contra, se ha convertido en un debate clásico del diseño. “La palabra “arte” contiene en sí misma dos significados, que si bien no son radicalmente opuestos, sí nos dan la clave para analizar la ambivalencia actual cuando se habla comúnmente de arte. Principalmente, “arte” corresponde al termino griego “techné” es decir a la técnica o al modo de hacer algo. En la tradición latina, el término “ars” integra igualmente esta habilidad para hacer algo, sólo que se refiere más concretamente, al modo de aplicar las técnicas en un oficio determinado. Por su parte, el término anglosajón “design”, no sufre tanta ambigüedad en su empleo. Como verbo, tiene su origen del latín designare, que en castellano significa designar, señalar o destinar a alguien o a algo para un fin determinado; como sustantivo, hay una evolución interesante en el siglo XVIII dentro de la lengua francesa con la distinción de dos palabras que se pronuncian igual: “dessin” (dibujo) y “dessein” (proyecto), distinción que perfila al diseño como una Autor: Cristhian Salamanca 5 Estética para Entornos Virtuales UNAD actividad con una significación muy particular: proyecto. Design es un verbo que se refiere entonces al proceso del desarrollo de un plan que busca la creación de algo nuevo con una utilidad definida; el diseño es a la vez el proyecto y el producto terminado”1. Teniendo en cuenta la definición epistemológica de ambos términos podemos concluir que sí, el diseño es un arte. Y lo es porque aplica una serie de técnicas de acuerdo a su oficio. Muchos expertos dirán que no lo es. El problema surge, no en la palabra arte, sino más bien en lo que generalmente entendemos y queremos dar a entender cuando hablamos de arte, que generalmente se relaciona con el placer estético que produce una obra o un objeto determinados; el problema surge cuando se asocia la palabra arte a lo bello. Por ejemplo, un artista trabaja para si mismo con libertad buscando que lo que realice luzca bello, mientras que el diseñador no lo hace para sí mismo, sino para suplir la necesidades de un mercado y una audiencia, utilizando lo bello como un instrumento utilitario para lograr un objetivo, más no como un fin. Que el resultado de este proceso-proyecto pueda resultar muchas veces estéticamente placentero, no lo desliga nunca de su objetivo. Como vemos, el propósito del curso es comprender que el papel que juega el diseño un proyecto educativo virtual parte de objetivos claros y específicos determinados en el momento de definición del proyecto. Pero también demuestra y expone que para poder llevar a cabo dicha labor de diseño, se debe comprender sus orígenes, principios y componentes fundamentales, pues no puede darse como resultado un diseño funcional sino se conocen las partes fundamentales del mismo. Todo lo anterior dará como resultado que el estudiante y entusiasta en la materia concluya que el diseño es una estética utilitaria que aplica no solo en otras disciplinas sino también en los ambientes virtuales. A continuación el curso desarrolla dos unidades didácticas. La primera unidad es un recorrido conceptual acerca de los conceptos de estética y diseño, desde sus primeras manifestaciones en la historia sociocultural del hombre, basándose en culturas, civilizaciones y eventos importantes; luego se analiza de manera más precisa el significado del diseño, sus principios, y el por que diseñar va más allá de crear simples figuras; posteriormente en el capítulo dos se habla sobre los componentes del diseño, sus elementos, y la teoría del color; en el capítulo tres se continúa con el análisis y comprensión de los componentes del diseño con el estudio de la tipografía, gráficos para Web, colores Web, y el estilo visual para ambientes virtuales. En resumen la propuesta de la primera unidad es el estudio y comprensión del diseño gráfico. 1 En: http://foroalfa.org/es/articulo/82/Diseno_o_estetica_utilitaria Autor: Cristhian Salamanca 6 Estética para Entornos Virtuales UNAD La segunda unidad responde en primer lugar a las inquietudes de ¿Cómo realizar un proyecto Web educativo? Se dan las bases para el entendimiento de lenguajes como HTML y CSS, y se hace un fuerte énfasis en el uso del texto para la Web. Seguido, se habla sobre la IGU (Interfaz Gráfica de Usuario) y sus consideraciones al momento de planear un proyecto con destino a un ambiente virtual. Se establecen los principios y las bases para un efectivo desarrollo Web. Es importante aclarar que estos principios son similares al desarrollo multimedia, cuando la multimedia está orientada hacia la interactividad. En ambos capítulos se explican conceptos acompañados de ejemplos para un mejor entendimiento. Metodológicamente el curso desarrolla un modelo constructivista en el cual a través de cada una de las actividades, se construirá trabajos de forma individual, así como trabajos de forma colaborativa en grupos, basados en los actos de lectura y comprensión individual, para presentar un producto final al tutor del curso. Este ejercicio en la evaluación permitirá desarrollar tres etapas fundamentales la autoevaluación como revisión individual y continuada del que hacer de cada estudiante frente al curso, una coevaluación la cual permite contribuir al otro en su formación, en su revisión y mejoramiento de un trabajo con calidad y pertinencia; y por supuesto no puede faltar la heteroevaluación, la revisión del tutor quien como orientador realiza un acompañamiento en la formación de sus estudiantes y refleja en este tipo de evaluación el punto de vista construido en conjunto. Autor: Cristhian Salamanca 7 Estética para Entornos Virtuales UNAD ¡Bienvenidos! Autor: Cristhian Salamanca 8 Estética para Entornos Virtuales UNAD UNIDAD I LENGUAJE VISUAL INTRODUCCIÓN Diseñar es una actividad para solucionar problemas. El diseño ha estado inherente e implícito en la historia de la humanidad desde tiempos antiguos. Las antiguas civilizaciones se vieron – al igual que nuestra civilización actual – en la necesidad de diseñar en numerosas ocasiones. Es así como después de varios intentos fallidos y efectivos, los hombres se dieron cuenta que necesitaban diseñar estrategias para conseguir su alimento de forma segura al salir a cazar. Cuando los cambios de clima se presentaban, diseñaron vestidos que los protegieran del frío, o les ayudaran a estar frescos en el verano. En la actividad de cultivo, el hombre aprendió a contar los ciclos, y para no olvidarse de ellos, diseño calendarios para contar el tiempo. Así mismo cuando en las comunidades surgían problemas de robo, abuso de autoridad o traición, diseñaron políticas o mandamientos, para que así pudieran vivir con relativa armonía. Si analizamos los casos mencionados anteriormente – problemas u oportunidades – en los cuales el diseño ha sido parte fundamental, hay un componente común para todos: lo visual. El hombre pintó en las cavernas la forma en que ellos cazaban; los vestidos se veían y cumplían ciertas normas – por lo menos con la de cubrir las partes intimas; los calendarios fueron piezas visibles – mayas y egipcios – dónde se podía observar en qué momento cultivar; las leyes se escribieron en pergaminos para que fueran leídas. De ahí en adelante, el hombre y la mujer por igual, desarrollarían un gusto por las cosas, algunas bellas otras no. En esta unidad hablaremos claramente del lenguaje visual. En el capítulo 1 empezaremos con la definición de dos conceptos que muchas veces se confunden y se aplican equivocadamente, son los conceptos de estética y belleza. Comprender estos conceptos le ayudará a apreciar el mundo y la vida misma. Estos dos conceptos nos brindarán la oportunidad de explorar la creatividad que puede ser expresada por cada ser humano. Luego de entender que el hombre se expresa como resultado de aquello que lo rodea, se explicará por que el diseño es un concepto más profundo, de alto significado y funcionalidad y que no es una decoración. Posteriormente se analizaran conceptos y elementos esenciales del diseño. Autor: Cristhian Salamanca 9 Estética para Entornos Virtuales UNAD Teniendo en cuenta que diseñar es una actividad que consume mucho tiempo, es necesario comprender y conocer que hace parte del diseño visual para ambientes virtuales, por eso en los capítulos 2 y 3, se expondrán de manera detalla los componentes del diseño, tales como: la cuadrícula, los principios del diseño, la teoría del color, la tipografía. Luego de manera más detallada nos referiremos al diseño web, hablando sobre las gráficas y colores web, así como los estilos visuales que se pueden aplicar. En resumen, la propuesta de esta unidad es comprender las bases teóricas del diseño visual, sus principios y tendencias, para así aplicar estos principios en la vida real del diseño de ambientes virtuales educativos OBJETIVO Qué el estudiante se apropie y comprenda los conceptos epistemológicos básicos del diseño visual a partir de la exposición de conceptos, principios y teorías propias de la materia. COMPETENCIA El estudiante reconoce los fundamentos básicos para el diseño de entornos virtuales en el manejo de color, fuentes tipográficas, formas, etc., entendiendo que diseñar es comunicar conceptos e ideas, y que un buen diseño llena expectativas. Autor: Cristhian Salamanca 10 Estética para Entornos Virtuales UNAD CHAPTER 1 ESTÉTICA Y DISEÑO LECCIÓN 1: LA ESTÉTICA Y LA PERCEPCIÓN DE BELLEZA I “La Belleza es un tipo de genio – está más allá, o supuesto, que un genio, y no necesita explicación. Es grandes hechos como la luz del sol, o la primavera o la reflexión en el agua oscura de esa concha plateada que llamamos luna.” - Oscar Wilde Han habido muchos artistas, filósofos, poetas, pensadores y muchos otros que han tratado de definir el termino de 'Belleza'. Esta es la razón por la que tenemos hoy en día muchas escuelas de pensamiento, así como reflexiones sobre la naturaleza y la percepción de la belleza, que nos han dejado con la confusión y consternación. La pregunta que nos queda es - Entonces ¿qué es la belleza? ¿Qué es la belleza y la estética? Belleza es, en efecto, un término amplio para definir. Desde la Edad Media la belleza se ha asociado con la naturaleza y al arte y en una medida aún hoy en día, sin embargo, la razón por la que percibimos la belleza en un objeto o una experiencia, es una cuestión subjetiva. La mayoría de las veces las cosas que no entendemos las consideramos feas. Por ejemplo las pinturas de Picasso, para el profano pueden no reflejar la belleza, por más que han sido aclamadas a nivel mundial. Así lo que se considera hermoso es totalmente una cuestión subjetiva, porque la belleza reside en el ojo del espectador. "John Armstrong en su libro „El Secreto del Poder de la Belleza: ¿Por qué la felicidad está en el ojo del espectador?‟ afirma, que el error de la posición subjetiva, es que asume que todas las respuestas son iguales. En realidad, hay una gran diferencia en “la calidad de las respuestas” de alguien que nunca ha escuchado antes de Bach y pronuncia que está aburrido después de 30 segundos, y alguien con una gran comprensión de la música que escucha de cerca y cree sinceramente que es hermoso. Hay muchos tipos de respuestas de alta calidad, lo que sirve para los muchos desacuerdos acerca de lo que es bello, pero estos no deben ser comparados con las respuestas basadas en la ignorancia o cuando no existen compromisos2.” 2 Weekend Australian May 8-9, 2004 - John Armstrong tries to deepen our response to beauty – Sebastian Smee Autor: Cristhian Salamanca 11 Estética para Entornos Virtuales UNAD Al igual que Armstrong han habido otros como William Hogarth y Pitágoras, que han tratado de comprender y explicar la percepción de la belleza. "William Hogarth en su teoría del „Análisis de la Belleza‟ habla de la „Línea Serpentina‟- la línea de belleza. Esto no es sino una 'S' en forma de línea que aparece dentro de un objeto, que es un aspecto importante de su teoría. Según esta teoría, la 'S' en forma de línea sugieren viveza y actividad y excita la atención del espectador contrastada con las líneas rectas, líneas paralelas, o en ángulo recto un entrecruzamiento de líneas que significan estancamiento, muerte, o objetos inanimados". La línea Serpentina que es la línea de la belleza también puede ser observada en la estructura de cuerpo femenino, es por esta razón que las mujeres con una destacada línea serpentina se consideran hermosas. Imagen 1. La línea serpentina "Él concluye que la belleza tiene un carácter global, que no puede ser dividido en partes componentes"3. Por otro lado, tenemos filósofos como Pitágoras, que su teoría de la belleza la relacionó con las matemáticas. Creía que los objetos que seguían la proporción de oro (o proporción divina) parecían más atractivos. Vamos a aprender más acerca de la proporción de oro y su fórmula en las siguientes lecciones. 3, 4 Weekend Australian May 8-9, 2004 - John Armstrong tries to deepen our response to beauty – Sebastian Smee Autor: Cristhian Salamanca 12 Estética para Entornos Virtuales UNAD Incluso en los tiempos modernos tenemos algunas ideas preconcebidas que hacen que alguien sea hermoso. Estos pensamientos de la belleza física se han señalado a través de la cultura. Por ejemplo, una persona con grandes ojos y una tez clara se considera bella en comparación con alguien con un cutis oscuro, de manera similar a alguien con rasgos faciales que son proporcionalmente simétricos se le considera más hermoso que una persona con una gran nariz desproporcionada. Así, ya se trate de líneas curvas o simetría que nos hacen percibir la belleza, es básicamente una percepción subjetiva. "La experiencias de la belleza nos acompañan en todo el mundo todos los días. Estar privado de ellas es estar deprimido, y se deja de funcionar correctamente. Son tan necesarias para la vida cotidiana, como una buena digestión y, a veces, como algo banal”4. Imagen 2. Un ejemplo famoso de simetría es el David de Miguel Angel. Autor: Cristhian Salamanca 13 Estética para Entornos Virtuales UNAD Si bien la belleza es una característica que se aplica a las obras de arte, personas, ideas, lugares, objetos de admiración o de la experiencia del placer o el sentido, también es una parte de la estética. La estética se asocia con el sentido de la emoción. Así pues, nuestro sentido estético nos permite evaluar nuestro sentido del gusto y los sentimientos. La belleza está más preocupada con el exterior, lo que el ojo percibe del mundo que nos rodea que, si bien es la estética tiene que ver con el interior único estándar de valor de lo que sentimos - nuestras reflexiones críticas. "Para poder entender las interpretaciones de la belleza, hay que tener en cuenta dos conceptos de valor: la estética y el gusto. Estética es la noción filosófica de la belleza. El gusto es el resultado de la educación y el conocimiento de los valores culturales de élite, por lo que el gusto se puede aprender. El gusto varía de acuerdo a la clase, antecedentes culturales, y la educación. El mal gusto suele ser visto como un producto de la ignorancia”5. CONTRARRESTANDO LA CULTURA – LO FEO ES HERMOSO “La belleza puede, por supuesto, crear dolor cuando sentimos la diferencia entre su promesa de la felicidad y la imposibilidad de cumplir esa promesa. Que algo no parezca bello es suficiente, pero querer destruir eso que no nos parece bello es malo. Sin embargo, requiere una sofisticación en nuestra respuesta al reconocer la superioridad de las cosas bellas sobre uno mismo”6. Hay dos caras en la moneda y lo mismo ocurre con la belleza, tiene dos lados, en lo que uno ve la belleza es en lo que la mayoría de los demás no entienden y como dirán que es feo. Una de esas escuelas de pensamiento fue la dadaísta, que han influido en muchos otros grupos similares. 5 http://en.wikipedia.org/wiki/Aesthetics#What_factors_are_involved_in_an_aesthetic_judgment.3F Weekend Australian May 8-9, 2004 - John Armstrong tries to deepen our response to beauty – Sebastian Smee 6 Autor: Cristhian Salamanca 14 Estética para Entornos Virtuales UNAD Imagen 3. Arte Dadaísta – Lo que ellos consideraron bello “El Dadaísmo fue un movimiento cultural que surgió durante la I Guerra Mundial. Concentró sus políticas de lucha contra la guerra a través de un rechazo de las normas imperantes en el arte a través del anti-arte en obras culturales. Apasionadas carátulas de arte, política, y cultura llenaron sus publicaciones. El movimiento influyó en muchos otros estilos más tarde, como los movimientos musicales Avant-Garde y el Downtown, y otros grupos, entre ellos el surrealismo, el realismo Nouveau, el Arte Pop, Punk y Fluxus”7. “El movimiento Dada trató de expresar la negación de todas las corrientes estéticas y los valores sociales, y utilizaron con frecuencia métodos de arte y literatura deliberados e incomprensibles. Sus obras fueron diseñadas para desconcertar y chocar con el público con el objetivo de que ellos reconsideraran los valores estéticos. Encontraron maneras muy cómicas de expresar este humor negro, por medio de diferentes elementos para crear arte. Los Dadaístas usaron nuevos materiales, incluyendo basura de la calle, lo que les permitía tener la oportunidad de determinar los elementos de sus obras”8. Así, La belleza es algo que no es necesariamente bueno y agradable a los ojos de todos. Como diseñadores, ya sea de interiores, moda, gráfico o multimedia, debemos establecer nuestros propios parámetros de lo que percibimos como bello y que estéticamente de buen gusto para nosotros. Podemos sin duda ser inspirados e influidos por las teorías y definiciones de pensadores, artistas, 7 8 http://en.wikipedia.org/wiki/Dadaism http://www.geocities.com/allon_art/dada.html Autor: Cristhian Salamanca 15 Estética para Entornos Virtuales UNAD filósofos, poetas y otros del pasado para dar un nuevo significado y una nueva esencia a lo bello. Esto nos permitirá crear nuestro propio estilo y gusto por el diseño. Pero para ello necesitamos conocer la historia del concepto de belleza, que es nuestro siguiente tema. LECCIÓN 2: LA ESTÉTICA Y LA PERCEPCIÓN DE BELLEZA II LA HISTORIA DE LA BELLEZA Y LA ESTÉTICA El concepto de belleza ha evolucionado y cambiado en el tiempo y las culturas. Por ejemplo, la cultura china se consideraba que en las mujeres tener los pies pequeños era símbolo o para el caso en América tener ojos sesgados, pómulos altos y la piel curtida se considera hermoso. Pero es interesante saber cómo este concepto de belleza ha evolucionado a través de los tiempos. Como se mencionó anteriormente lo que concebimos como hermoso es totalmente subjetivo, aunque, influenciado por el medio ambiente en que vivimos. La belleza es en cierta medida una percepción adquirida, como lo vemos hoy, por lo que necesitamos conocer y comprender algunos de los notables períodos del pasado que tuvieron un impacto sobre el concepto de belleza, con el fin de tener una base para nuestra propia percepción. ESTÉTICA ANTIGUA Y MEDIEVAL A partir del siglo 5 A.C. la historia de la antigua estética abarca casi más de un millar de años, que siguen evolucionando. El medieval o la edad media se extiende aproximadamente desde la caída del Imperio Romano hasta el Renacimiento. Muchas de las antiguas hipótesis de estética de la belleza fueron asumidas por la estética medieval y es para nosotros determinar la lista de las más importantes que fueron realizadas y las que se descartaron. Los antiguos utilizaban un concepto amplio de la belleza en virtud de lo cual todo lo de valor o que despertó atracción o placer se incluyó. Se trata de un concepto que todo el mundo entiende, pero que nadie, con excepción de Aristóteles intentó definir. La edad media se hizo cargo de este concepto, de limitarlo y definirlo. El concepto medieval de la belleza de la formulación de Aquino era - esas cosas son hermosas porque dan placer cuando se les mira. Para los antiguos, la belleza significa más o menos lo mismo que la bondad, que también fue tomado en un sentido amplio. Ellos unieron ambos conceptos en un único concepto hermoso-y-bueno, que no denota dos cualidades, pero expresa Autor: Cristhian Salamanca 16 Estética para Entornos Virtuales UNAD uno enfáticamente. La edad media continuó identificando la belleza con el bien, pero hizo una distinción conceptual entre ellos, como explicó Thomas Aquinas, lo es el objeto del deseo y lo hermoso es el objeto de la cognición. Los antiguos originalmente no distinguían los tipos y las formas de la belleza belleza sensual y espiritual, o la belleza de la forma y la belleza de su contenido. Ellos suponían que todo lo bello contiene una belleza sensual y un elemento espiritual: aquello que solo afecte los sentidos es agradable, pero no hermoso. Fue Platón el primero que formuló la distinción entre espiritual o ideal de belleza. Pero la gente de la época medieval era de la idea de que "algunas cosas bellas pueden ser percibidas por el ojo o el oído, otros sólo por la mente. Es decir, es belleza física y espiritual. Tenemos belleza física, pero la belleza espiritual es una forma superior de belleza. La opinión de que la verdadera belleza no es comprensible fue directamente peculiar de la estética medieval. Sin embargo, para algunos filósofos medievales, su pensamiento no el todos, la belleza física dejó de ser la belleza en comparación con la belleza espiritual e ideal. En cuanto a la cuestión de si la belleza se encuentra en el mundo, los antiguos por un largo tiempo mantuvieron un moderado punto de vista. Ellos no sostienen que el mundo es hermoso en su conjunto, o totalmente feo: algunas cosas son hermosas y otras feas. Los estoicos fueron los primeros en afirmar que el mundo era hermoso en su totalidad. Los Cristianos Esteticistas de la Edad Media no tenían en cuenta que cada detalle del mundo es hermoso. Algunas cosas, tomadas de forma aislada, son feas, pero no deben ser analizadas en forma aislada. Así como uno no puede percibir la belleza de un poema, a menos que lo tome en su conjunto, así nadie puede ver la belleza que reside en el orden del universo, a menos que se vea este orden en el mundo entero. Como Agustín dijo “lo bello es lo que admiramos y lo bueno es para lo que nos esforzamos" 9. Desde este punto de vista la fealdad en detalle fue considerada como necesaria, ya sea por la belleza de su conjunto, o bien como irreal, como simplemente la falta de belleza. Los antiguos vieron la belleza en la naturaleza, así como en el arte, pero mucho más en la naturaleza. Consideraron la naturaleza más perfecta y más hermosa que el arte. Si el arte es hermoso es porque modela a la naturaleza en sí. En el transcurso del tiempo la percepción de la belleza empezó a cambiar a través de la Edad Media. Se examinó en primer lugar la naturaleza a su alrededor con el concepto de belleza, pero este concepto de la belleza lentamente comenzó a ser visto en materia de arte. Así, cuando los artistas empezaron a pintar figuras santas y las personas importantes para la religión cristiana se empezó a percibir la 9 Wladyslaw Tatarkiewicz, J. Harrell, Cyril Barrett, D. Petsch History of Aesthetics p.287 http://books.google.co.in/books?id=5hve2_IPDNMC&pg=PA287&lpg=PA287&dq=the+concept+of+beauty +in+the+middle+ages&source=web&ots=GK1oqRgLhL&sig=rSNUYEtzBZjSCLPkfMy6sWdCn90&hl=en& sa=X&oi=book_result&resnum=10&ct=result#PPA287,M1 Autor: Cristhian Salamanca 17 Estética para Entornos Virtuales UNAD belleza en el arte también. Es por ello que hacia el final de la Edad Media se comenzó a ver la belleza en la naturaleza, así como en el arte. En la antigüedad, la belleza fue evaluada en una manera simple; belleza es claramente algo bueno y que vale la pena cultivar. Desde ahí que fundamentalmente, es idéntica a la bondad, no puede haber conflicto entre ellos. La vista medieval era más compleja: la belleza fue considerada buena en un sentido, pero mala en otro. Para los medievales de la belleza divina era, obviamente, perfecta. También admiraban la belleza terrenal y durante ciertos períodos, se aprecia sobre todo de la misma. Sin embargo, temían que pudiera convertirse en un objeto de los intereses excesivos y establecer una supremacía moral sobre las reclamaciones, en cuyo caso no sería buena, pero mala.10 “Durante el Renacimiento la percepción del artista fue influenciada por muchos factores, uno de los más importantes están las necesidades de sus patrones o jefes. Sin embargo, la implicación de la percepción de la belleza va a cambiar de vez en cuando. Por ejemplo, si estudiamos la pintura renacentista Venus y Marte de Botticelli. Imagen 4. Venus y Marte por Botticelli En esta hermosa pintura que ahora se pueden encontrar en la Galería Nacional en Londres, presenta, a Venus, la diosa del amor que se extiende frente a su amante Marte el dios de la guerra, que ha caído dormido, al parecer después de hacer el amor a Venus. El mensaje aquí es que el amor siempre conquista sobre el conflicto, que es muy claro. Esta es la personificación del artista de la belleza en ese momento. Esto nos da una idea de lo que se consideraba bello en el decimoquinto siglo”.11 EL CONCEPTO DE BELLEZA HOY 10 11 Wladyslaw Tatarkiewicz, J. Harrell, Cyril Barrett, D. Petsch History of Aesthetics p. 293,294 Neil Haughton Perceptions of Beauty in Renaissance art ©2004 Blackwell Publishing Ltd p. 230, 231 Autor: Cristhian Salamanca 18 Estética para Entornos Virtuales UNAD Desde la antigüedad hemos visto el cambio en la percepción de la belleza, e incluso hoy sigue evolucionando. Este cambio en la percepción de la belleza se puede apreciar en las pinturas de grandes artistas como Botticelli o Miguel Ángel del Renacimiento y la Edad Media y el escrito de Aristóteles y Platón y otros filósofos y artistas, y hoy podemos ver y sentir en todos los formas de diseño, ya sea la moda, o las artes gráficas - audio vídeo o simplemente ilustraciones: lo vemos en multimedia. Sin embargo, el uno de los elementos que ha sido una constante en la comparación de este concepto a través de los tiempos ha sido la figura femenina. Supongo que la mayoría vio la belleza William Hogarth en la línea serpentina visto en la figura femenina. A pesar de la belleza masculina fue siempre asociado al hecho de ser muscular, no mucho ha cambiado en ese sentido. Imagen 5. Pintura de una mujer voluptuosa en tiempos antiguos En tiempos antiguos, como vemos en sus pinturas, lo grande era hermoso. Los romanos y los griegos vieron la belleza en las grandes caderas, vientre como almohada y en los pechos. Incluso hasta unos pocos cientos de años atrás, los artistas han gustado de las sus mujeres bien dotadas. Luego, de repente en la Siglo 20 lo delgado se puso de moda, no sólo en la industria de la moda, pero en todos los aspectos de la vida. Podemos ver que prominente, el día de hoy, en la industria electrónica - pantallas planas LCD, Slim teléfonos celulares sin olvidar el MacBook Air. Autor: Cristhian Salamanca 19 Estética para Entornos Virtuales UNAD Imagen 6. Lo Delgado está de Moda En el mundo de hoy los medios de comunicación desempeñan un papel importante en la configuración de nuestras ideas y nuestra percepción de las cosas y el concepto de belleza no es una excepción. Pero es triste decir que hoy vivimos en el mundo de la tecnología cuando lo que se percibe para ser bella no es realmente hermoso. Por ejemplo mirar el video de Dove. La mayor parte de lo que vemos es editado y enmascarado en el programa de edición de imágenes como Photoshop. Usted verá en el vídeo cómo su pelo ha sido retocado y la manera diferente de mirar de sus ojos después del retoque. La última imagen de ella que usted vea en la valla no es una verdadera imagen. Los medios de comunicación y la industria de la moda han trabajado arduamente para crear ese ideal de belleza, que es tan poco realista. Todos sabemos que los estereotipos son fuertes para nosotros por los medios de comunicación y son inevitables. Pero la belleza no se limita sólo a la moda y la forma humana. Podemos ver la belleza en la naturaleza y el arte como los antiguos o en la arquitectura o cualquier cosa que nos rodea, incluso algo que no es tangible como una experiencia. Por lo tanto, es para nosotros tener nuestra propia percepción de lo que es hermoso y desarrollar nuestro propio sentido del gusto, como el sabor es algo que puede ser aprendido y lo que es hermoso es una cuestión subjetiva. LESSON 3: EL DISEÑO NO ES SOLO DECORACIÓN La mayoría de nosotros mezclamos con los dos términos, "DISEÑO" y "DECORACIÓN". Por un lado, son dos cosas diferentes, tienen diferentes características y funciones. Podemos estar seguros de que, como cuestión de hecho el diseño no es decoración. En esta lección veremos cómo cada uno de ellos es diferente y por qué son diferentes. Antes de aprender lo que es diseño, en nuestras primeras clases de la escuela de diseño, la mayoría de nosotros somos de la opinión de que un objeto diseñado, Autor: Cristhian Salamanca 20 Estética para Entornos Virtuales UNAD edificios o un traje es lo que se ve bien y llama nuestra atención. Y de hecho puede ser verdad. Pero entonces, ¿qué hace al diseño diferente de la decoración? Bueno, la decoración es algo que se ve bien y es atractivo, pero no tiene sentido ni significado. El decorado de la pieza de un trabajo no tiene la profundidad de la comprensión. Uno puede aburrirse mirando esa pieza a lo largo de un período de tiempo y después de un tiempo pierde su bondad y belleza. Es superficial, ya que no comunica nada. No estimula un diálogo entre el espectador y el objeto de decoración. Tiene una corta vida útil y pueden quedar muerto después de un tiempo. Por otra parte el diseño es contrario a la decoración. El Diseño tiene sentido, que comunica un mensaje o tiene función. Cada elemento de un dibujo o modelo es para un fin. Un buen diseño puede ser de larga vida, es profundo en el significado en cada uno de sus elementos. En pocas palabras el diseño se puede describir como una solución creativa a un problema. Tu sabes cuando hay un buen diseño, pues si quitas cualquiera de sus elementos, no funciona o simplemente se desmorona. Imagen 7. Bedi, pintura India en las Manos Si usted echa un vistazo a la imagen anterior, verá que la Hena se aplica a la palma de la mano sólo para decoración. No tiene ningún sentido, su único atractivo es visual. Pero la mano, tiene la función. Cada uno de los dedos de la mano está ahí para un propósito. Sin uno de los dedos de las manos el diseño de la mano sería incompleto y no sería plenamente funcional. Autor: Cristhian Salamanca 21 Estética para Entornos Virtuales UNAD Otra característica que distingue a la decoración del diseño es que el diseño se basa en una idea. Se trata de un lote de lluvia de ideas y de un lote de pensamientos. Se mantiene la evolución hasta que se cumple la idea y su función completamente. La decoración es simplemente una técnica que puede dominar a la perfección; no es necesario pensar o idear, es solo su repetición que puede asegurar la perfección. Saber cómo aplicar la henna a la palma de una mano es sólo una técnica. Si usted tiene cinco trazos verticales y un círculo, o si usted tiene cinco círculos y un trazo, no importa. Se ve bonito, es sólo decoración. El diseño implica un sistema de trabajo. Aunque la mayoría de los diseñadores incorporará su propio sistema de trabajo en un proyecto de diseño, hay algunas etapas clave del proceso que no debe ser omitido o perdidas, mientras se diseña. La manera cómo usted ejecute estas etapas del proceso es personal. Ellas son: 1. INVESTIGACIÓN Y LLUVIA DE IDEAS. Sobre la base del BRIEF presentado por el cliente, que describe las necesidades y los elementos esenciales del proyecto de diseño, el diseñador estudia la empresa, así como las características del proyecto. Por ejemplo, una escuela quiere diseñar una calculadora virtual que es divertido, así como interactivos para los niños. En este caso, el diseñador tendrá que estudiar la psicología de los niños, así como las características de una calculadora. Esto le permitirá estar en una buena posición para elegir, por ejemplo, los colores o encontrar la manera de hacerlo divertido para los niños. Sin la investigación básica, será difícil tener una idea concreta, por lo que usted tiene una razón sustancial para su uso. Investigación y lluvia de ideas permitirá también a encontrar una idea que no exista. Cuanta más información se puede investigar mejor será el resultado de diseño. La Investigación y lluvia de ideas se pueden por llevar a cabo en forma diferente. Si se trata de un grupo de proyecto; puede realizar investigación individual y, a continuación, se reúnen como grupo a una lluvia de ideas. Existen diferentes métodos de investigación y de reflexión, pero para empezar puede usar las 5 preguntas básicas y era una estructura H: ¿Quién? ¿Qué? ¿Dónde? ¿Cuándo? ¿Por qué? y ¿Cómo? Al responder todas estas preguntas, usted recibirá a las claves de la investigación que desea llevar a cabo en unas pocas frases o párrafos. Este sistema es útil para aplicar, ya que le ayuda a centrarse en la cuestión esencial. Además usted puede hacer estudios de casos, cuestionarios, entrevistas, encuestas, el contenido y el análisis textual, etc., y para lluvia de ideas puede utilizar mapas mentales, por ejemplo. Una de las famosas formas de generar lluvia de ideas es "el pensamiento lateral", que fue acuñado y promovido por Edward de Bono en 1967. Él dice que hay varias formas de definir el pensamiento lateral, que van desde la técnica a los ilustrativos. Él describe acertadamente el pensamiento lateral, Autor: Cristhian Salamanca 22 Estética para Entornos Virtuales UNAD diciendo "No se puede cavar un agujero en un lugar diferente por la excavación del mismo agujero más profundo" Esto significa que esforzarse más en la misma dirección puede no ser tan útil como cambiar de dirección. Un esfuerzo en la misma dirección (enfoque) no necesariamente significa tener éxito12. Hay algunos ejercicios útiles que se pueden adaptar, en función de la naturaleza del proyecto, que se pueden encontrar en sus libros titulados, "Cómo ser más Creativos" o "Los Seis Sombreros del Pensamiento". Los Mapas Mentales es una de las más famosas técnicas de la lluvia de ideas, pero con el apoyo del material de Edward de Bono y debatido en su libro "Seis Sombreros del Pensamiento". Cualquiera sea el método que usted elija depende de lo que exige el proyecto y de lo que usted se sienta cómodo de usar. Pero lo que es más importante es que esta etapa del proceso no se debe saltar, porque sin la suficiente investigación y reflexión en conjunto la concepción del proyecto podría derrumbarse. 2. DIBUJAR Aquí es donde se puede seguir luchando con ideas. Conceptos aleatorios chocan con el pensamiento intencional. Las sugerencias se pueden hacer. Algunas ideas se quedan mientras que otras son descartadas. La persistencia prevalece y, finalmente, el concepto se desarrolla la estructura y, en última instancia se termina con una solución creativa. En caso de la Web esta es la etapa cuando se crean storyboards y se comienza a inyectar vida a sus ideas. La mayoría de las veces lo que pensamos, en teoría, parece una buena idea, pero en realidad cuando se trata de la ejecución de la misma idea que puede no ser tan funcional. Por lo tanto, es importante esbozar y averiguar cuáles de las ideas son viables y cuáles no desde el principio. Evitando así la duplicación de trabajo, al mismo tiempo, añadiendo un enfoque para el proyecto que le permite trabajar dentro de un límite de tiempo. Por lo tanto, no debe saltarse este paso. 3. DISEÑO DEL PROTOTIPO En esta etapa con la cantidad correcta de investigación, de ideas y de dibujos usted será capaz de elegir dos soluciones gráficas apropiadas para luego ser pulidas y perfeccionadas acorde con las ideas. Es en esta fase del proyecto usted será capaz de ver el trabajo de los colores, mirar la estética del diseño, y ver como las texturas cobran vida. Trate de mantener dos opciones, dado que más de dos pueden causar confusión, por otra parte sólo puede haber una solución la más adecuada. La razón para pulir dos de las ideas es para tener una elección. En caso de que 12 http://www.edwdebono.com/debono/lateral.htm Autor: Cristhian Salamanca 23 Estética para Entornos Virtuales UNAD alguna de las opciones no funcione o no satisfaga las necesidades del proyecto; hay una segunda opción. Esta es la etapa cuando eres capaz de ver la realidad de los dibujos. Es en esta fase cuando usted puede agregar los detalles. 4. REVISIÓN Cuando estamos empapados y de lleno dentro en un proyecto creativo, la mayoría de las veces somos incapaces de ver el más obvio de los errores. Estamos tan inmersos en el proyecto, que no somos capaces de hacer un honesto análisis crítico del trabajo. Es por esta razón por la que se piden comentarios de los clientes y pedir las aprobaciones. En este momento del proyecto podría haber cambios que serán necesarios o elementos que pueden tener que ser quitados. Usted, en esta etapa podrá ver el proyecto desde otra perspectiva. Esto nos permitirá evaluar si el diseño transmite la correcta comunicación y las áreas en las que será necesario ajustar un poco. La revisión de su proyecto es importante porque le da un enfoque holístico a su diseño. Es lo que le permitirá elegir entre las dos opciones que tiene. 5. TOQUES FINALES Una vez que el diseño ha sido revisado, analizado y sugerencias se han hecho, ahora es tiempo para llevar a cabo los cambios necesarios y añadir acabado y detalle para el diseño del proyecto. Aquí es cuando vas a ver el proyecto del diseño en plena floración. Ahora que conocemos la estructura básica del proceso de diseño, tenemos que aprender y entender lo que va a hacer un diseño estéticamente atractivo. Hay algunas reglas básicas que se han aprendido con el tiempo y experiencias. Ellas son muy útiles y te darás cuenta de la diferencia en el diseño cuando estas normas se han aplicado que permite que el diseño más comunicativo y estéticamente atractivo. LESSON 4: PAUL RAND AND JOHN MAEDA Si alguien ha influenciado no sólo el diseño gráfico, sino también otras áreas como animaciones, comerciales de TV, películas, diseño de páginas Web, etc, es Paul Rand. Vea lo que la gente dice sobre él: Un estudio definitivo de una figura pionera en diseño gráfico de América. (Steven Heller, con textos de Armin Hofmann, George Lois y Jessica Helfand). Autor: Cristhian Salamanca 24 Estética para Entornos Virtuales UNAD Fue la figura más influyente del diseño gráfico de América que llegó a su propio lenguaje visual distintivo a través de la influencia de la vanguardia europea como el cubismo. (http://people.artcenter.edu) “Paul Rand (nacido en Peretz Rosenbaum, 15 de agosto de 1914 - 26 de noviembre de 1996) fue un conocido diseñador gráfico de América del Norte, mejor conocido por sus diseños de logotipo corporativo. Rand fue educado en el Pratt Institute (1929-1932), la Escuela Parsons de Diseño (1932-1933), y la Liga de Estudiantes de Arte (1933-1934). Fue uno de los autores del Estilo Suizo del diseño gráfico. De 1956 a 1969, y comienzo de nuevo en 1974, Rand enseñó diseño en la Universidad de Yale en New Haven, Connecticut. Rand fue incluido en el Club de Directores de Arte y Salón de la Fama en New York Club en 1972. Diseñó muchos carteles e identidades corporativas, incluidos los logos de IBM, UPS y ABC. Paul Rand murió de cáncer en el año de 1996”13. Su forma de ver el diseño ha sido uno de los principales argumentos de su carrera, argumentos que han llegado a los demás como palabras de un Gurú. En una pequeña entrevista celebrada en el MIT, Paul Rand dijo algunas cosas interesantes sobre el diseño en general. La siguiente es parte de la entrevista: (PR si de Paul Rand, JM es el anfitrión de la entrevista)14 PR: "Había esperado 82 años para venir a este lugar. Conocí a Gyorgy Kepes y a Muriel Cooper, pero nunca me invitaron. Me pregunto por que el Sr. Maeda me invitó en esta fecha tardía, pero haré mi mejor esfuerzo ". JM: "¿Qué es diseño?" PR: "El diseño es el método de poner la forma y el contenido juntos. El diseño, así como el arte, tiene multiples definiciones, no existe una definición única. El diseño puede ser arte. El diseño puede ser estética. El diseño es muy simple, por eso es tan complicado." JM: "¿Cúal es la diferencia entre un diseñador y un artista?" PR: "No hay diferencia entre un diseñador y un artista. Juntos trabajan con la forma y el contenido. Yo trato de crear arte, si lo logro o no, no depende de mi sino de Dios." JM: 13 14 "¿Cúal es la diferencia entre un “buen” diseño y un “mal” diseño?" In: http://www.paul-rand.com/biography.shtml In: http://acg.media.mit.edu/events/rand/ideamag.html Autor: Cristhian Salamanca 25 Estética para Entornos Virtuales UNAD PR: "Un mal diseño es irrelevante. Es superficial, pretencioso,… básicamente como todas las cosas que ves por ahí hoy en día." JM: " ¿Cuáles son las habilidades fundamentales de un diseñador?" PR: "La habilidad fundamental es el talento. El talento es un bien escaso. Es todo intuición. Y no se puede enseñar la intuición." JM: " La mayoría de sus diseños han durado varios decenios. ¿Cuál diría que es su secreto?" PR: “Manteniendo la sencillez. Ser honesto, quiero decir, completamente objetivo sobre su trabajo. Trabajar muy duro " JM: " ¿Cómo se inició como un diseñador?" (El levantó las cejas) "Creo que usted debería preguntar, ¿cómo me inicié como un bebé?" Paul Rand creó muchas de las imágenes corporativas de muchas companies reconocidas. Autor: Cristhian Salamanca 26 Estética para Entornos Virtuales UNAD Imagen 8. Diseños de Logos hechos por Paul Rand Su creatividad ha llegado a ser una gran influencia, no sólo para otros diseñadores gráficos, sino también a la nueva ola de modernos diseñadores de páginas web como: Valerie Casey Irene Au Bill Buxton Dan Saffer John Maeda Y actualmente fue John Maeda (JM) quién entrevistó a Paul Rand. John Maeda, de acuerdo a la Wikipedia "es un diseñador gráfico japonésamericano, informático, profesor universitario y autor. Él es el actual Presidente de la Rhode Island School of Design, una posición asumida en junio de 2008. Su trabajo en el diseño y la tecnología explora la zona en la que los dos campos se combinan. Maeda fue originalmente un estudiante de ingeniería de software en el Instituto de Tecnología de Massachusetts (MIT), cuando quedó fascinado con el trabajo de Paul Rand y Muriel Cooper. Cooper fue un director del MIT en el Taller de lenguaje Autor: Cristhian Salamanca 27 Estética para Entornos Virtuales UNAD visual. Después de completar su licenciatura y maestría en el MIT, Maeda estudiado en Japón en el Instituto de Arte y Diseño de la Universidad de Tsukuba para completar su doctorado en diseño". John Maeda es uno de los principales promotores que ha hecho su marca mediante la redefinición de la utilización de los medios de comunicación electrónicos como una herramienta de expresión para las personas de todas las edades y habilidades15. Maeda está trabajando actualmente en la SIMPLICIDAD, un proyecto de investigación para encontrar maneras en que las personas puedan simplificar su vida de cara a la creciente complejidad. El resultado de este proyecto de investigación basado en la SIMPLICIDAD, es la concepción de las leyes de la simplicidad que son muy útiles para el diseño. Las leyes son16: LEY 1: REDUCCIÓN La forma más sencilla de alcanzar la simplicidad es a través de la reducción reflexiva. LEY 2: ORGANIZACIÓN Organización hace un sistema de muchos parece menos. 15 16 In: http://www.core77.com/design2.0/john_maeda.asp In: http://lawsofsimplicity.com/ even the images. Autor: Cristhian Salamanca 28 Estética para Entornos Virtuales UNAD LEY 3: TIEMPO El ahorro de tiempo te hace sentir simple. LEY 4: APRENDER El conocimiento hace todo más sencillo. LEY 5: DIFERENCIAS La Simplicidad y la Complejidad se necesitan mutuamente. LEY 6: CONTEXTO Lo que se encuentra en la periferia de la simplicidad no es periférico. Autor: Cristhian Salamanca 29 Estética para Entornos Virtuales UNAD LEY 7: EMOCIÓN Más emociones son mejor que menos. LEY 8: CONFIANZA En la simplicidad confiamos. LEY 9: FALLAR Algunas cosas nunca serán simples. LEY 10: EL UNO La simplicidad es restar lo obvio, para luego añadir sentido. La aplicación de estos leyes a un diseño educativo funcional puede traer a la vida un proyecto interesante, con todo simple Autor: Cristhian Salamanca 30 Estética para Entornos Virtuales UNAD LECCIÓN 5: ELEMENTOS DEL DISEÑO Una página en blanco, ya sea en papel o en la pantalla está muerta. Puedes añadir una pequeña marca y verás que vive, y esto porque esa marca tiene la energía visual para atraer la atención. Cuando un artista o un diseñador tocan la punta de un pincel o cualquier herramienta sobre una superficie, ya sea en pantalla o fuera de la pantalla un punto es el que nace. Este punto tiene una posición pero no la magnitud. Cuando esta marca se amplía sin perder sus propiedades se convierte en un punto. Un punto es el más pequeño de cualquiera de los elementos del diseño. Los otros elementos del diseño son los siguientes: Línea, Masa, forma, espacio, color, escala, tono, textura, patrón, el equilibrio y contraste. A continuación una breve descripción de cada uno de ellos. Imagen 9. El Punto LINEA Cuando movemos un punto, desde su posición a otra posición con éxito, tenemos un camino de puntos o puntos, que se convierten en una línea. Esta línea tiene longitud pero no la anchura. Sin embargo, cuando es ampliada para convertirse en un punto y, a continuación, se traslada de una posición a otra, observamos que tiene longitud, así como anchura. “La línea es una de las más antiguas y la una de las herramientas fundamentales en las artes visuales. El uso de la línea se encuentra en las pinturas rupestres y tallas de piedra que datan más de 20.000 años, por lo que es una de las más antiguas técnicas artísticas documentadas. En geometría, una línea se describe como la distancia más corta entre dos puntos, pero esto sólo describe una línea recta cuando se habla de arte visual. En el arte y el diseño, la definición de la línea no es tan restrictiva. La definición estética de la línea visual es la conexión de dos puntos. Una línea es una marca continua. Una línea puede estar compuesta de muchas líneas diferentes, o incluso con espesor variable en la misma línea. Autor: Cristhian Salamanca 31 Estética para Entornos Virtuales UNAD Imagen 10. Líneas Una línea también se utiliza para describir la separación abstracta entre las zonas de cambio, o cuando los objetos están alineados, o cuando la repetición de objetos crea "líneas" y movimiento visual. En lugar de ser una marca entre dos puntos, la línea se utiliza para describir una conexión visual"17. "Las líneas crean contornos y formas, y con frecuencia se usan para transmitir un determinado tipo de sentimiento o punto a una característica importante en un diseño. Las líneas también se utilizan para crear perspectiva, y las líneas dominantes direccionales son a menudo adoptadas para crear un sentido de continuidad en una composición. La línea o forma es un resultado natural de múltiples puntos en el espacio"18. Hay dos tipos básicos de líneas, las líneas rectas y curvas. Hay tres tipos de líneas rectas y muchas curvas, que vamos a discutir. Las tres líneas rectas son la línea vertical, horizontal y oblicua línea. La línea vertical indica atención, alerta y está en posición vertical. Expresa emociones que son sólidas, fiables, potentes y sencillas, mientras que la línea horizontal es más casual. Sugiere sueño, la relajación o el horizonte. La línea oblicua es la más utilizada a menudo para sugerir el movimiento o velocidad. Lo vemos en el despegue de un avión o la posición en el inicio de una carrera. También se ve expresada en un paisaje, como en las colinas. Las pirámides, las 17 18 http://www.atpm.com/9.10/design.shtml http://www.digital-web.com/articles/elements_of_design/ Autor: Cristhian Salamanca 32 Estética para Entornos Virtuales UNAD instrucciones de una pluma al escribir, un techo de azulejos, en las etapas del vuelo, el símbolo de la paz o un cono de helado usa de todas las líneas oblicuas. La línea curva denota emoción y sensualidad. Son más suaves, por ejemplo, el contorno de una figura femenina. Las líneas curvas son más maleables. Líneas en zigzag, líneas en espiral, las líneas de arco; líneas circulares, líneas onduladas, etc., son todas líneas curvas. Las líneas en zigzag se notan en los dientes de una sierra, relámpagos, o en las letras Z, W y M. Estas líneas denotan confusión general, irritación y dan una sensación dura. Las otras líneas curvas se pueden encontrar en la arena del mar, en la trompa del elefante, en las verduras redondas, los movimientos de una serpiente, zarcillos o un cable telefónico. Autor: Cristhian Salamanca 33 Estética para Entornos Virtuales UNAD MASA Cuando varios puntos de diferentes direcciones llegan a formar un grupo, crean una masa. Por ejemplo, en la tipografía, cuando hay una distribución equitativa de texto negro sobre un blanco de superficie o de fondo, se crea una masa gris. FORMA Cuando varias líneas de diferentes direcciones y se juntan en un espacio que tenemos una forma. Hay tres formas básicas, a saber, el círculo, el cuadrado y el triángulo. Un cuadrado tiene todos los noventa grados los ángulos y las líneas en los cuatro lados son iguales. Sus rasgos son negativos, apéndice, siendo estrecho, inactivo, o convencional. Por otro lado denota la igualdad, equilibrio, fuerza y estabilidad. Un rectángulo es la forma derivada de un cuadrado. Un círculo que se conoce como la forma eterna. Esto se debe a que si usted gira el círculo desde su centro en cualquier punto de vista siempre se mantiene un círculo. Esta propiedad no es vista en cualquier otra forma. Es por esta razón que el círculo es un símbolo de las cosas divinas. Se sugiere la integridad, la Autor: Cristhian Salamanca 34 Estética para Entornos Virtuales UNAD continuidad y movimiento. Un óvalo o una elipse es una forma derivada de un círculo. Un triángulo está formado por tres líneas oblicuas y la suma de todos sus ángulos deben ser un total de 180 grados. Se compone de un vértice y una base. El triángulo no es una forma muy estable. Un triángulo en su ápice se puede caer. Sin embargo, a menudo se utiliza para denotar el movimiento y el ascenso y la caída de algo, por lo tanto es visto muy a menudo visto en los gráficos. También vemos triángulos en la mayoría de las veces en las puntas de las flechas. Los polígonos son formas que se derivan de un triángulo. Por ejemplo, un hexágono está compuesto de seis triángulos. El círculo, el cuadrado y el triángulo son formas de dos dimensiones, pero también facilitan la construcción de formas en tres dimensiones como la esfera, el cubo, el cilindro, el prisma, la pirámide, etc. Ambas formas bidimensionales y tridimensionales “pueden ser realistas, abstractas o en algún punto intermedio”19. “Los seres humanos tienden a cerrar visualmente un espacio que queda por completar en un contorno y hacen caso omiso de los espacios que haya en la figura. Cuando algo se deja a la imaginación, la gente tiende a encontrar imágenes 19 http://www.digital-web.com/articles/elements_of_design/ Autor: Cristhian Salamanca 35 Estética para Entornos Virtuales UNAD visuales más interesantes que cuando la imagen está "completa." La gente naturalmente llena la información que falta”20. Este fenómeno se conoce como la ley de la Clausura de Gestalt. “La formas abstractas son imágenes usadas para dar un significado o una identidad sin el uso de lenguaje escrito. Las figuras abstractas pueden ser universales para todas las personas o basadas en la cultura, a menudo con estilizadas formas naturales. Muchos signos, iconos, y logos usan formas abstractas. La interpretación de muchas formas es de tipo cultural. Los octágonos significan detenerse, especialmente cuando se combina con el color rojo, pero ese mismo sentido no se aplica en los países donde la señal de Pare no usa el octágono. Las formas de estrellas se utilizan para subrayar e identificar cuando las cosas son "nuevas y mejoradas", pero este es otro significado cultural a través de un uso repetido en los medios de comunicación y la publicidad. 20 http://www.atpm.com/9.11/design.shtml Autor: Cristhian Salamanca 36 Estética para Entornos Virtuales UNAD Los símbolos culturales pueden evolucionar para convertirse en símbolos universales si su uso satura la mayoría de las sociedades a través del mundo. Debido a su amplio uso en electrónica, los triángulos tienen un significado especial. Por ejemplo con el triangulo podemos dar inicio a una película, adelantar o retroceder. El botón de encendido y apagado "on / off" es un símbolo de la combinación de la lógica de la expresiones 0 y 1 o falso verdadero. Las formas abstractas son usadas con frecuencia en logos por el mercadeo y la publicidad para crear una identidad. Las personas en cada país reconocen ciertas formas con productos, los mejore ejemplos son los logos de Pepsi y Coca-Cola. Sin importar el lenguaje, casi todo el mundo puede pedir alguno de estos productos. El diseño de logo efectivo a menudo usar formas abstractas para crear un producto con identidad universal que trasciende el lenguaje y las barreras de la cultura21. 21 http://www.atpm.com/9.11/design.shtml Autor: Cristhian Salamanca 37 Estética para Entornos Virtuales UNAD ESPACIO El área cubierta por la forma y el área dejada por la forma se llama el espacio. El área cubierta es conocida como el espacio positivo y al área descubierta se le llama el espacio negativo. “El espacio negativo puede ser más evidente cuando el espacio en torno a un objeto, y no al objeto en sí, constituye una forma interesante o relevante artísticamente, y a veces ese espacio es utilizado para efectos artísticos como “el verdadero” objeto de una imagen”22. El juego de espacios positivos y negativos funciona bien para crear ilusiones ópticas. También ayuda en la aplicación de la perspectiva lineal. Por ejemplo, los objetos que se dibujan relativamente más pequeños parecen estar distantes. TEXTURA A una representación estructurada del material usado en algún diseño u obra de arte se le llama textura. 22 http://en.wikipedia.org/wiki/Negative_space Autor: Cristhian Salamanca 38 Estética para Entornos Virtuales UNAD COLOR Es fenómeno psicológico y fisiológico. Para ver el color necesitamos de la luz, un objeto o los objetos y un ojo. La reflexión de los rayos, la absorción de los rayos y la transmisión de los rayos que han sido interpretados por el cerebro humano, con la ayuda de la retina de los ojos, nos ayudan a comprender y ver el color. La teoría aditiva del color nos ayuda a entender la mezcla de luces de colores, en la que rojo, verde y azul cuando se combina crear luz blanca. En el pigmento o la teoría de color sustractiva es cuando los pigmentos del amarillo, del magenta y del cian se mezclan para crear negro. Más información sobre color, en la lección llamada Teoría del color. CAPÍTULO 2 LOS COMPONENTES DEL DISEÑO I LECCIÓN 1: LA CUADRÍCULA Una cuadrícula es una estructura de dos-dimensiones compuesta por una serie de intersecciones verticales y horizontales de los ejes utilizados para estructurar el contenido. La cuadrícula sirve como una armadura en la que un diseñador puede organizar texto e imágenes en una forma racional, fácil de absorber de forma. La cuadricula23 es una de las más importantes herramientas del diseño (especialmente importante para la traducción de un diseño Web a un medio como Internet). La cuadrícula proporciona una manera coherente de manejar la 23 In: http://valcasey.com/webdesign/ Autor: Cristhian Salamanca 39 Estética para Entornos Virtuales UNAD diversidad, y las relaciones entre el texto y las imágenes. El diseño es coherente cuando el texto y las imágenes están organizados en una cuadrícula. Es más fácil para un usuario que siga la consistencia. La cuadrícula le da al diseño un sentido de orden y consistencia > la disciplina provee la simetría y la repetición. ANTECEDENTES24 La cuadrícula utilizada para la Web tiene sus raíces desde cuando las cuadrículas simples fueron usadas en proporciones óptimas para organizar texto manuscrito en las páginas. Un sistema de este tipo, es conocido como el "diagrama de Villard", el cual estaba en uso por lo menos desde tiempos medievales. Después de la Segunda Guerra Mundial, un número de diseñadores gráficos, influenciado por las ideas del modernista de Jan Tschichold: La Nueva Tipografía, comenzó a cuestionar la pertinencia de los convencionales del diseño de páginas de la época. Ellos comenzaron a diseñar un sistema flexible capaz de ayudar a los diseñadores para lograr la coherencia en la organización de la página. El resultado fue la moderna cuadrícula tipográfica que se asoció con el Estilo Internacional Tipográfico. El trabajo seminal sobre el tema, Los Sistemas de Cuadrículas en el diseño gráfico por Müller-Brockmann, ayudaron a propagar el uso de la cuadrícula, primero en Europa, y más tarde en América del Norte. A mediados del decenio de 1970 la institución de la cuadrícula tipográfica como parte de los planes de estudio del diseño gráfico se convertió en estándar en Europa, América del Norte y gran parte de América Latina. El estilo gráfico de la cuadrícula se adoptó como una mirada hacia la comunicación corporativa. A principios del decenio de 1980, una reacción contra el afianzamiento en el uso de la cuadrícula, en particular su uso dogmático, y la asociación con la cultura de la empresa, se tradujo en algunos diseñadores, en un rechazo de su uso en favor de tener una mayor estructura orgánica. La aparición de la computadora Apple Macintosh, y la consiguiente transición de los parámetros fijados por los tipógrafos hacia los diseñadores, dio lugar a una ola de experimentaciones, en gran parte contraria a los preceptos de Tschichold y Müller-Brockmann. La cuadrícula tipográfica se enseña hoy en día, pero más bien como una herramienta útil para algunos proyectos, no como un requisito o punto de partida para todas los proyectos. Como podemos ver, la primera utilización de la cuadrícula fue para la impresión. Sin embargo, los desarrolladores de Web sólo recientemente han comenzado a mostrar un interés real en los sistemas de cuadrículas. Saber porque se ha tomado tantos años para los desarrolladores Web estar interesados en algo que 24 In: http://en.wikipedia.org/wiki/Grid_(page_layout) Autor: Cristhian Salamanca 40 Estética para Entornos Virtuales UNAD ha sido esencial para el medio escrito, en general, desde la década del 30, es difícil de decir - la tecnología, es decir, HTML y CSS, has estado desde hace poco, pero sólo recientemente se ha aplicado el uso de cuadrículas en la ejecución del diseño de páginas Web. Recuerde que mientras usted está diseñando su propio proyecto Web usted necesita que sea más fácil posible para los lectores / espectadores / usuarios a comprender su mensaje. COMO CREAR Y USAR UN SISTEMA DE CUADRÍCULAS PARA LA WEB Para entender cómo utilizar la cuadrícula para la Web, es importante comprender cómo se ha usado para impresión. Como Mark Boulton, dice en su Web25, mientras se esté utilizando una cuadrícula para impresión para un proyecto es considerablemente más sencillo que el diseño de sistemas de cuadrícula para la Web. En primer lugar, en forma impresa, el diseñador ha fijado un tamaño de los medios de comunicación - el tamaño del papel (o en el envase, cartel, sea cual sea). Digamos que un diseñador de impresión ha diseñado una revista. El lector de esta revista no puede aumentar de repente el tamaño de la fuente si lo consideran difícil de leer – lo que hace es ponerlo cerca de sus ojos. Es solo una consideración. En la Web usted tiene otras consideraciones tales como el navegador, la plataforma operativa, el tamaño de la pantalla y los dispositivos donde se pueden ver los sitios Web, desde PDA y móviles y otras tecnologías, tales como lectores de pantalla. ¿Cómo diseñar una cuadrícula para todo esto? Es realmente una buena pregunta. Boulton nos ofrece una interesante manera de crear una cuadrícula de diseño de páginas Web. Estas son sus consideraciones para construir la red: LECTURA PASOS PARA DISEÑAR UNA CUADRÍCULA PARA LA WEB EN UN MUNDO IDEAL Todos sabemos acerca de los problemas con la prestación diferente sitios Web a través de diferentes navegadores, plataformas, dispositivos, etc., pero sólo por un momento, vamos a olvidarnos de eso. 25 In: http://www.markboulton.co.uk/journal/comments/five_simple_steps_to_designing_grid_systems_part_3/ Autor: Cristhian Salamanca 41 Estética para Entornos Virtuales UNAD Diseñar una cuadrícula para la Web no debería ser difícil, de hecho, no debería ser diferente de cualquier diseño de una cuadrícula para cualquiera de los medios de comunicación. Como se discutió en las anteriores partes de la serie, usted puede construir una cuadrícula para la pantalla como lo hace para la impresión. Usted puede experimentar con la forma y los espacios en blanco etc. Utilice píxeles como su base de medición y desde allí puede saber de una vez que su diseño se verá exactamente igual en cada navegador. Después de todo, usted, el diseñador sabe que es lo mejor para sus lectores. EN EL MUNDO REAL Los buenos diseñadores de la Web saben que los usuarios que utilizan sus sitios pueden querer cambiar las cosas teniendo ellos el control. El diseñador ha perdido, en cierta medida, la capacidad de control. Para una gran cantidad de diseñadores (entre ellos yo), ha sido una difícil transición. Se nos enseñó durante años a crear delicados equilibrios de los espacios en blanco, la tipografía bien cuidada y la delicada paleta de colores, todos diseñados para crear diseños armoniosos, y para hacer su trabajo muy bien. Luego, algunos usuarios vienen y quieren incrementar el tamaño de la fuente, y sencillamente el diseño se rompe. Creo que la idea es más clara. No podemos estar molestos cuando el usuario quiere cambiar algo como el tamaño del texto. Lo que podemos hacer es diseñar los sistemas de cuadrículas para que el diseño pueda adaptarse a esos cambios. NO SON SOLO COLUMNAS Durante el último par de años, junto con el aumento de los sitios basados en CSS, hemos visto un aumento en ciertas configuraciones de cuadrículas, que se basan en la cantidad de columnas. 2, 3, 4 columnas en el diseño – haga esto flotante etc. Estas cuadrículas redes se han convertido rápidamente en una convención, y por una buena razón también. Ellas son rápidas de crear, son bastante estables a través de muchas plataformas y no se degradan en el mismo grado que el diseño basado en tablas. Todo esto es bueno. Lo que no es tan bueno, sin embargo, es la falta general de comprensión de los sistemas de cuadrículas, cuando tal vez la cuestión que dicen la mayoría de los diseñadores al sentarse a iniciar un diseño, es decir, “cuántas columnas tengo”. Éste no es un sistema de cuadrícula para diseñar Autor: Cristhian Salamanca 42 Estética para Entornos Virtuales UNAD LAS MEDIDAS Una cuadrícula fija para el diseño Web es como una traducción cerrada de la cuadrícula tradicional, ya que existe. El diseñador está utilizando mediciones fijas, la mayoría de píxeles, para construir la cuadrícula y los elementos son colocados dentro de la cuadrícula que se basa en un tamaño fijo. EL AREA DE TRABAJO: EL LIENZO Ahora las cosas empiezan a ser un poco menos concretas. El tamaño del lienzo de impresión está determinado por el tamaño de los medios de comunicación - el papel, la señalización y dotación, lo que sea. El tamaño del lienzo para el diseño de la cuadrícula para la Web es normalmente determinado por el tamaño de la ventana del navegador, que es a su vez determinado por la resolución de pantalla del usuario. Estos no son fijos. Por lo tanto, un diseñador debe diseñar para el requisito mínimo, que es normalmente la media de resolución de pantalla de la mayoría de los usuarios. No voy a citar cifras, porque probablemente voy a estar equivocado, pero no creo que estoy equivocado al decir que la pantalla de 800x600 píxeles de resolución, por unos cuantos años, ha sido la resolución de pantalla de diseño. Como ya he mencionado, con el relanzamiento de sitios como Stylegala, se ha vuelto al debate sobre las cuadrículas para una ancho de 1024 pixeles. Entonces, ¿cuál es mi opinión sobre esto? Bueno, en términos de la cuadrícula de diseño que realmente no importa de qué tamaño es el lienzo. Lo que determina la decisión de usar una resolución de 1024 es la investigación que se haga a los usuarios y sus resoluciones de pantalla. Si la base de usuarios de un determinado sitio se muestra mediante resoluciones de ese tamaño y más arriba, entonces la decisión de utilizar ese tamaño de diseño es válido. Sin embargo, como algunas personas han señalado, incluso si se hace un diseño en una resolución superior a 800x600 ¿no significa que la ventana del navegador ocupará toda la pantalla? La respuesta a esta pregunta en general, es que no la sabemos. Personalmente, pienso que no sólo es específica de la plataforma, pero también depende de la persona y su nivel de experiencia. Tal vez los usuarios más experimentados en un PC no usan su navegador en pantalla completa. Desde mi experiencia ejecutando pruebas de usuario con una amplia gama de personas, es que un mayor número de usuarios, sobre todo en una PC, ejecuta en un navegador a Autor: Cristhian Salamanca 43 Estética para Entornos Virtuales UNAD pantalla completa, ya que es el valor por defecto, mientras que en un Mac por defecto no es de pantalla completa. Lo que no he tocado todavía es acerca de los dispositivos móviles. Esto, por supuesto, podría ser un PDA, un teléfono móvil o un ordenador. Los diseños de cuadrículas deben ser examinados para cada uno de estos dispositivos. AGRADABLE, FÁCIL DE PENSAR Y DIMENSIONES MODULARES Para los efectos de este simple artículo, voy a estar utilizando 800 x 600 pixeles como mi resolución por defecto de diseño. Durante muchos años he diseñado para un mínimo de base (sobre la base de 800 x 600) de 760px x 410px (para evitar el Scholl). No me pregunten porque tengo estas cifras, pero estoy atascado y parece estar ok para la mayoría de plataformas y navegadores. Empezamos por dividir el lienzo por coeficientes, de la misma manera que hemos hecho con el diseño de la red para su impresión. El ejemplo que estoy usando para este tutorial es mi propio sitio, que utiliza una cuadrícula fija y se sienta feliz por debajo de 760px de ancho. Imagen 11. La Cuadrícula El diseño de mi sitio está construido en torno a un sistema de cuadrícula muy sencillo. Una vez tuve mi cuadrícula, he utilizado Photoshop para crear mi diseño posicionando cada uno de los elementos, exactamente en las líneas de la cuadrícula. La cuadrícula se diseñó inicialmente para un contenido y el área de navegación basada en la Regla de Terceros (lo que Autor: Cristhian Salamanca 44 Estética para Entornos Virtuales UNAD equivale aproximadamente a aproximarse en torno a la sección de oro), las dimensiones de las cuales son 250px y 500px respectivamente. El área de contenido se subdivide en dos columnas de 250px. Véase, fáciles y agradables dimensiones. Sin embargo, esto sólo se ocupa de la medición horizontal. Como se discutió en otros artículos, la medición vertical también es importante, pero es aquí donde podemos tener problemas incluso con el diseño de sistemas cuadrículas fijasen la Web. Cuando los usuarios cambian la letra de tamaño, los elementos se mueven verticalmente (si hemos fijado la anchura horizontal). Las mediciones verticales que hemos elaborado de repente desaparecen. Ahora, en el ojo purista, este es un problema real, pero es algo que tenemos que diseñar. Pero realmente no podemos hacer nada al respecto cuando con el diseño de unidades fijas como píxeles, que no se puede cambiar el tamaño por el usuario. UNA PALABRA ACERCA DE LOS ESPACIOS Los espacios son las diferencias entre las columnas. Ellos están allí a manera de texto o imagen, para que las diferentes columnas no se sobrepongan una con otra. En el diseño de sistemas de cuadrícula a veces, dependiendo de la teoría que se lea, los espacios son independientes a las columnas. Esto crea problemas prácticos para nosotros a la hora de diseñar los sistemas de cuadrículas en la Web debido por la forma en que creamos las columnas. En general, las columnas que vamos a crear, usando Web Standards, son "divs", a las cuales se les da estilos, anchos y posición usando CSS. Así que, idealmente, si estamos creando estas columnas, no queremos crear por separado los espacios. Por lo tanto, hacer frente a los espacios como parte de las columnas y su aplicación mediante relleno, o la creación márgenes, sobre los elementos posicionados dentro de ellos, puede ayudarnos a resolver el problema. Autor: Cristhian Salamanca 45 Estética para Entornos Virtuales UNAD Imagen 12. Espacios entre columnas La cosa sobre el diseño de cuadrículas es que a fin de que la cuadrícula funcione se deben ajustar constantemente los elementos del diseño a las líneas de la cuadrícula. Sé que suena totalmente obvio, pero el diseño de cuadriculas significa que usted tiene que dar un paso atrás de lo que usted piensa que el diseño debe ser similar a (y, a continuación, añadir cosas a la cuadrículas para adaptarse), en lugar debe concentrarse en la creación de un diseño armónico dentro del marco que se ha creado. Imagen 13. Añadiendo elementos a la cuadrícula Autor: Cristhian Salamanca 46 Estética para Entornos Virtuales UNAD La mayor parte de la labor de diseño, si se excluye dibujar con un lápiz, se hace en Photoshop. En primer lugar, tener mucho cuidado en dibujar la cuadrícula con precisión, a los píxeles y, a continuación, superponerlos elementos del contenido para garantizar que la alineación es precisa. Como puede ver, la utilización de una cuadrícula red puede ayudarle a desarrollar de mejor manera sus proyectos educativos para la Web en forma más simple, donde usted puede tener el control de lo que va a ser visto, y cómo el usuario final tendrá la mejor de su trabajo. LECCIÓN 2: PRINCIPIOS DEL DISEÑO I “Los principios del arte son el conjunto de normas o directrices de arte que deben considerarse al examinar el impacto de una pieza de arte”26. Un buen diseño debe usar al menos uno de los siguientes principios como el principal. EQUILIBRIO Es la distribución de los elementos visuales en una composición. Con esto queremos decir que ningún elemento de la estructura o la composición debe llamar más la atención que otros, en comparación con el resto de la composición. Nuestros ojos y mentes están más cómodos con una visión equilibrada de diseño o composición. Como diseñadores, a veces tendemos a hacer que el diseño tenga alguna inclinación hacia un lado o, a veces, a dejarlo totalmente desequilibrado. Pero antes de hacer un balance, hay que, en primer lugar conocer y aprender los conceptos básicos - ¿Qué es el equilibrio y la manera de lograrlo? Existen tres tipos de equilibrio – es decir simétrico, asimétrico y equilibrio radial. EQUILIBRIO SIMÉTRICO Es el tipo de equilibrio más fácil de ver cuando vemos diseños con composiciones centradas. En un diseño con sólo dos elementos, ambos elementos serían casi idénticos o tener la misma masa visual. Si uno de los elementos se sustituye por uno más pequeño, podría sacar la página fuera del concepto de simetría. Para recuperar el equilibrio perfecto de simetría usted puede necesitar añadir o restar o reorganizar los elementos a fin de que la página quede dividida equitativamente la página, y puede usar ya sea el alineamiento centrado, u otras formas para dividir la página segmentos (mitades, cuartos, etc.). 26 http://en.wikipedia.org/wiki/Principles_of_art#References Autor: Cristhian Salamanca 47 Estética para Entornos Virtuales UNAD Imagen 14. Equilibrio Simétrico Cuando un diseño puede ser centrado tanto vertical como horizontalmente tiene la más completa simetría posible. El equilibrio simétrico en general se presta a lo más formal, en diseños ordenados. A menudo transmiten una sensación de tranquilidad, o familiaridad, o elegancia o contemplación27. EQUILIBRIO ASIMÉTRICO Es lo que se ha creado con extraños elementos no coincidentes. Normalmente es visto en los diseños y composiciones que suelen estar fuera del centro. Es interesante observar que, un diseño puede ser creado o desarrollado, y curiosamente sin el uso de la simetría perfecta. “Con el equilibrio asimétrico se distribuyen uniformemente los elementos en el formato, lo que puede significar un gran equilibrio de una gran foto con varios pequeños gráficos. O bien, puede crear la tensión por evitar intencionalmente el equilibrio. Imagen 15. Equilibrio Asimétrico 27 http://desktoppub.about.com/od/designprinciples/l/aa_balance1.htm Autor: Cristhian Salamanca 48 Estética para Entornos Virtuales UNAD Los elementos desiguales nos presentan más posibilidades de organizar la página y crear diseños interesantes que los objetos perfectamente simétricos. Los diseños asimétricos son generalmente más dinámicos y porque intencionalmente se hace caso omiso de mantener el equilibrio el diseñador puede crear tensión, expresar movimiento, o transmitir un estado de ánimo como la ira, emoción, alegría, diversión o la casualidad28. EQUILIBRIO RADIAL Se logra cuando los elementos de diseño “salen de una turbulencia o giran en torno a una forma circular o espiral. Las partes del diseño debe estar organizadas de manera que sean equilibradas en toda la anchura y la longitud de la página a menos de que se tenga intencionalmente el objetivo de crear una falta de equilibrio”29. Imagen 16. Radial CONTRASTE “Ocurre cuando dos elementos son diferentes - Cuanto mayor sea la diferencia, mayor es el contraste. La clave para trabajar con el contraste es asegurarse que las diferencias son evidentes. Las maneras más comunes para crear contrastes son: las diferencias en tamaño, forma, valor, alineación, color, orientación, movimiento, textura y tipografía. El contraste añade interés a la página y proporciona un medio de hacer hincapié en lo que es importante o dar un sentido de dirección a los ojos del lector. En una página sin contraste, el lector no sabe dónde buscar primero o lo que es importante. El contraste hace una página sea más interesante por lo que el lector es más apto para prestar atención a lo que está en la página. El contraste ayuda en la legibilidad de los titulares y se destacan las subpartidas. El contraste muestra 28 29 http://desktoppub.about.com/od/designprinciples/l/aa_balance2.htm http://desktoppub.about.com/od/designprinciples/l/aa_balance3.htm Autor: Cristhian Salamanca 49 Estética para Entornos Virtuales UNAD lo que es importante al hacer más pequeños los elementos más ligeros permitiendo que otros elementos tomen un valor centra en el escenario”30. Imagen 17. Contraste Es importante tener la cantidad correcta de contraste en la percepción del espectador, mientras que se realiza la comparación de diversos componentes del diseño. Por ejemplo, el espectador podría comparar áreas oscuras y claras, líneas delgadas y gruesas, llenar o no espacios vacíos, etc. “Demasiado contraste crear dispersión lo que puede destruir la unidad y hacer una labor difícil de ver. A menos se busque una sensación de caos y confusión, es una buena idea considerar cuidadosamente dónde colocar sus áreas de máximo contraste”31. ENFASIS “Muy relacionado a la idea de unidad es el concepto de énfasis o dominancia. En lugar de centrarse en conseguir que los distintos elementos de un diseño encajen juntos, se hace hincapié acerca de que un elemento en particular llame la atención del espectador.”32 Una forma de obtener la atención del espectador es establecer un "punto focal" o en otras palabras, un centro de interés. Este punto focal es lo que atrapa la atención del espectador. Es la zona en torno a la cual el ojo dibuja un círculo alrededor. El punto focal en un diseño se puede lograr mediante un elemento o 30 http://desktoppub.about.com/od/contrast/ss/contrast.htm http://www.johnlovett.com/test.htm 32 http://www.sitepoint.com/article/principles-beautiful-web-design/5/ 31 Autor: Cristhian Salamanca 50 Estética para Entornos Virtuales UNAD área de la concepción dominante o visualmente importante, haciendo que el resto del área contribuya pero subordinadamente. El centro de interés puede ser más grande o más pequeño, más brillante o el más oscuro o, a veces, incluso los más complicados. El uso del componente más pequeño para lograr un énfasis en el diseño se conoce como "aislamiento", mientras que el uso del elemento más grande se conoce como "posición dominante". Este principio de diseño, conocido como el énfasis tiene validez sólo si a través del área un elemento se hace prominente. Si varios componentes obtienen importancia, este principio no es válido. Imagen 18. Enfasis con Aislamiento El énfasis también se puede lograr por contraste del elemento principal, junto con sus elementos primarios. Este concentrado interés visual en un área en particular también se puede realizar por un cambio repentino en la dirección, el tamaño, forma, textura, color, tono o línea. Imagen 19. Énfasis con Claro y Oscuro Autor: Cristhian Salamanca 51 Estética para Entornos Virtuales UNAD Imagen 20. Énfasis con Dominancia Un buen diseño que emplea el principio de énfasis es en el que se asegura que los elementos subordinados trabajen hacia el efecto unificador del punto focal. “Cuando usted diseña una página Web, a menudo querrá que algún ítem en el contenido o en el diseño mismo, se destacado. Tal vez un botón que desea que los usuarios presionen, o un mensaje de error que usted desea que ellos vean. Uno de los métodos para lograr esa atención está en hacer que ese elemento esté en un punto focal. Un punto focal es aquello que llama la atención del espectador en una página, en lugar de simplemente de ver la página como un todo. Existen varios métodos para lograr un punto focal”33. LECCIÓN 3: PRINCIPIOS DEL DISEÑO II PROPORCIÓN “La proporción es la relación entre los elementos y su conjunto”34. Pero el uso de este principio del diseño en un buen diseño requiere también de la „armonía‟ entre los elementos y su conjunto. Esta armonía se dice que existe cuando hay una correcta o deseable relación entre los elementos. Esto se refiere a la correcta distribución y al tamaño de los elementos. “Una buena proporción añade armonía y simetría o equilibrio entre las partes de un diseño en su conjunto”35. La proporción se puede lograr con respecto al tamaño, color, cantidad, grados, etc. La proporción es un principio de diseño que trae a la armonía al escenario. Pero está no será notoria si alguno de sus componentes está fuera de proporción. Por ejemplo, cuando el tamaño relativo de los elementos en un diseño no es 33 http://www.sitepoint.com/article/principles-beautiful-web-design/5/ http://en.wikipedia.org/wiki/Proportion_(architecture) 35 http://www.bluemoonwebdesign.com/art-lessons-7.asp 34 Autor: Cristhian Salamanca 52 Estética para Entornos Virtuales UNAD equilibrado; también si el cuerpo de alguien es muy corto o pequeño para su cabeza, nos damos cuenta de que está fuera de proporción. Hay muchas maneras de lograr la proporción armoniosa en un diseño. A continuación se enumeran algunas de estas maneras: Coloque los elementos juntos, de características similares o que tienen alguna característica en común. Cree áreas mayores y menores dentro del diseño, ya que la igualdad de las partes puede convertirse rápidamente en monotonía y ser aburrido. Sin embargo, las diferencias de tamaño no debe ser tan grandes como para que las partes parezcan no estar vinculadas y, por lo tanto, no se note la armonía de unos con otros. La disposición del espacio debe ser de tal manera que el ojo no vea una relación matemática estándar. Se debe evitar que la composición del espacio se haga en dividiéndolo en dos mitades, o terceras y cuartas partes. Una sutil relación crea un diseño más dinámico. Cree armonía en el diseño. La armonía es un acuerdo entre las formas que destaca las similitudes de todas las partes. En otras palabras, la forma de una parte debe "encajar" en la forma de los elementos adyacentes. Cada una de las formas debe "encajar" bien en sus posiciones y espacios. Sin embargo, la naturaleza utiliza un método para calcular la proporción, método al que se le llama La secuencia de Fibonacci, que es una serie de números que aparecen en toda la naturaleza. Esta secuencia puede ser usada para calcular el punto medio (o la sección de oro), que está representado por la letra griega phi. La secuencia de Fibonacci y Phi se puede encontrar visualmente en las plantas y y conchas marinas, y en la familias de árboles y en los animales. La secuencia empieza: 0, 1, 1, 2, 3, 5, 8, 13, 21, 34, y continúa ad infinitum. La secuencia es el resultado de la suma de los dos números anteriores creando un nuevo número en la secuencia. Por ejemplo, la suma de 8 + 13 es de 21, haciendo 21, el siguiente número después del 13. Autor: Cristhian Salamanca 53 Estética para Entornos Virtuales UNAD Imagen 21. El rectángulo de Oro Phi, conocido también como el punto medio, es la relación secuencial entre dos números en la secuencia de Fibonacci. Cuando 1597 se divide por 987 el resultado es 1,618034447821682, que se redondea a 1,618. Cuanto mayor sea el número utilizado para crear la relación, más exacto es el cálculo. Por lo tanto, la media de Oro es la fórmula de los patrones que se aplican en la naturaleza. La secuencia de Fibonacci también puede ser usada para realizar el diseño de una página. El Rectángulo de Oro puede ser dibujado como se explica a continuación: 1. Dibuje un cuadro donde cada lado tenga 4cms (rojo). Esos 4cms = 1 unidad de medida. 2. Dibuje una línea desde el punto medio de uno de los lados hacia la esquina opuesta. 3. Use ésta línea como el radio para dibujar un arco que define la dimension del largo del rectángulo (azul). 4. Ésta construcción puede ser repetida hasta cubrir la página entera. Autor: Cristhian Salamanca 54 Estética para Entornos Virtuales UNAD Imagen 22. El Espacio de Fibonacci Leonardo Da Vinci usó la secuencia de Fibonacci en sus pinturas como la Mona Lisa y la Ultima Cena. Él llamó a ésta secuencia „La Divina Proporción‟. La Divina Proporción también se muchos en la arquitectura de la antigua Grecia, y también puede ser usada hoy en día en el diseño virtual. MOTIVOS / REPETICIÓN / RITMO Es cuando se está en condiciones de duplicar y repetir los elementos visuales en intervalos regulares. Esto puede hacerse utilizando el tamaño, forma, posición, la simetría, la frecuencia, el valor, y el color. Imagen 23. Los motivos son fáciles de indentificar, pues usan elementos visuals multiples. Éste motivo usa la forma, tamaño, posición, frecuencia, simetría y valor. Los motivos son usados para decoración, pero también para el diseño. Los textiles, cerámicas, y joyas usan motivos con propósitos decorativos. Autor: Cristhian Salamanca 55 Estética para Entornos Virtuales UNAD “Los motivos tienen significados culturales, religiosos, y filosóficos. Muchos motivos tienen significados tradicionales que simbolizan el lugar de la humanidad en relación con la naturaleza y el universo. Si bien este simbolismo se puede encontrar en los patrones de la mayoría de las culturas, es muy prominente en el arte y arquitectura islámica donde el motivo se utiliza para la discusión filosófica entre el hombre y Dios”36. Imagen 24. Motivos de diferentes culturas “Si usted lo nota o no, la repetición es utilizada a menudo en los diseños de sitios Web para unificar los elementos del diseño en general. Un buen ejemplo de este concepto se en los elementos HTML como las viñetas usadas para las listas. La viñeta que precede a cada elemento de la lista es un indicador visual de que los temas con la viñeta hacen parte del diseño. Motivos y texturas repetidos también puede ayudar a unificar un diseño. Un ejemplo lo tenemos del sitio personal del diseñador australiano Andrew Krespanis. Este diseño contiene muchos elementos llamativos, pero el uso reiterado de la textura de madera roja en la cabecera, el menú, y bordes de página, literalmente, mantiene el diseño junto”37. 36 37 http://www.atpm.com/10.02/design.shtml http://www.sitepoint.com/article/principles-beautiful-web-design/4/ Autor: Cristhian Salamanca 56 Estética para Entornos Virtuales UNAD Imagen 25. Un diseño con un motivo que se repite: la madera roja “El ritmo es el resultado de la repetición que lleva el ojo de una zona a otra en un movimiento directo y fluido. Puede ser producida por la continua repetición, por repetición periódica, o por la alternancia regular de una de las formas o líneas. Una sola forma puede ser un diferente con cada repetición o que ésta se repita con cambios periódicos en tamaño, color, textura, o el valor. Una línea puede variar regularmente en longitud, peso, o la dirección”38. Si hay algún cambio repentino en el motivo, puede añadir interés al ritmo. MOVIMIENTO “El movimiento es el camino que siguen nuestros ojos cuando miramos una obra de arte. El propósito del movimiento es crear unidad entre la obra y el viaje que el ojo realiza”39 El movimiento del ojo es muy importante en cualquier diseño. Si no hay movimiento, la composición puede ser considerarse como estancada. Para poder lograr este movimiento del ojo en un diseño, hay ciertas reglas que deben seguirse. Los ojos del espectador pueden ser controlados por la composición y la colocación de elementos de cierta manera. Una página o pantalla en blanco puede ser dividida simétricamente en 4 partes iguales. Cada una de estas partes tiene un punto central conocido como el punto de oro. Así, cada diseño tiene cuatro puntos de oro (círculos azules). Estos son conocidos como puntos de oro porque atraen la atención en un diseño. La mayoría de las veces los logotipos colocados en la parte inferior de los puntos de oro son 38 39 http://www.bluemoonwebdesign.com/art-lessons-3.asp http://www.bluemoonwebdesign.com/art-lessons-3.asp Autor: Cristhian Salamanca 57 Estética para Entornos Virtuales UNAD más eficaces. Es por la misma razón que los periódicos cobran más caro un anuncio que aparece en la primera página en la esquina inferior derecha. Imagen 26. Punto óptico(amarillo) y los puntos de oro(azul) Si dividimos la página verticalmente por la mitad y luego lo hacemos horizontalmente, obtenemos el punto central de la página. Pero si dibujamos una línea que una los dos puntos de oro en la parte superior, tenemos nuestro centro óptico, conocido también como la línea de oro. Como el propio centro es obviamente en el centro, colocar allí los elementos de una composición es incómodo de ver. Por lo tanto los titulares o elementos de importancia se colocan generalmente en el centro óptico. Por ejemplo, la línea del horizonte en una composición dibujada centro actual será bastante inusual, extraña y convencional, en comparación con una dibujada en el centro óptico. Otro aspecto importante de un buen diseño es el espacio para respirar. Que se traduce el espacio que se deja para que en el diseño tenga la sensación de que el aire fluye. La cantidad de espacio para respirar se necesita en cualquier diseño o composición. Si hay poco espacio para respirar puede causar que el diseño sea sofocante y luego morir. "Un degradé degradación puede agregar interés y movimiento a una forma. Un degradé de oscuro a la claro hará que el ojo se mover a lo largo de una forma"40. 40 http://www.johnlovett.com/test.htm Autor: Cristhian Salamanca 58 Estética para Entornos Virtuales UNAD Con un movimiento se puede añadir emoción e interés en el proyecto final, pues dirige los ojos de los espectadores a través del plano visual. UNIDAD La unidad es un principio que da una sensación de armonía al diseño. Se refiere a algo que no se ve incompleto, desunido o desarmado. “Es el sello de un buen diseño. Es el resultado final en una composición cuando todos los elementos de diseño trabajan juntos en armonía dando al espectador la satisfacción de un sentido de pertenencia y de relación. Se sabe que la unidad se ha logrado cuando todos los aspectos del diseño se complementan entre sí en lugar de competir por la atención. Sirve para reforzar la relación entre los elementos de diseño y se refiere a que el tema principal se expresó. Una unidad en la composición se logra cuando todos los principios de diseño se han aplicado correctamente. Todo lo seleccionado en una composición debe complementar el tema clave y debe servir también para algunos efectos funcionales en el diseño. Lograr la unidad en sus composiciones sólo el resultado de la práctica, conociendo y seleccionando los elementos visuales apropiados y la usando los mejores principios de diseño para relacionarlos. La unidad dentro de una buena composición de diseño logra dos cosas: La unidad crea un sentido de orden. Cuando un diseño posee unidad, habrá una coherencia de tamaños y formas, así como una armonía del color y los motivos. Una forma de lograr la unidad es por la repetición de los elementos clave, equilibrándolos a través de la composición y, a continuación, añadiendo un poco de variedad a fin de que el diseño tenga su propia personalidad. Aprender a combinar los elementos y principios de diseño de tal manera que se logre la combinación adecuada es clave para el buen diseño. La unidad también le da a los elementos de una composición la apariencia de estar completos y que el uno sin el otro no pueden estar. Cuando una composición tiene unidad de diseño se considera como una sola pieza en su conjunto, y no como elementos separados. El uso de demasiadas formas puede causar que un diseño sea desordenado y confuso. Un diseño bien organizado se logrará mediante el uso de una forma básica que luego se repetirá en toda la composición. Cuando se logra la unidad: Los elementos individuales de una composición no competirán por llamar la atención. Autor: Cristhian Salamanca 59 Estética para Entornos Virtuales UNAD El tema principal será comunicado con mayor claridad. El diseño evocará un sentido de estar complete y organizado. Para crear la unidad se debe tener un claro objetivo en mente de lo que se quiere comunicar al espectador. Se debe mantener enfocado para lograr el objetivo y no desviarse de él. Si hay un elemento que está considerando incluirlo en el diseño pero no contribuye a que el objetivo se cumpla, entonces no debería ser añadido al diseño. También, como profesional de la educación relacionado con el diseño de ambientes virtuales, debe ser analítico sobre su trabajo, mantener la objetividad en todo momento, y aceptar las críticas de sus compañeros, amigos y aún miembros de la familia. Cuando la finalidad y el mensaje que intenta comunicar es entendido de la misma manera por varias personas entonces el principio de la unidad se ha mantenido dentro del proyecto. Cuando usted considera que su composición está completa, de un paso atrás y observe con un ojo objetivo. La prueba final de la unidad es aquella en la que nada puede ser añadido o quitado sin tener que rehacer toda la composición. La relación de todos los elementos debe ser tan fuerte que en realidad le duele al diseño añadir o eliminar cualquier cosa. Cuando nada puede distraer del todo es cuando se tiene la unidad. Sin embargo, en sus esfuerzos por lograr la unidad se necesita tener en cuenta que demasiada unidad sin diversidad es aburrida y demasiada variación sin la unidad es caótica. Otras formas de lograr la unidad en sus composiciones incluye: Similaridad Intente repetir colores, formas, valores, texturas, o líneas para crear una relación visual entre los elementos. La repetición trabaja para unir todas las partes de un diseño porque crear un sentido de consistencia y de compleción. Continuidad Trate los diferentes elementos de la misma manera. La continuidad ayuda a crear “un lazo familiar” entre las formas. Esto ayuda a unirlas creando una conexión o una unión sin interrupciones. Alineación Autor: Cristhian Salamanca 60 Estética para Entornos Virtuales UNAD Organice las formas para que la línea o el borde de una forma lleve a otra ayudando a crear la unidad en su diseño. Cuando un elemento se coloca en una composición, se crea una relación implícita con los ejes horizontal y vertical en su parte superior, inferior, el centro y los lados. Alinear los elementos con estos ejes crea una relación visual, que les unifica. Proximidad Agrupe elementos relacionados a fin de que estos elementos sean vistos como un grupo cohesionado, más que un montón de elementos no vinculados. Los elementos que se colocan uno cerca del otro se perciben como elementos relacionados, mientras que si están lejos se consideran menos relacionados. La forma como este juntos o separados los elementos en una composición sugiere una relación (o falta de ella) entre partes dispares. El uso de un "tercer elemento" como un camino para conectar los elementos con los más distantes también ayuda a crear un sentido de la relación entre las formas que no están agrupados41. LECCIÓN 4: TEORÍA DEL COLOR I "El color es vida, para un mundo sin color es estar muerto. Como el fuego produce luz, la luz produce color. " - Johannes Itten Imagen 27. La rueda del Color de Goethe. 1810 UNA DESCRIPCIÓN 41 http://www.bluemoonwebdesign.com/art-lessons-9.asp Autor: Cristhian Salamanca 61 Estética para Entornos Virtuales UNAD El color tiene un profundo efecto sobre nosotros, en todos los niveles, físico, mental, emocional y espiritual. “Al entrar en una habitación, ver a alguien caminando hacia usted en la calle, o buscar en una cartelera mientras está atrapado en un trancón, la primera cosa que usted nota es el color”42. Estamos en un mundo en el que el color domina nuestras vidas y tiene fuertes asociaciones en la lectura de los signos a tal punto que identificamos una fruta madura por su color. Asociamos Coca-Cola con el rojo y Nike con el naranja o DHL con el amarillo. Usamos el color todos los días en nuestras vidas sin ni siquiera reconocerlo. Simplemente muestra que el color es parte de nuestras vidas que la mayoría de las veces no somos capaces de sentir su importancia. El color es libre. Todo el mundo puede utilizar el color en su amplia gama de matices, no importa de donde venga, el credo o la nacionalidad o la cuestión de que su nivel de ingresos. Sin color viviríamos en un mundo oscuro. Muchas personas desconocen la ciencia del color. El espectro visible, como vemos se compone de los colores del arco iris. Sin embargo, nuestra retina tiene tres tipos de receptores de color en forma de conos. Podemos detectar sólo tres de esos colores - rojo, azul y verde. Estos colores se llaman aditivo primarios. Son estos tres colores los que se mezclan para crear todos los demás colores que vemos. Dependiendo de la longitud de onda y la frecuencia de la luz, vemos un color. Los nueve colores del espectro - Violeta, Índigo, Azul, Verde, Amarillo, Naranja y Rojo, (VIBGYOR en inglés), todos tienen diferentes longitudes de onda y frecuencias. Infra Rojo y Ultra Violeta son invisibles para el ojo humano. El rojo se encuentra en el extremo inferior del espectro y tiene una longitud de onda mayor, pero menor frecuencia y violeta tiene una longitud de onda menor y mayor frecuencia. Imagen 28. La rueda del color 42 The complete Color Harmony, Rockport publications, ISBN 1-59253-031-1, p. 7 Autor: Cristhian Salamanca 62 Estética para Entornos Virtuales UNAD “Las reacciones al color son tan fuertes que tomar café en una taza azul pareciera más fresco que el mismo líquido servido en una taza naranja. Usamos el color todos los días para informar y vender. El rojo sirve para detener su automóvil. La plata sugiere exclusividad. Un color mal seleccionado puede ser fatal para las ventas y causar caos. En general, hoy en día las personas son mucho más aventureras y sofisticadas sobre la elección del color. La Era de la Información que inició en la Internet, junto con los avances tecnológicos en efectos especiales, ha abierto todo un nuevo mundo de opciones de color, incluso para el observador casual”43. CUALIDADES DEL COLOR Todos los colores tienen tres cualidades, las cuales frecuentemente no se entienden o se usan equivocadamente. La razón es que la mayoría de las personas desconocen lo que estas implican y la diferencias entre cada una de ellas. Estas tres cualidades son – Matiz, Valor o Brillo y Croma o Saturación. MATIZ Imagen 29. Saturación de Amarillo + Saturación de Rojo = Saturación de Naranja Es el espectro puro de color sin Blanco o Negro. Es la cualidad que muestra la diferencia entre dos colores. Usted puede cambiar la saturación mezclando un color con otro. Por ejemplo: si se mezclan el amarillo y el rojo se obtiene naranja. VALOR O BRILLO Es la claridad o la oscuridad, es decir, la sombra, Matiz o el tono de color. Cuando decimos que un determinado color es más claro o más oscuro que el otro, lo que significa es que hay un cambio en el valor. Se puede cambiar el valor de un color mediante la adición de blanco o negro. 43 Tina Sutton & Bride M. Whelan -The complete Colour Harmony, ©2004 Rockport Publications, p. 8 Autor: Cristhian Salamanca 63 Estética para Entornos Virtuales UNAD Por ejemplo: Rojo claro y rojo oscuro. Al añadir el color blanco se puede aumentar el valor de color y al añadir negro el valor del color se puede disminuir. Imagen 30. Rojo – con un tinte de color rojo y con tonalidad de rojo i. Sombra – es la adición de negro a cualquier color. ii. Tinte – es la adición de blanco a cualquier color iii. Tono – es cuando se adiciona gris a cualquier color. CROMA O SATURACIÓN Es el grado de pureza o la cantidad de gris contenido en un color. Un color muy brillante puede ser aburrido por la adición de gris. Si el blanco se añade a un matiz, su valor se eleva, sin reducir su brillo. Si se adiciona negro provocaría un descenso de los tonos del matiz. Pero al adicionar el gris (Negro + Blanco) la pureza del color se reduce. Esto significa que el Croma ha cambiado. TEORÍAS DEL COLOR Cada teoría del color describe como vemos el color y como han sido creados cada uno de los colores. Básicamente existen dos teorías. LA TEORÍA ADITIVA DEL COLOR LA TEORÍA SUSTRACTIVA DEL COLOR LA TEORÍA ADITIVA DEL COLOR: La Teoría Aditiva del Color también se conoce como la Teoría de Color Claro. Se inicia con la ausencia de la luz, que es cuando vemos Negro. Cuando vemos todos los rayos de luz que son visibles al ojo humano, vemos Blanco. El Rojo, el verde y el azul son los tres colores básicos a la luz la teoría del color, por lo que los conocemos como los colores primarios. Cuando dos colores primarios se Autor: Cristhian Salamanca 64 Estética para Entornos Virtuales UNAD mezclan crean colores secundarios. El rojo y el verde hacen el amarillo, el rojo y el azul hacen el Magenta y el verde y el azul hacen el cian. Imagen 31. La rueda del color aditiva Es con la adición de los rayos de la luz en diferentes frecuencias que vemos los diferentes colores, es por esto que se le conoce como la teoría aditiva del color. LA TEORIA SUSTRACTIVA DEL COLOR: La teoría sustractiva del color es conocida como la teoría de pigmentación del color. Esta teoría comienza con luz blanca en contraste con la teoría aditiva del color. “Tintas de colores, pinturas o películas colocadas entre el espectador y la fuente de luz o superficie reflectante (como una de papel blanca) sustrae las longitudes de onda del blanco, y hace un color”.44 Por esta razón es llamada la teoría sustractiva del color. Esta teoría tiene dos modelos de color. El modelo RYB (por sus siglas en ingles que significan Rojo, Amarillo (Yellow), Azul (Blue)), que se usa en el arte y la ecuación del diseño, particularmente la pintura. El segundo modelo es el CMY (por sus siglas en ingles Cian (Cyan), Magenta, Amarillo (Yellow)), usado para impresión. El modelo RYB tiene el Rojo, Amarillo y Azul como sus colores primarios, y el modelo CMY tiene el Cian, Magenta y Amarillo como sus colores primarios. 44 http://en.wikipedia.org/wiki/Subtractive_color Autor: Cristhian Salamanca 65 Estética para Entornos Virtuales UNAD Imagen 32. El modelo RYB Imagen 33. El modelo CMY Cuando dos colores primarios se mezclan obtenemos colores secundarios. Ejemplos: 1 color primario + 1 color primario = 1 Color secundario 1 color primario + 1 color secundario = 1 color intermedio 1 color secundario + 1 color secundario = 1 color terciario (Los colores terciarios son grisosos en su naturaleza y tienen un tinte de color primario) 1 color terciario + 1 color terciario = 1 color cuaternario (Colores cuaternarios tienen un tinte de color secundario) El efecto sobre todos los dos modelos de la teoría del color sustractivo es similar. Sin embargo, es importante señalar que, el azul y el violeta de las gamas de modelo CMY son mucho más prominentes, mientras que el amarillo y el naranja son menos prominentes. ASPECTOS DEL COLOR Las características y la calidad de color evocan respuestas emocionales sobre la base de los colores utilizados y su combinación con otros colores. Agrupamos los colores y los etiquetamos con las emociones que evocan, con el fin de separar a un grupo del otro. Hay innumerables combinaciones, los siguientes son los básicos. COLORES CÁLIDOS Autor: Cristhian Salamanca 66 Estética para Entornos Virtuales UNAD El rojos evoca calor. La imagen muestra el rojo en saturación total. Su calor llama la atención. Es por esta razón que la mayoría de los avisos de OFERTAS están en Rojo, y es un color usado frecuentemente en diseño. Se trata de un color caliente, fuerte y agresivo. Por lo tanto, el grupo de colores cálidos son los que contienen tonalidad roja. La mezcla de amarillo en distintos porcentajes con el rojo, es decir, tonos de rojo, como el naranja y amarillo forman el grupo de colores cálidos. Estos matices son también reconfortantes, espontáneos y acogedores. COLORES FRESCOS El color que viene a la mente cuando pensamos en el agua y el hielo es el azul. El azul en toda su saturación es lo que llamamos un color frío. Es un color que evoca una sensación de calma. “Cuando los colores calientes y fríos se colocan uno al lado del otro cada uno vibra como fuego y hielo”45. Al igual que el amarillo en porcentajes variables añadido rojo forma el grupo de colores cálidos, de la misma manera añadiendo amarillo al azul en proporciones variables, es decir, azul, verde, amarillo, azul-verde, turquesa etc., se crea el grupo de los colores frescos. Estos colores nos hacen sentir renovados, tranquilos y reconfortados. COLORES CLAROS Y PÁLIDOS Este grupo de colores forman la paleta de colores pastel. Son casi transparentes y son formados por la reducción del matiz. 45 Tina Sutton & Bride M. Whelan -The complete Colour Harmony, ©2004 Rockport Publications, p. 17 Autor: Cristhian Salamanca 67 Estética para Entornos Virtuales UNAD “Estos colores se asemejan a las cortinas de una ventana o al envío de un mensaje de la relajación. Ellos abren los alrededores y sugieren ligereza, descanso y liquidez.”46 Ellos también pueden ser románticos, suaves, gentiles o soñadores. COLORES OSCUROS Son colores sólidos, dramáticos y serios. Son formados por la adición de negro al matiz. Está en contraste a los colores suaves y cierran los espacios para hacerlos ver más pequeños. COLORES BRILLANTES Este un set de colores en su matiz puro. Rojos, Amarillos, y Azules en su intensidad total Estos colores son vividos Estos colores son tan vivos que agitan y llaman la atención. Ellos son estimulantes, alegres y brillantes. “El color es a la vez simple y complejo. Esto significa diferentes cosas para diferentes personas en diferentes culturas. No se ve color de la misma manera por dos personas. El color es personal y universal, enviando mensajes lleno de infinitas variaciones”47 46 Tina Sutton & Bride M. Whelan -The complete Colour Harmony, ©2004 Rockport Publications , p. 20 47 Tina Sutton & Bride M. Whelan -The complete Colour Harmony, ©2004 Rockport Publications, p. 15 Autor: Cristhian Salamanca 68 Estética para Entornos Virtuales UNAD ARMONIAS DE COLORES Hay tres armonías de color: ARMONIA ACROMATICA “El gris describe los tintes y tonalidades que van del negro al blanco, incluyendo blanco y negro, son conocidos como colores acromáticos o colores neutrales”48. ARMONIA MONOCROMATICA Monocromático viene de la palabra griega que significa „un color‟; por lo tanto, una monocromática es una armonía con un solo color en diferentes tonos. ARMONIA POLICROMATICA Es la armonía que implica muchos colores. Un esquema de colores policromáticos tiene muchos esquemas de color. 48 http://en.wikipedia.org/wiki/Gray Autor: Cristhian Salamanca 69 Estética para Entornos Virtuales UNAD COMPLEMENTARIOS Son dos colores directamente opuestos el uno del otro en la rueda del color. COMPLEMENTARIOS DIVIDIDOS Uno de los complementos es dividido en dos colores adyacentes al color complementario. COMPLEMENTARIAS DIVIDIDAS En lugar de limitarse a una división de los complementos, de dividen los dos complementos. Autor: Cristhian Salamanca 70 Estética para Entornos Virtuales UNAD ANALOGOS Usa dos o tres colores uno al lado del otro en la rueda del color. TRIADICOS Este sistema utiliza tres colores diferentes que están espaciados uniformemente alrededor de la rueda de colores. EL ESQUEMA DE COLORES DE TONOS ALTOS Y TONOS BAJOS Un esquema de colores de tonos altos is cuando todos los colores usados son de alto valor. Por otro lado, un esquema de colores bajos tiene los colores con un valor bajo. En este sistema el contraste no es prominente. Imagen 34. Colores de tonos altos Autor: Cristhian Salamanca Imagen 35. Colores de tonos bajos 71 Estética para Entornos Virtuales UNAD Algunos apuntes adicionales sobre como lograr la armonía con el color son: Las áreas grandes deben ser pintadas con colores con intensidad baja y las áreas pequeñas deben ser pintadas con colores brillantes. Las áreas grandes deben ser pintadas con colores claros, y las áreas pequeñas con colores oscuros. Los colores oscuros deben ser usados en un fondo claro para tener contraste. No todos los colores brillantes deben usar el mismo modelo de color. Algunos colores grises deben ser introducidos. Cualquier color puede ser usado con seguridad sobre blanco, negro o gris. Los colores complementarios deben estar colocados proporcionalmente de otra manera pueden producir efectos contrarios. Cuando dichos colores son usado en áreas pequeñas, ellos producen un efecto vibrante. El modelo de color se vuelve agradable si se mezclan con gris. Los colores brillantes se ven mejor desde una distancia mayor pero dan otro efecto cuando se miran de cerca. Colores discordantes son vibrantes y más atractivos si se usan en un área pequeña. La discordancia se produce cuando el orden natural de los colores en el espectro solar es reversado. El amarillo es más brillante que el azul, pero un azul más claro junto a un amarillo oscuro creará discordancia. El amarillo claro debe ser usado con azul oscuro. La misma regla aplica a otros colores. Cuando dos o más colores no son agradables, ya sea porque se quiere o por la falta de buen tono, el uso de los colores negro, blanco o gris entre los colores podrá mejorarlas. Los colores brillantes usados en pequeñas cantidades sobre fondos en negro, blanco o gris serán más atractivos. Los tonos pastel se ven mejor a una distancia corta. El contraste entre el matiz y el valor debe ser proporcionado. Colores con baja intensidad se ven major en superficies brillantes, pero no son atractivos en superficies no brillantes. La analogía del tono o color es esencial en la creación de armonía de color. Cuando todos los colores son de aspecto grisáceo, el esquema de color no es desagradable. LECCIÓN 5: TEORÍA DEL COLOR II MANIPULACIÓN DEL COLOR El agente del color es el pigmento definible y analizable física o químicamente, es el colorante. Adquiere significado humano y contenido por la percepción óptica y cerebral. El ojo y la mente logran la percepción a través de la comparación y contraste. Autor: Cristhian Salamanca 72 Estética para Entornos Virtuales UNAD El valor de un color cromático puede estar determinado por la relación con un color acromático – negro, blanco, gris o algunos de los otros disponibles. La percepción del color es la realidad psico-fisiológica distinguida de la realidad fisicoquímica del color. A esto se llama efecto del color. El agente del color y el efecto del color coinciden únicamente en el caso de los politonos armoniosos. En los otros casos el agente del color es transmitido simultáneamente en un nuevo efecto Un cuadro blanco sobre un fondo negro se verá más grande que un cuadro negro del mismo tamaño sobre un fondo blanco. El blanco llega y se desborda de los limites, mientras que el negro se contrae. Un cuadro de color gris claro se verá más oscuro sobre un fondo negro, y el mismo cuadro sobre un fondo blanco se verá más claro AMARILLO Es el más brillante de todos los matices. Esta característica se pierde en el momento en que sombrea con gris, negro y violeta. El Amarillo es, como si se tratase de un material blanco más denso. Esta luz amarilla se vuelve opaca, cuando se acerca o se asimila al naranja o al rojo en la rueda del color. El rojo es el punto de parada del color amarillo, con el que no es visible teñido. En el centro de la Rojo y el Amarillo, tenemos el naranja, como el más fuerte y concentrado interpenetración de la luz y la materia. Autor: Cristhian Salamanca 73 Estética para Entornos Virtuales UNAD El Amarillo oro sugiere el poder de la luz hasta su nivel más alto, radiante, un color que vibra. El oro fue usado en pinturas. Significó luminosidad, un evento de emisión de luz. El amarillos es radiante y alegre en comparación a tonos más oscuros. Imagen 36. Amarillo sobre Rosado - la radiación del Amarillo es moderada Imagen 37. Amarillo sobre naranja – el Amarillo se ve puro, el naranja se ve ligero Imagen 38. Amarillo sobre verde – da un efecto de radiación Imagen 39. Amarillo sobre violeta -Tiene una extrema fuerza de carácter, duro e inevitable Imagen 40. Amarillo sobre rojo – es un ruido alegre Imagen 41. Amarillo sobre azul – es extraño y crea un efecto que se repelen Imagen 42. Amarillo sobre negro - es más brillante y luminoso, más agresivo Autor: Cristhian Salamanca 74 Estética para Entornos Virtuales UNAD ROJO No es ni amarillento ni azulado. Es muy sensitivo cuando se salta de Amarillo a azul. El rojo es denso y opaco, es como si estuviera lleno de calor el interior. La calidez del rojo se intensifica. En el mundo real la luz Rojo-naranja promueve el crecimiento hortalizas y la función orgánica. Imagen 43. sobre el naranja, el rojo se ve latente, oscuro y sin vida Imagen 44. sobre verde, el rojo es imprudente, un intruso, ruidoso y común Imagen 45. Sobre un verde-azulado, es como una llama de fuego AZUL No tiene ningún trazo de Amarillo o rojo. Autor: Cristhian Salamanca 75 Estética para Entornos Virtuales UNAD Imagen 46. el azul es pasivo sobre el rojo Imagen 47. Azul sobre Amarillo tiene un efecto muy oscuro Imagen 48. Azul sobre negro brilla, es fuerza pura Imagen 49. sobre café oscuro, el azul es exitado haciendo que el café sea un color vivo Imagen 50. El azul sobre un rojo-naranja, mantiene su característica oscura, aunque se convierte en luminoso, mantiene su fuerza Imagen 51. Azul sobre verde cambia a ser rojo VERDE Es el color intermedio entre Amarillo y azul. Si contiene más Amarillo o azul las características de su expresión cambian. El Verde cuando se inclina hacia el azul representa riqueza. Imagen 52. el verde se ve opaco sobre el gris Autor: Cristhian Salamanca Imagen 53. verde sobre Amarillo es fresco y jóven 76 Estética para Entornos Virtuales UNAD NARANJA Es una combinación de rojo y Amarillo, enfocado en la actividad radial. Tienen una luminosidad solar, y una energia active caliente. Si se combina con blanco pierde sus character, y si se diluye con negro pierde su intensidad. Imagen 54. Verde-amarillo puede ser activo contra el naranja VIOLETA No es ni azuado ni rojiso. Si el violeta se presenta en grandes areas puede ser claramente aterrador, en particular hacia el morado. Los tonos del violeta representan el más grande los aspectos de la vida donde los tonos simbolizan la oscuridad o las fuerzas negativas. CONTRASTES DEL COLOR CONTRASTE DE MATIZ Es el más simple de todos los contrastes debido al su uso de colores puros, sin que su luminosidad esté diluida. Es causada “por la yuxtaposición de diferentes tonos. Cuanto mayor sea la distancia entre los tonos en la rueda de color, mayor es el contraste”49. 49 http://www.worqx.com/color/itten.htm Autor: Cristhian Salamanca 77 Estética para Entornos Virtuales UNAD Imagen 55. Contraste de matiz CONTRASTE FRESCO Y CÁLIDO Imagen 56. Contraste entre fresco y cálido Este contraste sugiere cercanía y distancia. Los objetos en la distancia siempre parecen más fríos, debido a la intervención de la profundidad de aire. En general, los colores amarillo, amarillo-naranja, naranja-rojo, rojo y rojo-violeta son cálidos y el violeta es frío. Esta aclaración puede ser engañosa, porque colores frescos y los colores cálidos son relativos. CONTRASTE DE LUZ Y OSCURIDAD Es el más dominante y exigente de todos los contrastes de color. El blanco y el negro representan los extremos de una infinita gama de grises en medio. En la Autor: Cristhian Salamanca 78 Estética para Entornos Virtuales UNAD siguiente imagen, se han organizado los matices del espectro de acuerdo con sus valores correspondientes en la escala de grises. Así por ejemplo, el amarillo con el índigo (azul oscuro), harían un buen contraste de luz y oscuridad. Imagen 57. Contraste de luz y oscuridad CONTRASTE COMPLEMENTARIO Se trata de colores opuestos en la rueda de color. Son los colores que se requieren mutuamente, y que tratan de sacar lo mejor de sus características cuando están contrastados. Este contraste permite que los colores luzcan avivados. Sin embargo cuando se mezclan, se autodestruyen quedando en un color negro-grisoso. Recuerden que para cada color existe un determinado color complementario Imagen 58. Contraste complementario Actividad Autor: Cristhian Salamanca 79 Estética para Entornos Virtuales UNAD Existe el fenómeno de la simultaneidad, que ocurre cuando los ojos de cualquier ser humano se fijan en una imagen por un tiempo, y luego de ese tiempo simultaneamente se mira a otra superficie, vemos que la imagen sigue en nuestros ojos, pero cambian los colores, especialmente por los complementarios que hayamos visto. Hasta ahora no existe una clara explicación científica sobre el porque el ojo crea dicha complementariedad. Imagen 59 Concéntrese en los colores de la imagen de arriba durante aproximadamente un minuto y, a continuación, buscar una superficie en blanco, allí verá los colores complementarios, es decir, amarillo, azul y rojo. El Amarillo con el Violeta es un extreme contraste de claro oscuro El Rojo-naranja con el azul-verdoso son un contraste extreme de frío y calor El rojo y el verde saturados tienen el brillo CONTRASTE DE SATURACIÓN Es el grado de pureza de un color. Es el contraste entre los colores puros e intensos y colores opacos o diluidos. El color puede ser diluido en cuatro formas diferentes Un color puro puede ser diluido con blanco Un color puro puede ser diluido con negro Un color puede ser diluido con blanco y negro como gris Un color puede ser diluido con una mezcla de su color complementario. CONTRASTE DE EXTENSIÓN Autor: Cristhian Salamanca 80 Estética para Entornos Virtuales UNAD Se trata de un contraste de proporción; de mucho y poco, de grandes y pequeños. Se trata de superficies de dos o más colores. Este contraste está formado por la asignación proporcional de tamaños de un área en relación al peso visual de un color. Dos factores que determinan la fuerza del color puro son: su intensidad y su alcance. Imagen 60. ¼ de Amarillo y ¾ de Violeta Imagen 61. 1/3 de naranja y 2/3 de azul Imagen 62. ½ de rojo y ½ de verde CONCLUSIÓN Hemos aprendido muchas cosas sobre el color y como debe ser usado. Esto nos lleva a utilizar el color apropiado para nuestros diseños. Cuando se prescriban los colores de sus creaciones usted necesita asegurarse de que sea la paleta elegida y junto con sus armonías. Es importante recordar que el color aparece diferente en diferentes materiales papel, caucho, metal en una pantalla en color etc., no sólo tiene un efecto psicológico en las personas pero la gente, para ser más efectivo se necesita que los colores se escojan en base a la de edad, el género, la geografía y la etnia. Autor: Cristhian Salamanca 81 Estética para Entornos Virtuales UNAD Ahora con el material expuesto existen argumentos para elegir la paleta de colores correcta. Por lo tanto, escoja sabiamente. CAPÍTULO 3 LOS COMPONENTES DEL DISEÑO II LECCIÓN 1: TIPOGRAFÍA I INTRODUCCIÓN Somos capaces de distinguir y reconocer un cuadrado de un círculo y un círculo de un triángulo, debido a sus diferentes formas y estructura. Lo mismo ocurre cuando se trata de reconocer y distinguir los tipos de letra. Su calidad visual puede ser definida por su unión, kerning, grosor de las lineas, calidad lineal, etc. La calidad visual y la armonía de un cuerpo textual puede lograrse mediante una combinación de tipos de letra similar o trabajando con una familia tipográfica. En esta lección sobre tipografía usted aprenderá los elementos importantes y característicos que conducen a la armonía visual con las fuentes, y sin olvidar una breve historia de cómo se originó todo. ORIGEN E HISTORIA DE LA FORMA TIPOGRÁFICA "Estamos bien acostumbrados a la palabra escrita como un método primario de comunicación en nuestra cultura. Sus principales elementos, los personajes del alfabeto moderno, una vez fueron muy símbolos literales de objetos cotidianos, que gradualmente se resumieron a las letras del alfabeto. PICTOGRAMAS, IDEOGRAMAS, Y FONOGRAMAS Si bien las pinturas rupestres, que datan ya en 20000 aC son la primera evidencia de las imágenes grabadas, la verdadera comunicación escrita se cree que se desarrolló unos 17000 años más tarde por los sumerios50, alrededor del 3500 aC Se sabe que han registrado historias, conservando registros utilizando simples dibujos de objetos cotidianos, llamados pictogramas. 50 Sumerian is a language isolate, in the absolute sense, is a neutral language with no demonstrative genealogical relationship with any other language; that is one that has not been demonstrated to descend from an ancestor common to any language. - http://en.wikipedia.org/wiki/Sumerian_language Autor: Cristhian Salamanca 82 Estética para Entornos Virtuales UNAD Imagen 63. “Montañas” pictograma sumerio Como las civilizaciones se volvieron más avanzadas, se experimentó una necesidad de comunicar conceptos más complejos. En 3100 aC, los jeroglíficos egipcios51 incorporaron símbolos para representan ideas o pensamientos, llamados ideogramas, que permitan la expresión de conceptos abstractos más que el pictograma literal. Un símbolo de un buey podía significar alimento por ejemplo, o el símbolo de un sol poniente combinado con el símbolo de un hombre podría comunicar la vejez o la muerte. Imagen 64. Ideograma egipcio para representar “lloro” Los números Romanos52 que usamos hoy en día son considerados ideogramas: I, II, III representan los dedos de la mano, V la mano abierta, y IV la mano abierta menos un dedo. Hacia el año 1600 aC, les fenicios desarrollaron símbolos para sonidos hablados, llamados fonogramas. Por ejemplo, el símbolo que ellos usaban para un buey, a lo que ellos llamaban „aleph‟, fue usado para representar el sonido fonético “A” y Beth, su símbolo para representar la casa, representaba el sonido “B”. Adicionalmente a los sonidos, los fonogramas pueden representar palabras. Hoy en día, nuestro alfabeto contiene muchos fonogramas: % para porcentaje, ¿? Para preguntar, y $ para dólares o pesos. EL ALFABETO Son los fenicios a quienes se les acredita el desarrollo del primer verdadero alfabeto – un set de símbolos que representan sonidos hablados, que podían ser combinados para representar el lenguaje hablado. Principalmente una sociedad mercante, que negoció con muchas culturas, difundió su alfabeto en todo el mundo occidental. Alrededor de 1000 aC, los griegos, que 51 52 Hieroglyphics - http://en.wikipedia.org/wiki/Egyptian_hieroglyphs The Roman Numeral - http://en.wikipedia.org/wiki/Roman_numerals#cite_note-1 Autor: Cristhian Salamanca 83 Estética para Entornos Virtuales UNAD desarrollaron el arte de la escritura a mano en varios estilos, adaptó el alfabeto fenicio. La palabra "alfabeto" viene de las dos primeras letras griegas alfa y beta. Imagen 65. primer símbolos para representar un buey Imagen 66. “Aleph” fenicio Imagen 67. letra griega “A” Imagen 68. letra romana “A” PICTOGRAMAS DESARROLLADOS EN LAS LETRAS DEL ALFABETO Cientos de años después, los romanos usaron el alfabeto griego como la base del alfabeto en mayúsculas que conocemos hoy en día. Ellos redefinieron el arte de la escritura a mano, creando diferentes estilos en las letras, las cuales usaban para diferentes propósitos. Ellos usaban una escritura rígida, formal para importantes manuscritos y documentos oficiales y una escritura más rápida, con estilo de letras más informales para documentos de rutina. En 100 dC, los romanos habían desarrollado una floreciente industria del libro y, en su escritura romana siguió evolucionando, las minúsculas y signos de puntuación se añadieron poco a poco53. El alfabeto romano fue traducido por su uso a otros lenguajes en Europa. Al mismo tiempo otras formas de letras fueron desarrolladas en otras civilizaciones. La primeras letras romanas fueron las letras 'Capitales', pero a principios del primer siglo, los griegos introdujeron variación cursiva, conocido como el “Uncial”. Diseñado para el uso cotidiano, estas letras eran más redondeadas con ascensos y descensos cortos, lo que permitió escribir más rápido. Esto dio lugar a su debido tiempo al desarrollo de distintas formas de usar las mismas letras. Los romanos establecieron estándares para la construcción de caracteres tipográficos, que todavía se usan hoy en día. Características tales como Serif o remates, con estiramiento hacia atrás y las variaciones de la letra en cuanto al peso, diseñados para que coincidan con el ángulo de la pluma y cinceles para su inscripción usados por los romanos. En la edad media se vieron las pruebas de todos los elementos de la escritura moderna. A través de la influencia de la iglesia fue un período enormemente rico en el desarrollo del Arte, que ha dejado un legado maravilloso de iluminación en las formas de las letras y scripts. Los estilos más populares en el período inicial fueron las Capitales Cuadradas Romanas, las Unciales y las Unciales medias. 53 http://graphicdesign.spokanefalls.edu/tutorials/process/type_basics/history.htm Autor: Cristhian Salamanca 84 Estética para Entornos Virtuales UNAD Imagen 69. Capitales Romanas Cuadradas Imagen 70. Tipografía Uncial En la Edad Media se produjo una evolución de la forma de las letras, que se convirtió más estrecha y angular con ascensos y descensos cortos, conocidos como Textura, pero más comúnmente conocidos hoy como gótico o inglés clásico. Aunque la forma de las letras con textura fue diseñada para tener una ventaja con respecto a la economía del espacio, su despliegue vertical y su estilo florido les hizo difícil de leer. Imagen 71. Forma de letra Gótica Los humanistas, un grupo de escolares no religiosos, hicieron un profundo estudio de las culturas romanas y griegas a través del siglo XIV y el siguiente. Incluyeron el Art Nouveau, Art Deco, Futurismo, Dadaísmo, y el movimiento Bauhaus. Los Autor: Cristhian Salamanca 85 Estética para Entornos Virtuales UNAD tipógrafos54 que sobresalieron durante este período fueron Eric Gill, Stanley Morison, y Jan Tehichold y Rudolf Koch. Luego, con las tecnologías modernas la clasificación de los tipos de letras se liberó totalmente y de modo que se convirtió en algo superfluo, pues los diseñadores empezaron a combinar las características de muchos de los estilos anteriores en la búsqueda de nuevos estilos tipográficos con un nuevo carácter. El Art Deco fue el estilo que tuvo un efecto entre las dos guerras mundiales, y su influencia se hizo sentir en todos los ámbitos de la vida en ambos lados del Atlántico - ya sea en la arquitectura, la moda, mobiliario o diseño gráfico. Art Deco fue un estilo menos fluido, con una mayor sensación de geométricos y formas angulares. Por otra parte, la dinámica, ondulado, líneas fluidas y en un ritmo sincopado se encontraron en el Art Nouveau, que se mostraron a favor hasta la llegada del siglo XX con estilos modernistas.55 Imagen 72. Art Nouveau Imagen 73. Art Deco Durante el período de las dos guerras mundiales diferentes países, hicieron contribuciones. En la Unión Soviética constructivista, la revista holandesa De Stiji, las principales revistas de América como Harper's Bazaar, Esquire, Vogue, sábado por la noche Post, Vida y Tiempo. Todos tuvieron un aporte e hicieron un impacto. La Corporación Internacional de Tipografía (ITC en inglés), diseño tres tipos de fuente de multiuso contemporáneos, que fueron la ITC Weidemann, la ITC Goudy Sans y la ITC Tiepolo. Todos ellas reflejan de diversas maneras la importancia de la tradición histórica y la forma. Kurt Weidermann, diseño una fuente tipográfica para sólo una publicación, una traducción de la Biblia para la Sociedad Biblica Alemana. ITC le pidió a sus socios permitir el cambio en el nombre de la fuente, 54 55 http://www.linotype.com/29/fontdesigners.html http://en.wikipedia.org/wiki/Art_nouveau#Origins Autor: Cristhian Salamanca 86 Estética para Entornos Virtuales UNAD que originalmente se llamaba Bíblica, para que fuera ampliamente disponible. Pasó a llamarse Weidermann. Weidermann siguió el antiguo estilo en las características de su diseño. Él razonó que los corchetes con remates (serif) ayudaban a conservar la definición de la base de referencia, dándole trazos más definidos a la forma, y podía manejar un color más uniforme en papeles claros. También calculó que los viejos tipos de letra eran más distintivos, permitiendo la distinción de las formas de las letras individuales para que fueran más notorias. La fuente es, sin duda, distinta y aunque al mismo tiempo viene en gran parte de la tradición, es un tipo de letra de actual. Imagen 74. Weidermann En completo contraste la fuente ITC Goudy Sans han influenciado muchos otros estilos. A diferencia de casi cualquier otra fuente sin remates (sans serif), ofrece un muy fuerte estilo de letra cursiva, al contrario de la oblicua estilo romano que normalmente se encuentran en fuentes sans serif. Esta sensación de curva es aún más pronunciada en su forma cursiva especialmente en los caracteres capitales G, Q y X. Imagen 75. Goudy Sans El equipo de diseño Alpha Omega Typograhy Inc., responsable por la creación de la fuente ITC Tiepolo, describe la fuente como una Sans Serifs con Serifs. Pero se le puede considerar como un diseño caligráfico, por ejemplo mirando a los caracteres C, G, y O. Los caracteres redondos como la a, b, y c han sido dibujados con lados planos para añadir distinción y proveer una gran cantidad de espacio entre los caracteres. Autor: Cristhian Salamanca 87 Estética para Entornos Virtuales UNAD Imagen 76. ITC Tiepolo Lo que parece ser más bien actitudes despreocupadas con respecto a los diferentes trazos que constituyen el carácter, no es el hecho en este caso, pues han sido cuidadosamente desarrollados, dentro de un marco modular. Contrariamente a lo que podría parecer, Tiepolo se diseñó con cuidado y proporción. No es algo que pasó de un momento a otro. Las formas de las letras se basan en las proporciones clásicas romanas. Las partes de la fuente están llenas, y los ascensos y descensos se han mantenido sensibles a las dimensiones. Para mantener el color tonal en el texto las letras capitales se han dibujado poco más cortas que los ascensos. El futuro de todos estos diseños es muy versátil. Todas ellas contienen variaciones familiares – algo así como ocho fuentes de Weidermann y Goudy, seis de Tiepolo, las cuales trabajan muy bien en una variedad de configuraciones, pantallas, subtítulos y texto. De hecho, las tres pueden ser utilizadas con éxito en todos los tipos de letra. El punto principal con todas estas fuentes es que, mientras los diseños son contemporáneos, pagan su respeto a la importancia de la tradición histórica y la forma. LAS BASES Imagen 77. Ascensos (la parte de las letras en minúscula que se levanta por encima de la altura „x‟ como en b, d, f, h, l); descensos (la parte de las letras en minúscula que se extiende por debajo de la Autor: Cristhian Salamanca 88 Estética para Entornos Virtuales UNAD línea base como en g, j, p, q, y, y a veces en f y J mayúscula); la altura del cuerpo de las minúsculas se le llama altura „x‟; la altura de las mayúsculas-capítales es la Altura Cap. “EL TAMAÑO DE UNA FUENTE se refiere a la profundidad de la fuente y se mide desde la parte superior del carácter más grande a la parte inferior del carácter más bajo: no debe ser confundida con la altura 'x' o la altura capital, pues se mide en puntos, una medición tipográfica. Es importante señalar que el ascenso de algunas letras está por encima de la línea de la parte superior de la altura capital. Para ser más exactos el tamaño de una fuente es ligeramente más grande que la profundidad. También hay otro método de medición de tipo. A menudo se especifica como "tamaño clave" es el tipo calculado por la altura de las letras mayúsculas en vez del método tradicional de la cantidad total de profundidad. Es el sistema ideal para mezclar diferentes fuentes en la misma línea, para garantizar la coherencia de la Altura Capital56. Imagen 78. Tamaño de Fuente ROMANAS. Son las letras, rectas y derechas. Es la forma más común de las letras en los tiempos modernos. Se utiliza en mayúsculas y minúsculas para la impresión de libros y periódicos. Al cambiar mayúsculas y minúsculas puede indicar énfasis textual, subtítulos, epígrafes y así sucesivamente. Ser capaz de pasar de mayúsculas y minúsculas es una de las competencias clave requeridas de un tipógrafo. LETRAS CAPÍTALES PEQUEÑAS. Son una variación adicional a la de mayúsculas y minúsculas. Esta variación es rara y no se utiliza con demasiada frecuencia. Estas son mayúsculas en su forma, pero sólo en minúsculas "x" de altura. 56 Terry Veavons & Michael Beaumount - Introduction to Typography Autor: Cristhian Salamanca 89 Estética para Entornos Virtuales UNAD Imagen 79. Letra romana en mayúscula, minúscula y pequeña capital LAS ITALICAS. Son las principales alternativas a la forma romana. Se recuestan sobre la derecha y son ligeramente comprimidas en su ancho. En el Renacimiento italiano los escribas desarrollaron esta alternativa, para acelerar la escritura. Las minúsculas tienen más gracia y se ven a menudo en decoraciones. Las itálicas mayúsculas están relacionadas más estrechamente con la forma romana, aunque también son inclinadas y por lo general comprimidas. Imagen 80. Itálicas Las itálicas se utilizan actualmente para llamar la atención en trozos de texto, con el fin de que nos permita distinguir las piezas de texto. Por ejemplo, para la lengua extranjera, o para distinguir el título de libros, obras de teatro, y así sucesivamente. Colocar texto continuo en itálica no es recomendable ya que es menos legible que la romana. La elección de una fuente adecuada para un diseñador sin experiencia puede ser temeraria y a la vez una tarea difícil. Con una amplia gama para elegir, y, a veces, con diferencias menores – si es difícil para los diseñadores experimentados saber las diferencias a primera vista, puede causar un gran problema para un diseñador que apenas está comenzando. Por lo general, los diseñadores eligen una biblioteca de ocho a diez tipos de letra, pero por lo general terminan utilizando no más de dos o tres. Sin embargo, elegir las bibliotecas puede ser muy difícil si no se está familiarizado con sus diversas familias. SERIF y SANS SERIF (con o sin remate). Son dos tipos básicos de Fuentes, en la cual muchas fuentes han sido categorizadas. La fuente Serif (con remate) es reconocida por el pequeño trazo, remate o gracia en los extremos de la fuente. Las fuentes sin el trazo son conocidas como Sans Serif (sin remate) del francés „sans‟ queriendo decir „sin‟. Cuando se trabaja con tipografía debemos construir Autor: Cristhian Salamanca 90 Estética para Entornos Virtuales UNAD librerías de fuentes con variaciones y contrastes. La forma más sencilla es estudiando las diferentes fuentes disponibles. SERIFA DE ESTILO ANTIGUO. Contienen características fuertes sobre todo en el ancho del trazo. Estas Serifas se unen a la raíz con una curva y las letras son de relativa proporción abierta. Caslon, Garamond y Plantin son Serif de Estilo Antiguo. Imagen 81. Serif de Estilo Antiguo SERIFA CUADRADA. La principal característica es el fuerte y pesado diseño de la serifa con poco contraste entre los trazos verticales y horizontales. Las serifas se unen al tallo principal en un ángulo agudo o con un pequeño radio. Lubalin Graph es una fuente de Serifa cuadrada. Imagen 82. Serifas cuadradas SERIFA MODERNA. Es una fuente que muestra un contraste entre los trazos gruesos y trazos finos. El peso de la fuente está sistemáticamente distribuido. Bodoni, Fenice, Modern No. 20 son modernas Serifas modernas. Imagen 83. Serifas Modernas Autor: Cristhian Salamanca 91 Estética para Entornos Virtuales UNAD TRANSICIONAL. Reduce las diferencias entre el estilo antiguo y moderno de las serifas. A diferencia del viejo estilo de serifas, existe una mayor variación entre los trazos verticales y horizontales de las letras y la reducción de las curvas con respecto a las serifas. Las fuentes llamadas Baskerville, Bell, Perpetua se conocen como fuentes de Transición. Imagen 84. Transicional SANS SERIF. „Sans‟ significa sin. Las primeras fuentes Sans aparecieron en el siglo XIX, en fuentes como Standard y Franklin Gothic. Los trazos tienden a ser visualmente iguales en peso. Existen varias familias y tres subgrupos: Grotesco, Neo-grotesco y Geométrico. Algunas fuentes Sans Serif son Gills Sans, Helvetica y Futura. Imagen 85. Sans Serif CURSIVAS. Las Fuentes cursivas pueden subdividirse en Cursivas Conectivas y No-conectivas. CURSIVAS CONECTIVAS: estas emulan la escritura manual. Aunque tienen consistencia y diseño, no son del todo usables para textos prolongados. Brush Script, Commercial Script y English Script son algunas de las fuentes. Autor: Cristhian Salamanca 92 Estética para Entornos Virtuales UNAD Imagen 86. Cursivas Conectivas CURSIVAS NO-CONECTIVAS: Este grupo contiene las fuentes hechas a mano que no se conectan y las fuentes ornamentales, o fuentes formales. La fuente de la letra puede ser una pluma, una brocha, una textura, y la escritura formal. La legibilidad puede ser difícil, y estas fuentes debes usarse con cuidado. Las fuentes como Phyllis, Zapf Chancery o Van Dijk son parte de este grupo. Imagen 87. Cursivas no conectivas ESTILIZADAS Y NOVEDOSAS. Este grupo de fuentes son las que uno no usaría más de una vez. No porque no tengan un concepto de diseño, sino porque por su singularidad causan impacto. Estas fuentes no son para textos bajo ninguna circunstancia. Se usan para publicidad, títulos o diseños corporativos. Imagen 88. Fuente estilizada y novedosa TIPO DE FAMILIAS. Son los grupos de familias de una misma fuente. Dan la posibilidad de variar la fuente, y brindan flexibilidad. Los tipos de familia son desarrollados por la creación de un amplio rango de variación de la fuente, pero manteniendo su diseño básico. A continuación un ejemplo: Autor: Cristhian Salamanca 93 Estética para Entornos Virtuales UNAD Imagen 89. Tipo de Familia LECCIÓN 2: TIPOGRAFÍA II MEDICIÓN DE FUENTES El "punto" la unidad más pequeña utilizada para medir una fuente, hasta el siglo XIX varió de usuario a usuario. Aunque es una unidad que no es del todo exacta, aproximadamente 72 puntos medidos hacen una pulgada. Esta unidad de medida es útil para la mayoría de los cálculos. El sistema „Didot‟, otra unidad de medida para la fuentes tipográficas, creado por François-Ambroise Didot, mucho antes del sistema americano de puntos, mide 0.3758mm. Esto hace que el Didot sea 1,2% más grande que el punto. Como estas unidades son demasiado pequeñas para medir, carecen de precisión, por lo que sólo debe utilizarse para especificar el tamaño de una fuente a manera de referencia. Incluso hoy en día los tamaños de las fuentes se especifican en puntos. El texto que se lee en este curso tiene un tamaño de 12 puntos. Pero sigue siendo un hecho que no existe una forma precisa de medir y confirmar que este texto tenga este tipo de tamaño de 12 puntos. La idea es tener una referencia concreta del tamaño de la fuente. Imagen 90. El „tamaño aparente‟ de esta fuente es de 93 puntos, pero uno no puede medir el tamaño de la fuente por su El „tamaño aparente‟. El tamaño real de la fuente es 100 puntos. Pues el tamaño del cuerpo se mide entre dos líneas invisibles que se relacionan con el espacio del interlineado. El ejemplo anterior nos muestra que el sistema de puntos no es muy preciso. Autor: Cristhian Salamanca 94 Estética para Entornos Virtuales UNAD „Ems‟ y „Ens‟ son otro sistema para medir el tamaño de una fuente. El „Em‟ es una unidad variable y un „En‟ es la mitad de un „Em‟. Un „Em‟ es igual al tamaño del cuerpo de una fuente que esté en uso, así que si su tamaño es de 12 puntos, luego un „Em‟ es 12 puntos. De igual forma si la fuente es de 12 puntos con 2 puntos de espacio entre dos líneas de texto (12/14 puntos), un „Em‟ seguirá siendo de 12 puntos. Hasta ahora hemos visto el sistema de puntos americano y el didot, los cuales no son muy precisos. Luego tenemos los „Em‟ y „En‟, que son unidades variables, y cuyos valores no pueden ser determinados a menos que el tamaño del cuerpo sea conocido. Aún así existe otra forma de medir las fuentes, forma conocida como „Pica‟. La Pica es la unidad más conveniente para medir una fuente. Fue usada por los impresores en cuartos de impresión dónde las fuentes talladas en metal se arreglaban para la impresión. A diferencia de las otras unidades de medida la pica es una medida exacta. 1 pica = 12 puntos o 1 pulgada = 6 picas. Aunque la pica es exacta y conveniente, los milímetros y las pulgadas también se usan para medir las fuentes. Todo depende con que unidad se sienta más cómodo el diseñador. RECUERDE 1 punto = 0.3715mm 1 punto didot = 0.3759mm Ciceco = 12 puntos didot 1 Pica = 12 ems 1 pica = 12 puntos 1 pulgada = 6 picas 1 pulgada = 72 puntos = 6 picas (1 pica = 12 puntos) USO Y FUNCIÓN DE LAS FUENTES TIPOGRÁFICAS Las funciones principales de las fuentes tipográficas son la legibilidad e inteligibilidad. Muchas veces se tienden a confundir ambos términos sobre todo por su rol en la tipografía. Una depende de la otra. Autor: Cristhian Salamanca 95 Estética para Entornos Virtuales UNAD La legibilidad se refiere a una página o diseño hecha para ser fácil de leer. La inteligibilidad se refiere a la habilidad de distinguir una letra de otra, de una fuente en particular en el diseño de la página. La inteligibilidad de una fuente depende de la fuente escogida – su altura „x‟, forma, carácter, etc. En el sentido literal la inteligibilidad significa „la habilidad de leer‟, que envuelve a la visibilidad (capacidad de ver) junto con la comprensión (entendimiento). Es importante señalar que el texto que sea inteligible no tiene necesariamente que ser legible. Pero si el texto se puede leer fácilmente y sin problemas, sin que el lector esté cansado y se aburra rápidamente, podemos decir que, ese texto es legible. La legibilidad es lo que hace que una lectura de un diseño sea de calidad, invitando a ser leído, de fácil lectura y agradable a la vista. Hay algunas cosas que un diseñador debe tener en cuenta, mientras se diseña una página. Por ejemplo, el diseño de cada una de las fuentes, espaciado entre caracteres, la naturaleza del material sobre la cual el texto será colocado y la condiciones subjetivas de la lectura. La legibilidad se puede alcanzar teniendo en cuenta que: El tamaño del texto debe estar entre 10 a 12 puntos La altura „x‟ debe ser proporcional con los ascensos y los descensos en la fuente. Las fuentes Serifas con peso y estilo normal son más fáciles de leer que las Sans Serif (Sin serifas) en versiones condensadas, en negrita o itálica. Si el trabajo es para papel, el papel debe ser suave y preferiblemente blanco. El color que se use para la fuente debe ser de alto contraste a comparación del fondo. Ejemplo: fuente color negro, fondo blanco. La inteligibilidad se puede alcanzar teniendo en cuenta que: Todas las letras deben ser claras y fáciles de reconocer, con la habilidad de interpretar cada carácter. Las letras deben usarse como unidades por separado La fuente tipográfica debe tener un buen diseño. Autor: Cristhian Salamanca 96 Estética para Entornos Virtuales UNAD Las fuentes deben poseer cualidades visuales. Debe haber un contraste moderado en el espesor del trazo y un sutil cambio en el peso de cada letra. Las fuentes con serifas no deben ser exageradas – alargadas, o muy gruesas o muy delgadas. Es importante recordar que un tipo de letra no debe ser simplemente reducido o ampliado, porque poseen características, que mejoran la legibilidad de la tipografía de acuerdo a su tamaño. Reducir el tamaño de un tipo de letra o el uso de una fuente muy pequeña en tamaño afecta la legibilidad y la inteligibilidad. El 50% de los detalles de las fuentes se pierden en el proceso de la reducción del tamaño. En esto los signos de puntuación como el punto y la coma se pierden por completo, algo que podría cambiar el sentido del texto. Esto generalmente ocurre en el caso de las etiquetas de productos farmacéuticos. Imagen 91. Texto en sobres de medicamentos son difíciles de leer El texto de menor tamaño debe tener espacios más abiertos y remates más gruesos, mientras que el texto de mayor tamaño necesita una atención especial, o podría parecer que se vean poco llamativas, esto se logra con remates más finos y con líneas más gruesas. El ojo humano percibe las formas de manera diferente de acuerdo al tamaño, por lo tanto, teniendo en cuenta estos pequeños detalles ayuda mucho a la legibilidad del texto. Autor: Cristhian Salamanca 97 Estética para Entornos Virtuales UNAD Al igual que un objeto del mismo tamaño parece menor en un fondo negro y más grande sobre un fondo blanco, el mismo ocurre en el caso de la masa textual. En el caso del texto, los caracteres que son más pequeños en tamaño serían difíciles de leer o, en algunos casos, estarían totalmente perdidos. Imagen 92. Texto sobre fondos blanco y negro TRABAJANDO CON EL ESPACIO KERNING es “el proceso del ajuste del espacio entre las letras en una fuente proporcional”57. Ciertas combinaciones de caracteres siempre han causado problemas ópticos. De estas las más obvias son, combinaciones como las letras TA, To, VA, y LT. Pero hoy en día con la tecnología moderna y con el adelanto de los computadores, es fácil de controlar el espacio individual entre caracteres. El Kerning puede hacer que un título sea legible o no, haciéndolo tan extraño que haría que el lector esté desenfocado. Imagen 93. Sup. Caracteres sin Kerning. Inf. Caracteres con kerning 57 http://en.wikipedia.org/wiki/Kerning Autor: Cristhian Salamanca 98 Estética para Entornos Virtuales UNAD “TRACKING se refiere a la cantidad de espacio entre un grupo de letras afectando la densidad en una línea o un bloque de texto. Desde el advenimiento de las computadoras personales la expresión tracking se utiliza con frecuencia. En tipografía profesional y diseño gráfico el término más usado es el espacio entre letras. El espacio entre letras/tracking puede confundirse con kerning. El espacio entre letras se refiere al espacio de una palabra o bloque de texto afectando la densidad y textura. Kerning es un término aplicado específicamente a la adaptación de espaciamiento de dos caracteres para corregir visualmente un espaciamiento desigual”58. El Kerning y el Tracking son importantes para mantener una buena relación visual entre los caracteres, con sus espacios negativos y positivos. Si son demasiado comprimidos o demasiado flojos la legibilidad podría verse obstaculizada. Imagen 94. Tracking y Kerning INTERLINEADO (LEADING) también conocido como el espacio entre lineas, se refiere al espacio vertical entre lineas de texto. El interlineado puede afectar la masa del texto en general. 58 http://en.wikipedia.org/wiki/Tracking_(typography) Autor: Cristhian Salamanca 99 Estética para Entornos Virtuales UNAD Imagen 95. Leading Los párrafos contienen líneas horizontales de texto que corren en paralelo. Estos paralelos, por lo general líneas de texto negras, en caso de reducir el espacio entre líneas puede resultar en una variación de masa visual más oscura. Del mismo modo, si se separan dichas líneas alejando unos de otros aumentando el espacio podría provocar variaciones de la masa visual haciéndola más ligera. Por lo tanto, el espacio entre líneas de las composiciones de texto debe fijarse de acuerdo a las necesidades. El mismo ha sido ilustrado en el siguiente ejemplo. Imagen 96. Masa de texto Autor: Cristhian Salamanca 100 Estética para Entornos Virtuales UNAD Un uso inapropiado del „leading‟ puede causar problema de legibilidad. Si las líneas están muy cerca, hace que los ascensos y descensos de las letras se sobrepongan unas con otras dando como resultado poca legibilidad. Imagen 97. Superposición de líneas ERRORES A EVITAR Hay algunos errores que un buen tipógrafo quisiera evitar cuando trabaja. Si estos fallos se producen en el diseño, debe tratar de corregirlos estos antes de que su trabajo se haya completado. Estos errores se mencionan a continuación. PALABRAS VIUDAS Y HUERFANAS – estos son defectos comunes en el establecimiento del texto. Las palabras viudas son las últimas palabras de un párrafo, teniendo el resto de la línea para ellas solas. Si la última palabra es lo suficientemente larga y está colocada en un párrafo que no es muy ancho, no es mucho el problema. Pero si es una palabra pequeña colocada en una párrafo amplio, tendría que ser modificado el párrafo o de otra manera todo el diseño se vería desequilibrado. Por otro lado una palabra huérfana es la última palabra o a veces algunas veces la última línea del párrafo en una columna que es llevada a la siguiente columna. Autor: Cristhian Salamanca 101 Estética para Entornos Virtuales UNAD Imagen 98. Palabras viudas y huerfanas LOS RÍOS, no son otra cosa sino espacios repetidos, los cuales se ven en un parrafo causando la aparición de áreas verticales con espacio negativo. Esto sucede generalmente en pequeño párrafos o texto justificado. Esto algunas veces puede ser difícil de corregir, y es por esta razón que en estos casos se necesita manipular el espacio entre caracteres de ciertas palabras en el párrafo, aumentándolo o disminuyéndolo, reduciendo el espacio negativo entre las palabras. Algo mucho mejor y más práctico de hacer es cambiar la alineación del texto. Imagen 99. Ríos Autor: Cristhian Salamanca 102 Estética para Entornos Virtuales UNAD MEDIDA DE UN PARRAFO – Un párrafo muy amplio podría obstaculizar la legibilidad y la comprensión del texto. De 36 a 50 caracteres de texto es el ancho ideal para el cuerpo del texto. Por lo tanto, si el ancho de la medida excede el ancho ideal la legibilidad sufre. Imagen 100. El ancho en el primer parrafo es menor que la del segundo. Esto hace que el primer párrafo sea más fácil de leer que el segundo. SELECCIONANDO LA FUENTE CORRECTA Ahora que estamos más acostumbrados a las características de una fuente, y somos capaces de distinguir una fuente de otra, incluyendo el cuidado de la legibilidad y la inteligibilidad, no debe ser tan difícil escoger la fuente correcta para el trabajo correcto. Por ejemplo la Biblia es un libro que se ha hecho con diversas fuentes y tamaños de puntos, desde libros de bolsillo hasta de gran tamaño, el menor tamaño de punto usado ha sido entre 7 u 8 puntos. Sería un buen ejercicio entrar en una librería y comparar la legibilidad en diferentes Biblias de diferentes tamaños, o por qué no, en diferentes libros. Lo único que usted notará es que el tipo de letra con una gran altura „x‟ será más legible, incluso si la fuente se encuentra en un tamaño muy pequeño y tendrá un espacio mayor entre líneas que aquellos textos que usan una fuente más grande. Es imposible elegir un tipo de letra y su tamaño independientemente. Ambas cosas trabajan juntas y son dependientes el uno del otro y por ningún motivo se puede pensar en trabajarlas por aparte. No importa cuál sea el motivo de selección de la tipografía - ya sea sólo por gusto personal, cultural, por falta de tiempo, o cualquier otra excusa, hay una cosa que usted debe garantizar: la legibilidad. Si no es así, es aconsejable empezar de nuevo y elija otro tipo de letra. Autor: Cristhian Salamanca 103 Estética para Entornos Virtuales UNAD LECCIÓN 3: GRÁFICAS WEB Entender la importancia de los gráficos Web es clave, de modo que su proyecto tenga vida y no caer en la monotonía del texto. Los parámetros que influyen en la visualización de gráficos Web son la pantalla del usuario y la capacidad de ancho de banda. Un buen segmento de la audiencia Web accede a Internet a través de módem, y muchas páginas web vistas en las pantallas muestran sólo 256 colores. Esta realidad impone límites sobre el tamaño de los archivos. Hoy en día con mejores resoluciones de pantalla el número de colores que se pueden incluir en gráficos para la web son más flexibles, dando la opción de usar casi cualquier color. LA GRÁFICAS Y EL ANCHO DE BANDA Muchos usuarios de la Web, a excepción de los casos en que el ancho de banda es mayor, acceden a Internet a través de módems de 56 kilobits por segundo en sus hogares, oficinas, o lugares de trabajo y también las zonas rurales. A la velocidad de 56 Kbps, la descarga real es de sólo alrededor de 7 kilobytes (KB) por segundo (8 bits hacen un byte). Esto significa que un modesto gráfico de 36 KB en su página Web podría demorarse cinco segundos o más para cargar en el navegador Web. Los datos reales de transmisión varían en función del módem del usuario, la velocidad del servidor Web, la conexión a Internet, y otros factores, pero el punto es claro: entra más gráficos se incluyan, el lector tendrá que esperar más tiempo para ver su página. Usar gráficas en un menú más imágenes de fondo, podrían dejar a sus usuarios con una conexión de módem esperando por más de 1 minuto, incluso si tienen una conexión muy buena a Internet. Mire su reloj (mejor aún, mantenga la respiración), por un minuto completo y, a continuación, decida si está dispuesto a pedir a sus usuarios a esperar este tiempo cuando visitan su sitio Web. Una mejor estrategia es aumentar la carga gráfica de sus páginas poco a poco, atrayendo a los usuarios de su sitio con un grado razonable de los tiempos de descarga. Cuando los lectores se vean más comprometidos con su contenido, estarán más dispuestos a soportar más retrasos, especialmente si se les avisa sobre el tamaño de los gráficos o se les advierte que hay páginas particulares que están llenas de gráficos y tendrán más tiempo para descargar. En la actualidad la media de las velocidades de módem muchas de las páginas diseñadas para los usuarios que se conectan desde la casa no debe contener más de 50 a 75 kilobytes de gráficos. Todo depende de cuál es el público objetivo de su proyecto. Pueden ser personas que tienen un mejor acceso a la Internet, o personas que no lo tienen. Sin embargo, trate de optimizar sus imágenes lo mejor que se pueda. Autor: Cristhian Salamanca 104 Estética para Entornos Virtuales UNAD GRÁFICAS E INTRANETS Afortunadamente para los diseñares gráficos, muchos sitios web son creados con objetivos educacionales, organizacionales, y comerciales que acceden su redes internas o Intranets obteniendo mejores velocidades de conexión. También, se ha aumentado el número de usuarios caseros que tienen mejores conexiones a internet como ADSL y módems de cable. Las gráficas y el rendimiento de una página también son importantes para estos usuarios, pero de alguna manera no tiene sentido hablar de “ahorrar ancho de banda”. Quienes establecen los anchos de banda olvidan algo: son las gráficas las que atraen la atención de la gente en primer lugar. Si usted puede usar el ancho de banda al máximo ¡aprovéchelo! FORMATOS DE ARCHIVOS GRÁFICOS Los gráficos Web son por necesidad comprimidos. Diferentes formatos de archivos gráficos emplean diversos sistemas de compresión, y algunos están diseñados para trabajar mejor que otros para determinados tipos de gráficos. Los dos principales formatos de archivo de la web son GIF y JPEG. Un tercer formato, PNG, ha estado disponible desde 1995. GIF El CompuServe Information Service popularizó el Formato de Intercambio Gráfico (GIF) en el decenio de 1980 como un medio eficaz para transmitir las imágenes a través de redes de datos. A principios del decenio de 1990 los diseñadores originales de la World Wide Web adoptaron el GIF por su eficacia y amplio difusión. La inmensa mayoría de las imágenes en la Web se encuentran ahora en formato GIF, y prácticamente todos los navegadores Web que soportan gráficos puede mostrar archivos GIF. Los archivos GIF incorporar un sistema de compresión para mantener el tamaño de un archivo como mínimo, y están limitados a 8 bits (256 colores o menos) paletas de colores. Algunas variaciones de la base del formato GIF lograron añadir soporte para las transparencias y para los GIF entrelazados, popularizados por Netscape Navigator. Compresión del archivo GIF El archivo GIF usa una forma básica de compresión (Lempel Zev Welch, o LWZ) que comprime y saca las ineficiencias en el almacenamiento de datos sin perder información o sin distorsionar la imagen. La compresión LZW es la mejor compresión de imágenes con campos de imágenes homogéneas. Es muy ineficiente en la compresión de imágenes de muchos colores y complicadas texturas: Autor: Cristhian Salamanca 105 Estética para Entornos Virtuales UNAD Image 1. Compresión LZW GIF es: Formato de Intercambio Gráfico desarrollado por by CompuServe. El primer formato usado para mostrar y transferir imágenes en línea. Los GIF solo puede tener 256 colores o menos. (reducir una imagen a GIF se le llamada indexación) La pérdida de compresión es inferior, lo que significa que la calidad de la imagen no se ve comprometida por compresión y por lo tanto, las imágenes son más previsibles sin importar el navegador o plataforma operativa GIFs soportan transparencia. Es el mejor formato para colores planos, pequeñas gráficas e imágenes no fotográficas. JPEG El otro formato de archivo gráfico utilizado en la Web para reducir al mínimo el tamaño de los archivos gráficos es el Joint Photographic Experts Group (JPEG) sistema de compresión. A diferencia de los gráficos GIF, las imágenes JPEG son a todo color (24 bit, o "color verdadero"). Las imágenes JPEG han generado un enorme interés entre los fotógrafos, artistas, diseñadores gráficos, especialistas en imágenes médicas, los historiadores del arte, y otros grupos para los cuales la calidad de la imagen es primordial y la fidelidad del color no puede ser comprometida por un tramado gráfico de 8-bit. Una nueva forma de archivo JPEG llamado "JPEG progresivo" de gráficos JPEG da la misma característica de ser mostrada gradualmente al igual que lo visto en los GIFs entrelazados. Al igual que el GIF entrelazado las imágenes JPEG progresivas a menudo tardan más en cargarse en la página que un JPEG estándar, pero ofrece al lector una vista previa. Autor: Cristhian Salamanca 106 Estética para Entornos Virtuales UNAD La compresión JPEG utiliza una sofisticada técnica llamada matemática discreta transformación del coseno para producir una escala de compresión de gráficos. Usted puede elegir el grado de compresión que desea aplicar a una imagen en formato JPEG, pero al hacerlo, usted también determinar la calidad de la imagen. Cuanto más se reduzca una imagen con la compresión JPEG, más se degrada su calidad. JPEG puede alcanzar ratios de compresión increíble, comprimiendo los gráficos cien veces más pequeños que los archivos originales. Esto es posible porque el algoritmo JPEG descarta datos "innecesarios", ya que comprime la imagen, por eso se llama una "pérdida" de compresión técnica. Imagen 101. GIF y JPG GIF Nombre de las siglas de Joint Photographic Experts Group. Originalmente desarrollado para la transmisión de fotografías de alta calidad por vía electrónica. Soporta 24 bits (millones de colores) archivos RGB La compresión genera perdida de información. Elimina la información (complejidad) de la imagen = calidad. Autor: Cristhian Salamanca 107 Estética para Entornos Virtuales UNAD No hay transparencia en JPEG (difícil de crear 'flotantes' JPEG), cambio de colores. Mejor formato para fotografías Siempre mantenga la imagen original sin comprimirla. Una vez que una imagen se comprime utilizando la compresión JPEG, los datos se perdieron y ya no se puede recuperar ese archivo de imagen. Siempre guardar un archivo original sin comprimir de sus gráficos o fotografías como copia de seguridad. Gráficos PNG Gráfico Portable de Red (PNG) es un formato de imagen desarrollado por el consorcio de software gráfico como una alternativa libre al formato GIF. Como se mencionó antes, CompuServe desarrolló el formato GIF, y GIF usa la compresión LZW adquirida por Unisys Corporation. Cualquier desarrollador de software gráfico que incluya GIF debe pagar derechos de autor a Unisys y CompuServe. Los gráficos PNG fueron diseñados específicamente para su uso en páginas Web, y ofrecen una gama de atractivas características harán que el png sea el formato gráfico más común. Estas características incluyen una amplia gama de profundidades de color, el apoyo a la sofisticada imagen de la transparencia, un mejor entrelazado, y correcciones automáticas para monitor de rayos gamma. Las imágenes PNG también puede sostener un texto breve de descripción de la imagen y contenido, que permite que los motores de búsqueda de Internet buscar imágenes sobre la base de esas descripciones de texto incrustado. Lamentablemente, el formato gráfico PNG aún no es ampliamente apoyado, y la actual aplicación de gráficos PNG en los principales navegadores Web no es totalmente compatible con todas las funciones del PNG. Esto debería cambiar en los próximos años, pero no hacen un compromiso con gráficos PNG hasta que esté seguro de que la mayoría de su audiencia está utilizando navegadores que soportan PNG. Desarrollado por la W3C para resolver inconvenientes de GIF y JPEG. Permite cualquier número de bits por píxel ser asignados a los colores de un gráfico incluyendo información adicional para canales alfa. PNG se está convirtiendo cada vez más popular, con el apoyo sólo con un plug-ins que se puede descargar en línea Autor: Cristhian Salamanca 108 Estética para Entornos Virtuales UNAD ESTRATEGIAS DE IMAGEN Elementos de la Interfaz Pequeños gráficos de la página de navegación, botones, gráficos y elementos de diseño debe ser manejado como gráficos GIF no-entrelazado. El enfoque más conservador sería utilizar los colores del navegador 216-color ( "Web seguro"). O, si usted elige utilizar un esquema de colores para la interfaz que no se limita a la paleta Web, verifique que los colores que usted elija de forma predeterminada a alternativas aceptables en 8-bits se muestra. Fotografías como GIF Al convertir una imagen en un archivo GIF de 8 bits (256 colores), usted podría permitirle a Photoshop elegir los 256 colores que mejor se adapten a esa imagen en concreto. Esto se traduce en la óptima calidad de imagen GIF - a menudo cuando se miran estas imágenes son casi tan buenas como sus originales -, pero la creación de una paleta de colores tiene inconvenientes. Si el lector de su página tiene su monitor configurado para mostrar sólo 256 colores los colores de sus imágenes GIF aparecerán distorsionados. Obligar a un GIF hecho a partir de una paleta de colores personalizados para mostrarse dentro de la limitada paleta de colores del sistema puede dar lugar a distorsiones y tener una fea imagen. Un explorador Web se ejecuta en una de pantalla 8 bits no tiene manera de optimizar sus GIF personalizados. Fotografías como JPEG Los archivos JPEG son intrínsecamente imágenes a todo color (24 bits) así que preservar los colores correctos en los archivos no es un problema. Sin embargo, no hay manera de evitar que las imágenes JPEG se vean difuminadas cuando se muestran pantallas de 8-bits - cualquier imagen fotográfica mostrada en una pantalla de 256 colores tiembla. El tramado visto en las imágenes JPEG no compromete la calidad de la imagen. Estandarizar el formato JPEG para fotografías a todo color, o en escala de grises sirven para usar la compresión JPEG. GIF Entrelazados y JPEGS progresivos. Estas opciones le dan al usuario la sensación de que la página se está cargando rápidamente cargando muchas imágenes. Alistando las gráficas para la Web. Dado que la mayoría de los usuarios tienen pantallas de colores de 16-bit o 24-bits de, se pueden ver los colores “no-seguros-web”. Por lo tanto, a la hora de preparar Autor: Cristhian Salamanca 109 Estética para Entornos Virtuales UNAD una gráfica en línea, es necesario "indexar" la imagen, lo que significa convertirla en un formato de archivo para el navegador. En un programa de gráficos como Photoshop, indexe la gráfica a una paleta de colores adaptativa, también llamada selectiva o paleta perceptual (sólo con algoritmos un poco diferentes), en función de la solicitud. Bits de profundidad. Los bits son porciones de información representada en cada pixel. 1 bit = 2 colores 2 bit = 4 colores 3 bit = 8 colores 4 bit = 16 colores 5 bit = 32 colores 6 bit = 64 colores 7 bit = 128 colores 8 bit = 256 colores Al especificar la profundidad de bit, da a su gráfica los colores que necesita para conservar la integridad visual. Por ejemplo, una fuente tipográfica gris sobre un fondo blanco necesita alrededor de 32 colores (5 bits) para mostrar suavidad. LECCIÓN 4: COLORES WEB El color es importante en el arte visual. Los monitores a color para computadoras de escritorio se basan en los tubos de rayos catódicos (CRT) o tecnologías de pantalla plana. Dado que los monitores transmiten la luz, las pantallas usan rojo, verde y azul (RGB) un modelo de color aditivo. El modelo RGB se denomina "aditivo", ya que una combinación de los tres colores puros rojo, verde y azul "suma" la luz blanca59: 59 In: http://webstyleguide.com/graphics/index.html Autor: Cristhian Salamanca 110 Estética para Entornos Virtuales UNAD Imagen 102. Modelo RGB El sistema operativo organiza la pantalla en una cuadrícula de coordenadas „x‟ y „y‟, como un tablero de ajedrez. Cada pequeña caja en la pantalla es llamada pixel. Los monitores de sistemas Macintosh y Windows están compuestos por estas cuadrículas de pixeles. Resolución del Monitor: 256 colores vs. Millones. La resolución es el número de pixeles que llenan la pantalla. Está basado en una cuadrícula que despliega pixeles cuadrados. Una baja resolución es 800 x 600 (o 640 x 480 si usted está en una máquina vieja), y una alta resolución es 1024 x 768 o más, como en los Mac. En baja resolución todo se ve borroso, sin brillo y grande, una resolución alta es nítida y pequeño. Si usted desea diseñar para una pantalla de 800 x 600, debe diseñar con la base de 760 x 420 pixeles. Píxeles y profundidad de color Para controlar el color de cada píxel en la pantalla, el sistema operativo debe dedicar una pequeña cantidad de memoria a cada pixel. En total está memoria dedicada a la pantalla se denomina a menudo "RAM de vídeo" o "VRAM" (Video Random Access Memory). En la forma más sencilla de blanco y negro muestra ordenador, un único bit de memoria se asigna a cada píxel. Debido a que cada bit de memoria es positivo o negativo (0 o 1), el sistema de visualización de 1-bit puede manejar sólo dos colores (blanco o negro) para cada píxel de la pantalla: Autor: Cristhian Salamanca 111 Estética para Entornos Virtuales UNAD Imagen 103. Despliegue Blanco y Negro Píxeles y profundidad de color Si más bits de memoria están dedicados a cada píxel de la pantalla, más colores se pueden gestionar. Cuando los 8 bits de memoria están dedicados a cada píxel, cada píxel puede ser uno de los 256 colores. (256 = 2 a la octava potencia, en otras palabras, 256 es el número máximo de combinaciones únicas de ceros y unos que podemos hacer con 8 bits.) Este tipo de pantalla del ordenador se llama de "8 bits" o "256 --colores", y es común en las computadoras más antiguos portátiles y computadoras de escritorio. Aunque las pantallas de 8 bits dan colores exactos y no son fijos, nunca pueden haber más de 256 colores singulares en la pantalla a la vez: Autor: Cristhian Salamanca 112 Estética para Entornos Virtuales UNAD Imagen 104. Colores en RGB Si más memoria se dedica a cada píxel, casi se puede lograr color fotográfico en la pantalla del ordenador. "True-color" o "24 bits" muestran millones de colores simultáneamente en la pantalla del ordenador. En True-color, las imágenes se componen por la dedicación de 24 bits de memoria para cada pixel, 8 para cada uno de los rojo, verde y azul (8 + 8 + 8 = 24): Image 2. 24-bit true color Autor: Cristhian Salamanca 113 Estética para Entornos Virtuales UNAD Imágenes True-color, o 24-bit, son comúnmente más grandes que las imágenes de 8-bit en su estado descomprimido, porque 24 bits de la memoria están dedicados a cada pixel, normalmente dispuestos en tres capas monocromáticas rojo, verde y azul: Imagen 105. RGB LA PALETA SEGURA DE COLORES WEB Antes del año 2000 los diseñadores tuvieron que considerar el uso de la paleta segura de colores web, consistió de 256 colores seguros para web. Dentro de esos 256, el MAC y PC tienen un subconjunto de 40 colores variables. Por lo tanto, el navegador usaba una paleta de 216 colores llamada web seguro CLUT (Color LOOK-UP Table). Si un usuario veía gráficos con no colores web no seguros en un monitor de 8-bits (los monitores actuales son los 16 de bits +), los colores fuera de la paleta segura se verían distorsionados, o si se trataba de un color HTML (no un gráfico, texto dinámico), el cambio se haría al color más cercano disponible. Desde el año 2000, el nivel de estándar del consumidor de PC no han requerido el uso de la paleta segura de colores. SISTEMAS HEXADECIMAL Y DECIMAL El sistema hexadecimal se refiere a un sistema de numeración con base 16. Utiliza dieciséis símbolos diferentes, la mayoría de las veces los símbolos 0-9 para representar los valores de cero a nueve, y A, B, C, D, E, F para representar los valores de diez a quince. Autor: Cristhian Salamanca 114 Estética para Entornos Virtuales UNAD Los colores se asignan a los valores correspondientes en el sistema hexadecimal de manera que puedan ser especificadas en el código HTML (o CSS o DHTML), y ver en un navegador. Los colores se pueden especificar con un triplete RGB en formato hexadecimal (una tripleta hexadecimal), sino que también puede ser especificado de acuerdo con sus nombres comunes en inglés en algunos casos. A menudo herramientas de software gráficos sirven para generar valores de color. En HTML, los valores hexadecimales se refieren a los colores utilizados para los fondos, textos, enlaces, tablas y colores. Una tripleta hexadecimal es un número de seis dígitos, hexadecimal de tres-bytes utilizado en HTML, CSS, SVG, y otras aplicaciones de la informática, para representar a los colores. Los bytes representan el rojo, verde y azul del color. Un byte representa un número en el rango de 00 a FF (en notación hexadecimal), o de 0 a 255 en notación decimal. Esto representa menos (0) a la mayoría (255) la intensidad de cada uno de los componentes de color. Concatenando tres bytes en notación hexadecimal, en el siguiente orden, constituye la tripleta hexadecimal: Byte 1: valor rojo Byte 2: valor verde Byte 3: valor azul La forma en que se escribe en la Web tiene el siguiente format: # Byte 1 | Byte 2 | Byte 3 El “#” se usa para indicar que es un color. El número de colores que pueden ser representados por este sistemas son: 256 x 256 x 256 = 16,777,216 Por ejemplo, si queremos usar los colores rojo, verde y azul en nuestro diseño, su representación hexadecimal será: Azul: #00 00 FF Rojo: #FF 00 00 Verde: #00 80 00 En los 3 casos los ceros significan que los otros colores no están presentes, y las letras representan la cantidad de color presente. Autor: Cristhian Salamanca 115 Estética para Entornos Virtuales UNAD Es posible utilizar una representación decimal de los colores que será equivalente al sistema hexadecimal. En este caso, sólo el uso de números es necesario, pero usted necesita estar seguro de que el color es el correcto. Los colores anteriores en decimal: Azul: o Hexadecimal #00 00 FF – Decimal #0 0 255 Rojo: o Hexadecimal #FF 00 00 – Decimal #255 0 0 Verde: o Hexadecimal #00 80 00 – Decimal #0 128 0 Si bien la utilización de los colores para diseño web, también se puede utilizar el nombre de algunos colores, 16 en total que se incluyen en la especificación HTML 4.0. Usted necesita usar los nombres Inglés. Color Hexadecimal Color Hexadecimal Color Hexadecimal Color Hexadecimal aqua #00FFFF green #008000 navy #000080 silver #C0C0C0 #808080 #008080 black #000000 gray olive #808000 teal #00FF00 blue #0000FF lime purple #800080 white #FFFFFF #FF0000 fuchsia #FF00FF maroon #800000 red yellow #FFFF00 Table 1. Colors and names Además de estos colores, desde el año 2005 todos los navegadores admiten la lista completa de colores, el siguiente es un ejemplo de los colores que puede usar en diseño web. La tabla siguiente ofrece una lista de los nombres de colores que cuentan con el apoyo de todos los principales navegadores60. Color Name AliceBlue AntiqueWhite Aqua Aquamarine Azure Beige Bisque Black BlanchedAlmond Blue BlueViolet Brown 60 Color HEX #F0F8FF #FAEBD7 #00FFFF #7FFFD4 #F0FFFF #F5F5DC #FFE4C4 #000000 #FFEBCD #0000FF #8A2BE2 #A52A2A Color In: http://www.w3schools.com/css/css_colornames.asp Autor: Cristhian Salamanca 116 Estética para Entornos Virtuales UNAD BurlyWood CadetBlue Chartreuse Chocolate Coral CornflowerBlue Cornsilk Crimson Cyan DarkBlue DarkCyan DarkGoldenRod DarkGray DarkGrey DarkGreen DarkKhaki DarkMagenta DarkOliveGreen Darkorange DarkOrchid DarkRed DarkSalmon DarkSeaGreen DarkSlateBlue DarkSlateGray DarkSlateGrey DarkTurquoise DarkViolet DeepPink DeepSkyBlue DimGray DimGrey DodgerBlue FireBrick FloralWhite ForestGreen Fuchsia Gainsboro GhostWhite Gold GoldenRod Gray #DEB887 #5F9EA0 #7FFF00 #D2691E #FF7F50 #6495ED #FFF8DC #DC143C #00FFFF #00008B #008B8B #B8860B #A9A9A9 #A9A9A9 #006400 #BDB76B #8B008B #556B2F #FF8C00 #9932CC #8B0000 #E9967A #8FBC8F #483D8B #2F4F4F #2F4F4F #00CED1 #9400D3 #FF1493 #00BFFF #696969 #696969 #1E90FF #B22222 #FFFAF0 #228B22 #FF00FF #DCDCDC #F8F8FF #FFD700 #DAA520 #808080 Autor: Cristhian Salamanca 117 Estética para Entornos Virtuales UNAD Grey Green GreenYellow HoneyDew HotPink IndianRed Indigo Ivory Khaki Lavender LavenderBlush LawnGreen LemonChiffon LightBlue LightCoral LightCyan LightGoldenRodYellow LightGray LightGrey LightGreen LightPink LightSalmon LightSeaGreen LightSkyBlue LightSlateGray LightSlateGrey LightSteelBlue LightYellow Lime LimeGreen Linen Magenta Maroon MediumAquaMarine MediumBlue MediumOrchid MediumPurple MediumSeaGreen MediumSlateBlue MediumSpringGreen MediumTurquoise MediumVioletRed #808080 #008000 #ADFF2F #F0FFF0 #FF69B4 #CD5C5C #4B0082 #FFFFF0 #F0E68C #E6E6FA #FFF0F5 #7CFC00 #FFFACD #ADD8E6 #F08080 #E0FFFF #FAFAD2 #D3D3D3 #D3D3D3 #90EE90 #FFB6C1 #FFA07A #20B2AA #87CEFA #778899 #778899 #B0C4DE #FFFFE0 #00FF00 #32CD32 #FAF0E6 #FF00FF #800000 #66CDAA #0000CD #BA55D3 #9370D8 #3CB371 #7B68EE #00FA9A #48D1CC #C71585 Autor: Cristhian Salamanca 118 Estética para Entornos Virtuales UNAD MidnightBlue MintCream MistyRose Moccasin NavajoWhite Navy OldLace Olive OliveDrab Orange OrangeRed Orchid PaleGoldenRod PaleGreen PaleTurquoise PaleVioletRed PapayaWhip PeachPuff Peru Pink Plum PowderBlue Purple Red RosyBrown RoyalBlue SaddleBrown Salmon SandyBrown SeaGreen SeaShell Sienna Silver SkyBlue SlateBlue SlateGray SlateGrey Snow SpringGreen SteelBlue Tan Teal #191970 #F5FFFA #FFE4E1 #FFE4B5 #FFDEAD #000080 #FDF5E6 #808000 #6B8E23 #FFA500 #FF4500 #DA70D6 #EEE8AA #98FB98 #AFEEEE #D87093 #FFEFD5 #FFDAB9 #CD853F #FFC0CB #DDA0DD #B0E0E6 #800080 #FF0000 #BC8F8F #4169E1 #8B4513 #FA8072 #F4A460 #2E8B57 #FFF5EE #A0522D #C0C0C0 #87CEEB #6A5ACD #708090 #708090 #FFFAFA #00FF7F #4682B4 #D2B48C #008080 Autor: Cristhian Salamanca 119 Estética para Entornos Virtuales UNAD Thistle Tomato Turquoise Violet Wheat White WhiteSmoke Yellow YellowGreen #D8BFD8 #FF6347 #40E0D0 #EE82EE #F5DEB3 #FFFFFF #F5F5F5 #FFFF00 #9ACD32 LECCIÓN 5: ESTILO VISUAL Si bien el diseño de un proyecto educativo virtual, debe tener en cuenta el estilo visual del mismo le ayudará a transmitir información significativa, sin olvidar que el diseño está en aras de la claridad y el impacto. A continuación algunos estilos visuales que pueden ser aplicados en los proyectos acorde a las necesidades. 1. Editorial. Imagen 106. Editorial Cuando un sitio Web tiene un diseño editorial significa que el proyecto debe lograr una unidad entre el texto, los gráficos y el diseño para transmitir el mensaje de manera más eficiente, dar al diseño un valor estético, y mejorar las posibilidades de publicación comerciales61. 61 In: http://www.bookdesignonline.com/what-is-editorial-design.aspx Autor: Cristhian Salamanca 120 Estética para Entornos Virtuales UNAD Ejemplos: http://www.brandchannel.com/start.asp?fa_id=450 2. Minimalista Imagen 107. Minimalista Minimalismo es donde el diseño es despojado hasta sus características fundamentales. En otras palabras "menos es más". Esto significa que el diseño visual es simple, pero eficaz. Ejemplos: http://www.google.com/ http://www.seodesignstudio.com/ http://www.benhulse.com/index.php Autor: Cristhian Salamanca 121 Estética para Entornos Virtuales UNAD 3. Collage Imagen 108. Collage Un collage es una obra de arte formal, principalmente en las artes visuales, a partir de un conjunto de formas diferentes, creando así un nuevo conjunto. El uso de esta técnica hizo su espectacular aparición en pinturas al óleo a principios del siglo 20 como una forma de arte pionero y novedad. Así pues, un sitio web que utiliza muchas pequeñas imágenes, gráficos, vídeos y texto, y otros elementos para crear un nuevo conjunto, sigue el estilo collage. Ejemplos: http://www.nike.com/ http://www.coca-cola.com/ Autor: Cristhian Salamanca 122 Estética para Entornos Virtuales UNAD 4. Portal Imagen 109. Portal Un portal es un sitio World Wide Web que se propone ser un importante sitio de inicio para los usuarios cuando se conectan a la Web o que los usuarios tienden a visitar como un sitio de anclaje. Son portales generales y especializados o portales de nicho. Algunos de los principales portales general es incluyen Yahoo, Excite, Netscape, Lycos, CNET, Microsoft Network, America Online y la AOL.com. Ejemplos de portales de nicho son Garden.com (para jardineros), Fool.com (para los inversores), y SearchNetworking.com (para los administradores de red)62. Ejemplos: 62 http://www.msn.com/ http://www.ebay.com/ http://www.bbc.co.uk/ In: http://searchcio-midmarket.techtarget.com/sDefinition/0,,sid183_gci212810,00.html Autor: Cristhian Salamanca 123 Estética para Entornos Virtuales UNAD 5. Video Imagen 110. Video Usted puede usar video como parte de su contenido y forma de comunicación. Ejemplos: http://youtube.com/ http://www.imaginaryforces.com/ Autor: Cristhian Salamanca 124 Estética para Entornos Virtuales UNAD 6. Ilustrativo Imagen 111. Ilustrativo Un sitio web ilustrativo es cuando el diseñador utiliza los dibujos como parte del contenido principal. Ejemplos: http://barbie.everythinggirl.com/ Autor: Cristhian Salamanca 125 Estética para Entornos Virtuales UNAD 7. Nativos digitales y estilo de píxeles Imagen 112. Digital Este estilo está relacionado con sitios web que tienen un toque de ordenador en su diseño, al igual que las fuentes, o las imágenes que se ven pixeladas. Ejemplos: http://www.quickhoney.com/#home http://www.habbo.com/ Autor: Cristhian Salamanca 126 Estética para Entornos Virtuales UNAD 8. Satírico Imagen 113. Satírico Básicamente es cuando se utiliza la ironía, el sarcasmo, la ridiculización, o similares, en exponer, denunciar, etc. Ejemplos: http://www.thomson-craighead.net/ Cualquiera de estos estilos se puede aplicar en su diseño web educativo. Pero también se pueden encontrar muchos más, o también puede desarrollar su propio estilo, algo que viene con la experiencia. Autor: Cristhian Salamanca 127 Estética para Entornos Virtuales UNAD UNIT II ESTÉTICA APLICADA INTRODUCCIÓN La ausencia de materiales que ofrezcan a los estudiantes las bases fundamentales del diseño es una realidad en muchos casos. Pero la ausencia de intentar orientar el pensamiento del estudiante en una progresión lógica del diseño básico al diseño aplicado es mucho más común. Para diseñar no solo se necesita talento, sino también un buen fundamento, algo que hemos cubierto en la primera unidad. Ahora es tiempo de aplicar ese conocimiento, por eso en esta segunda unidad veremos la forma en que podemos llevar un proyecto educativo web a la realidad. En el capítulo 1 se analizará la forma en que se puede mostrar el contenido teniendo en cuenta consejos muy prácticos. Posteriormente se hablará sobre los diferentes y variados sitios educativos disponibles en la Internet, con el fin de ampliar las posibilidades de desarrollo de sitios web, que a veces, de por sí tienden a ser limitadas. Seguido hablaremos sobre dos temas fundamentales en el desarrollo web como lo son el lenguaje HTML y las hojas de estilo CSS; herramientas que al comprenderlas nos permitirán avanzar rápidamente y con precisión en nuestra labor de diseño. Un tema fundamental sobre el cual se hablará es sobre cómo manejar texto para Internet, las opciones disponibles, y sobre qué debemos hacer cuando queremos que nuestro diseño sea llamativo y nuestro contenido no se pierda. En los capítulos 2 y 3, hablaremos sobre cómo realizar la pre-producción de un sitio web, partiendo de la definición hasta la planeación y organización de los contenidos. También analizaremos en detalle los principios que rigen el diseño digital, y como unir esos principios con la teoría de la primera unidad, para así tener un producto de buena calidad. También veremos a lo largo de la unidad muchas similitudes entre el diseño web y el diseño multimedia. Similitudes que se presentan especialmente cuando el diseño multimedia se enfoca hacia la interactividad. En resumen, el propósito de esta unidad es dotar a cada estudiante de las herramientas necesarias para aplicar cuidadosamente los conceptos de diseño en un proyecto educativo virtual. Autor: Cristhian Salamanca 128 Estética para Entornos Virtuales UNAD OBJETIVO Qué el estudiante despierte su curiosidad, mantenga su atención y haga uso de sus facultades creativas en el desarrollo de un proyecto educativo de tipo virtual. COMPETENCIA El estudiante comprende que el desarrollo visual de cualquier producto virtual e interactivo está ligado en primer lugar a los límites y objetivos que se establezcan en el proyecto; y en segundo lugar está ligado al conocimiento y manejo de tecnologías como HTML, Flash, entre muchas otras. Autor: Cristhian Salamanca 129 Estética para Entornos Virtuales UNAD CAPÍTULO 1 DISEÑO VISUAL EN ACCIÓN LECCIÓN 1: CONTENIDO Y FORMA Las siguientes son las consideraciones con respecto a la forma y el contenido de un sitio web, es muy útil y eficaz examinar estos puntos para su diseño. DISEÑE PARA EL PRIMER LECTOR Utilice un dominante visual o un elemento que proporcione un punto focal. Siempre considerare cuestiones como el ancho de banda y las limitaciones gráficas. El objetivo es asegurarse de que el usuario reciba la información y comprenda el sitio a primera vista. A este respecto, también nos referimos a obtener la atención del espectador la primera vez. Imagen 114. Williams-Sonoma Un ejemplo para explicarlo mejor es el sitio http://www.williams-sonoma.com/. De acuerdo con Jacob Nielsen, dice “(…) Estoy muy impresionado con las fotografías de sus productos que proporcionan contenido muy adecuado para la Web. Es un ejemplo de gráficos que ayudan en lugar de herir”63. 63 In: http://www.sitepoint.com/article/interview-jakob-nielsen-ph-d/3/ Autor: Cristhian Salamanca 130 Estética para Entornos Virtuales UNAD Así como podemos ver, el uso de un elemento fuerte puede llamar la atención del espectador. EVITE EL BALANCE ESTÁTICO Pero sea consistente, usando elementos estándares que son obvios. Utilice la tensión para añadir interés a una página. Un buen ejemplo es http://poseidon.se/, donde la imagen es la tensión que crea interés en la página. Aquí es posible utilizar incluso texto, ilustración, etc. Imagen 115. Poseidon Web Utilice los espacios en blanco alrededor del sitio para añadir énfasis. Usted necesita de diseñar algo que es transpirable, lo que le permite a su diseño ser claro, fresco, y que ayude a su usuario a centrarse en los elementos importantes de su diseño. El sitio http://www.pentagram.com/en/ es un muy buen ejemplo de ello. Autor: Cristhian Salamanca 131 Estética para Entornos Virtuales UNAD Imagen 116. Uso del espacio en blanco para enfocar la atención Trate de impactar a su audiencia, pero sea claro. El diseño visual es una herramienta para transmitir el mensaje, no es el mensaje en sí mismo. Un buen diseño apoya su contenido de manera eficaz con un acceso rápido, y sin desorden. El sitio http://www.xplane.com/ es un buen ejemplo que utiliza el estilo visual único para transmitir información significativa. Imagen 117. Busque impactar su audiencia, pero siendo claro Autor: Cristhian Salamanca 132 Estética para Entornos Virtuales UNAD APRENDA A CONTAR UNA HISTORIA Cada producción, de TV, películas, juegos, libros, revistas, periódicos y sitios web son elementos narrativos, cada uno de ellos está diciendo algo a su audiencia en particular. No hay nada más convincente o memorable que una historia. Así que por esa razón usted necesita incorporar una estructura narrativa a su trabajo. El sitio http://becominghuman.org/ es un excelente ejemplo de cómo contar historias. Imagen 118. Aprenda a contar historias QUE EL ESTILO COINCIDA CON EL CONTENIDO Permita que el contenido y los objetivos dirijan el desarrollo del sitio. El Contenido se convierte en información significativa cuando es orgánico a su entorno, es decir, cuando se corresponden entre sí. La forma cómo se interprete el contenido está dictada por la manera en que se comunique visualmente. La intención es parte de un buen diseño. Todo esto significa que no se puede separar todo el proceso que existe en el diseño de su proyecto web, usted no puede esperar para colocar su contenido después de que el diseño está listo. Autor: Cristhian Salamanca 133 Estética para Entornos Virtuales UNAD ¿CUÁL ES LA VOZ DEL DISEÑO? Hay que estar dispuestos a experimentar y asumir riesgos. La idoneidad del proyecto se basa en la proporción, en relación con la audiencia y el contenido. En cuanto a la educación, la creatividad se convierte en el principal recurso necesario para tener éxito con el proyecto, para ello se debe ser desinhibido a fin de encontrar nuevas y creativas soluciones. Recuerde que un buen diseño no se produce de repente o sin trabajo. Es una evolución de éxitos y fracasos. EL MEDIO ES EL MENSAJE Es recomendable aprender HTML, CSS, Javascript, y Flash. La manera de cómo y cuando se presentan los datos depende del medio. Usted necesita saber qué puede y que no se puede hacer. Un buen consejo es ver código fuente, ver cómo otras personas lo están haciendo. Diseñe con la tecnología actual, no al revés. También es muy importante prestar atención a los convenios web relacionados con el uso de tablas, formularios, botones, estilos CSS, casillas de verificación, y muchos otros disponibles para HTML. Recuerde que HTML es el lenguaje de la comunicación para la Internet. En todo esto, es posible decir que su trabajo es encontrar el mejor diseño que ayude a crear la experiencia de sus estudiantes. LECCIÓN 2: TIPOS DE SITIOS WEB EDUCATIVOS Estos son sitios que bien pertenecen a organizaciones educativas o que están diseñados para informar a las personas sobre un determinado tema. Hay una serie de diferentes formatos de este tipo de sitios, pero mantienen los fundamentos de informar a las personas sobre un determinado tema o están diseñados para promover una organización educativa o institución. El tipo de sitio educativo, por supuesto, depende de exactamente cuál es el objetivo del sitio. Algunos sitios de educación puede clasificar como personales o como de negocio o sitios comerciales, esto en función del contenido del sitio. Estos sitios pueden ser grandes o pequeños y pueden ser simples o complejos. Autor: Cristhian Salamanca 134 Estética para Entornos Virtuales UNAD El número de sitios educativos en la World Wide Web crece diariamente y los maestros pueden tener dificultades para identificar los sitios que están bien adaptados para obtener los mejores resultados de los alumnos64. SITIOS WEB INSTRUCTIVOS Para se clasificado como instructivos, un sitio debe incluir: 1. Un resultado esperado. 2. Estrategias de instrucción 3. Materiales didácticos y actividades. 4. Evaluación de aprendizaje y/o retroalimentación. Una estrategia de instrucción es una técnica pedagógica diseñada para facilitar el aprendizaje a través de una combinación de maestro y alumno. Un ejemplo de este tipo de sitios es el Campus ofrecido por UNAD. COLECCIÓN DE CONTENIDO Un sitio de colección de contenido es una recopilación de información acerca de una determinada área de contenido (como la genética o insectos), que es informativo y pueden ser utilizados en el aprendizaje, pero no es de instrucción. Estos difieren de los sitios instructivos pues no ofrecen a los usuarios actividades de aprendizaje, objetivos, estrategias o evaluaciones. Podrán, sin embargo, incluir lecturas informativas, ilustraciones y otros contenido ricos en material. Ejemplo: http://www.carolhurst.com/ ARCHIVO/BASE DE DATOS/REFERENCIA Un sitio de archivo/bases de datos/referencia es una colección de información que es organizada así como archivada. Estos sitios pueden ser indexados cronológicamente, alfabéticamente, o por temas. Estos sitios son diseñados como herramientas de información y referencia. Difieren de los sitios de colección de contenido en que pueden tener múltiples temas y están orientados a la búsqueda de información. 64 In: http://eric.ed.gov/ERICDocs/data/ericdocs2sql/content_storage_01/0000019b/80/1a/87/cc.pdf Autor: Cristhian Salamanca 135 Estética para Entornos Virtuales UNAD Ejemplo: www.archive.org COMPILACIÓN DE ACTIVIDADES DE APRENDIZAJE Y JUEGOS EN LINEA Estos sitios son colecciones de actividades de aprendizaje individual y / o juegos para ser completados en línea por los usuarios. Un buen ejemplo es www.exploremath.com, una colección de actividades interactivas de matemáticas en 13 categorías. EXPOSICIONES ONLINE Las exposiciones en línea se centran en la colección de medios de comunicación (imágenes, grabaciones, animaciones, videos) relacionadas con algún contenido particular o evento. Exposiciones de museos o de organizaciones suelen ser de esta categoría. Ejemplo: www.becominghuman.org RECURSOS PARA MAESTROS Sitios de recursos para profesores están diseñados para proporcionar a los maestros con planes de lecciones, actividades de aula, guías docentes, planes de estudio, y recursos profesionales de desarrollo. Ejemplo: http://illuminations.nctm.org/ PARTICIPACIÓN SUBSIDIARIA Los sitios de participación indirecta ofrecen a los usuarios la oportunidad de participar en línea en un curso de educación o en actividades de investigación, o de expedición. Los viajes de campo virtual se incluyen en esta clasificación. Estos sitios intentan dar al usuario una sensación de participación en actividades que no están a disposición del estudiante típico del salón de clases. Ejemplo: http://www.jason.org/public/home.aspx COMUNICACIÓN COMUNITARIA Los sitios de comunicación de la comunidad facilitan el debate, la interacción, entretenimiento, y otros intercambios de información. Los usuarios pueden jugar Autor: Cristhian Salamanca 136 Estética para Entornos Virtuales UNAD juegos interactivos y compartir pensamientos e ideas con los demás a través de email, chat, y tablones de anuncios. ORGANIZACIONES ACADÉMICAS O DE INVESTIGACIÓN Estos sitios representan una organización particular de investigación no comercial o unidad académica. Normalmente muestran la naturaleza y el propósito de la organización, el propósito, sus actuales y anteriores proyectos, los últimos resultados, noticias y eventos pertinentes, y materiales educativos y actividades. El sitio www.nasa.gov es un muy buen ejemplo de ello. COMERCIAL Los sitios comerciales son principalmente destinados a promover y vender productos o servicios. Muchos sitios comerciales tienen componentes auxiliares diseñados para informar, educar o entretener. Por ejemplo, una empresa que vende medicinas para el resfriado puede incluir información sobre el medicamento o tener una instrucción acerca de las causas y los tratamientos de resfriados y gripe. Buenos ejemplos son www.cnn.com, www.nationalgeographic.com. LUGARES CON MISIÓN PÚBLICA Esta clasificación sitio web se refiere a lugares reales como museos, sitios históricos, parques zoológicos, jardines, acuarios, parques, etc. Esos sitios suelen abordar a los visitantes información, horarios, exposiciones, "cómo llegar", como ser miembro, y eventos especiales. Ejemplo: www.history.org PROYECTOS DE INVESTIGACIÓN O PLANES DE ESTUDIO Estos sitios están diseñados para informar al visitante acerca de una investigación vigente o un proyecto de estudios de investigación. El contenido pueden incluir noticias y anuncios de próximos eventos, resultados de investigaciones y publicaciones, personas relacionadas con el proyecto, la financiación, y otra información relacionada. COLECCIÓN DE LINKS Los sitios en esta categoría muestran listas categorizadas- anuncios clasificadosde hiperenlaces externos de recursos en línea sobre un tema. Contienen poco o Autor: Cristhian Salamanca 137 Estética para Entornos Virtuales UNAD ningún contenido de su propia autoría y sirven principalmente como portales de contenido externo. CONCLUSIÓN Un sitio educativo debe tener al menos una de las categorías, pero puede incluir todas las categorías también. Esto dependerá de sus necesidades de información y servicios, que también dependerán de su público objetivo, el medio de la entrega, y el contenido. Recuerde que, mientras piensa diseñar su web educativa, es necesario establecer cuál es el objetivo principal del proyecto, para que así logre desarrollar lo que se requiere para tener éxito. LECCIÓN 3: HTML La siguiente lección explica los conceptos básicos de HTML. La intención es introducir a los estudiantes en el uso importante de HTML en ambientes virtuales. Con HTML usted puede crear su sitio web. HTML es muy fácil de aprender. ¿QUÉ ES HTML? HTML es un lenguaje para describir páginas web. HTML significa Hyper Text Markup Language (Lenguaje de Marcas de Hipertexto) HTML no es un lenguaje de programación, es un lenguaje de marcas. Un lenguaje de marcas es un conjunto de etiquetas de marcado. Las etiquetas de marca describen como el texto debe ser mostrado en un navegador web. Etiquetas de marcado HTML Las etiquetas de marca HTML son pequeñas líneas de código rodeadas por corchetes como <html> Las etiquetas de marca HTML normalmente vienen en parejas como <b> and </b> Autor: Cristhian Salamanca 138 Estética para Entornos Virtuales UNAD La primera etiqueta del par es la etiqueta inicial, la segunda etiqueta es la final o la de cierre ¿Qué es un archivo HTML? Un archivo HTML es un archivo de texto que contiene etiquetas de marca Un archivo HTML debe tener una extensión „htm‟ o „html‟. Un archivo HTML puede ser creado usando un editor de texto. Un archivo HTML suele ser llamado un documento HTML o página web. Cuando una navegador despliega una página web, nunca mostrará las etiquetas de marcado. El navegador usa las etiquetas de marcado para entender el diseño de la página. UN DOCUMENTO HTML <html> <body> <p>This is my first paragraph</p> <p>This is my <b>second</b> paragraph</p> </body> </html> Ejemplo explicado: Cuando un navegador muestra una página web, nunca mostrará las etiquetas de marcado. El texto entre las etiquetas <html> y </html> describe un página web page. El texto entre las etiquetas <body> y </body> es mostrado en el navegador de internet. El texto entre las etiquetas <p> y </p> se muestra como párrafos. El texto entre las etiquetas <b> y </b> se muestra como una fuente en negrita. Cuando escriba HTML, usted puede usar un editor de texto (como Bloc de notas). Es una buena forma de aprenderlo. Autor: Cristhian Salamanca 139 Estética para Entornos Virtuales UNAD Sin embargo, desarrolladores web profesionales usan editores HTML como FrontPage o Dreamweaver, en lugar de editores de texto ¿QUÉ EXTENSIÓN USAR, HTM O HTML? Cuando usted guarde un archivo HTML, usted puede usar la extensión „.htm‟ o „.html‟. guardar en extensión htm es un hábito del pasado, pues los software de antes solo permitían 3 letras para la extensión en los archivos Con software más nuevos, es perfectamente seguro guardar con la extensión html. ETIQUETAS Y ELEMENTOS HTML Los documentos HTML son archives de texto hechos de elementos HTML. Los elementos HTML están definidos por el uso de eqtiuetas HTML. Etiquetas HTML Las etiquetas HTML son usadas para marcar los elementos HTML. Las etiquetas HTML están rodeadas por dos caracteres < y >. Los caracteres que rodean las etiquetas son llamados paréntesis angulares. Las etiquetas HTML normalmente vienen en parejas como <b> y </b>. La primera etiqueta del par es la etiqueta inicial, la segunda etiqueta es la final o la de cierre El texto entre la etiqueta inicial y final es el elemento de contenido. Las etiquetas HTML no son sensible a mayúsculas y minúsculas, <b> es lo mismo que <B>. ELEMENTOS HTML Recuerde el ejemplo anterior: <html> <head> Autor: Cristhian Salamanca 140 Estética para Entornos Virtuales UNAD <title>Title of page</title> </head> <body> This is my first homepage. <b>This text is bold</b> </body> </html> Este es un elemento HTML: <b>This text is bold</b> El elemento HTML comienza con la etiqueta: <b> El contenido del elemento HTML es: This text is bold El elemento HTML termina con la etiqueta: </b> El propósito de la etiqueta <b> es definir un elemento HTML que debe ser mostrado en negrita. Este también es un elemento HTML: <body> This is my first homepage. <b>This text is bold</b> </body> Este elemento HTML comienza con la etiqueta de inicio <body>, y termina con la etiqueta final </body>. El propósito de la etiqueta <body> es definir el elemento que contiene el cuerpo del documento HTML. Aquí será mostrado el contenido y diseño de una página de web. ETIQUETAS BÁSICAS La etiqueta <head> La etiqueta <head> es donde se añaden todos los atributos generales de la página. Atributos como el título definido por la etiqueta <title>. Headings o Encabezamiento o Cabeceras Los encabezamientos son definidos por las etiquetas desde <h1> hasta <h6>. <h1> define el encabezamiento de mayor tamaño. <h6> define el encabezamiento Autor: Cristhian Salamanca 141 Estética para Entornos Virtuales UNAD de menor tamaño. Los encabezamientos (Headings) son usados para los títulos del contenido. <h1>This is a heading</h1> <h2>This is a heading</h2> <h3>This is a heading</h3> <h4>This is a heading</h4> <h5>This is a heading</h5> <h6>This is a heading</h6> HTML automáticamente adiciona una línea o espacio en blanco antes y después del encabezamiento. Párrafos Los párrafos están definidos por la etiqueta <p>. <p>This is a paragraph</p> <p>This is another paragraph</p> HTML automáticamente adiciona una línea o espacio en blanco antes y después del párrafo. Rupturas de Línea La etiqueta <br> es usada cuando usted quiera hacer una ruptura de línea, pero no quiere comenzar un nuevo párrafo. La etiqueta <br> crea una ruptura de línea donde quiera que la coloque. <p>This <br> is a para<br>graph with line breaks</p> Formato de Texto Otras etiquetas que se pueden usar para dar formato al texto son: <b> <big> <em> <i> <small> <strong> <sub> <sup> <ins> <del> Define el texto como negrita Define el texto como grande Define el texto con énfasis Define el texto en itálica Define el texto pequeño Define el texto fuerte Define el texto como subíndice Define el texto como superíndice Define el texto insertado Define el texto borrado o anulado Autor: Cristhian Salamanca 142 Estética para Entornos Virtuales UNAD HIPERENLACES HTML usa un hiperenlace para ligar un documento en la web. Para esto usted necesita comprender la etiqueta de ancla y el atributo „href‟. HTML usa la etiqueta de ancla <a> para crear un vinculo con otro documento. Un ancla puede apuntar a cualquier recurso en la web: una página HTML, una imagen, un archivo de audio, una película, etc. La sintaxis para crear un ancla es: <a href="url">Text to be displayed</a> La etiqueta <a> es usada para crear un ancla para vincular, el atributo „href‟ es usado para dar la dirección del documento a vincular, y las palabras en medio del ancla serán mostradas como un hiperenlace. Por ejemplo esta ancla define un enlace a W3Schools: <a href="http://www.w3schools.com/">Visit W3Schools!</a> Usted también puede usar una imagen como hiperenlace. Solo se necesita adicionar la etiqueta <img> en medio de la etiqueta de ancla <a>. <a href="lastpage.htm"> <img border="0" src="buttonnext.gif" width="65" height="38"> </a> IMAGENES HTML Con HTML se pueden mostrar imágenes en un documento. Para ello, es importante comprender la Etiqueta imagen y el atributo Src. En HTML, las imágenes se definen con la etiqueta <img>. El <img> es una etiqueta vacía, lo que significa que sólo contiene los atributos y no tiene etiqueta de cierre. Para mostrar una imagen en una página, es necesario utilizar el atributo src. Src significa "fuente". El valor del atributo src es la URL de la imagen que desea mostrar en su página. La sintaxis es la siguiente: Autor: Cristhian Salamanca 143 Estética para Entornos Virtuales UNAD <img src="url"> La URL apunta a la locación donde se encuentra la imagen. Una imagen llamada "boat.gif" localizada en el directorio "images" en "www.w3schools.com" tiene la URL: http://www.w3schools.com/images/boat.gif. El navegador coloca la imagen donde esté la etiqueta de la imagen en el documento. Si coloca una imagen de etiqueta entre dos párrafos, el navegador muestra el primer párrafo y, a continuación, la imagen y, a continuación, el segundo párrafo. UN EJEMPLO HTML Entender HTML requiere de práctica. La siguiente es una pequeña práctica. Lo haremos creando dos páginas sencillas. 1. Cree un folder llamado Project 1. 2. Dentro del folder, cree otro folder llamado „images‟, dónde se colocarán las imágenes. Coloque allí 1 o 2 de su preferencia. 3. Abra el bloc de nota, y vaya a Archivo>Guardar como y guradelo como index.html, incluyendo la extensión. 4. Adicione el código HTML en el bloc de notas: <html> <head> <title>Mi Pagina </title> </head> <body> Mi primera pagina. <b>Este texto esta en negrita </b> </body> </html> 5. Adicione alguna de las imagenes adicionando la siguiente linea de codigo entre el cuerpo <body>, sin olvidar reemplazar „name.jpg‟ por el nombre se su imagen y extensión <img src="images/name.jpg" > 6. Guardar. Ahora nuestra página está lista. Vaya al folder y abra el archivo index.html creado. Abrirá una página con una imagen. 7. Ahora crearemos un hiperenlace. Para ello, crearemos otro document HTML en el bloc de notas usando el mismo código anterior, pero usando la segunda imagen del folder. Guardar como „page.html‟. Autor: Cristhian Salamanca 144 Estética para Entornos Virtuales UNAD 8. Asegúrese que ambos archivos del bloc de notas están abiertos. Si no, usted los puede volver a abrir, solo necesita ir al folder, localizar los archivos y hacienda clic derecho seleccionar „abrir con‟ y seleccionar bloc de notas. 9. Para adicionar un enlace necesitamos usar la etiqueta <a>. Así que en el archivo index.html adicione el siguiente enlace entre el <body>: <a href="page.html">Go to another page</a> También adicione el siguiente código en el documento page.html: <a href="index.html">Go to another page</a> Ahora, ambos documentos están vinculados. Recuerde que HTML funciona como la base para el lenguaje de Internet, por lo que se necesita práctica, así usted será capaz de desarrollar interesantes proyectos educativos Web. LECCIÓN 4: CSS ¿QUE ES CSS? CSS significa Cascading Style Sheets (Hojas de Estilo en Cascada) Los estilos definen cómo mostrar los elementos HTML Los estilos normalmente se almacenan Hojas de Estilo Los estilos se añadieron a HTML 4.0 para resolver un problema Las Hojas de Estilo externas le pueden ahorrar una gran cantidad de trabajo Las Hojas de Estilo en externas se almacenan en archivos CSS Múltiples definiciones de estilo serán aplicados en cascada LOS ESTILOS SOLUCIONAN UN PROBLAM COMÚN Las etiquetas HTML se diseñaron originalmente para definir el contenido de un documento. Se supone que debían decir "Esta es una cabecera", "Este es un párrafo", "Esta es una tabla", mediante el uso de etiquetas como <h1>, <p>, Autor: Cristhian Salamanca 145 Estética para Entornos Virtuales UNAD <table>, y así sucesivamente. La presentación del documento se suponía que iba a ser atendidos por el navegador, sin necesidad de utilizar algún formato de etiquetas. Como los dos principales navegadores - Netscape e Internet Explorer - a continuaron añadiendo nuevas etiquetas HTML y atributos (como la etiqueta <font> y el atributo de color) a la especificación HTML original, se hizo más y más difícil crear sitios Web donde el contenido de los documentos HTML está claramente separado de la presentación del diseño del documento. Para resolver este problema, la World Wide Web Consortium (W3C) - sin ánimo de lucro, consorcio en el establecimiento de normas, responsable de la normalización de HTML – creó los ESTILOS en adición a HTML 4.0. Todos los principales navegadores soportan Hojas de Estilo en Cascada. LAS HOJAS DE ESTILO PUEDEN SALVAR MUCHO TRABAJO Hojas de estilos definen cómo los elementos HTML se van a mostrar, al igual que la etiqueta de la fuente y el color en el atributo HTML 3.2. Los estilos normalmente se guardan en archivos .css externos. Hojas de estilo Exteriores le permiten cambiar la apariencia y el diseño de todas las páginas de su Web, sólo con la edición de un único documento CSS CSS es un gran avance en el diseño de páginas Web, ya que permite a los desarrolladores controlar el estilo y el diseño de varias páginas Web a la vez. Como un desarrollador Web usted puede definir un estilo para cada elemento HTML y aplicarlo a la mayor cantidad de páginas web como desee. Para hacer un cambio global, simplemente cambia el estilo, y todos los elementos de la Web se actualizan automáticamente. VARIOS ESTILOS EN CASCADA EN UNO Las hojas de estilo permiten especificar la información de los estilos de muchas maneras. Los estilos se pueden especificar dentro de un único elemento HTML, dentro del elemento <head> de una página HTML, o en un archivo externo CSS. Incluso múltiples hojas de estilo externo se puede referenciar dentro de un único documento HTML. ORDEN DE CASCADA ¿Qué estilo se utiliza cuando hay más de un estilo determinado para un elemento HTML? Autor: Cristhian Salamanca 146 Estética para Entornos Virtuales UNAD En términos generales podemos decir que todos los estilos "en cascada" en una nueva "virtual" hoja de estilo por las siguientes reglas, donde el número cuatro tiene la más alta prioridad: 1. Navegador por defecto 2. Hoja de estilo externa 3. Interior hoja de estilos (dentro de la etiqueta <head>) 4. Estilo "inline" (dentro de un elemento HTML) Por lo tanto, una línea de estilo (dentro de un elemento HTML) tiene la más alta prioridad, lo que significa que se anularán un estilo declarado en el interior de la <head> etiqueta, en una hoja de estilo externa, o en un navegador (un valor por defecto). SINTAXIS La sintaxis CSS está hecha de 3 partes: Un selector, una propiedad y un valor: selector {propiedad: valor} El selector es normalmente el elemento HTML / etiqueta que desea definir, la propiedad es el atributo que desea cambiar, y cada propiedad puede tener un valor. La propiedad y el valor están separados por dos puntos, y rodeado de llaves: body {color: black} Nota: si el valor tiene multiples palabras, ponga comillas alrededor del valor: p {font-family: "sans serif"} Nota: Si desea especificar más de una propiedad, usted debe separar cada propiedad con un punto y coma. El siguiente ejemplo muestra cómo definir un centro alineado apartado, con un rojo en el color del texto: p {text-align:center;color:red} Para que el estilo de las definiciones sea legible, se puede describir una propiedad en cada línea, como este: p { text-align: center; color: black; font-family: arial Autor: Cristhian Salamanca 147 Estética para Entornos Virtuales UNAD } AGRUPAMIENTO Puede agrupar selectores. Separe cada selector con una coma. En el siguiente ejemplo hemos agrupado todos los elementos de cabecera. Todos los elementos de cabecera se mostrarán en verde: h1,h2,h3,h4,h5,h6 { color: green } SELECTOR DE LA CLASE Con el selector de clase se pueden definir estilos diferentes para el mismo tipo de elemento HTML. Decir que le gustaría tener dos tipos de párrafos en el documento: una alineada a la derecha, y otro centrado. Así se puede lograr: p.right {text-align: right} p.center {text-align: center} Se tiene que usar el atributo de clase en su documento HTML: <p class="right"> This paragraph will be right-aligned. </p> <p class="center"> This paragraph will be center-aligned. </p> Cómo insertar una Hoja de Estilo en un documento HTML Cuando un navegador lee una hoja de estilo, formateará el documento de acuerdo a ella. Hay tres maneras de insertar una hoja de estilo: HOJAS EXTERNAS Una hoja de estilo externa es ideal cuando el estilo se aplica a muchas páginas. Con una hoja de estilo externa, puede cambiar el aspecto de todo un sitio Web cambiando un archivo. Cada página debe enlazar con la hoja de estilo usando la etiqueta <link>. El <link> etiqueta va dentro de la sección de cabecera: Autor: Cristhian Salamanca 148 Estética para Entornos Virtuales UNAD <head> <link rel="stylesheet" type="text/css" href="mystyle.css" /> </head> El navegador leerá el estilo de las definiciones del archivo mystyle.css, y el formato del documento de acuerdo a ella. Una hoja de estilo externa puede ser escrita en cualquier editor de texto. El archivo no debe contener ninguna etiqueta HTML. Su hoja de estilo se debe guardar con la extensión .css. Un ejemplo de un archivo de hoja de estilo se muestra a continuación: hr {color: sienna} p {margin-left: 20px} INTERNAL STYLE SHEET Una hoja de estilo interna debe ser utilizada cuando un documento único tiene un estilo único. Se definen los estilos internos en la sección de cabecera mediante el uso de la etiqueta <style>, como este: <head> <style type="text/css"> hr {color: sienna} p {margin-left: 20px} body {background-image: url("images/back40.gif")} </style> </head> El explorador leer ahora el estilo de las definiciones, el formato y el documento de acuerdo a ella. ESTILOS INLINE Una línea de estilo pierde muchas de las ventajas de las hojas de estilo por la mezcla de contenido con la presentación. Utilice este método con moderación, como cuando un estilo se aplicará a la única aparición de un elemento. Para utilizar estilos en línea se usa el atributo de estilo en la etiqueta. El estilo atributo puede contener cualquier propiedad CSS. El ejemplo muestra cómo cambiar el color y el margen izquierdo de un párrafo: <p style="color: sienna; margin-left: 20px"> Autor: Cristhian Salamanca 149 Estética para Entornos Virtuales UNAD This is a paragraph </p> UN EJEMPLO Para entender la forma de trabajo CSS en HTML, puede abrir uno de los archivos ya existentes como index.html, y entre el <head> coloque el siguiente código: <style type="text/css"> p {margin-left: 20px} body {background-color: #989bb9} </style> Guardar con un nombre diferente, algo así como index2.html, por lo que se puede ver la diferencia de las 2 versiones. Una vez más, como HTML, CSS requiere mucha práctica y tiempo, sino también paciencia. Sin embargo, a sabiendas de los fundamentos que le da ideas claras de lo que usted desea. LECCIÓN 5: MANEJO DEL TEXTO PARA LA WEB65 La gestión del Texto en la Web es una cuestión completamente diferente a su homólogo de impresión, y se necesita tener mucho cuidado. Uno de los principales factores limitantes en el diseño Web es la variedad de fuentes que pueden usarse de manera segura en una página, debido a la presencia de unas pocas fuentes comunes instaladas por defecto en los sistemas operativos. Aunque existen diversos medios en la utilización de fuentes inusuales en diferentes tamaños, es importante tomar decisiones concretas en cuanto a la gestión del texto en el proceso de diseño. El estilo de texto „crudo‟ utilizando etiquetas HTML proporciona la mayor parte de los contenidos de la mayoría de los sitios de la Web el día de hoy. Es una forma bastante eficaz de mostrar la información, pues este texto añade poco a la memoria y al tamaño del documento. No son necesarios plugins, por lo que el texto se pueden visualizar sin interrupciones, y los spiders de los motores de búsqueda pueden examinar cada una de las palabras que un visitante puede ver. Sin embargo, como veremos, el uso de HTML para definir el estilo de los textos es un método obsoleto, que ha sido sustituido. 65 Based on ALISTAIR Dabs, ALISTAIR Campbell (2004). The Digital Designer’s Bible. East Sussex Autor: Cristhian Salamanca 150 Estética para Entornos Virtuales UNAD Para que una página muestre el mismo tipo de letra con que se ha creado el diseño, la fuente debe estar presente en el sistema operativo del visitante. Por lo tanto, la mayoría de las páginas se crean con textos con estilos usando fuentes que el diseñador asume existen en la mayoría de los equipos. Teniendo en cuenta las diversas plataformas y sistemas operativos que existen, esta decisión exige una generalización muy amplia. El resultado: fuentes de sistema estándar. Esencialmente, usted se limita a Arial, Arial Black, Comic Sans MS, Courier New, Georgia, Impact, Times New Roman, Trebuchet MS, Verdana, y algunos otros, y sólo algunas de las fuentes mencionadas son adecuadas para crear el cuerpo textual. Las mejores prácticas de la Web incluyen una lista de fuentes a fin de que, incluso si la fuente no está presente en el sistema del usuario, una de las otras fuentes por defecto la reemplace. Sin embargo, usted debe evitar el uso de una fuente esotérica o estilizada como su primera opción, porque sólo una ínfima minoría de su público lo verá correctamente. Una etiqueta para fuentes HTML se ve así: <font face=”Arial, Helvetica, sans-serif”>Hola Mundo!</font> Cuando la página es mostrada en un navegador, las palabras "Hola Mundo!" deberán tener un estilo de fuente "Arial". Si "Arial" no está presente en el sistema y, continuación se verá como "Helvetica" y, por último, "sans-serif". El uso de etiquetas de fuentes está en declive, pues han sido reemplazadas por CSS. Las etiquetas de fuente deben aplicarse a todos y cada uno de los elementos a los que se desea aplicar estilos, por lo que la actualización de estos estilos en toda una página web requiere a menudo complejos ejercicios de encontrar y reemplazar, mientras que con CSS, solo será necesario ajustar un par de valores en un único, documento externo. Los CSS para el formato del texto es altamente recomendable. La siguiente lista son las fuentes que se consideran seguras para la Web: Arial Impact Arial Black Times New Roman Comic Sans MS Trebuchet MS Courier New Verdana Georgia Autor: Cristhian Salamanca 151 Estética para Entornos Virtuales UNAD USANDO CSS PARA DAR FORMATO AL TEXTO Cada navegador tiene una hoja de estilos por defecto que le dice cómo mostrar una página web - el usuario puede modificar ciertas opciones, por ejemplo, el tamaño del texto y si mostrar o no las imágenes. El problema con esto es que incluso si un diseñador especifica el tamaño que él o ella quiere que aparezca el texto, el texto puro en HTML puede tener estilos con tamaños relativos, que van desde 1 a 7, o mediante el uso de etiquetas como <h1>, < h2>. Aun así, el texto aparece a veces diferente a través de equipos Mac y PC, aunque estos problemas son menos comunes hoy en día. Normalmente, las diferencias entre las dos plataformas están ahora restringidos a las alturas de línea y al „anti-aliasing‟ que afectan a la anchura – esto se evita si al menos usted utiliza métodos más adecuados para definir el tamaño del texto. Al usar hojas de estilo CSS (ver lección anterior), permiten definir un tamaño exacto de medida para un texto. Usted puede usar un número de unidades, aunque algunos pocos sean coherentes con los navegadores y plataformas. Por ejemplo, puntos (pt), pulgadas (in), milímetros (mm), y picas (pc). Los píxeles son comúnmente utilizados para establecer el tamaño del texto en la página web, principalmente porque dicho texto tiende a verse igual a través de los navegadores y plataformas. Sin embargo, hay un principal inconveniente para el tamaño de texto en píxeles: los usuarios de Internet Explorer para Windows no puede ajustar este tamaño en el menú de <Ver> Tamaño del texto. Todos los demás navegadores permiten modificar el tamaño del texto definido en píxeles, pero no IE. Por lo tanto, si se utiliza píxeles, se debe tener cuidado y asegurarse de que todo sea legible. No caer en la trampa de crear páginas con pequeños y limpios, pero en última instancia, textos ilegibles. En última instancia, lo que es bueno para un diseñador no es necesariamente lo mejor para un usuario. Si usted fija el tamaño del texto de una página, usted corre el riesgo de limitar su accesibilidad - no todo el mundo tiene el mismo poder de visión. En lugar de eso, tal vez quiera pensar sobre la especificación de diferentes hojas de estilo para diferentes tipos de usuario. Con una combinación de CSS y JavaScript, es posible cambiar todos los elementos en una página, simplemente seleccionando una opción del menú. De esta manera usted no termina automáticamente diseñando para un común denominador. Hemos tocado brevemente sobre la ventaja de CSS en las etiquetas de fuente, observando la capacidad de efecto de los estilos en un sitio en blanco. Sin embargo, la CSS va mucho más allá ya que incluye un gran número de propiedades útiles para los textos: Autor: Cristhian Salamanca 152 Estética para Entornos Virtuales UNAD margin: ajusta el margen alrededor de un elemento. Las márgenes pueden ser definidas por la base de un borde (una margen superior: margin-top: 2px; una margen inferior: margin-bottom: 10px;) padding: ajusta el relleno alrededor de un elemento HTML color: ajusta el color de primer plano background-color: ajusta el color de fondo o Segundo plano text-transform: transforma el texto a mayúscula, minúscula, etc. font-family: ajusta la familia de la fuente y le permite seleccionar fuentes adicionales font-weight: define el peso de una fuente desde negrita hasta ligera font-style: define si una fuente se muestra normal, italica u oblicua. font-size: ajusta el tamaño de la fuente Existen también otras propiedades, incluyendo el espaciamiento de palabra (wordspacing), espaciamiento de letras (letter-spacing), decoración del texto (textdecoration), etc. CSS ayuda a hacer las cosas un poco menos limitadas, lo que algunas personas sugieren. TEXTOS EN IMAGENES El texto creado como un GIF o JPEG se trata de una imagen como cualquier otra imagen en una página. Por otro lado el tamaño y el tipo de letra se mantendrán fieles a los diseñados originales (es una imagen fija de píxeles, después de todo), que puede ser ideal para títulos gráficos que necesitan utilizar una fuente que podría no estar disponible en muchos sistemas. Autor: Cristhian Salamanca 153 Estética para Entornos Virtuales UNAD Imagen 119. Texto Bitmap Por otro lado, los textos gráficos ocupan más memoria que los textos de estilo CSS-HTML, por lo tanto, hay un aumento en el tiempo de carga de la página. Si alguien utiliza las páginas web con las imágenes deshabilitadas, el texto no aparece, de modo que usted necesita hacer un buen uso de las etiquetas „alt‟. Los diseñadores a menudo encuentran difícil crear una página web sin necesidad de usar texto que se muestra como una imagen, especialmente con respecto a los títulos. Además, cada imagen debe tener una etiqueta „alt‟ correspondiente en el código HTML, que contiene el texto equivalente a la palabra o frase en el gráfico. Esto permite que los motores de búsqueda lean el texto y hace que la página sea accesible para discapacitados visuales. Una regla de oro que nunca debe ser olvidada es hacer el texto del <body> como una imagen o gráfico. Debido a la baja resolución de los gráficos web, puede llegar a ser difícil de leer. Además, no se puede copiar, y es de difícil actualización. TEXTO VECTORIAL Flash CS3 ofrece un nuevo abanico de posibilidades para mostrar el texto. La mayoría de los navegadores soportan el plugin de Flash, pero usted debe comprobar que esto se aplica a público objetivo, algunas organizaciones prohíben el uso de cualquier plugins en sus navegadores. Autor: Cristhian Salamanca 154 Estética para Entornos Virtuales UNAD Imagen 120. Texto vectorial hecho con flash Usted puede usar texto HTML en Flash, o usted puede dar estilo a una fuente en Flash usando un tipo de letra incrustado en el archivo SWF (el archivo creado al exportar un archivo terminado de Flash). También puede 'romper' una palabra, de modo que el texto se convierte en un gráfico vectorial y no dependería de una fuente incrustada. El texto HTML aparecerá de la misma forma que lo hace en un documento HTML, pero las otras dos opciones escalables proporcionan texto antialias. En general, se aplican las mismas reglas a Flash en cuanto a imagen: no utilizar textos basados en Flash por su bien. Es útil para las cabeceras y mostrar texto (y de hecho aventaja sobre las imágenes, porque los archivos son de tamaño más pequeños). Sin embargo no la use para el texto del cuerpo a menos que todo el sitio se base en Flash. CAPÍTULO 2 PRE-PRODUCCIÓN WEB LECCIÓN 1: INTERFAZ GRÁFICA DE USUARIO (GUI) Una interfaz gráfica de usuario es el vínculo entre el contenido de su web y el usuario, y como tal, su diseño es fundamental. El diseño GUI está generalmente asociado con el desarrollo de aplicaciones, pero es muy importante para los sitios web, especialmente los sitios basados en Flash. Autor: Cristhian Salamanca 155 Estética para Entornos Virtuales UNAD Un buen diseño de interfaz hará que un usuario se sienta en control. Ellos no tendrán que ir en busca de información, mientras que estén utilizando una aplicación o sitio web porque las opciones son, en cierta medida, anticipadas. De hecho, entre más compleja sea la aplicación, más necesidad habrá de una alta calidad en el diseño de la interfaz. Tal vez el aspecto más difícil del diseño GUI es el equilibrio entre el apoyo y la libertad. Los usuarios se sienten frustrados cuando sienten que una aplicación trata de hacer demasiado por ellos, pero estarán igualmente frustrados si se quedan solos deambulando en un desierto gráfico, donde nada parece familiar. INFORMACIÓN RELEVANTE Una interfaz de usuario exitosa presentará a los usuarios información actualizada, diciéndoles cosas tales como en qué etapa se encuentran de una tarea, por ejemplo, con un Flash preloader (precarga de Flash), ofreciendo datos relevantes. Los usuarios no deberían tener que buscar mucho la información, pues la información debe estar disponible a la mayor brevedad posible. El programa Dreamweaver es un buen ejemplo de la sencillez de una interfaz. Por ejemplo, cuando se desean usar las opciones para incluir bases de datos en una página web, Dreamweaver presenta las opciones claramente en el panel de "aplicación". Algunos de los mejores ejemplos GUI son los que menos se notan. Aplicaciones como Word están muy avanzadas en términos de desarrollo y han sido capaces de incorporar muchos problemas de los usuarios para crear mejores interfaces. Se debe tener cuidado en la utilización de colores para indicar comandos; alrededor del 8% de los hombres sufren de un tipo de ceguera de color. Es necesario que usted se apoye en un esquema o modelo de color. Muy a menudo, sólo una variación de la sombra puede ser suficiente para indicar lo que se necesita. También es fundamental darse cuenta lo que los colores transmiten, desde lo más evidente como azul = frío y rojo = caliente a más sutiles y profundos significados culturales en los distintos países. CONSISTENCIA La consistencia y la relativa inconsistencia son críticas. El clásico diseño de página web de tres marcos – uno para el título, otro para la barra de navegación, y el principal para el contenido - es un gran ejemplo de diseño GUI coherente. Estos elementos envuelven el contenido y siempre significan la misma cosa. Los mismos principios se pueden tomar fácilmente para usarlos en un sitio Flash. Por un momento piense acerca de lo que un usuario quiere ver. La consistencia es esencial, se trata de que cuando el usuario mire la interfaz, o de sentir algo(por ejemplo, la sensación de arrastrar un objeto) o de escuchar un sonido, cuando el usuario espera oírlo; la única forma de trabajar estas opciones para web es a Autor: Cristhian Salamanca 156 Estética para Entornos Virtuales UNAD través de las pruebas de usuario. El éxito de GUI se basa en el diseño de pruebas que generen una respuesta de usuario. Estas pruebas también le ayudarán a evaluar el nivel adecuado de elementos visuales (demasiados o pocos controles crean confusión). La inconsistencia es también muy importante: si bien puede ser útil para hacer que un grupo de funciones relacionadas tengan un aspecto similar, hace que funciones no relacionadas se vean distintas. Esto puede lograrse mediante el establecimiento de un discreto color de fondo detrás de ciertas áreas de texto para que se distingan de otras zonas. Una interfaz que es demasiado uniforme en sí misma puede ser confusa, ya que se vuelve difícil para un usuario reconocer las distintas características de la página. Al igual que con muchos elementos de diseño digital, a menudo son las palabras en lugar de las imágenes las que hacen que un producto pierda calidad. Altos estándares editoriales y unas excelentes habilidades para escribir son grandes activos para el diseño GUI. Una ayuda clara y mensajes de error pueden significar la diferencia entre la rápida resolución de problemas y aprendizaje rápido o la confusión y la desesperación. LAS PALABRAS Y LA LEGIBILIDAD Al igual que vimos en una lección anterior, la legibilidad es clave para comunicar el mensaje. La elección de las palabras es, evidentemente, el centro para los mensajes fácilmente entendibles, por eso no se olvide de los fundamentos de la legibilidad: combinaciones de colores mal acompañadas, fuentes inadecuadas que no tienen en cuenta posibles ajustes de resolución, y el mal uso de mayúsculas y minúsculas, servirán para enturbiar el mensaje. ACCESIBILIDAD La accesibilidad siempre ha sido un asunto clave del diseño; testigo de esto ha sido la fuente sans serif, que entró en uso común tan pronto como hubo necesidad de hacer un texto claramente legible en tamaños muy pequeños en los envases de alimentos producidos en masa y otros bienes. Sin embargo, es relativamente nuevo el uso y aplicación del término, haciendo que la accesibilidad para todos se haya convertido en una importante cuestión de diseño. Para ser justos, es sólo una cuestión de diseño muy de poderosa en lo que respecta a la Web. La industria de impresión probablemente ha ido tan lejos como ha sido posible, llevando información destinada a un público más amplio. En la Web, sin embargo, ha habido tantos problemas de diseño para hacer frente a lo largo de los últimos cinco años, que no es de extrañar que nuevos estándares han Autor: Cristhian Salamanca 157 Estética para Entornos Virtuales UNAD sido creados. Algunos sitios en particular, por ejemplo, los sitios web de las autoridades locales, se espera que apliquen estos estándares. Dos temas han sido identificados por el World Wide Web Consortium (W3C) y aceptados como estándar: una necesidad de garantizar „una elegante transformación‟, y hacer el contenido „comprensible y navegable‟. Es importante recordar el contexto de todo esto: se espera que el tipo de información disponible en muchos sitios web de las autoridades locales estén disponibles para todo el mundo, sin importar la discapacidad- incluidas las personas que sufren problemas de visión a causa de la vejez. Por lo tanto, todo debate estético debe ser suspendido hasta estar seguros que una web puede ser accesible a pesar de: „discapacidades físicas, sensoriales y cognitivas, limitaciones en el trabajo y barreras tecnológicas‟. Una vez estos parámetros se han alcanzado, „una elegante transformación‟ es asegurada. La clave de „una elegante transformación‟ parece ser la disposición de texto para que, por ejemplo, programas lectores de pantallas para personas con limitaciones visuales puedan ser usados para acceder a la información, y para las páginas no depender de un solo tipo de hardware. „Las páginas deben ser usables por las personas sin el uso del ratón, con pequeñas pantallas, pantallas de baja resolución, y pantallas en blanco y negro, sin pantallas, con solo voz, etc.‟ En términos de navegación, el objetivo del diseñador debería ser crear un sistema de navegación que no se base solo en „ideas visuales tales como mapas de imagen, barras de desplazamiento proporcional‟, ya que estos no tendrán sentido para cada visitante. Satisfacer estas demandas no es asunto fácil. Es sin duda un antídoto para el tipo de diseño egoísta que todavía domina en algunas zonas de la Web. La creación de un sitio exitoso que cumpla con todos los criterios de accesibilidad que figuran en el sitio de la W3C es probablemente mucho más que un reto que la mayoría de los diseñadores están acostumbrados a enfrentar. Los computadores Mac proveen un útil y consistente sistema de retroalimentación para los usuarios. Debajo en la imagen, se encuentra el „Menu‟ de un Mac conocido como el „Dock‟, desde allí el usuario abre las aplicaciones. Una aplicación en especial es la „Caneca‟ donde el usuario puede arrastrar y dejar allí los archivos que no necesite Autor: Cristhian Salamanca 158 Estética para Entornos Virtuales UNAD Imagen 121. El uso de elementos comunes dentro del computador ayuda mucho al desarrollo de la interfaz CONCEPTOS CLAVES DE GUI Consistencia Visual Todos los elementos de la Interfaz Gráfica deben ser regidos por las mismas reglas y convenciones, a menos que exista una razón muy fuerte para no hacerlo. Cree cuadrículas específicas para el sitio para ayudar a fortalecer la consistencia. Trabaje con la plataforma y las convenciones de estilo de la interfaz Reconozca las cuadrículas que existen para la plataforma Economía Visual No se ahoguen en el desorden de información: considere el uso de ventanas pop-up para aislar pequeñas cantidades de información (teniendo en cuenta todos los demás problemas GUI relacionados con pop-ups) Mantenga los controles al mínimo Concentrese en reducer la densidad de información, la cantidad de información presentada en una pantalla en cualquier momento Autor: Cristhian Salamanca 159 Estética para Entornos Virtuales UNAD Organización Espacial Estudie teorías de la percepción Asegurese que los elementos relacionados están vinculados y los que no están relacionados están desvinculados Navegación Considere lo que provee el enfoque inicial hacia el menú (por ejemplo, un color de fondo de contraste, delineación, uso de cajas, etc.) Investigue, por el testeo de usuarios, como su usuario espera ver los items colocados en el diseño Usos del color Para dar énfasis y llamar la atención Para facilitar la legibilidad Para mejorar la apariencia de la pantalla LECCIÓN 2: DISEÑO DE INFORMACIÓN Recordemos que un producto multimedia es una historia multimedia y que es una combinación de video, texto, audio, fotos y gráficas, presentadas en una forma interactiva no-lineal, donde cada parte de su información y el medio en que se presente es complementaria no redundante66. Para realizar con éxito ésta labor, debemos entender y comprender en primera instancia el diseño de información, el principio básico de todo proyecto multimedia. Es un proceso de definición, y se trata de aclarar los objetivos de comunicación, para luego arreglar el contenido en un diseño que sirva a los objetivos planteados. Es un paso muy crítico que incluye: 1. Definición de metas y objetivos 2. Define quien es la audiencia y lo la audiencia quiere 66 Estos mismos principios también se aplican al diseño Web por estar relacionados con interactividad. Autor: Cristhian Salamanca 160 Estética para Entornos Virtuales UNAD 3. Se decide como el producto llegará a su audiencia: medio 4. Se selecciona el software indicado 5. Se crea una lista de inventario de contenidos 6. Se crea una proyección y un plan 7. Se organiza el contenido 8. Se produce un flujograma Imagen 122. Sitio web de Coca-Cola Sitios Web de promoción, como Coca-Cola, tienen muy en claro la importancia del diseño de información, pues sus objetivos de información van enfocados a posicionarse en la mente de sus consumidores y así aumentar las ventas de sus productos. Es el diseño de información lo que nos permite interpretar la realidad que tenemos sobre nuestro proyecto, delimitando los alcances de diseño y de difusión. En síntesis, el diseño de información es: ¿Como debe contenido? ser organizado Tiempo, dinero, recursos Autor: Cristhian Salamanca el Organización Planeación 161 Estética para Entornos Virtuales UNAD ¿Que tecnologías se usaran para Programas crear el contenido multimedia? ¿A quién va dirigido el mensaje? Audiencia ¿Que debe cumplir al final este Objetivos producto? Tabla 1. Partes del diseño de Información A continuación en el artículo “Diseño de Información = Complejidad + Interdisciplinariedad + Experimentación” de Gerlinde Schuller, la autora demuestra que al diseño de información se le considera una disciplina. Gerlinde Schuller es la cabeza del Information Design Studio (http://www.theworldasflatland.net) en Amsterdam (NL). Sus trabajos han incluido el rediseño del directorio telefónico Holandés y sistemas de señalización para la Universidad Libre de Berlin. Durante los años 2001 hasta el 2005, ella enseñó Diseño de Información en la Academia Willem de Kooning en Rotterdam. Aún más, ella ha iniciado plataformas experimentales para el Diseño de Información. En el 2006 publicó el libro “Haciendo lo Imposible Posible”, en cooperación de la artista Claudia Weber. El Diseño de Información = Complejidad + Interdisciplinariedad + Experimentación67 Por Gerlinda Schuller. Marzo 14 de 2007 El diseño de información se explica sólo en tres idiomas en Wikipedia. El término ni siquiera figura en la Enciclopedia Británica. Esto demuestra que la disciplina está todavía muy lejos de haberse establecido, aunque su enfoque es tan antiguo como la historia cultural de la humanidad. El diseño de la información se centra en la aplicación del diseño gráfico eficiente para interpretar complejos conjuntos de información que se emplean en un enfoque interdisciplinario. El rápido aumento de la complejidad de los datos de nuestra vida cotidiana ha hecho que en las últimas décadas se considere el diseño de información como una disciplina específica de la comunicación visual con sus propios cursos de estudio, profesionales y teóricos. Complejidad 67 Disponible en: http://www.aiga.org/content.cfm/complexity-plus-interdisciplinarity-plus-experiment Autor: Cristhian Salamanca 162 Estética para Entornos Virtuales UNAD El diseño de información es la transferencia de datos complejos, la mayoría de las veces, en representaciones visuales de dos dimensiones que tienen por objeto comunicar, documentar y preservar los conocimientos. Se trata de hacer que todo el conjunto de hechos y sus interrelaciones sea comprensible, con el objetivo de crear la transparencia y eliminar la incertidumbre. En el mejor de los casos, las representaciones de la información logran una transferencia, derivando conocimiento adicional y creando interacción a través de la organización, combinación la densidad de los hechos. Al final no son representaciones de lo que uno ve, sino lo que uno sabe. Diseñar con sentido "la complejidad de la información" es una tarea que exige de los diseñadores de información una forma de pensar sistemática y una combinación de análisis, edición y capacidades gráficas. La principal prioridad consiste en abordar el contenido de la información. Por otra parte, los métodos de navegación, el orden y la abstracción pertenecen a los conocimientos básicos necesarios. La eficacia exige que el diseño de la información requiera el examen y resultado de la percepción humana y cultural; la demanda de la sostenibilidad exige que los profesionales de la visualización vayan siempre un paso por delante. Practicar el diseño de información implica ver el mundo a través de un filtro especial, con curiosidad analítica, para luego reunirse de nuevo en una forma simplificada y con una sensación de precisión y detalle. Interdisciplinariedad El diseño de información ha evolucionado gracias a una actitud interdisciplinaria. De hecho, las personas que han tenido una influencia duradera en el campo provienen de distintas disciplinas. Ellos han cooperado desde sus disciplinas a través de una relación de contenidos y han utilizado esos otros enfoques y métodos de pensamiento como inspiración. En adición a las representaciones gráficas innovadoras, que han inventado, sobre todo, nuevos métodos de orden, la navegación y la interacción. Han establecido normas esenciales para la interpretación de hechos complejos y han proporcionado nuevas ayudas para nuestra vida cotidiana. El diseño de información exige un enfoque interdisciplinario hacia la comunicación, por ejemplo, mediante la combinación de los conocimientos de diseño gráfico, 3-D, diseño de medios digitales, conocimiento científico, la teoría de la información y ciencias culturales. El diseño de información no solo se practica en los medios de comunicación en una manera determinada. Como tal el diseño de información tiene la intención de elaborar estrategias comunes de solución, junto con otras disciplinas. Por lo Autor: Cristhian Salamanca 163 Estética para Entornos Virtuales UNAD tanto, difiere del diseño gráfico clásico, que es en gran medida orientado a la "multidisciplinariedad", utilizando métodos de otras disciplinas pero sin establecer un marco conceptual unificado, donde se vinculen cada una de estas disciplinas. El diseño de información comprende la interdisciplinariedad como la síntesis de diferentes aspectos; la mera yuxtaposición de estos aspectos no es suficiente. La disciplina tiene sus raíces, entre otros, en la teoría de la información y la psicología de la percepción, y, por lo tanto es una combinación de la investigación y el diseño. Sin embargo, el aspecto de investigación del diseño de información va más allá de la habitual investigación sobre la adquisición de la información. Tiene más en común con la recopilación sistemática de información que se realiza en el ámbito académico o de la investigación periodística. Experimentar Las normas técnicas y gráficas son una parte importante del repertorio del diseño de información. Además de ser absolutamente objetivas, son a menudo indispensables para soluciones del diseño de información aplicado. Sin embargo, es muy frecuente que en el caso de que exista un sesgo subjetivo en el diseño de información, crean representaciones visuales subjetivas, que no pueden evitarse y hace que los modelos estándar a veces no logren su propósito. Por eso no existe y no hay ninguna fórmula mágica para un buen diseño de información. Muchas tareas y empresas hoy en día solicitan nuevos conceptos y soluciones gráficas, esto debido a la cantidad de información que hay en nuestros entornos y vida cotidiana, la cual está en constante aumento e incesantemente cambiando su estructura. ¿Cómo puede el repertorio del diseño de información ampliarse hacia el futuro? Hasta ahora, sólo la investigación aplicada se ha establecido como parte del diseño de información, una investigación funcional que, en vista de una aplicación en los negocios intenta resolver problemas específicos, a menudo problemas técnicos. Un examen libre de muchos sistemas complejos, que se encuentran a la par del enfoque del diseño de la información, por lo general no son atribuidos al diseño de información. En este caso la investigación experimental es descuidada o incluso mal vista. Sin embargo, es conveniente que el diseño de información se vuelva hacia la 'experimentación'. Es importante crear plataformas de experimentación interdisciplinaria- foros en los que la teoría y la investigación visual se fusionen y los nuevos contenidos relacionados y conceptos visuales se prueben en una forma lúdica. Un enfoque de investigación autónomo podría ayudar a reflexionar y ampliar los métodos del diseño de información. Esto Autor: Cristhian Salamanca 164 Estética para Entornos Virtuales UNAD también da un nuevo impulso a las soluciones de orientación comercial. Las disciplinas artísticas podrían proporcionar una fuente de inspiración y reflexión para este fin. La conciencia de que el diseño de información puede ser inspirador, esclarecedor, entretenido y funcional, tiene que ser logrado por parte de los consumidores y por muchos que lo practican. Es en consonancia con el tiempo actual, que el diseño de información hasta ahora puede ofrecer una múltiple interpretación del mundo. A continuación se mencionan los elementos básicos del diseño de información. LECCIÓN 3: OBJETIVOS El propósito del diseño de información, como se mencionó anteriormente, es hacer que el mensaje sea lo más fácil de entender para lectores y usuarios del proyecto. Por eso se necesitan los objetivos una vez el tema ha sido seleccionado. Los objetivos ayudan a: 1. Dirigir el diseño del producto multimedia 2. Definir el resultado final 3. Dar una medida sobre el éxito o fracaso del proyecto Cada proyecto multimedia comienza con ideas preconcebidas, que representan aquello que está en la mente del autor o del equipo de trabajo, a esto le llamaremos Suposición, pues todo el tiempo, desde que generamos la idea, realizamos premisas, presuposiciones o postulados sobre el tema seleccionado. Por eso para plantear los objetivos se deben escribir todas las suposiciones sobre el tema y el proyecto, esto implica: a. Escribir ideas y conceptos sobre el proyecto. b. Listar el material que se considera debe ser incluido en la multimedia c. Las necesidades de información de la audiencia; sus habilidades; sus actitudes; intereses y preferencias. En otras una primera descripción sobre el grupo de personas a quienes dirigiremos la multimedia educativa. Autor: Cristhian Salamanca 165 Estética para Entornos Virtuales UNAD Luego, debemos diseñar y escribir los objetivos para que guíen el diseño del guión y el diseño visual, funcionalidades, etc., de nuestro proyecto. Si los objetivos planteados se dirigen a que los usuarios o visitantes de nuestro proyecto: 1. Actúen o Compren, implica que el resultado final deberá tener: a. Características y beneficios bien definidos b. Número de teléfono gratuito o formularios de contacto c. Formularios interactivos para colocar una orden de compra 2. Busquen respuestas, implica que el resultado final deberá tener: a. Referencia de estilo organizada b. Un acceso rápido c. Un Índice de contenidos 3. Entiendan, implica que el resultado final deberá tener: a. Explicaciones conceptuales como: i. Secciones de “Como trabaja…” ii. Videos iii. Ilustraciones iv. Gráficas v. Gráficas estadísticas vi. Simulaciones 4. Tengan una experiencia, implica que el resultado final deberá tener: a. b. c. d. Interactividad de medio o alto nivel Controles y eventos Lugares y sonidos reales Un diseño llamativo 5. Aprendan y retengan conocimiento, implica que el resultado final deberá tener: a. b. c. d. e. f. Claridad Simplicidad Repetición Retroalimentación Reforzamiento Dirección 6. Divertirse, implica que el resultado final deberá tener: Autor: Cristhian Salamanca 166 Estética para Entornos Virtuales UNAD a. b. c. d. e. Variedades Sorpresas Aleatoriedad Humor inteligente Juegos El siguiente cuadro puede ser muy útil para describir las suposiciones- hipótesisiniciales del proyecto a desarrollar, terminando con la definición correcta de lo objetivos. Suponga que usted ha sido delegado para diseñar un Portafolio Interactivo de la Empresa dónde trabaja. Lo primero que debemos hacer es escribir todas las ideas iniciales del proyecto- suposiciones- en cuanto al contenido, la audiencia, para luego terminar con los objetivos. Portafolio Interactivo Suposiciones (hipótesis) Contenido o Descripción de los productos y servicios. o Detalle de la gestión e historia de la empresa. o Misión, Visión de la empresa o Se necesita el perfil de las unidades de negocio de una manera concisa. Audiencia o Accionistas, clientes potenciales y vendedores. o Son a su vez personas muy ocupadas y no han solicitado éste material. o Ellos no tienen información detalla sobre la empresa, por eso los objetivos deben ser expuestos con claridad. Otros o Se necesita coordinar los diferentes mensajes que la gerencia quiere comunicar. o Se debe incluir la imagen corporativa. Objetivos o o o o Proyectar una imagen tecnológica actualizada de la empresa. Mostrar los logros singulares de gran importancia para la empresa. Crear un producto atractivo para quienes lo observen. Proyectar una imagen de una compañía de éxito a nivel mundial, y que es una empresa socialmente responsable. Tabla 2. Escribiendo las suposiciones Autor: Cristhian Salamanca 167 Estética para Entornos Virtuales UNAD Definir los objetivos es la labor más crucial e importante, están estrechamente relacionados con la audiencia. Si la audiencia es muy grande, el objetivo general se complicaría: “Los usuarios de mi producto son básicamente todas las personas” Esto suena muy familiar, por eso es muy importante: 1. Saber ¿Cuál es el objetivo principal? Debe responderse a la siguiente pregunta: ¿Por qué el usuario usará nuestro producto? – Entretenimiento, información, transacción. 2. Saber ¿Cuál es el contenido? Si es visual, editorial, de análisis comparativo, educativo, experimental. LECCIÓN 4: AUDIENCIA Las condiciones bajo las cuales se usa un producto interactivo influencia su diseño y su contenido. ¿Cuál de los siguientes productos es diferente? 1. Un CD-ROM con un demo de ventas colocado en un portátil 2. Un kiosco de pantalla táctil con información acerca de una exhibición en un museo. 3. El juego de “Comandos Asesinos”. 4. La vida y obra de Shakespeare en CD-ROM Piense por un momento y analice cual es diferente, antes de leer la respuesta. o ¿Qué los une? o ¿Qué los separa? Escriba su respuesta en alguna parte. Es muy probable que su respuesta sea: Autor: Cristhian Salamanca 168 Estética para Entornos Virtuales UNAD “COMANDOS ASESINOS”, y es muy probable que su decisión se haya basado por el tema y por ser un juego. Pero en realidad ésta no es la respuesta. El producto que es diferente es el “CD-ROM con un demo de ventas colocado en un portátil”; básicamente porque el producto es controlado por una sola persona, el vendedor, y es quién controla la información que verá un cliente potencial, luego el usuario final no tiene control sobre el producto, lo que implica un tipo diferente de interacción. En los otros casos, el usuario final interactúa con los productos. Las audiencias son muy variadas, No conocer la audiencia puede llevar al uso de recursos de manera inapropiada, que pueden ser desde tiempo hasta dinero. Para conocer la audiencia se debe responder a las siguientes preguntas: o ¿Quién es la audiencia? Edad, sexo, aspecto cultural o ¿Qué tan conocedores son los usuarios acerca del uso de la tecnología a usar en el proyecto? o ¿Tienen los usuarios el último plugin para visualizar el producto final? El caso más usual es el uso de la tecnología que ofrece Flash ® Adobe ®, que requiere la instalación del plugin FlashPlayer®. o Si el proyecto es para Web en línea ¿Cuál es la velocidad con que se conectan los usuarios finales a la red? o Si el proyecto es para CD-ROM, DVD-ROM, fuera de línea ¿Tienen los usuarios los requisitos mínimos del sistema? (Memoria RAM, procesador) Para responder a estas preguntas, debe haber un acercamiento a su audiencia, una encuesta puede ser muy útil. Estos datos también tendrán mucha influencia en el diseño final de nuestro producto, pensemos por un momento que son niños; este simple dato define el estilo gráfico y visual que debe tener el producto final, y difiere mucho si la audiencia es adulta, sin tener en cuenta que decir niños es aún un grupo objetivo muy grande. El siguiente cuadro muestra una forma de compilar toda la información de la audiencia y el ambiente en que se espera mostrar un producto multimedia. Audiencia ¿Edad y Distribución de la edad? ¿Tamaño del grupo? Autor: Cristhian Salamanca 169 Estética para Entornos Virtuales UNAD ¿Género? Masculino, Femenino, Mixto ¿Qué tan familiarizados están con el tema? ¿Nivel educativo? ¿Tienen experiencia con los computadores? Uso del producto ¿Qué reacciones espera de su audiencia? ¿Será usado en casa? ¿Será usado en el plantel educativo? ¿Será controlado por una sola persona? ¿Será proyectado a un grupo? ¿Ruidoso? ¿Silencioso? Ambiente ¿Claro o oscuro? ¿Impredecible? ¿Cuales computadores son ideales? Equipo Tabla 3. Condiciones para un proyecto web Como vemos, la audiencia determina no solo el nivel de lenguaje visual y escrito del producto, sino además el lugar dónde se usará el producto. Por ejemplo, podemos decidir el uso de una banda sonora para nuestra multimedia con el fin de ambientar al usuario al momento de ver imágenes de Paris, Francia; pero si el lugar de proyección es una plaza pública ruidosa, se perdería el gran esfuerzo colocado en adicionar audio y sincronizarlo. Por eso se debe ser meticuloso y saber anticipar el resultado final. Un sitio Web como el del vodka Absolut www.absolut.com, muestra lo importante que es la definición de la audiencia, pues así mismo se elaborará el mensaje. En su sitio Web www.absolut.com es muy común encontrar una pregunta o un formulario para que los usuarios ingresen su edad, y así acceder a la parte interna del sitio. No deben ser menores de 18 años. Autor: Cristhian Salamanca 170 Estética para Entornos Virtuales UNAD Imagen 123. Imagen del sitio www.absolut.com. Al usuario se le pide que ingrese sus datos Antes de comunicar, debemos ajustar nuestro mensaje, y eso lo logramos cuando conocemos a quienes nos vamos a dirigir. LECCIÓN 5: HERRAMIENTAS Lo que finalmente se diseñe, depende del medio- Internet, CD-ROM, DVD-ROM- y la herramienta que se use. Es por eso que es muy importante definir el medio de entrega y la herramienta de autoría. EL MEDIO DE ENTREGA Con anterioridad se mencionó la importancia de los medios masivos de comunicación, divididos en dos grupos: tradicionales y digitales. Y también sabemos que el medio es la tecnología usada para hacer llegar el producto hasta la audiencia. Este factor afecta el diseño final, pues si nuestro medio a usar es público o privado tendrá ventajas y restricciones como: 1. Medio público Internet a. Posee estándares y el producto final debe estar acorde a ellos Autor: Cristhian Salamanca 171 Estética para Entornos Virtuales UNAD b. Existen diferentes tipos de navegadores para Internet: Firefox, Internet Explorer, Safari, Opera. c. El producto final debe ser compatible con los sistemas operativos y conectividad. d. Hay límite por el peso final de los archivos. e. El producto puede ser único. 2. Medio privado CD-ROM, DVD-ROM a. Posee estándares y el producto final debe estar acorde a ellos. b. El producto final debe ser compatible con los sistemas operativos. c. No hay límite por el peso final de los archivos. d. El producto puede ser único. e. Las aplicaciones multimedia que se van a distribuir en formato CDROM se liberan de muchos de los problemas de otras aplicaciones como las páginas Web. En los CD-ROM tampoco será crítico el tamaño de las imágenes o la inclusión de otros elementos multimedia. Su velocidad de carga será muy superior en comparación con la velocidad de carga a través de Internet. La selección del medio es una variable considerable, y está relacionada con los objetivos del proyecto y los recursos de nuestro público objetivo. Otro punto de variación al escoger el medio, es por ejemplo que en los formatos CD-ROM “respecto a los tipos de letra, se puede optar por usar algún tipo propio o poco usual, ya que estará incluido en la propia aplicación. Esto no invalida la regla de no usar más de dos tipos distintos de letra en una misma página. Tampoco cambia nada respecto a los métodos correctos de presentar un texto en una pantalla (separación del texto en párrafos y pantallas distintas, evitar el uso de mayúsculas y cursiva, etc.)”68. Acerca del diseño de la experiencia y la interactividad y estilo de los medios: Publico 68 Privado Disponible en: http://www.unal.edu.co/documentos/servicio_web/usabilidad_para_web.pdf Autor: Cristhian Salamanca 172 Estética para Entornos Virtuales UNAD Diseño de la experiencia del usuario El audio y video pueden estar restringidos El audio y el video pueden estar incluidos sin restricciones ni problemas. Estilo e interactividad Los controles interactivos en la pantalla Los controles interactivos en se limitan por el espacio dejado en el pantalla tienen un mayor espacio. navegador. la Tabla 4. Comparación de los medios públicos y privados HERRAMIENTAS DE AUTORIA Las herramientas de autoría son aquellas que nos permiten desarrollar contenidos multimediales con el uso de un lenguaje de programación, que permite la interacción entre el contenido y el desarrollo visual para así comunicar un mensaje. Entre las herramientas de autoría más comunes tenemos 4 grupos: 1. Herramientas de autoria multimedia para publicación fuera-de-línea. 2. Herramientas de autoria multimedia para publicación en-línea. 3. Software para documentos electrónicos 4. Software de presentación. Cada grupo posee características propias, que se analizaran a continuación: 1. Publicación fuera-de-línea. Herramientas Multimedia Ejemplos Adobe Director Flash MX, 8, CS3, CS4 TribeWorks Autor: Cristhian Salamanca 173 Estética para Entornos Virtuales UNAD Descripción Características típicas Un programa que ayuda escribir hipertexto o aplicaciones multimedia. Estas herramientas permiten crear una aplicación final vinculando objetos, como parágrafos de texto, una ilustración o una canción. Secuencias de comandos Efectos visuales Transiciones Desventajas típicas Texto y sonido Aprendizaje Tabla 5. Publicación fuera de linea 2. Herramientas de autoría multimedia para publicación en-línea. Herramientas de Publicación On-line Ejemplos MSOffice HTML, PHP, ASP, XHTML Flash MX, 8, CS3, CS4 Director Descripción Características típicas Authorware Son herramientas que permiten crear hipertexto y multimedia para Internet. Proveen formatos estandar y su base el código HTML. Secuencias de comandos Efectos visuales Transiciones Texto y sonido Bajo nivel de conocimientos técnicos Autor: Cristhian Salamanca 174 Estética para Entornos Virtuales UNAD Interlaces Aprendizaje Desventajas típicas Limites del medio: peso, carga y descarga Plugins Tabla 6. Publicación en linea 3. Software para documentos electrónicos Electronic Document Software Ejemplos Adobe Acrobat Professional y Reader Un software centrado en documentos con un enfoque en interactividad, diseñado para ver, crear, manipular documentos en PDF. Se permite inclusion como parte del documento páginas Web, videos y animaciones. Formato Estandard. Descripción Características típicas Integra texto, gráficos y video. Zoom y búsqueda de texto. Personalizar la interacción. Desventajas típicas Tabla 7. Documentos electrónicos 4. Software de presentación. Software de Presentación Ejemplos Flash Powerpoint Director Autor: Cristhian Salamanca 175 Estética para Entornos Virtuales UNAD Descripción Un programa que ayuda a crear diapositivas y luego a proyectarlas como presentaciones. Características típicas Integra audio y video Efectos especiales Desventajas típicas La interactividad está limitada a la navegación. Los efectos y controles pueden no ser personalizados. Tabla 8. Documentos electrónicos CAPITULO 3 PRINCIPIOS DEL DISEÑO WEB LECCIÓN 1: PLANEACIÓN, ORGANIZACIÓN Y DIAGRAMAS DE FLUJO PLANEACIÓN Una buena planeación es importante. Crear una lista que contenga los contenidos es un buen inicio; algo que se vio en la introducción al storyboard. Planear implica: 1. Definir las tareas a realizar 2. Saber cuánto tiempo va a tomar desarrollarlas 3. Saber cuánto dinero va a costar 4. Saber si se cuenta con el equipo y conocimientos necesarios 5. Saber si se cuenta con un equipo de trabajo Cualquier decisión que se tome durante la planeación o el desarrollo del proyecto tiene sus efectos. Por ejemplo: La decisión de: Necesitar música original para el portafolio interactivo de la compañía Autor: Cristhian Salamanca 176 Estética para Entornos Virtuales UNAD Implica: o Contratar a un compositor o Contratar músicos o Rentar un estudio para grabar o Contratar a un ingeniero de sonido o Mezclar y editar el audio o Obtener hardware para digitalizar el audio o Obtener software para digitalizar el audio o Sincronizar la música con la parte visual Planear también implica costear el proyecto. A continuación un ejemplo: Tarea # de Personas Director del Proyecto Investigación Escritura Edición Diseño de Interfaz Gráficas Producción Soporte técnico de desarrollo Soporte técnico publicación Usuarios para testeo Total 1 1 1 1 1 1 1 1 1 5 Valor día Tabla 9. Como costear un proyecto Autor: Cristhian Salamanca # de Días 5 4 5 1 4 4 5 3 3 0.5 Total (= # de personas x valor del día x # de días) 177 Estética para Entornos Virtuales UNAD Planear también implica saber con que recursos se cuenta y cuales se necesitan: Sección Introducción Tour de la Compañía Contenido Tarea Logo Digitalizar Imagen de Fondo Obtener Narración Grabar Música Video Digitalizar Grabar y digitalizar Narración Grabar Música Entrevista del Video de Preguntas y Gerente Respuestas Perfil de los Video de cada uno con empleados biografía Se tiene Se necesita X Digitalizar Escribir, grabar y digitalizar Investigar, grabar y digitalizar X X X X X X X X Tabla 10. Un proyecto interactive con cuatro secciones ORGANIZACIÓN Organizar la información es algo más clasificar esa misma información en categorías. En el corazón de cada proyecto de diseño hay preguntas muy importantes cargadas de valor: "¿Con que prioridad se debe organizar este material?" "¿Qué necesita saber la audiencia sobre este tema?" Y "¿Qué quieren ellos hacer con la información?" Se tiene que ver y entender qué tipo de producto se va a crear, si es totalmente nuevo, o se basa en otro producto como resultado: informes anuales, folletos, Web; productos donde fácilmente usted puede encontrar una muy buena estructura y no hay necesidad de organizar el contenido. Ahora es tiempo para definir el contenido. Para lograr éste objetivo se deben seguir los siguientes pasos: Autor: Cristhian Salamanca 178 Estética para Entornos Virtuales UNAD 1. Divida la historia de su tema seleccionado en sus partes no-lineales lógicas, para ello haga una lista con todas las posibles categorías de contenido de su historia multimedia. 2. Agrupe todas las categorías de contenido por grupos donde el tema sea similar. Tenga en cuenta que en lugar de pensar en “parte 1”, “parte 2”, “parte 3”, piense en “ésta parte”, “otra parte”, “otra parte más”, con el fin de no pensar en términos lineales. 3. Perfeccione las categorías en cada grupo, borrando las que sean redundantes. 4. Aplique el medio- video, texto, fotos, audio, gráficas- a cada uno de los contenidos de la historia, teniendo en cuenta: 1. Decida que partes del contenido son mejor en video. Esta es la mejor forma de llevar al visitante al punto central de la historia. 2. Decida que partes trabajan mejor como fotografías estáticas. Las fotos son la mejor manera de hacer énfasis, son mucho más dramáticas. Éstas combinadas con audio son bastantes fuertes y efectivas. Fotografías panorámicas o de 360 grados combinadas con audio hacen que el lector se vea inmerso en la historia. 3. El audio trabaja mejor con video o con imágenes o solo. Manejar bien el audio ya sea con fotos o video, hace que el contenido sea más intenso y real. Un mal audio le quita peso al video y a las imágenes. 4. ¿Qué parte de la historia funciona mejor con animación? Una animación muestra como funcionan las cosas. Pueden ser en 3D, 2D, y sus alcances son únicos. 5. ¿La historia necesita un mapa? Es un mapa que muestra la locaciónGoogle Maps- o un sistema geográfico de información. O un mapa de contenidos del producto interactivo (Recuerde el mapa de Lewis & Clark). 6. ¿Qué parte de la historia es texto? El texto puede ser usado para describir la historia que estamos narrando; para describir procesos; generalmente el texto se usa cuando el contenido a mostrar no cuenta con fotos, video, audio o animaciones. 7. Cerciorarse que el contenido de cada medio sea complementario y no redundante. Un poco de superposición de medios no es malo. También es importante realizar la superposición entre los contenidos no-lineales, Autor: Cristhian Salamanca 179 Estética para Entornos Virtuales UNAD para que el lector se sienta motivado a explorar otras partes de la historia. Caso similar al de Lewis & Clark. 8. Interactividad significa darle al lector la entrada y control al usuario en la historia. Al hacer la historia no-lineal, se ha introducido un elemento de interactividad, porque el lector puede decidir que elementos ver y como los quiere ver. Por ejemplo en muchas Web se han incluido foros y chats, esto le permite al usuario tener entrada a la historia. Por ejemplo, el sitio de www.eltiempo.com permite a sus usuarios escribir comentarios relacionados con los artículos, así como la participación en foros. 5. Arregle los grupos resultantes en una estructura Cuando la historia multimedia esté lista y dividida en los bloques de contenido, se debe reensamblarla con el uso de un storyboard. EJEMPLO. Como el objetivo principal es educativo, usaremos el rol del profesor para la elaboración del ejemplo. El mismo ejemplo podrá ser luego replicado en el tema de su proyecto. El mapa mental realizado para el tema seleccionado en la lección 5 del capítulo 2 es una buena base para retomar, gracias a los temas que giran alrededor del tema principal. Objetivo: Realizar una presentación interactiva para uno o varios profesores de una institución educativa. 1. Como el objetivo es realizar un producto multimedia alrededor de los profesores, debemos listar todas las posibles categorías de contenido que tiene el rol de un profesor: o Sueldo o Primas de servicios o Vacaciones o Clases o Ética o Las prestaciones médicas o Terminación del contrato Autor: Cristhian Salamanca 180 Estética para Entornos Virtuales UNAD o Salud o Políticas del lugar de trabajo o Seguro de vida o Calificaciones del trabajo de los estudiantes o Las horas de trabajo 2. Lo siguiente es agrupar las categorías por grupo: o Grupo 1: o Vacaciones o Horas de trabajo o Grupo 2: o Sueldo o Primas de servicios o Grupo 3: o Las prestaciones médicas o Salud o Seguro de vida o Grupo 4: o o o o o Clases Ética Terminación del contrato Políticas del lugar de trabajo Calificaciones del trabajo de los estudiantes Cada grupo está formado por categorías que tienen un tema o contenido en común. Ese tema o contenido común se convertirá en una meta-categoría, que agrupa a las categorías: o Grupo 1: Tiempo o Grupo 2: Dinero Autor: Cristhian Salamanca 181 Estética para Entornos Virtuales UNAD o Grupo 3: Salud o Grupo 4: Trabajo 3. A continuación elimine la redundancia, si existe, o perfeccione los nombres de las categorías. El Grupo 3: Salud, existe una categoría llamada también Salud; en este caso podríamos modificar la categoría de Salud por Servicios de Salud y dejar intacta la meta-categoría. Por ejemplo: o Grupo 3: Salud o Las prestaciones médicas o Salud cambiar por Servicios de Salud o Seguro de vida 4. Decida el medio a aplicar en cada una de las categorias. o Grupo 1: Tiempo o Vacaciones > Texto y Animación o Horas de trabajo > Texto o Grupo 2: Dinero o Sueldo > Texto o Primas de servicios > Texto o Grupo 3: Salud o Las prestaciones médicas > Video o Servicios de Salud > Video o Seguro de vida > Presentación o Grupo 4: Trabajo o o o o o Clases > Cuadros con los horarios Ética > Texto y Animación sobre valores éticos Terminación del contrato > Texto Políticas del lugar de trabajo > Texto Calificaciones del trabajo de los estudiantes > Texto 5. Lo siguiente es ordenar cada grupo en una estructura. Existen dos opciones, y el uso de alguna de ellas depende de su escogencia. La Autor: Cristhian Salamanca 182 Estética para Entornos Virtuales UNAD primera opción es organizar los grupos en una estructura hipertextual; la segunda opción es usar una estructura jerárquica como un organigrama o mapa del sitio. En nuestro ejemplo usaremos la segunda opción; el orden no implica un orden secuencial, pero es con el fin de mantener la claridad. Imagen 124. Estrcutura en la que se ordenan las metacategorías Cristhian Salamanca © 2008 Con ésta estructura, se logra visualizar la forma lógica con que se desarrollaría el producto final, además permite crear un flujo de la información. EL FLUJOGRAMA Un diagrama de flujo es una representación gráfica que muestra el flujo entre las partes de un programa, entre las personas en una organización, o las páginas de una presentación. Los elementos que se usan en un flujograma están representados por iconos simples (círculos, rectángulos, diamantes) para permitir al espectador centrarse y prestar atención en la forma en que el usuario se moverá a través de los pasos de un proceso. Un diagrama de flujo indica las secuencias y los puntos decisión, así como la puesta en marcha y parada de puntos. Es más fácil de comprender visualmente las relaciones en un diagrama de flujo que en una descripción verbal, por lo que tales diagramas nos ayudan a evitar dejar pasos por fuera de un proceso. Los diagramas de flujo representan la forma cómo funcionan las cosas, también logran determinar que está al alcance del usuario y que no. Los símbolos que se usan en un diagrama de flujo son: Autor: Cristhian Salamanca 183 Estética para Entornos Virtuales UNAD o Rectángulos redondeados: indican inicio y final o Rombos: indican decisión, condiciones o decisiones o Rectángulos rectos: procesos o Flechas: el flujo de información A continuación un pequeño flujograma del caso de la multimedia para los profesores. Imagen 125. Ejemplo de flujograma Cristhian Salamanca © 2008 Autor: Cristhian Salamanca 184 Estética para Entornos Virtuales UNAD Este flujo será muy útil para entender la manera en que mostraremos la información y podremos crear las reglas de control desde y hacia el usuario. LECCIÓN 2: DISEÑO INTERACTIVO El diseño interactivo, en un producto para computador significa que el usuario, y no el diseñador, controla la secuencia, determina el ritmo, y más importante aún, que mirar y que ignorar. En otras palabras el usuario está a cargo. El punto de partida para el diseño interactivo es cuando se decide exactamente dónde y cómo darle control a los usuarios. En este proceso, se transforma el flujograma en un storyboard o guión multimedia, que muestra las rutas y los controles a implementar. El proceso para diseñar la interactividad de nuestro producto incluye: 1. Crear un sistema de guía para orientar a los usuarios. 2. Usar una metáfora para el diseño. 3. Diseñar la navegación y rutas de acceso. 4. Aplicar los principios de usabilidad 5. Aplicar los principios de funcionalidad Esta interactividad se liga constantemente con el diseño visual, que incluye: 1. Definir que sucederá en cada pantalla. 2. Diseñar los controles de interacción. 3. Crear un guión multimedia o storyboard. Cuánto y qué tipo de interacción se necesita realmente depende del contenido en sí mismo: ¿qué tipo de experiencia interactiva desea entregar? ORIENTACION La primera pantalla necesita comunicar: 1. Que verá el usuario 2. Que va a hacer Autor: Cristhian Salamanca 185 Estética para Entornos Virtuales UNAD 3. Que va a experimentar Lo que se necesita es tener un balance entre las imágenes y las palabras para que las mismas provean una guía útil. Si por ejemplo se tienen las 3 siguientes imágenes, por su diseño y claridad, se puede deducir que quieren comunicar: Imagen 126. Imagenes que orientan La primera imagen bien podría significar “cafetería”; la segunda “periódico” o “ciudad”; la tercera sin duda alguna puede significar “cine”. Lo anterior significa que nuestro diseño visual no debe convertirse en una torre de babel, sino que debe ser muy claro. En el diseño Web o Multimedial tenemos varios ejemplos: Si el objetivo del sitio es la venta de imágenes y símbolos gráficos, luego la interfaz debe decirlo todo al primer vistazo. GettyImages es de las Web más visitadas para adquirir imágenes. “Getty Images crea y distribuye las mejores y la más amplia colección de imágenes del mundo, y busca ponerlos a disposición de la forma más accesible las 24 horas del día, todos los días. Desde imágenes de creación contemporánea hasta imágenes de noticias, deportes, entretenimiento y archivo de imágenes, nuestros productos se encuentran cada día en toda la gama de los tradicionales y los medios de comunicación digitales de todo el mundo”69. Al entrar a su Web http://www.gettyimages.com/ a primer vistazo se determina que es un sitio que tiene que ver con imágenes con un componente de búsqueda inmediato. 69 Disponible en: http://company.gettyimages.com/section_display.cfm?section_id=244 Autor: Cristhian Salamanca 186 Estética para Entornos Virtuales UNAD Imagen 127. Getty Images O si se desea vender Grecas, el sitio de Starbucks muestra una forma eficiente y al punto para conocer las que ellos venden, sus precios y características. Autor: Cristhian Salamanca 187 Estética para Entornos Virtuales UNAD Imagen 128. http://www.starbucks.com/brewsale METAFORAS En una lección anterior se mencionó que crear un proyecto multimedia, es como ser el director de una obra de teatro, dónde se cuenta con un escenario, actores, audio, efectos especiales, etc., y es el director quién decide que sucede y en que momento. Escoger, definir o diseñar una metáfora para aplicar en el diseño visual del producto multimedia ayuda a que el mensaje principal llegue simple sin problema. Ésta metáfora definirá la forma de navegación. Al momento de definir una metáfora, lo primero en que siempre se piensa es en el uso de un mapa de imágenes, algo normal, pero que sin duda alguna no cumple con el objetivo general de comunicación implícito en un proyecto multimedia. Por ejemplo, si se quisiera realizar una Web o producto multimedia para un catálogo de productos de oficina, se podría usar un mapa de imágenes que sirve de representación de cada uno de los variados productos, se tendría: Autor: Cristhian Salamanca 188 Estética para Entornos Virtuales UNAD Imagen 129. Mapa de Imágenes Aunque un mapa de imágenes representa y guía al usuario hacia el contenido, con o sin palabras, las imágenes no están colocadas en ningún contexto. Además cualquier grupo de imágenes pueden ser un mapa de imágenes. Por ésta razón se necesita llegar al diseño de una metáfora. Una metáfora es un tipo de mapa de imágenes, pero dichas imágenes se encuentran en un contexto significativo, presentando la información en términos visuales con armonía: o Como un libro para representar un objeto o Un edificio para representar una locación Lo importante es diseñar la interfaz con elementos que las personas usan por fuera del entorno del computador. Uno de los productos más fuertes en el uso de metáforas hoy en día es Google Earth, el software de distribución gratuita de Google, con el cual se logran visualizar fotos e imágenes satelitales de la tierra, más muchos servicios adicionales como observar rutas, avenidas, tráfico, clima, lugares de interés, restaurantes, e incluso le permite a usuarios alrededor del mundo subir fotografías tomadas por ellos, indicando las coordenadas del lugar exacto; hoy en día también Autor: Cristhian Salamanca 189 Estética para Entornos Virtuales UNAD se ha implementado la opción de añadir objetos 3D, que sirven para modelar ciudades como las de París, Francia. La metáfora aquí usada es la Tierra misma, a través de ella se puede navegar. Imagen 130. Interfaz de Google Earth, el programa permite navegar a través de la Tierra misma Saber si la metáfora que hemos escogido es la correcta, merece responder a las siguientes preguntas: 1. ¿Ayuda a los usuarios a entender que deben hacer? 2. ¿Es apropiada para el contenido? 3. ¿Hay algunas partes del contenido que claramente no encajan en la metáfora? 4. ¿La metáfora crea expectativas que se pueden cumplir? 5. ¿La metáfora crea expectativas que no se pueden cumplir? LECCIÓN 3: NAVEGABILIDAD Una vez la metáfora esté definida, se debe empalmar con el concepto de navegabilidad. Autor: Cristhian Salamanca 190 Estética para Entornos Virtuales UNAD Para lograr este objetivo, el proyecto interactivo debe proporcionar un conjunto de recursos y estrategias de navegación diseñados para conseguir un resultado óptimo en la localización de la información y en la orientación para el usuario. Una buena navegación permitirá: 1. Reducir el viaje del usuario 2. Minimizar la redundancia Tres preguntas se deben responder: o ¿Dónde estoy? o ¿Dónde he estado? o ¿Dónde puedo ir? Al final, como editor de contenidos multimediales educativos, se busca crear interfaces que ayuden a las personas entender donde están, hacia donde pueden ir, y como pueden llegar a otros puntos. Es pues la navegabilidad un principio fundamental. La navegabilidad depende de la estructura del sitio Web o el proyecto multimedia. En la Web Trazos Web se nos ofrece un panorama más amplio sobre la importancia de la navegabilidad: “La Navegabilidad Web (o multimedia) se define como la forma en que está estructurado tu sitio, tal que el usuario tenga la facilidad de encontrar todo muy rápidamente. Un sitio con buena navegabilidad es también un sitio cuyas páginas cargan rápidamente, lo que supone un buen ahorro de tiempo y le da mucho valor a nuestra Web. ¿Cómo mejoramos la navegabilidad de nuestro sitio? Solo tenemos que implementar en nuestros sitios lo que explico a continuación para que el usuario sepa a donde va y a donde tiene que ir en nuestro sitio: o Crea un Mapa del Sitio. Siempre es mucho mejor tener en nuestras páginas Web, sobre todo con sitios Web amplios, un mapa del sitio, que nos permitirá enseñarles a los usuarios el lugar donde se encuentra la información que buscan. Autor: Cristhian Salamanca 191 Estética para Entornos Virtuales UNAD o Crear un menú superior. A esto se le llama navegación recursiva, la cual consiste en el menú superior que deberemos tener en todas las páginas de nuestro sitio y que facilitará la ubicación para nuestro usuario. Casi siempre en este menú se encuentra la opción “Home” o “Inicio” y todo lo que creamos conveniente que sea útil para el usuario, como por ejemplo, la opción de contactarse con el administrador del sitio “Contacto” o un enlace al mapa del sitio. o Distribuir la información de manera lógica. Con esto conseguimos que el usuario tenga todo al alcance de pocos clicks. Pues si no es así, el usuario tendría que cargar muchas páginas en el navegador para ir a un sitio específico de nuestra Web lo que conllevaría una gran perdida de tiempo. La mejor opción sería lograr de alguna forma en que se pueda llegar a todas las páginas de nuestro sitio desde cualquier página. o Crea un directorio dinámico. Un directorio dinámico consiste en una pequeña línea que nos permite saber en que lugar de la página Web nos encontramos y por el que vamos navegando. Nos muestra los directorios y subdirectorios por los que hemos pasado hasta llegar a la página actual. siempre van acompañados de enlaces que nos permiten volver atrás en cualquier momento. Esto le agrega un gran valor a nuestro sitio Web. o Incluye, en lo posible, imágenes de bajo peso. Las imágenes siempre vuelven un poco lento la carga de una página Web, así que mientras estas tengan un peso más bajo, más rápido cargará el sitio. Una imagen no debería pesar más allá de los 7Kb-15Kb. Actualmente existen en el mercado muchos programas que reducen el peso de las imágenes para adecuarlos al Web. La navegabilidad es muy importante en nuestros sitios y debes aplicarlo igual en todos los lugares de tu página Web, por lo tanto este es un factor que deberemos cuidar mucho para no perder usuarios por tener una Web desorganizada”70. A continuación se usará un ejemplo para comprender el concepto de navegabilidad. United Colors of Bennetton (UCB), una marca de ropa global, desea realizar una presentación multimedia para que las personas clientes de la marca dónde pueda hablar sobre su historia, sus productos y su estilo de gerencia; ésta última la ha llevado a ser una marca mundialmente reconocida. En este punto debemos suponer que hemos pasado cada una de las etapas mencionadas anteriormente, y partiremos desde la organización en una estructura. 70 Disponible en: http://www.trazos-web.com/2007/06/09/como-mejorar-la-navegabilidad-web-de-tu-sitio/ Autor: Cristhian Salamanca 192 Estética para Entornos Virtuales UNAD Por ahora se tiene claro que las 3 meta-categorías sobre las cuales UCB quiere realizar el producto son: o Historia de la Marca o Productos o Estilo de Gerencia La estructura es: Imagen 131. Estructura proyecto Benetton. Cristhian Salamanca © 2008 UCB quiere que el diseño sea simple y entendible. Por a eso a continuación se presenta una primera idea del producto final. Autor: Cristhian Salamanca 193 Estética para Entornos Virtuales UNAD Imagen 132. La estructura proyecto Benetton interpretada en un diseño de pantalla. Cristhian Salamanca © 2008 A primera vista se identifica el nombre Benetton, que hace referencia a la compañía, más los vínculos a las 3 secciones. Este es el inicio. Ahora, suponga que el usuario hace clic en el link de “Productos”, él link lo llevará a la siguiente pantalla: Imagen 133. Proyecto Benetton en la sección Productos Cristhian Salamanca © 2008 Autor: Cristhian Salamanca 194 Estética para Entornos Virtuales UNAD En este momento el usuario sabrá que está en “Productos”, porque el diseño muestra una línea blanca que se une al nombre de la sección. Aparecen nuevos links que hacen referencia a los productos como Camisetas, Faldas y Pantalones. Adicionalmente, una flecha roja, en la esquina inferior izquierda, indica que puede volver al inicio. Por último, el usuario hace clic en el link de las faldas (Skirts), link que lo llevará a: Imagen 134. Productos + Faldas (Skirts) En este caso, el usuario vuelve a saber donde está, sabe que puede volver, y adicionalmente puede buscar más información por la aparición de las dos flechas blancas al lado inferior derecho, además de tener la opción de ver el producto (cuadro blanco) más un texto de información. Puede que el diseño cambie con el tiempo, pero en este momento se ha establecido que la navegación es importante. Ahora suponga que UCB decide adicionar dos nuevas partes a la multimedia, los comerciales de televisión y una sección de contacto, además adiciona más contenido a las categorías existentes, terminando con una estructura más compleja. La nueva estructura sería: Autor: Cristhian Salamanca 195 Estética para Entornos Virtuales UNAD Imagen 135. Estructura Recuerde: el secreto de la navegabilidad es como poder moverse de un punto a otro con claridad, no importa la extensión o complejidad del proyecto. Imagen 136. Solución de navegación La navegabilidad es un factor clave de éxito, y debe estar presente todo el tiempo cuando se desarrollé el guión multimedial. Cabe decir que es importante mencionar que un sistema de hipervínculo mal estructurado puede traer Autor: Cristhian Salamanca 196 Estética para Entornos Virtuales UNAD inconvenientes durante la ejecución de la aplicación multimedial, generando aumento de los requerimientos de memoria y/o desorientación del usuario al momento de realizar sus consultas. Otros consejos que pueden ser aplicados tanto para Web como Multimedia y según el caso son71: “Recurramos al principio básico de la usabilidad: El usuario no tiene tiempo, y menos para estar adivinando cuál es la manera de llegar a los diferentes contenidos nuestras webs. Tiene que saber a dónde va y tener confianza en el sitio. Aquí algunos puntos a tener en cuenta a la hora diseñar un sitio: o No puede haber demasiados "volver". o Ten siempre un menú visible. o Tiene que haber una forma de llegar directamente a la página principal desde todas las páginas. o Diseña el sitio de tal manera que el usuario nunca tenga que usar los botones "Atrás" y "Adelante" del navegador más que para salir de tu sitio. o El tener páginas perdidas, es decir, que no se comuniquen con ningún link al resto del sitio, es un gran error. o Si una sección de tu sitio tiene secciones temáticas grandes, trata de poner un menú adicional (en otro sentido que el principal) que lleve a las diferentes páginas de dichas secciones. o También es bueno tener un pequeño menú de acceso rápido, este debe ser más pequeño y llevar a lugares importantes cómo la página principal o la de contacto. No debería tener más de tres links. o Pon los links bien visibles para que el usuario no los tenga que buscar. o Lograr una forma para que se pueda llegar a todas las páginas de tu sitio desde cualquier página sería el máximo exponente. o Si no puedes conseguir lo anterior, hay una regla que siempre debe ser cumplida: la regla de los tres clicks. 71 Disponible en: http://www.maestrosdelweb.com/editorial/navegavilidad/ Autor: Cristhian Salamanca 197 Estética para Entornos Virtuales UNAD o El usuario tiene que poder llegar desde cualquier parte del sitio a cualquier otra en no más de tres clics. Si se supera esa cantidad, algo no está bien. o Trata de que lo primero que cargue en la página sean los links (el menú, íconos, etc.). De esta forma el usuario no tendrá que esperar si ya sabe a donde quiere ir”. LECCIÓN 4: USABILIDAD “Usabilidad es un término que se utiliza para denotar la facilidad con que las personas pueden emplear una herramienta en particular o de otros objetos realizados con el fin de lograr un objetivo particular. La usabilidad también puede referirse también puede referirse a los métodos de medición de la usabilidad y el estudio de los principios detrás de un objeto respecto a su eficiencia o su elegancia. En las ciencias de la computación, la usabilidad se refiere por lo general a la elegancia y la claridad con la que la interacción con un programa de ordenador o un sitio Web está diseñada. El término también se utiliza a menudo en el contexto de productos como la electrónica de consumo, o en las áreas de la comunicación, la transferencia de conocimientos y objetos (como un libro de cocina, un documento o una ayuda en línea). También puede referirse diseño eficiente de objetos mecánicos, tales como manejar una puerta o un martillo”72. La usabilidad es un término que está implícito durante todo el proceso de diseño multimedial, no es una etapa más del proceso, sino que está inmerso y no se puede desligar. Jakob Nielsen dice: “La Usabilidad es un atributo de calidad que evalúa cómo las interfaces de usuario son fáciles de usar. La palabra "usabilidad" se refiere también a los métodos para mejorar la facilidad de uso durante el proceso de diseño. Usabilidad se define por cinco componentes de calidad: o Aprendizaje: ¿Es fácil para los usuarios realizar tareas básicas la primera vez que encuentran el diseño? o Eficiencia: Una vez que los usuarios han aprendido y experimentado el diseño, ¿Cuál es la rapidez con que pueden realizar tareas? 72 Disponible en: http://en.wikipedia.org/wiki/Usability Autor: Cristhian Salamanca 198 Estética para Entornos Virtuales UNAD o Memoria: Cuando los usuarios vuelven a usar nuestro producto después de un período de no utilizarlo, ¿con qué facilidad se puede restablecer la competencia? o Errores: ¿Cuántos errores pueden hacer los usuarios? ¿Qué tan severos son estos errores? y ¿Cómo pueden recuperarse de los errores? o Satisfacción: ¿Cómo tan agradable es utilizar el diseño de nuestra multimedia? Hay muchos otros importantes atributos de la usabilidad. Uno de los atributos más claves es el que se refiere a la funcionalidad del diseño: ¿Suple lo que los usuarios necesitan? Usabilidad y funcionalidad son igualmente importantes: poco importa que algo sea fácil si no es lo que quieres”73. Para lograr una buena usabilidad en multimedia, debemos revisar que nuestros objetivos sean medibles, pero además debemos establecer objetivos propios de usabilidad. Dichos objetivos deben estar relacionados con: 1. Tiempo. Muy eficiente al momento de uso. También se relaciona con el tiempo que tomará un usuario para realizar una tarea. 2. Precisión. Se relaciona con la precisión con que un usuario debe realizar una actividad. 3. Facilidad de aprender. Obviamente, la usabilidad tiene como objetivo que los usuarios tendrán éxito. Si los usuarios no pueden hacer sus tareas o no pueden obtener respuestas a sus preguntas, el proyecto está fallando . 4. Satisfacción al momento de usar. Los usuarios deben estar contentos. Puede medir la satisfacción general. 5. Debe tener pocos errores. ¿Cómo hacer para que los objetivos mencionados anteriormente puedan ser medibles? : o Observando a los usuarios. Una buena forma de establecer objetivos medibles de usabilidad es observar a los usuarios realizar tareas similares al proyecto. ¿Cómo hacer para medir los resultados de los objetivos de usabilidad? 73 Disponible en: http://www.useit.com/alertbox/20030825.html Autor: Cristhian Salamanca 199 Estética para Entornos Virtuales UNAD o Haciendo un test de usabilidad. Una vez el proyecto sea funcional, póngalo a prueba con un pequeño grupo de su audiencia final. Observe y tome atenta nota de la experiencia e identifique posibles falencias de diseño, contenido, para que luego sean corregidas. La usabilidad es una condición para sobrevivir. Si por ejemplo nuestro desarrollo multimedial está en la Web y es difícil de navegar, la gente se va. Si la página principal no ofrece suficiente información acerca de lo que se ofrece, la gente se va. Si la gente se ve perdida, la gente se va. Si la información ofrecida no ofrece respuestas, ellos se van. Las mismas condiciones se pueden aplicar si nuestro proyecto final está hecho para ser distribuido en formatos CD-ROM o DVD-ROM, puede que no se vayan, pero pueden no volver a usar el producto final. Como vemos el proyecto podría ser un fracaso si no se tienen en cuenta los principios de la usabilidad. Principios que se explican a continuación. PRINCIPIOS DE USABILIDAD 1. Evitar controles conflictivos. La interfaz propuesta y la final deben contener elementos visuales que no generen confusión al usuario. Ejemplo: En la siguiente interfaz la disposición de las flechas rojas y blancas puede causar confusión, pues no se sabría con exactitud cual permite ver más contenido de la categoría “Skirts (faldas)”, y cual permite regresar la categoría general “Products (Productos)”. Autor: Cristhian Salamanca 200 Estética para Entornos Virtuales UNAD 2. Evitar controles crípticos. Crípticos o difíciles de entender. Cualquier mensaje que se muestre al usuario debe ser lo más claro posible, incluso si se trata de algún error. Muchas veces los sistemas operativos muestran errores que para el usuario podrían ser muy difíciles de entender. De no corregirse a tiempo puede generar frustración en el uso del producto. Ejemplo: El siguiente es un ejemplo de un mensaje difícil de entender para el usuario. Al final pregunta ¿Usar formateo? ¿Usted diría que si? Autor: Cristhian Salamanca 201 Estética para Entornos Virtuales UNAD 3. Evitar redefiniciones “creativas” de elementos estandarizados para el diseño de interfaces. Significa cambiar algo que ya está creado y que la mayoría de las personas reconocen. Ejemplo: Un botón con la palabra “OK” se ha vuelto estándar en su uso al igual que el uso de las opciones “SI”, “NO”, “ACEPTAR”, “CANCELAR”. Redefinir su uso, al hacer clic en “OK”, agregando opciones como “Hágalo ahora (Do it now)”, “Hágalo más tarde (Do it later)”, “Cancelar (Cancel)”, “Ayuda (help)”, puede complicar la usabilidad del producto final. 4. Evitar controles excesivos y redundantes. Se debe ser cuidadoso en el uso de los controles excesivos y redundantes, pues no puede haber más de un control que sirva para ejecutar la misma acción. Es similar al principio 1. Ejemplo: Los siguientes botones representan los diferentes controles que se tendrían para un video. Si se quisiera iniciar el video, ¿Cuál de los botones activaría? ¿El botón que se parece al “Play”? ¿El botón que tiene como icono la cámara de video? 5. Remover obstáculos. Es muy similar al principio anterior, pero se orienta más a diseñar si generar confusión en la interfaz. Autor: Cristhian Salamanca 202 Estética para Entornos Virtuales UNAD Ejemplo: A continuación se muestra la interfaz de una multimedia sobre frutas exóticas. En ella se muestran obstáculos. Pues no se logra diferenciar visualmente cuales son los vínculos que permiten el acceso a la información, pues se tendría la opción de navegar a través de los botones de la derecha, o usando las frutas mismas. 6. Retroalimentar. Realimentar o retroalimentar, un término original de la palabra en inglés Feedback. Es un proceso de compartir observaciones, preocupaciones y sugerencias con la otra persona a fin de mejorar su funcionamiento como individuo. En nuevas tecnologías, es un ciclo dónde se da un retorno de información sobre el resultado de un proceso o actividad, en otras palabras, a cualquier actividad hecha por el usuario en la multimedia, debe haber un retorno de información. Ejemplo: Usando el sitio Cheff.com74 enseña como preparar deliciosas comidas. La siguiente interfaz muestra una receta de 3 pasos. ¿Cómo sabría el usuario en que paso se encuentra? Tener indicadores es clave, para retroalimentar la ubicación del usuario. En el ejemplo se propone sombrear le paso en el que se encuentra el usuario, así que se sombrea el número 2. 74 Es solo un sitio de ejemplo y no representa el sitio real. Solo con fines educativos. Autor: Cristhian Salamanca 203 Estética para Entornos Virtuales UNAD 7. Ser explicito. Significa ser directo y diseñar una interfaz clara e intuitiva. Ejemplo: Volviendo al ejemplo de la multimedia frutal, es claro que si alguien usa o consulta el producto multimedia final usará las frutas para navegar, pues no existe otro medio para hacerlo. 8. Ser Flexible. Significa darle la opción al usuario de querer ver o no una sección de la multimedia, en otras palabras, de saltar a otras partes cuando el usuario lo considere pertinente. Ejemplo: Autor: Cristhian Salamanca 204 Estética para Entornos Virtuales UNAD En muchos sitios de Internet y algunas multimedia, existen los famosos Intros o Introducciones, secciones, generalmente con audio e imagen, que buscan introducir al usuario acerca del contenido principal. Muchos de estos sitios tienen la opción de “Saltar Intro”, para así dirigirse a las secciones principales. De no ser así sucedería como en la imagen a continuación, dónde existe una introducción, y se genera un conflicto cuando el visitante ya ha visitado el sitio. La narración dice: “Bienvenido a Cheff.com, es un placer para nosotros sus visita…”, luego el usuario dice para si mismo: “¡Yo ya he visto esto!”, la narración se dice a si misma: “¡Lo siento!”. Al final el usuario es quién se puede molestar un poco al no haber flexibilidad. 9. Ser perdonador. Muchas veces los usuarios cometen errores. Retroalimentarlos en esos errores debe ser cuestión de utilizar un lenguaje que no los ofenda, sino que los ayude a no volverlo a cometer. Ejemplo: Suponga que al final de la lección sobre como preparar huevos revueltos en Cheff.com existe un pequeño quiz. El usuario debe seleccionar cual es el ingrediente principal para preparar los huevos revueltos, y existen 3 opciones: a. Huevos (Eggs) b. Palak (Espinaca en Hindi, idioma de la India) c. Dahi Vada (Kumis en Hindi, idioma de la India) El usuario selecciona la opción C y el sistema muestra un mensaje que dice ¡EQUIVOCADO! ¡Inténtelo de nuevo! Esto sin duda alguna en términos educativos traería graves consecuencias. Autor: Cristhian Salamanca 205 Estética para Entornos Virtuales UNAD LECCIÓN 5: FUNCIONALIDAD Mencionamos con anterioridad que “hay muchos otros importantes atributos de la usabilidad. Uno de los atributos más claves es el que se refiere a la funcionalidad del diseño: ¿Suple lo que los usuarios necesitan? Usabilidad y funcionalidad son igualmente importantes: poco importa que algo sea fácil si no es lo que quieres” 75. Por esta razón es importante comprender el concepto de Funcionalidad, aparte del concepto de Usabilidad, pero sin olvidar que hace parte de la misma. Porque ¿Qué hacer con un producto que no funciona? De la funcionalidad podemos decir que: 1. No es un paso específico en el proceso de diseño de la interfaz. 2. Hace parte de todo el proceso de diseño. 3. Es una piedra angular en el desarrollo multimedia. Hablar de Funcionalidad en este punto significa: 1. Especificar y aclarar que parte del contenido, del diseño o de cualquiera de los puntos tratados con anterioridad, ha quedado vago o impreciso. Cualquier imprecisión en cuanto al contenido, afecta el diseño final. Por eso es importante determinar variables como el tamaño del contenido, el formato- si es una imagen, video o texto- y determinar si con lo que se 75 Ver 11. Disponible en: http://www.useit.com/alertbox/20030825.html Autor: Cristhian Salamanca 206 Estética para Entornos Virtuales UNAD cuenta hasta este momento es lo realmente necesario. ¿Qué sobra? O ¿Qué falta? 2. Revisar las suposiciones o hipótesis planteadas al principio, asegurándose que se estén cumpliendo. En este punto se sabrá que tan satisfactorio es el desarrollo del proyecto y si las expectativas se están cumpliendo. Revisar los planteamientos iniciales nos permitirá mantenernos enfocados. 3. Revisar y asegurarse que todo en el producto funcionará y como está funcionando hasta el momento. 4. Requerir de muchas preguntas y muchas pruebas, a la vez que de opiniones y observaciones. 5. Definir los controles de interacción. Debemos revisar que los controles interactivos como botones, barras de scrolls, movimientos del Mouse, entre otros, estén definidos con sus usos y aplicaciones. 6. Solucionar problemas de organización. Si es de estructura, de contenido, de diseño o de programación, los problemas deben ser depurados y solucionados. 7. Asegurar la consistencia del proyecto. En cuanto a diseño, concepto, contenido, función, proyección, objetivos, todo nuestro proyecto debe ser sólido y coherente. Esto dará una buena impresión, además de asegurar la buena calidad. PROBLEMAS DE FUNCIONALIDAD Problema #1. Cuando el contenido es muy extenso. Diseñar los controles de interacción demasiado tarde puede ser muy problemático; pero si consideramos que existirán excepciones, especialmente por el contenido, debemos tratar de ejemplificar “el peor de los casos” para poder seguir adelante. Ejemplo: Autor: Cristhian Salamanca 207 Estética para Entornos Virtuales UNAD En el siguiente ejemplo de Cheff.com, se muestra una receta de cocina para preparar un plato original de la India, el Pani Puri. La receta está en 3 pasos distintos, y el ejemplo muestra que se está en el paso 2. Ahora, suponiendo que la parte textual que tienen que con la preparación es mucho más extensa que en el ejemplo anterior, se debe buscar una solución visual que no interfiera con los otros elementos del diseño. En este caso se usará una barra de scroll. Problema #2. Confusión. Autor: Cristhian Salamanca 208 Estética para Entornos Virtuales UNAD Se debe evitar al máximo la confusión. Un control mal diseñado, o una retroalimentación mal aplicada pueden realmente confundir al usuario final de nuestro producto. Ejemplo: En el siguiente ejemplo, los botones de la parte superior tienen títulos como “Especificaciones (Specs)” y “Características (Features)”. Aunque ambas son sinónimas, una especificación se refiere a una detallada descripción técnica de un producto, mientras que una característica se refiere a un elemento que ayuda a distinguir a un objeto y lo hace diferente. Ambos términos los vemos reflejados en un computador. Por ejemplo una especificación puede ser la velocidad de memoria RAM, mientras que una característica puede una pantalla plana de 21”. Si se quisiera reflejar ésta información a través de una multimedia, deberíamos tener indicadores claros sobre lo que estamos hablando. En la imagen no es posible identificar si se habla de “Especificaciones (Specs)” o “Características (Features)”, pues no es claro si la sombra gris representa el estado o si el blanco. La lista de la imagen es: o Good Performance – Buen rendimiento o CD-ROM drive – unidad de CD-ROM o DVD-ROM drive – unidad de DVD-ROM o Long life battery – Batería de larga vida Autor: Cristhian Salamanca 209 Estética para Entornos Virtuales UNAD BIBLIOGRAFÍA 1. ALISTAIR Dabs, ALISTAIR Campbell (2004). The Digital Designer‟s Bible. East Sussex. 2. The complete Color Harmony, Rockport publications, ISBN 1-59253-031-1, p. 7 3. The Elements of Colour – J. Ittens 4. The color Compendium – Hope and Watch – Van Nostrand Reinhold 5. Design Basics – II edition – David A Lauer 6. The complete Color Harmony – Tina Sutton & Bride M. Whelan 7. The Elements of Color – J. Ittens 8. The colour Compendium – Hope and Watch – Van Nostrand Reinhold 9. Design Basics – II edition – David A Lauer 10. The complete Colour Harmony – Tina Sutton & Bride M. Whelan 11. Umberto Eco History of Beauty Published by Rizzoli December 2004 12. ISBN-13:9780847826469 13. Established in 1942 by the American Society for Aesthetics The Journal of Aesthetics and Art Criticism 14. Weekend Australian May 8-9, 2004 - John Armstrong tries to deepen our response to beauty – Sebastian Smee 15. Wladyslaw Tatarkiewicz, J. Harrell, Cyril Barrett, D. Petsch History of Aesthetics p. 293,294 16. Neil Haughton Perceptions of Beauty in Renaissance art ©2004 Blackwell Publishing Ltd p. 230, 231. 17. Tina Sutton & Bride M. Whelan -The complete Colour Harmony, ©2004 Rockport Publications, p. 8 18. Tina Sutton & Bride M. Whelan -The complete Colour Harmony, ©2004 Rockport Publications, p. 17, 15, 20. 19. Wladyslaw Tatarkiewicz, J. Harrell, Cyril Barrett, D. Petsch History of Aesthetics p.287 CIBERGRAFÍA 1. 2. 3. 4. 5. 6. 7. 8. http://en.wikipedia.org/wiki/Gray http://foroalfa.org/es/articulo/82/Diseno_o_estetica_utilitaria http://valcasey.com/webdesign/web.html http://en.wikipedia.org/wiki/Aesthetics#What_factors_are_involved_in_an_a esthetic_judgment.3F http://en.wikipedia.org/wiki/Dadaism http://www.geocities.com/allon_art/dada.html http://en.wikipedia.org/wiki/Grid_(page_layout) http://books.google.co.in/books?id=5hve2_IPDNMC&pg=PA287&lpg=PA28 7&dq=the+concept+of+beauty+in+the+middle+ages&source=web&ots=GK1 Autor: Cristhian Salamanca 210 Estética para Entornos Virtuales UNAD oqRgLhL&sig=rSNUYEtzBZjSCLPkfMy6sWdCn90&hl=en&sa=X&oi=book_r esult&resnum=10&ct=result#PPA287,M1 9. http://www.paul-rand.com/biography.shtml 10. http://acg.media.mit.edu/events/rand/ideamag.html 11. http://www.atpm.com/9.10/design.shtml 12. http://www.digital-web.com/articles/elements_of_design/ 13. http://en.wikipedia.org/wiki/Negative_space 14. http://www.markboulton.co.uk/journal/comments/five_simple_steps_to_desi gning_grid_systems_part_3/ 15. http://desktoppub.about.com/od/designprinciples/l/aa_balance1.htm 16. http://www.sitepoint.com/article/principles-beautiful-web-design/5/ 17. http://en.wikipedia.org/wiki/Proportion_(architecture) 18. http://www.bluemoonwebdesign.com/art-lessons-7.asp 19. http://www.atpm.com/10.02/design.shtml 20. http://www.sitepoint.com/article/principles-beautiful-web-design/4/ 21. http://www.johnlovett.com/test.htm 22. http://www.bluemoonwebdesign.com/art-lessons-9.asp 23. http://www.worqx.com/color/itten.htm 24. http://graphicdesign.spokanefalls.edu/tutorials/process/type_basics/history.h tm 25. http://www.linotype.com/29/fontdesigners.html 26. http://en.wikipedia.org/wiki/Art_nouveau#Origins 27. http://www.sitepoint.com/article/interview-jakob-nielsen-ph-d/3/ 28. http://eric.ed.gov/ERICDocs/data/ericdocs2sql/content_storage_01/0000019 b/80/1a/87/cc.pdf 29. http://www.markboulton.co.uk/journal/comments/five_simple_steps_to_desi gning_grid_systems_part_1/ 30. http://www.blueprintcss.org/ 31. http://lawsofsimplicity.com/ 32. http://webstyleguide.com/graphics/index.html 33. http://www.bookdesignonline.com/what-is-editorial-design.aspx 34. http://www.brandchannel.com/start.asp?fa_id=450 35. http://www.seodesignstudio.com/ 36. http://en.wikipedia.org/wiki/Kerning 37. http://webstyleguide.com/graphics/index.html 38. http://www.w3schools.com/css/css_colornames.asp 39. http://www.benhulse.com/index.php 40. http://searchciomidmarket.techtarget.com/sDefinition/0,,sid183_gci212810,00.html 41. http://barbie.everythinggirl.com/ 42. http://www.nike.com/index.jhtml?l=nikehome&re=LA&co=LA&la=ES 43. http://poseidon.se/ 44. http://www.useit.com/ 45. http://www.w3schools.com/Html/ Autor: Cristhian Salamanca 211 Estética para Entornos Virtuales UNAD 46. http://eric.ed.gov/ERICDocs/data/ericdocs2sql/content_storage_01/0000019 b/80/1a/87/cc.pdf 47. http://eric.ed.gov/ERICWebPortal/custom/portlets/recordDetails/detailmini.js p?_nfpb=true&_&ERICExtSearch_SearchValue_0=ED470176&ERICExtSea rch_SearchType_0=no&accno=ED470176 Autor: Cristhian Salamanca