205111 estética para entornos virtuales

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