Webmastering - Diseo web

Junio 2014

Introduccin al diseo web

El trmino "diseo web" se refiere a la actividad que consiste en estructurar los elementos
grficos de un sitio web para expresar estticamente la identidad visual de una compaa u
organizacin. Se trata de una etapa de diseo virtual ms que de diseo funcional (ergonoma,
navegacin).
El objetivo del diseo web es realzar la imagen de una compaa u organizacin a travs de
elementos grficos con el objeto de reforzar su identidad visual y despertar una sensacin de
confianza en el usuario. An as y junto con el criterio de ergonoma, un sitio web debe, sobre
todo, cubrir las expectativas del usuario y permitirle encontrar fcilmente la informacin que
busca.
Por eso, el diseo web consiste en encontrar un trmino medio entre una presentacin que
tenga grficos impresionantes -y que le proporcione a la compaa tanto credibilidad como
imagen de marca- y una presentacin simple y sencilla que permita a los usuarios encontrar lo
que estn buscando.
Por extensin, el trmino diseador web se refiere a la persona cuyo trabajo es disear sitios
web.

Inspiracin necesaria
Disear una pgina web es principalmente una tarea artstica que combina inventiva y
creatividad. El objetivo de esta gua es listar varios elementos clave que se usan para obtener
un diseo eficaz. De cualquier modo, tambin puede encontrarse inspiracin en una visita a los
sitios web de referencia, en especial los sitios web profesionales. Es muy interesante observar
cmo cada sitio web organiza la informacin, cmo se presentan los mens y los bloques de
informacin y, en general, determinar qu le brinda una apariencia "profesional" a un sitio web.

Organizacin de la pgina
Generalmente al disear un sitio web se crean plantillas que se usan como modelo. Las
plantillas son imgenes en "carbnico" o pginas web que representan el esquema grfico de
un modelo de pgina.
La estructura tradicional de una pgina web es la siguiente:
Un logotipo ubicado en la esquina superior izquierda. Los usuarios pueden hacer clic en la
mayora de los logotipos y volver a la pgina de inicio.

Un men localizado a la derecha o a la izquierda.

Un encabezado que contiene el nombre del sitio web, un banner de navegacin y un rea
reservada para un banner (publicitario o de otro tipo).
El cuerpo principal de la pgina que contiene la mayor parte de la informacin.
Un pie de pgina que incluye informacin til como ser, la ltima actualizacin, un vnculo
a un formulario de contacto, un vnculo al mapa del sitio, etctera.

El diseador debe definir en la plantilla qu elementos no cambian y son idnticos en cada

pgina y qu elementos varan de una pgina a la otra.

Estatuto grfico
Un "estatuto grfico" es un documento integral que detalla las reglas de presentacin para los
elementos grficos que transmiten la identidad visual de un sitio web.
El estatuto grfico define el equipamiento grfico de un sitio web, en particular los tamaos,
colores y apariencia del texto, las imgenes y botones del sitio y tambin la ubicacin que tienen
con respecto a otros objetos en la pgina.

Boceto
Un boceto es un modelo o prototipo de un sitio web que presenta los grficos y la navegacin
del sitio. Los bocetos permiten a los diseadores formalizar el diseo del sitio web y casi
siempre se usan para validar la fase de diseo antes de pasar a la fase de "realizacin".
El boceto incluye pginas estticas que representan las pginas principales del sitio web (sin
contenido), las cuales se usan para simular la navegacin. Durante la simulacin, elementos
dinmicos tales como el motor de bsqueda, pueden conducir a una pgina que contiene
resultados inventados, por ejemplo.

Tamaos de la pgina
El tamao de una pgina web depende principalmente de la definicin que tenga la pantalla del
usuario (no de su resolucin).
Teniendo en cuenta el ancho, es preferible seleccionar un tamao menor que la definicin

horizontal de la pantalla de la mayora de los visitantes para que stos no tengan que desplazar
la pantalla con la barra de desplazamiento. Una pgina angosta permite a los visitantes hojear
la informacin fcilmente para encontrar lo que les interesa.
Con respecto al largo, es aconsejable no exceder de tres a cinco veces la altura de la pantalla.
De hecho, las pginas excesivamente largas corren el riesgo de no leerse por completo y
adems toma mucho tiempo descargarlas.
Existen varias estrategias para garantizar que la pgina se vea de manera ptima en la mayora
de los equipos de los visitantes:
Elegir el ancho ms pequeo admitido por la mayora de los equipos (por ejemplo: entre
600 y 800 pxeles de ancho).
Elegir una pgina que contenga tablas invisibles con ancho variable (definido por
porcentaje).
Usar un script (por ejemplo, JavaScript) para detectar la resolucin de la pantalla del
usuario y redireccionarlo a una pgina con el ancho adecuado. Este mtodo requiere que
el visitante utilice un navegador con JavaScript activado y la creacin de tantas pginas
como anchos solicitados.

El posicionamiento de la informacin
Cmo se posiciona la informacin es un elemento importante en el diseo web. Si se tiene en
cuenta la direccin en la que los usuarios leen la informacin (en diagonal desde la esquina
superior izquierda hacia la esquina inferior derecha), la informacin que est ubicada en la parte
superior de la pgina tendr ms probabilidades de ser leda por los usuarios de Internet.

Eleccin de los colores

No se recomienda usar ms de tres colores distintos en un sitio web para cumplir con el criterio
de simplicidad. Los colores deben corresponderse con los colores de la organizacin,
especialmente los del logotipo, y es recomendable que expresen una sensacin en particular.
Sin importar qu colores se elijan, debe elegirse un color dominante y usarse como el color
principal de la pgina web. Se deben elegir uno o varios colores secundarios ms brillantes y
dinmicos y usarse en proporciones menores para destacar los elementos de la pgina.
Los colores tienen un simbolismo implcito. Por este motivo, se los debe elegir en funcin de
objetivo. Los colores tienen influencia sobre el comportamiento de los individuos:
A nivel fsico (sobre el apetito, el descanso, la temperatura corporal, etctera).
A nivel emocional (sobre sensaciones de miedo, seguridad, alegra, etctera).
A nivel psicolgico (sobre la energa, la concentracin, etctera).
La tabla que sigue es una lista de los significados que se asocian caractersticamente con
colores especficos:
Color

Significados positivos

Significados
negativos

reas

navegacin,
nuevas
tecnologas, IT,
medicina

Azul

calma, confianza, autoridad, pacificacin,

serenidad, proteccin, seriedad,
misticismo, amabilidad, agua, cielo, paz,

fro, sueo

Violeta

delicadeza, pasin, discrecin, modestia,

religin

melancola, tristeza,
Cultura, poltica
pena, decepcin

Rosa

encanto, intimidad, feminidad, belleza

ingenuidad

diarios ntimos,
mujer

Rojo

calor, fuerza, coraje, dinamismo, triunfo,

amor, entusiasmo

violencia, rabia,
peligro, urgencia,
restriccin, sangre,
infierno

lujo, moda,
deportes,
marketing, medios

Naranja

tibieza, bienestar, virtud, felicidad, riqueza,

fuego, advertencia
placer, ctricos, aroma, energa, vitalidad

luz, alegra, sol, vida, potencia, dignidad,

Amarillo
oro, riqueza, inmortalidad

engao, egosmo,
celos, soberbia,
advertencia

entretenimiento,
deportes, viajes
turismo

Verde

naturaleza, vida vegetal, ayuda, equilibrio,

pacificacin, descanso, confianza,
tolerancia, esperanza, orgullo, juventud,
caridad

Marrn

calma, filosofa, campo

Blanco

pureza, inocencia, nieve, pulcritud,

frescura, riqueza

modas, noticias

neutralidad, respeto

diseo,
asociaciones,
organizaciones
sin fines de lucro

Gris

Negro

simpleza, lujo, noche

descubrimientos,
naturaleza, viajes,
educacin
suciedad

muerte, oscuridad,
tristeza, monotona

medio ambiente

cine, arte,
fotografa,
restriccin

La composicin de colores tambin tiene influencia sobre cmo se perciben los volmenes. La
composicin de colores puede dar una sensacin de bienestar, tanto en una casa
hermosamente decorada como en un sitio web.
El crculo cromtico es una herramienta til para comprender cmo interactan los colores. Es
una representacin de los colores en forma circular. Incluye los siguientes colores:
Los colores primarios (rojo, azul, verde) o "puros", que no pueden obtenerse mezclando
otros colores.
Los colores secundarios (cian, magenta, amarillo), que se obtienen al mezclar en partes
iguales dos colores adyacentes. Los colores secundarios son diametralmente opuestos a

sus colores complementarios (sustractivos) en el crculo cromtico.

Los colores terciarios, que se obtienen al mezclar un color primario con uno secundario.
Los colores tambin se dividen en "clidos" (tonos que se acercan al rojo) y "fros" (tonos ms
prximos al azul).

Existen leyes universales que dominan la armona entre los colores y que responden a las
propiedades fsicas del ojo. Cuando el ojo ve un color, crea automticamente un filtro para el
color complementario a su alrededor. Esto se llama "contraste simultneo". Por eso, la forma en
que se percibe un color depende de los colores que lo rodean. As, el amarillo se ver ms
anaranjado al lado de un azul y el azul se ver ms prpura. El azul al lado de el rojo se ver
ms verdoso, etctera.
Adems, los colores lindantes en el diagrama cromtico crean una sensacin de equilibrio para
el ojo debido a la ausencia de contraste; esto es lo que se llama "armona de colores".
A grandes rasgos, existen dos maneras de elegir colores que armonicen:
Seleccionar matices del mismo color o colores dentro de la misma gama con tonalidades
similares.
Mezclar colores complementarios (clidos y fros), o sea, colores que estn lejos unos de
otros dentro del crculo cromtico. Cuando se elijan dos colores, estos deben ser
diametralmente opuestos, complementarios; para tres colores, los colores seleccionados
deben estar ubicados en un tringulo equiltero, etctera.
Para finalizar, en trminos generales, los objetos de colores clidos perecern ms grandes que
aquellos de colores fros.

Seleccin de imgenes
Las imgenes sirven para darle vitalidad y hacer ms alegre un sitio web. Tomando eso en
cuenta, imgenes mal utilizadas pueden perturbar la comodidad visual como tambin la
descarga de una pgina.
Los webmaster principiantes gustan de vitalizar sus sitios web con divertidas imgenes
animadas encontradas en la Web. Esto se debe evitar al mximo porque dichas imgenes

pueden molestar a los lectores y provocar que el sitio web transmita una sensacin de poco
profesionalismo.

Colores de fondo
La correcta eleccin de los colores de fondo es vital ya que un fondo mal elegido puede dificultar
la lectura. Es esencial elegir un contraste apropiado entre el color de primer plano y el color de
fondo dominante. Es por esto que se aconseja no elegir un fondo con grficos, porque puede
obstaculizar la lectura y transmitir una sensacin general de amateurismo. Generalmente, el
color de fondo debe ser algo plido.

Tipografa
Se recomienda no usar ms de dos tipos de fuente en un sitio web. Las fuentes estilizadas se
deben usar con moderacin (por ejemplo, para un ttulo) y para la mayor parte del sitio web
conviene utilizar una fuente clsica (arial, verdana, helvtica, etctera).
En los textos impresos tradicionales, las fuentes con serifas (serif), o pequeos adornos, suelen
facilitar la lectura ya que las serifas ayudan a los lectores a seguir el texto.
Pero no se recomienda usar serifas en Internet porque, dependiendo de la definicin de la
pantalla del usuario, pueden deformarse y parecer garabatos que obstaculizan la lectura. Por lo
tanto, es una opcin ms adecuada usar fuentes de palo seco o sin serifas (sans-serif) ms
redondeadas.
Por ltimo, tenga en cuenta que con las fuentes no estndar se corre el riesgo de que no se
visualicen correctamente en algunas pantallas. Si se desea crear ttulos con este tipo de fuente y
para evitar la limitacin mencionada antes, se pueden crear imgenes transparentes que
contengan el texto.

Smbolos grficos
Se recomienda usar pictogramas e conos para establecer signos visuales. De cualquier
manera, se debe tener cuidado al elegir smbolos porque los usuarios pueden malinterpretarlos,
en especial si se trata de sitios web internacionales. Estos son los pictogramas que ms se
usan:
Una lupa simboliza caractersticamente la funcin de bsqueda.
Un sobre representa la opcin de contactar al webmaster a travs del correo electrnico.
Un signo de interrogacin simboliza la ayuda en lnea
Una casa representa el vnculo a la pgina de inicio.
Una bandera simboliza el idioma de la pgina actual o la posibilidad de cambiarla a otro
idioma.
Webmastering - Webdesign Webmastering - Webdesign Webmastering - Webdesign
Webmastering - Webdesign Webmastering - Webdesign
Este documento intitulado Webmastering - Diseo web de Kioskea (es.kioskea.net) esta puesto a diposicin bajo

la licencia Creative Commons. Puede copiar, modificar bajo las condiciones puestas por la licencia, siempre que esta
nota sea visible.