Adicionar sugestões visuais ao seu site

Sep 16, 2025
Como

É irritante para os usuários do site clicar em um link apenas para descobrir que a página da Web não é de interesse, desperdiçando seu tempo. Usar uma imagem na página Plano de fundo é uma ótima maneira de dar aos usuários uma indicação do que esperar de um link antes de se comprometer com o carregamento da página. Você pode ver um ótimo exemplo desta técnica em uso no Ivan Aivazvsky Life Site .

Usar o plano de fundo da página também pode ajudar os leitores disléxicos ou aqueles que falam inglês como uma linguagem adicional. Nesses casos, você pode comunicar informações adicionais para o usuário sem sobrecarregar-lhes com muito texto.

  • 10 passos para criar uma experiência de usuário envolvente

Como com qualquer efeito que combina texto com imagens de fundo, certifique-se de que seu texto permaneça legível em todos os momentos. Isso pode ser alcançado colocando uma cor semi-transparente em seus links de navegação. Considere também a legibilidade da UX para questões como a daltonismo que afetam como os usuários são capazes de interpretar o texto colorido.

Aqui vamos mostrar como criar uma exibição de navegação interativa com útil e acessível pistas visuais.

Baixe os arquivos para este tutorial aqui .

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

O site de vida Ivan Aivazvsky altera as imagens de plano de fundo enquanto você passam por links (clique na imagem para ir ao site)

01. Crie o documento HTML

Crie o modelo de documento HTML principal, que consiste no contêiner HTML armazenando a seção de cabeça e corpo.

A seção principal armazena informações de descrição como o título do documento, bem como links para recursos externos - ou seja, CSS e JavaScript.

O corpo armazena o conteúdo do documento. Uma característica significativa do corpo é o atributo 'Data-Theme', aplicou - a ser modificado por JavaScript para acionar as alterações de apresentação CSS. 

 & lt;! Doctype html & gt;
& lt; html & gt;
& lt; head & gt;
& lt; title & gt; fundo de navegação & lt; / title & gt;
& lt; link rel = "Stylesheet" tipo = "texto / css" href = "styles.css" / & gt;
& lt; script type = "texto / javascript" src = "code.js" & gt; & lt; / script & gt;
& lt; / head & gt;
& lt; theme-tema do corpo & gt;
*** PASSO 2
& lt; / corpo & gt;
& lt; / html & gt;

02. Adicionar navegação HTML

O conteúdo da página consiste em um contêiner de navegação contendo links. O ID da navegação e os títulos dos links filhos serão usados ​​pelo JavaScript para ouvir interações e alterar o atributo 'Data-Theme' definido como parte do contêiner do corpo. 

 & 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; / a & gt;
& lt; a href = "#" title = "página 3" & gt; página 3 & lt; / a & gt;
& lt; / NAV & GT;

03. Inicie o arquivo CSS

O conteúdo HTML agora é concluído, então crie um novo arquivo chamado 'Styles.css'. Este arquivo armazena as regras de formatação CSS que controlam a apresentação visual. Inicie este arquivo com regras para apresentar o documento HTML e seu corpo aparecer em toda a tela usando um fundo branco e texto preto. 

 HTML, corpo {
  Exibir: bloco;
  Largura: 100%;
  Altura: 100%;
  Margem: 0;
  preenchimento: 0;
  Font-família: Helvetica, Sans Serif;
  cor: # 000; }

04. Definir regras para visuals

Um componente importante para o efeito é o uso do atributo 'Data-Theme' aplicado ao organismo. Uma regra é definida para definir o comportamento padrão dos dados - que usaremos para posicionamento de fundo e alterar a transição.

Isso evita a necessidade de repetir essas definições de regras para cada tema individual, o que facilita suas páginas da web. 

 [tema de dados] {
  Transição: Fundo 1S;
  Antecedentes: centro de centro sem repetição;
  Fundo de tamanho: capa; }

05. Projetar o tema

O design de cada tema é definido usando o valor do atributo de tema de dados.

Para alcançar o efeito desejado, estamos estabelecendo uma imagem de fundo diferente para cada versão do tema. A etapa anterior cuida de todas as configurações padrão que esses temas herdarão. 

 [Data-Theme = "Page 1"] {
  Background-Image: URL (image1.jpg);
}
[Data-Theme = "Página 2"] {
  Background-Image: URL (image2.jpg);
}
[Data-Theme = "Página 3"] {
  Background-Image: URL (image3.jpg);
}

06. Adicione um recipiente de navegação

O recipiente de navegação é usado para garantir que os links sejam apresentados com uma largura consistente colocada no meio da tela. Uma largura de 50% e o cálculo automático utilizado para a margem horizontal é aplicada. Essa abordagem fornece uma garantia de consistência, independentemente da resolução / tamanho da tela do usuário. 

 #mainnav {
  Exibir: bloco;
  Largura: 50%;
  Margem: 0 AUTO 0 AUTO; }

07. Links de navegação de estilo

Os links dentro do contêiner de navegação devem ser exibidos como blocos definidos para se adaptar à largura do contêiner. Isso significa que sua largura de 100% é definida pela largura do contêiner. Padding, fronteiras e coloração de fundo também são aplicadas para se certificar de que se destacam das imagens de fundo. 

 #mainnav um {
  Exibir: bloco;
  Largura: 100%;
  Antecedentes: RGBA (255,255,255, .3);
  cor: # 000;
  preenchimento: 1em;
  Margin-Top: .5em;
  fronteira: 1px sólido; }
#mainnav a: pairar {
  Antecedentes: RGBA (0,0,0, 0,5);
  cor: #fff; }

08. Link evento ouvintes

O CSS está agora completo, então crie um novo arquivo chamado 'code.js' para o JavaScript.

O efeito requer cada link dentro da navegação para ouvir e reagir a um evento de mouseover onde o usuário paira sobre um link. Este ouvinte aplica o valor do "título" do link para o atributo do tema de dados do corpo do documento - portanto, estilos de disparo no CSS.

Depois que a janela da página tiver sido carregada, os nós do link de navegação são colocados em uma matriz, sobre o qual um loop for usado para aplicar o ouvinte do evento. 

 janela.addeventlistener ("carregar", função () {
  var nós = document.Queryselectorall ("# mainnav A");
  para (var i = 0; i & lt; nós.length; i ++) {
  nós [i] .addeventlistener ("mouseover", função () {
  documento.body.setAttribute ("Data-Theme", este.GetAttribute ("Título"));
  });
  }
});

Este artigo apareceu originalmente no problema do Web Designer 262. Compre aqui !

Artigos relacionados:

  • 10 Tendências de navegação do site para 2017
  • 10 passos para criar uma experiência de usuário envolvente
  • Léonie Watson, por que a acessibilidade deve ser uma parte integrante dos processos de web design

Como - Artigos mais populares

Adobe XD: Como usar o recurso Auto-Animate

Como Sep 16, 2025

(Crédito da imagem: Adobe) Apesar de sua entrada tardia no jogo de prototipagem, o Adobe XD é uma das melhores e ma..

Como escrever código HTML mais rápido

Como Sep 16, 2025

(Crédito da imagem: futuro) Sites modernos requerem muito código HTML. Layouts complexos com várias diferentes vis..

Um guia para a visão de nuvem do Google

Como Sep 16, 2025

Aprendizagem de máquina. Aprendizagem profunda. Processamento de linguagem natural. Visão de computador. Automação. Reconheci..

Comece com Redux Thunk

Como Sep 16, 2025

O estado é uma grande parte de uma aplicação reagir, razão pela qual o Redux é comumente emparelhado com ele. Que os dados g..

Obtenha mais de grafite com estas dicas

Como Sep 16, 2025

Nos últimos três anos, eu tenho usado grafite como meio para ilustração, primeiro apenas com lápis mecânicos, depois nos ú..

Designer de afinidade: Como usar o PIXEL PERSONA

Como Sep 16, 2025

Affinder Designer é uma ferramenta de edição vetorial popular para Mac, Windows e Agora iPad. . O aplicativo é..

Transforme ilustrações 2D na arte 3D

Como Sep 16, 2025

Minha jornada em fazer Arte 3D. começou há alguns anos quando meu irmão me disse para tentar Zbrush. ..

Projetar um avatar jogável para um videogame

Como Sep 16, 2025

Por esta Tutorial do Photoshop. , Eu estarei criando um humano jogável, feminino Personagem de videogame...

Categorias