Anda di halaman 1dari 16

PAUTAS PARA EL DISEO WEB

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,
encontrarse

inspiracin

profesionales.

en

una

visita

tambin puede
los

sitios

web

PAUTAS PARA EL DISEO 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

PAUTAS PARA EL DISEO WEB


ORGANIZACIN DE LA PGINA

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.

PAUTAS PARA EL DISEO WEB


ESTATUTO GRAFICO

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
BOCETO del sitio y tambin la ubicacin que tienen con respecto a otros
objetos en la pgina.
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.

PAUTAS PARA EL DISEO WEB


TAMAO DE LA PANTALLA

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.

PAUTAS PARA EL DISEO WEB


TAMAO DE LA PANTALLA
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
POSICIONAMIENTO
LA INFORMACION
como anchosDE
solicitados.

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.

PAUTAS PARA EL DISEO WEB


ELECCION 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
lostienen
elementos
de la pgina.
Los
colores
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,
La composicin de colores puede dar una sensacin de bienestar,
etctera).
tanto en (sobre
una casa
hermosamente
decorada
como en un sitio web.
A nivel psicolgico
la energa,
la concentracin,
etctera).

PAUTAS PARA EL DISEO WEB

PAUTAS PARA EL DISEO WEB

PAUTAS PARA EL DISEO WEB


EL CIRCULO CROMATICO
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).

PAUTAS PARA EL DISEO WEB


EL CIRCULO CROMATICO

PAUTAS PARA EL DISEO WEB


EL CIRCULO CROMATICO

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.
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".

PAUTAS PARA EL DISEO WEB


EL CIRCULO CROMATICO

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.

PAUTAS PARA EL DISEO WEB


SELECCIN DE IMAGENES

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
La correcta eleccin de los colores de fondo es vital
sensacin de poco profesionalismo.
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
COLORES 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.

PAUTAS PARA EL DISEO WEB


TIPOGRAFIA

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.

PAUTAS PARA EL DISEO WEB


PICTOGRAMAS

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.