2 Diseño Gráfico Aplicado A La Web

2 UNIDAD
DIDÁCTICA
DISEÑO GRÁFICO
APLICADO A LA WEB
Quedan rigurosamente prohibidas, sin la autorización escrita de
los titulares de «Copyright», bajo las sanciones establecidas en
las leyes, la reproducción total o parcial de esta obra por cualquier
medio o procedimiento, comprendidos la reprografía y el tratamiento
informático, y la distribución de ejemplares de ella mediante alquiler
o préstamo públicos.
INICIATIVA Y COORDINACIÓN
DEUSTO FORMACIÓN
Colaborador:
Interficie Proyectos Interactivos, S.L.U.
www.interficie.com
© Planeta DeAgostini Formación, S.L.U.

Barcelona (España), 2013
Primera edición: julio de 2013
ISBN: 978-84-394-9149-1 (Obra completa)

ISBN: 978-84-394-9151-4 (Unidad didáctica 2)
Depósito Legal: B-5.748-2013
Impreso por:
STUDIUM TALLERES GRÁFICOS
Gorcs Lladó, 99-107
Naves 9 y 10
08210 Barberà del Vallés
Printed in Spain
Impreso en España
DISEÑO WEB
3
Diseño de páginas
Diseño web
web Introducción
2
Introducción
El diseño gráfico, como disciplina artística, ha evolucionado mucho desde

que la Bauhaus sentara las bases del diseño moderno a principios del
siglo XX. En esta unidad didáctica vamos a centrarnos en las peculiaridades
que plantea esta materia aplicada a la creación de páginas web. Hablaremos
de teorías y modelos de color, de sus connotaciones emocionales, de tipos
de imágenes, de tipografías y de usabilidad. En definitiva, de todos aquellos
elementos y conceptos que debemos tener en cuenta para realizar un di-
seño gráfico profesional adaptado a las características propias de Internet.
Este tema posiblemente sea el más subjetivo de todo el curso, pues es el

que depende en mayor medida de la creatividad y los gustos del diseñador.
No obstante, siguiendo las pautas que aquí te proporcionaremos, conse-
guirás realizar atractivos diseños sin necesidad de poseer conocimientos
relacionados con las Bellas Artes.
En el momento de plantear un proyecto web, deben tenerse en cuenta una

serie de factores que influirán directamente en la calidad del producto final.
Independientemente de que el diseño sea atractivo y de que los contenidos
Introducción
puedan ser más o menos novedosos, deberemos plantearnos preguntas
tan importantes como ¿a quién va dirigida mi web? o ¿cuál es la mejor
forma de que a los usuarios que la visitan les resulte atractiva?
5
El proceso de realización de una página web podría compararse con la
construcción de una casa. No se trata únicamente de edificar las paredes
Diseño web
y el tejado, sino también de conocer el perfil del individuo que vivirá en ella
para hacerla a su medida. Así pues, deberemos estudiar las característi-
cas de las personas que visitarán la web, el tiempo que estimamos que
dedicarán a navegar por ella, las secciones que serán más interesantes, el
tipo de navegador que usarán… En resumen, tendremos que recopilar la
información que nos permita realizar una web enfocada al usuario.
1. Teoría del color
1.1. Las propiedades del color
En la unidad 1 de este curso hemos visto la progresión que ha seguido

Internet desde sus inicios, así como la evolución de los servicios que nos
ofrece. Fíjate en que se trata de una evolución de tipo tecnológico. En nin-
gún momento hemos entrado a detallarla desde el punto de vista gráfico,
aunque por supuesto también se han producido avances en este ámbito.
Las primeras webs venían a cubrir las necesidades comunicativas y de
difusión de contenidos de la comunidad científica, por lo que la apariencia
estética de las páginas quedaba relegada a un segundo plano. A medida
que aumentó el número de usuarios que se conectaban a Internet, surgió
la necesidad de optimizar gráficamente las aplicaciones web para ofre-
Diseño gráfico aplicado a la web
cer un valor añadido a los contenidos que se mostraban. Es por este

motivo que una rama de la disciplina artística del diseño gráfico empezó
a aplicarse al diseño de páginas web. Esto fue dando como resultado pá-
ginas de apariencia muy distinta respecto a las que habían existido hasta
ese momento. La evolución prosiguió y hoy en día las páginas web son
mucho más atractivas para los usuarios que las visitan. Uno de los puntos
importantes de dicha evolución radica en el uso que se hace del color en
las aplicaciones web. En este tema conoceremos las características del
color en términos generales y sus significados, así como sus aplicaciones
prácticas en el diseño web.
6
¿Sabías que...?
Si partimos de la premisa científica de que no hay un ser humano que
Diseño web
perciba el color de la misma forma que otro, intentar plantear el uso de los
colores de una forma racional puede parecer una labor destinada al fracaso.
No obstante, aunque todos los veamos de formas ligeramente distintas, la
diferencia no es lo suficientemente significativa como para que no podamos
La Staatliche Bauhaus sentar unos principios más o menos estandarizados.
(Casa de la Construcción
Estatal) fue una escuela
de diseño, arte y En primer lugar, vamos a definir lo que entendemos por color. El color, en
arquitectura fundada realidad, no existe físicamente, puesto que se trata sólo de una parte
en 1919 por Walter de la luz blanca. Esto tiene su lógica si piensas que en la oscuridad los
Gropius en Weimar
colores no se manifiestan. Por este motivo podemos determinar que el color
(Alemania) y cerrada
por los nazis en el año es una sensación que percibimos gracias a la naturaleza de la luz y a
1933. La Bauhaus sentó la capacidad de nuestros órganos visuales para trasmitir información
las bases normativas al cerebro.
y los patrones de lo
que hoy conocemos
como diseño industrial Aunque a priori pueda sonar un poco extraño, esto quedó demostrado por
y gráfico. Puede decirse un insigne físico llamado Isaac Newton hace más de 350 años. Newton ex-
que antes de la irrupción perimentó con un prisma de cristal haciendo que la luz pasara a través de él.
de la Bauhaus estas
Cuál fue su sorpresa cuando se dio cuenta de que el haz de luz blanca que
dos profesiones no
existían tal y como las incidía sobre el prisma quedaba fragmentado en seis colores: azul violáceo,
conocemos hoy en día. azul celeste, verde, amarillo, rojo anaranjado y rojo púrpura (Figura 1.1).
De este modo quedó constancia de que cuando la luz incide en un objeto,
éste absorbe algunos colores y refleja otros. Los colores reflejados son
los que se combinan para dar como resultado la tonalidad que percibimos.
Figura 1.1
Un prisma es capaz
de refractar, reflejar y
descomponer la luz en
los colores del arco iris.
Ahora que ya sabes qué es el color, vamos a adentrarnos brevemente en
Teoría del color

algunos conceptos físicos que te ayudarán a entender por qué el ojo humano
capta gran variedad de colores. Para entender esta diversidad cromática,
ten presente que la luz se transmite a través de múltiples medios, entre
ellos el aire.
7
La luz (del latín lux, lucis) es energía que, a diferencia del sonido –que es
una onda mecánica que necesita de un medio para transmitirse–, se trans-
Diseño web
mite incluso por el vacío. Como hemos visto, los objetos a través de los ¿Sabías que...?
cuales la luz no se transmite son los que reflejan algún tipo de color. Para
entender en qué consiste físicamente la luz, debemos hablar del espectro
electromagnético. El espectro al que nos referimos es una agrupación de
todos aquellos elementos que emiten algún tipo de onda electromagnéti-
ca. Dentro de dicho espectro se engloban diversos tipos de onda con los
que sin duda estarás familiarizado, como pueden ser las microondas (que
utilizamos para calentar alimentos), los rayos X (que se aplican a la medici-
na), los infrarrojos (que sirven para detectar objetos que emiten calor) o las Sir Isaac Newton (1643-
1727) fue el físico,
archiconocidas ondas de radio y televisión. La diferencia entre los tipos
filósofo, teólogo, inventor,
de onda que hemos enumerado radica en un concepto físico denominado alquimista y matemático
longitud de onda. En la presente unidad únicamente vamos a centrarnos inglés que escribió los
en la longitud de onda que nuestra visión es capaz de captar. Philosophiae naturalis
principia mathematica.
Además de por su
En el cuadro que te mostramos en la figura 1.2 puedes ver el espacio que Ley de la Gravitación
ocupa la luz dentro del espectro electromagnético. Dicho espacio se de- Universal y sus estudios
nomina espectro visible. Las ondas visibles son aquellas cuya longitud de sobre mecánica de
elementos, también
onda está comprendida entre los 400 y los 700 nanómetros; más allá de
destacó en estudios
estos límites siguen existiendo radiaciones, pero ya no son percibidas por sobre la naturaleza
nuestra vista. de la luz y la óptica.
Figura 1.2
Representación gráfica
del espectro visible.
En definitiva, el color se forma gracias a la capacidad de absorción o

reflexión de las distintas longitudes de onda. Si vemos de color rojo un
objeto es debido a que su naturaleza provoca que las longitudes de onda
correspondientes a los demás colores sean absorbidas y sólo se reflejen
las longitudes de onda correspondientes al rojo. Éstas son captadas por
los fotoreceptores que tenemos en los ojos, que envían la información al
cerebro para que la procese. Lo verás más claro en la tabla que te mostra-
mos en la figura 1.3, donde se muestran los valores de longitud de onda
de los colores obtenidos a partir de la descomposición de un haz de luz.
8 Figura 1.3
Tabla donde podrás ver
Diseño web
los valores de la longitud

de onda de los colores.
Además de las características físicas propias de cada color, existen una

serie de propiedades que nos ayudan a diferenciar con mayor precisión
colores que se encuentran en longitudes de onda muy similares. Dichas
propiedades se explican a continuación.
1.1.1. El tono y el matiz
El tono es el estado puro del color, sin que se le haya agregado blanco
¿Sabías que...? o negro. Es el valor que define un color y que nos permite diferenciarlo
En el sistema visual de otro. Gracias a él podemos distinguir, por ejemplo, el rojo del azul. El
humano, un fotorreceptor
matiz, por su parte, está definido por la longitud de onda que predomina al
es toda célula o
mecanismo capaz mezclar dos colores diferentes (con sus respectivas longitudes de onda).
de captar la luz. Los Con frecuencia utilizamos el término tono para sustituir a color, pues se
fotorreceptores se entienden como sinónimos.
localizan en el interior
del ojo y se dividen en
dos variedades: los El matiz nos permite distinguir dos colores totalmente diferentes haciendo
conos y los bastones. referencia a la posición que ocupan dentro del círculo cromático.
Por ejemplo, el color rosa y el color naranja son diferentes matices del
mismo color (rojo), y, por lo tanto, ocupan posiciones diferentes en el círculo
cromático, como puedes ver en la figura 1.4.
Tal y como comentábamos en el ejemplo anterior, el color rosa y el color

naranja son diferentes matices del color rojo. En el primer caso, el color
se produce a partir de la mezcla con azul, siendo todavía predominante la
longitud de onda del rojo. Por este motivo se encuentra justo al lado de
Figura 1.4
dicho color. El naranja resulta de la mezcla con amarillo, pero la longitud Representación del
de onda predominante es también la roja. círculo cromático.
Los tres tonos o colores primarios son el rojo, el verde y el azul. A partir
de la mezcla de éstos podemos obtener otros matices o colores. Diremos
que dos colores son complementarios cuando están en posiciones
contrapuestas en el círculo cromático.
1.1.2. La saturación o intensidad
Entendemos por saturación de un color la propiedad que representa la

pureza o intensidad del mismo. Cuanto menor sea la saturación de un
color, mayor será su tonalidad grisácea y más decolorado aparecerá. Por
el contrario, un color puro tiene un grado máximo de saturación.
Teoría del color

Para cambiar la saturación de un color hay que mezclarlo con su com-
plementario, obteniendo de ese modo la escala de saturación o de grises.
Basándonos en este razonamiento podemos definir un color neutro como
aquel en el que no podemos percibir saturación.
9
En la figura 1.5 puedes apreciar los distintos grados de saturación que pre-
Diseño web
senta el color rojo al mezclarlo con blanco en una proporción cada vez mayor.
Figura 1.5
El color rojo muestra
diferentes grados de
saturación al mezclarse
con blanco.
1.1.3. El valor o brillo
El brillo es la luminosidad que tiene un color. También podríamos defi-

nirlo como la capacidad que tiene un color de reflejar el color blanco.
En contraposición, podrás encontrar definiciones de brillo como la cantidad
de “oscuridad” que posee un color, es decir, lo claro u oscuro que resulta
un color respecto al que utilizamos como patrón. A medida que a un color
se le agrega más negro, se intensifica su oscuridad y se obtiene un valor
más bajo de brillo. A medida que a un color se le añade más blanco, la
claridad del mismo se intensifica, por lo que se obtienen valores de brillo
más elevados (Figura 1.6).
Figura 1.6
Tabla representativa
de los valores Matiz,
Saturación y Brillo.
1.2. El modelo de color aditivo

Ahora que ya posees unas nociones elementales de qué son los colores y
cómo los captamos a través de nuestros ojos, vamos a centrarnos en los
diferentes tipos de colores que podemos encontrar.
Como has podido ver en el punto anterior, Newton fue capaz de separar el
haz de luz en seis colores, pero ¿son todos ellos necesarios para generar
todos los colores que existen en la naturaleza? La respuesta la encontró el
científico inglés Thomas Young hace unos 200 años. Young trabajó sobre
el experimento de Newton realizando pruebas con seis linternas que emitían
los seis colores del espectro visible. Proyectando estos focos y superponien-
10
do la luz que emitían, llegó a la conclusión de que sólo era necesaria la
suma de tres colores para formar el resto de los que había descubierto
Diseño web
Newton. Además, sumando estos tres colores, se obtenía también la luz

blanca. Con este experimento, Young había descubierto el modelo de color
aditivo y los denominados colores primarios: el rojo, el azul y el verde.
El modelo aditivo se basa en la particularidad que todos los colores

se consiguen a partir de la mezcla o adición de tres colores primarios.
Este modelo de color se conoce como RGB (Red, Green, Blue).

En la figura 1.7 puedes apreciar algunas de las tonalidades que se obtie-
nen de la mezcla a partes iguales de los colores primarios. Fíjate que en el
centro de la figura obtenemos el color blanco, producto de la suma de los
tres colores primarios.
Figura 1.7
Representación del
Como has podido ver, mediante la suma o adición de colores podemos
modelo de color aditivo. llegar a obtener otros colores o incluso el color blanco. Seguramente te
preguntarás ¿cómo definimos la proporción en la que debemos mezclar?
Pues bien, el intervalo de valores para cuantificar la mezcla se estableció
en una escala que va desde el 0 (ausencia de luz y por lo tanto de color)
hasta el 255 (máxima cantidad de color y, por lo tanto, de luz). De este
modo, si quisiéramos obtener el color blanco, ¿qué valor de cada color
primario deberíamos escoger? La respuesta es obvia: 255. Así pues, pode-
mos definir el color blanco como R-255, G-255 y B-255. Por el contrario,
el color negro mostrará los siguientes valores: R-0, G-0 y B-0. Siguiendo
este mismo razonamiento, podemos afirmar que la representación de los
colores primarios será la siguiente:
• Rojo (R): 255, 0, 0
• Verde (G): 0, 255, 0
• Azul (B): 0, 0, 255
Como puedes observar, el orden en el que se muestran los valores numéricos

coincide estrictamente con el orden RGB, siendo el rojo el primer valor, el
verde el segundo y el azul el tercero y último.
1.3. El modelo de color sustractivo
A diferencia del modelo aditivo, en el modelo de color sustractivo (Fi-
Teoría del color

gura 1.8) los colores se generan en base a la capacidad de absorción
de las longitudes de onda del objeto que se ilumina. Cuando la luz in-
cide sobre un objeto, éste absorberá y reflejará una serie de longitudes de
onda del espectro visible en función de su composición química y física.
Dependiendo de las longitudes de onda que refleje, la percepción de color
11
que tendremos será una u otra.
Diseño web
En el modelo sustractivo se usan a menudo tintes y compuestos químicos
Figura 1.8
similares que, gracias a su composición, son capaces de reflejar unas lon- Representación del modelo
gitudes de onda concretas para que el ojo humano capte el color deseado. de color sustractivo.

Los colores primarios en el modelo sustractivo son el cian, el magenta y
el amarillo (Cyan, Magenta, Yellow). Estos colores están contrapuestos
a los colores primarios RGB. Por ejemplo, el color cian es el opuesto al
rojo, lo que significa que actúa como un filtro que absorbe dicho color. Lo
mismo sucede con el magenta y el amarillo, que son los opuestos al verde
y al azul respectivamente.
A diferencia de lo que sucede en el modelo aditivo, para cuantificar la

cantidad de color en una mezcla sustractiva usaremos porcentajes. De
este modo, unos valores como cian 0%, magenta 0% y amarillo 0% nos
darán como resultado el color blanco. Como puedes observar, este modelo
se rige por una lógica opuesta a la del modelo aditivo, donde el blanco se
consigue con los valores máximos de los colores primarios. En definitiva,
en el modelo sustractivo la ausencia de color da como resultado el
color blanco.
Llegados a este punto, te preguntarás cómo obtener el color negro en el
modelo sustractivo. Lo cierto es que, en la práctica, mezclando tintes, si
tuviéramos unos valores de CMY que fueran del 100%, no obtendríamos
un color negro puro, sino un tono oscuro y ocre. Es por este motivo que
en el modelo CMY se hizo necesaria la inclusión de un color independiente
de los colores primarios y dicho color no es otro que el negro. Inicialmente,
el nombre que se le dio fue el de key color o color clave y es por este motivo
que el modelo de color sustractivo se conoce como CMYK (Figura 1.9).
Figura 1.9
Colores que componen
el modelo de color
sustractivo CMYK.
1.4. Aplicaciones de los diferentes modelos de color
Tras ver los modelos de color RGB (aditivo) y CMYK (sustractivo), vamos a
proceder a explicarte las aplicaciones que tiene cada uno de estos modelos.
El modelo RGB se utiliza de forma exclusiva para definir los colores
que se muestran mediante dispositivos de pantalla, como pueden ser
los monitores de los ordenadores (Figura 1.10). Es el modelo que utili-
¿Sabías que...?
Pantone es una empresa zarás para preparar las imágenes que posteriormente se mostrarán en las
estadounidense creadora páginas web que diseñes. El hecho de que este tipo de dispositivos usen
12 de un sistema de imágenes adaptadas al modelo RGB se debe a que emplean los colores
control de color para
primarios rojo, verde y azul para mostrar la información. Ten presente que,
Diseño web
las artes gráficas. Dicho

sistema de definición por defecto, un monitor de ordenador estará apagado (ausencia de luz) y
cromática es el más mostrará el color negro. Al iluminar la pantalla, la luz pasa por tres capas
reconocido y utilizado, de material de fósforo, una por cada color básico (rojo, verde y azul). En
por lo que normalmente
definitiva, el color se genera añadiendo luz.
llamamos Pantone
al sistema de control
de colores. La guía
Pantone es el elemento
donde se muestran los
colores Pantone y su
equivalencia con los
modelos CMYK y RGB.
Figura 1.10
Colores que componen
el modelo de color
aditivo RGB.
El modelo CMYK o modelo sustractivo se usa para aplicaciones de artes
gráficas relacionadas con la impresión. Esto se debe a que el papel, por
norma general, es blanco y refleja gran parte de la luz que recibe. Mediante
la impresión CMYK, modificamos la luminosidad del papel para conseguir
que exhiba los colores que deseamos. El uso del modelo CMYK es lo que ¿Sabías que...?
en artes gráficas se conoce como cuatricromía, pues implica la utilización La impresión offset es un
método de reproducción
de cuatro tintas (Figura 1.11).
de documentos e
imágenes sobre papel
o materiales similares
que consiste en aplicar
una tinta, generalmente
oleosa, sobre una
plancha metálica. La
plancha toma la tinta en
las zonas donde hay un
compuesto hidrófobo
(también conocido como
oleófilo), mientras que el
resto de la plancha (zona
hidrófila) se moja con
agua para que repela
la tinta. La imagen o el
texto se transfiere por
presión a una mantilla
Teoría del color

de caucho para pasar,
finalmente, al papel.
Figura 1.11
Colores de cuatricromía.
13
Así pues, cuando debas tratar gráficamente alguna imagen para mostrarla
Diseño web
en tus páginas web, deberás asegurarte de que el modelo de color que
emplean es el RGB. Por el contrario, si lo que necesitas es imprimir un
catálogo de imágenes, deberás certificar que éstas utilizan el modelo de
color CMYK (Figura 1.12).
RGB CMYK
Figura 1.12
La misma imagen en
modelo RGB y CMYK.
1.5. El significado del color
El color es uno de los elementos más importantes en una composición grá-

fica. En el caso particular del diseño de páginas web, es de vital importancia
¿Sabías que...? que los colores del diseño estén en armonía para conseguir los objetivos
La impresión digital es emocionales que persigues. Así pues, en el momento de iniciar el diseño
un proceso que consiste
de una página, bien sea a nivel personal o por encargo, deberás plantearte
en imprimir directamente
en papel un archivo qué gama de colores escogerás en función de lo que quieres transmitir.
digital por medio de un Esto estará condicionado por el tipo de usuarios a los que se dirige la web.
tóner. Este proceso es
ideal para proyectos
Los estudios sobre el color y la repercusión emocional que tiene sobre
de impresión de bajo
volumen y tiempos de los seres humanos han llevado a definir unas familias de colores que, en
entrega sumamente función de su utilización, evocarán unas sensaciones u otras. Los co-
cortos, ya que ofrece lores pueden causar relajación, agobio, alegría… Dichos estudios pueden
una disponibilidad
englobarse dentro de lo que se ha dado en llamar psicología del color. A
casi inmediata de
continuación pasaremos repaso a varias familias de colores y a sus con-
los impresos. Esto

se debe a que, al no notaciones psicológicas.
trabajar con tintas, no
requiere tiempo de
• Colores cálidos
secado o enfriamiento,
como la tradicional Se llaman colores cálidos aquellos que van del rojo al amarillo. Son
impresión offset. tonalidades que evocan calor, pasión, fuerza, agresividad y también peli-
gro. Está demostrado que la visualización de este tipo de colores afecta
en mayor o menor medida al sistema nervioso y a la presión sanguínea
de la persona que visualiza el color (Figura 1.13).

14
Diseño web
Figura 1.13
Ejemplo de colores
cálidos.
• Colores fríos
Los colores fríos son los que van del azul al verde. El frío remite al
azul, y cuanto más saturada sea su tonalidad, más se incrementará
dicha sensación. Los colores fríos nos recuerdan al invierno, al hielo…
Los sentimientos que nos evocan colores como el azul y el verde son
los opuestos a los generados por los colores cálidos. En definitiva, los
colores fríos nos hacen estar más relajados y calmados (Figura 1.14).
Figura 1.14
Ejemplo de colores fríos.
• Colores claros o pastel

Los colores claros o pastel son colores pálidos que se obtienen
rebajando la intensidad en el tono de los colores saturados. Por
ejemplo, añadiendo blanco a un rojo puro se obtiene un tono pastel
del mencionado color. A medida que disminuimos la intensidad de los
diferentes tonos de rojo, verde o azul, los colores resultantes son más
Teoría del color

similares entre sí (Figura 1.15).
Figura 1.15
Si añadimos blanco a un 15
rojo puro, verde puro o
Diseño web
azul puro, obtendremos
un color pastel.
Los colores claros sugieren ligereza, descanso, armonía, suavidad. Este

tipo de colores nos transmiten sensación de frescura, limpieza y naturali-
dad (Figura 1.16).
Figura 1.16
Ejemplo de colores pastel.
• Colores oscuros o sucios
Los colores oscuros son tonos que contienen una cantidad impor-
tante de color negro en su composición. Estos colores evocan serie-
dad y tristeza. Los solemos asociar con el otoño y el invierno. Además,
tienen la particularidad de crear una sensación espacial más reducida
(Figura 1.17).
Figura 1.17
Ejemplo de colores
oscuros.

• Colores brillantes
La claridad de los colores brillantes se logra gracias a la omisión
16
del gris o el negro. Entre ellos se cuentan azules, rojos, amarillos y
naranjas con brillo pleno. Los colores brillantes son vívidos y atraen la
Diseño web
atención. Un autobús escolar amarillo, un racimo de globos de colores,

el rojo de la nariz de un payaso nunca pasan inadvertidos. Estimulantes y
alegres, los tonos brillantes son los colores perfectos para ser utilizados
en envases, moda y publicidad (Figura 1.18).
Figura 1.18
Ejemplo de colores
brillantes.
1.6. El color en el diseño web
En anteriores apartados has podido ver cómo se crea el color, los dife-
rentes modelos que existen y las distintas aplicaciones que puede tener
el color. En este punto vamos a centrarnos en la aplicación del color en el
diseño web.
Estudios rigurosos demuestran que los primeros segundos que una per-
sona pasa contemplando una web son cruciales para determinar si seguirá
adelante con su visita o bien se limitará a abandonar la página en busca
de otra que le parezca mejor. Uno de los elementos de peso que atraen la
atención del usuario (además del tipo de contenido y la distribución del
mismo) es el conjunto de colores que hayamos utilizado en nuestra página.
Así pues, en el momento de plantear el diseño de nuestra web deberemos
armonizar los colores de modo que, en la medida de lo posible, se
adapten al contenido que se muestra en la página.
Por ejemplo, si realizamos la página web de un centro médico o de esté-

tica, utilizaremos familias de colores azules o tonos pastel. En definitiva,
colores que nos transmitan una sensación de limpieza, frescura y relajación.
Ten presente que sólo armonizando la imagen gráfica de la web con el servi-
Teoría del color

cio o el producto que se oferta podrás proyectar fidedignamente la imagen
que tiene en mente tu cliente. Tampoco debes olvidar a quién va dirigida la
página web, y por ese motivo debes estudiar a tu público objetivo y plasmar
el proyecto web que mejor se adecue a sus necesidades. Te ilustraremos
acerca de este tipo de análisis en el tema 5 de esta misma unidad.
17
Independientemente de las consideraciones estéticas que comentábamos
Diseño web
anteriormente, el color en la web tiene una serie de particularidades téc-
nicas que debes conocer para poder aplicarlo de forma correcta en tus
diseños. En primer lugar, como hemos señalado, el color en la web está
basado en el modelo RGB.
No obstante, pese a utilizar el modelo RGB, los colores no se expresan me-

diante valores de 0 a 255. Los colores en la web se expresan en formato
hexadecimal. Dicho formato tiene como característica que los valores están
expresados en base 16. Esto significa que deberemos combinar 16 símbo-
los para expresar un color. Por norma general, estamos acostumbrados a
trabajar en base 10 o modelo decimal, donde utilizamos 10 símbolos (0,
1, 2, 3, 4, 5, 6, 7, 8, 9) para expresar cualquier número. El formato hexade-
cimal, por el contrario, utiliza los siguientes símbolos: 0, 1, 2, 3, 4, 5, 6, 7,
8, 9, A, B, C, D, E y F. Las equivalencias, así pues, son las siguientes: A=10,
B=11, C=12, D=13, E=14 y F=15.
Ahora que ya sabes en qué consiste el modelo hexadecimal, te preguntarás

qué debemos hacer para convertir los valores de color RGB a este modelo.
A continuación te detallamos cómo se realiza la conversión:

• Tomemos como ejemplo un color. Elegiremos uno de la gama de los
rojos, de tono anaranjado, que tenga los siguientes valores: R=209,
G=106 y B=31 (Figura 1.19).
Figura 1.19
Muestra de la pantalla
Selector de color de
Photoshop. Valores RGB.
• Descomponemos los valores de cada uno de los colores primarios.

El valor rojo decimal 209 se expresa en hexadecimal como D1. Puedes
comprobarlo realizando el siguiente cálculo: D=13 y 1=1. Como el valor
está expresado en base 16, multiplicaremos el valor D=13 x 161 y le
sumaremos 1x160. El resultado final de la operación es 13x16=208 +
1x1=1. Así pues, la suma de 208+1 da como resultado 209, que es el
valor de rojo que hemos seleccionado.
Para el valor del verde (106) seguiremos el mismo procedimiento: 106=6A

(6x161 + 10x160). O lo que es lo mismo, 96+10.
18
Por último, el color azul (31) daría como resultado el valor hexadecimal
Diseño web
1F, donde 1x161+15. En definitiva, 16+15.
Ahora que ya has podido ver que en la web los colores se expresan en for-
mato hexadecimal, cabe destacar que todos los colores que utilizarás en
el diseño de tu página tendrán un formato de 6 dígitos. Cada uno de los
tres pares de dígitos se utiliza para definir un valor de R, G y B. Siguiendo
con el ejemplo mostrado anteriormente, los valores R=209, G=106 y B=31
se traducirían como D16A1F (Figura 1.20).
Figura 1.20
Muestra de la pantalla
Selector de color de
Photoshop. Valor
hexadecimal.
Cabe destacar que programas de tratamiento de imagen como Adobe Pho-
toshop muestran simultáneamente los valores RGB en decimal y hexade-
cimal. De este modo, no tendrás que calcular continuamente la equivalencia
entre los formatos de color. Otra forma de realizar conversiones al formato
hexadecimal consiste en emplear una calculadora científica como las que
integran los sistemas operativos Windows o Mac OS X. Bastará con que
teclees la cifra y selecciones si deseas su equivalencia en decimal (Dec) o
en hexadecimal (Hexa).
Por ejemplo, la calculadora de Windows 7 integra un conversor bidirec-

cional mediante el que podrás convertir cifras de decimal a hexadecimal y
viceversa. Accede a esta opción desplegando el menú Ver y seleccionando
la opción Programador.
Teoría del color

Figura 1.21
Muestra de la calculadora
programador de Windows.
19
Diseño web
RESUMEN
Resumen
En este tema hemos visto la importancia del diseño gráfico aplicado a la

realización de una página web. Se han analizado desde las consideraciones
estrictamente físicas del color hasta sus connotaciones psicológicas.
A nivel físico, podemos determinar que el color es una sensación que perci-
bimos gracias a la naturaleza de la luz y a la capacidad de nuestros órganos
visuales para transmitir información al cerebro. Cuando la luz incide en un
objeto, éste absorbe algunos colores y refleja otros. Los colores reflejados
son los que se combinan para dar como resultado la tonalidad que perci-
bimos.
En cuanto a los elementos diferenciadores de cada uno de los colores,

hemos estudiado las características del tono, el matiz, la saturación, la in-

tensidad y el brillo. Conocer cada una de estas particularidades nos ayudará
a definir los colores con mayor precisión.
También hemos visto los dos principales modelos de color que existen y sus
aplicaciones. Mientras que el modelo aditivo se caracteriza por la adición de
los tres colores básicos para obtener el color blanco, el modelo sustractivo
se basa en la ausencia de color para obtener el blanco. A estos modelos se
los conoce como RGB y CMYK respectivamente. El modelo RGB es el que
se usa para representar el color en la web, y el modelo CMYK se emplea
20
para tareas de impresión sobre papel.
Diseño web
En el plano psicológico, hemos analizado las connotaciones que tienen

ciertos colores. El uso de colores cálidos o fríos producirá como resultado
estados emocionales diferentes en los usuarios que los visualicen.
Por último, hemos estudiado el uso del modo hexadecimal para representar
los colores en la web. Recuerda que los colores que quieras incluir en tu
página deberán expresarse utilizando este modelo.
Ejercicios de autocomprobación
Actividad práctica
Explica de forma breve por qué la infinidad de elementos que po-

demos encontrar en la naturaleza son de diferente color. Tu razo-
namiento debe basarse en el proceso físico que hace posible esta
singularidad.
Rodea con un círculo la alternativa que consideres correcta de las tres

que presentamos:
1. ¿Por qué percibimos los colores?

a) Debido a la capacidad de los objetos de absorber o reflejar las di-
ferentes longitudes de onda.
b) Gracias a la capacidad de filtrar la luz reflejada que tienen los foto-
receptores del ojo humano.
c) Ambas respuestas son correctas.
Teoría del color

2. ¿En cuántos colores se descompone un haz de luz blanca al atra-
vesar un prisma de cristal?
a) 6 colores.
b) 3 colores.
21
c) 4 colores.
web
Diseño web
3. En el lenguaje HTML, ¿qué formato utilizaremos para expresar la
información referente al color?
Diseño
a) Definiremos cada color con su nombre. Por ejemplo “rojo”, “verde”,
“naranja”…
b) Utilizaremos un formato de 6 dígitos donde cada uno de los tres
pares será el color RGB expresado en base hexadecimal.
c) Utilizaremos valores de 0 a 255 para cada uno de los componentes.
4. Los valores de color del modelo aditivo se expresan:

a) Con valores de 0 a 100 para cada uno de los componentes (Rojo,
Azul y Verde).
b) Con valores de 0 a 255 para cada uno de los componentes (Rojo,
Verde y Azul).
c) Con valores de 0 a 255 para cada uno de los componentes (Rojo,
Verde, Azul y Negro).
Indica si las siguientes afirmaciones son verdaderas o falsas:
5. Todo el espectro de colores posee una longitud de onda idéntica.

(V) (F)
6. El tono, el matiz, la saturación, la intensidad y el brillo son propie-

dades que sólo afectan a algunos colores.
(V) (F)
7. En el modelo aditivo o RGB, la gama de colores se forma a partir de

la suma de los colores primarios.
(V) (F)
8. El modelo de color sustractivo o CMYK es el que se usa para las

imágenes que deben mostrarse en la web.
(V) (F)
Contesta brevemente a las cuestiones siguientes:
9. Define con tus propias palabras en qué consiste el tono de un color.
10. ¿Por qué utilizaremos el modelo de color RGB para mostrar los co-
lores en una pantalla de ordenador?
22
Diseño web
Las soluciones a los ejercicios de autocomprobación se encuentran al final de esta unidad. En caso
de que no los hayas contestado correctamente, repasa la parte de la lección correspondiente.
2. Dispositivos de visualización,
estándares y resoluciones
En este segundo tema vamos a hablar sobre los diferentes tipos de dis-
positivos que nos permiten visualizar los contenidos de una página web.
Hasta hace pocos años, el equipo informático estándar consistía en un or-
Dispositivos de visualización, estándares y resoluciones

denador con su correspondiente monitor o pantalla. Gracias a él podíamos
conectarnos a Internet y visualizar los contenidos.
La evolución de la tecnología ha provocado que hoy en día tengamos a

nuestra disposición una mayor variedad de dispositivos para conectarnos
a la red y, en consecuencia, sea preciso trabajar con diferentes formatos y
resoluciones para la visualización de los contenidos. Podemos emplear, así
pues, desde smartphones de última generación con acceso a Internet a
ordenadores portátiles y ultrabooks de distintos tamaños. A lo largo del
tema vamos a ver los conceptos básicos que nos asegurarán que las webs
que realizamos llegan al máximo número de usuarios, independientemente
del dispositivo y la resolución que utilicen.
2.1. El píxel
Podemos definir el píxel (del inglés picture element) como la unidad de

23
color más pequeña que conforma una imagen digital (Figura 2.1). Toda
imagen digital está formada por miles o millones de píxeles. Éstos sólo
Diseño web
son perceptibles si realizamos un zoom a la imagen. No obstante, son muy
difíciles de apreciar si la visualizamos a cierta distancia. Para que puedas
entenderlo mejor, es como si observáramos un mosaico (Figura 2.2) forma-
do por pequeñas piezas de colores. Si nos acercamos mucho al mosaico,
podremos apreciar el detalle de cada una de dichas piezas. Por el contrario,
si lo contemplamos desde cierta distancia, veremos el conjunto de piezas
como una unidad.
Figura 2.1
Ejemplo de píxel.
Figura 2.2
Ejemplo de mosaico.
Al conjunto de píxeles que componen una imagen lo denominamos mapa

de bits. Dicha denominación se debe a que para representar la información
de color de cada uno de dichos píxeles utilizamos como medida los bits.
Antes de seguir profundizando en el tema, vamos a definir brevemente qué

es un bit. El término bit es el acrónimo de binary digit (dígito binario). Un
bit es la unidad mínima de información que se utiliza en informática. Para
24
representar un bit suelen utilizarse dos valores, el 1 y el 0.
Diseño web
Debido a la rápida evolución de la capacidad de los ordenadores, hoy en

día un bit representa una cantidad de información insignificante. Por este
motivo, han ido utilizándose unidades de medida cada vez mayores para
cuantificar la capacidad de los ordenadores. Realizando un paralelismo, es
como si en nuestra vida cotidiana pesáramos todo en gramos. Puesto que
resultaría muy engorroso, utilizamos medidas mayores, como pueden ser
el kilogramo, la tonelada, etcétera.
La siguiente unidad por encima del bit es el byte, acrónimo de binary term
(término binario). El byte es la unión de 8 bits, es decir, la combinación de
ocho ceros y unos. La representación numérica de un byte abarca desde
00000000 hasta 11111111. Con estos valores pueden alcanzarse 256 com-
binaciones (28). Por ejemplo: 01101100, 11001100, etc.
Llegados a este punto, ¿no resulta curioso que un byte nos ofrezca 256
combinaciones posibles? Recordemos que esas son las variedades de
color que presenta cada uno de los componentes del modelo RGB.
De este modo, podemos asegurar que una imagen que utilice el modelo
RGB y una profundidad de color de 8 bits, podrá mostrar un total de
256x256x256 = 16.777.216 millones de colores.
2.2. La profundidad de color
La profundidad de color hace referencia a la cantidad de bits que necesi-

taremos para representar el color de un píxel. Por ejemplo, si trabajamos
con una imagen de 1 bit por píxel, sólo podremos utilizar dos colores para
representar dicha imagen. Si por el contrario trabajamos con una imagen de
8 bits por píxel, podremos utilizar hasta 256 colores diferentes. A continua-
ción, vamos a hacer un repaso de las profundidades de color más utilizadas:

• Color indexado
Esta denominación abarca profundidades de color que tienen un máxi-
mo de 256 colores. Por este motivo, los valores de color de los píxeles
hacen referencia a los tonos RGB, que también cuentan con 256 va-
lores. En el modo de color indexado, la imagen almacena la informa-
ción de color en una paleta o mapa. Las profundidades de color más
habituales dentro de esta categoría son:
• 1 bit por píxel. Esta profundidad de color utiliza sólo dos colores y
se denomina imagen monocromática.
• 2 bits por píxel. Emplea cuatro colores para representar las imá-
genes.
• 4 bits por píxel. Nos encontramos frente a una profundidad de color

que fue muy utilizada en el pasado y que definió el estándar VGA.
Utiliza dieciséis colores.
25
• 8 bits por píxel. Esta profundidad de color nos ofrece 256 tonos para
Diseño web
cada píxel. Se denomina comúnmente modo SVGA o Super VGA.
En las figuras 2.3 a 2.6 puedes ver una imagen a la que hemos aplicado las
diferentes profundidades de color comentadas.
Figuras 2.3 y 2.4

La misma imagen con una
profundidad de color de 1
1 bit por píxel, 2 colores 2 bits por píxel, 4 colores y 2 bits respectivamente.
Figuras 2.5 y 2.6
La misma imagen con una
profundidad de color de 4
y 8 bits respectivamente. 4 bits por píxel, 16 colores 8 bits por píxel, 256 colores
• Color de alta resolución

Hablamos de colores de alta resolución cuando utilizamos 16 bits para
codificar la información de color de cada píxel. En esta profundidad
los 16 bits de información se dividen de tal modo que se utilizan 5 bits
para codificar los colores rojos, 6 bits para los verdes y 5 bits para
los azules. Empleamos 6 bits para codificar el color verde debido a

que el ojo humano posee una mayor sensibilidad para las longitudes
de onda que refleja este color. En consecuencia, utilizamos más bits
de codificación para poder representar más variedades de verde y
conseguir que la imagen luzca más realista.
La cantidad de colores que puede llegar a tener una imagen de 16

bits se obtiene de la multiplicación de 25 x 26 x 25 = 32 x 64 x 32. En
definitiva, obtendremos 65.536 colores diferentes.
26 • Color verdadero
Denominamos color verdadero a la profundidad de color que utiliza
Diseño web
24 bits para codificar la información de color. De todos los modos de

color que hemos visto hasta ahora, éste es el que con mayor fidelidad
representa lo que el ojo humano es capaz de captar, de ahí su nombre.
Este modo de color permite la utilización de 8 bits de color para cada
uno de los componentes del modelo RGB.
De ese modo dispondremos de 256 (28) colores para representar el

rojo, 256 (28) colores para representar el verde y 256 (28) colores para
representar el azul. En consecuencia, obtendremos 256 x 256 x 256
colores diferentes para poder representar las imágenes. Nada más y
nada menos que 16.777.216 colores distintos. No obstante, existe una
profundidad de color superior al color verdadero que utiliza 32 bits
para codificar el color. Se diferencia del color verdadero en que emplea
8 bits para cada componente RGB y, además, 8 bits adicionales para
un canal de transparencia.
En el tema 4 de la presente unidad aplicaremos todos los conocimientos que

hemos adquirido acerca de los modos de color para optimizar las imágenes
que utilizaremos en nuestra página web.
2.3. La resolución
Tal y como apuntábamos en la introducción a la unidad, la tecnología ha evo-

lucionado de forma notable en los últimos años. Gracias a dicha evolución,
en la actualidad podemos encontrar gran variedad de dispositivos que
permiten la conexión a los principales servicios de Internet, entre ellos al
servicio web. En este capítulo vamos a ver en qué consiste el concepto de
resolución y cómo nos afecta a la hora de diseñar una página web. También

pasaremos repaso a los tipos de resolución más utilizados.
2.3.1. ¿Qué es la resolución?
Este término suele aplicarse para definir el nivel de detalle con el que
podemos visualizar una imagen digital (Figura 2.7). También lo empleamos
para referirnos a la capacidad de los dispositivos que nos permiten su
visualización (como los monitores, las tarjetas de vídeo y las impresoras).
Cuando una imagen no dispone de suficiente resolución, solemos hablar de
imagen de baja calidad o pixelada (debido a que se aprecian los píxeles
de color).
Figura 2.7
Serie de imágenes
donde podemos ver la
pérdida de resolución.
27
Diseño web
2.3.2. Resolución de imagen aplicada a web
La resolución de una imagen digital viene definida por la densidad de

píxeles que contiene (Figura 2.8). El nivel de resolución se obtiene de mul-
tiplicar la cantidad de píxeles en horizontal por la cantidad de píxeles en
vertical. En consecuencia, la resolución de una imagen digital se expresa
del siguiente modo: columnas de píxeles x filas de píxeles; por ejemplo,
800x600 píxeles.
Figura 2.8
Ampliación de una imagen
donde podemos ver su
estructura en píxeles.
La evolución de las tarjetas gráficas y los monitores ha permitido que hoy
en día podamos visualizar imágenes con resoluciones de hasta 1600x1200
píxeles. Como diseñador/a web, el principal problema que te encontrarás en
este sentido será el de escoger una resolución para tu página web. Aunque
es imposible conocer la resolución que utilizará cada usuario, la mayoría
de diseñadores web han llegado al acuerdo tácito de usar una resolución
de 1024x768 píxeles como estándar (Figura 2.9). Este estándar se adoptó
hace unos años debido a la evolución de las tarjetas gráficas y la irrupción
de los monitores de pantalla plana. Anteriormente, la resolución estándar
para el diseño de páginas web era de 800x600 píxeles (Figura 2.10).
28
Diseño web
Figura 2.9
Página web a 1024
x 768 píxeles.
Figura 2.10
Página web a 800
x 600 píxeles.
Ahora que ya sabes cuál es el estándar de resolución para el diseño de
páginas web, tal vez te estés preguntando: ¿realmente se aprovecha toda
la resolución en el momento de diseñar la página web? La respuesta es no.
Los navegadores web, como Internet Explorer, Mozilla Firefox y Chrome,
disponen de menús y barras de navegación que restan espacio a lo que
constituye propiamente la página. Así pues, debemos restar a los 1024x768
las áreas destinadas a la interfaz del navegador.

En las figuras 2.11 a 2.13 te mostramos unas capturas de pantalla de Ex-
plorer, Firefox y Chrome en las que puedes apreciar el espacio que ocupa
la interfaz básica de cada uno de los programas.
29
Figura 2.11
Diseño web
Captura de Internet
Explorer.
Figura 2.12
Captura de Mozilla Firefox.
Figura 2.13
Captura hecha con Chrome.
Como puedes comprobar, la resolución inicial de 1024x768 píxeles se ve

reducida a 1007 x 674 px. en el caso de Explorer, a 1007 x 665 px. en Fire-
fox y a 1007 x 668 px. en Chrome. Es por este motivo que, cuando realices
el diseño de una web, deberás tener en cuenta estos datos para adaptar
tu trabajo a las distintas interfaces; así tendrás la seguridad de que en la
página sólo aparece, en caso necesario, la barra de desplazamiento o scroll
30
vertical. Evita por todos los medios que se muestre la antiestética barra de
desplazamiento horizontal que puedes ver en la figura 2.14.
Diseño web
Figura 2.14
En la parte inferior de
la ventana aparece la
barra de desplazamiento
horizontal.
Otro aspecto que deberás tener en cuenta cuando prepares las imágenes
para mostrar en la web es la cantidad de puntos por pulgada que deberán
tener. El concepto de puntos por pulgada, ppp o dpi (dots per inch), hace
referencia a la calidad de impresión sobre papel; concretamente, al número
de puntos de tinta que una impresora puede plasmar en el espacio lineal
de una pulgada. Por norma general, las impresoras suelen trabajar a 300
ppp, es decir, representan 300 puntos de color en el tramo correspondien-
te a una pulgada (25,4 milímetros). Tal como se muestra en la figura 2.15,

cuanta más resolución tiene la imagen, mayor calidad tendrá la impresión.
Figura 2.15
A mayor cantidad de
puntos por pulgada, mayor
calidad de imagen.
Como comentábamos anteriormente, las imágenes que prepares para mos-

trar en la web no deberán tener más de 72 ppp (o lo que es lo mismo, 72
31
dpi). Debido a su funcionamiento interno y a sus limitaciones, los monitores
de ordenador no son capaces de representar más de 72 ppp.
Diseño web
2.3.3. Resolución de imagen aplicada a dispositivos móviles
La revolución que ha supuesto la aparición de los móviles de tercera

generación (3G) ha tenido como consecuencia un interés por adaptar los
contenidos online a estos nuevos dispositivos. A día de hoy, el diseño de
aplicaciones web para móviles está orientado a los distintos modelos que
podemos encontrar en el mercado. Debido a la gran variedad existente y
al amplio abanico de resoluciones, no existe un estándar de resolución
que nos facilite la tarea a la hora de diseñar aplicaciones web para este
tipo de dispositivos.
Así pues, si recibes el encargo de realizar una aplicación web para telefo-
nía móvil, es indispensable que el cliente te acote a qué marca y modelo
está orientada. Contando con estos datos, podrás averiguar su resolución
y utilizar la apropiada.
En la figura 2.16 puedes ver algunos modelos de teléfonos móviles y las

resoluciones que pueden mostrar.
Figura 2.16
Ejemplos de móviles
3G con diferentes
resoluciones de pantalla.
32
Diseño web
RESUMEN
Resumen
En este segundo tema has podido ver cómo se forman las imágenes digitales
y las características principales de las imágenes de mapa de bits. Hemos
estudiado también el concepto de píxel y las diferentes profundidades de
color que obtenemos al codificar una imagen con más o menos bits de

información.
También has podido ver en qué consiste el concepto de resolución de una

imagen de mapa de bits. Seguidamente hemos analizado los diferentes tipos
de resoluciones que utilizaremos en función de si las imágenes con las que
trabajamos están destinadas a mostrarse en una página web o bien en un
documento que deba imprimirse.
Otro concepto importante que se ha tratado en este tema son los diferentes
tipos de resolución con los que trabajarás en función del dispositivo en el
que se visualizará el contenido que has creado. Un buen diseñador web
deberá preparar sus diseños para que puedan visualizarse correctamente
en todo tipo de navegadores, independientemente de las dimensiones en
píxeles que permita cada uno de ellos.
La irrupción de los teléfonos de tercera generación 3G nos obliga a plan-

tearnos un estudio de las resoluciones y características que posee cada
uno de los terminales. El conocimiento de estas particularidades facilitará
33
el desarrollo de aplicaciones web orientadas a la telefonía móvil.
Diseño web
Actividad práctica
Explica el porqué de la diferencia entre la resolución en ppp de una

imagen preparada para mostrarse por pantalla y una preparada para
enviar a imprenta.

que presentamos:
1. Definiremos el píxel como:

a) La unidad de color más pequeña que conforma una imagen digital.
b) Un término equivalente a imagen digital.

c) La unidad que nos sirve para definir la calidad de una imagen digital.
2. ¿Cuántas combinaciones de color podemos obtener con un byte

de información?
a) 255.
b) 256.
c) 8.
3. ¿Cómo definiremos la resolución de una imagen digital?

34
a) Indicando el número de píxeles que conforman el ancho y el número
de píxeles por pulgada.
Diseño web
b) Indicando la profundidad de color y la altura de la imagen en píxeles.

c) Indicando el número de columnas de píxeles y el número de filas
de píxeles.
4. ¿Qué valor podemos considerar el estándar de resolución para el

diseño de páginas web?
a) 1280x1024 píxeles.
b) 1024x768 píxeles.
c) 800x600 píxeles.
5. Al conjunto de píxeles que conforman una imagen lo denominamos

mapa de bits.
(V) (F)
6. La resolución de las imágenes que mostraremos en una página web

deberá ser de 72 puntos por pulgada.
(V) (F)
7. Una imagen con una profundidad de color de 8 bits por píxel podrá
mostrar sólo 16 colores.
(V) (F)
8. Si diseñamos una aplicación web orientada a móviles 3G, deberemos

adaptar la aplicación a las diferentes resoluciones que ofrece cada
tipo de terminal.
(V) (F)

9. Explica con tus propias palabras en qué consiste la profundidad de

color de una imagen.
10. Explica con tus propias palabras en qué consiste la resolución de

una imagen.
35
Diseño web
3. Tipos de imágenes aplicadas
al diseño web
En el tema anterior hemos profundizado en conceptos como píxel, profun-

didad de color y resolución. Todos ellos hacen referencia a las imágenes
de mapa de bits. Recordemos que bajo esta categoría se engloban todas
aquellas que están formadas por conjuntos de píxeles que poseen un
valor de color. Como verás en este tema, existen otro tipo de imágenes
denominadas vectoriales que se forman a partir de fórmulas matemáticas
y que también nos servirán para diseñar aplicaciones web.
A lo largo de las siguientes páginas vamos a seguir ahondando en el ámbito

de las imágenes y analizaremos todo aquello que debemos tener en cuenta
para optimizarlas para nuestra página web. También veremos los formatos
de imagen más utilizados y en qué casos es conveniente utilizar uno u otro.
3.1. La compresión de imágenes para web
Como hemos visto en el tema 2, las imágenes pueden presentar diferentes

profundidades de color y resoluciones. Es importante tener claro el uso final
que vamos a dar a la imagen que estamos tratando, pues no es lo mismo
prepararla para enviarla a imprenta que optimizarla para visualizarla en
la pantalla de un ordenador. En el primer caso la imagen deberá estar en
alta resolución, mientras que para visualizarla a través del monitor no será
36
necesario.
Diseño web
El estándar de resolución para imprenta está situado en los 300 ppp,

mientras que el estándar de resolución para web es de 72 ppp. ¿Qué
pasaría si utilizáramos una imagen de 300 ppp en nuestra web? La respues-
ta es sencilla: estaríamos utilizando una imagen con un exceso de calidad
que no se apreciaría en el monitor. Esto conllevaría, por otra parte, que
la imagen fuera más pesada. De este modo ralentizaríamos la navegación
por nuestra página web.
Por este motivo, siempre que tengamos que preparar imágenes para la
visualización en una página web, deberemos optimizarlas para que se
muestren con la mayor calidad y tengan el menor peso en kilobytes
posible.
Durante el proceso de optimización tendremos que realizar varias tareas,

desde reducir sus dimensiones (en el caso de que la imagen original sea
muy grande) hasta comprimir la imagen en un formato apto para la web.
Reducir el tamaño supone modificar sus dimensiones en píxeles. Imagina

que dispones de una imagen de 1800x1600 píxeles. Dicho tamaño sería
poco práctico para mostrar en la web, principalmente porque sobrepasa
con creces el estándar de 1024x768 píxeles. En consecuencia tendríamos
que redimensionarla.
Posteriormente deberíamos elegir el tipo de formato comprimido en el que

guardaríamos la imagen. Los principales formatos que se utilizan en web
son Jpg y Gif. A continuación te describimos sus características básicas y
te proporcionamos indicaciones para que sepas cuándo debes decantarte
por un tipo o por otro.
3.1.1. El formato Jpg
En primer lugar, debes saber que Jpg es la abreviatura de Joint Photogra-
Tipos de imágenes aplicadas al diseño web

phic Experts Group. Estas siglas en inglés hacen referencia al grupo de
profesionales de la fotografía que creó este método de compresión de
imágenes. Con el paso del tiempo se convirtió en el más utilizado. Una de
las principales características de este formato de imagen es que permite
una profundidad de color de 24 bits, de modo que las imágenes pueden
contener hasta 16,7 millones de colores.
Jpg es un método de compresión con pérdida. Este hecho es impor-

tante, pues determina la calidad final de la imagen. Cuando hablamos de
compresión con pérdida nos referimos a que cuando guardamos la imagen
en formato Jpg le aplicamos un algoritmo de compresión que hace que el
archivo resultante no pueda volver a tener la calidad que poseía la original.
Una de las características esenciales del formato Jpg es que podemos

37
definir el grado de compresión que queremos aplicar a la imagen. Si
especificamos una compresión muy alta, la imagen perderá mucha calidad
Diseño web
pero al mismo tiempo reducirá ostensiblemente su tamaño. Por el contrario,
si apenas comprimimos la imagen, la disminución de calidad apenas será
perceptible y el peso también se verá reducido, aunque en menor medida.
Puedes ver un ejemplo de los diferentes grados de compresión de una

imagen en la figura 3.1.
El formato de imagen Jpg está indicado para su utilización con imá-

genes de más de 256 colores. De hecho, la mayoría de cámaras digitales
existentes en el mercado utilizan este formato para almacenar las fotografías.
En el tema 4 estudiaremos el proceso para comprimir una imagen en Jpg.
Figura 3.1
Imagen Jpg con diferentes
Foto original Comprimida 80% Comprimida 20% grados de compresión.
3.1.2. El formato Gif
El acrónimo Gif proviene de los términos Graphics Interchange Format o

formato gráfico de intercambio. Este formato de imagen fue desarrollado
a finales de los años 80 y se caracteriza por ser, junto a Jpg, el más utilizado
en la web.
Gif es un método de compresión que se basa en la utilización de una

paleta de 2 hasta 256 colores. Por este motivo, si utilizamos este formato
de compresión con una imagen de menos de 256 colores, no apreciaremos
ningún tipo de pérdida de calidad. Por el contrario, si la imagen que vamos
a comprimir tiene más de 256 colores, todos los colores que queden fuera
del rango de los 256 colores desaparecerán.
En la figura 3.2 puedes ver la imagen original y sus equivalentes, a las que
les hemos aplicado compresión Gif con una paleta de 2 colores, una paleta
de 32 colores y finalmente una paleta de 256 colores.
38 Foto original Gif 2 colores Gif 32 colores Gif 256 colores

Diseño web
El formato Gif permite el uso de transparencias, es decir, de un color que

Figura 3.2
Imagen Gif con diferentes
permitirá traslucir el color de fondo de la página web o lo que haya debajo.
paletas de colores. Otra característica importante del formato Gif es que permite crear anima-
ciones. A partir de varias imágenes estáticas puede generarse una imagen
en movimiento que permita su reproducción en bucle. Para generar este tipo
de animaciones sencillas, Adobe Photoshop dispone de una funcionalidad
específica de gran utilidad para este tipo de imágenes.
En definitiva, este formato está indicado para imágenes que muestren

colores planos, textos sencillos o cuya cantidad de colores no supere los
256. En la mayoría de los casos utilizarás este tipo de compresión para
exportar imágenes de iconos o logotipos. En el tema 4 de esta misma uni-
dad veremos cómo exportar una imagen a formato Gif con una paleta de
colores determinada.
3.2. Otros tipos de imágenes de mapa de bits
Los formatos Jpg y Gif se han erigido en los estándares para el diseño de
páginas web. No obstante, existen otros formatos de imagen de mapa
de bits de uso muy común y que consideramos importante que conozcas.
Veamos sus características principales.
3.2.1. El formato Png
El formato Png se desarrolló como alternativa al formato Gif y está llamado

a ser su sucesor. Su principal inconveniente es que todavía hay algunas
versiones de navegador que no lo soportan. No obstante, la inmensa mayoría

lo visualizan correctamente y está convirtiéndose en un estándar.
Este formato conserva toda la información del color de la imagen y utiliza un

algoritmo de compresión sin pérdida para reducir el tamaño del archivo
(Figura 3.3). Esto significa que, tras la conversión, el archivo original no
perderá calidad. Al igual que el formato Gif, permite aplicar transparencia.
A diferencia de los demás formatos gráficos, el formato Png es de libre

distribución. Otra de sus ventajas es su optimización para la tecnología
Flash; de ahí que esté especialmente indicado para su uso en el popular
software de animación para web Adobe Flash.
39
Diseño web
Figura 3.3
Ejemplo de imagen
guardada en Png
mediante Photoshop.
3.3.2. El formato Tiff
El formato Tiff (Tagged Image File Format, o lo que es lo mismo, formato

de archivo de imágenes con etiquetas), se engloba en la categoría de las
imágenes de mapa de bits. El concepto etiquetas que forma parte de su
nombre hace referencia a que este formato permite definir las especifica-
ciones del tipo de imagen, el número de colores, el tipo de compresión, la
inclusión de transparencia, etcétera.
Cuando trabajamos con una imagen y la volcamos a formato Tiff, se nos

ofrece la posibilidad de guardar con o sin pérdida (a diferencia del for-
mato Jpg o el formato Gif, que sólo permiten guardar con pérdida) (Figura
3.4). Otro aspecto muy práctico de este formato es que ofrece la posibi-
lidad de almacenar más de una imagen en el mismo archivo. Es lo que
denominamos un formato de imagen por capas, donde cada capa puede
albergar una imagen diferente.

40
Diseño web
Figura 3.4
Guardar una imagen Tiff
mediante Photoshop.
A diferencia de lo que sucede con el formato Jpg, los archivos gráficos

en formato Tiff conservan con gran fidelidad los detalles de la imagen,
pero son más voluminosos. De ahí que muchos fabricantes de cámaras
digitales opten por utilizar el formato Jpg para ahorrar espacio en las tarjetas
de memoria. No obstante, las cámaras profesionales permiten guardar en
Tiff para obtener una calidad máxima.
Este formato suele emplearse para trabajar con originales de imáge-

nes. Imagina que debes realizar una web donde aparezca un catálogo de
productos. El fotógrafo profesional que se encargue de retratarlos con toda
seguridad te hará llegar las imágenes en formato Tiff. Estas imágenes serán
de gran resolución y, en consecuencia, pesarán mucho.
Tu metodología de trabajo consistirá en tomar las imágenes originales y
efectuar los retoques necesarios en formato Tiff para que no se pier-
da calidad. Una vez hayas terminado de editarlas, deberás reducir su
tamaño, aplicarles una resolución de 72 ppp y guardarlas en formato
Jpg optimizado para la web (Figura 3.5). Estudiaremos este proceso en el
siguiente tema.

Figura 3.5
Guardamos las imágenes
optimizadas para web.

3.2.3. El formato Bmp
El formato Bmp es uno de los más simples. Fue desarrollado conjuntamente

por Microsoft e IBM, lo cual explica que se utilice con frecuencia en las pla-
taformas Windows y OS/2. De nuevo nos encontramos frente a un archivo
del tipo mapa de bits. Cada vez está más en desuso y en casi todos los
ámbitos ha sido reemplazado por formatos más optimizados (Figura 3.6).
41
Diseño web
Figura 3.6
Guardar una imagen Bmp
mediante Photoshop.
3.2.4. El formato Psd
Psd es el formato nativo de Adobe Photoshop, la célebre aplicación para

editar fotografías. Es un formato de imagen que no tiene pérdida.
¿Sabías que...? Gracias a que utiliza 48 bits de color, permite guardar los retoques sobre la
Adobe Systems imagen original. Al igual que el formato Tiff, da opción a almacenar capas.
Incorporated es una
empresa norteamericana
de software que fue La compatibilidad de este formato con otros programas es relativamente
fundada en diciembre reducida; por lo que, si tienes un archivo en formato Psd, es recomendable
de 1982. Destaca que lo conviertas a otro formato. No obstante, guarda siempre el original
en este ámbito por
para asegurarte de que sigues teniendo la imagen en calidad máxima.
sus programas de
edición de páginas
web, vídeo e imagen En la figura 3.7 puedes ver cómo se trabaja en una imagen en formato Psd
digital. Algunos de sus empleando Adobe Photoshop.
programas estrella son:

Adobe Acrobat
(creación y lectura
de archivos Pdf).
Adobe Photoshop
(tratamiento fotográfico).
Adobe Illustrator
(imagen vectorial).
Adobe InDesign
(maquetación editorial).
Adobe After Effects
(postproducción
audiovisual).
42
Diseño web
Figura 3.7
Trabajamos una
imagen en formato Psd
mediante Photoshop.
3.2.5. El formato Raw
Raw es un formato de imagen que, a diferencia de otros formatos más

populares, como Jpg, no emplea métodos de compresión de datos con
pérdidas de calidad. Se usa en aquellos casos en los que nos interesa
archivar una fotografía tal como ha sido captada, sin ningún tipo de
manipulación por parte de la cámara. Posteriormente podemos procesarla
en el ordenador mediante un programa de tratamiento de imágenes. El gran
inconveniente de los formatos Raw es su falta de estandarización: cada
fabricante tiene su propia variante.
El formato de imagen Raw, así pues, está indicado para los profesionales
de la fotografía. Sólo las cámaras digitales profesionales permiten alma-
cenar en este formato.
3.3. Imagen vectorial
Hasta ahora hemos visto las características de las imágenes de mapa de

bits y qué formatos de imagen son los más comunes y utilizados. La imagen
vectorial constituye un concepto totalmente diferente.
Las imágenes vectoriales son representaciones de entidades geométri-

cas. Éstas pueden ser círculos, rectángulos o cualquier figura poligonal
y, por supuesto, líneas rectas y curvas. Todas estas entidades se pueden
representar mediante fórmulas matemáticas. A fin de cuentas, una recta es
la unión de dos puntos y un círculo está compuesto por un punto central y
un radio que nos marcará su amplitud. Este hecho provoca que una imagen

vectorial sea mucho más ligera que una imagen de mapa de bits, pues la
cantidad de información a almacenar es mucho menor.
En la figura 3.8 puedes ver la diferencia entre una imagen de mapa de bits
y una imagen vectorial.
La imagen de mapa de bits que hemos seleccionado como ejemplo presenta

píxeles muy grandes para que aprecies la diferencia con mayor claridad.
Mientras que la imagen vectorial sólo precisa dos valores para generar
el círculo (radio y punto central), la imagen de mapa de bits necesita la
información de veinte puntos para conseguir la representación del círculo.
43
Diseño web
Figura 3.8
Imagen de mapa de
bits (izquierda) e imagen
vectorial (derecha).
El hecho que una imagen vectorial esté compuesta por entidades geomé-
tricas nos permite realizar una serie de operaciones que con las imágenes
de mapa de bits son imposibles. Por ejemplo, podemos redimensionar la
imagen sin temor a que pierda calidad o definición.
Por el contrario, si disponemos de una imagen de mapa de bits en baja

resolución y deseamos ampliar su tamaño, el resultado será una imagen
pixelada y de una calidad inaceptable en la mayoría de los casos. Puedes
ver un ejemplo de este tipo de transformaciones en la figura 3.9.

Figura 3.9
En la imagen puedes
apreciar la diferencia entre
una imagen de mapa de

bits y una imagen vectorial.
Las imágenes vectoriales no tienen por qué limitarse a representar formas

básicas, como las que hemos visto hasta ahora. Existen varios programas
de edición de imagen vectorial que permiten generar ilustraciones muy
complejas y de gran atractivo visual. Algunos de los programas más
utilizados para tal fin son CorelDraw y Adobe Illustrator.

44
3.3.1. El dibujo vectorial en la web
Diseño web
A diferencia de las imágenes de mapa de bits, las imágenes vectoriales

que generan CorelDraw y Adobe Illustrator no pueden incluirse en el
código HTML que utilizamos para la realización de páginas web. Los
formatos de imagen Jpg y Gif, por el contrario, son reconocidos por todos
los navegadores.
Sin embargo, gracias a la aparición del programa Macromedia Flash en el

año 1996, los gráficos vectoriales se pudieron incorporar al servicio web.
Este software permitía la animación de gráficos en formato vectorial. La
compañía Macromedia fue adquirida posteriormente por Adobe y actual-
mente Adobe Flash es uno de los programas más utilizados para crear y
mostrar vídeos y animaciones vectoriales en la web.
En lo concerniente a contenido estático, cualquier gráfico vectorial puede

¿Sabías que...?
Las imágenes vectoriales convertirse a imagen de mapa de bits y almacenarse en formato Gif o
creadas en CorelDraw o Jpg. No obstante, el proceso de transformación provocará que la imagen
Adobe Illustrator poseen resultante pierda las principales características del archivo vectorial original:
un formato propio
no podrá redimensionarse sin perder calidad y pesará más.
que hace imposible
su visualización en los
navegadores web.
RESUMEN
Resumen
En este tema has podido ver algunos de los conceptos más importantes
que se imparten en esta unidad. Para un buen diseñador web es de vital
importancia conocer los distintos tipos de imágenes, sus formatos y sus
características. Gracias a estos conocimientos te será mucho más sencillo
escoger el mejor formato para incluirlo en las páginas web que realices.
Escoger el formato de imagen ideal nos permitirá realizar páginas más

livianas y facilitará la navegación a los usuarios. En definitiva, nos servirá

para optimizar nuestro sitio web.
Como has podido ver, los dos formatos de imagen más utilizados en la
web son Jpg y Gif. Mientras que el primero está indicado para comprimir
imágenes con gran riqueza tonal, el segundo es el más adecuado para imá-
genes donde la variedad de colores no supere los 256. El tercer formato en
discordia es Png, que está llamado a sustituir a las imágenes Gif.
También se han visto en este tema otros formatos que se utilizan para
guardar imágenes sin pérdida de calidad. Tiff y Psd son los más utilizados.
Recuerda que deberás conservar una copia de tus imágenes originales
aunque decidas comprimirlas a los formatos Jpg, Gif o Png.
Las imágenes vectoriales presentan muchas diferencias respecto a las

45
imágenes de mapa de bits. Éstas se forman a partir de figuras geométricas,
y su principal característica es que nos permiten ampliarlas sin pérdida
Diseño web
de calidad. Su principal aplicación en la web consiste en la realización de
animaciones vectoriales Swf mediante Adobe Flash.
Actividad práctica
Imagina que un cliente te envía una imagen de un logotipo para que

la incluyas en su web. ¿Qué formato de imagen utilizarás? Razona
tu respuesta.

que presentamos:
1. La resolución en puntos por pulgada ideal para una imagen que debe
mostrarse en web es:
a) 300 puntos por pulgada.

b) 150 puntos por pulgada.
c) 72 puntos por pulgada.
2. ¿Cuál es el objetivo final del proceso de optimización de una imagen

digital para web?
a) Aumentar el tamaño de la imagen para poder mostrarla con mayor
calidad.
b) Aplicar el formato de imagen correcto y lograr un compromiso entre
calidad y peso para aumentar la velocidad de carga de las imágenes.
46
c) Corregir los posibles fallos que tenga la imagen empleando herra-
mientas de retoque fotográfico.
Diseño web
3. Si deseas exportar la fotografía de un paisaje para tu web, ¿qué

formato de imagen utilizarás?
a) Gif.
b) Png.
c) Jpg.
4. De los siguientes formatos de imagen, ¿cuál utiliza compresión sin

pérdida?
a) Tiff.
b) Jpg.
c) Gif.
5. El formato de imagen más utilizado para mostrar imágenes en la

web es Jpg.
(V) (F)
6. En el formato Gif podemos elegir la paleta de colores que utilizará
la imagen.
(V) (F)
7. El formato Png está llamado a ser el sustituto del formato Gif.

(V) (F)
8. Es recomendable utilizar el formato Tiff para guardar imágenes ori-

ginales y no perder calidad.
(V) (F)

9. Explica con tus propias palabras las principales características del

formato Jpg.
10. Explica con tus propias palabras los rasgos característicos de las
imágenes de mapa de bits y de las imágenes vectoriales.
47
Diseño web
4. Herramientas de trabajo para
optimizar imágenes web
En este tema vamos a tratar la preparación de imágenes para la web des-

de un punto práctico. Como has podido ver, las imágenes que utilizaremos
para mostrar en las páginas web que realicemos deben cumplir una serie de
requisitos de resolución y formato de archivo. Existen en el mercado diversos
paquetes de software para el tratamiento y la producción de imágenes. En
nuestro caso, hemos optado por emplear Adobe Photoshop, puesto que
se trata de la aplicación más usada en su ámbito.
La versión que utilizaremos en las explicaciones que siguen a continuación

es la CS6. No obstante, puedes realizar tus prácticas con versiones ante-
riores o posteriores del programa, pues vamos a centrarnos en una parte
muy específica del mismo.
4.1. Optimizar imágenes para web en Photoshop

(Jpg, Gif y Png)
Para las prácticas que realizaremos en este apartado utilizaremos una ima-
gen en alta resolución. Por norma general, cuando te veas en la tesitura
de tratar imágenes para web, trabajarás con imágenes en alta calidad que
48
previamente se habrán usado para la realización de algún catálogo o folleto.
Diseño web
Con toda probabilidad, dichas imágenes te serán suministradas en forma-

to Tiff o Psd. En el caso que las que te faciliten sean de escasa calidad,
aparezcan pixeladas o posean resoluciones inferiores a 72 ppp, deberás
hablar con el cliente y solicitar imágenes en alta calidad. Ten presente que
las capacidades del software son limitadas y Photoshop se verá incapaz de
arreglar imágenes que por su propia naturaleza no resulten aptas.
Cabe también la posibilidad de que los archivos que te faciliten tengan

formato vectorial. En este tema vamos también a ocuparnos de este caso.
El software que utilizaremos para tratar imágenes vectoriales será Adobe
Illustrator y en los ejemplos podrás ver el proceso mediante el cual trans-
formaremos la imagen vectorial en un mapa de bits.
Antes de iniciar tus prácticas, recuerda que el formato al que deberás

convertir cada imagen dependerá de sus características. Así pues, si a
¿Sabías que...? simple vista puedes identificar el número de colores que posee la imagen,
Si no dispones de
Adobe Photoshop, utiliza el formato Gif. Por el contrario, si la imagen original emplea gran
puedes utilizar otros cantidad de colores, opta por el formato Jpg.
programas como Gimp
o Paint Shop Pro.
4.1.1. Modificar la resolución y el tamaño de una imagen
Para modificar la resolución y el tamaño de una imagen, en primer lugar

deberemos abrir el programa Adobe Photoshop. Una vez su interfaz se
muestre en pantalla, seguiremos los siguientes pasos:
1. Abrimos el archivo. Para ello, ejecutamos el comando Abrir, ubicado

en el menú Archivo (Figura 4.1).
Herramientas de trabajo para optimizar imágenes web

Figura 4.1
Menú Archivo, opción Abrir.
49
2. Seleccionamos la imagen Tiff accediendo a la carpeta donde la ha-
Diseño web
yamos guardado previamente (Figura 4.2).

Figura 4.2
Selección de una
imagen Tiff.
3. Visualizamos sus propiedades. Una vez abierta la imagen, compro-
bamos sus dimensiones y resolución. Para ello, deberemos seleccionar
la opción Tamaño de imagen en el menú Imagen (Figura 4.3).
Figura 4.3
Menú Imagen –
Tamaño de imagen.
4. Ajustamos la resolución. En la ventana emergente Tamaño de imagen,

ajustaremos la resolución a 72 píxeles/pulgada. Al realizar este cambio,
debes asegurarte de que las opciones Restringir proporciones y Re-
muestrear la imagen se encuentran activadas (Figura 4.4).
50
Diseño web
Figura 4.4
Cuadro de diálogo
Tamaño de imagen.
5. Editamos las dimensiones. Una vez hayas realizado el cambio de

resolución, el tamaño de la imagen original se modificará. Llegados a
este punto, vamos a fijar una anchura en píxeles de 1024. Fíjate en que,
al escribir la nueva anchura, la imagen automáticamente tendrá una
nueva altura proporcional fijada por el propio programa (Figura 4.5).
Figura 4.5
Cambiamos las
dimensiones de la imagen.
6. Almacenamos el fichero. Una vez realizados los cambios, puedes

guardar la imagen en formato Tiff accediendo de nuevo al menú Ar-
chivo. Recordemos que este formato puede emplear compresión con
pérdida o sin pérdida. Es importante, no obstante, que no sobrescribas
la imagen original, pues te conviene conservar siempre las imágenes
originales en alta resolución (Figura 4.6).
51
Diseño web
Figura 4.6
Guardamos una copia
de la imagen original con
los cambios aplicados.
Tras la realización de estos pasos dispondrás de una imagen modificada

en tamaño y resolución, y que seguidamente utilizaremos para realizar las
diferentes exportaciones a formato Jpg.
4.1.2. Exportar la imagen a formato Jpg
Partiendo de la imagen que hemos modificado en tamaño y resolución en

nuestro anterior apartado, vamos a detallarte el proceso para exportarla a
formato Jpg. Nuestro objetivo es obtener una imagen donde el equilibrio
entre la calidad y peso de la imagen sea el óptimo.
Los pasos que deberás seguir serán los siguientes:
1. Abrimos el archivo. En primer lugar, recuperaremos la imagen Tiff a

72 píxeles/pulgada y 1024 píxeles de ancho.
2. Ejecutamos el comando Guardar para Web. Una vez abierta la ima-

gen, seleccionaremos la opción Guardar para Web accediendo al menú
Archivo. Automáticamente se mostrará una ventana emergente en la
que podrás previsualizar la imagen tras recibir distintos tipos de
compresión. En nuestro caso utilizaremos el formato de compresión

Jpg. (Figura 4.7).
52
Diseño web
Figura 4.7
Menú Archivo –
Guardar para web.
3. Definimos la calidad. En el área derecha de la ventana encontramos

un modificador que nos permitirá especificar la calidad con la que de-
seamos comprimir nuestra imagen.
4. Editamos la segunda previsualización. En este paso seleccionaremos

la segunda de las cuatro previsualizaciones que nos ofrece el programa
y especificaremos que tenga una calidad Jpg de 100 (Figura 4.8).
Figura 4.8
Aplicamos cambios a
la segunda imagen.
5. Perfilamos la tercera previsualización. Acto seguido, haremos clic

sobre la tercera previsualización y le aplicaremos una calidad Jpg de
50 (Figura 4.9).
53
Diseño web
Figura 4.9
Aplicamos cambios a
la tercera imagen.
6. Modificamos la cuarta previsualización. Por último, seleccionare-

mos la cuarta previsualización y le aplicaremos una calidad Jpg de
10 (Figura 4.10).

Llegados a este punto, puedes apreciar claramente las variaciones en
cuanto a compresión de la imagen.
Figura 4.10
Aplicamos cambios a
la cuarta imagen.
En la primera previsualización, Photoshop nos mostrará la imagen

original. En la segunda, la imagen con una compresión Jpg a la
máxima calidad; y en las dos siguientes, la imagen con valores de
calidad 50 y 10. Como verás, la diferencia de calidad entre la calidad
100 y la calidad 10 es muy significativa. En esta última, si realizamos
un zoom, se pueden apreciar los efectos que ha tenido la compresión
54
sobre la fotografía.
Diseño web
Fíjate también en que justo debajo de cada una de las previsualizaciones

se indica el peso de la imagen. Si haces clic con el botón derecho del
ratón sobre la zona donde aparece el valor en kilobytes, podrás indicarle
a Photoshop que te muestre una estimación del tiempo de carga de
la imagen en función de las diferentes velocidades de conexión.
La elección del nivel de compresión que más nos convenga depende-

rá del tipo de imagen con la que estemos trabajando. Trata de encontrar
un tamaño mínimo sin que se aprecie la pérdida de calidad.
7. Guardamos el fichero. En este caso, vamos a elegir una compresión

de calidad 50. Una vez hayamos seleccionado la previsualización co-
rrespondiente, deberemos presionar el botón Guardar (Figura 4.11).
Automáticamente Photoshop nos solicitará que especifiquemos la ubi-
cación y el nombre de archivo de la imagen comprimida. Llegado este
punto, elegiremos la carpeta donde almacenamos todas las imágenes
optimizadas que emplearemos en nuestra web. En otra carpeta
diferente conservaremos las imágenes originales en formato Tiff. No
olvides que una vez hayas guardado una imagen en formato Jpg se
producirá una pérdida de calidad irrecuperable.
Figura 4.11
Guardamos copia en Jpg
en nuestro disco duro.
4.1.3. Exportar la imagen a formato Gif
Para el proceso de exportación a formato Gif vamos a utilizar una imagen

de características distintas a la que hemos utilizado para la exportación a
Jpg. Esta decisión se debe a que el formato Gif está indicado para aque-
llas imágenes en las que se puede identificar el número de colores a
55
simple vista. El fichero que utilizaremos corresponderá a un logotipo que
nos ha sido facilitado en formato Tiff.
Diseño web
Los pasos a completar serán los siguientes:
1. Modificamos las propiedades de la imagen. En primer lugar, realiza-

remos un proceso idéntico al que hemos seguido en el ejemplo anterior:
abriremos la imagen original y reduciremos su resolución hasta los
72 píxeles/pulgada. También fijaremos el tamaño a 1024 píxeles de
anchura (Figura 4.12).
2. Ejecutamos el comando Guardar para Web en el menú Archivo.

Automáticamente, se mostrará una ventana emergente donde podrás
previsualizar el aspecto que ofrece la imagen al aplicarle distintos tipos
de compresión. En este caso utilizaremos el formato Gif. Por defecto,
dejaremos activadas las opciones Paleta Selectiva y Sin tramado. Lo
que variaremos en las diferentes previsualizaciones será el número de
colores que utilizamos para comprimir la imagen. En cuanto al modo
de paleta selectiva, podemos decir, que es el que Photoshop tiene por
defecto al exportar una imagen a formato Gif. Este tipo de paleta se
caracteriza por crear una tabla de colores donde se favorecen amplias
áreas de color y la conservación de los colores Web.
Figura 4.12
Reducimos la resolución
de la imagen a 72
píxeles/pulgada.
3. Nos guiamos por las previsualizaciones. La primera previsualización

es la de la imagen original. En la segunda, aplicaremos una paleta
de 256 colores (Figura 4.13); en la tercera, una paleta de 64 (Figura
4.14); y, en la cuarta, una de 16 (Figura 4.15). Como puedes apreciar,
la imagen sobre la que trabajamos tiene 16 colores, por lo que es to-
56
talmente innecesario codificarla a 256 o a 64 colores, pues son más de
los que necesita. En un caso como este, un mayor número de colores
Diseño web
sólo provocará un aumento del peso de la imagen.
Figura 4.13
Aplicamos los cambios
a la segunda imagen.
Figura 4.14
a la tercera imagen.
57
Figura 4.15 Diseño web

a la cuarta imagen.
4. Guardamos el archivo. Para terminar, seleccionaremos la previsua-

lización en la que se aplica la paleta de 16 colores y pulsaremos el
botón Guardar. Photoshop nos solicitará la ubicación y el nombre que
queremos asignarle al archivo (Figura 4.16).
En algunas ocasiones deberás exportar varias imágenes que utilizarás

dentro de la misma página web. Debes tener cuidado con las nomen-
claturas que utilizas para evitar sobreescribir imágenes que previamente
habías exportado.

Figura 4.16
Guardamos una copia

en formato gif.
4.1.4. Exportar la imagen a formato Png
Como apuntábamos en el tema anterior, el uso del formato Png está cada
vez más estandarizado. La compresión sin pérdida, el hecho de que esté
libre de derechos, su elevado nivel de calidad y la posibilidad de mante-
ner transparencias son algunas de sus ventajas. No obstante, no permite
crear animaciones.
58
A continuación, te detallamos los pasos que deberás seguir para obtener

Diseño web
un archivo en formato Png-24 a partir de una imagen original Tiff:
1. Editamos las propiedades de la imagen. En primer lugar, realizaremos

un proceso idéntico al que hemos seguido en los ejemplos anteriores:
reduciremos la resolución de la imagen hasta los 72 píxeles/pulgada
y fijaremos su tamaño en 1024 píxeles de anchura (Figura 4.17).
2. Una vez abierta la imagen, accederemos al menú Archivo y seleccio-

naremos la opción Guardar para Web. Automáticamente se mostrará
una ventana emergente en la que podrás previsualizar cómo queda la
imagen tras aplicarle diferentes tipos de compresión. Puesto que uti-
lizaremos el formato de compresión Png-24, sólo será necesario que
tengamos dos previsualizaciones para comparar: la correspondiente a
la imagen original y la que implementa una compresión Png-24. Para
poder realizar esta previsualización, debes seleccionar la pestaña 2
copias en la parte superior de la ventana (Figura 4.18).
Elegimos el formato de compresión Png-24 porque permite el uso de trans-

parencias de alta calidad. Como puedes apreciar en el ejemplo, al aplicar
la compresión sobre la imagen original ésta mantiene la transparencia.
Figura 4.17
Editamos las propiedades
de la imagen.
59
Diseño web
Figura 4.18
Previsualización de
la imagen png.
3. Una vez hemos visto como queda la imagen comprimida en Png-24,

procederemos al almacenamiento del fichero resultante. Haz clic en
el botón Guardar. Elige la ubicación y el nombre del archivo y obtendrás
una imagen optimizada en formato Png-24 (Figura 4.19).
Recuerda que el formato Png también permite la compresión de imá-

genes a 8 bits, la calidad final de este tipo de imágenes será inferior a
la de 24 bits, pero en algunos casos puede ser de gran utilidad para
poder ahorrar algo de peso al conjunto de la imagen.
Figura 4.19
Guardamos la imagen
en formato Png.
60
Diseño web
RESUMEN
Resumen
En este tema hemos aprendido a preparar los diferentes tipos de imágenes

que posteriormente utilizaremos en nuestro proyecto web. Para ello, hemos
empleado Adobe Photoshop, uno de los programas más utilizados para el
tratamiento de imágenes a nivel profesional.

El proceso de exportación de imágenes Jpg nos permite afinar el tipo de
compresión que aplicaremos. Como has podido ver, Photoshop nos muestra
distintas versiones de la imagen original y nos da opción a seleccionar la
que más nos conviene en función de la calidad y la compresión aplicada.
El mismo proceso es aplicable a las imágenes Gif, cuya particularidad reside

en la cantidad de colores que tendrá la paleta con la que queremos com-
primir la imagen. Al igual que en el proceso de compresión a Jpg, podemos
obtener diversas previsualizaciones del resultado final que tendrá la imagen.
Por último, hemos estudiado la exportación de imágenes a formato Png-24.

La característica fundamental de este formato es la gran calidad con la que
permite guardar las imágenes con transparencia. En este sentido, resulta
mucho más apto que el formato Gif.
61
Diseño web
Actividad práctica
Selecciona una imagen de alta calidad (puedes buscarla en Google)

y prueba a exportarla a diferentes calidades Jpg con Adobe Photo-
shop. Observa los resultados obtenidos en función de los distintos
niveles de compresión y escribe los tamaños de la imagen y de la
velocidad de descarga para una conexión de 256 Kb/s.

que presentamos:
1. ¿Qué formato de imagen utilizaremos para comprimir una imagen

con menos de 256 colores?
a) Tiff.
b) Gif.
c) Jpg.
2. ¿Mediante qué opción de Adobe Photoshop podremos visualizar

los diferentes niveles de compresión que aplicamos a una imagen?
a) Guardar como.
b) Guardar para Web.
62
c) Guardar.
Diseño web
3. ¿Cuántas previsualizaciones simultáneas podemos obtener en el

proceso de Guardar para Web?
a) 4.
b) 6.
c) 8.
4. ¿Cuál de los siguientes formatos permite la compresión de imágenes

con transparencia pero no nos deja crear animaciones?
a) Gif.
b) Bmp.
c) Png.
5. Una vez hayamos guardado una imagen en formato Jpg podremos

recuperar la calidad original.
(V) (F)
6. Podemos indicarle a Photoshop que realice un cálculo estimado del
tiempo de descarga de una imagen en función del tipo de conexión
del usuario.
(V) (F)
7. Siempre que exportemos una imagen en formato Gif, deberá tener

un máximo de 64 colores.
(V) (F)

8. El mejor formato de compresión con transparencia es Png-24.
(V) (F)
9. Explica con tus propias palabras las principales características del

formato Gif.
10. Explica el proceso que seguirías para valorar el nivel de compre-

sión Jpg que le aplicarás a una imagen que deseas publicar en tu
página web.
63
Diseño web
5. Diseño gráfico y usabilidad
aplicada a la web
El tema que vas a ver a continuación aborda el diseño gráfico desde la

perspectiva del usuario. Uno de los mayores errores que cometen muchos
diseñadores web es plantear páginas web diseñadas a su propio gusto.
Una buena aplicación web es aquella en la que previamente se ha estudiado

al futuro usuario y se ha pensado en todas las necesidades que tendrá y
cuál es la mejor forma de solucionarlas. En definitiva, se trata de hacer que
la página web sea lo más usable posible por parte de los visitantes. En este
tema vamos a ver una serie de conceptos y procesos que nos ayudarán a
plantear un diseño usable de nuestra aplicación web.
5.1. La usabilidad
La usabilidad es un anglicismo que significa facilidad de uso. Podemos

definir el término de manera más extensa como la sencillez con la que las
personas pueden utilizar una herramienta determinada con el fin de al-
canzar un objetivo concreto. Esta definición puede parecer un tanto difusa,
pero si analizamos un poco la Historia veremos cómo han ido evolucionando
las máquinas para volverse más eficaces y también más fáciles de usar.
64
La usabilidad puede aplicarse a cualquier objeto manufacturado, desde un

Diseño web
grifo hasta una aplicación informática. En todos los casos previamente habrá
habido un estudio de los usuarios para adecuar el producto final a sus
necesidades. En el caso de la maquinaria, son los ingenieros y diseñadores
industriales quienes realizan dicho estudio. En la figura 5.1 puedes ver un
ejemplo bastante claro de la evolución en el diseño y la ergonomía, en este
caso, de los mandos o joysticks de las videoconsolas.
Figura 5.1
Esquema de la evolución
de la ergonomía de los
mandos de videoconsolas.
En el caso de las aplicaciones web, es el diseñador web quien debe
conocer al usuario y adecuar el producto a sus necesidades. Si anali-
zamos la relación entre las personas y los ordenadores, observaremos que
la informática ha evolucionado muy rápidamente en un período de tiempo
muy breve que abarca desde los primeros ordenadores, que cumplían
tareas muy particulares y en los que la interacción con el equipo informático
debía llevarla a cabo un usuario muy preparado, hasta los ordenadores
actuales, preparados para completar tareas muy variadas de una forma
mucho más sencilla. En la figura 5.2 podemos ver un claro ejemplo de las
diferencias entre un ordenador antiguo y uno actual, que afectan tanto al
aspecto externo como al interno. El primero funciona mediante lenguaje de
comandos; y el segundo, con un entorno de ventanas.
Diseño gráfico y usabilidad aplicada a la web

Figura 5.2
A la izquierda, un
ordenador Amstrad
CPC 464 del año
1984; a la derecha,
un portátil de 2009.
El diseño de las aplicaciones y las formas de interacción con los ordenado-

res han evolucionado hasta dar como resultado aplicaciones y programas
65
que pueden ser utilizados por personas sin conocimientos informáticos. Un
ejemplo de este tipo de aplicaciones podría ser la que ejecuta un cajero
Diseño web
automático, donde el usuario puede interactuar con un ordenador de manera
extremadamente sencilla.
En definitiva, la usabilidad aplicada al diseño web nos permitirá anali-

zar a los usuarios y plantear una serie de soluciones que faciliten su
navegación por nuestra página web. Nuestro objetivo será fidelizar a los
usuarios de modo que iteren las visitas y optimizar su experiencia.
5.2. Análisis de la audiencia o público objetivo
Una vez definido el concepto de usabilidad, te ofrecemos una serie de pun-

tos claves que deberás tener presentes para asegurarte de que la página
¿Sabías que...?
web que vas a crear sea usable: El primer cajero
automático se instaló
1. Identificar y analizar el tipo de usuarios que van a visitar nuestra en Londres en 1967
y permitía realizar
página web. Toda la información recopilada sobre los usuarios nos
operaciones bancarias
servirá como base para comenzar el diseño. Para ello, debemos resu- mediante una interfaz
mir y sintetizar los estudios realizados y el resto de la información que muy sencilla.
poseamos. Podremos englobar a los usuarios en función de la infor-
mación que buscan en nuestra web, de los conocimientos informáticos
que tienen, de la tecnología de la que disponen, etc.
2. Centrar el diseño de la aplicación en los usuarios a los que va

dirigida. Imaginemos que nos encargan una página web orientada a
individuos situados en una franja de edad que va de los 50 años en
adelante. En la mayoría de los casos, este tipo de personas no estarán
tan familiarizadas con Internet como lo podría estar la franja de edad de
20 a 30 años. Por ese motivo, intentaremos dar una información muy
concisa. Utilizaremos menús de navegación muy sencillos, evitando
los menús desplegables. Además, deberemos emplear unos tamaños
de letra algo mayores de lo habitual para facilitar la lectura.
En la figura 5.3 puedes ver un portal orientado a un público con un

perfil de edad específico, en este caso personas de más de 50 años.
66
Diseño web
Figura 5.3
Portal mayormente.com
orientado a personas
mayores.
Otro ejemplo podría ser el de una página destinada a público infantil,

donde se tendrá muy en cuenta que la apariencia de la web debe ser
atractiva a la vez que divertida, con colores vivos y personajes ani-
mados que amenicen la experiencia de los niños mientras consultan
los contenidos.
En contraste con lo anterior, en la figura 5.4 podemos apreciar el aspecto

que ofrece un portal orientado a un público juvenil (de 7 a 12 años).
Tanto los contenidos como la imagen que se proyecta se adecuan a la
franja de edad de este público objetivo.
Figura 5.4
Página del Club Megatrix,
orientada a los más
jóvenes de la casa.
Por otra parte, si estamos realizando la página web de un hospital,

de una mutua o de un centro de yoga, usaremos colores blancos
o tonos pastel. Si lo que estamos diseñando es la página web de un
grupo de rock, está totalmente justificado utilizar negros, rojos y tonos
oscuros con fondos barrocos. En la página siguiente podemos ver ejem-
plos que ilustran lo expuesto. En la figura 5.5 se muestra una página en
la que la imagen gráfica es lo suficientemente importante como para
67
situarse por encima de los contenidos. En la figura 5.6 podemos ver
una web muy minimalista en cuanto a grafismo, pues su objetivo es
Diseño web
destacar los servicios que se ofrecen.
Figura 5.5
Página web de Metallica,
grupo de heavy metal.
Figura 5.6
Ejemplo de un
portal de salud.
3. Facilitar la interacción del usuario con la aplicación. El visitante de

la página web debe saber en todo momento dónde está, dónde ha
estado y adónde puede ir. Así pues, le informaremos en todo momen-
to del apartado concreto en el que se encuentra, de cómo volver a la
página principal, etcétera.
En este sentido, es conveniente destacar las secciones que más visitan

los usuarios situándolas en una posición predominante dentro de la
interfaz gráfica de la web.
68
En la figura 5.7 puedes observar, resaltado en naranja, un hilo de Ariad-

Diseño web
na o breadcrumb. Este elemento de navegación informa al usuario del

camino que ha seguido desde que ha entrado en la web.
Figura 5.7
Ejemplo de breadcrumb.
4. Garantizar que la web resulte accesible para el público al que nos

dirigimos. Existen diversos navegadores de Internet, y a la hora de
maquetar HTML debemos garantizar que la web se vea correctamente
en Internet Explorer, Mozilla Firefox, Safari, Google Chrome, etc.
(Figura 5.8). En definitiva, debemos conseguir que nuestra página web
sea multinavegador o crossbrowser.
Figura 5.8
De izquierda a derecha,
logotipos de Mozilla
Firefox, Internet Explorer,
Google Chrome y Safari.
En ocasiones, recibirás el encargo de remodelar una página web existente.

Para valorar la usabilidad en un proyecto de este tipo, deberás efectuar
dos tipos de análisis:

1. Análisis subjetivo de la usabilidad. Consiste en preguntar a los usua-
rios de la web qué dificultades se encuentran para navegar, qué aspectos
consideran superfluos, o bien qué utilidades echan en falta. Recuerda que
es imprescindible conocer su opinión.
2. Análisis objetivo de la usabilidad. Este tipo de análisis consiste en

estudiar cómo interactúan los usuarios con la aplicación web. El estudio
se puede realizar con un grupo de individuos de forma presencial, o bien
analizando el recorrido que realizan cada vez que visitan nuestra web. En
qué apartados entran, qué tiempo dedican a cada sección...
5.3. La regla de los tres clics

69
La regla de los tres clics (three-click rule) recomienda organizar los con-
Diseño web
tenidos de nuestra página web de forma que no tengamos que hacer más
de tres clics para llegar a la información que buscamos. Si aplicamos
esta regla de forma correcta, el usuario de nuestra página se sentirá grati-
ficado al navegar por nuestra web. De este modo, posiblemente regrese
en un futuro a consultar más contenidos (Figura 5.9).
Esta regla debe adaptarse de una forma lógica. En muchos casos nos
encontramos con páginas web en las que, aunque toda la información está
a menos de tres clics, los datos se organizan de forma caótica. Así, tal vez
acabemos llegando a la información en menos de tres clics, pero habremos
empleado mucho tiempo en localizar los apartados que nos interesan. Esto
resulta contraproducente, pues la sensación de dificultad que se llevará
el usuario posiblemente conseguirá que no vuelva a visitar la página web.
Ten siempre presente que una buena organización de la documentación

reduce de forma considerable el tiempo de navegación, permitiendo a
los usuarios emplear dicho tiempo en la visualización de los contenidos. En
consecuencia, podemos concluir que la regla de los tres clics consiste, en
esencia, en una óptima organización de la información. En este sentido,
la realización de un guión orgánico de la web es esencial.
¿Sabías que...?
Una forma eficaz de
recoger las valoraciones
de los usuarios consiste
en emplear formularios
de encuesta. Al
mismo tiempo es una
manera de fidelizarlos,
pues así hacemos
que se impliquen en
la web y participen
en su evolución.
Figura 5.9
Imagen representativa de
la regla de los tres clics.
Aunque la regla de los tres clics haya sentado las bases de la usabilidad
y de la organización de los contenidos web, existen una serie de estudios
acerca de cómo nos comportamos los humanos delante del ordenador
70
que han dado como resultado otra teoría que apunta en una dirección di-
ferente. Dicha teoría afirma que los usuarios de Internet no damos tanta
Diseño web
importancia al número de clics como al hecho de ir encontrando datos

que sabemos que nos conducen a la información que estamos buscando.
De acuerdo con esta tesis, lo fundamental es que los enlaces y las des-
cripciones de categorías sean lo suficientemente claras como para
llevarnos a la información que nos interesa. El número de clics queda,
así pues, relegado a segundo término.
En resumen, como diseñador web deberás estructurar la información

de tu web de modo que el usuario encuentre lo que busca de la forma
más rápida y sencilla posible.
¿Sabías que...?
5.4. La interfaz web
La realización de un
guión orgánico de la
aplicación nos ayudará a En informática, definimos interfaz como la conexión física que nos permite
tener una idea clara de la comunicarnos con una máquina u ordenador de una forma sencilla. Si
dimensión real de nuestra
aplicamos esta definición a una página web, quedan englobados dentro
web. Esto nos permitirá
estructurar fácilmente la del concepto interfaz todos aquellos elementos gráficos y textuales que
información por niveles. nos permiten interactuar con facilidad con la aplicación alojada en el
servidor web.
Todos los elementos de la interfaz (menús, botones, etcétera) deben estar
preparados para ser utilizados de forma sencilla. Cuando el usuario interac-
túe con ellos, la aplicación debe llevar a cabo la acción deseada. De este
modo el usuario obtendrá lo que viene a buscar y tendrá una sensación de ¿Sabías que...?
control sobre la aplicación. En caso contrario, lo que ocurrirá es que el
usuario experimentará frustración y abandonará nuestra web.
Según Jakob Nielsen, uno de los estudiosos más importantes de la usa-

bilidad de los sitios web, los elementos más importantes a tener en cuenta
a la hora de diseñar una interfaz son los siguientes:

1. Dejar claro el propósito de la página web. El sitio debe explicar a Jakob Nielsen (nacido en
quién pertenece y qué permite hacer. Por supuesto, debe hacerlo de la 1957 en Copenhague,
Dinamarca) es uno de los
manera más simple y rápida posible. En la figura 5.10 puedes observar
autores más respetados
un ejemplo de una página web con un marcado aspecto comercial. de cuantos estudian
la usabilidad web y
escriben acerca del
tema. Su libro Use It se
ha convertido en material
de referencia para
muchos diseñadores.
71
Diseño web
Figura 5.10
Ejemplo de página web
con aspecto comercial.
2. Ayudar a los usuarios a encontrar lo que necesitan. Esto implica que

la página debe contar con un sistema de navegación visible y comple-
to. Además, éste deberá estar complementado por algún sistema de
búsqueda que resulte efectivo para acceder al contenido que no se
muestra a simple vista (Figura 5.11).
3. Organizar los contenidos de la página web. El contenido debe mos-

trarse de manera clara, con títulos que resulten fáciles de compren-
der para el usuario y con enlaces hacia las secciones más populares
ubicados en lugares lógicos. En este sentido, resultará de gran ayuda
efectuar un seguimiento de las visitas para comprender qué es lo
más visto y lo más buscado del sitio que administramos (Figura 5.12).
Figura 5.11
Ejemplo de sistema de
búsqueda integrado
en una página web.
72
Diseño web
Figura 5.12
con los contenidos
claramente organizados.
4. Usar el diseño gráfico para mejorar la interacción, y no para defi-

nirla. Los elementos gráficos de la web deben estar dispuestos para
ayudar a que se cumplan los objetivos del sitio, y no sólo con fines
ornamentales (Figura 5.13).
5. Utilizar textos orientados a la web. Como veremos en el siguiente

tema, los textos en la web deben cumplir una serie de requisitos para
facilitar su lectura en pantalla. Mientras exploramos la web, nuestra vista
se detiene en cabeceras y titulares, en listados de información y en
gráficos que llaman nuestra atención. Este hecho marca una jerarquía
visual que debemos respetar al máximo para facilitar la comprensión
por parte del usuario.
Figura 5.13
con un diseño que invita
a navegar por ella.
Nielsen también destaca el orden de lectura como un aspecto muy impor-

tante a la hora de plantear la interfaz de la aplicación. Una serie de estudios
demuestran que los usuarios “escaneamos” la página web empezando por
la esquina superior izquierda, siguiendo hacia la derecha y posteriormente
hacia la parte inferior del documento.
En la figura 5.14 podemos apreciar, en color rojo, una representación de las

zonas a las que, de forma inconsciente, el usuario presta mayor atención.
En azul hemos resaltado aquellas en las que se fija menos. Este tipo de
73
estudios científicos nos ayudarán a plantear una interfaz gráfica donde los
elementos más importantes se sitúen dentro de las zonas rojas.
Diseño web
Figura 5.14
Las áreas marcadas en
rojo indican las zonas
donde el usuario presta
mayor atención.
5.5. Hacer los contenidos de la web más usables
Como diseñador web, uno de los principales retos que se te plantearán

es el de seleccionar y adaptar los contenidos del proyecto web que estás
realizando. La tecnología actual permite mostrar todo tipo de material (ví-
deo, audio y animación) de forma fluida. Este abanico de posibilidades se
convierte, en ocasiones, en un factor contraproducente, debido a su mal
uso que se hace de ellas.
Todos hemos navegado por páginas web en las que el diseñador se em-
peña en demostrarnos sus habilidades en el uso de animación Flash que
implementan un interfaz innovador. A menudo, esto va en detrimento del
contenido, que es lo verdaderamente importante. Situaciones de este tipo
son las que debemos evitar en la medida de lo posible. La tecnología y el
diseño deben estar al servicio de la usabilidad. De lo contrario, nuestra
página web dejará de ser interesante para los usuarios después de la pri-
mera visita.
5.5.1. Uso de la tecnología Flash
Flash es una herramienta muy potente que permite la realización de páginas

web muy dinámicas e interactivas. Para poder visualizar en el navegador
una página realizada en Flash, es necesario tener instalado un comple-
mento o plugin. Aunque la mayoría de los navegadores lo implementan, no
podemos estar seguros de que esté instalado en todos. Por este motivo,
es muy importante que como diseñadores web, razonemos el uso de esta
74
tecnología y tengamos en cuenta los siguientes puntos:
Diseño web
• Si decidimos hacer la página web íntegramente en Flash, deberemos

realizar una versión alternativa en HTML para que los usuarios que
no dispongan del plugin puedan visualizar los contenidos. Nada re-
sulta más frustrante para un usuario que acceder a una URL y no poder
ver el contenido.
• Cuando realizamos una página web íntegramente en Flash, con frecuen-

cia la aplicación pesa bastante y esto provoca que el usuario tenga que
pasar unos instantes delante del monitor sin recibir ningún estímulo. Así
pues, habilitaremos una barra de progreso o un indicador de por-
centaje que muestre el tiempo de carga que falta. En caso contrario,
lo que posiblemente ocurrirá es que, transcurridos unos segundos sin
obtener información, el usuario decidirá abandonar el sitio web.
¿Sabías que...?
El plugin o complemento
para poder visualizar • Cuando nuestra página web muestre una animación inicial en Flash a
aplicaciones web modo de presentación, habilitaremos un botón para omitirla y acce-
realizadas en Flash se der directamente al contenido de la web. En la imagen 5.15 puedes
denomina Flash Player,
ver una página en la que se ha habilitado un indicador de carga de la
y puede descargarse
desde la web de Adobe aplicación Flash. Observa que el botón que se muestra en el área inferior
de forma gratuita. nos permite saltar la animación.
• Si nuestra web está realizada en HTML, evitaremos implementar los
menús y demás elementos de navegación mediante tecnología Flash;
ya que, si por un casual el usuario no dispone del plugin, no podrá na-
vegar por la página web.
¿Sabías que...?
Poco a poco HTML5,
va sustituyendo a las
páginas implementadas
con Flash.

Figura 5.15
Ejemplo de carga de
una animación Flash y la
posibilidad de saltarla.
75
Diseño web
5.6. Escribir para la web
El ser humano lleva más de dos mil años leyendo y escribiendo sobre
papel. La irrupción de la informática, y más particularmente la llegada de
Internet, ha provocado que tengamos que adaptarnos a leer y escribir para
este nuevo medio.
Lo primero que deberás plantearte en el momento de crear los contenidos

de tu web es cómo escribir y organizar los textos de forma que la lectura
sea cómoda para los usuarios que la visiten. En este apartado vamos a
ver algunas de las claves que asegurarán que escribimos correctamente
para este nuevo medio, pues el texto sigue constituyendo más del 80% de
los contenidos de las páginas web disponibles en Internet a día de hoy.
Estudios rigurosos sobre el comportamiento de los usuarios demuestran que

leer en pantalla resulta entre un 25% y un 30% más lento que hacerlo
sobre papel. La lectura continuada conlleva un cansancio más acentuado
y una menor capacidad de concentración.
A continuación, te ofrecemos una serie de datos que deberás tener muy en
cuenta a la hora de trabajar tus contenidos textuales:
• Como hemos comentado en puntos anteriores, el orden de lectura es

muy importante a la hora de organizar la información en la web. Está
demostrado científicamente que los usuarios escaneamos visualmente
la web en busca de alguna información que nos llame la atención. Por
este motivo, estructuraremos los contenidos textuales empleando
títulos, frases cortas y, sobre todo, destacando la información más
importante en las zonas de mayor actividad visual, tal y como se ilustra
en la figura 5.16.
Figura 5.16
El orden de lectura
condiciona la disposición
de los elementos
dentro de la interfaz
76
de la página web.
Diseño web
• Cuanto mayor es el bloque de texto, más aumenta el cansancio. Se

acentúa la impaciencia y surge la posibilidad de que el usuario desista
de la lectura y se marche a otra página, guardando un mal recuerdo de
su visita. Una vez más, es importante fraccionar los textos de modo que
puedan ser fácilmente legibles. Resalta frases o utiliza listas y tablas
en lugar de escribir párrafos extensos. El siguiente ejemplo muestra el
mismo texto escrito de dos formas distintas. La que mejor adaptada está
al lenguaje web, es la que usa una lista para sintetizar la información:
• Usar una tipografía adecuada es esencial para garantizar una buena
legibilidad. Utilizaremos, así pues, tipografía de palo seco o sans-serif

(estudiaremos a fondo las tipografías en el siguiente tema). El tamaño de
la letra es importante: cuanto más pequeña sea ésta, más se dificultará
la lectura. Siempre que sea posible deberemos utilizar colores oscuros
o negro sobre fondos claros para facilitar la legibilidad.
• Evitar errores ortográficos y gramaticales es esencial. Es fundamental

que los textos de la web estén redactados de forma correcta en lo refe-
rente a ortografía y gramática. De lo contrario, perderemos credibilidad
y no ofrecemos una imagen seria por más que los contenidos sean muy
interesantes e innovadores (Figura 5.17).
77
Figura 5.17 Diseño web

Hay que mostrar especial
atención en evitar
errores ortográficos.
RESUMEN
Resumen
La usabilidad aplicada al diseño web nos permite realizar estudios sobre

los usuarios y plantear una serie de soluciones que faciliten su navegación
por nuestra página web. Tiene como objetivo fidelizar las visitas y optimizar
la experiencia de los internautas. Plantear y organizar la aplicación web de
una forma usable es tan importante como el propio contenido que mostra-
remos en nuestra web.
Antes de iniciar un proyecto web, debemos identificar y analizar el tipo de

usuarios que van a visitar nuestra página. En la siguiente fase, crearemos
un diseño de aplicación centrado en los usuarios a los que va dirigida y que
facilite la interacción de éstos con la aplicación. Además deberemos ga-
rantizar que la aplicación web sea accesible en la mayoría de navegadores.
Para valorar la usabilidad en un proyecto web cuya remodelación nos en-

cargan, deberemos efectuar dos tipos de análisis. Por una parte, el análisis
subjetivo, donde preguntaremos a los usuarios de la web qué dificultades
encuentran para navegar, qué aspectos consideran superfluos y qué utili-
dades echan en falta. Por otra, el análisis objetivo, consistente en estudiar
cómo interactúan en la práctica los usuarios con la aplicación web.
Como diseñadores web deberemos decidir cómo estructurar lo que vamos

a mostrar en la página de modo que el usuario encuentre la información de
78
la forma más rápida y sencilla posible.
Diseño web
Todos los elementos de la interfaz deben estar dispuestos para ser utiliza-
dos con gran facilidad. Sólo así conseguiremos provocar el efecto deseado
cuando el usuario interactúe con la aplicación.
Es muy importante organizar los textos de modo que puedan ser fácilmente
legibles, resaltando frases o utilizando listados y tablas de contenidos en
lugar de párrafos extensos.
Actividad práctica
Te dispones a realizar una página web cuyo objetivo es exponer

productos asociados a la personalización de coches. Plantea las
acciones previas que realizarías y qué criterios seguirías para poder
aumentar la usabilidad de la página.

que presentamos:
1. La usabilidad:
a) Permite maximizar la cantidad de objetos interactivos de una página.
b) Permite determinar la sencillez con que los usuarios interaccionan
con la página web.
c) Minimiza el número de usuarios que tiene una página web.
2. La regla de los tres clics:

a) Determina que todos los contenidos de nuestra página deberán ser
accesibles en solamente tres clics.
b) Aconseja que la página solamente tenga tres elementos que permitan
hacer clic sobre ellos.
79
c) Sugiere que todos los elementos de la página tengan tres posibles
opciones.
Diseño web
3. La interfaz web:
a) Contiene todos aquellos elementos (gráficos, textos, botones,
menús...) que nos permiten interactuar de forma sencilla con una
página.
b) Determina únicamente el aspecto gráfico de la página.
c) Contiene exclusivamente información de tipo textual.
4. La estructuración de la información de una página web:

a) Puede ser mínima o inexistente. Lo esencial es que el contenido a
mostrar sea interesante.
b) No influirá en la impresión que se llevará el usuario tras visitar nuestra
página web.
c) Es esencial para que el usuario encuentre la información de la forma
5. La usabilidad es un concepto inherente al uso diario que hacemos

de multitud de elementos cotidianos.
(V) (F)
6. El análisis objetivo de la usabilidad consiste, entre otras cosas, en

preguntar a los usuarios de la web qué dificultades encuentran du-
rante su navegación.
(V) (F)
7. La estética de la página debe ser prioritaria y anteponerse a la

usabilidad.
(V) (F)
8. Con frecuencia, las páginas en Flash no son demasiado usables.

(V) (F)
9. Explica brevemente las diferencias entre análisis objetivo y subjetivo

de la usabilidad.
10. Enumera y describe los aspectos más importantes que deberás tener
80 en cuenta a la hora de diseñar una interfaz.
Diseño web
6. La tipografía en web
La tipografía es un arte que se inició con la aparición de la imprenta de

Gutenberg hacia el año 1450. Para la impresión se utilizaban piezas de
plomo que plasmaban cada una de las letras.
La tipografía comportaba trabajar con las piezas de plomo que genera-

ban cada letra. Éstas debían organizarse y colocarse de tal modo que se
respetaran los espacios entre caracteres y frases para garantizar la fácil
compresión del texto impreso resultante.
Hoy en día, las imprentas funcionan de manera totalmente diferente. Cada

día se utiliza con más frecuencia la impresión digital, en la que los dispo-
sitivos que imprimen reciben la información directamente del ordenador,
sin necesidad de que intervenga ningún molde o plancha.
En este tema vamos a centrarnos en los conceptos básicos de la tipo-
La tipografía en web
grafía aplicada a la web. Aunque a priori pueda parecer un aspecto poco
relevante dentro del proceso de creación de una página, elegir una tipografía
adecuada y aplicarle los modificadores de tamaño, color, espaciado y de-
más, resulta esencial para garantizar una lectura provechosa por parte de
los usuarios. La elección de la tipografía está condicionada por el sistema
operativo. Las plataformas Windows y Macintosh disponen de distintas
familias de tipografías. Este hecho deberemos tenerlo en cuenta a la hora
81
de elegir la familia de fuentes a utilizar en nuestra página web.
Diseño web
A continuación te presentamos un cuadro resumen en el que se detallan
las distintas familias de tipografías que están instaladas por defecto en los
sistemas operativos de mayor difusión.
TIPOGRAFÍAS
Windows Mac OS
Arial Garamond Chicago

Arial Black MS Dialog Courier
Arial Narrow MS Dialog Light Geneva
Arial Rounded MT Bold MS LineDraw Helvetica
Book Antiqua MS Serif Monaco
Boodman Old Style MS Sans Serif New York
Century Gothic MS SystemX Palatino
Century Schoolbook Times New Roman Times
Courier Verdana Figura 6.1
Courier New Tipografías de serie en
Windows y Mac OS.
La elección de una familia de tipografías no estándar provocará que el
navegador represente el texto con alguna tipografía por defecto. El hecho
de que la visualización de las páginas esté supeditada a las familias tipo-
gráficas de las que disponen los sistemas operativos ha provocado que,
durante largo tiempo, encontráramos siempre las mismas tipografías en
los textos online. Actualmente, empieza a ser habitual el uso de la regla
Font-face que funciona con hojas de estilo CSS3. Ésta permite la inclusión
de cualquier tipografía.
6.1. Formato serif y formato sans-serif
En primer lugar, vamos a hacer una primera clasificación general que divide
las familias de fuentes en dos grandes grupos. Todas las familias de fuentes
existentes pueden englobarse dentro del formato serif o bien dentro del
formato sans-serif.
Diremos que una tipografía tiene formato serif cuando podamos apre-
ciar unos pequeños remates o adornos en las letras. La familia más
conocida dentro del grupo serif es Times New Roman.
Las familias tipográficas sans-serif se denominan también de palo seco.

Esta denominación se debe a que, a diferencia de la familia serif, no tienen
ningún tipo de remate. Las familias tipográficas sans-serif más conocidas
son Arial y Helvética.
82
En la imagen que incluimos a continuación puedes apreciar las diferencias

Diseño web
entre una fuente de la familia tipográfica serif y otra de la familia sans-serif.
Figura 6.2
Diferencias entre carácter
Serif y Sans-Serif.
Ahora ya estás familiarizado con estos dos grandes grupos, elige el que más
te convenga en función del soporte en el que se va a visualizar el texto.
Existen estudios que demuestran que la lectura de textos sobre papel re-
sulta más sencilla si la tipografía empleada es serif. Sin embargo, dado que
los monitores poseen menor resolución en comparación con el papel, los
pequeños remates de las fuentes aparecen menos definidos y dificultan la
lectura. Por lo tanto, en la web es recomendable utilizar fuentes sans-serif.
6.2. El tamaño de la tipografía en web
La elección del tamaño de letra es muy importante, pues condicionará el

diseño de nuestra web, así como la facilidad de lectura por parte del usua-
rio. Es obvio que las fuentes pequeñas resultan mucho más difíciles de
leer, por lo que no es en absoluto conveniente usarlas para textos extensos.
Tampoco debemos abusar del tamaño, pues aunque se facilite la lectura
provocará que el usuario tenga que usar continuamente la barra de despla-
zamiento del navegador, lo cual resulta harto incómodo.
Hoy en día, navegadores como Mozilla Firefox permiten la posibilidad de

variar el tamaño del texto de la web que estemos visualizando. Pulsando Ctrl
en combinación de la tecla + aumentaremos el tamaño. Si por el contrario
pulsamos Ctrl en combinación con la tecla - lo disminuiremos.
Por lo general, utiliza una fuente de 12 píxeles para la mayoría de textos

de tu web. Para los titulares o subtitulares, puedes emplear tamaños de
14 o 16 píxeles aplicados a las diferentes etiquetas (h1, h2, h3…).
6.3. Otros aspectos importantes sobre la tipografía para web
Además de usar un tipo de fuente sans-serif y tener presente el tamaño,

hay una serie de conceptos que deberás tener claros para asegurarte de
que facilitas al máximo la lectura de los textos online. A continuación te
83
ofrecemos un compendio de los más importantes:
Diseño web
• El ancho de línea. Cuanto menor es la longitud de una línea de texto,
mayor es la velocidad con que podemos leerla. Un ejemplo muy claro lo
puedes ver en los periódicos: la organización del texto en columnas
agiliza la lectura.
Por el contrario, una mayor longitud de línea provoca que cuando lle-
guemos al final de cada una de ellas debamos realizar un salto de carro
visual hasta el principio de la siguiente. Cuanto mayor sea el salto, más
dificultosa resultará la lectura. La longitud recomendada para una línea
oscila entre los 60 y los 70 caracteres.
• Tipo de letra proporcional y no proporcional. Existen dos tipos de

fuentes o letras: las proporcionales y las no proporcionales o monoes-
paciadas. Las fuentes proporcionales son aquellas en las que cada letra
ocupa un espacio acorde a su propia morfología. Por ejemplo, la letra
“m” ocuparía más espacio que la letra “i”. Este tipo de fuente es el que
utilizan la mayoría de medios escritos (periódicos, libros…). La fuente
proporcional más usada para la escritura en web es Arial. A continua-
ción incluimos un gráfico que te ayudará a comprender este concepto.
Figura 6.3
Ejemplo de tipografía
proporcional.
Las fuentes no proporcionales son aquellas en las que cada letra

ocupa el mismo espacio físico. Están indicadas para mostrar datos en
listas y tablas, pues al incluir más espacio entre caracteres facilitan la
lectura. También son más adecuadas para la introducción de datos en
las cajas de texto de los formularios porque la mayor separación entre
letras permite apreciar los errores con más claridad.
Figura 6.4
Ejemplo de tipografía
no proporcional o
monoespaciada.
• Color y contraste con el fondo. Independientemente de la familia de

fuentes que escojas para los textos de tus páginas web, es muy importan-
te que garantices la legibilidad del texto. En este sentido, es conveniente
usar letras de colores oscuros sobre fondos claros. La combinación
más utilizada es texto negro sobre fondo blanco. No obstante, la utiliza-
84
ción de fuentes claras sobre fondos oscuros también es válida.
Diseño web
Figura 6.5
La tipografía de color
oscuro tiene mejor
legibilidad sobre
un fondo claro.
• Alineación del texto. Para los textos largos se recomienda la alineación

a la izquierda. Aunque la justificación mediante hojas de estilo es posible,
pueden existir casos en los que no funcione correctamente. El problema
radica en que al justificar un texto se modifica el espacio entre pa-
labras y/o caracteres, lo que provoca que el texto sea menos legible.
Además, a diferentes resoluciones o diferentes tamaños de visualización
del texto, no es posible saber la longitud de línea que verá el usuario y,
por tanto, la justificación no funcionará bien.
• Ajuste del espacio entre letras o kerning. El término kerning hace
referencia al espacio entre las letras de una misma palabra. En los na-
vegadores es imposible de regular, ya que no ofrecen esta posibilidad.
No obstante, este es un aspecto que debes tener en cuenta a la hora de
trabajar con imágenes que incluyan títulos de sección u otros textos
en formato gráfico.
• Contraste con las imágenes de fondo. Como ya hemos comentado

en más de una ocasión, la lectura de textos en el monitor del ordenador
es más dificultosa que en papel. Cuando diseñes una página web, evita
incluir imágenes de fondo que dificulten la lectura del texto que se
muestra sobre ellos.
• Negritas. Las negritas deben utilizarse solo para destacar ciertas pala-
bras, resaltar puntos clave dentro de la información o poner de relieve
alguna frase de gran importancia. Utilizadas correctamente contribu-
yen a facilitar la lectura del texto y a acelerar la comprensión de la
información. No obstante, un abuso de este tipo de letra provoca todo
lo contrario y provoca que el usuario no preste atención a aquello que
queremos destacar.
• Uso de mayúsculas. Las mayúsculas son mucho más difíciles de leer

que las minúsculas, de ahí que no resulten aconsejables para textos
largos, sólo para palabras sueltas. Su capacidad para resaltar términos
dentro de un texto las convierte en un recurso muy valioso para captar
la atención del usuario y dirigirla a un elemento en particular.
85
• Uso de cursivas. Las letras en cursiva o itálicas son, en esencia, un
Diseño web
recurso de la escritura sobre papel. Sólo deberán utilizarse en casos muy
específicos, como para indicar que una palabra específica pertenece a
otro idioma.
• Uso del subrayado. Al igual que sucede con las cursivas, el uso del subra-
yado es un recurso propio de la escritura sobre papel. Queda totalmente
desaconsejado su uso en textos para web, pues pueden confundir al
usuario e inducirle a creer que el subrayado es un vínculo o link.
• Las listas. El empleo de listas es un elemento muy importante dentro

de la composición de textos en HTML. Usarlas te ayudará a estructurar
la información y facilitar la lectura.
RESUMEN
Resumen
En este tema hemos analizado las características técnicas y formales que

deben tener los textos orientados a la web. Hemos estudiado desde los
orígenes de la tipografía en las primeras imprentas hasta la utilización idónea
de las familias tipográficas en los textos que mostremos en nuestra web.
Para mostrar los textos en web es recomendable usar tipografías sans-serif,

también conocidas como de “palo seco”. La característica principal de estas
tipografías es que sus letras no presentan ningún tipo de adorno, facilitando
así la lectura de los textos en la pantalla del ordenador.
Como diseñador web debes concienciarte de que el tratamiento de texto

para la web es muy diferente al que se realiza para papel. Asimismo, debe-
rás tener en cuenta las longitudes de línea, los tamaños de las tipografías,
el uso de negritas y cursivas, el color de las fuentes y el contraste con el
color de fondo.
El uso de una ortografía correcta dotará a tu página web de una mayor

credibilidad y seriedad.
También deberás asegurarte, en la media de lo posible, de que la familia

de fuentes que utilices se incluya en la mayoría de sistemas operativos. De
este modo podrás garantizar que la mayoría de usuarios puedan visualizar
86
los textos sin necesidad de que su navegador sustituya las fuentes origi-
nales por otras.
Diseño web
Actividad práctica
Imagina que presentas un boceto de diseño de una página web y

el cliente te comenta que le gustaría que la tipografía fuera serif.
Resume en qué te basarías para defender la idea de que es mejor
emplear una tipografía de palo seco.

que presentamos:
1. Las fuentes proporcionales:

a) Son aquellas en las que cada letra ocupa el mismo espacio.
b) Son aquellas en las que existe una proporción entre el texto y los
titulares.
c) Son aquellas en las que cada letra ocupa un espacio acorde a su
morfología.
2. Si utilizamos una familia tipográfica no estándar para el diseño de

nuestra web:
a) No afectará en nada a la visualización de la web en los ordenadores
de los usuarios.
87
b) Muy probablemente el ordenador del usuario utilizará una tipografía
por defecto que sustituirá a la que hayamos empleado en la web.
Diseño web
c) El navegador del usuario no mostrará ningún texto al no disponer
de la fuente requerida.
3. La regla de estilos CSS3 llamada Font-face:

a) Permite la utilización de cualquier fuente independientemente de
que el usuario la tenga instalada o no.
b) Permite controlar el tamaño de la fuente que vamos a utilizar.
c) Restringe el uso de determinadas familias de fuentes.
4. Se recomienda que el color de los textos de nuestra página web:

a) Sea similar al fondo para que el diseño resulte más armónico.
b) Contraste con el fondo para facilitar la legibilidad.
c) Sea siempre un tono englobado en la categoría de los colores
cálidos.
5. Para los textos que utilicemos en web se recomienda un tamaño

de 12 píxeles.
(V) (F)
6. El formato de fuente serif se denomina también “de palo seco”.

(V) (F)
7. Las plataformas Windows y Macintosh utilizan diferentes familias

de tipografías.
(V) (F)
8. El ancho de las líneas de texto no afecta a la legibilidad de la página

web.
(V) (F)
9. Enumera y explica brevemente al menos dos aspectos importantes

que deberás tener en cuenta en el momento de definir los textos
de tu web.
10. Explica brevemente la principal diferencia entre una tipografía serif

88 y una sans-serif. Enumera una familia tipográfica que corresponda
a cada una de las categorías.
Diseño web
Glosario
• Accesibilidad: La accesibilidad web se refiere a la capacidad de acceso a

la Web y a sus contenidos por todas las personas independientemente de
la discapacidad física o intelectual que presenten o de las que se deriven
de la tecnología que utilicen, sistema operativo, navegador, resolución... La
accesibilidad es un concepto que está íntimamente ligado a la usabilidad.
• Bit: Es la unidad mínima de información que se utiliza en informática. Para

representar un bit suelen utilizarse dos valores, el 1 y el 0.
• Bmp: Windows bitmap es el formato propio del programa Microsoft Paint.

Puede guardar imágenes de hasta 24 bits. Utiliza una compresión sin
pérdida, denominada RLE, Run-length encoding.
• Brillo: Es la luminosidad que tiene un color. También podríamos definirlo

como la capacidad que tiene un color de reflejar el color blanco.
• Byte: Es el acrónimo de binary term (término binario). El byte es la unión de

8 bits, es decir, la combinación de ocho ceros y unos. La representación
numérica de un byte abarca desde 00000000 hasta 11111111.
Glosario
• Círculo cromático: El círculo cromático es una clasificación de los co-
lores. Se denomina círculo cromático al resultante de distribuir alrededor
89
de un círculo los colores que conforman los seis colores que componen
la luz blanca.
Diseño web
• Color aditivo: El modelo aditivo parte del color negro y se basa en la
particularidad que todos los colores se consiguen a partir de la mezcla o
adición de tres colores primarios. Este modelo de color se conoce como
RGB (Red, Green, Blue). El valor mínimo de color es el negro y el valor
de mezcla máxima de los colores Rojo, Verde y Azul es el color blanco.
• Color brillante: La claridad de los colores brillantes se logra gracias a la

omisión del gris o el negro. Entre ellos se cuentan azules, rojos, amarillos
y naranjas con brillo pleno. Los colores brillantes son vívidos y atraen la
atención.
• Color cálido: Se llaman colores cálidos aquellos que van del rojo al
amarillo. Son tonalidades que evocan calor, pasión, fuerza, agresividad,
y también peligro.
• Color de alta resolución: Hablamos de colores de alta resolución cuando

utilizamos 16 bits para codificar la información de color de cada píxel.
• Color frío: Los colores fríos son los que van del azul al verde. El frío remi-
te al azul y, cuanto más saturada sea su tonalidad, más se incrementará
dicha sensación. Los colores fríos nos recuerdan al invierno, al hielo, etc.
• Color indexado: Este modelo de color abarca profundidades de color

que tienen un máximo de 256 colores. En el modo de color indexado, la
imagen almacena la información de color en una paleta o mapa.
• Color oscuro: Los colores oscuros son tonos que contienen una canti-
dad importante de color negro en su composición. Estos colores evocan
seriedad y tristeza.
• Color pastel: Los colores claros o pastel son colores pálidos que se ob-
tienen rebajando la intensidad en el tono de los colores saturados. Los
colores claros sugieren ligereza, descanso, armonía o suavidad. Este tipo
de colores nos transmiten sensaciones de frescura, limpieza y naturalidad.
• Color sustractivo: El modelo sustractivo parte del color blanco y se basa

en que todos los colores se generan en base a la capacidad de absorción
de las longitudes de onda del objeto que se ilumina. Los colores prima-
rios en el modelo sustractivo son el cian, el magenta y el amarillo (Cyan,
Magenta, Yellow).
• Color verdadero: Denominamos color verdadero a la profundidad de color

que utiliza 24 bits para codificar la información de color. Este modelo de
color es el que representa con mayor fidelidad lo que el ojo humano es
capaz de captar, de ahí su nombre.
90
• Color: Sensación que percibimos gracias a la naturaleza de la luz. Se forma

Diseño web
gracias a la capacidad de absorción o reflexión de las distintas longitudes

de onda. El color lo captamos gracias a la capacidad de nuestros órganos
visuales para trasmitir información al cerebro.
• Colores primarios: Son aquellos que no se pueden obtener mediante la

mezcla de ningún otro color. Los colores primarios son el rojo, el verde
y el azul.
• Compresión: En el tratamiento de imágenes digitales, la compresión

hace referencia al proceso de optimización de la imagen para mostrarla
en la página web. Este proceso supone una pérdida de la calidad de la
imagen original.
• Espectro visible: Espacio que ocupa la luz blanca dentro del espectro
electromagnético. El espectro visible es el conjunto de longitudes de onda
que son perceptibles por el ojo humano.
• Fotorreceptor: En el sistema visual humano, un fotorreceptor es toda célula

o mecanismo capaz de captar la luz. Los fotorreceptores se localizan en el
interior del ojo y se dividen en dos variedades: los conos y los bastones.
• Gif: Graphics Interchange Format o formato gráfico de intercambio. Es
un método de compresión que se basa en la utilización de una paleta
de 2 hasta 256 colores. Este formato permite la realización de imágenes
animadas.
• Imagen vectorial: Las imágenes vectoriales son representaciones de

entidades geométricas. Éstas pueden ser círculos, rectángulos o cual-
quier figura poligonal y, por supuesto, líneas rectas y curvas. Todas estas
entidades se pueden representar mediante fórmulas matemáticas. Este
tipo de imágenes permiten realizar una serie de operaciones que con las
imágenes de mapa de bits son imposibles. Por ejemplo, podemos redi-
mensionar la imagen sin temor a que pierda calidad o definición.
• Interfaz web: Todos los elementos gráficos y textuales que nos permiten
interactuar con facilidad con la aplicación web alojada en el servidor.
• Jpeg: Joint Photographic Experts Group. Jpeg es un método de compre-

sión de imágenes en el que se produce una pérdida de la calidad original
de la imagen. Una de las características esenciales del formato Jpg es que
podemos definir el grado de compresión que queremos aplicar a la imagen.
• Luz blanca: Conjunto de todas las longitudes de onda del espectro visible.
Tal y como demostró Newton al hacer pasar un haz de luz blanca por un
Glosario
prisma de cristal, se compone de seis colores: azul violáceo, azul celeste,
verde, amarillo, rojo anaranjado y rojo púrpura.
91
• Mapa de bits: Conjunto de píxeles que componen una imagen digital.
Dicha denominación se debe a que para representar la información de
Diseño web
color de cada uno de dichos píxeles utilizamos como medida los bits.
• Matiz: El matiz está definido por la longitud de onda que predomina al

mezclar dos colores diferentes. El matiz nos permite distinguir dos colores
totalmente diferentes haciendo referencia a la posición que ocupan dentro
del círculo cromático.
• Modelo hexadecimal: Los colores en la web se expresan en formato

hexadecimal. Dicho formato tiene como característica que los valores
están expresados en base 16. Esto significa que deberemos combinar
16 símbolos para expresar un color. El formato hexadecimal utiliza los
siguientes símbolos: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E y F.
• Pantone: Es una empresa estadounidense creadora de un sistema de

control de color para las artes gráficas. Dicho sistema de definición cro-
mática es el más reconocido y utilizado, por lo que normalmente llamamos
Pantone al sistema de control de colores.
• Photoshop: Es uno de los programas más utilizados para el retoque de

imágenes y fotografías a nivel profesional. Pertenece a la compañía Adobe.
• Píxel: Del inglés picture element, lo definimos como la unidad de color
más pequeña que conforma una imagen digital.
• Png: Portable Network Graphics. Es un formato de compresión de imá-

genes sin pérdida llamado a ser el sucesor del formato Gif. Se caracteriza
por soportar imágenes con transparencia de alta calidad.
• Profundidad de color: Este término hace referencia a la cantidad de bits

que necesitaremos para representar el color de un píxel. Por ejemplo, si
trabajamos con una imagen de 1 bit por píxel, sólo podremos utilizar dos
colores para representar dicha imagen.
• Psd: Es el formato nativo de Adobe Photoshop. Es un formato de imagen

que no tiene pérdida. Gracias a que utiliza 48 bits de color, permite guar-
dar los retoques sobre la imagen original. Al igual que el formato Tiff, da
opción a almacenar capas.
• Público objetivo: Este concepto hace referencia a los usuarios a los que
va dirigido el contenido de la página web que realicemos. La clasificación
de público objetivo suele referirse a un segmento de la población concreto,
este segmento puede definirse mediante la edad, mediante los gustos o
aficiones, mediante el sexo, el estatus social, etc.
• Raw: Es un formato de imagen que, a diferencia de otros formatos más

populares, como Jpg, no emplea métodos de compresión de datos con
pérdidas de calidad. Se usa en aquellos casos en los que nos interesa
92
archivar una fotografía tal como ha sido captada, sin ningún tipo de mani-
pulación por parte de la cámara. Este formato de imagen está preparado
Diseño web
para guardar información sobre el tipo de cámara y la óptica con la que

se disparó la imagen.
• Resolución: Este término suele aplicarse para definir el nivel de detalle

con el que podemos visualizar una imagen digital. También lo empleamos
para referirnos a la capacidad de los dispositivos que nos permiten su
visualización (como los monitores, las tarjetas de vídeo y las impresoras).
• Saturación: Es la propiedad que representa la pureza o intensidad del

mismo. Cuanto menor sea la saturación de un color, mayor será su tona-
lidad grisácea y más decolorado aparecerá.
• Tiff: Tagged Image File Format. A diferencia de lo que sucede con el for-
mato Jpg, los archivos gráficos en formato Tiff conservan con gran fide-
lidad los detalles de la imagen. Es un formato apropiado para almacenar
imágenes originales en alta calidad.
• Tipografía sans-serif: Las familias tipográficas sans-serif se denominan

también de “palo seco”. Esta denominación se debe a que, a diferencia de
la familia serif, no tienen ningún tipo de remate. Las familias tipográficas
sans-serif más conocidas son Arial y Helvética. Este tipo de tipografía es
la que se recomienda para los textos orientados a página web.
• Tipografía serif: Diremos que una tipografía tiene formato serif cuando
podamos apreciar unos pequeños remates o adornos en las letras.
• Tono: El tono es el estado puro del color, sin que se le haya agregado
blanco o negro. Es el valor que define un color y que nos permite diferen-
ciarlo de otro. Gracias a él podemos distinguir, por ejemplo, el rojo del azul.
• Usabilidad: Podemos definir usabilidad como la sencillez con la que las

personas pueden utilizar una herramienta determinada con el fin de al-
canzar un objetivo concreto. Aplicado al diseño de páginas web, diremos
que la usabilidad es aquella disciplina que al aplicarla facilitaremos la na-
vegación y el acceso a la información de los usuarios que visiten la web.
Glosario
93
Diseño web
Soluciones a los ejercicios
de autocomprobación
1. La teoría del color
Actividad práctica
El color se forma gracias a la capacidad de absorción o reflexión de las

diferentes longitudes de onda. Si vemos un objeto rojo, esto es debido
a que la naturaleza del objeto hace que las longitudes de onda corres-
pondientes a los demás colores sean absorbidas y sólo se reflejen las
longitudes de onda correspondientes al rojo. Éstas son captadas por
los fotorreceptores que tenemos en los ojos y que envían la información

al cerebro para que la procese.
1. c) Ambas respuestas son correctas.
2. a) 6 colores.
3. b) Utilizaremos un formato de 6 dígitos donde cada uno de los tres pares

será el color RGB expresado en base hexadecimal.
94
4. b) Con valores de 0 a 255 para cada uno de los componentes (Rojo,

Diseño web
Verde y Azul).
5. Falso. La longitud de onda varía para cada color.
6. Falso. Afectan a todos los colores.
7. Verdadero.
8. Falso. Se usa principalmente para imprenta. Para web emplearemos el

modelo RGB.
9. El tono es el estado puro del color sin que se le haya agregado blanco
o negro. Es el valor que define un color y nos permite diferenciarlo de
otro (por ejemplo, el rojo del azul). El matiz está definido por la longitud
de onda que predomina al mezclar dos colores diferentes (con sus res-
pectivas longitudes de onda). A menudo, utilizamos el término “tono”
para sustituir a “color”, pues se entienden como sinónimos.
10. El modelo RGB se utiliza de forma exclusiva para definir los colores
que se muestran mediante dispositivos de pantalla, como puede ser
el monitor de un ordenador. Es el modelo que utilizarás para preparar
las imágenes que posteriormente se mostrarán en las páginas web
que diseñes. El hecho de que este tipo de dispositivos usen imágenes
adaptadas al modelo RGB se debe a que emplean los colores primarios
rojo, verde y azul para mostrar la información. Ten presente que, por
defecto, un monitor de ordenador estará apagado (ausencia de luz) y
mostrará el color negro. Al iluminar la pantalla, la luz pasa por tres capas
de material de fósforo, una por cada color básico (rojo, verde y azul). En
Soluciones a los ejercicios de autocomprobación

definitiva, el color se genera añadiendo luz.
2. Dispositivos de visualización, estándares

y resoluciones
Actividad práctica
El concepto de puntos por pulgada, ppp o dpi (dots per inch), hace refe-
rencia a la calidad de impresión sobre papel, concretamente, al número
de puntos de tinta que una impresora puede plasmar en un espacio lineal
de una pulgada. Por norma general, las impresoras suelen trabajar a 300
ppp, es decir, representan 300 puntos de color en un tramo correspon-
diente a una pulgada (25,4 milímetros). En contraposición, las imágenes
95
que prepares para mostrar en la web no deberán tener más de 72 ppp
o 72 dpi. Debido a su funcionamiento interno y a sus limitaciones, los
Diseño web
monitores de ordenador no son capaces de representar más de 72 ppp.
1. a) La unidad de color más pequeña que conforma una imagen digital.
2. b) 256.
3. c) Indicando el número de columnas de píxeles y el número de filas de

píxeles.
4. b) 1024x768 píxeles.
5. Verdadero.
6. Verdadero.
7. Falso. Puede mostrar hasta 256 colores.
8. Verdadero.
9. La profundidad de color hace referencia a la cantidad de bits que necesi-
taremos para representar el color de un pixel. Por ejemplo, si trabajamos
con una imagen de 1 bit por píxel, sólo podremos utilizar dos colores
para representar dicha imagen. Si, por el contrario, trabajamos con una
imagen de 8 bits por pixel, podremos utilizar hasta 256 colores diferentes.
10. La resolución de una imagen digital viene definida por la densidad de

píxeles que contiene. Se expresa mediante la cantidad de pixeles en
horizontal multiplicada por la cantidad de píxeles en vertical.
3. Tipos de imágenes aplicadas al diseño web
Actividad práctica
Usaremos compresión Jpg o Gif en función del número de colores que

posea la imagen del logotipo. Con toda seguridad no tendrá más de
256 colores, por lo que la compresión indicada será la Gif. Durante el
proceso, deberemos seleccionar la paleta de colores que mejor se ajuste
a la imagen de modo que ésta quede optimizada.
1. c) 72 puntos por pulgada.
2. b) Aplicar el formato de imagen correcto y lograr un compromiso entre

96
calidad y peso para aumentar la velocidad de carga de las imágenes.
Diseño web
3. c) Jpg.
4. a) Tiff.
5. Verdadero.
6. Falso. El formato Gif permite crear animaciones.
7. Verdadero.
8. Verdadero.
9. · El formato Jpg permite una profundidad de color de 24 bits.
· Es un método de compresión con pérdida. Este hecho es importante,pues

determina la calidad final de la imagen.
· Con el formato Jpg podemos definir el grado de compresión que que-

remos aplicar a la imagen.
10. Las imágenes de mapa de bits se representan gracias a una matriz de
píxeles que contienen información de color. Son el tipo de imágenes
más usadas para representar gráficos digitales en Internet y no permiten
ampliaciones sin pérdida de calidad.
Las imágenes vectoriales son representaciones de entidades geomé-

tricas. Este hecho provoca que una imagen vectorial resulte mucho
más ligera que una imagen de mapa de bits, pues la información a
almacenar es mucho menor. Además, este formato nos permite reali-
zar ampliaciones del tamaño de la imagen sin que ésta sufra ninguna
pérdida de calidad.

4. Herramientas de trabajo para optimizar
imágenes web
Actividad práctica
Tras abrir en Photoshop la imagen original, seleccionamos la opción

Guardar para web y dispositivos. Marcamos la pestaña 4 copias de modo
que, además de la imagen original, podamos visualizar el aspecto que
ofrece tras aplicarle diferentes compresiones. Los resultados obtenidos
son los siguientes:
Original: 276 Kb
97
Jpg calidad 100: 16,47 Kb. Tiempo de descarga: 2 segundos a 256
Diseño web
Kb/s.
Jpg calidad 50: 4,36 Kb. Tiempo de descarga: 1 segundo a 256 Kb/s.
Jpg calidad 25: 3,00 Kb. Tiempo de descarga: 1 segundo a 256 Kb/s.
En el caso de la imagen con la que trabajamos, la elección idónea sería

la de compresión a calidad 50.
1. b) Gif.
2. b) Guardar para Web.
3. a) 4.
4. c) Png.
5. Falso. La información que se pierde tras la compresión es irrecuperable.

6. Verdadero.
7. Falso. El formato Gif emplea de una paleta de 2 hasta 256 colores.
8. Verdadero.
9. Gif es un método de compresión que se basa en la utilización de una

paleta de 2 a 256 colores. Por este motivo, si utilizamos este formato
con una imagen de menos de 256 colores, no apreciaremos ningún
tipo de pérdida de calidad. Por el contrario, si la imagen que vamos a
comprimir tiene más de 256 colores, todos los colores que queden fuera
del rango de los 256 colores desaparecerán.
El formato Gif permite el uso de transparencias, es decir, de un color que

permitirá traslucir el color de fondo de la página web o de lo que haya
debajo. Otra característica importante de este formato es que permite
crear animaciones. A partir de varias imágenes estáticas, puede gene-
rarse una imagen en movimiento que permitirá su reproducción en bucle.
10. En primer lugar, abriremos con Adobe Photoshop el archivo original y

realizaremos los ajustes de tamaño pertinentes. Una vez la imagen haya
sido redimensionada, seleccionaremos la opción Guardar para web.
Cuando se haya abierto la ventana con las opciones de exportación
para Web, seleccionaremos la opción 4 copias en la parte superior de
la ventana. De este modo podremos visualizar las diferencias entre cada
uno de los niveles de compresión que vamos a aplicarle a la imagen
original. Ajustaremos los niveles de compresión seleccionando cada una
98
de las vistas e introduciendo los valores que nos parezcan oportunos en
el menú del formato Jpg, situado a la derecha de la ventana. Deberemos
Diseño web
decantarnos por el nivel de compresión que, bajo nuestro punto de vis-

ta, mantenga el mejor compromiso entre menor peso y mayor calidad.
Seleccionaremos la vista en cuestión y pulsaremos el botón Guardar.
5. Diseño gráfico y usabilidad aplicada a la web
Actividad práctica
· Identificar y analizar el tipo de usuarios que van a visitar nuestra pá-

gina web.
· Centrar el diseño de la aplicación en los usuarios a los que va dirigida.
· Estudiar las páginas de la competencia, realizando un análisis de los

pros y contras que presentan.
1. b) Permite determinar la sencillez con que los usuarios interaccionan
con la página web.
2. a) Determina que todos los contenidos de nuestra página deberán ser

accesibles en solamente tres clics.
3. a) Contiene todos aquellos elementos (gráficos, textos, botones, menús...)

que nos permiten interactuar de forma sencilla con una página.
4. c) Es esencial para que el usuario encuentre la información de la forma

5. Verdadero.
6. Verdadero.
7. Falso. La usabilidad debe primar sobre el diseño entendido a un nivel

puramente estético.
8. Verdadero.
9. El análisis subjetivo de la usabilidad consiste en preguntar a los usuarios

de la web qué dificultades se encuentran para navegar, qué aspectos
consideran superfluos, o bien qué utilidades echan en falta. Por otra
parte, el análisis objetivo de la usabilidad consiste en estudiar cómo
interactúan los usuarios con la aplicación web. El estudio se puede rea-
99
lizar con un grupo de individuos de forma presencial, o bien analizando
el recorrido que realizan los internautas cada vez que visitan nuestra
Diseño web
web (en qué apartados entran, qué tiempo dedican a cada sección...).
10. Deberás dejar claro el propósito de la página web. El sitio debe explicar
a quién pertenece y qué permite hacer. Por supuesto, debe hacerlo de
la manera más simple y rápida posible.
También tienes que ayudar a los usuarios a encontrar lo que necesitan.

Esto implica que la página debe contar con un sistema de navegación
visible y completo. Además, éste deberá estar complementado por un
sistema de búsqueda que resulte efectivo para acceder al contenido
que no se muestra a simple vista.
Por otra parte, debes organizar los contenidos de la página. Éstos deben
mostrarse de manera clara, con títulos que resulten fáciles de com-
prender para el usuario y con enlaces a las secciones más populares
ubicados en lugares lógicos.
En este sentido, te resultará de gran ayuda efectuar un seguimiento de

las visitas para comprender qué es lo más visto y lo más buscado del
sitio que administras.
Usa el diseño gráfico para mejorar la interacción, no para definirla. Los
elementos gráficos de la web deben estar dispuestos para ayudar a
que se cumplan los objetivos del sitio y no sólo con fines ornamentales.
Por último, cuida los textos. Estos deben estar optimizados para facilitar
su lectura en pantalla.
6. La tipografía en web
Actividad práctica
Existen estudios que demuestran que la lectura de textos sobre papel

resulta más sencilla si la tipografía empleada es serif. Sin embargo,
dado que los monitores poseen menor resolución en comparación con

el papel, los pequeños remates de las fuentes aparecen menos definidos
y dificultan la lectura. Por lo tanto, en la web es recomendable utilizar
fuentes sans-serif.
1. c) Son aquellas en las que cada letra ocupa un espacio acorde a su

morfología.
2. b) Muy probablemente el ordenador del usuario utilizará una tipografía

100
por defecto que sustituirá a la que hayamos empleado en la web.
Diseño web
3. a) Permite la utilización de cualquier fuente independientemente de que

el usuario la tenga instalada o no.
4. b) Contraste con el fondo para facilitar la legibilidad.
5. Verdadero.
6. Falso. Esta denominación se aplica únicamente a las fuentes sans-serif.
7. Verdadero.
8. Falso. Cuanto menor es la longitud de una línea de texto, mayor es la

velocidad con que podemos leerla.
9. · El ancho de línea:
Cuanto menor es la longitud de una línea de texto, mayor es la veloci-
dad con que podemos leerla. Un ejemplo muy claro lo puedes ver en
los periódicos: la organización del texto en columnas agiliza la lectura.
· Color y contraste con el fondo:
Independientemente de la familia de fuentes que escojas para los textos
de tus páginas web, es muy importante que garantices la legibilidad
del texto. En este sentido, es conveniente usar letras de colores oscu-
ros sobre fondos claros. La combinación más utilizada es texto negro
sobre fondo blanco. No obstante, la utilización de fuentes claras sobre
fondos oscuros también es válida.
· Alineación del texto:

Para los textos largos se recomienda la alineación a la izquierda. Aun-

que la justificación mediante hojas de estilo es posible, pueden existir
casos en los que no funcione correctamente. El problema radica en
que al justificar un texto se modifica el espacio entre palabras y/o
caracteres, lo que provoca que el texto sea menos legible. Además,
a diferentes resoluciones o diferentes tamaños de visualización del
texto, no es posible saber la longitud de línea que verá el usuario y,
por tanto, la justificación no funcionará bien.
10. Diremos que una tipografía tiene formato serif cuando podamos apreciar
unos pequeños remates o adornos en las letras. La familia más conocida
dentro del grupo serif es Times New Roman. Las familias tipográficas
sans-serif, a diferencia de las de la familia serif, no tienen ningún tipo
de remate. Las familias tipográficas sans-serif más conocidas son Arial
y Helvética.
101
Diseño web
Índice
Introducción.......................................................................................... 5
1. Teoría del color.............................................................................. 6

Las propiedades del color.................................................................... 6
El tono y matiz..................................................................................... 8
La saturación o intensidad................................................................. 9
El valor o brillo..................................................................................... 9
El modelo de color aditivo..................................................................... 10
El modelo de color sustractivo............................................................. 11
Aplicaciones de los diferentes modelos de color.............................. 12
El significado del color.......................................................................... 14
El color en el diseño web........................................................................ 17

Resumen.................................................................................................... 20
Ejercicios de autocomprobación......................................................... 21
2. Dispositivos de visualización, estándares

y resoluciones ................................................................................. 23
El píxel.................................................................................................... 23
La profundidad de color....................................................................... 25
La resolución......................................................................................... 27
102
¿Qué es la resolución?....................................................................... 27
Resolución de imagen aplicada a web............................................... 27
Diseño web
Resolución de imagen aplicada a dispositivos móviles..................... 31

Resumen.................................................................................................... 33
3. Tipos de imágenes aplicadas al diseño web.......................... 36

La compresión de imágenes para web................................................ 36
El formato Jpg.................................................................................... 37
El formato Gif...................................................................................... 38
Otros tipos de imágenes de mapa de bits................................................. 39
El formato Png.................................................................................... 39
El formato Tiff..................................................................................... 39
El formato Bmp.................................................................................. 41
El formato Psd.................................................................................... 41
El formato Raw................................................................................... 42
Imagen vectorial................................................................................... 43
El dibujo vectorial en la web................................................................ 44
Resumen.................................................................................................... 45
4. Herramientas de trabajo para optimizar imágenes web..... 48
Optimizar imágenes para web en Photoshop (Jpg, Gif y Png)........... 48
Modificar la resolución y el tamaño de una imagen.............................. 49
Exportar la imagen a formato Jpg....................................................... 52
Exportar la imagen a formato Gif......................................................... 55
Exportar la imagen a formato Png....................................................... 58
Resumen.................................................................................................... 61
5. Diseño gráfico y usabilidad aplicada a la web....................... 64

La usabilidad......................................................................................... 64
Análisis de la audiencia o público objetivo......................................... 65
La regla de los tres clics......................................................................... 69
La interfaz web...................................................................................... 70
Hacer los contenidos de la web más usables...................................... 74
Uso de la tecnología Flash.................................................................. 74
Escribir para la web............................................................................... 75
Resumen.................................................................................................... 78
6. La tipografía en web......................................................................... 81
Formato serif y formato sans-serif...................................................... 82
Índice
El tamaño de la tipografía en web......................................................... 83
Otros aspectos importantes sobre la tipografía para web................ 83
103
Resumen.................................................................................................... 86
Diseño web
Glosario.................................................................................................... 89
Soluciones a los ejercicios de autocomprobación............... 94
Índice................................................................................................ 102

2 Diseño Gráfico Aplicado A La Web

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

2 Diseño Gráfico Aplicado A La Web

Cargado por

Copyright:

Formatos disponibles

2 UNIDAD

© Planeta DeAgostini Formación, S.L.U.

Primera edición: julio de 2013

ISBN: 978-84-394-9149-1 (Obra completa)

Depósito Legal: B-5.748-2013

El diseño gráfico, como disciplina artística, ha evolucionado mucho desde

Este tema posiblemente sea el más subjetivo de todo el curso, pues es el

En el momento de plantear un proyecto web, deben tenerse en cuenta una

1.1. Las propiedades del color

En la unidad 1 de este curso hemos visto la progresión que ha seguido

cer un valor añadido a los contenidos que se mostraban. Es por este

Ahora que ya sabes qué es el color, vamos a adentrarnos brevemente en

Teoría del color

En definitiva, el color se forma gracias a la capacidad de absorción o

de los colores obtenidos a partir de la descomposición de un haz de luz.

los valores de la longitud

Además de las características físicas propias de cada color, existen una

1.1.1. El tono y el matiz

Tal y como comentábamos en el ejemplo anterior, el color rosa y el color

1.1.2. La saturación o intensidad

Entendemos por saturación de un color la propiedad que representa la

Teoría del color

1.1.3. El valor o brillo

El brillo es la luminosidad que tiene un color. También podríamos defi-

1.2. El modelo de color aditivo

Newton. Además, sumando estos tres colores, se obtenía también la luz

El modelo aditivo se basa en la particularidad que todos los colores

• Rojo (R): 255, 0, 0

• Verde (G): 0, 255, 0

• Azul (B): 0, 0, 255

Como puedes observar, el orden en el que se muestran los valores numéricos

1.3. El modelo de color sustractivo

A diferencia del modelo aditivo, en el modelo de color sustractivo (Fi-

Teoría del color

A diferencia de lo que sucede en el modelo aditivo, para cuantificar la

1.4. Aplicaciones de los diferentes modelos de color

las artes gráficas. Dicho

Teoría del color

El color es uno de los elementos más importantes en una composición grá-

los impresos. Esto

• Colores claros o pastel

Teoría del color

Los colores claros sugieren ligereza, descanso, armonía, suavidad. Este

atención. Un autobús escolar amarillo, un racimo de globos de colores,

Por ejemplo, si realizamos la página web de un centro médico o de esté-

Teoría del color

Independientemente de las consideraciones estéticas que comentábamos

No obstante, pese a utilizar el modelo RGB, los colores no se expresan me-

Ahora que ya sabes en qué consiste el modelo hexadecimal, te preguntarás

A continuación te detallamos cómo se realiza la conversión:

• Descomponemos los valores de cada uno de los colores primarios.

Para el valor del verde (106) seguiremos el mismo procedimiento: 106=6A

1F, donde 1x161+15. En definitiva, 16+15.

Por ejemplo, la calculadora de Windows 7 integra un conversor bidirec-

Teoría del color

En este tema hemos visto la importancia del diseño gráfico aplicado a la

En cuanto a los elementos diferenciadores de cada uno de los colores,

hemos estudiado las características del tono, el matiz, la saturación, la in-

En el plano psicológico, hemos analizado las connotaciones que tienen

Explica de forma breve por qué la infinidad de elementos que po-

Rodea con un círculo la alternativa que consideres correcta de las tres

1. ¿Por qué percibimos los colores?

Teoría del color