Metodología de diseño web - Unidad 3

Diseño
El diseño, sin importar el modelo de desarrollo que se utilice, comienza una vez que se han
analizado y modelado los requerimientos. Es la última acción de la ingeniería del software
dentro de la actividad de modelado y prepara para la etapa de construcción.
“Definir el diseño web es muy difícil. Para algunos, el diseño se centra en la apariencia visual y
la sensación de un sitio Web. Para otros, el diseño web trata sobre la estructuración de la
información y la navegación a través de un espacio de documentos. Otros podrían considerar
el diseño principalmente sobre la tecnología utilizada para crear aplicaciones web interactivas.
En realidad, el diseño web incluye todas estas cosas y tal vez más” (Pressman).
El diseño crea una representación o modelo proporcionando detalles sobre distintos aspectos
del software (arquitectura, interfaces y componentes) que se necesitan para la
implementación.
1. Diseño de Aplicaciones web
Muchos desarrolladores web afirman que la inmediatez y la volatilidad de una aplicación web
no justifica un diseño formal, sino que se lleva a cabo un diseño ad hoc. Esto podría ser para
una aplicación web sencilla, pero cuando el contenido y las funcionalidades son complejas, el
tamaño de la aplicación web es considerable, y además si el éxito de la aplicación influye
directamente en el éxito del negocio, el diseño no puede tomarse a la ligera.
Un principio clave es “usted debe comprender bien el problema antes de intentar diseñar una
solución” (Pressman).
¿Y dónde se detiene el diseño? La respuesta a esta pregunta parece fácil: el diseño se detiene
cuando comienza la construcción (por ejemplo, la codificación HTML). Pero hay dos problemas
con esta respuesta simplista. Lo primero es que a menudo la distinción entre diseño y
construcción es borrosa. Muchos aspectos del diseño se identifican a través de prototipos que
se convierten en la base de la construcción. En segundo lugar, incluso el mejor diseñador no
puede prever cada contingencia que se encuentra durante la actividad de construcción.
Algunos problemas de construcción requieren un nuevo diseño y, como consecuencia, el
diseño continúa también en la actividad de construcción. Por lo tanto, el fin del diseño
dependerá de distintos factores.
El diseño de aplicaciones web involucra actividades técnicas y no técnicas que incluye:
 Establecer la vista y sensación de la aplicación web creando la distribución estética de
la interfaz de usuario.
 Desarrollo de contenidos.
 Planear la navegación en la aplicación.
 Definir la estructura arquitectónica general.

En el diseño de las aplicaciones web participan ingenieros web, diseñadores gráficos,

desarrolladores de contenidos, analistas, programadores, y otros.

1
Metas del diseño

 Simplicidad: Todo con moderación. El contenido debe ser informativo, pero conciso,
utilizando un medio apropiado. La estética debe ser agradable, pero no abrumadora.
La navegación debe ser directa e intuitiva para el usuario. Las funciones deben ser
fáciles de usar y de entender. En síntesis, se deben lograr los objetivos de la aplicación
web de la manera más sencilla posible.
 Apariencia visual: Las aplicaciones web son visuales, dinámicas y estéticas. La belleza
está en el ojo del observador, pero muchas de las características del diseño aumentan
el atractivo visual.
 Consistencia: El contenido debe ser congruente en cuanto a formato y tipografía del
texto, imágenes coherentes en su aspecto, color y estilo; la estética en todas las partes
de la aplicación y los mecanismos de navegación.
 Identidad: La estética, la interfaz y el diseño de navegación de una aplicación web
deben ser consistentes con el dominio de la aplicación para la cual se va a construir.
 Robustez: El usuario espera contenido y funciones robustas que sean relevantes para
sus necesidades.
 Navegabilidad: Debe ser simple y consistente, diseñada de modo que sea intuitiva y
predecible. Es importante colocar vínculos hacia el contenido o funcionalidades en
lugares predecibles de la página (parte superior o inferior).
 Compatibilidad: Una web se utilizará en una diversidad de ambientes y se debe diseñar
para que sea compatible con cada uno de ellos.

2. 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, Association for Computer Machinery
SIGCHI, Special Interest Group on Computer Human Interaction

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.
Debemos tener en cuenta que cada día aumenta el número de personas que utilizan una
computadora, que estas personas se enfrentan a la interacción con ella con diferentes grados
de preparación y con distintas expectativas.
Para un diseñador web, es muy importante la labor que se hace en el marco de la IPO, ya que
las investigaciones en esta disciplina contribuyen a mejorar día a día la manera de
interaccionar con los sistemas informáticos.

3. Diseño de Interacción
El diseño de la interacción lo constituye el diseño de interfaz y el diseño estético.

2
Prácticamente todas las aplicaciones web tienen un componente interactivo fuerte, de ello se
deduce que el diseño de la interacción es fundamental para la aceptación del usuario y para
el éxito de la propia aplicación web.
Las actividades a llevar a cabo se centran en las problemáticas que son importantes para el
usuario final, que será quien utilizará la aplicación web día a día. Por lo tanto, el diseño de la
interacción para aplicaciones web comienza con un examen cuidadoso del usuario final.
Cada categoría de usuario puede tener necesidades sutilmente diferentes, puede querer
interactuar con la aplicación web de diferentes maneras y puede requerir funcionalidades y
contenidos diferentes.
Los usuarios
De acuerdo al tipo de sistema web, se pueden identificar distintos grupos de usuarios:

 Los sistemas web públicos para usuarios en general.

 Los sistemas web públicos, pero con usuarios registrados.
 Los sistemas web privados, donde los usuarios pertenecen al mismo ámbito privado.
Como se ha mencionado anteriormente, el diseño de la interacción debe comenzar por
conocer las características de los usuarios. Se pueden conocer los usuarios a través de
entrevistas directa, o del personal de soporte ya que suelen ser la fuente de información sobre
qué funciona y qué no, qué les gusta y qué no les gusta a los usuarios, qué funciones generan
preguntas y qué funciones son fáciles de usar.
Algunos cuestionamientos que ayudan a conocer las características de los usuarios son:

 ¿Los usuarios son profesionales capacitados, técnicos, empleados administrativos o de

manufactura? ¿Qué nivel de educación formal tiene el usuario promedio?
 ¿Los usuarios son capaces de aprender a través de materiales escritos, o han
expresado un deseo de capacitación en el aula con profesores?
 ¿Qué dominio tienen de la computadora? ¿Son los usuarios mecanógrafos expertos o
teclado-fóbicos?
 ¿Cuál es el rango de edad de la comunidad de usuarios?
 ¿Los usuarios estarán representados predominantemente por un género?
 ¿Los usuarios son expertos en el tema que trata el sistema?
 ¿Cuál es la lengua hablada principal entre los usuarios? ¿Qué lenguaje de dominio
específico se usa?
También es importante conocer cómo será la relación del usuario con el sistema web, algunos
cuestionamientos para conocer esto pueden ser:

 ¿Cuáles son las consecuencias si un usuario comete un error al utilizar el sistema?

 ¿El usuario realiza su trabajo con el sistema web?
 ¿Los usuarios trabajan horas normales de oficina o trabajan hasta que el trabajo está
terminado?
 ¿Cómo se compensa a los usuarios por el trabajo que realizan?
 ¿Es la aplicación web una parte integral del trabajo que realizan los usuarios o se
utilizará solo ocasionalmente?

3
3.1. Diseño de la interfaz
El diseño de la interfaz describe la estructura y organización de la interfaz de usuario.

Mira a tu alrededor, estamos rodeados de interfaces. El botón que te

permite llamar al ascensor, la llave que abre la puerta de tu casa. Todas esas
cosas son interfaces porque son el medio con el que interactuamos para
conseguir un objetivo. Nuestro objetivo no es pulsar el botón o girar la llave,
el objetivo es llegar a un piso concreto o abrir la puerta.

Las interfaces pueden definirse como:

Son las partes del sistema con las que el usuario entra en contacto física y cognitivamente
[Lorés et al, 2001].

La interfaz de usuario crea un medio eficaz de comunicación entre la persona y la

computadora. Permite a los usuarios acceder a los contenidos, realizar tareas, comprender las
funcionalidades y navegar por las diferentes páginas de una aplicación web.
Una interfaz de usuario debe exhibir las siguientes características: fácil de usar, fácil de
aprender, fácil de navegar, intuitiva, consistente, eficiente, libre de errores, y funcional.
En resumen, debe proporcionar al usuario final una experiencia satisfactoria y gratificante.
Una página web puede contar con los mejores contenidos, pero fracasará si su interfaz no
permite a los usuarios acceder a ellos de forma rápida y cómoda. Por el contrario, una página
web cuyos contenidos sean de menor calidad (sin que éstos sean malos, por supuesto), pero
cuya interfaz permite a sus usuarios navegar de forma sencilla, acceder de forma inmediata al
contenido que desean e interactuar de forma fluida, tendrá un mayor éxito.
Objetivos de la interfaz
a. Establecer una ventana congruente entre el contenido y las funcionalidades que
brinda.
b. Guiar al usuario a través de las interacciones con la aplicación web.
c. Organizar las opciones de navegación y contenido disponibles para el usuario.

Bloques de la interfaz web

Las interfaces se conforman de un conjunto de componentes gráficos y funcionales, también
llamados grandes bloques de elementos de información, que permiten una comunicación
efectiva con cualquier usuario.
a. Cabecera o encabezado
Zona de la interfaz web situada en la parte superior, generalmente del mismo ancho
que la página y altura variable. Normalmente incluye el logotipo del propietario,
acompañado de un texto identificador y otros elementos, lo que permite la
identificación de la aplicación web con la empresa o marca que representa.
La cabecera no es obligatoria, pero es habitual incluirla; en este caso es común a toda
la aplicación (todas las páginas), dando así homogeneidad y coherencia.

4
b. Sistemas de navegación
Son elementos de la interfaz que permiten la navegación por la aplicación. El sistema
de navegación es un elemento muy importante para que el usuario tenga una buena
experiencia mientras usa la aplicación web. Generalmente se presentan como un
menú de opciones. Puede contener texto, gráficos o ambos, combinado con efectos
dinámicos. Un efecto común es el rollover el cual cambia el aspecto de algún
componente al situar el puntero del mouse sobre él.
El menú tipo lista o árbol, normalmente se ubica en la zona lateral izquierda, mientras
que el de pestañas se ubica de forma horizontal debajo de la cabecera. Esta es una
distribución que se ha convertido en un estándar de facto.
Si el menú tiene un número excesivo de opciones es conveniente usa submenús.

c. Cuerpo de la página
Lo que aparece en el cuerpo es el objetivo de la aplicación, lo que el usuario quiere
ver. Por lo que ocupa el mayor espacio, generalmente entre el 50% y el 85% del total.
Se ubica en el centro, debajo de la cabecera, si ésta existe.
Es habitual que contenga en la parte superior un título que resalte, ya sea por la letra
o por el color. El resto de los componentes gráficos que contenga deben respetar el
estilo general de la aplicación.

d. Pie
Se ubica en la parte inferior de la página, bajo el cuerpo. Comúnmente se usa para
mostrar enlaces a servicios particulares del sistema web, como contratación,
formulario de contacto, condiciones de uso, información de la empresa propietaria de
la aplicación web, etc.
También suele tener opciones de menú que permita al usuario continuar la
navegación, por ejemplo, en los tutoriales para avanzar a la siguiente página o para
retroceder.

e. Espacios en blanco
Son todas aquellas zonas de la interfaz en la que no hay ningún elemento. Son de
importancia en el diseño de la misma debido a que tienen como objetivo compensar
el peso visual de los elementos, crear márgenes y separaciones ente ellos,
encuadrándolos de forma adecuada, haciendo la interfaz más equilibrada, limpia y con
una estructura bien definida.
Algunas consideraciones sobre donde usar espacio en blanco son:
 Entre la cabecera y el cuerpo de la página; si no existe cabecera, entre el cuerpo
y el borde superior de la ventana.
 Entre un menú lateral y el cuerpo de la página.
 Si existen menú lateral izquierdo y menú lateral derecho, la separación de estos
con el cuerpo de la página debe ser la misma.
 Entre el menú superior y el cuerpo de la página.
 Entre el cuerpo de la página y el pie.

5
Maquetación
Por maquetación se entiende la distribución,
en el espacio disponible, de los elementos
que conforman la página web. Es decir, es
colocar las diferentes partes de una página
dentro de sus límites.
Hace unos años, la maquetación de las
páginas web se realizaba utilizando tablas
(etiquetas HTML <table>). El problema de
hacerlo así es que generaba una página muy
estructurada, con código difícil de entender,
ocasiona problemas de accesibilidad, entre
otros problemas. Actualmente la maquetación se realiza utilizando capas (etiquetas HTML
<div>), también llamadas divisiones o contenedores.
Para diseñar un sistema web, se debe comenzar por distribuir los bloques de la interfaz. Y
tener en cuenta que se debe mantener la consistencia en el diseño de todas las páginas de la
aplicación, todas o la gran mayoría deben mantener una misma estructura.
La maquetación se realiza incorporando hojas de estilo con el lenguaje CSS (Cascading Style
Sheets que quiere decir hojas de estilo en cascada), con HTML u otro; esto facilitará la tarea
de estructurar una página.

3.2. Diseño de la Estética

El diseño estético, también llamado diseño gráfico, describe la apariencia de la aplicación web.
Incluye esquemas de color, diseño geométrico, tamaño del texto, fuente, uso de gráficos y
decisiones relacionadas con la estética.
Percepción visual
Una de las primeras impresiones que causará la interfaz de usuario será visual. En función del
color, la tipografía, el tamaño y la ubicación que se le dé a cada uno de los componentes de la
interfaz influirá en el usuario de la web. Se debe buscar un equilibrio entre estos componentes
que constituyen la interfaz para lograr una comunicación eficaz.

A- Color

Rueda del color

Los colores están relacionados entre sí. La rueda de color formada por 12 colores es una
importante herramienta gráfica para crear combinaciones cromáticas.

6
 Ilustración 1- Rueda del color

Clasificaciones de los colores:

1. Colores primarios, secundarios y terciarios.
a. Colores primarios: rojo, amarillo y azul, que están dispuestos en la rueda formando un
triángulo equilátero.
b. Colores secundarios: verde, púrpura y naranja. En la rueda, en el lado opuesto a cada
color primario se sitúa un color secundario. Cada uno de ellos, se consigue con la
mezcla de sus dos colores primarios cercanos (casi adyacentes). El verde viene de la
mezcla del amarillo y el azul, el púrpura viene de la mezcla del 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.
c. Colores terciarios: Se consiguen con la mezcla del color primario y del color secundario
adyacente 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.

2. Colores fríos y cálidos

a. Colores fríos: todos los colores situados en la rueda de color entre el amarillo-verdoso
y el púrpura.
b. Colores cálidos: todos los colores situados en la rueda de color entre el rojo-púrpura y
el amarillo.

3. Colores complementarios, análogos y monocromáticos

a. Los colores complementarios: son los colores que están en lados opuestos de la rueda
de color. Se utilizan para crear contraste.
b. 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.
c. Los colores monocrómáticos: son todos los tonos y matices de un mismo color.

Modelo RGB

En los entornos gráficos digitales, un color es equivalente a números ordenados de tal forma,
que al ser representados mediante algún dispositivo de salida (monitor, impresora, etc.) se
percibe como color.
El modelo de color RGB se basa en la mezcla aditiva de los colores rojo, verde y azul, con el
que es posible representar un color mediante la adición de los tres colores. Asigna un valor de

7
intensidad a cada píxel que oscile entre 0 (negro) y 255 (blanco) para cada uno de los
componentes RGB de una imagen en color.
Generalmente, la intensidad de cada componente se expresa como un número hexadecimal
del 00 al FF, por ejemplo el color rojo se representa como #FF0000, porque tiene toda la
intensidad de rojo y nada de verde y azul.
Para variar el color rojo se modificar el valor de intensidad del componente, dejando los otros
iguales, por ejemplo, #CC0000, #990000, etc.
El color es un aspecto esencial en el diseño web. Una elección inadecuada de los colores puede
ser motivo de la pérdida de visitantes de un sistema web. Aunque parezca sencillo, elegir la
combinación de colores apropiada para un diseño es una tarea difícil.

B- Tipografía
Transmitir información mediante el texto es común. Al momento de manejar fuentes se deben
consideran ciertas características relacionadas con la adecuación, con lo que se quiere
comunicar y con la legibilidad.
En una aplicación web no es recomendable usar más de tres fuentes diferentes. Pudiendo
variar el tamaño de una misma fuente para resaltar secciones interesantes del contenido y del
texto.
A la hora de elegir la tipografía más adecuada hay que tener en cuenta:
 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 de la fuente: Se debe especificar en qué casos usar la negrita, el subrayado, la
cursiva o alguna de las posibles combinaciones. Considerando que:
- 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.

 El tamaño de la fuente: Los tamaños a emplear se elegirán 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: Para el color de la fuente se selecciona 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.

8
C- Iconos
Son imágenes gráficas generalmente pequeñas, que suelen ser metáforas de acciones que se
pueden hacer, existiendo una relación entre el icono y lo que representa.
Si un usuario no es capaz de determinar el significado de un icono no se habrá conseguido el
propósito de ahorrarle tiempo en la visualización de la página. El icono debe contener la
menor cantidad de detalles, solo los imprescindibles para la comprensión de su significado.
Otro punto importante en la elección de un ícono es la estandarización, es decir, a lo que están
acostumbrados los usuarios. Un icono puede complicar la web si el usuario no está
familiarizado con lo que representa el icono. Esto se debe a que los iconos están sujetos a
interpretación individual y a veces subjetiva a la experiencia de cada persona, existiendo el
riesgo de malentenderlos. Por este motivo se recomienda no usar iconos para operaciones
críticas, sino un texto con una fuente legible o una combinación de ambos.
D- Fotos 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 la aplicación. Ahora bien, si se utilizan
inadecuadamente, producen el efecto contrario.
A la hora de emplear imágenes en la web, debemos tener en cuenta que las imágenes son
archivos que tienen un tamaño y que para visualizarlas correctamente deben descargarse
previamente.
La información que importa respecto a los recursos gráficos de este tipo es:
 Formato. El tipo de formato en el que deberán estar almacenadas las imágenes
empleadas.
 Tamaño. El tamaño de la imagen, que se establece dando las medidas de ancho y alto
en píxeles.

3.3. Principios para diseñar la interacción

1. Anticipación. Una aplicación web debe diseñarse de modo que se anticipe a las
necesidades y deseos del usuario. Debe mostrar al usuario toda la información y
herramientas necesarias para cada etapa en su trabajo, sin que éste tenga la necesidad
de recordar o buscar información o herramientas.
2. Comunicación. La interfaz debe comunicar el estado de cualquier actividad iniciada
por el usuario. La comunicación puede ser obvia (por ejemplo, un mensaje de texto) o
sutil (por ejemplo, una hoja de papel que se mueve a través de una impresora para
indicar que la impresión está en curso). La interfaz también debe comunicar el estado
del usuario (por ejemplo, la identificación del usuario) y la ubicación dentro de la
jerarquía de contenido de la aplicación web.
3. Consistencia. Los controles de navegación, los menús, los iconos y la estética debe ser
coherente en toda la aplicación web. Por ejemplo, si el texto azul subrayado implica
un enlace de navegación, el contenido nunca debe incorporar texto subrayado azul
que no implique un enlace. Además, un objeto, por ejemplo, un triángulo amarillo, que
se usa para indicar un mensaje de precaución antes de que el usuario realice una
acción en particular, no debe usarse para otros fines en la aplicación web.
4. Autonomía controlada: La interfaz debe facilitar el movimiento del usuario en la
aplicación web, pero debe hacerlo de manera que cumpla las convenciones de

9
 navegación que se han establecido para la aplicación. Por ejemplo, el acceso a
funcionalidades de la aplicación web que se controla mediante ID de usuario y
contraseña, no debe haber ningún mecanismo de navegación que permita al usuario
evitar este control.
5. Eficiencia. El diseño de la aplicación web y su interfaz debe optimizar la eficiencia del
trabajo del usuario y no la eficiencia del ingeniero web o del entorno cliente-servidor
que lo ejecuta.
6. Atención. La interfaz debe mantenerse enfocada en cualquier objetivo que los
usuarios deben lograr. El problema es que los usuarios pueden perderse en muchas
capas de información de apoyo y perder de vista el contenido original que querían en
el primer lugar.
7. La ley de Fitt. El tiempo necesario para alcanzar un objeto es función de la distancia y
del tamaño del objeto. Por esto, si una tarea de usuario define una secuencia de
selecciones o entradas estandarizadas, la primera selección o entrada debe estar
físicamente cerca de la siguiente.
8. Latencia. Se debería utilizar multitarea de manera que permita al usuario continuar
con el trabajo mientras se completa alguna operación interna (ej. Descarga). Además,
los retrasos deben ser indicados al usuario para que entienda lo que está sucediendo.
Esto puede ser a través de audio, una animación (reloj, barra de progreso), etc.
9. Fácil aprendizaje. Se debe diseñar una interfaz que requiera mínimo tiempo de
aprendizaje y de reaprendizaje. En general, la interfaz debe enfatizar un diseño sencillo
e intuitivo que organiza el contenido de forma obvia para el usuario.
10. Metáforas. Una interfaz que utiliza una metáfora de interacción es más fácil de
aprender y más fácil de usar, siempre y cuando la metáfora sea apropiada para la
aplicación y el usuario. Una metáfora debe recurrir a imágenes y conceptos de la
experiencia del usuario (ej. Carrito de compra).
11. Mantener la integridad del producto de trabajo. Es común completar un largo
formulario y perder el contenido por un error. Para evitar esto, la interfaz debe
proporcionar al usuario un mecanismo fácil para recuperar la información "perdida".
12. Legibilidad. Toda la información presentada a través de la interfaz debe ser legible
para cualquier usuario. El diseñador debe enfatizar estilos de texto legibles, tamaños
de fuente y opciones de fondo de color que mejoran el contraste.
13. Mantener el estado. Cuando sea apropiado, el estado de las interacciones del usuario
debe ser almacenado de modo tal que pueda cerrar la sesión y volver más tarde
retomando donde lo dejaron. Ej. las cookies, variables de estado, y otros mecanismos.

Pautas complementarias
a. No fuerce al usuario a leer cantidades voluminosas de texto, particularmente cuando
explica el funcionamiento de la aplicación web.
b. Organizar los contenidos con una distribución desde arriba a la izquierda, hacia abajo
a la derecha. La mayoría de los usuarios recorrerán la página como si fuera una hoja
de un libro.
c. Evite el “Bajo construcción”, provocan un vínculo innecesario que seguramente
decepcionará o frustrará a los usuarios.
d. Los usuarios prefieren no desplazarse. La información importante debe ser de
dimensiones de una ventana de navegador típica.

10
 e. Los menús de navegación y las barras de encabezado deben diseñarse de forma
consistente y estar disponibles en todas las páginas disponibles para el usuario.
f. La estética nunca debe reemplazar la funcionalidad. Por ejemplo, un botón simple
podría ser mejor opción de navegación que un icono cuya intención no está clara.
g. Las opciones de navegación deben ser obvias, incluso para el usuario casual. No debe
ser necesario que el usuario busque en la pantalla cómo enlazar a otros contenidos o
servicios.

3.4. Documentación
Los manuales o guías de estilo 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.
Está dirigida a las personas encargadas del diseño y programación de la interfaz web. Define
las pautas y normas de calidad que debe seguir la interfaz web de una determinada aplicación
web, garantizando la coherencia de la misma.
Esta guía debe recoger todos los aspectos relacionados con el diseño de la interfaz de usuario
propia de la aplicación web y, servir de ayuda eficaz en la toma de decisiones, tanto en el
proceso de diseño como en la fase posterior de mantenimiento.
Una guía de estilo incluye la información de interés relacionada con:
 Colores y tonos.
 Fuentes: formato para títulos, subtítulos, encabezado, texto principal, etc.
 Estructura: si habrá encabezado, pie de página, menú (uno o varios), ubicación de cada
menú, etc.
 Recursos multimedia: Imágenes, fotos, iconos, logotipo, videos, animaciones; la
ubicación, formato, etc.

La guía de estilos es de utilidad para todos los participantes de un proyecto web.

4. Diseño de la información
Se centra en el contenido que sustenta la aplicación web. Si el contenido no es valioso o no se
actualiza con frecuencia, no tendrá demasiado interés y generará poco tráfico.
Involucra las siguientes tareas:
• El diseño del contenido define la disposición, la estructura y el esquema de todo el
contenido que se presenta como parte de la aplicación web.
• El diseño de navegación representa el flujo de navegación entre los objetos de contenido y
las funciones de la aplicación web. Describe las formas en que el usuario localiza e interactúa
con el contenido.

4.1. Diseño de Contenidos

11
Una aplicación web puede contener distintos tipos de contenidos, texto, noticias, videos,
fotos, animaciones, contenido dinámico, y otros. Puede suceder que un mismo contenido se
presente de diferentes formas.
De cada contenido que se va a incluir en la página es necesario identificar si el contenido existe
o hay que producirlo, en cualquier caso, es preciso determinar:
 Origen del contenido: el servicio, persona o proveedor que proporciona la
información.
 Fiabilidad: definir un circuito de validación de la información con el fin de garantizar
calidad.
 Formato: definir el formato del contenido, por ejemplo, para un sitio de una
universidad se define que el plan de estudio de cada carrera debe ser un documento
pdf.
 Duración de la validez: definir durante cuánto tiempo será válido un contenido, esto
define la frecuencia de actualización.
 Modo de producción: se trata de describir los recursos (humanos, materiales, y otros)
requeridos para la producción de contenido.
 Carga de producción: consiste en cuantificar el tiempo necesario para la producción
del contenido.
 Multilingüismo: tener en cuenta si el contenido debe estar en distintos idiomas.
 Restricciones de publicación: describir posibles riesgos (falta de personal, de
hardware, de software, de información, etc.) que afecten al contenido.
Derechos
Los derechos de propiedad intelectual y de autor protegen la creatividad humana,
garantizando a los creadores que no se realicen copias no autorizadas o actos de piratería
sobre sus obras.
Una aplicación web incluye distintos recursos digitales que pueden ser creados
específicamente para la aplicación o podría usarse alguno que ya exista.
Hoy en día en la web encontramos gran cantidad de recursos digitales, pero antes de usar
alguno de ellos en una aplicación web, es necesario analizar algunos aspectos, como si se
puede utilizar libremente, si es necesario citar fuente u origen, el tipo de uso que se puede
hacer, entre otros.
Según corresponda se deberá analizar la propiedad intelectual o la licencia.
 Propiedad intelectual (Ley 11.723 en Argentina): Es la protección que le da la ley al autor
de una obra científica, literaria, artística o didáctica por su creación intelectual (incluye
Programas de computación y base de datos). Le permite al autor exponerla o reproducirla
por cualquier medio, traducirla, explotarla comercialmente o autorizar a otros a hacerlo.
También le permite impedir que cualquier persona no autorizada ejerza estos derechos.
Los derechos de autor enfatizan la relación inalienable entre el autor y su obra, conciben
al individuo-autor como la fuente de las creaciones, y por lo tanto el fin último de toda
protección legal. Las legislaciones reconocen derechos morales de los autores (además de

12
 otros) como el derecho a que se reconozca la autoría y el respeto por la integridad de la
obra (no puede ser modificada ni fragmentada sin permiso del autor).
Por otro lado, el copyright o derechos de copia regula los aspectos patrimoniales del
derecho de autor, es decir, pone el acento en los beneficios y derechos sobre la obra más
que en quien la ha realizado.

 Licencia: es el contrato entre el autor o titular de los derechos de explotación y el usuario

consumidor, para utilizar un producto cumpliendo una serie términos y condiciones
establecidas. Las licencias libres, abiertas o permisivas son aquellos ejercicios de los
derechos de autor por los cuales optan algunos creadores, que quieren reservarse sólo
“algunos derechos “, en contraposición a “todos los derechos” que caracterizan al
copyright.
Sistema de gestión de contenidos
Un sistema de gestión de contenidos (CMS por sus siglas en inglés) es una herramienta de
software que permite la creación y la actualización dinámica del sitio web.
Consiste en una interfaz que controla una o varias bases de datos donde se aloja el contenido
del sitio. El sistema permite manejar de manera independiente el contenido y el diseño.
Las páginas se generan de forma dinámica, y la aplicación interactúa con el servidor para
generar la página web, bajo petición del usuario, con el formato predefinido y el contenido
extraído de la base de datos del servidor.
4.2. Diseño de Navegación
El usuario de una aplicación web tiene como objetivo moverse dentro del espacio de
información a través de los distintos enlaces. La navegación debe ser fácil. Cuando se define
un sistema de navegación se deben tener en cuenta tres preguntas fundamentales que todo
usuario se hace: ¿Dónde he estado? ¿Dónde estoy? ¿A dónde puedo ir?
Estructuración del contenido o arquitectura del contenido
La estructura de las diferentes páginas que componen un sitio o aplicación web tiene que ver
con la arquitectura de la información y la correcta distribución de los contenidos que se
muestran para facilitar la navegación de forma intuitiva y fluida.
Los contenidos deben organizarse de forma óptima, agrupándolos según la lógica que
empleará el usuario. Existen diferentes modelos para estructurar el contenido, que a la vez
son combinables entre sí, pero es importante ponerlos en práctica con buen criterio.

13
Los modelos para estructurar el contenido son:
 Modelo o estructura secuencial (lineal): las páginas se suceden en un orden lógico. Esta
estructura es muy útil cuando se quiere que el lector (usuario) siga un camino fijo y guiado.
Se trata de una disposición ideal para la educación o la enseñanza, en el caso de ofrecer
cursos, por ejemplo. Pero también para cualquier caso en el que sea necesario que la
audiencia capte adecuadamente el significado de los acontecimientos en orden
cronológico, estableciendo una especie de línea de tiempo, como en el caso de periódicos
y revistas digitales.

Ilustración 2 -Modelo de navegación secuencial

 Modelo o estructura jerárquica: organiza las páginas en

forma de organigrama que parte de la página de inicio. Se
considera la mejor forma de organizar bloques de
información compleja, permite entender que asociación
tienen unos con otros, pudiendo establecerse esta
asociación en diferentes niveles de profundidad. Es
conveniente evitar demasiados niveles de profundidad.
Ilustración 3 - Modelo de
jerárquico

 Modelo o estructura en red: es apropiado cuando la

información que se ofrece necesita ser ampliada y se enlaza a
otras páginas con contenidos de características similares. En el
comercio electrónico se utiliza este modelo habitualmente para
mostrar productos similares o complementarios con el fin de
exhibir la variedad, evitando que el visitante se marche. La
estructura en red conlleva un estudio más minucioso de los
enlaces y los contenidos para evitar la posible confusión por Ilustración 4 - Modelo de
parte del usuario, además de la falta de criterio que puede navegación en red
suponer enlazar siempre a unas determinadas páginas y a
otras no.

Mecanismos de acceso
Cuando se diseña la navegación de una aplicación web, un aspecto importante a considerar
es que se debe evitar que el usuario se pierda en aplicación. Un usuario desorientado es
incapaz de adquirir la información necesaria o invocar la funcionalidad adecuada, además
generará en él una sensación de frustración.
La capacidad de un usuario para adquirir información fácilmente puede verse afectada a
medida que crece la complejidad y el tamaño de la información de una aplicación web. Para
evitar este problema, se debe diseñar mecanismos de acceso que lleven al usuario a la
información deseada.

14
El objetivo es ayudar a los usuarios experimentados a alcanzar sus objetivos de navegación
más rápidamente y proporcionar a los usuarios inexpertos un soporte de navegación
adicional, permitiendo a los usuarios navegar a la información requerida sin ninguna duda o
confusión. A medida que un usuario adquiere más experiencia, el diseñador puede
proporcionar un mecanismo que le permita acceder directamente a la información deseada
sin tener que atravesar una ruta de navegación larga y tediosa.
Algunos mecanismos simples son:
 Enlaces globales: Estos enlaces se proporcionan en cada página web y apuntan a
ubicaciones o funciones de la aplicación web visitadas comúnmente. Permiten a un
usuario saltar a esas ubicaciones sin tener que regresar a la página de inicio o seguir otras
rutas de navegación prescritas. Los ejemplos típicos incluyen: Inicio, Ayuda, Contacto,
Mapa del sitio, Índice, Búsqueda, Noticias, Acerca de, Registrarse e Iniciar sesión.
 Atajos: Estas son formas de evitar la ruta de navegación normal y acceder directamente a
una ubicación particular dentro del espacio de información. Un ejemplo es el uso de
submenús que permiten a los usuarios omitir páginas intermedias.
 Migas de pan: Indica las páginas a través de las cuáles se llega al lugar actual. Son útiles
para ayudar a los usuarios a ubicarse, pero las migas de pan representadas como enlaces
activos también pueden permitir a los usuarios regresar rápidamente a cualquier punto
intermedio a lo largo de la ruta de navegación entre la página de inicio y su ubicación
actual.
Las siguientes pautas pueden ayudar a los usuarios a saber dónde están y definir el contexto
de la información que están viendo:
 Etiquetado claro: Las etiquetas deben describir con precisión el destino del enlace y
pueden ser cruciales para garantizar que los usuarios entiendan a dónde llegarán al seguir
un enlace. De hecho, puede ser útil asegurar que las etiquetas no solo sean claras sino
consistentes en todo el sitio. Se puede establecer un diccionario de términos de la
aplicación web que se utilizará en todo el diseño de la aplicación web.
 Migas de pan: Siempre es bueno que el usuario sepa el camino recorrido a medida que
navega por la aplicación. Las migas de pan proporcionan una descripción de la ruta de
navegación y se incluye en cada página web.
 Identidad: Cada página web debe identificar claramente la naturaleza de la información
presentada. También podría proporcionar una indicación del contexto, el propósito de la
página web y enlaces a la página de "inicio".
Mapa del sitio
Cada página que conforma una aplicación web es accesible desde algún punto (enlace) de la
aplicación, siendo necesario representar esta estructura de enlaces que permita anticipar las
secciones en la que está dividida la aplicación y la relación entre los diferentes bloques de
contenidos. Este esquema es lo que llamamos mapa del sitio.

15
5. Diseño arquitectónico
Tal como se mencionó en la unidad 1, la mayoría de los sistemas basados en la web usan un
estilo arquitectónico en capas, más específicamente de tres capas.
Todo sistema que gestiona datos tendrá una base de datos para guardar esos datos, una parte
del sistema se encargará de procesar los datos y gestionar lo que se hace con ellos, y una
interfaz de usuario que será con la que interactúan los usuarios.
La arquitectura en tres capas lo que hace es dividir la aplicación en tres capas lógicas distintas,
cada una de ellas con un grupo de interfaces perfectamente definidas y diferenciadas, de tal
forma que cada capa solo se comunique con la inferior. Esas tres capas se denominan:
 Presentación: En esta capa se crea la interfaz del usuario. Su única función es pasarle
las acciones que realice el usuario a la capa de negocio.
 Negocio: Es donde residen las funciones que se ejecutan, se reciben las peticiones del
usuario, se procesa la información y se envían las respuestas tras el proceso. Se
denomina capa de negocio, porque es aquí donde se establecen todas las reglas que
deben cumplirse. Esta capa se comunica con la de presentación, para recibir las
solicitudes y presentar los resultados, y con la capa de acceso a datos, para solicitar al
gestor de base de datos almacenar o recuperar datos.
 Persistencia: Esta capa se encarga de guardar los datos. Será donde se gestione todo
lo relativo a la base de datos y a la creación, edición y borrado de datos de ésta.
Esta separación en capas otorga una enorme flexibilidad al diseño de la aplicación. Al hacer
que cada capa se comunique solo con su capa adyacente, facilita los cambios. Si por ejemplo
tenemos que cambiar la forma en la que se guardan los datos (el tipo de base de datos), solo
se cambiaría la capa de persistencia, no sea necesario cambiar todo el sistema
El diseño arquitectónico identifica la estructura general de la aplicación web. Permite
identificar los componentes conceptuales y la forma en que están interconectados. Asegura
que los diversos aspectos de la aplicación están debidamente integrados. Además, hace
posible que se identifiquen los componentes técnicos y las interacciones entre los
componentes que se requieren para construir la aplicación web, es decir, muestra cómo los
componentes conceptuales se corresponden con tecnologías específicas para implementar la
aplicación web.

Bibliografía
1. Pressman, Roger S. Web engineering: a practitioner's approach. Editorial McGraw-Hill.
2009.
2. Pressman, Roger S. Ingeniería de Software. Un enfoque práctico. 7 Ed. McGraw Hill,
2010.
3. Cocoles Tendero, José E. Diseño de Interfaces Web. Reditorial RA-MA. 2014.
4. Comesaña, José L. Diseño de interfaces web. Desarrollo de Aplicaciones web.
5. J. Ferrer Martínez, Desarrollo de interfaces. RA-MA Editorial, 2015.
6. Hiard, Vincent, Gestión de un proyecto web. Editorial ENI. 2016
16
Links
http://www.creativecommons.org.ar/licencias.html
https://books.google.com.ar/books?id=_IAzbehV16cC&printsec=copyright&redir_esc=y#v=o
nepage&q&f=false
https://magazine.joomla.org/es/ediciones-anteriores/octubre-2015/item/2861-uso-de-los-
colores-en-el-diseno-web
https://www.lomejordewp.com/teoria-color-diseno-web/
Guías de estilos
https://www.ionos.es/digitalguide/paginas-web/diseno-web/la-guia-de-estilo-perfecta-para-
paginas-web/
http://www.staffcreativa.pe/blog/guias-de-estilo-diseno-de-paginas-web-diez-marcas-que-
amamos/
https://www.staffdigital.pe/blog/diseno-web-necesita-guia-estilo/
http://www.uca.es/recursos/doc/Unidades/Gab_Com_Mark/465200059_19420109123.pdf

17