FUNDAMENTOS

DE DISEÑO GRÁFICO
PARA WEB E INTERACTIVOS
FUNDAMENTOS
DE DISEÑO GRÁFICO
PARA WEB E INTERACTIVOS

01 ARQUITECTURA

02 DISEÑO

03 LA INTERFAZ

04 MAQUETACIÓN

05 PROGRAMACIÓN

06 ACERCA DE FLASH

07 PUBLICIDAD EN INTERNET
REGLAS GENERALES
DEL DISEÑO GRÁFICO
1. Convencionalidad
Los códigos gráficos deben ser culturalmente vigentes. La idea
de «nuevos lenguajes gráficos» resulta absurda si no se en-
tiende.

2. Originalidad
La originalidad compensa la convencionalidad al darle rel-
evancia al mensaje. No obstante cada caso requiere un grado
de originalidad o de convencionalidad diferente. Se creativo,
busca nuevas soluciones y formas de pensar.

3. Eficacia
Ha de cumplir, como mínimo, todas las funciones para las
cuales ha sido creado. Valores, como por ejemplo la estética,
no puede anteponerse a la eficacia de la comunicación, sino
por el contrario, potenciarla.

4. Propiedad
La gráfica debe ajustarse a la identidad y la necesidad del cli-
ente que efectúa el encargo; no consiste en hablar del emisor
sino en hablar como él.

5. Respeto
Tal como sucede con el emisor, la gráfica debe ajustarse y
respetar los códigos del receptor. Se habla para él, para que él
entienda.

6. Densidad
Entre lo vacío y lo lleno debe haber una relación de sentido.
Nuiestro mensaje debe carecer de zona privadas de sentido. Si
al eliminar un elemento nada se pierde, es porque ese elemento
sobraba.

7. Economía
El despilfarro es comunicacionalmente negativo. No debe con-
tener redundancias superfluas o excesos gráficos.

8. Anonimato
La comunicación publicitaria debe ser autónoma, libre de refer-
encias a su proceso productivo o su autor. Pertenece al emisor
y su producción debe volverse invisible. El diseño es un servi-
cio, trabaja y diseña con objeto de satisfacer las demandas de
sus clientes y los grupos a los que está destinado su trabajo.
FUNDAMENTOS DE DISEÑO GRÁFICO
PARA WEB E INTERACTIVOS
tema 0 1

A menudo se confunden los términos “sitio” y “pági-

na”. El “sitio” hace referencia a una ubicación com-
pleta, y no a una “página” concreta del mismo. Un
sitio web se refiere siempre a la totalidad del conteni-
do albergado en un servidor (host) en la World Wide
Web, mientras que lo que muestra el navegador es
una página web individual. La página principal de un
sitio web se denomina página de inicio o portal.

El papel de un sitio web es crear presencia, comuni-

cación y transparencia. El mantenimiento de un sitio
web implica la atención hacia su estructura, diseño,
funcionalidad y contenido; lo que no debe faltarle
nunca es la calidad de contenido e información y un
sistema de orientación intuitivo para el usuario.

Estas son las preguntas que uno debe hacerse al

iniciar el desarrollo de un sitio web complejo:

• ¿Cuál es su propósito?
¿Qué es la web para el cliente?

• ¿De qué modo la construcción de un sitio

web apoyará este propósito?

• ¿Cuáles son los objetivos a medio plazo?

• ¿Cuáles son los objetivos a largo plazo?

• ¿Qué estrategias relacionadas con la Red se

utilizarán para alcanzar estos objetivos?

• ¿Cómo se medirá el éxito del sitio web?

FUNDAMENTOS DE DISEÑO GRÁFICO
PARA WEB E INTERACTIVOS
tema 0

n DEFINIENDO LOS OBJETIVOS lectivo. El briefing posterior (re-briefing) es la discu-

Una declaración clara identificando dos o tres de los
objetivos debería ser la base de la construcción de
un sitio web. Una declaración con las estrategias es-
pecíficas acerca de cómo se va a edificar; cual será
el tiempo dedicado al diseño, a la construcción y a
la evaluación; y con las medidas cuantitativas y cua-
litativas específicas para la posterior evaluación de
su puesta en marcha. Construir sitios web no es un
proyecto puntual donde se colocan contenidos es-
táticos, sino un proceso que continúa en el tiempo.
Aspectos como los contenidos editoriales a largo
plazo o el mantenimiento deberían estar definidos ya
en los primeros planes de producción y presupues-
tos. Sin esta perspectiva, la publicación electrónica
sufrirá el mismo destino que muchas iniciativas por
parte de departamentos de comunicación de em-
presas: un inicio entusiasta sin resultados ni a medio
ni a largo plazo.
sión posterior con el cliente, una oportunidad de co-
rregir cosas y aclarar conceptos una vez acordado
el encargo.
Lista de comprobación: elementos del Briefing de
una agencia
- Información acerca de la empresa
(como actividades de la empresa o el sector
corporativo).
- Descripción de la situación del marcado
(punto da partida, competencia).
- Resumen del encargo, requisitos, restriccio-
nes y objetivos.
- Grupo de target
(grupos de objetivo esenciales).

- Objetivos de comunicación (mensajes bási-

n EL BRIEFING
El término briefing (o reunión informativa) procede
de la jerga militar estadounidense y hace referencia
a una discusión inicial acompañada de una breve
descripción de la situación y de una explicación de
los objetivos de una operación, así como los detalles
estratégicos.
Un briefing debe incluir toda la información necesa-
ria para concebir, diseñar y llevar a cabo un encargo.
Un buen briefing depende de la franqueza del encar-
gado de realizarla y de su capacidad para expresar
cuáles son los problemas de una manera compren-
sible. El briefing debe ponerse por escrito.
cos, posicionamiento, medios objetivo, mez-
cla de comunicaciones).
- Información del producto (características,
argumentos de uso, ventajas, razones).
- Presupuesto (por ejemplo parámetros de
disponibilidad, servicios de agencia, otros
servicios).
- Fechas límite (por ejemplo, lanzamiento) y ti-
meline -línea temporal- (planificación del tiem-
po y del proyecto).
- Materiales adicionales.

Nota: si se da demasiada información se dificulta la

toma de decisiones y se difumina la diferencia entre
lo que es importante y lo que no lo es. La cantidad
de información debe ser la adecuada para llevar a
cabo el encargo.

Después del primer briefing, toda la información que

falte es recabada e incorporada en un proceso co-
FUNDAMENTOS DE DISEÑO GRÁFICO
PARA WEB E INTERACTIVOS
tema 0 1
n CONOZCA A SU PÚBLICO
El siguiente paso es identificar a los usuarios poten-
ciales del sitio web y así poder estructurar el diseño
en función de sus expectativas y necesidades. Los
conocimientos, procedencia, intereses y necesida-
des de los usuarios cambiarán dependiendo de si es
un usuario ocasional, que requiere una introducción
cuidadosa y estructurada, o si se trata de un usuario
experto que se sentirá ofendido si intuye cualquier
intento de paternalismo o, simplemente, de retrasar
su acceso a la información. Un sistema bien diseña-
do debería ser capaz de acomodar distintos niveles
de habilidad e intereses de los usuarios.
Principiantes y usuarios ocasionales. Este tipo de
usuario requiere una estructura sin ambigüedades y
un acceso fácil a visiones de conjunto que ilustren
cómo se dispone la información dentro del sitio web.
Los principiantes tienden a sentirse intimidados por
menús de texto complejos, y si la página principal no
está dispuesta de forma clara y atractiva, desistirán
en traspasar el umbral y acceder al lugar. Los usua-
rios ocasionales prefieren páginas que aporten una
visión general o de conjunto, mapas jerárquicos y
elementos gráficos o iconos que puedan retener con
facilidad, como forma de saber o conocer dónde se
almacena la información. Un glosario de términos
técnicos, acrónimos, abreviaciones y una lista de las
preguntas más frecuentes (FAQ - Frequent Asked
Questions), pueden ser muy útiles para el principian-
te o usuario ocasional.
Usuarios y expertos reincidentes. Estos usuarios
confían en obtener de la web a la que acceden infor-
mación certera y de forma rápida. Un usuario experto
es generalmente impaciente ante una multiplicidad
de menús gráficos de baja densidad que ofrecen
pocas opciones a la vez. Tienen también objetivos
específicos en mente”a la hora de consultar la web,
y aprecian los menús de texto detallados, esquemas
de la estructura del lugar, índices amplios y motores
de búsqueda ágiles y bien diseñados que permitan
una búsqueda y consulta rápida de los resultados.
n DESARROLLO DEL SITIO
Todo proyecto significativo de sitio web supone unos
retos particulares, pero el proceso de desarrollo en
su conjunto sigue generalmente estas seis grandes
fases:
1 Definición del sitio y planificación
2 Arquitectura de la información
3 Diseño
4 Construcción
5 Marketing
6 Rastreo, evaluación y mantenimiento
DEFINICIÓN DEL SITIO Y
PLANIFICACIÓN
En este estado preliminar definiremos los objetivos
y las metas para el sitio web, y empezaremos a re-
coger y analizar la información que será necesaria
para justificar el presupuesto y los recursos que se
requieren. Es hora también de definir el alcance de
los contenidos, los apoyos en funcionalidad y tec-
nología interactiva, y la amplitud y profundidad de
los recursos de información que se requieren para
llenar la web y así satisfacer las expectativas de los
usuarios.
ARQUITECTURA DE LA INFORMACIÓN
Un buen diseño web se basa en las siguientes
reglas
• Presentación de la información de forma
sencilla, clara y rápida.
• Centrado en los aspectos esenciales.
• Navegación lógica y manejable.
• Un principio de diseño uniforme aplicado a
la totalidad del sitio.
• Tiempos de descarga aceptables para los
usuarios y visualización correcta en todos
los navegadores web principales.
FUNDAMENTOS DE DISEÑO GRÁFICO
PARA WEB E INTERACTIVOS
tema 0 1
En esta etapa se deberán detallar tanto la organi-
zación como los contenidos para el sitio web. El
equipo deberá inventariar los contenidos existentes,
enunciar qué tipo de nuevos contenidos se requie-
ren y definir la estructura de la organización. Una
vez se ha delineado la arquitectura/estructura de los
contenidos, se deberán construir pequeños prototi-
pos de partes de la web, y así poder probar cómo se
adapta el diseño a los contenidos y a la navegación.
Estos prototipos parciales son útiles en dos senti-
dos. Primero por ser una manera fantástica de pro-
bar la navegación y desarrollar la interfaz de usuario
definitiva. Un prototipo debería tener las suficientes
páginas para poder comprobar con precisión cómo
uno se desplaza de las páginas con menús a las pá-
ginas con contenidos y viceversa. En segundo lugar,
la creación de prototipos permite a los diseñadores
gráficos probar distintas maneras de relacionar la
apariencia visual con la interfaz de navegación y el
diseño de la información. La clave para un buen pro-
totipo debe ser, ante todo, la flexibilidad.
Diseño estructural
Esta fase implica la organización interna, es decir,
estructurar desde el punto de vista informático y
gráfico toda la información que manejará el usuario
cuando utilice nuestro interactivo. El diseño de un
interactivo requiere la organización de directorios,
nombrar archivos y directorios, y adoptar un deter-
minado diagrama de flujo. Entre otras tareas debe-
remos planificar la creación de iconos y construir
sistemas de ayuda.
Lineal
Todos los nodos son ordenados en línea a través
de una secuencia única, permitiendo al usuario sólo
avanzar (“forward”) y retroceder (“rewind”). Un ejem-
plo son los videojuegos que reproducen una narra-
ción de tres actos: presentación de los objetivos del
usuario, desarrollo de la acción y desenlace o nodo
de salida con los créditos de la aplicación.
Ramificada
Esta estructura parte de una secuencia lineal de
nodos (entrada-A-B-Csalida) a la que se han inclui-
do otros nodos subordinados. Así un nodo A puede
ramificarse en Al y A2, el nodo B en Bi y B2, etcétera.
Un ejemplo son los cuentos infantiles que emplean
una estructura lineal para la narración principal y los
nodos subordinados para crear las elecciones lúdi-
cas interactivas.
Paralela
Una estructura formada por un nodo de entrada, un
nodo de salida y varias cadenas de nodos lineales
(A, Al, A2); (B, Bl,B2,); (C, Cl, C2); (D, Dl, D2). Permi-
te la navegación lineal y la navegación en el mismo
nivel (Al, BI, Cl). Narra la misma historia simultánea-
mente desde distintos puntos de vista.
Concéntrica
Este modelo organiza el resto de nodos alrededor
del nodo de entrada en secuencias lineales impi-
diendo la navegación entre nodos del mismo nivel
(Al, BI, Cl). Adoptan este modelo los videojuegos
que solicitan de sus usuarios superar un nivel para
pasar al siguiente.
Jerárquica
Este modelo es clásico y también se le conoce como
“estructura en árbol” o “arborescente”. Consiste en
un nodo de entrada inicial que se subdivide en otros
(A, B, C...) y a su vez estos se subdividen en otros
(Al, A2); (BI, B2,); (Cl, C2); y así sucesivamente hasta
donde queramos.
Reticular
Es el modelo más completo para la navegación por-
que obedece a la estructura en red, malla o telaraña.
Un nodo está conectado a todos los demás. preci-
samente este modelo que ofrece más libertad que
el resto es el más frustrante. Ello es debido a que,
al no priorizar una trayectoria de navegación frente
a otras, hace al sistema poco eficaz: “Si sólo hay un
camino posible, no es interactivo; si todos los cami-
nos son posibles, estoy perdido”.
Mixta
Combina varios de los modelos explicados. Es la
fórmula más frecuente en el diseño de interactivos.
FUNDAMENTOS DE DISEÑO GRÁFICO
PARA WEB E INTERACTIVOS
tema 0 2
n DISEÑO
Es en esta fase del proyecto donde el sitio web em-
pieza a tener cara y ojos, en la medida en que se
definen la retícula (grid) de la página, los elementos
que la definirán y las líneas maestras a nivel gráfico
de la web en su conjunto. Es el momento de encar-
gar o generar las ilustraciones, las fotografías y de-
más materiales gráficos y audiovisuales necesarios.
También es el momento de investigar, escribir, orga-
nizar, ensamblar y editar los contenidos en formato
de texto. A su vez, los elementos de programación,
diseño y entrada a bases de datos deberían estar
ya concretados e iniciados. El fin es producir todos
los componentes para que estén listos para la últi-
ma fase de producción: la construcción material de
cada una de las páginas web.
Al organizar un área de diseño, se debe procurar que
el tamaño de la página web coincida con la resolu-
ción del monitor, de forma que los elementos impor-
tantes estén siempre visibles. Durante mucho tiem-
po, se consideraba ideal diseñar las páginas para
una resolución de 800 x 600 píxeles, posteriormente
se usó una resolución de 1024 x 768 o de 1280 x 854
pixeles; pero todo esto ha cambiado radicalmente
desde la irrupción de la navegación desde dispositi-
vos móviles y tabletas.
Actaulmente nos enfrentamos a una web que de
nuevo debe ser posible visualizar correctamente en
multitud de formatos y tamaños de pantalla. A un
diseño flexible a estas demandas se le denomina Di-
seño Responsivo.
DISEÑO RESPONSIVO
El Responsive design, diseño receptivo y adaptivo o
como quieran traducirlo es una tendencia totalmen-
te nueva dentro del diseño Web, la cual consiste en
reacomodar los elementos que componen el websi-
te según el tamaño de dispositivo que la reproduzca.
Esto es responsive design y se logra con un conjun-
to de técnicas de css3.
Ahora mismo nos encontramos en uno de los mo-
mentos más excitantes de la tecnología, posible-
mente desde la aparición en escena de la web social
(conocida también como web 2.0): HTML5, Flash en
dispositivos móviles y televisores, tablets, smartpho-
nes y un largo etcétera.
Es en momentos como éste donde debemos recor-
dar lo aprendido y no olvidar cosas como la usa-
bilidad o accesibilidad justo en el momento en que
se vuelven más importantes, sobre todo teniendo
en cuenta que dispositivos como los smartphones
y tablets nos exigirán repensar una y otra vez so-
bre nuestras aplicaciones y el modo como nuestros
usuarios interactuarán con ellas.
Crear sitios específicamente para móviles no es una
idea novedosa, pero la aparición de dispositivos mó-
viles con cada vez mayores capacidades le ha dado
un nuevo auge, aún cuando creo estamos lejos de
ver lo que realmente pueden llegar a ser. En el nue-
vo mundo móvil tenemos browsers de verdad, ma-
yor capacidad, Wi­Fi, etc. que nos da todo un nuevo
abanico de posibilidades.
Sin embargo, no podemos olvidar que estos dispo-
sitivos no disponen de las ventajas que nos da un
computador personal, ya sea en términos de reso-
lución de pantalla, velocidades de conexión, etc. lo
que nos obliga a crear una interfaz que funcione es-
pecíficamente dentro de estas limitaciones. Lo ideal
será pensar primero las interfaces con mayores limi-
taciones y luego aumentar las prestaciones a me-
dida que los recursos aumentan: móviles primero,
luego tablets y de allí a ordenador.
La usabilidad es hacer que las webs sean herra-
mientas de comunicación práctica. Es decir, que al-
guien que entre en una web encuentre lo antes posi-
ble lo que busca o -que también pasa-, se de cuenta
lo antes posible de que está en el sitio equivocado.
La navegabilidad web en tres preguntas:
- ¿Dónde estoy?
- ¿Dónde he estado?
- ¿Dónde puedo ir?
FUNDAMENTOS DE DISEÑO GRÁFICO
PARA WEB E INTERACTIVOS
tema 0 2
¿Qué implica diseñar para móviles?
Obliga a enfocar lo verdaderamente importante:
Dadas las limitaciones que tenemos en un dispo-
sitivo móvil (tamaño de pantalla, velocidad de co-
nexión, etc.) es indispensable aprender a jerarquizar
la información ¿qué es realmente lo que queremos
que nuestros usuarios sepan? ¿Cuáles de los servi-
cios que nuestro sitio ofrece son realmente usados
como para aparecer de primero en nuestra lista de
jerarquía? ¿Realmente es útil darle la bienvenida con
un lindo texto de presentación o es mejor mostrar de
una vez aquello que los usuarios realmente buscan
en nuestro sitio?
Diseñar un sitio específicamente para móviles nos
obliga a entender al usuario, a saber qué es lo que
busca en nuestro sitio y darle justamente eso. Es im-
prescindible que sepamos enfocar nuestro sitio en
aquello que realmente queremos mostrar al usuario
o aquello que sabemos que realmente quiere de no-
sotros, desechando aquellas cosas que, por intere-
santes que puedan ser desde nuestro punto de vis-
ta, resulten secundarias o poco importantes para él.
Es fundamental conocer al usuario final
Uno de los principales problemas que enfrentamos
con nuestros clientes es que, por lo general, no
piensan en sus usuarios a la hora de crear el sitio
web, haciendo solicitudes que responden básica-
mente a una mezcla entre sus gustos personales (o
los suyos, los de su pareja, los de sus socios, etc.)
y las cosas que desea que el sitio muestre sobre su
producto.
En conclusión, hacer el cambio de paradigma de
móviles a PC en vez de PC a móviles no sólo nos
prepara para el futuro cercano en el que desarrollar
sitios optimizados para estos dispositivos no será
simplemente un lujo de grandes empresas sino una
necesidad real del mercado sino que además nos
permite hacer un necesario ejercicio de arquitectura
de la información en pro de un producto más efec-
tivo y usable.
ACCESIBILIDAD
La accesibilidad Web significa que personas con
algún tipo de discapacidad van a poder hacer uso
de la Web. Al hablar de accesibilidad Web se está
haciendo referencia a un diseño Web que va a per-
mitir que estas personas puedan percibir, entender,
navegar e interactuar con la Web.
La accesibilidad Web también beneficia a otras per-
sonas que no tienen ninguna discapacidad pero
que, debido a determinadas situaciones, tienen di-
ficultades para acceder a la Web (por ejemplo, una
conexión lenta), también estaríamos hablando de
aquellas personas que sufren una incapacidad tran-
sitoria (por ejemplo, un brazo roto), y de personas de
edad avanzada.
Otra consideración importante para las empresas es
que la accesibilidad Web es un requisito establecido
en algunos casos por leyes y políticas.
•Nota: ver documento de referencia: Introducción a la Accesi-
bilidad Web.pdf
n TIPOS DE IMÁGENES
JPG o JPEG Es el formato más común para compri-
mir imágenes con relativamente poca pérdida de ca-
lidad y bajo peso, generalmente usado en imagenes
fotográficas. Es un formato óptimo para fotografías
digitalizadas, imágenes que utilizan texturas, imáge-
nes con transiciones de color en degradado.
Ventajas:
Soporta millones de colores a un peso relati-
vamente bajo
Ampliamente soportado en todos los navega-
dores y plataformas
Desventajas:
No soporta transparencias
El formato no es libre
Recomendación: Únicamente para imágenes
fotográficas con muchos colores y detalles.
FUNDAMENTOS DE DISEÑO GRÁFICO
PARA WEB E INTERACTIVOS
tema 0 2
GIF Creado por CompuServe hace casi 20 años.
Utiliza compresion de un máximo de 8 bits (256 co-
lores), por lo tanto se reduce considerablemente la
calidad si se trata de imagenes como fotografías o
degradados complejos.
El formato GIF calcula la cantidad de colores me-
diante una formula que permite paletas de 2, 4, 8,
16, 32, 64, 128 y 256 colores, lo que nos da una
amplia gama de posibilidades a la hora de optimizar
gráficos sencillos, además soporta las transparen-
cias de 1 bit, es decir, que un pixel puede tener un
color, o ser totalmente transparente.
También permite hacer animaciones por fotogra-
mas, (muy sencillas) aunque la compresion en estos
casos suele ser deficiente.
Ventajas:
-Amplia compatibilidad en los navegadores
La transparencia puede ser muy útil, si se
sabe utilizar.
-La compresión logra imagenes de muy bajo
peso.
Desventajas:
-Límite de 256 colores
-No es formato libre.
Recomendación: No usar en ningún caso.
PNG Es un formato gráfico que esta basado en un
algoritmo de compresion sin pérdidas, y fue desa-
rrollado para resolver las deficiencias del GIF, princi-
palmente en cuanto a profundidad de color.
Una de las principales ventajas de PNG, es que in-
dependientemente de la profundidad de color que
se use, la compresión permite archivos de muy bajo
peso sin pérdida de calidad.
El número de canales depende de si la imagen es en
escala de grises o en color y si dispone de canal alfa
(canal de transparencia). La combinaciones permiti-
das por PNG son:
Escala de grises (1 canal) Escala de grises y canal
alfa (2 canales) Canales rojo, verde y azul (RGB, 3
canales. También llamado “color verdadero”) Cana-
les rojo, verde, azul y alfa (RGB + alfa, 4 canales)
PNG soporta tanto transparencia alfa (los bits pue-
den ser “medio” transparentes) como transparencia
de índice en sus tres versiones, Todos los navega-
dores actuales tienen soporte para PNGs con trans-
parencia alfa excepto Internet Explorer, que soporta
PNGs con transparencia de indice, y transparencia
alfa solo en imágenes de menos de 8 Bits (siempre
interpretada como transparencia de índice).
Los diferentes tipos de PNG, se usan para lograr la
mejor relación peso/calidad en todo tipo de gráficos:
PNG 8, se pueden usar para gráficos sencillos, colo-
res planos, logos, pequeñas sombras, y para image-
nes que no requieran mucho color.
PNG 24 sirve para gráficos y degradados complejos
de varios colores y fotografías no tan complejas.
PNG 32 para todo tipo de imágenes complejas, foto-
grafías con mucho color etc. Las imágenes comple-
jas suelen tener un mayor peso que las JPG en una
calidad similar
Ventajas:
-En la mayoría de los casos prácticos, se ob-
tiene la mejor relación peso/calidad.
-Formato libre. Recomendado por W3C.
Acepta transparencias.
Desventajas:
-Imágenes con mucho color y texturas suelen
ser muy pesadas
-El soporte de PNG no es tan amplio como los
formatos anteriores.
Recomendación: Usar PNG al máximo, en
todo tipo de gráficos, layouts, fondos, etc. No
tanto en Imágenes de muchos colores y textu-
ras, aunque nunca está de más probar.
FUNDAMENTOS DE DISEÑO GRÁFICO
PARA WEB E INTERACTIVOS
tema 0 3

n ELEMENTOS COMUNES EN LA WEB • Las casillas de comprobación

• Los menús
Los menús se suelen aglomerar en una sola barra
de informaciones y contienen grupos de comandos
relacionados que están separados -en la mayoría de
los casos por líneas-.
• Los cuadros de diálogo
El lector llega a los cuadros de diálogo cuando es-
coge una entrada de menú a la que siguen puntos
suspensivos (...).
Los cuadros de diálogo son ventanas que contienen
una serie de comandos relacionados que logran que
se cumplan aquellas funciones que espera el usua-
rio. Estos cuadros están compuestos a su vez por
una serie de controles. Los más importantes son:
• Las fichas
Es la posibilidad que ofrecen los cuadros de diálogo
de operaciones múltiples. Generalmente funcionan
mediante un “click” sobre iconos de pestaña que
permiten visualizar distintos grupos de controles.
Estas casillas permiten al lector saber si ciertas op-
ciones están activadas o desactivadas. Al activar
una casilla de comprobación (al seleccionarla) se
pueden activar otros controles; también puede su-
ceder que al seleccionar o deseleccionar una casilla
de comprobación se amplíe un cuadro de diálogo
que muestre más controles.
• La botonería
Los botones -que usualmente tienen forma rectan-
gular activan una acción. Si el botón está enmarca-
do por doble línea más gruesa, puede activarse me-
diante la tecla “intro”. Existen botones que incluyen
una lista desplegable, pudiéndose elegir un tipo de
acción determinada.
• Cuadros de diálogo de advertencia
Son cuadros de diálogos que aparecen en la panta-
lla del lector cuando surge un problema y, por lo ge-
neral, suelen incluir información sobre el origen del
problema y su posible solución.

• Las áreas
El área es una zona delimitada por un borde y un
título dentro del cuadro de diálogo o una ficha que
agrupa un conjunto de comandos.

• Las listas
Las listas aparecen en algunos cuadros de diálogo y
consisten en un inventario de elementos que pueden
ser seleccionados o editados.

• Los campos
Un campo presenta forma rectangular y su función
consiste en introducir un dato concreto, como nues-
tro nombre, correo electrónico, etc...

• Los botones de radio

Los botones de radio tienen la facultad de seleccio-
nar entre diversas opciones que se excluyen mutua-
mente.
FUNDAMENTOS DE DISEÑO GRÁFICO
PARA WEB E INTERACTIVOS
tema 0 3
n DISEÑO DE LA INTERFAZ
Las páginas web se diferencian de los libros y otros
documentos en algo crucial: los enlaces de hiper-
texto permiten al usuario acceder a una página web
sin ningún tipo de preámbulo. Así, una página web
deberá tener mucha más autonomía que las páginas
de un libro convencional. Esto significa que, gene-
ralmente, sus encabezamientos y pies de página de-
berán ser más informativos y elaborados que en las
páginas impresas. Sería absurdo repetir el copyright,
el autor o la fecha de un libro al pie de cada una de
las páginas. Pero las páginas web tal vez requieran
esta información en todas ellas, pues puede darse
la circunstancia de que ésta sea la única parte que
el usuario visite del sitio web. Este carácter necesa-
riamente independiente de cada una de las páginas
web no es exclusivo de la Red.
Todo documento web requiere de:
• Un título informativo
• La identidad del creador (autor o institución)
• La fecha de actualización
• Al menos un enlace a la página principal
• La dirección URL de la página principal.
Al menos en las páginas más importantes
de la web
Incluir estos elementos básicos supone haber reco-
rrido el 90 por ciento del camino a seguir para hacer
más comprensible al usuario la interfaz web.
Por otro lado hemos de tener en cuenta los siguien-
tes aspectos:
Interacción y ancho de banda. El usuario no tolera-
rá demoras largas. Investigaciones acerca del factor
humano demuestran que, para la mayor parte de ta-
reas con el ordenador, el umbral de frustración está
alrededor de los 10 segundos.
Simplicidad y consistencia. El usuario no está inte-
resado en una complejidad gratuita, especialmente
los que dependan de la web para una información
oportuna y detallada relacionada con su trabajo. Las
metáforas de la interfaz deberán tener un carácter
sencillo, familiar y lógico -si se necesita una metáfo-
ra para el diseño de la información, es mejor escoger
un libro o una biblioteca que una nave espacial o
un aparato de televisión. Los mejores diseños de la
información son los que pasan desapercibidos a un
usuario tipo.
Previsibilidad: Para una máxima funcionalidad y le-
gibilidad, el diseño del sitio web y de cada una de
las páginas debería estar construido basándose en
un sólido patrón de unidades modulares que com-
partirían una misma retícula base y los mismos te-
mas gráficos, convenciones editoriales y jerarquías
de organización. Se trata de conseguir consistencia
y previsibilidad: al atravesar el sitio, el usuario debe
sentirse cómodo y convencido de que va a encon-
trar lo que busca. La semejanza gráfica en una serie
de páginas de un sitio web proporciona pistas visua-
les para la continuidad de la información.
Integridad y estabilidad en el diseño. Para con-
vencer al usuario de que lo que se le ofrece es fiable
y adecuado, es preciso cuidar el diseño de la web
igual que lo haría en cualquier otro tipo de soporte;
y utilizar los mismos niveles de calidad en el diseño
y los contenidos editoriales. Una web de apariencia
descuidada, con un diseño visual pobre y unos con-
tenidos editoriales pobres, no transmite ningún tipo
de seguridad.
Diálogo y retroalimentación. La web debería ofre-
cer al usuario, a través de botones de navegación
o enlaces de hipertexto colocados uniformemente,
una confirmación visual y funcional consecuente
con sus movimientos y decisiones. La retroalimenta-
ción (o feedback) también significa estar preparado
para responder a cualquier demanda o comentario
de un usuario. Una web bien diseñada proporciona
enlaces directos al webmaster o editor responsable
del sitio. Para un éxito a largo plazo de la empresa,
es fundamental una cuidada planificación de esta
relación con el usuario.
FUNDAMENTOS DE DISEÑO GRÁFICO
PARA WEB E INTERACTIVOS
tema 0 3
n NAVEGACIÓN
En un sitio web, un conjunto fértil de enlaces y ele-
mentos gráficos para la navegación atraerá la aten-
ción del usuario, desplazándola de los botones de
navegación incorporados en el propio navegador
hacia los contenidos internos de la web. Proveer un
conjunto de botones de navegación consistente y
predecible supone también ofrecer al usuario una
manera de percibir la estructura y organización del
sitio web, manifestando visualmente su lógica y es-
tructura; por otro lado un usuario necesita general-
mente situarse dentro de un contexto, encontrar su
lugar dentro de una estructura de información. En
los documentos en papel, esta percepción del “dón-
de estoy”, es una mezcla de signos de estructura
y gráficos proporcionados por el diseño gráfico del
libro, la organización del texto y la propia sensación
física del libro como objeto.
DISEÑO DEL SITIO
La mayor parte de la información en la Red, está
recogida en documentos de referencia cortos, para
ser leídos no secuencialmente. Mucho antes de que
la Red se inventara, los autores de temática técnica
ya habían descubierto que un lector aprecia siempre
los pedazos cortos de información que pueden ser
localizados y visualizados de forma rápida. Esta ma-
nera de presentar la información en la Red es válida
por varias razones:
• Pocos usuarios de la Red permanecen largo tiem-
po leyendo largos párrafos de texto en la pantalla. La
mayoría o bien guardan en el disco duro este tipo de
documentos, o bien los imprimen.
• Un troceado moderado de la información condu-
ce, por sí mismo, a la utilización de enlaces. Pero
no caiga tampoco en la extrema subdivisión de los
contenidos, o emergerá la frustración por parte del
usuario. La dimensión máxima para una correcta
partición de la información en la Red sería lo corres-
pondiente a una o dos páginas impresas en papel.
• Trocear la información puede facilitar su organiza-
ción y exposición de manera uniforme. Esto permite
al usuario aplicar tanto su experiencia a futuros si-
tios con los que se vaya encontrando, como pre-
decir cómo puede estar organizada una sección no
conocida de una web.
• Fragmentos sintéticos de información encajan me-
jor en la pantalla de un monitor, pues no hay espacio
para visualizar grandes documentos. Las páginas
web grandes tienden a desorientar al usuario medio,
pues se le fuerza a utilizar la barra de desplazamien-
to y a recordar lo que está fuera de la pantalla.
El concepto de trocear la información debe ser flexi-
ble y con sentido común, con una organización lógi-
ca y conveniente. Deja que la naturaleza de los con-
tenidos sea la que sugiera cómo deben subdividirse
y estructurarse. A veces tiene sentido proporcionar
documentos largos como una sucesión enlazada de
un conjunto de páginas. A pesar de que es preferible
la poca longitud, parece obvio que dividir un docu-
mento largo arbitrariamente puede tener muy poco
sentido, especialmente si se quiere que el usuario
pueda imprimirlo de una sola vez con facilidad.
Jerarquía de importancia.
En la Red, una organización jerárquica es virtualmen-
te una necesidad. La mayoría de sitios dependen de
una jerarquía, moviéndose desde el plano general
de conjunto -que correspondería a la página princi-
pal o home-, hasta las páginas más específicas de
subrnenús y contenidos. Los fragmentos de infor-
mación deberían clasificarse según su importancia
y estar organizados mediante las relaciones que se
establecen entre unidades. Una vez determinado un
conjunto lógico de prioridades, se puede edificar la
jerarquía desde los conceptos más importantes o
generales hasta los temas más específicos o deta-
llados.
Relaciones. Al enfrentarse a un nuevo y comple-
jo sistema de información, el usuario construye su
propio esquema mental; éste le sirve para adivinar
dónde encontrar lo que aún no ha visto. El éxito en la
organización del sitio web vendrá determinado, por
FUNDAMENTOS DE DISEÑO GRÁFICO
PARA WEB E INTERACTIVOS
tema 0 3
encima de todo, por la manera en que el sistema que
se crea responda a las expectativas del usuario. Si
se confunde al usuario con una estructura que no es
ni lógica ni predecible, se sentirá frustrado por las
dificultades que se encontrarán al atravesarla.
Función. Una vez se ha creado la web, analiza su
funcionalidad. Un diseño de web eficaz es el justo
equilibrio en la relación que se genera entre las pági-
nas menú y las páginas con contenidos específicos.
El fin está en conseguir una gradación de menús y
páginas que un usuario medio perciba como natural,
y que no confunda o interfiera con el uso que haga
del sitio.
Los sitios web con una estructura jerárquica poco
profunda dependen demasiado de páginas menú
extensas que pueden confundir de la misma mane-
ra que una “lista de la compra” con información no
relacionada:
Un esquema de menús puede, a su vez, ser tan pro-
fundo, que la información quede enterrada bajo ex-
cesivos niveles de menús. Cualquier usuario puede
sentirse frustrado si la navegación que se le propone
no le deja más opción, para acceder a los conteni-
dos reales, que atravesar numerosas capas de me-
nús vinculados:
Si la web está en continuo crecimiento, el equilibrio
correcto entre menús y páginas de contenidos es un
factor dinámico fundamental. La retroalimentación o
feedback por parte del usuario (y el propio análisis
del uso que nosotros hacemos del sitio) puede ayu-
dar a decidir si el esquema de menús resiste su uso
o tiene puntos débiles a mejorar. Estructuras com-
plejas de documentos requieren jerarquías de me-
nús más profundas, pero el usuario nunca debe ser
forzado a una página de menús tras otra si el acce-
so directo es factible. Con una jerarquía funcional y
equilibrada de menús se puede ofrecer al usuario un
acceso directo a la información y, a la vez, reflejar la
estructura general de la web.
Diseño de la página
CLARIDAD, ORDEN Y VERACIDAD es lo que más
apreciamos cuando buscamos fuentes de infor-
mación, sean documentos tradicionales en papel o
páginas web. Esta confianza sólo la puede aportar
un diseño de página web objetivo. La organización
espacial de texto y gráficos en una página web, gra-
cias a su impacto visual, puede implicar al usuario,
puede dirigir su atención, priorizar la información a
la que se enfrenta y hacer que la interacción con la
web sea mucho más amena y eficaz.
Lógica visual. El diseño gráfico genera una lógica
visual y persigue un óptimo balance entre el estí-
mulo visual y la información gráfica. Sin el impacto
visual de las formas, el color y el contraste, las pá-
ginas pueden convertirse en aburridas y no motivar
al usuario. Un documento de texto denso, sin con-
traste ni alivio visual, es más duro de leer. Pero sin
la profundidad y complejidad del texto, las páginas
con preponderancia de elementos gráficos corren el
riesgo de decepcionar al usuario al ofrecer un equi-
librio pobre entre el estímulo visual, la información
en formato de texto y los enlaces interactivos mul-
timedia.
La continuidad visual y funcional de la organización,
el diseño gráfico y la tipografía de la web son fun-
damentales para convencer al público de que ésta
puede ofrecerle una información útil, exacta y opor-
tuna.
JERARQUÍA VISUAL
La primera de las tareas del diseño gráfico es crear
una jerarquía visual fuerte y consistente, donde se
enfatizan los elementos importantes y se organizan
los contenidos de forma lógica y previsible.
El diseño gráfico es básicamente la gestión visual de
información utilizando herramientas como la compo-
sición, la tipografía y la ilustración, para guiar el ojo
del lector a través de la página. El lector primero vi-
sualiza una página como grandes masas de forma y
color, con unos elementos en primer plano contras-
tados con otros del fondo. Sólo en segundo lugar
FUNDAMENTOS DE DISEÑO GRÁFICO
PARA WEB E INTERACTIVOS
tema 0 4
empieza a escoger entre la información, primero en
el ámbito de imágenes o gráficos -si es que existen-,
para después empezar a analizar gramaticalmente el
texto y a leer palabras concretas y frases:
El contraste es fundamental. El equilibrio y organi-
zación general de los elementos gráficos de una pá-
gina es esencial si se desea atraer al usuario hacia
los contenidos. Una página aburrida, con sólo texto,
provocará un rechazo del ojo, pues se encontrará
ante una masa gris y monótona, sin claves evidentes
de cómo se estructura la información. Por otro lado,
una página diseñada de forma torpe, con grandes
titulares en negrita o elementos gráficos demasia-
do pesados, también distraerá o repelerá al usuario
que esté buscando contenidos con más sustancia.
Deberás conseguir un apropiado equilibrio entre la
necesidad de atraer al ojo mediante el contraste vi-
sual y la necesidad de ofrecer una organización clara
n EYETRACKING
El usuario, con su comportamiento y comentarios
ante la tarea contribuye a veces al análisis del pro-
blema; pero sus expresiones acostumbran a ser am-
biguas, poco concretas o incluso diferir en ciertos
aspectos de sus pensamientos, por lo que a lo largo
del tiempo han ido apareciendo técnicas y tecnolo-
gías para extraer datos más objetivos. Una de ellas
es el eyetracking.
El eyetracking es una tecnología que permite seguir
los movimientos oculares de una persona para infe-
rir qué mira y qué ve. Esto se consigue actualmen-
te mediante un eyetracker, un monitor especial que
lanza rayos infrarrojos a los ojos de quien lo usa. Es-
tos rayos rebotan en su pupila y vuelven al aparato,
permitiendo así calcular con precisión dónde está
mirando.
Teniendo esto en cuenta, podemos saber en qué
zonas de la web se fijan más los usuarios para op-
timizar la colocación de botones o elementos que
deseemos destacar.
n RETÍCULAS PARA PÁGINAS WEB
La consistencia y previsibilidad son características
fundamentales en todo sistema de información bien
diseñado. Las retículas de diseño que subyacen en
la mayoría de las publicaciones en papel de calidad,
son igualmente necesarias en el diseño de todo do-
cumento electrónico o publicación en Red, donde
las relaciones espaciales entre los elementos que
aparecen en la pantalla cambian constantemente en
función de las interacciones del usuario y de la acti-
vidad misma del sistema.
No existe una retícula de diseño apropiada para la
globalidad de páginas web. El primer paso es esta-
blecer una retícula de composición básica. Con esta
“espina dorsal”, puedes decidir cómo se relaciona-
rán los bloques de texto y de imagen entre ellos, y
puedes generar las líneas maestras de estilo que re-
girán todas las páginas de la web, utilizando títulos,
subtítulos, botones y enlaces para la navegación.
El fin es establecer una composición de pantalla ló-
gica y consistente, que permita la flexibilidad sufi-
ciente como para colocar gráficos y texto de distin-
tas maneras, sin tener que reconsiderar el diseño de
cada una de las páginas con las que te enfrentes.
Sin una fuerte retícula de composición subyacente,
la composición de las páginas de tu proyecto fluc-
tuará según las decisiones del momento, y el diseño
web, como globalidad, parecerá confuso e incom-
pleto.
La disposición de los elementos visuales mediante
el sistema reticular produce la impresión de armonía
global, de transparencia, claridad y orden. El orden
en la comunicación favorece a la credibilidad de la
información y otorga confianza. Una retícula ade-
cuada en la configuración visual posibilita:
- La composición del texto y de las ilustracio-
nes de forma sistemática y rápida.
- La composición de textos o ilustraciones de
un modo compacto con su propio ritmo.
- La disposición de material visual de modo
que sea fácilmente inteligible y estructurado.
FUNDAMENTOS DE DISEÑO GRÁFICO
PARA WEB E INTERACTIVOS
tema 0 4
CONSISTENCIA
Establece en primer lugar una retícula base y un
estilo para los textos y los elementos gráficos; apli-
ca luego estos parámetros para construir un ritmo
y una unidad a lo largo de todas las páginas de la
web. La repetición no es aburrida, sino que aporta a
la web una fuerte identidad gráfica que genera y re-
fuerza la sensación de estar en un “lugar” memora-
ble y diferenciado. Una aproximación consistente a
la composición y a la navegación permite al usuario
adaptarse rápidamente al diseño y prever con con-
fianza la localización de la información y del control
de la navegación a lo largo de todas las páginas de
la web.
Si escoges una temática gráfica, utilízala por toda
la web.
n TIPOGRAFÍA
CARACTERÍSTICAS TIPOGRÁFICAS DE LA RED
A pesar de que las reglas tipográficas básicas son las
mismas tanto para los documentos web como para
los documentos impresos convencionales, la tipo-
grafía tiene características sustancialmente distintas
se muestre en una pantalla o impresa en un papel.
La pantalla de un ordenador reproduce las fuentes
a una resolución muy inferior a la que encontramos
en cualquier libro, revista o incluso cualquier página
salida de una impresora corriente. La mayor parte
de las fuentes de libros y revistas se reproducen a
una resolución de 300 pixeles por pulgada o mayor,
mientras que una pantalla de ordenador raramente
supera una resolución de 72ppp.
Los documentos que se escriben para ser leídos
en la pantalla deben ser concisos y estructurados.
En lugar de leer palabra por palabra, la tendencia
es leer las páginas web echándoles un vistazo. Uti-
liza los títulos, listas y los énfasis tipográficos para
destacar secciones o párrafos; en una visualización
rápida, este tipo de elementos son los que atraen la
atención del usuario. Manténlos claros y precisos.
Utiliza los titulares de sección para describir el ma-
terial que se muestra
Al diseñar una tipografía, alguien ha pensado en
cómo se percibirán las letras, las palabras, las ora-
ciones y los párrafos se verá con el fin de que pue-
da ser leído cómodamente, o nos hacen sentir de
cierta manera cuando lo miramos. A veces se hace
bien, otros no. Muchas veces somos nosotros los
diseñadores gráficos que son los que deciden cómo
se verá, en nuestros folletos, nuestros logotipos,
nuestros sitios web y así sucesivamente.
La buena tipografía viene de prestar atención a los
pequeños detalles ya que esto puede hacer la dife-
rencia entre el trabajo de diseño gráfico que es acep-
table o muy bueno. Se trata principalmente de hacer
que nuestros textos sean legibles y de fácil lectura,
así como de conseguir un resultado estético.
• Usa una tipografía de sin serifas para los
bloques de texto
• Usa siempre un buen contraste.
Texto oscuro sobre fondo claro
• Usa siempre colores web seguros
• Usa siempre tipografías para web
• Haz siempre los enlaces de hipertenso azu-
les y subrayados
• Nunca uses itálicas
LEGIBILIDAD
La buena tipografía depende del contraste visual
entre los distintos tipos de letra y entre los distin-
tos bloques de texto, titulares y espacio en blanco
circundante. Nada atrae más el ojo y la mente del
usuario que un estudiado contraste o una adecuada
diferencia en el tratamiento de cada uno de los ele-
mentos. Esto se puede conseguir sólo con un dise-
ño cuidado de las páginas. Si rellenas tupidamente
FUNDAMENTOS DE DISEÑO GRÁFICO
PARA WEB E INTERACTIVOS
tema 0 4
cada una de las páginas con texto, el lector se en-
frenta ante una pared gris y ante la carencia de con-
traste visual e, instintivamente, se siente rechazado.
Tampoco ayuda hacer que todos los elementos de
la página crezcan en tamaño de manera uniforme.
Incluso las fuentes en negrita pueden convertirse en
monótonas, ya que si todas tienen esta propiedad,
¿qué elementos se destacarán en “negrita?”.
Cuando el contenido es esencialmente texto, la ti-
pografía se convierte en la herramienta para “pintar”
y organizar la página. Los esquemas compositivos
entre el texto y la imagen que se establecen cuida-
dosamente en una sucesión de páginas, pueden
ayudar a una mejor organización de la información y
a incrementar la legibilidad. Para el usuario, es mu-
cho más difícil reconocer la estructura subyacente
cuando se enfrenta a una tipografía desigual o hete-
rogénea, lo cual hace imposible prever y localizar la
información en documentos no conocidos:
ALINEACIONES
Los márgenes definen la zona de lectura al separar
el cuerpo de texto de la zona que lo rodea. En todo
tipo de documentos, los márgenes aportan una in-
cuestionable tranquilidad visual. En el diseño web
es importante un cuidadoso diseño no sólo de los
márgenes, sino también del espacio en blanco, pues
en cualquier pantalla de ordenador, los contenidos
coexisten forzosamente con los elementos de la in-
terfaz del propio navegador, e incluso con otras ven-
tanas, menús o iconos de la interfaz de usuario del
sistema operativo.
Los márgenes y en general el espacio pueden di-
ferenciar el cuerpo principal de texto del resto de
elementos de la página. Si se usan de forma consis-
tente, pueden aportar unidad al sitio al edificar -a su
largo y ancho- una estructura y apariencia fuertes.
También aportan un mayor atractivo visual a la pági-
na al añadir contraste entre el espacio positivo (texto
y gráficos) y el negativo (espacio en blanco).
LONGITUD DE LÍNEA
Para favorecer la lectura, las columnas de las revis-
tas o de los libros son estrechas por razones psico-
lógicas: ante un texto a distancias normales, el ojo
abarca de forma correcta unos ocho centímetros de
ancho, por ello, el diseñador intenta mantener los
párrafos de texto en columnas no mucho más an-
chas que esta distancia cómoda para el ojo, pues
una línea de texto más ancha provocará en el lector
la necesidad de girar su cabeza ligeramente, o forzar
los músculos del ojo para seguir la pista de la línea.
La agilidad de lectura también se ve afectada, pues
el lector puede perderse al buscar el inicio de la línea
siguiente.
MAYÚSCULAS Y MINÚSCULAS
El uso de mayúsculas o de minúsculas afecta de for-
ma importante a la percepción de un encabezamien-
to. Al leer, no visualizamos cada una de las letras
que componen una palabra y luego la construimos,
sino que reconocemos ante todo la forma de la pa-
labra como conjunto de letras.
Evita el uso de encabezamientos en mayúscula. Las
palabras en mayúsculas tienen carácter de rectán-
gulos monótonos que, formalmente, le dicen poco
al ojo.
Para los encabezamientos o titulares recomenda-
mos una escritura tipo oración (en mayúscula la pri-
mera palabra y los nombres propios). Esto es mucho
más cómodo, porque, al leer, lo primero que visuali-
zamos es la parte superior de las palabras.
Puedes comprobar por ti mismo lo complicado que
es leer la parte inferior de las palabras de la misma
frase.
Si utilizas mayúsculas en las iniciales de cada pala-
bra de los titulares, interrumpes la visualización de la
forma de las palabras.
ESPACIO EN BLANCO
El interlineado afecta en gran medida la legibilidad
de un bloque de texto: demasiado grande hace que
FUNDAMENTOS DE DISEÑO GRÁFICO
PARA WEB E INTERACTIVOS
tema 0 4
el ojo tenga dificultades para encontrar la línea si-
guiente, mientras que, si es demasiado pequeño,
confundimos las líneas, pues los rabos superiores
de las palabras se interpolan con los inferiores de la
línea superior.
En papel se considera un interlineado correcto aquel
que está dos puntos por encima del tamaño de la
letra. Por ejemplo, para una letra de 12 puntos uti-
lizaríamos un interlineado de 14 puntos. Si utilizas
el interlineado, aconsejamos que éste sea generoso,
por ejemplo, letras de 12 puntos con un interlineado
de 14 a 16 puntos.
Legibilidad en pantalla. En una pantalla de orde-
nador, algunas fuentes facilitan la lectura más que
otras. Una fuente tradicional, la Times New Roman
es considerada como la más legible en el medio im-
preso, pero su tamaño es demasiado pequeño en la
pantalla, y la forma de sus letras demasiado irregular.
Para la legibilidad en pantalla son muy importantes
tanto la altura-x (la altura de la letra “x” minúscula)
como la forma general de las letras.
Tipos de letra tradicionales adaptados. La Times
New Roman es un buen ejemplo de tipografía tra-
dicional que se ha adaptado para el uso en panta-
llas de ordenador. Un tipo de letra no lineal como
ésta (que en la mayoría de navegadores se presenta
como la fuente por defecto para el texto), con una
altura-x moderada, tiene una legibilidad en pantalla
por encima de la media. Times New Roman es una
fuente apropiada para documentos con mucho tex-
to, que probablemente el usuario imprimirá para leer.
El tamaño compacto de la letra Times New Roman
hace que también sea conveniente su uso para em-
paquetar, en poco espacio, gran cantidad de texto.
Diseños para la pantalla. Tipografías como Geor-
gia o Verdana fueron diseñadas especialmente para
facilitar la lectura en una pantalla de ordenador. Tie-
nen una altura-x engrandecida y, comparadas con
tipografías más tradicionales, su tamaño es mucho
mayor para una misma dimensión en puntos. Estas
fuentes aportan una mayor legibilidad a páginas web
que se diseñan para ser leídas directamente en la
pantalla. Si las trasladamos a las altas resoluciones
en las que se imprime en papel, su exagerada altu-
ra-x y su pesado cuerpo presentan una apariencia
poco delicada.
RECUERDA:
• Cuando se está seleccionando múltiples
fuentes que han de convivir en un mismo di-
seño es crucial mantener tanto la unidad y va-
riedad.
El uso de múltiples fuentes en conjunto puede
ser difícil y lograr la armonía un reto. Tenga-
mos en cuenta el efecto general que se está
tratando de lograr. las fuentes, como las per-
sonas, tienen personalidad. Y personalidades
fuentes que al igual que las personas, a veces
pueden entrar en conflicto.
• Demasiadas tipografías con una personali-
dad fuerte en un mismo espacio sólo pueden
crear confusión.
• No hay reglas en cuanto al número de ti-
pografías a usar, pero siempre conviene ser
comedido y podemos trabajar con tipografías
con una familia amplia que nos permitan una
mayor variedad de soluciones.
• Al seleccionar los tipos de letra es impor-
tante tener en cuenta la naturaleza del texto
a diseñar. ¿Estamos hablando sobre todo el
cuerpo del texto? ¿Existen distintos tipos de
titulares, subtítulos?
ÉNFASIS
Si una página web contiene únicamente bloques de
texto, se hace difícil visualizar en ella la estructura
de los contenidos y dificulta también el escaneado
al ojo. El énfasis o subrayado aporta estructura a la
información y añade variedad visual, lo cual facilita
el acceso a los contenidos por parte del lector. La
clave en un subrayado efectivo está en la utilización
eficaz y económica del énfasis tipográfico.
FUNDAMENTOS DE DISEÑO GRÁFICO
PARA WEB E INTERACTIVOS
tema 0 4
La tipografía tradicional posee ya unas buenas he-
rramientas para añadir énfasis a un bloque de texto,
pero asegúrate de utilizarlas siempre mesuradamen-
te. Si pones un texto entero en negrita, nada resalta-
rá y parecerá que estás gritando a tus lectores. Una
buena regla que puedes utilizar es añadir énfasis al
texto utilizando cada vez sólo un parámetro. Si de-
seas que determinados titulares atraigan la atención
del lector hacia secciones concretas, no utilices un
tamaño grande, en negrita y además mayúsculas (es
decir, todo de golpe); si quieres que se destaque,
utiliza un tamaño de letra un nivel superior. Si pre-
fieres la negrita, utiliza el mismo tamaño de fuente,
pero en negrita. Descubrirás rápidamente cómo con
sólo una ligera variación del estilo se puede conse-
guir un gran contraste visual.
Cursiva. El texto en cursiva nos atrae por el contras-
te respecto a la forma del cuerpo principal de texto.
Es bueno utilizar las cursivas en los casos conven-
cionales, por ejemplo al citar títulos de periódico o
libros, o en el interior de un bloque de texto para
señalar expresiones forzadas o palabras de otro
idioma. Evita utilizar la cursiva en bloques de texto
largos, pues de esta manera no facilitan la lectura.
Negrita. El texto en negrita contrasta con el normal
por su color, aportando el énfasis necesario para,
por ejemplo, los títulos de las subsecciones. El texto
en negrita se lee bien en la pantalla, aunque si lo
utilizamos para bloques de texto demasiado largos
pierde su capacidad de contraste y, por tanto su efi-
cacia.
Subrayado. El texto subrayado es una herencia de
la época en que se utilizaban las máquinas de escri-
bir, que no tenían la capacidad de escribir en cursiva
ni en negrita. Además de sus deficiencias estéticas
(es un recurso demasiado pesado e interfiere con las
formas de las letras), en un documento web, subra-
yar tiene un significado y funciones especiales. La
mayor parte de los usuarios tienen configurado su
navegador
para que subraye los enlaces. Si introduces texto su-
brayado en una página web lo más probable es que
la gente lo perciba como un enlace de hipertexto.
Texto en color. A pesar de que el color es una op-
ción más para diferenciar un determinado texto del
cuerpo principal, en un documento web tiene un sig-
nificado propio, al igual que el subrayado. Deberías
evitar insertar texto en color en un bloque de texto,
porque el usuario enseguida lo asociará a un enlace
de hipertexto e intentará clicar en él. De todas for-
mas, es muy apropiado cuando se utiliza sutilmen-
te para distinguir los titulares de una sección. Por
ejemplo, puedes usar tonos oscuros que contrasten
con el fondo de la página, evitando los tonos que
tradicionalmente vienen por defecto como color de
enlace: el azul y el violeta.
Mayúsculas. El texto en mayúsculas es uno de los
métodos más utilizados y menos efectivos en la vo-
luntad de poner énfasis tipográfico a un texto. Reco-
nocemos las palabras de dos maneras: mediante un
análisis gramatical de grupos de letras y a través de
las formas mismas de las letras.
Las palabras o encabezamientos en mayúsculas
forman una sucesión monótona de rectángulos, sin
ningún resalte. Para leer un bloque de texto en ma-
yúsculas, únicamente nos queda la posibilidad de
analizar los distintos grupos de letras -leer el texto
letra a letra- lo que aumenta la incomodidad en la
lectura y ralentiza el proceso.
Fíjate en lo cansado que es leer este párrafo:
EL DISEÑO DEL SITIO DETERMINARÁ SU MARCO
DE ORGANIZACIÓN. EN ESTA FASE DEL PROYEC-
TO, SE TOMARÁN LAS PRINCIPALES DECISIONES
ACERCA DE QUÉ ES LO QUE QUIERE EL PÚBLICO
DE LA WEB, QUÉ ES LO QUE SE QUIERE DECIR
Y CÓMO ORGANIZAR LOS CONTENIDOS PARA
SATISFACER AL USUARIO EN LA MAYOR MEDIDA
POSIBLE. A PESAR DE QUE A PRIMERA VISTA ES
EL DISEÑO GRÁFICO LO QUE ANTES PERCIBE EL
USUARIO, LA ORGANIZACIÓN DE LA WEB SERÁ
EL ASPECTO QUE CAUSE UN MAYOR IMPACTO
EN SU EXPERIENCIA.
TIPOGRAFÍA COMO IMAGEN
En un sitio web, la tipografía no siempre puede ais-
larse de los elementos gráficos o de las imágenes.
FUNDAMENTOS DE DISEÑO GRÁFICO
PARA WEB E INTERACTIVOS
tema 0 4

El texto, como elemento gráfico, puede estar estre-

chamente integrado con la imagen, de manera que
sea imposible mostrarlo en formato de texto HTML.

Por razones estéticas puedes decidir mostrar el tex-

to como representación en formato de imagen, en
lugar de trabajar directamente con el lenguaje HTML.

WEBFONTS

No poder hacer uso de la tipografía como elemen-

to decorativo y de comunicación gráfica ha sido
siempre una limitación en el diseño de paginas Web.
Hasta hace muy poco si queríamos que nuestros di-
seños se vieran más o menos igual para todos los
usuarios había que conformarse con unas cuantas
fuentes que ya sabíamos que estaban instaladas en
la mayoría de los ordenadores, otra solución era la
de convertir nuestros textos en imagenes que luego
podiamos usar de fondo. El trabajo se complicaba
cuando había que traducir esas paginas a diferen-
tes idiomas, o necesitábamos que esos textos cam-
biarán dinámicamente. En el primer caso habia que
crear esas imagenes en todos los idiomas, el segun-
do no tenia solución.

Durante estos años han ido surgiendo ideas muy

ingeniosas para resolver el problema, pequeños
“trucos” para engañar y obligar a los navegadores
a mostrar nuestras fuentes, pero en su mayoría, al
día de hoy, todas estas técnicas todavía presentan
muchas limitaciones.

La más simple y flexible de todas estas tecnologías,

la que ofrece mayor compatibilidad entre navegado-
res y parece tener un futuro como la solución defi-
nitiva al problema, es una simple regla css incluida
en la pagina Web que enlazada directamente al ar-
chivo de una tipografía en un servidor. Esta regla es
interpretada por el navegador que es el encargado
de embeber la tipografía.

Nota: Ver documento de enlaces

FUNDAMENTOS DE DISEÑO GRÁFICO
PARA WEB E INTERACTIVOS
tema 0 5
n ¿QUÉ ES CSS?
Siglas de “Cascading Style Sheets” (Hojas de Estilo
en Cascada), es una tecnología desarrollada con el
fin de separar la presentacion de la estructura del
HTML. Funciona aplicando reglas de estilo a los
elementos HTML, entre las que incluyen, tamaño,
color de fondo, color del texto, posicion de los el-
ementos, margenes, tipos de letra, etc... quedando
de esta manera toda lo que tiene que ver con la
parte gráfica de la web, separada completamente
de la estructura del HTML.
Este lenguaje desarrollado por la W3C, ha venido
haciendose cada vez mas importante entre los
diseñadores, gracias a la facilidad de uso y a los
optimos y flexibles resultados.
Aprender a conocer CSS nos dará como resultado
un mejor flujo de trabajo, mayor organización de
nuestro codigo, menos peso en las paginas, y mas
flexibilidad a los cambios. Ademas una vez familiar-
izados con sus capacidades, nos daremos cuenta
de que es mas fácil y rápido diseñar con CSS que
de la manera antigua.
Bien, empecemos por el principio. Aqui intentare
enseñar como hacer documentos validos y que
sean bien interpretados por la mayoría de los nave-
gadores actuales. Lograremos esto conociendo los
tres principales elementos en el desarrollo de CSS:
Atributos, valores y selectores.
Atributos
Son las palabras que usaremos para indicar cual
estilo queremos modificar, por ejemplo, si quere-
mos cambiar el tipo de letra, usamos el atributo
“font”, si es el fondo, el atributo “background”, etc.
Valores
Son para definir como vamos a modificar el atribu-
to, o la propiedad que le daremos. Por ejemplo, si
queremos que un tipo de letra sea rojo, usamos el
atributo “font” y el valor “red”.
Selectores
Se usan para definir sobre cuales elementos HTML
vamos a aplicar los estilos, si queremos definir un
estilo para toda la pagina, debemos usar el selec-
tor “body” que se refiere a la etiqueta <body> del
documento HTML.
Hay tres tipos de selectores: Los selectores de
etiquetas HTML, se utilizan escribiendo el nombre
de la etiqueta a la que le aplicaremos el estilo. Los
selectores de identificador, se usan para aplicar
estilos solo a las etiquetas identificadas con un
nombre. El tercer selector es el de clase, se escribe
en el documento CSS comenzando con un punto
“.” seguido del nombre que le queramos poner a la
clase, de esta forma: .mi_clase.
La sintaxis:
Es muy simple, primero se coloca el selector, luego
se abre una llave “{“ y se empiezan a colocar los
atributos, seguidos de dos puntos “:” y luego el
valor seguido de punto y coma “;”, al final de todo
se cierra el estilo para el selector con el cierre de
llave “}”. Se pueden definir tantos atributos con sus
respectivos valores como se desee, separandolos
con un espacio o un salto de linea. En CSS se de-
ben escribir los atributos y valores con minusculas
y los comentarios se encierran con “/*” para abrir
y “*/” para cerrar, como veremos en el siguiente
ejemplo:
/*CSS sobre selector de etiquetas*/
body {
font­family: arial;
font­size: 12px;
color: black;
background­color: #cccccc;
}
FUNDAMENTOS DE DISEÑO GRÁFICO
PARA WEB E INTERACTIVOS
tema 0 5
Este tipo de selector no requiere de aplicación en
el documento HTML, las etiquetas a las que se les
defina un estilo de esta forma automáticamente
heredarán los estilos.
/*CSS sobre selector de identificador*/
#header {
background­color: #ff0000;
color: #ffffff;
font­size: 26px;
} }
En este caso, se lo aplicamos a la etiqueta con solo
colocarle el identificador, como en este ejemplo:
<div id=”header”>Aqui el contenido</div>
/*CSS sobre selector de clase*/
.mi_clase {
margin: 5px;
height: 100px;
width: 200px;
} <table style=”background­color:#333333;
En los selectores de clase, usamos el atributo
“class” en las etiquetas HTML para darles el estilo.
Ejemplo:
<div class=”mi_clase”>Aqui el contenido</div>
Ademas de esto, existen tres formas de aplicar esti-
los CSS a una pagina, la que recomiendo en primer
lugar, haciendo un archivo de texto plano guardado
como archivo.css, separado del archivo HTML, y
vinculando la hoja HTML a el. Esto se hace colo-
cando en la sección head de la página:
<link href=”archivo.css” rel=”stylesheet” type=”text/
css”>
Para mi esta forma es la mas recomendable porque
asi se puede vincular el archivo.css a todas las
páginas del sitio, es mucho mas liviano al ver la pa-
gina y ademas a la hora de modificar algo se hace
solo una vez.
La segunda forma es aplicando los estilos directa-
mente en la sección <head> del documento HTML.
Se hace de la siguiente forma
<head>
<title>Pagina</title> <style type=”text/css”>
<!--­­body {
font­family: Geneva, Arial, Helvetica,
sans­serif; font­size: 12px;
color:#333333;
--­­>
</style>
</head>
Es buena idea colocarlos de esta forma si son esti-
los exclusivos para la pagina a la que se le aplica.
El tercer método no lo recomiendo, aunque algunas
veces puede ser necesario. Consiste en aplicar el
estilo directamente sobre el elemento HTML, de
esta forma:
padding:2px; width:300px; height;100px;></table>
Como puede verse en algunos casos, los atributos
pueden ser compuestos, como el atributo “font­
family” o “background­color”, puede llevar adi-
cionalmente caracteristicas mas especificas, que
van separadas por un guion “­“ como vimos en
los ejemplos. Los valores tambien pueden ser de
diferentes tipos, en los de medida, se pueden usar
pixeles “px” centimetros “cm” o relativos como
“em”, en los colores se puede usar la notacion
hexadecimal (#FF3300) o directamente el nombre
del color en ingles.
De esta forma podemos aplicar estilos a todos y
cada uno de los elementos HTML que constituyen
una página web, y poco a poco ir separando el
contenido de la presentación, ademas de lograr en
un documento completamente válido cosas que
solo el poder de CSS puede lograr, como cambiar
completamente la apariencia de una página sin
tocar el archivo HTML.
Unicamente con el uso, se va uno acostumbrando
a lo que se puede hacer con CSS, al principio,
FUNDAMENTOS DE DISEÑO GRÁFICO
PARA WEB E INTERACTIVOS
tema 0 5
seguramente , les pasará (como a mí) que solo lo
usan para dar formato a los textos, tablas etc, pero
luego uno va conociendo como trabaja y va añadi-
endo elementos a los archivos CSS.
El punto ideal sera cuando logremos separar com-
pletamente el diseño del contenido, dominando las
técnicas de posicionamiento con CSS, y eliminando
el uso de tablas para diagramar el contenido.
FRAMEWORKS
Marcos CSS pueden ayudar a hacer más fácil la
construcción de su red. Se puede asegurar que los
diseños potencialmente complejos se procesan
correctamente en, ejem, navegadores difíciles - sí,
estoy mirando a ti IE 6!
Según la definición de Wikipedia, un marco de CSS
es: “Un marco de CSS es una biblioteca que está
destinado a permitir la fácil estilo, más compatible
con los estándares de una página web utilizando
el lenguaje de Hojas de Estilo en Cascada. Al igual
que los lenguajes de programación y scripting,
marcos CSS paquete de una serie de opciones ya
preparadas para el diseño y outlaying una página
web “
Que todo suena bien. El objetivo de un marco de
CSS es quitar algunas de las tareas repetitivas, sin
dejar de ser seguro de que su sitio no se romperá si
se construye otro diseño. Hay una serie de marcos
que puedes descargar, que van desde el complejo,
(como el marco de Yahoo! UI Library grid), a la
simple 960.gs. Voy a hablar de un solo marco aquí
- Blueprint - y específicamente cómo usarlo como
base para el diseño de la red.
MEDIA QUERIES
La rápida distribución de dispositivos móviles, ha
puesto el mundo del web de cabeza. Los usuarios
ya no ven únicamente contenido web en com-
putadoras de escritorio, sino en smartphones,
tabletas y otros dispositivos con un amplio rango
de dimensiones. El reto para los diseñadores web
es asegurar que sus sitios puedan verse bien, no
sólo en una pantalla grande, sino también en una
pequeña pantalla de celular y cualquier pantalla de
por medio.
Los Media Queries, son una excelente forma de
entregar diferentes estilos para diferentes disposi-
tivos, y proveer la mejor experiencia para cada tipo
de usuario. Como parte de la especificación CSS3,
los Media Queries expanden el rol del atributo me-
dia, que controla como se aplican los estilos. Por
ejemplo: se ha vuelto una práctica común por años
el uso de una hoja de estilos por separado para im-
primir sitios web al especificar media = “print”. Los
Media Queries, llevan esta idea al siguiente nivel, al
permitir a los diseñadores asignar estilos basados
en las propiedades de un dispositivo, como el an-
cho de pantalla, orientación y así sucesivamente.
RESET CSS
Nuestro objetivo, es conseguir que nuestra WEB, se
vea igual en todos los navegadores (o al menos, en
los más importantes), pero muchas veces, el prob-
lema viene por la manera que tiene cada navegador
de mostrar los elementos.
Por ejemplo, si sólo pones:
Código :
<p>contenido</p>
Y lo renderizas con varios navegadores, verás que
hay diferencias en el resultado entre algunos de
ellos ya que cada navegador define como cree
conveniente los margenes que le pone al elemento
<p>, su padding, su tamaño de fuente, posición
relativa...
Esto no sólo le ocurre a los <p>, sino a casi todos
los elementos que estamos acostumbrados a usar.
Y cada navegador, tiene su “estilo por defecto”. Y
nunca coinciden...
¿cómo lo arreglamos? Reseteando el CSS.
Mediante este sencillísimo concepto, le diremos
al navegador que visualice nuestra WEB, que no
queremos que aplique “su estilo”, sino el que defi-
namos nosotros. Para ello, sólo tenemos que “ini-
cializar”, al principio de nuestra hoja de estilos, la
propiedad que queremos “resetear”, del elemento
que queramos tener “reseteado”.
FUNDAMENTOS DE DISEÑO GRÁFICO
PARA WEB E INTERACTIVOS
tema 0 5

Por ejemplo, el “reset” más conocido, es: CONSEJOS:

Código :
* {margin:0px;padding:0px;}
¿Qué hace esto? Pues puesto al comienzo de
nuestra hoja de CSS, le dice al navegador: <<Qui-
ero que le quites el margen y padding por defecto,
a todos los elementos de mi WEB>> Desde enton-
ces, todos los navegadores le quitarán el margen/
padding a cualquier elemento, en consecuencia,
este aspecto será igual en cualquier navegador.
Después del reset, claro, tenemos que definir los
valores que queramos usar.
¿y hay algún reset más completo? Hay muchos.
Encontraréis “CSS reset” para todos los gustos,
unos más extensos que otros en Google
Ejemplo:
Para usar este reset (o cualquier otro), has de pon-
erlo al principio de la primera declaración CSS que
tengas, pues si no, te sobreescribirá las anteriores
(“regla de la cascada”) Cuando uses un “reset”,
resetea al principio de empezar a diseñar. Si aplicas
este reset a un documento que ya tengas hecho y
terminado, verás como muchas cosas puede que
se te descuadren, y tendrás que “redefinirlas”.
Una buena idea, puede ser, guardar el reset anterior
en un documento nuevo (reset.css), y “linkearlo”
al principio de vuestras webs, cuando empeceis a
trabajar, de la siguiente manera:
<link href=”reset.css” rel=”stylesheet” type=”text/
css” />

html, body, div, span, applet, object, iframe, h1, h2,

h3, h4, h5, h6, p, blockquote, pre, a, big, cite, code,
del, dfn, em, font, img, ins, kbd, strike,
abbr, acronym, address, q, s, samp, small,
strong, sub, sup, tt, var, dl, dt, dd, ol, ul, fieldset,
form, label, legend, table, caption, tr, th, td, center,
u, b, i{vertical-align: baseline border: 0; outline: 0;
font-weight: normal; font-style: normal; font-size:
100%; font-family: inherit;}
li, tbody, tfoot, thead,
*
{margin: 0; padding: 0} {line-height: 1; height:100%}
{outline: 0} {list-style: none} {border-collapse: col-
lapse; border-spacing: 0;} {quotes: “” “”}
body :focus ol, ul table blockquote, q hr height:1px}
blockquote:before, blockquote:after, q:before,
q:after {content: “”}

Como veréis, no sólo quita el margen/padding a

todos los elementos, sino que hace otras muchas
cosas, como “alinear abajo” los elementos de línea,
o hacer que se hereden las fuentes en todos los
elementos, o quitar el “marco punteado” de los
elementos cuando los “seleccionamos”, o aplanar
los bordes de las tablas, o poner a 1px las líneas
<hr>... etcétera.
FUNDAMENTOS DE DISEÑO GRÁFICO
PARA WEB E INTERACTIVOS
tema 0 6
n FLASH
Flash como tal empezó como simplemente un soft-
ware de animación vectorial con algunas acciones
básicas y se ha convertido en lo que es ahora, un
entorno multimedia de desarrollo de todo tipo de
trabajos que requieran integración de medios inte-
ractivos de fácil distribución multiplataforma; des-
de animaciones para televisión hasta Rich Internet
Applications para Intranets o aplicaciones web y es
precisamente eso; sus inicios, lo que lo tienen mar-
cado de nacimiento.
La mayoría de power users de cualquier sistema
operativo tiene bastante experiencia con la web;
alguna vez navegó con Internet Explorer y odia los
popups emergentes y la publicidad intrusiva en un
banner de 640x480 que te meten en la mitad del
contenido de una pagina para que, supuestamente,
hagas click de manera mas efectiva.
En que estará hecho este banner... ¿Como puedes
hacer una súper animación que incluya todo tipo de
efectos raros, sonido, bitmaps y la foto de tu perro,
en menos de 30Kb? Si dijiste Flash, has acertado.
No digo que sea malo hacer banners; digo que si es
malo meter publicidad intrusiva y encima abusar de
flash para ello
Si eres novato en Flash seguramente lo primero que
aprenderás es animación, seguro que luego apren-
des a publicar para la web y seguro que haces una
megaINTRO para tu web con muchos bonitos co-
lores y animaciones shape morph(Interpolación de
forma) por montón; ahora claro, avanzas un poco
mas, aprendes a hacer botones y mejoras la expe-
riencia de tu usuario metiendo un botón Skip Intro
No lo hagas y de hecho, repite después de mi
Un intro es malo Un intro es malo Un intro es malo
Si tienes una animación de intro en tu web, repetirás
estas tres sabias frases todas las noches antes de
dormir.
Un diseño debe ser funcional, usable y practico,
ahora, si encima es bonito, pues tanto mejor, un
buen diseño. Las intro no aportan nada, son aburri-
das después de la primera vez, casi siempre (casi)
son pesadas y te dejan como tonto pensando que
esperaste todo eso para ver los bonitos colores ani-
mados y al fin entrar a la web; no te engañes, una
intro solo sirve para aumentar ego de diseñador.
Popups y fullscreen son palabras que el colectivo de
power users relaciona con Flash Developer; si no,
solamente miren cualquier pagina web de la película
de turno y verán que, después de una intro de 1Mb,
te abre un popup con la información de la película
¿Es tan difícil hacer un fondo presentable para una
web en Flash?; ¿Es necesario arruinar la experiencia
del usuario con un intrusivo popup que te quita las
barras de navegación?, ¿Tan poco éxito quieres te-
ner con tu web?
El usuario no pidió que le abrieran una nueva venta-
na (una mas de tantas), esto es incomodo, ¿Y si el
quería seguir navegando en la ventana donde esta-
ba? O peor aun ¿Si usa un navegador de verdad y
esta usando pestañas? Acabas de arruinar por com-
pleto su experiencia (Y la imagen de tu web de paso)
No solo eso, sino que le quitas al usuario dos ele-
mentos claves, la barra de dirección y las herramien-
tas de navegación. ¿Qué de malo tiene que se vea
la URL?, ¿Qué de malo tiene poder usar el botón
Atrás?
¿Y si animo el logo? ¿Y si animo las noticias? ¿Y si
animo la botonera?
Que el logo tiene una animacioncilla divertida, esta
bien, siempre y cuando no sea fastidiosa a la vista y
en lo posible no sea animada todo el tiempo Que las
noticias van animadas en un scroll
Es cierto que Flash es poderoso en la animación;
pero no tienes que abusar; una web es una web, he-
cho en Flash no implica que todo deba ser anima-
do; piensa en lo que te fastidiaría si no conocieras
el contenido y quisieras leerlo, piensa en tu usuario,
no en ti.
FUNDAMENTOS DE DISEÑO GRÁFICO
PARA WEB E INTERACTIVOS
tema 0 7
n EL DISEÑO PUBLICITARIO EN INTERNET
Banners
Dentro de las formas publicitarias más usuales que
podemos diseñar para la WWW están los banners.
Es publicidad pasiva que el internauta encuentra sin
buscarla tal como sucede en los medios tradiciona-
les. Estas ventanas publicitarias surgen automática-
mente cuando el internauta está consultando pági-
nas web. “Son espacios gráficos con enlaces a otras
páginas que contienen la información extendida de
los productos y servicios que publicitan y comercia-
lizan en otros casos. Los “banners” son muy útiles;
aunque el documento sea muy largo y tengamos
que movernos por él, la ventana publicitaria siempre
estará visible y disponible”
FORMATOS
Sus formatos tienden a estandarizarse. El más usual
es el tamaño 468x60 píxeles (2x0,8 cm), aunque
existen otras tablas de medidas. El lAB (“Internet
Advertising Bureau”) ha confeccionado una guía de
formatos publicitarios para evitar lo negativo de un
mercado caótico de tamaños
Banner: Se llama banners a todos los formatos pero
cada uno tiene su nombre. El banner sólo es el que
mide 468×60 píxeles. Antes era muy común encon-
trarlo en todas las webs pero hoy en día debido a
su pequeño tamaño es muy complicado encontrar-
lo. Aparecía en la parte superior de las páginas pero
como ahora las resoluciones de los monitores son
mayores hay más espacio y se utilizan formatos ma-
yores.
Megabanner o Superbanner: En inglés lo conoce-
mos como Leaderboard. Es la evolución del banner
ya que es de las mismas proporciones pero más
grande. Mide 728×90 píxeles y lo podemos encon-
trar en las cabeceras de la mayoría de los periódi-
cos online. Puede ser expandible, esto quiere decir
que al pasar por encima muchos aumentan su ta-
maño hacia abajo. Ese tamaño depende de la pági-
na donde se encuentre y sus especificaciones pero
normalmente suelen permitir que expanda al doble
del original. Esto quiere decir que si en reposo mide
728×90 expandido puede ser 728×180.
Rascacielos, Skyscraper o simplemente Sky: A
diferencia de los otros dos formatos anteriores este
es un formato vertical como su nombre indica (for-
ma de rascacielos). El principal mide 120×600 pero
ha evolucionado y también lo podemos encontrar un
poquito más ancho: 160×600. Otra evolución mayor
y que mucha gente llama doble-sky mide 300×600
y lo podemos encontrar en muchas páginas webs
en sus laterales. Como el anterior puede ser ex-
pandible, normalmente hacia la izquierda y como
mucho al doble de su tamaño original, por ejemplo
un 120×600 normalmente expandirá a 240×600 ó
300×600.
Robapáginas: Posiblemente este sea el formato
más encontrado en internet. Sobre todo porque de-
bido a sus dimensiones y proporciones es muy fácil
de integrar con el contenido. Su tamaño es 300×250
pero tiene muchísimas variantes. Yo diría que todo
lo que tiene unas proporciones “cuadradas” y está
entre 200×200 y 400×400 puede ser llamado roba-
páginas. Los más encontrados son el 300×250 y el
300×300 pero también hay muchos 200×200 y algún
que otro 400×400 aunque este es un poco grande.
También los podemos encontrar expandibles (al pa-
sar por encima de ellos) en muchos casos. El tama-
ño de expansión varía mucho dependiendo de los
soportes. Muchas veces expanden sólo hacia un
lado, otras hacia arriba o abajo y otras en varias di-
recciones. Lo “normal” es que expanda sólo hacia
una dirección, por ejemplo un 300×250 expande a
600×250 (así es como expande en elpais.com por
ejemplo).
Minibanner: Formato muy utilizado pero pequeño,
su tamaño es 234×60 píxeles. Pensaréis por qué un
formato tan pequeño es tan utilizado y la explicación
la tenéis seguramente delante de vosotros . El sitio
más común para encontrarlo es en el Messenger. Si
abrís la aplicación para chatear lo podréis encontrar
abajo del todo. Aparece también en muchos sitios
web pero ese es el sitio por excelencia.
FUNDAMENTOS DE DISEÑO GRÁFICO
PARA WEB E INTERACTIVOS
tema 0 7
Como los anteriores se expande y lo normal, o por lo
menos en el Messenger que es donde casi siempre
lo podremos encontrar expandible, sea a 300×250.
Es decir, un 234×60 expande a 300×250.
Botón o Botones: Con este nombre diría yo que
agrupamos a todos los formatos que son más pe-
queños que un minibanner. Por ejemplo un 120×60,
un 90×90, etc… Es decir, son formatos que son muy
pequeñitos y que muchos además van acompaña-
dos de texto al lado. Suelen ser muchas veces sim-
ples imágenes sin animación.
Text-link: Este no es un formato gráfico como los
anteriores sino de texto. Tiene una limitación de
caracteres, por ejemplo 30 caracteres y suelen ir
acompañados de un botón de los anteriores (Botón
+ Text-Link). Para que os hagáis una idea os pongo
aquí abajo un ejemplo de la home de Yahoo! con un
Botón+Text-Link de autopromo (publicidad de sec-
ciones suyas).
Por otro lado encontramos otros formatos de publi-
cidad que los internautas consideran como “intrusi-
vos” porque aparecen por encima del contenido in-
terrumpiendo o molestando la correcta navegación
y visualización de los contenidos.
Interstitial o Cortinilla: Posiblemente este sea el
formato que peor fama tenga entre los usuarios. Es
el que aparece antes de visitar una página web o en-
tre sección y sección y ocupa casi toda la pantalla.
Normalmente tiene un tamaño de 800×600 píxeles,
a veces es un poco más pequeño: 640×480 píxeles.
Las características que suelen tener para hacer de
este formato lo menos molesto posible es que es
obligatorio que lleve una cruz para poderlo cerrar
(arriba a la derecha casi siempre) y tienen una dura-
ción de tiempo que transcurrida esta aparece la web
que se quiere visitar, está entre los 4 y 8 segundos.
Casi siempre va acompañado de un formato de re-
cuerdo. ¿Qué significa esto? Pues que si por ejem-
plo nos aparece un Interstitial de Zara una vez se
haya ido y estemos ya en la web de elpais.com por
poner un ejemplo habrá o un robapáginas y un su-
perbanner de Zara. Ese es el formato de recuerdo o
también conocido como reminder. Casi siempre en
las planificaciones está así: Interstitial+Reminder.
Layer: Es un formato parecido al anterior pero más
pequeño y que aparece una vez dentro de la página
web por encima del contenido. or ejemplo si esta-
mos en elpais.com (que no admite layers) aparecería
por encima de la noticia un formato por ejemplo de
tamaño 400×400. Tiene que tener las mismas carac-
terísticas que el anterior, es decir que lleve una cruz
para poder cerrarlo y que se vaya automáticamente
cuando pasen X segundos.
Pre-Roll: Este es un formato que a muchos les pa-
rece muy molesto. A mi personalmente no. Aparece
cuando queremos ver un vídeo online antes del ví-
deo. Es decir, pulsamos en el play para ver la noticia
y aparece este formato como un anuncio de televi-
sión. Cuando termina aparece la noticia que quería-
mos ver.
Personalizaciones, Wallpapers, etc.: Estos forma-
tos consisten en customizar el fondo de la página
web con imágenes del anunciante. Además muchos
de ellos no sólo son el fondo personalizado sino
que todos los formatos que acompañan a la página
web son también de ese anunciante. Lo vemos con
ejemplos que siempre queda mejor: Por ejemplo en
MSN se puede contratar para su página de inicio un
Wallpaper. Este formato consiste en una imagen de
fondo del anunciante más un robapáginas del anun-
ciante más un superbanner del anunciante. Es decir,
tú entras en la home de MSN y si por ejemplo Zara
tiene contratado un Wallpaper todo lo verás de Zara.
Las malas prácticas de anunciantes y soportes con
los banners
Es cierto que el banner es percibido como molesto
por muchos usuarios. La culpa no es del anuncio
sino del uso y abuso que ha tenido en estos últimos
años por parte de los anunciantes y soportes web
que lo publican en sus sitios.
Por una parte los anunciantes han querido aumentar
su efectividad de manera infinita a través de técnicas
FUNDAMENTOS DE DISEÑO GRÁFICO
PARA WEB E INTERACTIVOS
tema 0 7

molestas e intrusivas. Por otra parte existen páginas Banner formulario: uno de los conceptos básicos
web donde cuesta diferenciar lo que es el contenido de usabilidad es ahorrar cada clic que sobra. En este
real y lo que es la publicidad. caso el banner se convierte en página de aterriza-
Desgraciadamente los tipos de banners más moles- je consiguiendo datos de usuarios como el correo
tos son los que mayor efectividad muestran. Aparte electrónico directamente en el banner sin necesidad
de los que tienen incluido sonido existen los siteun- de tener que pasar por la web del anunciante.
ders que son una evolución del pop-up. En este caso
se abre una ventana entera por debajo de la ventana Generar un banner con impacto que sea valorado de
en la que actualmente estás navegando. manera positiva por la mayoría de los usuarios no es
una tarea fácil. No busques nunca el 100% porque
Banners efectivos sin que sean es imposible de lograr. Jugar limpio y no hacer uso
molestos para el usuario de técnicas agresivas cuesta más tiempo y esfuerzo
pero al final merece la pena.
Si te importa tu imagen como empresa no te reco-
miendo hacer uso de los formatos intrusivos. A corto
plazo consigues resultados pero a largo plazo pier-
des la confianza y credibilidad. Aunque cueste más
trabajo merece la pena de invertir trabajo en un ban-
ner efectivo que aporta valor al usuario que navega
en la web. Para empezar tienes que elegir los sitios
de tal manera para que haya un encaje entre el con-
tenido de la web y tu oferta comercial.

TEN EN CUENTA…

Creatividad del banner: siguen existiendo aquellos

banners que son lo suficientemente creativos para
generar el interés por parte del usuario. Incluir per-
sonas suele tener mejor resultados.

Integración de una animación flash o video: siem-

pre existe un porcentaje de usuarios que percibe un
banner animado más molesto que uno sin anima-
ción. Hay para todos los gustos, pero es posible que
llamar la atención pueda compensar más que dis-
gustar a un porcentaje de los internautas.
FUNDAMENTOS DE DISEÑO GRÁFICO
PARA WEB E INTERACTIVOS
tema 0
FUNDAMENTOS DE DISEÑO GRÁFICO
PARA WEB E INTERACTIVOS
tema 0
FUNDAMENTOS DE DISEÑO GRÁFICO
PARA WEB E INTERACTIVOS
tema 0
FUNDAMENTOS DE DISEÑO GRÁFICO
PARA WEB E INTERACTIVOS
tema 0
FUNDAMENTOS DE DISEÑO GRÁFICO
PARA WEB E INTERACTIVOS
tema 0
FUNDAMENTOS DE DISEÑO GRÁFICO
PARA WEB E INTERACTIVOS
tema 0
FUNDAMENTOS DE DISEÑO GRÁFICO
PARA WEB E INTERACTIVOS
tema 0