SITIOS CON BUEN DISEÑO

Uno de los pasos más difíciles en la realización de un
sitio web es el DISEÑO DE LA INTERFASE. Crear un
estilo COHERENTE Y ATRACTIVO es uno de los
puntos clave para mantener el interés de los visitantes.
En esta nota, veremos los puntos más importantes que
es preciso tener en cuenta.


Cuando navegamos por la Web, tenemos
la oportunidad de ver toda
clase de sitios. Algunos tienen un diseño
muy atractivo, pero el de otros es tan
confuso que da trabajo encontrar la información
que buscamos.
Para que nuestro sitio no caiga dentro
de esta segunda clasificación, conviene
prestar atención a algunos conceptos básicos
de diseño y coherencia. La mejor
idea para diagramar un sitio, si es que no
somos expertos en diseño, es navegar e
inspirarse en los sitios que más nos gustan.
Claro que no basta con ver el sitio.
Muchas veces no sabemos cómo hacer lo
que vemos en la pantalla, construir las tablas,
las imágenes y demás. Como primer
paso, podemos guardar la página que nos
gusta en nuestro disco y luego abrirla con
nuestro editor de HTML. De esta manera,
podremos ver las tablas, las imágenes y
todos los elementos que componen la página.
En la Figura principal, podemos ver
cómo está construida la página principal
del sitio de Adobe (www.adobe.com). Podemos
ver la gran cantidad de tablas que
utilizan para ordenar el contenido. En el
caso de este sitio, la interfase es muy clásica:
una nota principal, cuatro notas secundarias
y barras de Navegación ubicadas
arriba y a la derecha.
Diagramar la página
Para empezar a construir un sitio, lo
primero que tenemos que hacer es tomar
una hoja de papel (sí, de papel) y hacer
un boceto de la distribución de los elementos
en nuestro sitio. Como dijimos
antes, podemos basarnos en páginas
que conozcamos. Siempre es importante
C identificar el tipo de audiencia al que se
dirige nuestro sitio. Para eso, es conveniente
reunir información relacionada
con la edad, el sexo, los ingresos y los
hobbies de las personas a las que nos dirijamos.
Si no disponemos de esos datos,
es posible deducirlos a partir del
contenido que ofrecemos. Toda esta info
nos va a ayudar a definir tres puntos
clave del sitio: la intención, la personalidad
y el estilo.
La intención se refiere al mensaje que
queremos hacer llegar a la gente por
medio de nuestro sitio. Por ejemplo, si
visitamos www.emacultaion.com, un sitio con
información sobre emuladores de Macintosh,
nos encontraremos con una interfase
que imita el entorno gráfico del sistema
operativo MacOS X.
La personalidad será lo que diferencia-
SITIOS CON BUEN DISEÑO
Uno de los pasos más difíciles en la realización de un
sitio web es el DISEÑO DE LA INTERFASE. Crear un
estilo COHERENTE Y ATRACTIVO es uno de los
puntos clave para mantener el interés de los visitantes.
En esta nota, veremos los puntos más importantes que
es preciso tener en cuenta.
Marcelo RUIZ
marcelor@mponline.com.ar
Redactor de USERS encargado de la sección SOLUCIONES,
especialista en diseno de páginas web.
Figura 1. La portada del sitio scifi.com
nos muestra el logo del sitio, un
resumen de lo que encontraremos y
algunas imágenes.
Figura 2. La página principal de scifi.com
les dice “no” a las tablas con bordes
rectos, y utiliza formas mucho más irregulares.
Una guía para la interfase
Figura 3. Una gran idea para los sitios
de imágenes para descargar. Vistas
previas en un marco a la izquierda y la
imagen grande en el centro. www.bybee.com
Webmasters39.qxd 5/1/01 3:11 PM Page 84
u s e r s . t e c t i m e s . c o m 85
bla), LI (ítem de una lista), con el mismo
formato, y una tipografía clara y fácil
de leer. Además, podemos crear otras
dos clases de estilos: una para los títulos
y otra para los subtítulos. Una regla
que conviene seguir es no usar más
de dos familias tipográficas.
El diseño
Hay que tener en cuenta el tipo de sitio
que vamos a realizar. No es lo mismo
hacer un portal que un sitio personal
o el de una empresa. En el caso de
un diseño estilo portal, siempre tendremos
que dejar lugar reservado para los
banners publicitarios. Un diseño muy
común consiste en colocar el logo del
sitio a la izquierda y dejar libre el centro
de la parte superior de la página para
colocar el banner.
Figura 4. El sitio de CookTek muestra un
diseño clásico. Un texto principal, una
columna a la derecha, y barras de
Navegación arriba y a la izquierda.
Figura 5. El sitio de la revista National
Geographic es uno de los mejor
organizados que encontramos. Vale la
pena visitarlo. www.nationalgeographic.com
rá a nuestro sitio de los demás. Podemos
inspirarnos en nuestro sitio preferido,
pero el nuestro siempre tendrá que constituir
algo nuevo. También podemos tomar
distintos elementos de sitios diferentes.
Todo esto es lo que dará personalidad
a nuestro sitio. A la vez, conviene
añadir un toque de originalidad. ¡Las cosas
se nos tienen que ocurrir a nosotros!
Pensemos en algo que no hayamos visto
en ningún lado y que pueda llamar un
poco la atención de nuestros visitantes.
En cuanto al estilo, es posible que éste
sea el punto más importante de los
tres. Hay que definir el formato de todas
las páginas del sitio en conjunto. Es una
buena idea definir la cantidad de páginas
diferentes que va a tener nuestro sitio.
Supongamos que consta de una página
principal, una página para las notas
y otra para los comentarios de los visitantes.
Tenemos que tener cuidado de
utilizar, en todas ellas, las mismas tipografías,
los mismos colores y el mismo
esquema de la página. Por ejemplo, es
necesario que establezcamos el lugar
que ocuparán las imágenes (derecha o
izquierda, por ejemplo) o el tipo de estilo
tipográfico del copete (en negrita o
bastardilla, por ejemplo). Todos estos
detalles determinan la coherencia del sitio.
Una buena idea para trabajar con el
tema de los estilos es el uso de hojas de
estilo en cascada (CSS, Cascade Style
Sheets) y plantillas.
Las hojas de estilo son una excelente
forma de dar formato a las páginas de
un sitio. En la mayoría de los casos,
bastará con definir los siguientes estilos:
P (párrafo), TD (celda de una ta-
Si abrimos las páginas que
más nos gustan con un
editor HTML visual,
podremos aprender más
de lo que nos
imaginamos.
Figura 6. Es muy fácil crear botones
rollover con Dreamweaver. Sólo hay que
seleccionar la imagen original y la que
aparece al pasar el puntero.
Webmasters39.qxd 5/1/01 3:11 PM Page 85
86 u s e r s . t e c t i m e s . c o m
E X P E R T O S W E B M A S T E R S
Hay muchos sitios que necesitan una
página de introducción o splash screen,
para que, por ejemplo, el usuario elija
un idioma o un país. Esta página tiene
que ser lo más simple posible ya que,
como va a ser la primera página del sitio,
tendrá que cargarse rápido. Recuerden
que, desde esta página, podrán enviar
una cookie al usuario para conocer
sus preferencias y evitar que la próxima
vez tenga que pasar por allí.
Si nuestro sitio va a tener diferentes
secciones, tendremos que hacer una barra
de Navegación. Los lugares más comunes
para ubicarlas son en la parte
superior, justo debajo del logo y de los
banners (barra de Navegación horizontal)
o en la columna izquierda (barra de
Navegación vertical). En ambos casos,
siempre quedará más atractivo realizar
los links utilizando imágenes (botones).
Otro recurso muy interesante para
las barras de Navegación es el uso de
íconos. Podemos conseguir íconos dentro
de cualquier colección de clip-arts.
Barras de Navegación
Ya sean íconos o imágenes lo que utilicemos
hay que guardar una coherencia
entre los mismos y el estilo del sitio. Es
conveniente que hagan gala de gran sobriedad
ya que la atención del navegante
debe estar centrada en el contenido
principal del sitio. Hay sitios que implementan
tanto barras de Navegación horizontales
como verticales. Generalmente,
la barra horizontal da acceso a las secciones
principales del sitio y siempre permanecerá
visible, mientras que la vertical
conduce a los canales o subsecciones.
No es mala idea agregar algún efecto
adicional a los botones. En la Figura 4,
podemos ver el sitio cooktek.com. La
barra de Navegación del mismo es bien
simple: una viñeta oscura, texto blanco
y un fondo rojo. No obstante, al pasar
el puntero del mouse sobre algún botón,
éste último cambia de color, lo
cual produce un efecto muy interesante.
Esto es muy fácil de hacer con
Dreamweaver. Sólo hay que elegir la
opción [Insert/Rollover image]. Acá
se nos pedirá que elijamos la imagen
original y la que aparecerá al pasar el
puntero. También podemos asignar un
hipervínculo Figura 6.
Lo más importante
Lo que debe llamar más la atención es
el contenido, es decir, la parte central
de la página. Acá hay muchas cosas
que podemos hacer y dependen del tipo
de sitio que queramos hacer. Si vamos
a construir un sitio de notas o noticias
(una revista electrónica), tendremos
que pensar en un lugar importante
para la nota de tapa o el tema principal.
Lo mejor es darle un lugar grande
y complementarla con una ilustración.
Si vemos el sitio de Adobe, notaremos
que el único elemento que diferencia
la nota principal de las demás es
que aparece acompañada de una ilustración
grande. Sin embargo, también
se le puede adosar una descripción en
formato de texto.
Las notas o temas secundarios se ubican
abajo, con imágenes más chicas y
botones que llevan a la sección a la que
corresponden esas notas.
Si nuestro sitio va a tener noticias, y
tenemos lugar, no desaprovechemos la
columna derecha. Simplemente tengamos
cuidado de no hacer la página muy
ancha para resoluciones menores (tomemos
como medida “menor” 800 x 60,
ya que es la más común).
Consejos para el diseño
El primer consejo está relacionado
con la claridad. No porque nosotros
conozcamos a la perfección cómo llegar
a cada sección de nuestro sitio, podemos
pretender que los visitantes
también lo sepan.
La coherencia en el estilo es uno de
los puntos más importantes que no podemos
olvidar. Un sitio confuso mareará
a la gente, y puede hacerle creer que,
en lugar de cambiar de sección, fueron
redirigidos a otro sitio. Los marcos o
frames son elementos realmente útiles
para mantener el mismo entorno en el
sitio. Sólo hay que evitar abusar de
ellos; en lo posible, deben pasar inadvertidos.
Si sabemos aprovechar el contraste,
podremos llamar la atención de los navegantes.
Por ejemplo, podemos contrastar
fotos a todo color con fondos en
blanco y negro, jugar con los tamaños
de los títulos y el texto, y todo lo que
se nos ocurra.
Es importante evitar la acumulación
de contenido típica de los portales. Si
hay mucha información, es preferible
dividir el sitio en secciones y poner en
la portada sólo lo más relevante. También,
sepamos evitar el abuso de tecnología.
Una página cargada de applets
de Java, animaciones en Flash o trucos
en JavaScript terminará entorpeciendo
la navegación y, en ocasiones, con la
paciencia de los visitantes.
Otros recursos
Afortunadamente, hay muchos sitios
en los cuales podremos encontrar ayuda
a la hora de diseñar páginas web de calidad.
Uno de los mejores es Web de estilo
(www.webdeestilo.com), un sitio que desafía
a sus visitantes a encontrar algún
error entre sus páginas. Acá no sólo encontraremos
consejos sobre el estilo,
sino también trucos y recursos sobre
HTML, JavaScript y otros lenguajes de
programación.
Tampoco podemos dejar de visitar
Scream Design (www.screamdesign.com),
donde encontraremos tutoriales de
Flash, Photoshop, Illustrator y otros
programas para diseño. Incluso podremos
utilizar un diseñador de interfases
Flash online.
Finalmente, les dejo una frase para reflexionar
que leí en un libro: Nada elimina
mejor las telarañas creativas que
inspirarse en el buen trabajo de otros.
¡Hasta la próxima! ✕
✚ Para saber más
Algunos consejos y sitios para aprender con ejemplos
✚ Comunicar con claridad www.apple.com
✚ Mantener la coherencia y el estilo www.scifi.com
✚ Aprovechar el contraste www.elle.com
✚ Evitar la acumulación www.bybeestudio.com
✚ Ordenar la información www.cooktek.com
Webmasters39.qxd 5/1/01 3:11 PM Page 86