McIntire, P. (2008).

Técnicas innovadoras en Diseño

Web. Madrid: Ediciones Anaya Multimedia. Pp. 42-43,
66-67, 164-166, 207-208, 263.
 Técnicas
Innova or s
b

Penny Mclntire
 ~~ ~BIS~
;
:, .
¡¡ _¡
;
s I B LI o r e e A~ -
TE¿A
UNI VERSID A
::::.OEGUADALAJAR
SISTEM A D E UNIVERSID AD VIRT UAL
v. de a dquis ició n: 'V d.~ , l., _LX! :QO c.J:S )€ b q~;:;_q
e cha : 0!) [ Jd / 10
ro cedencia :_ :7; ),_2 a Q1o
- .,_ .,;~ ; .. ~. ~ ...,. --:::>ov ::..~ "'2>1

Todos los nombres propios de programas, sistemas operativos, equipos hardware,

etc. que aparecen en este libro son marcas registradas de sus respectivas compañías u
organizaciones.

Reservados todos los derechos. El contenido de

esta obra está protegido por la Ley, que establece
penas de prisión y/o multas, además de las
correspondientes indemnizaciones por daños y
perjuicios, para quienes reprodujeren, plagiaren,
distribuyeren o comunicaren públicamente, en
todo o en parte, una obra literaria, artÍstica o
científica, o su transformación, interpretación
o ejecución artística fijada en cualquier tipo
de soporte o comunicada a través de cualquier
medio, sin la preceptiva autorización.

Authorized translation from English language edition published by New Riders

an imprint ofPeachpit Press, a division ofPearson Education .
Copyright © 2008 by Penny Mclmire.
Al! rights reserved.

Edición española:
© EDICIONES ANAYA MULTIMEDIA (GRUPO ANAYA, S.A.), 2009
Juan Ignacio Luca de Tena, 15. 28027 Madrid
Depósito legal: M-56.601-2008
ISBN: 978-84-4 15-2532-0
Printed in Spain
Impreso en: Peñalara, S.A.
Fuenlabrada (Madrid)
, ~

1 1
~

d 1~

1~

Agradecimientos ................................................................................................................................... 5
Sobre la autora .................................................................................................................... ................. 7

INTRODUCCIÓN ................................................................................................................ 15
¿Y cuáles son los temas sobre los que trata este libro? ........... ............................................................... 17
Público objetivo ................................................................................................................................. 18
Elementos de este libro ..................................................................................................................... .. 18

CAPÍTULO l. INTRODUCCIÓN A LAS TÉCNICAS DE DISEÑO WEB .......................... 21

Introducción a la tecnología Web .............................................. ......................................................... 24
Tecnologías del lado del diente ............................................................................................. ........ 26
Tecnologías del lado del servidor ................................................................................................... 29
Entornos de desarrollo integrados ........................................................ ....... ................................... 32
Ciclo de vida del desarrollo de un sitio Web ....................................................................................... 35
Prototipos/Desarrollo rápido de aplicaciones ............................. .................................................... 38
Introducción al análisis de contenidos ....................................................... .. ....................................... 38
Introducción al análisis de la arquitectura del sitio .............................................................................. 38
Introducción a los factores de usabilidad ............................................................................................ 39
Principios de usabilidad. :............................................................................................................... 39
Comprobar la usabilidad ...................... ......................................................................................... 40
Introducción al diseño visual .............................................................................................................. 42
¿Diseño visual o usabilidad? ....... ................................................................................................... 43
La imagen de marca: Crear una identidad ..................................................................................... 44
Crear un sitio Web atractivo ................................................................ .......................................... 45
La metáfora como herramienta de diseño ................................................................... ........ ........... 46
Notas generales sobre el diseño ...................................................................................................... 46

Índice de contenidos 9
Introducción al diseño de la interacción ............ ...................................................................... ....... .... 47
Introducción a la accesibilidad en Internet ................. .. .................. ............. ....................................... 48
Tipos de discapacidad ........ .................................................. .... ................................. .................... 49
Directrices de accesibilidad ..................... ....... ...... .. ........................................................................ 49
Recursos de accesibilidad .................................................................. ....... .... ....... .. ......................... 50
Resumen ........................................................................................................................... .............. ... 5 1
La lista de tareas del diseño ................................................ ......................... ................................... 51

CAPÍTULO 2. ANÁLISIS DE SITIOS WEB ......................................................................... 53

Clarificar los objetivos de la empresa ....... .................... ....................................................................... 57
Incrementar los beneficios ....... .............. ...... ..... ................ ...... ..... .......................................... .. ...... 57
Propagar información .............................. ............. ......................................................................... 58
Servir como interfaz de usuario para una aplicación emp resarial .................................. ........... ....... 58
Identificar el público objetivo ........ ..... .. ..... ... .................. ................... ....... ..... ....... ..... .. .... ................... 59
Identificar los objetivos de nuestros visitantes ..................................................................................... 61
D eterminar las restricciones del sitio .... ......... ... ... ............ ......................... ....... ...... .......... .................... 64
D eterminar el contenido del sitio ... ....... ............. ......................... .............. ..... .. .... .. .......... .. ..... ........... 65
Creación del contenido ................................................................................................................. 66
Crear una página Web adictiva ......................................................................... ...... ....... ................ 67
Definir la arquitectura del sitio ......................... ............. .... ......... .............. ....... .... ......... ........... ....... .... 68
Las etiquetas ............... .................... ...................................... ...... ..... .... .. .... .... ................................ 70
Categorizar los temas .... .... ... ................. .. ...... ..... ......... ....... ................. ........................................... 7 1
Organización de la estructura del sitio para los desarrolladores .............................. ........................ 7 4
Resumen .. ......... ....... ............... .. ............. ... ....... ................. ........... .......... ............. ............................... 77
La lista de tareas del diseño .. ........ ....... .... ............. ...... ........ ....... ...... .... ....... ..... ....................... ........ 78

CAPÍTULO 3. NAVEGACIÓN ............................................................................................. 81

Introducción a la navegación ...... .......................... ...... ....... ...................................... ................ ....... .... 83
Principios de la navegación ..... ... .... ... .... ....... .. .. ..... .. ...... ............. .... .. .... .. ..... .. .... .. ....... .................... 83
Elementos de navegación obligatorios ........................................................................................... 88
Organizar la estructura de navegación para que coincida
con la estructura del sitio ..... ....... .... ..... ...... .... ... .................................................................. 89
Funciones de los vínculos ... .............................................. ..... .............. ............ ............. ...................... 9 1
Hipervínculos internos .... ....... ....... .......... ... ...... ....... ......................... ...... ...... ....... ...... ....... ....... ... ... 91
Hipervínculos externos ............................. ............... ...... ...... .. .... ........ ... ......................................... 92
Vínculos de descarga ........... .............. ...... .. ..... .. ..... ... ............... ...... ...... ... ........... ........................... . 93
Vínculos de correo electrónico ............ ......... ............ ............. ...... ...... ......................... .. ..... .. ........... 93
V ínculos de notas .......................................................................................................................... 94
C laves visuales de la navegación .......................................................................................................... 95
Estados de los vínculos ........................................................ ...... ....... ...... ................................ ............ 96
Vínculo disponible/en reposo ................... ............................ ............................... ............. ......... .... 96
Vínculo disponible/de sustitución ...... ............. ...... ...................................................................... .. 96
Vínculo activo .. .... ... .................................................................................... ......... ......................... 96

10 indice de conten idos

 Vínculo visitado ........ .... ................................................................................................................ 96
Vínculo actual .......................................................................................... ..................................... 97
Texto de navegación ........................................................................................................................... 97
Redacción de los vínculos de texto ................................................................................................ 98
Claves visuales de los vínculos de texto .......................... ......................... ............ ........................... 98
Mejorar el aspecto de los enlaces de texto .................................................................................... 101
Imágenes de navegación ............................. ............. ..................................... .. .................................. 103
Claves visuales de las imágenes de navegación .............. ........ ........................ ............................... 104
Imágenes de sustitución............................................................................................................... 105
Iconos de navegación .............. .................................................. ................................... ................ 105
Mapas de imágenes ..................................................................................................................... 106
Imágenes divididas con áreas interactivas .................................................. ................................... 107
Herramientas para organizar la navegación .......... ....................................................................... ...... 11 O
Menús .................... ...................................... .. ..................................................... ........... .. ....... .... 110
Marcos ................. .................................................... ................................................................ ... 117
Funciones de búsqueda local ........................................................................... ................... ......... 11 8
Vínculos contextuales .................................................................................................................. 122
Teasers .................................... .. ................................................................................................... 123
Mapas del sitio, tablas de contenidos, índices del sitio y directorios ............................................. 123
Rutas de navegación ................. ....................... ... ...... ............... .......... ....................... ................... 123
Métodos abreviados de teclado .................... .............................................................................. .. 124
Páginas de bienvenida................................................................................................................ .. 124
Menú de favoritos ................ .............. ......................................................................................... 125
Fiabilidad de los vínculos.... ...................................................................... ............ ............................ 125
Navegación y accesibilidad ............................... .. ........ .. .. ................. ............. .. .................... .............. 126
Resumen ..................................................................... .............. .............................. ...................... ... 128
La lista de tareas del diseño .......................... ............................. .. ............ .................. .. ....... .......... 128

CAPÍTULO 4. DISEÑO DE PÁGINA ................................................................................ 131

Consideraciones técnicas ............. .......... ............... ............................................ ................................ 133
Consideraciones sobre el tamaño de los archivos ........................................ ................................. 133
Tamaño de monitor y resolución de pantalla ............................................................................... 134
Tamaño horizontal de la página ...... .. ........... ............................. ................................................... 138
Tamaño vertical de la página .......... ................................................... ................... ............ ........... 140
Herramientas para el diseño de página ........................................................................................ 140
Cuestiones estéticas .............................. .......... .. ...................... ........ ................. .......... .................... ... 144
Llenar la pantalla ................ ......... ........................................................................ .......... .............. 145
Creación de bloques para el diseño de la página .............................. ....................... ............... ...... 147
Armonía visual ............................................... .................................. ... ........................................ 151
Colocar los elementos en la página ................................... ........................................................... 164
El guión gráfico: C rear el boceto del sitio ..... .............................................................. ...... ................ 166
Utilizar un editor de imágenes para crear la composición ................. ........................... ................ 167
Utilizar HTML para crear la composición .................................................... ............... ................ 167
Plantillas de página ..................................................................................................................... . 167

Índice de contenidos 11
Diseno de la página y accesibilidad ... ................... ....................... ...................................................... 168
Resumen ......................................................................................... ................................................. 169
La lista de tareas del diseño ........................................................................... ...................... ......... 169

CAPÍTULO S. EL COLOR .................................................................................................. 173

La teoría del color. ......... ...... .......................... .... .. .... ......................................................................... 175
La rueda de colores .............. .... ... ........................ ............................................................... ........ .. 176
Atributos del color ........................................................................................................ .............. 178
Modelo de color sustractivo: Luz reflejada ................................................................................... 180
Modelo de color aditivo: Luz proyectada ..................................................................................... 181
Los códigos de color RGB ........................................................................................................... 182
La paleta de colores seguros para Internet ................................ .............. ........ ............. ................. 185
Visualización del color en diferentes sistemas .............................................................................. 187
Definir colores para la Web ................ .............................................................................................. 189
Escoger entre las paletas de color predefinidas ......... ..................... .......... .......... ........... ................ 189
Tomar muestras de color ........................................................ ............. ..................................... ... 192
Mezcla manual de colores ............................................................................................................ 192
Escoger un esquema de colores ............................................................................................... .... ...... 198
. Proporciones de los colores ................................. .......... ............................................................. .. 201
Esquemas de color .................... ................... .... .. ............... ......... ..................... ............................. 201
Inspiración para los esquemas de color ........................................................................................ 206
El contraste de los colores ............................................................................................................ 207
Colores de fondo ....... .................................................................................................................. 208
Colores de los vínculos ...................................... .......................................................................... 21 O
Materiales impresos ...... ................... ................. ....... ................... ....... .......................................... 2 10
Color y accesibilidad ............... ............................................ ............ ......................... ....... ................. 2 11
Resumen .... ....... .......... .......... ............. ............ ................................... ............ ..... ........... .. ...... ........... 212
La lista de tareas del diseño .......................................................................................................... 213

CAPÍTULO 6. GRÁFICOS ................................................................................................. 21 S

Principios y términos básicos ............... .................... ................. ............ .... .......... .............................. 2 17
Principios sobre la utilización de gráficos ..................................................................................... 2 17
Terminología ............ ...... ............. ........................ ........... ...... ...... ........... ...... ...... .......................... 219
Formatos de imagen para la Web ................................... .... ...................................................... ......... 225
Gráficos en formato JPG ............................................................................................................. 225
Gráficos G IF .............................................................................. .......................... ...... ................. 227
Gráficos en formato PNG ........................................................ ................................................... 231
Combinación de imágenes ...................................................................................................... .... 232
Adquirir imágenes ... ...... .................... ... .................... ... ............... .................... ............. ..................... 232
Bancos de imágenes y cliparts ...................................................................................................... 233
Utilidades de captura de pantalla ............................ .. .................................. ....................... .. ........ 234
Escáneres ... ......... ................... ............ ................... ....... ................... ...... ...... ........................ ......... 234
Cámaras digitales ............ ................. .... ............... ...................................................................... .. 237

12 Índice de contenidos
Crear y editar imágenes ............................... ..................................................................................... 238
Imágenes con capas ................................................................... .. ................................................ 239
Exportar imágenes .......................................................................................................... .. ........... 240
Conseguir que coincidan los colores de d iferentes aplicaciones ........................... .. ....................... 241
Fuentes dingbat. .......................................................................................................................... 241
Efectos, flltros, texturas y tramas ......................................................................................... ........ 242
Diseño de logotipos .............. ............ ...... ............ ...................................................... ............ .. ..... 245
Inspiración para diseñar imágenes ......................................... ............................. ... ...................... 246
Imágenes de fondo ....................................................... .. .................................................................. 246
El contraste de las imágenes de fondo .................................. .. ...................................................... 247
Fondos en mosaico ................................ .. .................................................................................... 248
Fondos con una imagen a pantalla completa ............................................................................... 250
Fondos con imágenes parciales .................................................................................................... 251
Una alternativa a las imágenes de fondo .................... .. .......................... ................................. ..... 25 1
Consejos para trabajar con gráficos ................................................................................ ................... 252
Piense en píxeles .......................................................................................................................... 252
Utilice ecos visuales ..................................................................................... .. .............................. 252
Tenga siempre un GIF de 1x1 píxel a mano .......................................... .. .................................... 252
Evite utilizar los clichés típicos de Internet .................................................................................. 253
Considere la utilización de bordes de imágenes ......................................................... ................... 253
Utilice Dreamweaver para crear imágenes de sustitución remotas ................................................ 253
Dar nombre a las imágenes por su función, no por sus atributos visuales ..................................... 254
Animaciones ..................................................................................................................................... 254
Terminología de la animación ..................................................................................................... 255
Formatos de animación ................ ..................................................... .. .... .. .................................. 255
Gráficos y accesibilidad .................... .. .............................................................................................. 257
Resumen .......................................................................................................................................... 257
La lista de tareas del diseño ...... ... .... .. ........................................................................................... 257

CAPÍTULO 7. TIPOGRAFÍA ............................................................................................. 261

Aspectos básicos de la tipografía ........................... ........................................................ .................... 263

Cuerpo de texto y tipografía decorativa ....................................................................................... 263
Tipos de letra ................ .............................................................................................................. 263
Formato y contraste .................................................................................................................... 265
Espaciado ................................ .. ............................................................................................... ... 266
Justificación .............................................................................................................. .................. 267
Tipografía y diseño Web .............................................................................................................. 267
Texto HTML ........................................................................ .. ................................................ ......... 268
Fuentes HTML ....................................................................................................... .................... 268
Tamaños de fuentes HTML ........................................................................................................ 269
Formato HTML ......................................................................................................................... 270
Espaciado de texto HTML .......................................................................................................... 272
Justificación del texto HTML ..................................................................................................... 273

Índice de contenidos 13
 Diseño de texto HTML .................................. ......................... ................... .............................. .. 273
Caracteres especiales y signos de puntuación en HTML. ....... ..... ........... ...................................... 274
Texto gráfico ............................................................................................................................... .. ... 275
Texto y accesibilidad ................................................................ ....... .................................................. 277
Resumen ........... ................................................... ... ................................ .. ....................................... 278
La lista de tareas del diseño ................................................................................................ ...... .... 278

CAPÍTULO 8. FORMULARIOS ......................................................................................... 281

Principios básicos sobre los formularios Web .................................................................................... 283
Reduzca el esfuerzo físico ........................................ ................................ .................. .................. 283
Reduzca el esfuerzo cognitivo ............ ........................ ...... ............................................................ 283
Evite pedir información que parezca innecesaria ..... ..................................................................... 283
Controles del formulario ............................................................. ............................................. .. ...... 284
Botones de opción ..................................... .. ............... ................................................................. 285
Casillas de verificación ... ............................................................................................................. 286
Cuadros de lista ................................................................ .................................................. ......... 287
Campos para in troducir texto de una línea ... .......................... ...... ........ ................... .................... 289
Campos para introducir texto de varias líneas .............................................................................. 292
Finalizar los formularios ................................................................................................................... 294
Validación de formularios ............................................................................................................ 294
Botones Enviar ......................................................................... ......................................... ... ... .... 295
Botones Borrar .................................................................. .......................................................... 296
Alguno trucos sobre los botones Enviar y Borrar .......... ............................................................... 297
Estructura de la transacción ...................................... ............................................ ................. .. .... .. ... 297
Asistentes ........................................................................... ............................... .. ........................ 297
Paneles de control ............... .................................... .................................................................... 299
Diseño de la página de formulario .................................................................................................... 299
Controlar el foco del cursor y el orden de tabulación ................................................................... 300
Mostrar los campos en el orden esperado ..................................................................................... 302
Agrupar los controles por categorías .................................. .. ................ .. ...................................... 302
Ayuda al usuario ....................................... ....... ................................................................................. 302
Principios básicos de la ayuda al usuario ...................................................................................... 302
Instrucciones ............................................................................................................................... 303
Documentos de ayuda ........................................................................ ......................................... 304
Retroalimentación ...................................................................................... ................................. 305
Gestión de errores ............................................................................................. .......................... 306
Diseño visual de los controles de formulario ........................................................ .................. ........... 307
Formularios Web y accesibilidad ......................................................... ............................................ .. 309
Resumen .............................. ................. .. ... .. ....... ......... ............................ ........................................ 31O
La lista de tareas del diseño .......................................................................................................... 3 1O

ÍNDICE ALFABÉTICO ....................................................................................................... 313

14 Índice de contenidos
Aunque definitivamente tendrá que tomar notas y
puede que incluso grabar cada sesión de pruebas, un
informe de treinta páginas para detallar los resul-
tados es perder, y mucho, el tiempo. Es preferible
emplear ese tiempo en arreglar los problemas que
en documentarlos. Una sesión de dos horas con los
miembros del equipo debería permitirle centrarse en
los asuntos que deben arreglarse inmediatamente,
así como a priorizar los remas que puede estar bien
arreglar pero que no son tan vitales.
Sea especialmente precavido cuando le soliciten
añadir elementos adicionales (un aumento exagerado
del alcance del proyecto). Estos elementos pueden
acabar abarrotando el sitio hasta el punto de dañar
su usabilidad, tener otras consecuencias negativas
no previstas para el sitio y pueden ser de valor sola-
mente para un pequeño subgrupo de visitantes
(sin contar con el tiempo, esfuerzo y coste extra
que supondría construir estos elementos adicio-
nales) . Tendrá que encontrar una forma de detener
este tipo de situaciones desde el principio, ya que
pueden hacer descarrilar el presupuesto y el calen-
dario del proyecto.
INTRODUCCIÓN
AL DISEÑO VISUAL
El diseño visual, o la estética, de un sitio Web es
el núcleo principal de este libro. En el Webster's
New Collegiate Dictionary se define la estética
como un "aspecto o efecto agradable o artístico".
La estética de un sitio Web abarca cualquier cosa
que tenga características de comunicación visuales:
color, estructura, gráficos, fuentes, formularios de
introducción de datos y elementos de navegación.
Los elementos visuales se utilizan para clarificar la es-
tructura subyacente del sitio y para darle un aspecto
y ambiente adecuados. El diseño debe proporcionar
una identidad visual y una coherencia visual que se
mantenga en todo el sitio. Al igual que el diseño de
un edificio o de un automóvil, el diseño visual de un
sitio Web debe ser apropiado. En la figura l . 15 se
destaca la interacción del diseño visual con los otros
elementos del diseño Web.

Una vez que haya incorporado lo aprendido de cada

grupo de usuarios de prueba, compruebe el sitio
otra vez. Y otra. Y otra más, hasta que tanto usted
como el último grupo de usuarios de prueba estén
satisfechos con el resultado y el sirio pueda hacerse
público.

Nota: Puede haber casos en los que

Figura 1.15. Diseño visual.

=
los di rectivo~ de una empresa insis~n
en que d1senemos elementos del s1t10
de una determinada forma, aunque les
hayamos advertido que esos elementos
violan los estándares de usabilidad. lQué hacer
en este caso? Muy sencillo, invítelos a que
presencien las pruebas de usabilidad y deje que
escuchen por sí mismos las quejas y respuestas
de sus clientes potenciales.
¿Por qué es la estética tan importante? Bien, la
realidad es que juzgamos los libros por su portada
(visualice mentalmente la portada de una novela
romántica y la de un libro de fotografías de Irlanda),
los restaurantes por su fachada (compare un
McDonalds con la cadena de restaurantes
Olive Garden) y, recientemente, los sitios Web
por su diseño. Si el usuario está buscando juguetes
infantiles, probablemente no querrá pasar mucho

42 Capítulo 1
tiempo en un sitio que tenga un diseño visual
aburrido en tonos grises.
lDiseño visual o usabilidad?
En lo que se refiere al diseño visual, han exist ido
dos puntos de vista completamente contrapuestos
Tradicionalmente, los gurús de la usabilidad, como
Jakob Nielsen (www. usei t. com), han afirmado
que en los sitios Web debe predominar la usabilidad,
no la belleza. Consideran que cualquier concesión
hecha al diseño visual interfiere con la usabilidad.
Su objetivo principal es el minimalismo funcional
estricto; las imágenes, los fondos coloreados y los
diseños atractivos deben evitarse. La página ideal es-
taría compuesta por texro negro sobre fondo blanco,
con pocos o ningún gráfico. Para ser justos, diremos
que los defensores de la usabilidad han suavizado un
poco su postura en los últimos años, sin embargo,
los más estrictos siguen abogando por sirios Web
simples y básicos.
El punto de vista opuesto promueve la idea de la
Web como "experiencia". Según ellos, los sitios
Web deberían aprovechar las ventajas de la exclu-
sividad del medio, expandir sus límites, desafiar/
enganchar/ desconcertar!en tretenerlembelesar al
usuario. Un buen diseño visual proporciona signi-
ficado, crea un contexto y evoca emociones. Puede
conquistar a un usuario y hacer que confíe en la pro-
fesionalidad y fiabilidad del sitio. También permite
centrar el punto de mira, enfatizar, crear relaciones
entre los elementos del sitio y guiar al usuario para
que lleve a cabo su misión. Todo esto es importante
para la experiencia del usuario, as í como para su
comprensión del sitio. La otra cara de la moneda es
que la gente que defiende la idea de la Web como
"experiencia" no ponen trabas, e incluso diseñan,
sitios Web preciosos pero de navegación compli-
cada, difíciles de descifrar y que son una verdadera
pesadilla para descargar.
Introducción a las técnicas de diseño Web
Afortunadamente para todos los que usamos
Internet, ninguno de estos dos argumentos es
totalmente cierto, ni totalmente falso. D e hecho, la
usabilidad y la estética no tienen porque estar reñidas
en la Web, al igual que no lo están en la arquitectura.
Después de todo, un buen arquitecto puede crear un
edific io que sea absolutamente funcional y hermoso
a la vez. En la arquitectura de un edificio, la forma
(el diseño visual) puede, en efecto, seguir a la funcio-
nal idad (la usabilidad del edificio) .
¿Por qué no puede aplicarse el mismo equilibrio a la
Web? ¿Por qué no podemos tener belleza y funcio-
nalidad? Al fin y al cabo, como dijimos al principio
de este libro, la Web es ante todo un medio de
comunicación, muy similar al medio impreso. Si
nos encontrásemos con una revista sin imágenes, en
muchos casos la rechazaríamos por considerarla una
producción amateur, hecha con poco presupuesto.
Lo mismo ocurre en la Web. Y a medida que avanza
el t iempo, esta idea de equilibrio va convirtiéndose
poco a poco en la corriente principal. De hecho,
algunos de los gurús de la usabilidad (en especial
Jared Spool, www. uie . com) han comprendido
que la forma y la funcional idad de un sitio Web no
tienen porqué estar necesariameme en conflicto la
una con la otra.
Por tanto, hagamos lo posible para equilibrar forma
y funcionalidad. Si los factores de usabilidad hacen
que un sitio sea funcional, el diseño visual hace que
sea memorable. Nuestro objetivo es llegar a ambas.
Nota: "Si la presentación no es clara,
e l público no será capaz de llegar al
contenido. Si la presentación no es
atractiva, puede que el público no
se sienta motivado para intentarlo".
Site-Seeing: A Visual Approach to Web Usability,
Luke Wroblewski.
43
los resultados del equipo de furbo! de la empresa no
sería útil en absoluto.
El cliente potencial quiere llevar a cabo su tarea de la
forma más rápida y eficiente posible, pero también
tenemos que convencerle de que debería escoger
nuestros productos y servicios antes que los de otro
sirio Web. Cualquier cosa que hagamos para dife-
renciar un producto o servicio del resto, facilitando
por tanto el proceso de decisión del visitante, h ará
nuestro sitio más atractivo. Básicamente, queremos
diseñar un sirio fácil de utilizar, pero también
queremos ser persuasivos, como si estuviésemos en la
tienda con el cliente. Por consiguiente, necesitamos
demostrarle al cliente el valor de nuestro sitio Web lo
antes posible.
Creación del contenido
Normalmente, los diseñadores Web no son quienes
crean el contenido de un sitio. Si el sitio está
orientado a datos, como Amazon, los registros de
la base de daros de productos proveerán la mayor
parte del contenido. Si el sitio es informativo, el
contenido lo proporcionarán expertos sobre cada
materia (es el caso de los físicos que crean el conte-
nido de WebMD.com). Si el sitio está diseñado para
aumentar las ventas, el equipo de publicidad de la
empresa será quien genere la mayoría del contenido.
Nota: A veces, la edición del contenido
que nos entregan requiere mucho tacto.
"Si el ciudadano med io es mal escritor,
el cliente es un mal escritor con ego."
Taking Your Talent to the Web,
Jeffrey Zeldman.
Sin embargo, habrá veces en las que el diseñador
tendrá que opinar sobre el contenido, escribir el
contenido él mismo o editar el contenido que le han
dado. Si ése es el caso, renga en cuenca lo siguiente:
66 Caoítulo 2
El estilo de escritura utilizado debe coincidir con
el mensaje que quiere transmitir sitio, ya sea formal,
moderno, humorístico, coloquial o rebuscado. No
utilizaríamos nunca un estilo de escritura formal y
académico para el sitio Web de D isney, al igual que
tampoco usaríamos un estilo informal para un sitio
que publique las últimas investigaciones sobre física
de unos profesores universitarios.
• Inspeccione cuidadosamente todo el contenido
para detectar errores gramaticales u ortográficos.
Contrate, si es posible, a un corrector profesional
para hacer esta rarea. Si no fuese posible, utilice estos
dos trucos de corrector:
Lea el contenido en voz alta: El leer en voz
alta nos obliga a fijarnos en cada palabra, cosa
que por lo general no hacemos cuando leemos
en silencio. Además, muchas veces nuestro oído
capta errores gramaticales que nuestro ojo pasa
por alto.
Lea el contenido hacia atrás: Esto le
obligará a fija rse en cada palabra para detectar
errores ortográficos.
• Considere la posibilidad de utilizar una frase
descriptiva que resuma de forma breve la misión del
sitio Web, algo que sea lo suficientemente esclare-
cedor para el visitante en el caso de que la empresa
no sea muy conocida. Fíjese en los ejemplos de estas
páginas Web:
Dive lnto Accesibility: 30 eútys toa more
accesible web site (30 días para conseguir una
página Web más accessible).
IMDb: Earth's Biggest Movie Database"'
(La base de datos de p elículas más grande
del mundo).
Dr. Dobbs: Software too/s for the Professional
Programmer (Herramientas de software para el
programador profesional).
 No ut ilice concenido (textos, imágenes o
multimedia) procedence de otras fuentes sin cener el
permiso por escrico del propietario del copyright, ya
que podría tener problemas legales. Muchos propie-
tarios de copyright están encantados de dar permiso
siempre que se mencione la fuente de la que procede
el contenido.
Trate de utilizar un estilo claro, conciso y
vigoroso. Un estilo vigoroso utiliza palabras fuertes,
descriptivas y evocadoras. Compare las dos frases
siguientes:
Ella bajó andando por la calle.
La chavala atravesó con dificultad el lúgubre
callejón.
La primera frase es insípida, mientras que la segunda
evoca una imagen que podemos recordar, por su
lenguaje vistoso y específico. La escritura vigorosa
atrae al visitante, siempre que no se caiga en la
palabrería.
Nota: "El le nguaje vigoroso es conciso.
Las frases. no debe~ contener palabras
mnecesanas, los parrafos no deben
contene r frases innecesarias, de l
mismo modo que los dibujos no deben
contener líneas innecesarias, ni las máq uinas
partes innecesarias." Th e Elements of Sty/e,
Strunk y White.
Crear una página Web adictiva
¡Qué podemos hacer para crear un sirio Web
adictivo que haga que los visitantes naveguen por él
durante un largo periodo de tiempo y vu.elvan una y
otra vez? Sin duda, la calidad del contenido principal
tiene mucho que ver co n la adicción que causa una
página Web.
El contenido debería enfatizar que lo que nuestro
sitio ofrece es val ioso para el usuario y en qué se d i-
ferencian nuestros servicios de los de la competencia.
Por ejemplo:
No hable de lo increíble que es la empresa:
proporcione a sus visitantes algo que puedan valorar
ya mismo.
• Actualice el contenido frecuentemente y asegú-
rese de que sus visitantes sepan que lo ha actualizado.
Ofrezca cupones de descuento o haga campañas
co n promocio nes especiales, preferiblemente de
forma habitual, para que los visitantes entren a
comprobarlo a menudo.
Haga un concurso; pero renga cuidado porque
podrían existir condicionamientos legales sobre lo
que se puede y se no puede hacer en un concurso.
Proporcione contenido con valor añadido,
contenido que vaya más allá del propósito original
del sirio. Algunos ejemplos:
Williams-Sonoma proporciona recetas
que ut ilizan los u tensilios de cocina y las
comidas especiales que se ven den en su sitio
(www . wi l l i amssonoma . com).
En www . photo . net los fo tógrafos
aficionados pueden añadi r sus propias fotos a la
galería y pedir la opinión de otros visitantes. El
animar a los visitantes a co ntribuir en un sitio
Web se denomina "construir una comunidad".
Las críticas de libros enviadas por los usuarios
de Amazon (www . amazon . com) son otro
ejemplo de esta técnica.
Rand-McNally (www . randmcnally)
no sólo proporciona mapas (su contenido
principal), sino que también sugiere nombres
de restaurantes y h oteles en una ubicación
esp ecífica.
Análisis de sitios Web 67
 Texto rodeando una imagen
y diferente interlineado Encabezado y cita al margen Inicial decorativa

E8
Four score and seven
years ago our fathers
brought forth on this
continent, a new nation, con-
ceived in Uberty, and dedicated to
the proposition that 11 men a re
created equal.
I LN LlBERTY conceived in
Now we are engaged in a great
civil war, testing whether t hat
nation, or any nation so conceived
a nd so dedicated, can long
endure.
The Gettysburg Address
Four score and seven years
ago our fat hers brought forth
"CONCE IVED Ion t his cont inent,
" a new nat1o n,
Uberty, and dedicated to the
proposit ion t hat 11 men are
created equal.
'Paur score and seven
.1' ~ears ago our fathers
brought forth on this conti-
nent, a new nation, conceived
in Llberty, and dedicated to
the proposit ion t hat 11 men
are created equal.
Now we are engaged in a
great dvil war, testing
whether that nation, or any
nation so conceived and so
dedlcated, can long e ndure.

Figura 4.27. Romper los bloques de texto.

• Colocar el texto rodeando una imagen. Colocar los elementos en la página

Variar el interlineado (espacio entre las líneas).
Interrumpir los bloques largos de texto con
encabezados mayores o con citas de fragmentos del
texto en una fuente mayor y colocados al margen en
un recuadro.
• Utilice mayúsculas decorativas (letra inicial
decorativa más grande y decorada) e iniciales más
grandes y que descienden por debajo de la línea
de texto).
Cómo conseguir el equilibrio
El exceso de serenidad es monótono. El exceso de
contraste y estimulación es visualmente caótico.
Si queremos evitar cualquiera de estos dos pro-
blemas de diseño, debemos proporcionar una cierta
cantidad de serenidad, pero no demasiada, y una
cierta cantidad de contraste, pero no demasiado. Si
logramos resolverlo bien , la tensión entre serenidad
y estimulación puede ofrecer una armonía visual
que equilibre la página. Generalmente, suele ser
más efectivo crear p rimero todos los elementos de la
página uniformes y escoger luego unos pocos a los
que aplicar el contraste.
Los usuarios de Internet se han acostumbrado a
ciertas convenciones de diseño, en especial a que las
páginas tengan el sistema de navegación a lo largo
de la parte superior de la página y/o hacia abajo, en
vertical, en el lado izquierdo de la página.
Este esquema de "L" invertida se ha ut ilizado
mucho a lo largo de la historia de la Web por
buenos motivos:
• Las áreas superior e izquierda se muestran en
las pantallas de todos los usuarios, independiente-
mente del tamaño de la ventana y de la resolución.
Por tanto, este área es la más valiosa de la página y
es el lugar más seguro para colocar los componentes
críticos de la misma, como el logo y los elementos
de navegación. Si esos mismos elementos estuvieran
situados en la parte inferior derecha de la ventana,
podrían perfectamente desaparecer en una ven-
tana de menor tamaño o en un monitor de baja
resolución.
• En el mundo occidental leemos de izquierda a
derecha y de arriba abajo, de forma que nuestros ojos
están habituados a aterrizar en la esquina superior
izquierda.

164 Capítulo 4
Los usuarios se sienten tan cómodos con este
esquema de "L" invertida que no necesitan pensar en
él. Esto no quiere decir q ue no podamos colocar los
vínculos en otro lugar. Sin embargo, si rompemos
el esquema tradicional, debemos compensarlo
haciendo que las nuevas co nvenciones sean muy
claras para el usuario. Los elementos de navegación
novedosos tendrán que estar aún más destacados
yser aún más constantes para suplir su ubicación
no habitual.
Nota: Un sitio Web so bre usabilidad
del gobierno de los Estados U nid os
recom ienda situ ar el sistema de nave-
gación en el lado derecho de la ven-
ta na, puesto que se necesitan menos
movimientos del ratón pa ra pasar del sistema
de navegación a la ba rra de d esp laza miento.
Véase www . usability . gov/guidelines/
nav igati on . html#four .
Truco: "Un usuario de Internet puede
00 ver, fácilmente, unas veinte interfaces
Web en un solo día, y otras veinte al
día siguiente. Todas deberían tener
esq uemas conve ncionales y conocidos
para mi nimiza r su curva de aprend izaje, pero sin
que esa fa miliarid ad resulte anod ina e indiferen-
ciable ." Eric Eaton, Design Whys.
La información más impo rtante debería estar en el
secto r visible de la página, es decir, tendría que estar
a la vista cuando el usuario abra la p ágina, sin que
renga que utilizar el desplazamiento vertical. Se trata
de una técn ica utilizada por la prensa escrita, q ue
sitúa los artículos más impon anres o atrayentes en
la mitad superior de la po rtada de los periódicos,
de forma que queden a la vista cuando el periódico
esté doblado en un montón. Co n las páginas Web
sucede igual, si q ueremos que el usua rio se tome
la molest ia de desplazarse a la parte iofe rior de la
página, debernos atraer su atención a primera vista.
Utilice po r tanto el sector visible de la página para
llamar la atenció n a sus visitantes. Todos los sitios
Web que hemos visto en este capítulo lo hacen.
¿Cuál es el sector visible de la página que verá el
usuari o al abrirla? Es imposible saberlo con segu-
ridad, a causa de las diferentes resoluciones y
tamaños de pantalla de las que hablamos antes.
Corno regla general, podernos considerar que el
secror visible de la página es de unos 390 píxeles,
más o menos el tamaño de una ventana abierta
maximizada en una resolució n de 800 x 600.
Elementos de página obligatorios
El diseño de la página es el esq uema visual en que
situarnos el conten ido y los gráficos del sitio. Ese
esquema visual debería inclui r, en rodas las páginas,
los ele m en tos siguientes:
El logo e identificació n de la empresa. Tenga en
cuenca que el usuario no siempre llega a la "puerta
pri ncipal", es decir, a la página de inicio. Por tanro,
debemos asegurarnos que sepa dónde está si aterriza
en una página intermedia, a través de un marcado r
de favo ri tos o un enlace a esa página en concreto.
Identificación de la página o título. Sin él, el
usuario no sabrá el propósico de la página que está
viendo.
Sistema de navegación principal, incluyendo un
vínculo a la página de inicio, ya que lo que queremos
es que el usuario siga explorando el sitio después de
haber visto la página actual.
Sistema de navegación local, si fuese necesario,
para acceder a las páginas secundarias.
Un p ie de página estándar, cuando corresponda.
Est e pie de página incluirá info rmación sobre el
copyright, la fecha de la última actualización o
vínculos a la política de privacidad y al aviso legal
Diseño de página 165
del sitio. También podemos repetir el sistema de
navegación de la parte superior de la página, para
que el usuario no tenga que desplazarse otra vez
hacia arriba para seguir explorando el sitio. Para
este sistema de navegación suelen utilizarse vínculos
de texto más pequeños, aunque la navegación de la
parte superior sea gráfica.
La primera fase de este proceso es un boceto en
escala de grises, sin color, sin contenido real (utilice
cualquier texto para rellenar) y si n gráficos, aunque
tendremos que indicar los marcadores de posición
de los fu turos gráficos. Esta versión en escala de
grises reflejará la estructura de las páginas. En la
figura 4.28 puede ver un guión gráfico in icial, dibu-
jado a mano, con el diseño de una página sencilla.

La página de inicio 1

La página de inicio tiene sus p ropios requisitos. Es el

LO' o ~ .,. hvl.Q
fÁ' '~" \
punto de entrada al sitio y su propiedad más val iosa,
por tanto debería servir como tabla de contenidos
del si tio, y también explicar cómo acceder a los
contenidos. Evidentemente, las áreas de contenido
' ....
t '"'"'•
Á~V<Í
., ,
IT~.,.~
1h•••t"•' !lo ••ca.~f 1<.4l•"'.."~·, l

\1\~,~ .. , .. )'
l . ....
O"
~·
"'-

más importantes deberían estar más destacadas. Es ,~ .. ,0 ~IW o~ .. "'A

conveniente intentar mostrar al menos un poco

de contenido real en la página de inicio, y no sólo
el sistema de navegación, para que los usuarios se
hagan una idea más clara de lo que encontrarán en el
1 ce. c.c,..,q..~

9f. " ..
(1 , . , ....

1
o
1.

"""'"'
'11)

resto del sitio. ........

\:"f{11'\'U C'-. &.A C.C' J
Figura 4.28. Guión gráfico: boceto del diseño.
Sin embargo, no debemos incluir en la página de
inicio elementos que no sean importantes para la to-
El objetivo de este guión gráfico en escala de grises
talidad del sitio. Por ejemplo, si Amazon mostrase en
es mostrar el esquema y estructura subyacente de
su página inicial los resultados de la liga de fútbol del
la página: don de se colocarán ellogo, el sistema
equipo de la empresa estaría malgastando un espacio
de navegación, el título de la página, el conten ido
valioso. A sus clientes, que son el público principal
y las imágenes principales. En esta etapa, se omiten
del sitio, no les interesa esta información.
deliberadamente los gráficos y colores porque que-
remos centrarnos en juzgar únicamente la estructura
Escoger el contenido de la página principal suele
del sitio.
convertirse en una guerra política entre las entidades
y departamentos de una empresa, ya que normal-
Sólo cuando se haya aprobado este boceto en escala
mente todos consideran que su contenido debería
de grises, podremos p rogresar a un guión gráfico
mostrarse en ella.
que incluya colores y gráficos, que a veces recibe el
nombre de "co mposición" en color (o prototipo).

EL GUIÓN GRÁFICO: Para crear esta composición, algunos dísefiadores uti-

CREAR EL BOCETO DEL SITIO
En algún momento, necesitaremos plasmar en
papel o en forma to digital el esquema preliminar
de las páginas, lo que se denomina el guión gráfico.
lizarán un programa de edición de imágenes, como
Adobe Photoshop o Fireworks, y otros preferirán
crearlo como página H TML. Veamos cada método
por separado.

166 C:::!níh •ln 4

Arranque hojas de revistas y guárdelas en un arch ivo
para tenerlas como referencia en el futuro. Si en-
cuentra una tela que le guste, compre una pequeña
muestra y guárdela en su archivo. Lleve consigo una
pequeña cámara digital para capturar aquellas cosas
que le inspiren del mundo real (como el exterior de
un edificio, el hall de entrada de un bonitO hotel o
un hermoso paisaje owúal) y que no quepan en su
archivo. Dicho de otro modo , ¡robe ideas! A dife-
rencia de los gráficos y del contenido, los esquemas
de color no están protegidos por el copyright. Si
encuentra un esquema que le gusta y que puede
modificar para adaptarlo a sus necesidades, hágalo
sin dudarlo.
Otra forma de seleccionar colores es sacándolos de
una foto o gráfico que ya haya escogido para el sitio.
Una foto de una mujer con un jersey rojo puede
llevarnos a un esquema de colores rojos (del jersey)
y tostados (por el tono de piel).
Truco: Una caja de lápices de colores
puede ser una referencia de color
excelente. Compre la caja más grande
que encuentre para cada miembro del
equipo de diseño.
El contraste de los colores
El contraste es el grado de d iferenciación de los dis-
tintos atributos del color. Como explicamos en el
capítulo anterior, el contraste se usa para enfatizar al-
gunos elementos y quitarle énfasis a otros. Podemos
usar los cuatro atributos de color de los que habla-
mos al principio del capítulo para crear co ntrastes:
• Tono: Los colores co mplementarios, como el
azul y el naranja, son los que tienen mayor con eraste.
• Valor: Los colores más claros contrastan con
los colores más oscuros, como el lavanda pálido y el
morado oscuro.
Saturación: Los colores muy saturados con-
trastan con los poco saturados, como el verde rípico
irlandés y un verde hoja oscuro.
Temperatura: Los colores cálidos (amarillo, na-
ranja, rojo) contrastan con los colores fríos (morado,
azul, verde) .
Tanto las páginas excesivamente contrastadas, como
las muy poco contrastadas, pueden ser difíciles
de leer. Piense en el alto contraste del rojo sob re
el verde, o en el bajo contraste del amarillo sobre
blanco y comprenderá el p roblema.
Para conseguir una legibilidad óptima, los elementos
frontales, como el texto y los gráficos, deben con-
trastar siempre en valor con los elementos del fondo.
Por ejemplo, el texto negro sobre el fondo blanco
tiene una legibilidad perfecta. Si cambiásemos el
blanco por un amarillo pálido, seguiría viéndose bien.
Sin embargo, si colocásemos ese texto negro sobre
un fondo azul marino, el texto se ría casi ilegible
porque el contraste ent re el valo r de los dos colores
es insignificante. La norma es esta: si eliminásemos
wdo el color del diseño, dejándolo como imagen
en escala de grises, el diseúo debería seguir siendo
legible. Convertir la página de forma temporal a
escala de grises es una buena forma de evaluar la
calidad subyacente del diseño si n las distracciones
del color. Existen muchos paquetes gráficos, así
como plug-ins para navegadores, que nos permiten
convertir tempo ralmente una imagen o página Web
a escala de grises para comprobar su contraste.
Nota: La barra de herramientas Al S,
un plug-in de Internet Explorer, incluye
un botón que muestra tempora lmente
la página en esca la de grises. Puede
descargarlo de forma gratui ta en
www . visionaustralia . org . au/
ais/toolbar.
El color 207
El contraste es una herramienta muy práctica para
acentuar algunos elementos y quitarle énfasis a otros.
Por ejemplo, si utilizamos tonos oscuros para la
mayoría de la página y usamos un naranja vivo para
el cítulo, estaremos enfatizando el tÍtulo. Si se utiliza
con habilidad, el co ntraste puede ser muy efectivo
para destacar las áreas que queremos enfatizar. Mal
utilizado, el contraste sólo servirá para llamar la
atención sobre los elementos equivocados.
Los colores se "leen" de forma diferente depen-
diendo de su contraste respecto a los colores adya-
centes o de fondo. Fíjese atentamente en cada una
de las bolas rojas de la figura 5.39. Algunas de las
bolas parecen ser de un rojo más claro o suave que
las otras. En realidad todas las bolas son del mismo
color, pero parecen diferentes por su color de fondo.
Figura 5.39. Los colores adyacentes afectan
a la apariencia del coLor.
El colocar colores muy contrastados uno junto a
otro magnifica la percepción del contraste. Por el
contrario, el colocar un color intenso junto a otro
más suave, como la bola roja sobre el fondo amarillo,
hace que el color fuerte parezca más fuerte y el color
suave más suave. Cuando situamos un color muy
saturado, como este rojo intenso, sobre un color
apagado como el gris, el rojo parece tan vivo que casi
brilla. El colocar el rojo sobre el blanco, no parece
afectar mucho al rojo, pero el blanco adquiere un
tono rosado. El rojo y el verde, colores comple-
mentarios, crean una tensión que hace que el rojo
208 Capítulo 5
parezca aún más rojo. El rojo sobre negro también
hace parecer al rojo más rojo, pero sin el mismo
grado de tensión. Los esquemas de alto contraste,
como este, muestran bordes nítidos entre los colores,
lo que crea tensión, excitación y dramatismo.
Por otro lado, el rojo tendrá un aspecto más apagado
si lo colocamos sobre colores similares, como el na-
ranja o el rosa. Las combinaciones de bajo contraste,
como estas, muestran bordes suavizados y tienen un
aspecto más calmado, relajante e incluso elegante.
En cualquier caso, el grado del contraste entre colo-
res influye realmente en la atmósfera general de un
sitio. En la figura 5.40 puede ver un esquema de co-
lor con colores de valor y saturación similares, que
transmite una sensación más tranquila y elegante.
Figura 5.40. Esquema de coLores de bajo contraste.
Colores de fondo
Como acabamos de ver, es necesario que haya
suficiente contraste entre los elementos y el fondo.
Los diseñadores que trabajan con medios impresos
siempre han insistido en que es más fácil leer el texto
oscuro sobre fondo claro, y da la ¿casualidad? de que
además es la forma más barata de imprimir. En cual-
quier caso, muchos diseñadores aplican este prejuicio
del oscuro-sobre-claro en Internet y consideran que
deben evitarse los fondos oscuros. Por lo que parece,
 uando hojeamos un libro, un periódico
o un sitio Web, lo más probable es que
no nos fijemos en la tip ografía a no
ser q ue nos resulte molesta por algo,
porque sea demasiado pequeña, esté borrosa o sea
demasiado decorativa para ser legible. La tipografía
ideal debe ser invisible, es decir el lector no debe ser
consciente de ella. Por ta nto, la fun ción principal
de la tipografía es su utilidad. Las palabras deben
estar escritas en una tipografía adecuada, con un
tamaño adecuado y estar situadas sobre un color
de fondo adecuado.
Incluso así, la tipografía tiene un efecto subliminal.
Puede ser tonta, seria, alegre, exó tica, descarada,
femenina o for mal. La tipografía debe estar en
consonancia con la atmósfera y sensibilidad del sirio.
Una ripografía demasiado decorativa o embellecida
será poco adecuada para el sirio Web de un banco,
así como una tipografía sobria tampoco será ade-
cuada para un sitio de juegos online de fantasía.
La ripografía es mucho más poderosa de lo que
nos imaginamos, hasta el punto de que puede
acabar siendo asociada a n uestro sitio o empresa.
Por ejem plo, la tipografía utiliz.ada en ellogo de
Coca-Cola y en las películas de H arry Pon er es
fácilmeme reconocible. Esto puede pasar tam bién
con fuemes menos llamativas. Por ejemplo, D an iel
Will-Harris, una autoridad en el campo de la tipo-
grafía, afi rma que en los Estados U nidos la fuente
Helvética podría tener connotaciones negativas,
porque es la q ue se usa en los fo rm ularios de los
impuestos. Sea cien o o no, la realidad es q ue escoger
una tipografía adecuada para transmitir n uestro
mensaje es fu ndamental.
ASPECTOS BÁSICOS
DE LA TIPOGRAFÍA
Los conceptos básicos de la tipografía son aplicables
a todos los med ios: la Web, el material impreso o
los grandes carteles de las autovías. Veremos todos
estos conceptos generales ames de explicar cómo
aplicarlos a la Web.
Cuerpo de texto
y tipografía decorativa
El cuerpo de texto se refiere al conrenido principal
de una comunicación, es decir, el contenido del
1
párrafo. La tipografía decorativa o de titulares es el
texto q ue se usa para la decoración y/o estructura,
como logos, titulares, encabezados y encabezados de
segundo nivel.
El objetivo principal del cuerpo de texto es su legi-
bilidad: a nadie le apetece descifrar todo un párrafo
de texto decorativo y difícil de leer, especialmente
si es de pequeño tamaño. El cuerpo de rexro debe
tener una tipografía simple, legible y no demasiado
pequeña.
El o bjetivo principal de la ti pografía decorativa es
embellecer o llamar la atención. Los elementos de la
tipografía deco rativa, como los encabezados, suelen
ser frases cortas y con un tamaño de letra rrrande de
o '
forma que hasta las fuenres muy decorativas siguen
siendo legibles. Por tanto, tenemos mucha más
li bertad a la hora de escoger fuentes menos legibles
para los titulares o encabezados.
Tipos de letra
Un tipo de !erra es un d iseño particular de caracteres,
corno Courier, T imes New Roman, Aria], U niversiry,
C urly, ere. Una fuente es un tipo de letra con un
tamaño y estilo específico (negrita, cursiva, ere.).
El tipo T imes N ew Roman de 12 píxeles en negrita
es una fuente, mienrras que el tipo T imes New
Roman de 14 píxeles en negrita técnicarnenre sería
una fuente distinta. Sin embargo, en el mundo de
la in formática se suelen llamar "fuentes" a los t ipos
de letra, de forma que nos hemos acostumbrado a
Tipografía 263