Agregue señales visuales a su sitio

Sep 11, 2025

Cómo

[dieciséis]

Es molesto que los usuarios del sitio web hagan clic en un enlace solo para encontrar que la página web no es de interés, perdiendo su tiempo. El uso de una imagen en el fondo de la página es una excelente manera de dar a los usuarios una indicación de qué esperar de un enlace antes de comprometerse a cargar la página. Puedes ver un gran ejemplo de esta técnica en uso en el Ivan Aivazvsky Life Site .

El uso del fondo de la página también puede ayudar a los lectores disléxicos o aquellos que hablan inglés como idioma adicional. En estos casos, puede comunicar información adicional al usuario sin sobrecargarlos con demasiado texto.

10 pasos para crear una experiencia de usuario atractiva

Al igual que con cualquier efecto que combine el texto con imágenes de fondo, asegúrese de que su texto permanezca legible en todo momento. Esto se puede lograr colocando un color semitransparente en sus enlaces de navegación. También considere la legibilidad de UX para problemas, como la ceguera de color que afecta la forma en que los usuarios pueden interpretar texto de color.

Aquí le mostraremos cómo crear una pantalla de navegación interactiva con útiles y accesible señales visuales.

Descarga los archivos para este tutorial. aquí .

The Ivan Aivazvsky life site changes the background images as you hover over links (click the image to go to the website)

01. Crea el documento HTML

Cree la plantilla de documento HTML principal, que consiste en el contenedor HTML que almacena la sección Cabeza y cuerpo.

La sección de la cabeza almacena información de descripción, como el título del documento, así como enlaces a recursos externos, es decir, CSS y JavaScript.

El cuerpo almacena el contenido del documento. Una característica significativa del cuerpo es el atributo 'tema de datos' que ha aplicado: para ser modificado por JavaScript para activar los cambios de presentación CSS.

 & lt;! DOCTYPE HTML & GT;
& lt; html & gt;
& lt; cabeza y gt;
& lt; title & gt; navegación de fondo & lt; / title & gt;
& lt; link rel = "stylesheet" tipo = "texto / css" href = "styles.csss" / & gt;
& lt; script type = "Text / Javascript" src = "code.js" & gt; & lt; / script & gt;
& lt; / cabeza y gt;
& lt; Datos del cuerpo-Tema y GT;
*** PASO 2
& lt; / body & gt;
& lt; / html & gt;

02. Añadir navegación html

El contenido de la página consiste en un contenedor de navegación que contiene enlaces. La ID de la navegación y los títulos de los enlaces infantiles serán utilizados por JavaScript para escuchar las interacciones y alterar el atributo 'tema de datos' definido como parte del recipiente del cuerpo.

 & lt; nav id = "mainnav" & gt;
& lt; a href = "#" title = "Página 1" & GT; Página 1 & LT; / A & GT;
& lt; a href = "#" title = "Página 2" & gt; página 2 & lt; / a & gt;
& lt; a href = "#" title = "Página 3" & gt; página 3 & lt; / a & gt;
& lt; / nav & gt;

03. Iniciar el archivo CSS

El contenido HTML ahora está completo, así que cree un nuevo archivo llamado 'Styles.CSS'. Este archivo almacena las reglas de formato CSS que controlan la presentación visual. Comience este archivo con reglas para presentar el documento HTML y su cuerpo aparecerá a través de la pantalla completa con un fondo blanco y un texto negro.

 HTML, CUERPO {
  bloqueo de pantalla;
  Ancho: 100%;
  Altura: 100%;
  Margen: 0;
  relleno: 0;
  Fuente-familia: Helvetica, Sans-Serif;
  Color: # 000; }

04. Establecer reglas para imágenes

Un componente importante para el efecto es el uso del atributo 'tema de datos' aplicado al cuerpo del documento. Se establece una regla para definir el comportamiento predeterminado de los datos, que usaremos para el posicionamiento de fondo y cambiar la transición.

Esto evita la necesidad de repetir estas definiciones de reglas para cada tema individual, lo que facilita la mantenimiento de sus páginas web.

 [Tema de datos] {
  Transición: Fondo 1s;
  ANTECEDENTES: Centro central sin repetición;
  Tamaño de fondo: cubierta; }

05. Diseñar el tema

El diseño de cada tema se establece utilizando el valor del atributo de tema de datos.

Para lograr el efecto deseado, estamos estableciendo una imagen de fondo diferente para cada versión del tema. El paso anterior se encarga de todas las configuraciones predeterminadas que heredan estos temas.

 [Data-Theme = "Página 1"] {
  Imagen - Imagen: URL (Image1.jpg);
}
[Data-Theme = "Página 2"] {
  Imagen - Imagen: URL (Image2.jpg);
}
[Data-Theme = "Página 3"] {
  Imagen - Imagen: URL (Image3.jpg);
}

06. Añadir un contenedor de navegación

El contenedor de navegación se utiliza para asegurarse de que los enlaces se presenten con un ancho consistente colocado en el centro de la pantalla. Se aplica un ancho del 50% y el cálculo automático utilizado para la margenización horizontal. Este enfoque proporciona una garantía de consistencia independientemente de la resolución / tamaño de la pantalla del usuario.

 #mainnav {
  bloqueo de pantalla;
  Ancho: 50%;
  Margen: 0 AUTO 0 AUTO; }

07. Enlaces de navegación de estilo

Los enlaces dentro del contenedor de navegación se mostrarán como bloques configurados para adaptarse al ancho del contenedor. Esto significa que su ancho 100% se define por el ancho del contenedor. El relleno, las fronteras y la coloración de fondo también se aplican para asegurarse de que se destacen de las imágenes de fondo.

 #mainnav a {
  bloqueo de pantalla;
  Ancho: 100%;
  Fondo: RGBA (255,255,255, .3);
  Color: # 000;
  relleno: 1em;
  MARGIN-TOP: .5EM;
  Frontera: 1px sólido; }
#mainnav a: hover {
  Fondo: RGBA (0,0,0, .5);
  Color: #fff; }

08. Link Event Eclyers

El CSS ahora está completo, así que cree un nuevo archivo llamado 'Code.js' para el JavaScript.

El efecto requiere cada vínculo dentro de la navegación para escuchar y reaccionar a un evento de mouseOver donde el usuario se detiene sobre un enlace. Este oyente aplica el valor 'Título' del enlace al atributo temático de datos del cuerpo del documento: por lo tanto, desencadenando estilos en el CSS.

Después de que la ventana de la página se haya cargado, los nodos de enlace de navegación se colocan en una matriz, sobre la cual se utiliza un bucle para aplicar el oyente de eventos.

 window.addeventlistener ("carga", función () {
  var nodos = document.queryselectorall ("# mainnav a");
  para (var i = 0; i & lt; nodes.length; i ++) {
  nodos [I] .addeventlistener ("MouseOver", Función () {
  documento.body.setattribute ("Tema de datos", esto.getAtTribute ("Título"));
  });
  }
});

Este artículo apareció originalmente en el número de diseñadores web 262. Cómpralo aquí !

Artículos relacionados:

10 tendencias de navegación del sitio web para 2017
10 pasos para crear una experiencia de usuario atractiva
Léonie Watson sobre por qué la accesibilidad debe ser una parte integral de los procesos de diseño web.

Agregue señales visuales a su sitio

01. Crea el documento HTML

02. Añadir navegación html

03. Iniciar el archivo CSS

04. Establecer reglas para imágenes

05. Diseñar el tema

06. Añadir un contenedor de navegación

07. Enlaces de navegación de estilo

08. Link Event Eclyers

Cómo - Artículos más populares

17 consejos para dibujar caras manga

Una guía para la visión en la nube de Google

Cómo crear una pintura al óleo digital usando Artrage

Crea un diseño sensible con la cuadrícula CSS

Crea efectos de ondulación con Pixijs

Cómo pintar miniaturas deliciosas

Crea mejores animaciones de caracteres en maya

Cómo hacer deliciosas texturas con lápices

Categorías