DIW_01 Planificación de interfaces gráficas.

La planificación de interfaces gráficas es una tarea fundamental en el diseño de interfaces Web, ya que conlleva un
conocimiento previo y una organización y documentación de las tareas a desarrollar, obteniendo un resultado final
más consistente y fácil de mantener.

1.- ELEMENTOS DEL DISEÑO.

Diseño se define como el proceso previo de configuración mental en la búsqueda de una solución en cualquier
campo. Diseñar requiere principalmente consideraciones funcionales y estéticas. Esto necesita de numerosas fases
de investigación, análisis, modelado, ajustes y adaptaciones previas a la producción definitiva del objeto.

1.1.- Percepción visual.

Percepción, es el proceso de recogida y tratamiento de la información sensorial. Consiste en recibir, a través de los
sentidos, las imágenes, sonidos, impresiones o sensaciones externas y elaborar e interpretar toda la información
recibida.

La percepción es una interpretación significativa de las sensaciones.

La percepción visual es la sensación interior de conocimiento aparente que resulta de un estímulo o

impresión luminosa registrada en nuestros ojos.

Las personas dedicadas al diseño son comunicadores visuales por lo que deben conocer al público, sus necesidades
e inquietudes para poder lograr que el mensaje visual llegue de manera correcta a los receptores del mismo.

Cuando utilizamos imágenes para construir mensajes audiovisuales, debemos tener presente que con las imágenes
sólo podemos comunicar las experiencias comunes.

Para realizar un buen diseño una persona debe comunicar las ideas y conceptos de una forma clara y directa, por
medio de los elementos gráficos.

1.2.- Elementos conceptuales: punto, línea, plano, volumen.

Los elementos conceptuales del diseño son la base del mismo, sobre ellos se asientan los demás elementos que
veremos más adelante. Cada uno tiene sus propias características que les permiten desempeñar funciones
determinadas dentro de una composición.

PUNTO. Es el resultado del primer encuentro de la punta de un lápiz, la pluma o pincel, con el papel, la tela u otro
material. El punto es concebido en la imaginación pequeño y redondo. Un punto indica posición. No tiene largo ni
ancho ni ocupa una zona del espacio. Es el principio y el fin de una línea y, es donde dos líneas se encuentran o se
cruzan.

LÍNEA. La línea no es visible por sí sola en la naturaleza. Es el resultado del movimiento de un punto que se
desplaza por una superficie. La línea tiene largo, pero no ancho, tiene posición y dirección. Está limitada por dos
puntos siendo la distancia más pequeña entre ambos. La línea delimita espacios dando lugar a las formas,
representa el perfil o el contorno de las cosas. La percepción de la línea en la naturaleza es similar a la línea
geométrica cuando la relacionamos con el borde real de una superficie. También forma los bordes de un plano.

PLANO. Es el resultado del movimiento de una línea que se desplaza en una dirección distinta a la
suya. Un plano tiene largo y ancho, pero no grosor, tiene posición y dirección. Es la porción de
superficie limitada por una línea cerrada. Define los límites extremos de un volumen.

VOLUMEN. Es el resultado del movimiento de un plano que se desplaza en una dirección distinta a la
suya. Tiene una posición en el espacio y está limitado por planos. En un diseño bidimensional, el
volumen es ilusorio.

1
1.3.- Elementos visuales: forma, medida, color, textura.
Los elementos visuales son la parte más importante de un diseño, porque son lo que realmente vemos.

FORMA. Identificamos lo que percibimos porque lo que vemos posee una forma. Una forma se define como un área
que se destaca del espacio que la rodea debido a un límite definido explícita o implícitamente.

MEDIDA. Todas las formas tienen un volumen o una dimensión. El tamaño de las formas se puede establecer de
forma relativa, por comparación de unas con otras, pudiendo decir así que una forma es más grande o más pequeña
que otra, pero, en cualquier caso, es físicamente medible.

COLOR. Todo lo que existe en la naturaleza tiene color. Las cosas que vemos no sólo se diferencian entre sí por su
forma y tamaño, sino también por su colorido. El color y, el contraste de color en particular, se utiliza también para
llamar la atención sobre una parte determinada de la imagen.

TEXTURA. Es la característica visual o táctil de todas las superficies. El material con el que se hacen los objetos
aporta a su superficie una textura determinada con unas determinadas características de rugosidad, suavidad,
aspereza, homogeneidad, etcétera.

1.4.- Elementos de relación: dirección, posición, espacio, gravedad.

Algunos elementos, como la dirección y la posición, pueden ser percibidos y otros, como el espacio y la gravedad,
pueden ser sentidos.

DIRECCIÓN. La dirección de una forma depende de su relación con el observador, con el marco que la contiene o
con otras formas cercanas con las cuales se compara.

POSICIÓN. La posición de una forma es juzgada por su relación respecto al cuadro que la contiene o a la estructura
global del diseño.

ESPACIO. Las formas por muy pequeñas que sean, ocupan un espacio. Así, el espacio puede estar ocupado o
vacío. Se puede utilizar la perspectiva para organizar y sugerir el espacio creando la ilusión de profundidad. Se
pueden superponer objetos de modo que el observador percibe como más cercano el objeto que está delante de los
demás. También podemos lograr la profundidad dentro del campo visual utilizando el contraste y la variación de
tamaño en las formas.

GRAVEDAD. La sensación de gravedad no es visual, es psicológica. Tenemos tendencia a aplicar cualidades tales
como pesadez o ligereza, estabilidad o inestabilidad, tanto a las formas individuales como a los grupos de formas.

1.5.- Elementos prácticos: representación, significado, función.

Los elementos prácticos del diseño permanecen ocultos en el contenido y en la trascendencia del diseño.

REPRESENTACIÓN. Una forma es representativa cuando se deriva de la naturaleza o del mundo hecho por el ser
humano. La representación puede ser realista, estilizada o medio abstracta. Una fotografía de un monumento es una
representación realista del mismo. Un dibujo de los perfiles de dicho monumento es una representación estilizada del
monumento y un dibujo naif del monumento es una representación semiabstracta.

SIGNIFICADO. Es la imagen conceptual que se representa en nuestra mente cuando el diseño transporta un
mensaje visual. Cada receptor del mensaje le dará una interpretación, un significado distinto, según sean sus
conocimientos y experiencias previas.

FUNCIÓN. La función se hace presente cuando un diseño debe servir a un determinado propósito.

2.- INTERFACES WEB.

Todas y cada una de las páginas web son diseñadas con alguna finalidad. Lograr nuestro objetivo dependerá en gran
medida del diseño que hagamos.

2
2.1.- Interacción persona-ordenador.
La Interacción Persona-Ordenador (IPO) es la disciplina relacionada con el diseño, evaluación e implementación de
sistemas informáticos interactivos para ser usados por personas, y con el estudio de los fenómenos más importantes
que están relacionados.
ACM es la primera sociedad científica y educativa acerca de la Computación.
SIGCHI es uno de los grupos de interés de la ACM, interesados en la interacción hombre-ordenador.

La IPO (Interacción Persona-Ordenador) es la disciplina que estudia el intercambio de información entre las
personas y los ordenadores. Cuando hay una buena comunicación entre el usuario y el ordenador el intercambio de
información es más eficiente, se reducen los errores y aumenta la satisfacción del usuario.

Hoy en día, la mayor parte de los sistemas informáticos son sistemas interactivos y su éxito o fracaso depende, en
gran medida, de la interfaz persona-ordenador. Por este motivo la interfaz tiene que estar diseñada pensando en las
necesidades del usuario.

2.2.- Diseño de una interfaz Web. Objetivos.

Una interfaz Web es un sistema gráfico que permite acceder a los usuarios a los contenidos de la Web mediante el
uso de elementos gráficos, los cuales son conocidos por la mayor parte de los usuarios que acceden a nuestra
página.

El objetivo principal en el diseño de una interfaz Web es que sus potenciales usuarios pueden acceder a todos sus
contenidos de la forma más rápida y sencilla posible.

Para que un diseño Web sea efectivo debemos diseñar una interfaz que cubra todos nuestros objetivos. Este diseño
debe lograr que los usuarios de nuestro sitio puedan acceder con facilidad a sus contenidos, puedan interactuar con
eficacia con todos sus componentes y, se sientan cómodos haciéndolo.

Para conseguir dicho objetivo deberemos tener en cuenta varias cosas:

 La paciencia de las personas no es ilimitada.
 El gusto, considerado como una cuestión de preferencias personales en materia de estética, varía mucho de
unas personas a otras, pero no debemos olvidar que, un diseño cuidadoso, una interfaz agradable y, un
empleo coherente de los elementos gráficos, nunca nos hará perder visitantes.
 Los enlaces que no funcionan o que, sencillamente, no conducen a la información que prometían, provocan
en el usuario una sensación de rechazo, con la consiguiente pérdida de confianza en nuestra página,
pudiendo llegar, incluso, a la determinación de no visitarla de nuevo.

2.3.- Características: usable, visual, educativa y actualizada.

Cuando diseñamos un sitio Web debemos tener en cuenta muchos detalles:
 Tenemos que tener en cuenta cómo sienten y cómo perciben los seres humanos.
 Tenemos que tener en cuenta cómo son los procesos de nuestra mente: cómo aprendemos, cómo
recordamos y cómo procesamos la información.

Hay características que son deseables en un sitio Web y otras que son imprescindibles. El determinar cuáles son
deseables y cuáles son imprescindibles para lograr nuestro objetivo dependerá en gran medida de los usuarios a los
que vaya dirigido nuestro sitio Web.

Usable es un término ampliamente utilizado en el ámbito informático. Es una traducción del término inglés “Useable”
y su significado, por analogía con el término “utilizable” sería “que se puede usar”. Una página es usable si al usuario
le resulta fácil el uso de su interfaz.

La popularidad de un sitio Web depende en gran parte del aspecto visual del mismo. Podemos decir que un
sitio Web es visual cuando las percepciones del usuario, sus opiniones acerca del sitio y, sus sentimientos y actitudes
generados mientras lo usa, son positivos. Un sitio Web debe ser atractivo para mantener la atención del usuario, pero
también debe ser coherente en el uso de los elementos gráficos.

Un sitio Web tiene la característica de ser visual cuando los elementos gráficos empleados están orientados a
conseguir los objetivos del sitio y no se han empleado como elemento decorativo.

3
Una interfaz es educativa cuando es fácil de aprender por el usuario. La facilidad de aprendizaje es una medida de la
cantidad de tiempo que necesita el usuario para conocer la interfaz a través de su uso y, también es una medida de
la cantidad de tiempo que el usuario retiene ese conocimiento sin necesidad de usar la interfaz.
Es importante actualizar periódicamente nuestro sitio Web. Podemos actualizarlo diariamente, semanalmente,
mensualmente, etcétera. Depende del tipo de Web y de los servicios que ofrezca. Pero también es importante
actualizar la interfaz modificando aquellos elementos que pueden lograr que sea aún más usable, visual y educativa.

2.4.- Componentes de una interfaz Web.

Dado que la interfaz Web es el medio de comunicación entre los usuarios que acceden a un sitio Web y todas las
páginas que forman parte del sitio, deberemos tener en cuenta los elementos que compondrán nuestra interfaz.
Todos estos elementos deberán permitir al usuario identificar la función que desempeñan de forma que pueda
acceder a todos los contenidos sin necesidad de realizar complicados razonamientos.

Son muchos los elementos de los que puede estar compuesta una interfaz Web. El número de elementos empleados
dependerá del objetivo del sitio. Los más destacados son:
 Elementos de Identificación.
Los elementos de identificación permiten al usuario saber el título de la página en la que se
encuentran y/o quién es el propietario de la misma
 Elementos de Navegación.
Los elementos de navegación permiten acceder a todos los contenidos del sitio Web
 Elementos de Contenidos.
Los elementos de contenido muestran información relevante de la página
 Elementos de Interacción.
Los elementos de interacción permiten al usuario interactuar con la página mediante la aportación de
datos.

2.4.1.- ZONA DE NAVEGACIÓN.

Los elementos de navegación son los que nos permiten acceder a todos los contenidos que se encuentran en las
diferentes páginas de un sitio Web. Si queremos que nuestra página sea usable, el usuario debe conseguir navegar
por la página sin perderse y sin tener la sensación de perderse. Para conseguirlo, el sistema de navegación debería
constar de una serie de elementos:
 Elemento de regreso a la portada.
 Menú de secciones y/o áreas de interés.
 Información sobre la ubicación del usuario dentro del sitio Web.

Es importante para el usuario tener algún elemento que le permita volver al principio sin necesidad de utilizar la
herramienta “ir hacia atrás o regresar” del navegador. Este problema suele resolverse empleando un enlace en el
logotipo de la empresa que se sitúa normalmente en parte superior izquierda de cada una de las páginas que
componen el sitio Web.

El menú de secciones y/o áreas de interés es una zona de la interfaz en la que

se detallan las secciones y/o áreas en las que está dividida la información
contenida en el sitio Web. Debe ser fácilmente localizable. Se suele ubicar en
la parte superior de cada página, debajo del logotipo. Es importante que estas
secciones y áreas estén bien identificadas mediante un texto descriptivo y/o
una imagen representativa. También es importante que mantenga la misma
posición en todas las páginas del sitio.

No debemos olvidar que, cuando el sitio Web es de gran tamaño, con muchas secciones y subsecciones, es de gran
importancia que el usuario sepa en todo momento el lugar donde se encuentra dentro del sitio. Por ello debemos
informar, en cada una de las páginas, el camino recorrido desde la página principal o portada hasta la página actual
y, lo haremos empleando una línea de texto por debajo del menú de secciones y por encima de los contenidos.
Incluso podemos aprovechar esta línea para permitir, mediante el empleo de enlaces, vueltas hacia atrás en el
camino de navegación.

2.4.2.- ZONA DE CONTENIDO E INTERACCIÓN.

El contenido es la parte esencial de una página Web. Es importante que los contenidos estén expresados en un
lenguaje claro y conciso y, presentados en un formato agradable y de fácil lectura. Además, si el sitio Web está
formado por muchas páginas, el contenido debe situarse siempre en la misma ubicación. También es importante
evitar que el usuario tenga que hacer grandes desplazamientos durante la lectura de los contenidos. Siempre es
mejor dividir el contenido en más de una página y enlazar unas con otras.

4
Cuando hablamos de zonas de interacción nos referimos a zonas en las
que el usuario participa de alguna manera. Cuando el usuario elige el
idioma en el que desea ver el sitio, cuando realiza una búsqueda de
información rellenando un formulario de búsqueda, cuando manda una
opinión o cuando firma un libro de visitas introduciendo sus datos, todos
los elementos del sitio necesarios para realizar este tipo de operaciones
forman parte de la zona de interacción.

Los elementos que permiten la interacción son muy variados y cada uno
de ellos cumple una función concreta:
 Botón. Elemento que permite al usuario realizar una acción. Se suele utilizar para su representación un
rectángulo con efecto de relieve y con un texto escrito que sirve para orientar al usuario sobre la acción que
se realizará al presionarlo. Su diseño debe mantenerse en todo el sitio Web.
 Áreas de texto. Son rectángulos en los que el usuario puede escribir. Deben ir acompañadas de una
etiqueta que describa el tipo de información que se le pide al usuario.
 Botones de opción. Son elementos excluyentes entre sí que están agrupados bajo una misma descripción.
Constan de una circunferencia acompañada de un texto descriptivo. Se identifica el que está seleccionado
porque contiene un círculo negro.
 Casillas de verificación. Al contrario de lo que sucede con los botones de opción, las casillas de verificación
no son excluyentes entre sí. El usuario puede no seleccionar ninguna, o bien, seleccionar una, algunas o
todas las casillas. Suelen ir agrupadas bajo una misma descripción y acompañadas cada una de ellas por un
texto descriptivo. Tienen forma de cuadrado que cuando se selecciona queda marcado con una uve “V” o con
una doble aspa “X”.

2.5.- Maquetación Web.

Cuando comenzamos un proyecto Web debemos pensar en el sitio Web como una obra arquitectónica y por lo tanto,
debemos realizar una maqueta del sitio Web.

Según la RAE (Real Academia Española), una maqueta es un boceto previo de la composición de un texto que se va
a publicar, usado para determinar sus características definitivas. También define un boceto como esquema o
proyecto en que se bosqueja cualquier obra.

A la hora de realizar la maquetación Web, deberemos pensar previamente:

 Cuáles son los elementos que va a contener cada una de nuestras páginas.
 Cómo irán colocados cada uno de esos elementos dentro de las páginas teniendo en cuenta siempre el
espacio disponible, es decir, la ventana del navegador.

Si hemos hablado con el cliente, tendremos los datos suficientes para realizar una serie de bocetos preliminares de lo
que será nuestro sitio Web.

Un boceto debe reflejar la interactividad y la funcionalidad del sitio Web.

Para diseñar un sitio web, debemos comenzar por hacer una distribución de los
grandes bloques de elementos de información. Una muestra de cómo suelen estar
distribuidos estos grandes bloques se muestra en la imagen, aunque no todos los
sitios web colocan estos bloques de la misma manera. Todo dependerá de la
complejidad del sitio. Lo que sí es importante tener en cuenta, es que se debe ser
consistente en el diseño de todas las páginas del sitio. Todas ellas deben mantener
una misma estructura

2.5.1.- ELEMENTOS DE ORDENACIÓN .

Cuando diseñamos un sitio Web debemos ser consistentes en la distribución de los grandes bloques en todas las
páginas del sitio y debemos tener en cuenta el espacio disponible en la ventana del navegador.

El bloque de Encabezado está situado siempre en la parte superior de cualquier página. Suele contener además de
los elementos identificativos del sitio Web: el logotipo, el nombre de la empresa, elementos de acción que permiten
cambiar el idioma de lectura, realizar búsquedas, e incluso, si el sitio es muy grande, puede contener elementos de
navegación que permanecen a la vista en todas las páginas del sitio.

5
El bloque de Encabezado se repite en todas las páginas de un sitio Web y debe permanecer visible en todas ellas
siempre que sea posible y la complejidad del sitio nos lo permita.

El bloque de Navegación es donde se coloca el sistema de navegación.

El bloque de Contenido es aquel en el que se muestran los contenidos. Los contenidos representan la meta del
usuario y la razón por la que visita nuestro sitio Web por lo que debemos prestar mucha atención al diseño de este
bloque. Debemos reservar una zona lo suficientemente grande para que el usuario pueda leer los contenidos
cómodamente, sin necesidad de realizar grandes desplazamientos. Es importantísimo evitar que el usuario tenga que
realizar desplazamientos horizontales para leer el final de cada línea.

El bloque de Pie de página está situado al final de la página y, al igual que el encabezado, se repite en todas las
páginas del sitio. Normalmente se emplea el pie como zona de navegación complementaria a la zona superior
situada en el encabezado. En ellas se repiten algunos enlaces que se suelen colocar en el encabezado como el
enlace al Mapa del sitio (que veremos en el próximo apartado) o, el enlace a la información de contacto y, además,
se colocan algunos enlaces nuevos como los enlaces a la información relativa a los derechos de autor, privacidad e
información legal.

El diseño del pie no suele estar tan elaborado como el del encabezado, ya que su importancia es menor. El usuario
tiene que ser consciente de que lo que está viendo es el pie. Con un diseño más sencillo del pie respecto al resto de
los bloques conseguimos esa percepción por parte del usuario.

2.6.- Mapa de navegación

Cuando un sitio Web es muy grande y complejo es conveniente tener un mapa del sitio que ayude a los usuarios a
encontrar lo que buscan.

El mapa del sitio proporciona a los visitantes un lugar donde buscar de forma sencilla los contenidos que le
interesan si es que no los ha encontrado ya en la página principal.

La obligación de crear un mapa del sitio es directamente proporcional a la complejidad y extensión de nuestro sitio.
Así, si nuestro sitio consta de una única página donde sólo hay enlaces a páginas ajenas al sitio, no tendremos que
poner un enlace al Mapa del sitio. Si por el contrario, nuestro sitio consta de una página principal de portada con
enlaces a secciones, que a su vez están divididas en subsecciones, sí sería conveniente crear el Mapa del sitio y
poner un enlace a él en la portada.

2.6.1.- PROTOTIPOS.
El mapa de un sitio Web va a tener una estructura que dependerá de la relación que tengan las páginas del sitio entre
sí. Esta relación puede ser de diferentes tipos:
 Lineal.
 Reticular.
 Jerárquica.
 Lineal jerárquica.

La estructura lineal es adecuada en aquellos sitios compuestos por páginas donde la lectura de las mismas es
secuencial. Su estructura es similar a la de un libro donde avanzas de página en página, pero puedes volver a la
página anterior y desde ésta a la anterior para releer algún párrafo.

La estructura reticular se emplea en aquellos sitios en los que todas sus

páginas están relacionadas entre sí. No resulta adecuado cuando el sitio está
compuesto por muchas páginas porque el usuario puede llegar a perderse.

La estructura jerárquica es la más común. Se emplea en aquellos sitios

donde existen varias secciones bien diferenciadas, pero de poca complejidad
de modo que el usuario no tiene por qué navegar de una sección a otra.

La estructura lineal jerárquica es también de las más empleadas cuando cada una de las secciones tiene un
volumen de información más elevado y conlleva una lectura secuencial del contenido de la sección. También se
emplea este método en aquellos sitios en los que sus secciones representan grados de dificultad de la información
presentada y se permite la navegación entre secciones.

6
2.7.- Detección de patrones.
La Psicología de la Gestalt estudia la forma en que nuestro cerebro decodifica la información que recibe a través de
diversas asociaciones que se producen en el momento de la percepción. Según esta teoría la mente configura, a
través de ciertas leyes, los elementos que llegan a ella a través de los canales sensoriales (percepción) o de la
memoria (pensamiento, inteligencia y resolución de problemas).

Un Patrón de Diseño es una solución a un problema concreto que se puede usar repetidamente en problemas
similares haciendo pequeñas variaciones.

Podemos distinguir dos tipos de patrones:

1. Patrones de Diseño de Software, orientados a la funcionalidad.
2. Patrones de Diseño de Interacción, orientados a la usabilidad.

La finalidad de las personas que diseñan de interfaces Web debe ser la de desarrollar unos diseños
centrados en la usabilidad, la eficiencia, la eficacia y la satisfacción del usuario. Para lograrlo, puede apoyarse
en los principios de la Gestalt como principios de organización de elementos dentro de la interfaz y aplicarlos en la
creación de los patrones de Diseño.

2.7.1.- PRINCIPIOS DE PROXIMIDAD Y DE SEMEJANZA .

Principio de proximidad
Nuestra mente tiende a agrupar los elementos en función de la distancia que hay
entre ellos. Un ejemplo de la aplicación de este principio lo puedes ver en esta
imagen, donde se han agrupado, dentro de dos rectángulos azules, aquellos
elementos que, siendo todos enlaces a otras páginas del sitio y, presentando el
mismo formato, se perciben como bloques distintos por estar sus elementos más
próximos entre sí.

La cercanía de los elementos del mismo tipo es percibida por el usuario como si
fueran una única unidad. Y, la distancia que hay entre los dos bloques, es
suficiente para que el usuario los perciba como elementos que pertenecen a
diferentes categorías de información.

Principio de semejanza
Nuestra mente tiende a agrupar aquellos elementos que son similares en su aspecto
visual: forma, color, tamaño, etcétera. Un ejemplo de la aplicación de este principio
lo puedes ver en la imagen donde se han agrupado dentro de unos rectángulos
azules aquellos elementos que, siendo todos enlaces a diferentes páginas del sitio,
son similares entre sí tanto en forma como en tamaño.

2.7.2.- PRINCIPIOS DE SIMETRÍA Y DE CONTINUIDAD.

Principio de simetría
Nuestra mente tiende a percibir como un único elemento aquellos que están
dispuestos simétricamente. Un ejemplo de la aplicación de este principio lo puedes
ver en la imagen donde se han separado mediante una línea vertical de color azul
las dos zonas simétricas. En la zona de la izquierda el texto está alineado por su
derecha, mientras que, en la zona de la derecha, el texto está alineado por su
izquierda. Desde lejos parece un único elemento centrado en la imagen.

Principio de continuidad
Nuestra mente tiende a percibir los elementos continuos, aunque estén
interrumpidos entre sí. Un ejemplo de la aplicación de este principio lo
puedes ver en la imagen donde se han separado mediante una línea
vertical de color azul la imagen central original con su hueco central, de
la imagen de lo que el usuario percibe destacando con color azul la
letra B completa y con color granate el hueco de la línea central. El
usuario percibe estos elementos unidos, aunque estén interrumpidos.
7
2.7.3.- PRINCIPIOS DE CIERRE Y DE ÁREA O TAMAÑO RELATIVO.
Principio de cierre
Nuestra mente tiende a percibir figuras completas o cerradas a partir de
contornos, incluso aunque éstos estén incompletos. Un ejemplo de la
aplicación de este principio lo puedes ver en las tres zonas enmarcadas con
un rectángulo grisáceo en la parte derecha de la imagen. La parte izquierda
se corresponde con el aspecto original.

Principio de área o tamaño relativo

Nuestra mente tiende a percibir como objeto el más pequeño de dos objetos
que se superponen, percibiendo el objeto de mayor tamaño como fondo. Un
ejemplo de la aplicación de este principio lo puedes ver en las zonas
enmarcadas mediante círculos en la parte derecha de la imagen. La
circunferencia roja representa el fondo y los círculos pequeños son los
elementos de interés. La parte izquierda de la imagen se corresponde con el
aspecto original de la página web donde se pueden ver las imágenes que
están debajo de los círculos y que se corresponden con la zona de
navegación de la página.

2.7.4.- PRINCIPIO DE FIGURA-FONDO.

Principio de figura-fondo
Nuestra mente tiende a percibir ciertos elementos como figuras, con forma y borde,
destacándolos del resto de los objetos que los envuelven (fondo). Un ejemplo de la
aplicación de principios es la imagen de la página donde podemos ver el corazón
como objeto principal situado sobre un fondo de rectángulos de colores.

2.7.5.- L EY DE SIMPLICIDAD, PREGNANCIA O BUENA FORMA.

Todos los principios vistos con anterioridad quedan recogidos en la Ley de la buena forma.

Ley de simplicidad, pregnancia o buena forma

Nuestra mente tiende a percibir las formas más simples, facilitando así su recuerdo. Es un principio de organización
de los elementos que componen una experiencia perceptiva, por el cual se reducen las ambigüedades o efectos
distorsionadores, permitiéndonos centrarnos en un objeto separándolo del entorno con facilidad.

En los sitios Web es fundamental conseguir el equilibrio de los elementos que conforman la interfaz, hasta tal
punto, que ésta logre pasar desapercibida para el usuario. Esta paradoja de buscar lo imperceptible usando principios
fundados en la percepción, nos lleva a comprender la importancia de hacer un diseño centrado en el usuario y no en
nuestros gustos personales.
Es necesario que el usuario se familiarice lo más rápido que sea posible con nuestra interfaz. Nos apoyamos en los
principios de la Gestalt en un intento de lograr nuestro objetivo. Diseñar una interfaz usable y además visual.

2.8.- El color.
Los colores están relacionados entre sí. La rueda de color formada por 12 colores
es una herramienta gráfica importante para crear combinaciones cromáticas y que
nos permite hacer distintas clasificaciones de los colores:

 Colores primarios, secundarios y terciarios.

o Hay tres colores primarios: rojo, amarillo y azul, que están
dispuestos en la rueda formando un triángulo equilátero.
o En el lado de la rueda opuesto a cada uno de los colores primarios
se sitúan los tres colores secundarios: verde, púrpura y naranja.
Cada uno de los colores secundarios se consigue con la mezcla
de sus dos colores primarios adyacentes. El verde viene de la
mezcla del amarillo y el azul, el púrpura viene de la mezcla del
8
 azul y el rojo y, el naranja viene de la mezcla del rojo y el amarillo. Los tres colores secundarios
forman también un triángulo equilátero.
o Por último, están los seis colores terciarios que son los que se consiguen con la mezcla del color
primario y del color secundario adyacentes al mismo. Así, tenemos el azul-verdoso, el amarillo-
verdoso, el amarillo-anaranjado, el rojo-anaranjado, el rojo-púrpura y el azul-púrpura.
 Colores fríos y colores cálidos.
o Son colores fríos todos los colores situados en la rueda de color entre el amarillo-verdoso y el
púrpura.
o Son colores cálidos, todos los colores situados en la rueda de color entre el rojo-púrpura y el amarillo.
 Colores complementarios, análogos y monocromáticos.
o Los colores complementarios son los colores que están en lados opuestos de la rueda de color. Se
utilizan para crear contraste.
o Los colores análogos son los colores que se encuentran juntos en la rueda de color. Se suelen usar
para crear la armonía del color.
o Los colores monocromáticos son todos los tonos y matices de un mismo color.

En el siguiente enlace se puede ver una página Web donde se puede ir comprobando la información sobre los
colores.
https://paletton.com/#uid=1000u0kllllaFw0g0qFqFg0w0aF

2.8.1.- S ISTEMA RGB.

El ojo humano percibe los colores: rojo, verde y azul y, el resto de los colores se consiguen con la adición de estos
tres colores en diferentes proporciones. El blanco se consigue con la mezcla de los tres colores puros y se considera
el negro como la ausencia de color. A estos colores se les llama colores aditivos y el ordenador se basa en este
sistema para la representación de los colores dando lugar a lo que conocemos como Modo de color RGB. RGB es
el acrónimo de los nombres de los colores rojo, verde y azul en inglés: Red, Green, Blue.

Los ordenadores emplean estos tres colores para representar cualquier color de la escala cromática. Pero ¿cómo lo
hace? El ordenador utiliza 8 bits de información para representar cada color. La escala monocromática de un color
viene dada por todas las posibles combinaciones de estos 8 bits, en total 256. Si tenemos en cuenta que tenemos
una escala de 0 a 255 para representar cada color, es decir, 256 grados de cada color y, que el resto de los colores
se consiguen mezclando estos tres ¿cuántos colores tenemos en total? Para saberlo tenemos que calcular todas las
combinaciones que existen multiplicando tres veces el número de grados de cada color: 256 x 256 x 256, lo que nos
da 16.777.216 colores.

A la hora de representar cada color utilizamos este modelo RGB y lo podemos hacer empleando tanto el sistema de
numeración decimal como el sistema de numeración hexadecimal.

2.8.2.- COLORES SEGUROS.

El color rojo siempre es y será rojo. Pero hay monitores que sólo permiten visualizar 256 colores. Hay navegadores
que poseen una paleta de sólo 216 colores conocidos en el ámbito del diseño web como colores seguros. Emplear
estos colores seguros es una forma de garantizar que nuestro sitio Web se verá del mismo modo en todos los
navegadores.
Los colores seguros son los que se forman con las combinaciones de los tres colores rojo, verde y azul pero sólo con
los valores hexadecimales: 00, 33, 66, 99, CC y FF. Son seis grados distintos de cada color y por eso hay 216
colores en total ya que 216 es el resultado de multiplicar 6 x 6 x 6.

3.- Generación de documentos y sitios Web.

Como en cualquier proyecto de software, el proceso de generación de un sitio Web pasa por unas fases. Estas fases,
que pueden ser más o menos complejas dependiendo de la envergadura del sitio, son:

Análisis. En esta fase, después de recabar la información necesaria, establecemos los requisitos que deberá cumplir
el sitio Web, su sistema de navegación y su funcionalidad, y se eligen las herramientas necesarias y los lenguajes
con los que será implementado el sitio Web. También establecemos unas pautas que todos los miembros del equipo
de diseño deberán tener en cuenta durante la generación del sitio y durante su mantenimiento. Estas pautas incluyen:
tipografía, colores, iconografía, distribución de los elementos, etcétera.

Desarrollo. En esta fase, se emplean las herramientas y lenguajes seleccionados en la fase anterior y se implementa
el sitio Web atendiendo a las pautas establecidas en la fase anterior.

9
Pruebas y Depuración. En esta fase, que se debe ir realizando de forma paralela a la fase de desarrollo, se
comprueba que todos los enlaces funcionan y que los usuarios pueden interactuar correctamente con todas las
páginas del sitio. Es importante, sobre todo en sitios de gran tamaño, ir probando que el diseño ya desarrollado es
operativo.
Documentación. Esta fase se realiza de forma paralela a las demás. Hay que documentar los requisitos establecidos
en la fase de análisis. También hay que documentar el código lo que sea necesario durante la fase de
implementación para facilitar el mantenimiento posterior. Si además creamos un código correctamente tabulado, no
sólo podremos realizar modificaciones sin depender de programas especiales de edición de sitios Web sino que,
además, nuestros visitantes podrán aprender mirando el código. Pero lo más importante en el diseño de
sitios Web es, quizás, la documentación de las pautas a seguir durante la generación del sitio Web. Estas pautas,
recogidas en una guía de estilo, servirán al equipo de diseño durante la generación y el mantenimiento del sitio.

3.1.- Guías de estilo. Elementos.

Un manual de estilo es un conjunto de normas para el diseño y la redacción de documentos, ya sea para el uso
general, o para una publicación u organización específica. Los manuales de estilo son frecuentes en el uso general y
especializado, en medios escritos, orales y gráficos. El manual de estilo se compone tanto de normas lingüísticas,
como de estilo, para que el mensaje sea más coherente, eficaz y correcto.

Los manuales de estilo de sitios Web se centran en los aspectos técnicos y visuales de la publicación, la prosa, uso
correcto del lenguaje, la gramática, la puntuación, la ortografía, pero, sobre todo, la estética. La estricta aplicación de
los reglamentos del manual de estilo proporciona uniformidad al aspecto visual de un documento.

Una guía de estilo incluye aspectos relacionados en la inclusión en la interfaz de fotografías, logos, imágenes, iconos,
los colores, los tipos de letra y, aquellos relacionados con la maquetación Web.

Una guía de estilo se hace imprescindible cuando el sitio Web es desarrollado por un grupo de personas.

3.1.1.- F OTOS Y LOGOS.

Los recursos gráficos se emplean mucho en la Web. Si se utilizan adecuadamente, pueden mejorar el aprendizaje
del usuario y añadir valor a nuestro sitio. Ahora bien, si se utilizan inadecuadamente, producen el efecto contrario.

A la hora de emplear imágenes en la Web, sólo usaremos aquellas imágenes que complementen nuestro sitio Web y
trataremos de evitar aquellas cuya única finalidad sea adornar nuestro sitio.

Una guía de estilos debe indicar al equipo de desarrollo de la interfaz los siguientes puntos:
 Formato. El tipo de formato en el que deberán estar almacenadas la imágenes o logotipos empleados.
 Tamaño. El tamaño de la imagen o logotipo que se establece dando las medidas de ancho y alto en píxeles.

Hay que tener en cuenta además, que se deben incluir todos los tamaños posibles que pueden tener las imágenes o
logotipos según su funcionalidad o el lugar de la página donde irán situados.

Todos los tamaños y formatos a emplear en las imágenes y logos del sitio deben quedar perfectamente descritos en
el documento de la guía de estilo.

3.1.2.- TIPOGRAFÍAS .
El uso de una fuente familiar al usuario aumenta la facilidad de lectura.

A la hora de elegir la tipografía más adecuada hay que tener en cuenta varias cosas:
 La fuente.
 El estilo o tipo de la fuente.
 El tamaño de la fuente.
 El color de la fuente respecto al fondo.

La fuente. No todas las fuentes se leen con la misma facilidad y no todas las fuentes se ven igual en todas las
plataformas. La fuente ARIAL es una fuente muy extendida que asegura una correcta visibilidad en todos los
tamaños y, en todas las plataformas y navegadores.

El estilo o tipo de la fuente. En la guía de estilo hay que especificar en qué casos debemos usar la negrita, el
subrayado, la cursiva o alguna de las posibles combinaciones. Hay que tener en cuenta que:

10
  El subrayado se emplea normalmente en los enlaces pudiendo dar una falsa impresión al usuario si se
emplean con otra finalidad.
 Se debe usar la negrita sólo para conseguir fijar la atención del usuario sobre un elemento, destacándolo
sobre el resto.
 No se deben utilizar diferentes características de la fuente para mostrar el énfasis de más de una o dos
palabras o una frase corta.

Tamaño de la fuente. La guía de estilo debe reflejar los tamaños a emplear según la ubicación del texto y su
finalidad. No se emplea el mismo tamaño en un texto empleado como titular de un contenido que el del propio
contenido. Así mismo, se pueden establecer diferentes tamaños según la importancia del titular.

El color de la fuente respecto al fondo. La guía de estilo debe especificar el color de la fuente en función de la
ubicación del texto y su finalidad. A la hora de elegir un color para el texto hay que tener en cuenta que:
 Se lee mejor un texto en color oscuro sobre un fondo de color claro que al revés.
 Se lee mejor un texto sobre un fondo liso que un texto sobre un fondo con una textura o con una imagen.

Conocer los tipos de fuentes y sus comportamientos en los distintos navegadores y sistemas operativos es
de gran importancia para garantizar una visualización consistente de nuestro sitio Web.

3.1.3.- COLORES.
En una guía de estilo deben figurar los colores a emplear en el sitio Web en todos los textos, fondos, e imágenes
según sea su ubicación y finalidad. La información debe suministrarse aportando los valores para el modelo RGB
tanto en hexadecimal como en decimal.

La guía de estilos debe reflejar el color de la fuente y el color del fondo sobre el que va escrita según sea su
funcionalidad.
Una serie de consejos que pueden ser útiles:

 Si vas a emplear los colores como sistema de codificación, es decir, para que el usuario haga una distinción
de la finalidad de los elementos según su color, asegúrate de que sea fácil de comprender. Un ejemplo de
esto es la imagen de la rueda de color, donde se han empleado iniciales de color azul, verde y marrón según
la clasificación a la que pertenecía cada color. Para asegurar la comprensión de estas iniciales se incluyó en
la imagen la descripción de cada clasificación utilizando los mismos colores.
 Ser consistentes en el uso de los colores. Usar un color siempre para lo mismo.
 No excederse en el uso de colores distintos.
 Utilizar combinaciones de colores que transmitan armonía.
 Utilizar correctamente el contraste de colores para destacar las partes relevantes del sitio.
 Ten en cuenta la psicología del color.

3.1.4.- ICONOGRAFÍA.
La iconografía es la aplicación práctica de los elementos prácticos del diseño. Según la Real Academia Española, un
icono es un signo que mantiene una relación de semejanza con el objeto representado.

Un icono es un pequeño gráfico en pantalla que identifica y representa a algún objeto, usualmente con algún
simbolismo gráfico, para establecer una asociación.

Un icono es una aplicación del elemento Representación porque es una forma representativa de algo del mundo
real; es una aplicación del elemento Significado porque el mensaje transmitido por el icono genera en nuestra mente
una imagen conceptual y, es una aplicación del elemento Función porque logra atraer la atención del usuario que
percibe de forma más rápida el mensaje que se intenta transmitir y, de esta forma no tiene necesidad de leer el texto
al que acompañan.
Los iconos se suelen emplear para complementar los textos de los enlaces en la página de portada. Un icono debe
contener la menor cantidad de detalle posible sin perder significado.

La elección de los iconos es muy importante, puesto que, si un usuario no es capaz de determinar su significado a
simple vista, entonces no habremos conseguido nuestro propósito de ahorrarle tiempo en la visualización de la
página.

Es importante hacer uso de iconos a los que el usuario está ya acostumbrado.

11
En la guía de estilos se especificarán los iconos a emplear en el sitio web, dónde se van a emplear y con qué
finalidad.

3.1.5.- ESTRUCTURA.
La estructura está relacionada con los apartados Maquetación web y Mapas de navegación.

En el apartado Maquetación web hablamos de la disposición de los bloques de elementos dentro del espacio de la
ventana del navegador

En el apartado Mapas de navegación hablamos de la relación existente entre las páginas a través de sus enlaces.

En una guía de estilos debe quedar reflejada no sólo la disposición de estos bloques en cada una de las páginas del
sitio, sino también el esquema de navegación que va a existir entre las diferentes páginas del sitio. Nuestra guía de
estilo deberá reflejar todos los diseños posibles indicando en todos los casos:
 El tamaño en píxeles que ocupará el encabezado y dentro de él lo que ocupará y dónde se ubicará cada uno
de sus elementos.
 El tamaño en píxeles o en porcentaje de la zona de navegación y su ubicación, así como si estará dispuesta
horizontal o verticalmente, o si estará dividida en secciones distintas y, en su caso, la ubicación de cada una
de ellas.
 Cómo se dispondrán los enlaces dentro de cada zona de navegación y su tamaño.
 El tamaño, el lugar y el formato de la zona de posicionamiento dentro de la página.
 El tamaño de la zona del contenido y su ubicación. Dónde se colocará el título y lo que ocupará dentro de la
zona de contenido.
 Si hay cuadros de contenidos secundarios, cuál va a ser su tamaño y posición y cuál será su funcionamiento.
Si estarán siempre visibles o se mostrarán al pasar el ratón por alguna zona concreta.
 El tamaño y la distribución de los elementos del pie.
 También se deberán reflejar los huecos que se quieran dejar a propósito.
 Cómo se van a mostrar los submenús de navegación, si los hubiera.

3.2.- Aplicaciones para desarrollo Web.

Herramientas para el desarrollo web

Finalidad de la herramienta Herramientas

Adobe Dreamweaver. Nvu.

Microsoft Visual Studio. Brackets.
Edición de páginas Web.
NotePad++. BlueGriffon.
Sublime Text Jetbrains Webstrom.

Creación de botones. CSS Button Creator. CSS Button Generator

Creación de barras de desplazamiento. CSS Tricks

Creación de menús. CSS Navigation Bar

Creación de foros y libros de visitas. Guestbook Generator. Phorum Script

Open Source Web Design.

Generación de plantillas. Template World.
Template Monster.

Internet Explorer. Google Chrome,

Navegadores. Mozilla Firefox. Opera
Apple Safari. otros....

3.3.- Lenguajes de marcas.

Los sitios Web están compuestos de páginas que están escritas en algún lenguaje.
12
HTML (HyperText Markup Language o Lenguaje de Marcado de Hipertexto), es el lenguaje de marcado
predominante para la elaboración de páginas web. Los documentos escritos en este lenguaje sirven para describir
tanto la estructura como el contenido de una página web.
El HTML emplea marcas o etiquetas dentro del documento para informar al navegador de lo que es presentación
dentro de un documento y lo hace, normalmente, delimitando el texto entre dos etiquetas: una de apertura y una de
cierre, y, digo normalmente, porque hay etiquetas que no tienen etiqueta de cierre. Una etiqueta se distingue del resto
porque va encerrada entre corchetes angulares (los símbolos “menor que” y “mayor que”) y tiene unas normas
sintácticas que se deben respetar si queremos que el resultado mostrado en el navegador sea el que pretendemos.
La mayoría de ellas constan de: nombre de la etiqueta y atributos de la etiqueta, aunque algunas no tienen atributos.

XML (eXtensible Markup Language o Lenguaje de Marcas eXtensible), se propone como un estándar para el
intercambio de información estructurada entre diferentes plataformas. XML no es realmente un lenguaje en particular,
es un metalenguaje extensible de etiquetas desarrollado por el World Wide Web Consortium (W3C).
A diferencia del HTML en el que los errores sintácticos no producen errores en el navegador y sólo pueden provocar
variaciones en la presentación, el XML es muy estricto en cuanto a sus normas de sintaxis.

XHTML (eXtensible Hypertext Markup Language o Lenguaje eXtensible de Marcado de Hipertexto). Es un lenguaje
que utiliza las mismas etiquetas y atributos que el HTML pero aplicando las reglas de sintaxis del XML.

3.4.- Tablas, capas, marcos.

En los comienzos del HTML, la única forma de estructurar los contenidos de una página web era empleando tablas.
Para poder agrupar estos contenidos en los bloques de encabezado, zona de navegación, contenidos y pie, había
que anidar unas tablas dentro de otras y definir los tamaños de cada bloque dándole valores, absolutos o relativos, a
la altura y anchura de cada celda. Era fácil, aunque laborioso, pero se conseguía situar exactamente cada cosa en su
sitio. Había que tener el código HTML con las tabulaciones bien colocadas para no perderse en un maremágnum de
etiquetas tr y td.

Las nuevas versiones de los navegadores incorporaron los Frames o marcos que permitían estructurar la ventana
del navegador en partes independientes entre sí, mostrando en cada una de estas partes una página HTML distinta.
La ventaja del uso de los marcos con respecto a la tabla es que se pueden dejar zonas de la ventana visibles
permanentemente y, al estar separadas las zonas según su funcionalidad resulta más fácil hacer el mantenimiento.

3.5.- Plantilla de diseño.

La reutilización de código es una técnica común que intenta ahorrar tiempo y energía, reduciendo el trabajo
redundante.

Las plantillas de diseño Web son sitios Web prediseñados que se pueden usar como base en un diseño Web y que
permiten adaptarlo a las necesidades del diseñador de forma rápida y fácil, ahorrando una gran cantidad de tiempo y
dinero.

Hoy en día, hay gran cantidad de sitios comerciales que suministran plantillas de diseño Web por muy poco dinero si
consideramos el tiempo ahorrado en el diseño. Además la mayoría te dan el alojamiento gratuito de tu
sitio Web durante el primer año.

13