Instituto Tecnolgico de Durango

Carrera: Ing. Tecnologas de la Informacin y la Comunicacin

Especialidad: Desarrollo de aplicaciones mviles
Materia: Interaccin humano computadora
Colores, tipografa y organizacin espacial para una pgina web
Facilitador: Valenzuela Martnez Carlos
Alumna: Avalos Martnez Ana Nohem
NC: 10041 183
Durango Dgo. 29/Mayo/2014

Introduccin

P

g
i
n
a
2

El siguiente trabajo nos describe un poco el diseo adecuado para una pgina
web, los puntos que se vern son:
Los colores adecuados, la tipografa estndar y la organizacin espacial de las
pginas web.
Cuando hablamos de colores adecuados nos referimos a la teora del color.
La teora del color es un grupo de reglas bsicas en la mezcla de colores para
conseguir el efecto deseado combinando colores de luz o pigmento.
La tipografa estndar son los tipos de fuentes que podemos usar para una pgina
web sin tener problemas de lectura o sin que se presenten cambios en las
diferentes plataformas de lenguajes operativos existentes.
En cuanto la organizacin espacial es como su nombre lo indica, es la forma en
que se organiza el contenido y sus espacios.



P

g
i
n
a
3

Significado de los Colores
Negro: implica elegancia, estilo, sofisticacin, poder; pero tambin misterio, negatividad y
oscuridad.
Gris: se relaciona con la inteligencia, la seguridad, la profesionalidad y la honestidad; pero
tambin con lo aburrido, lo antiguo y lo triste.
Blanco: color asociado con la pureza, la simplicidad, la inocencia y las cosas buenas y
puras.
Amarillo: con varios significados distintos, el amarillo se relaciona principalmente con la
alegra, la energa, la curiosidad y la inteligencia.
Naranja: transmite seguridad, amistad y buen estado de nimo; as como creatividad y
desparpajo.
Marrn: implica seguridad y relajacin. Es un color de la naturaleza, por lo que se
relaciona con el otoo, la durabilidad, el control
Rojo: relacionado con el amor, el deseo, el poder y la energa; pero tambin es un color
que se relaciona con el peligro.
Verde: se relaciona con el bienestar y la armona, con la naturaleza, la salud y la vida;
pero tambin con el dinero.
Azul: transmite tranquilidad, confianza, estabilidad y honor. Es un color que suele gustar
mucho a los hombres.
Lila: era el color de la realeza, por lo que se relaciona aun con la nobleza, la ambicin, el
poder, el lujo y el misterio.

Cmo elegir los colores?
A continuacin se presentamos unos pocos consejos para utilizar en nuestra web.
1. Utilice una paleta de colores que se relacione con su objetivo.
Hay que elegir los colores pensando en nuestra audiencia. Las personas de diferentes
edades tienen diferentes reacciones a los colores.
Por ejemplo las personas de cierta edad se encuentran generalmente ms confortables
en sitios web con colores ms sobrios y moderados. Los colores ms relajantes les
resultan ms atractivos.
Los jvenes, por el contrario, apreciarn los colores ms vivos y brillantes. Hacer la
distincin entre pblico adulto y joven mediante el uso de los colores apropiados para
cada categora es importante.
2. Establezca un fuerte contraste entre el fondo de una pgina y el texto.
El color del texto debe estar en contraste con el color de fondo. Esto es muy importante
porque el contenido escrito es normalmente el aspecto ms relevante de un sitio web. Un
texto de alto contraste es el ms fcil de leer, y el texto negro sobre un fondo blanco es
mejor combinacin para facilitar la lectura. Adems del blanco, otros colores efectivos de
fondo son el gris claro y el negro.

3. Elija una paleta de colores y sela en todo el sitio.

P

g
i
n
a
4

Esta es la manera de darle uniformidad y sentido de unidad a nuestro
sitio web. No use demasiados colores diferentes, con tres o cuatro es
suficiente. Todo el resto debera estar en la gama de estos colores
principales. (ideaschicago)
Como norma inicial puede asegurarse que siempre es mejor pocos
colores mejor que muchos. Como mnimo, el riesgo de estridencias es menor.
Como siguiente norma se puede afirmar que 3 colores en una misma pgina sera lo
mnimo a utilizar y, en la mayora de casos, debiera ser suficiente. Con menos de 3, las
posibilidades de que la pgina sea anodina y aburrida son muy grandes.
Color Primario: es el tono bsico de la pgina, el que la define, y el que ocupa la
gran mayora de la misma. Sera el color del atributo "background" de la pgina.
Color Secundario: es el segundo tono predominante en la pgina, aunque en
mucha menor medida que el primario. Normalmente debe acotar o resaltar reas y
debe ser bastante prximo en tono al primario.
Color Destacado: es el color que se utiliza para resaltar aspectos concretos de la
pgina. Por definicin debe contrastar mucho con los colores primario y
secundario y, por tanto, debe utilizarse con moderacin. (webusable)
Tipografa estndar para sistemas en general
Muchas veces encontramos tipografas, decimos, son muy bonitas. Pero a la hora de
usarlas en el blog/sitio web nos llevamos una decepcin. Y es que se ven distintas segn
el sistema operativo que utilicemos. (cssblog)

A continuacin se muestran distintos tipos de tipografas estndar.














P

g
i
n
a
5



Courier New






Organizacin espacial
La organizacin espacial se puede definir como la forma en que espacios se
encuentran relacionados entre s y la forma en la que el hombre la entiende.
En la Web no existe una metodologa concreta para crear hiperdocumentos o sitios web
completos. Por el contrario, existen multitud de estructuras organizativas tanto en lo visual
como en lo conceptual, que pueden provocar una gran desorientacin al usuario. Es por
eso, que a la hora de elaborar un hipertexto se deben establecer una serie de reglas para
que el sistema sea coherente (visual y cognoscitivamente), y para que no se produzca
duplicacin de informaciones o reiteracin de esfuerzos a la hora de recopilar o introducir
la informacin, y de crear la red hipertextual. Como la macroestructura comn de
informacin debe constituirse a partir de una serie de microestructuras, stas deben
construirse siguiendo unas reglas mnimas que favorezcan su articulacin en la estructura
global. Por lo tanto, las reglas deben establecer:
Los tipos de documentos que pueden entrar a formar parte del sistema
Los datos de identificacin del documento: ttulo, autor, descripcin, localizacin,
fecha de introduccin, fecha de la ltima consulta, nivel de acceso, etc.
El formato de introduccin del texto: estructuracin del texto, posicin de las
pginas, modelo grfico utilizado, etc.
El tipo de relacin entre los documentos: normas que indican qu documentos
pueden relacionarse, lugares dentro del documento en donde se deben encontrar
esas relaciones (en todo el documento o en una parte del mismo), presentacin
visual de enlaces, etc.
El acceso a los documentos: recomendaciones para el uso del hipertexto en la
bsqueda de informacin, etc.

P

g
i
n
a
6


Es importante tener en cuenta que la unidad bsica de informacin de un documento
hipertextual no es la pgina, sino la pantalla.
As pues, el diseo de la pgina y la disposicin de los elementos dentro de ella para ser
vistos en pantalla, son uno de los aspectos principales a la hora de disear el
hiperdocumento. Las pginas deben tener un esquema ordenado y legible de un vistazo.
He aqu dos ejemplos de disposicin de pgina, la imagen de la izquierda muestra una
pgina ilegible y desordenada, mientras que la imagen de la derecha, que sigue un
esquema ordenado, facilita la navegacin y comprensin del contenido.



P

g
i
n
a
7

Conclusin
Los puntos vistos anteriormente son muy importantes al momento de realizar una
pgina porque si no tomamos en cuenta estos puntos nuestra web podra llegar a
tener problemas, por ejemplo muchos tipos de tipografa cambian dependiendo el
sistema operativo, esto es un problema ya que la pgina se vera diferente
dependiendo de la plataforma en la que se observara, de igual forma hay que
pensar en forma inteligente al elegir un esquema de colores para un sitio web. Es
importante conocer a los usuarios que van acceder a nuestro sitio, ya que cada
color representa un tipo de emocin y esto podr afectar en nuestro visitante. De
la misma manera es esencial elegir colores que trabajen armoniosamente juntos,
para crear una buena impresin esttica. Por ltimo, un sitio web cuyo contenido
no puede ser ledo fcilmente debido a la falta de contraste entre el texto y el
fondo deja a los visitantes y clientes potenciales con una muy mala impresin de
nuestro negocio.


P

g
i
n
a
8

Referencias
cssblog. (s.f.). Recuperado el Mayo de 2014, de http://www.cssblog.es/16-tipografias-
estandares-para-usar-con-css/#sthash.BJMtVYeX.dpuf
ideaschicag. (s.f.). Recuperado el Mayo de 2014, de http://www.ideaschicago.com/como-
elegir-los-colores-para-un-sitio-web/#sthash.06m4CFsH.dpuf
webusable. (s.f.). Recuperado el Mayo de 2014, de
http://www.webusable.com/coloursMix.htm