Web Design: Como apresentar conteúdo de uma página Web

Ao construir seus wireframes, lembre-se que você não está limitado a uma apresentação estática de texto e gráficos. Muitas tecnologias, a partir do Flash animação para DHTML, ajudá-lo a maximizar o seu espaço de página e conteúdo presente de maneiras mais interessantes e interativas.

Indicando o texto em um wireframe

Porque você está compartilhando wireframes com clientes e membros da equipe da mesma forma, indicar todos os elementos de navegação e manchetes para as principais seções de conteúdo com texto legível para orientá-los. Todos os outros componentes de cópia pode ser indicado com o chamado gregode texto (que na verdade é o jargão Latina), que reflete a sua contagem alocados de caracteres (o número de letras, sinais de pontuação e espaços) de modo a obter uma sensação de tamanho real text-bloco.

Você pode pesquisar na web para gerador de lorem ipsum para encontrar sites que geram parágrafos do texto grego - e contagens de caracteres, mesmo específicos - que você pode copiar e colar para a direita em seus wireframes.

Trabalhando com um sistema de gerenciamento de conteúdo

UMA gerenciamento de conteúdo sistema é um site de fácil utilização ou aplicação que oferece os administradores do site o acesso seguro ao banco de dados que preenche seu site. Ao fazer login em um CMS, gerente de um site pode facilmente adicionar, remover e atualizar o conteúdo armazenado no banco de dados. A vantagem de usar um CMS para armazenar textos e gráficos é que uma vez que você definir um monte de tipos de conteúdo, como # 147 breve descrição, # 148- # Nome 147-produto, # 148- e # Imagem em miniatura 147-produto, # 148- criar instâncias desses objetos, preenchê-los com cópia real ou imagens, e em seguida, atribuí-los a uma ou mais páginas da web. Dessa forma, se você atualizar a instância no CMS, o conteúdo é atualizado automaticamente sempre que ele é usado no site. Esta estratégia separa o conteúdo da apresentação da página web para dar-lhe mais flexibilidade para futuras mudanças de design e conteúdo, tornando o site mais fácil de manter.

Se o seu site usa um sistema de gerenciamento de conteúdo, um estrategista de conteúdo trabalha em estreita colaboração com o Arquiteto de Informação (em equipes menores, isso pode ser uma ea mesma pessoa), primeiramente, identificar todos os diferentes tipos de conteúdo de um site tem e, em seguida, determinar quais os tipos de conteúdo ir em cada página.

Maximizar o seu espaço na web

A maioria das pessoas têm pequenos monitores de computador, e muitas pessoas estão navegando em sites através de telefones e dispositivos inteligentes. Se você segurar um 8-1 # 8260-2 x 11 polegadas pedaço de papel na horizontal, você está olhando para o tamanho das janelas da maioria das pessoas na World Wide Web. Depois de levar em consideração a interface do navegador com todos os seus botões no topo, favoritos abas, e os controles de rolagem, o espaço de visualização dedicado à web é reduzido a um tamanho de cartão postal, ou cerca de 800 x 600 para muitos usuários. Esta janela esquelético é a sua tela web-design.

Aqui estão algumas estratégias organizacionais e interativos para ajudá-lo a apresentar melhor o seu conteúdo neste espaço pouco wee:

• Rolar para ver o conteúdo menos importante. Você simplesmente não pode enfiar tudo na área visível - os primeiros 800 x 600 pixels da janela do navegador. Então, coloque os itens de alta prioridade dentro dessa janela inicial e itens de menor prioridade abaixo da dobra.

  Dar pistas visuais para que os usuários saibam mais coisas é abaixo da dobra por propositalmente mostrando manchetes ou os topos das imagens que levam a mais coisas abaixo. Os usuários não se importam de rolagem, apenas contanto que a página não durar para sempre. Uma boa regra é alvejar a altura total da página de duas vezes a altura visível inicial (assim 1200 pixels para uma página 800-wide-by-600-alto).

• Use o espaço horizontal também. Você pode usar tecnologias como o Flash ou HTML 5 para apresentar rolagem horizontal conteúdo ou uma # 147-carrossel # 148- de rodar conteúdo.

  

• Camada de seu conteúdo. Outra maneira de maximizar o espaço de visualização é revelar camadas de conteúdo no topo da página web como o usuário rola ou clica em alguma coisa. Você pode ocultar e mostrar camadas de conteúdo através de tecnologias como javascript, DHTML (Dynamic HTML), e Flash.

  
  Um capotamento usuário expande este módulo de conteúdo em um site da Disney para revelar mais informações.
  
  DHTML pode produzir uma # 147-enhanced # 148- menu drop-down que oferece opções organizadas quando um usuário rola sobre um item de navegação.

• Projetar uma porta giratória de conteúdo. Porque espaço da página web é um prémio, uma outra dimensão que você precisa considerar é o tempo. Se você não pode caber tudo o que você quer dentro da área visível, você pode querer pensar sobre como animar a área.

Anotar as suas wireframes

Às vezes, páginas da web contêm componentes altamente interativas que devem ser explicados nos wireframes através de anotações. anotações são simplesmente notas de margem que descrevem como elementos sobre o trabalho página, o que desencadeia a interação, e qual o conteúdo é exibido em diferentes cenários. Numerando áreas do wireframe e numeração suas notas, você pode eficientemente descrever o detalhe interação. Muitas vezes, você também precisará incluir um diagrama de inserção que mostra um estado diferente que aparece em cima de uma ação do usuário, como um rollover ou clique.