Fundamentosdowebdesign

Elementos de uma página
Web

● Títulos
● Links

● Rótulos

● Imagens

● Rodapés

● Tabelas

● Áudio

● Vídeo

● Formulários

Web
●
Deve-se especificar títulos para todas as páginas web
que se criar. Os títulos ajudam os internautas a
identificar a página, a fazer procuras mais precisas em
um banco de dados e, também a gerenciar as
informações.
●
Rodapés servem para fornecer informações
adicionais. Pode-se exibir informações sobre o autor
da página, mensagens de copyright e links para outras
páginas

Web
●
Rótulos servem para organizar a informação da sua
página web de maneira eficiente. Os rótulos ajudam
a identificar seções e tópicos nos seus documentos.
●
Já as tabelas são utilizadas, principalmente, para
organizar a apresentação das informações na
página.
●
Formulários servem para dar interatividade,
coletando informações dos usuários

Formas de Navegação
●
Navegação Linear: usada para apresentar informações que
possuem uma sequência que deve ser obedecida. Por exemplo, uma
apresentação web sobre a instalação de uma aplicação contém uma
série de passos sequenciais que o usuário deve seguir.
●
Links necessários numa navegação linear:
– Da página pricipal para os tópicos que ela contém
– Dos tópicos para a página principal
– Para a próxima página
– Para a página anterior

●
Navegação Linear – Exemplo:
http://www.ccuec.unicamp.br/treinamento_int2
004/conf_webpages_basico/pagina1.html

●
Navegação linear com alternativa: é
necessário todos os links que se usa para navegar
linearmente e de outros links que vão interligar as
páginas web alternativas. Por exemplo: uma
página que descreve a instalação de um software
em sistemas Windows e Linux, usa-se a
navegação linear para os passos em comum e
links alternativos para a instalação específica de
cada sistema.

●
Navegação Hierárquica: usada para demonstrar informações estruturadas. O webdesigner
especifica as informações gerais no topo da hierarquia e as específicas por último.
●
Fornece-se os mesmos links que usa em uma navegação linear. Na hierárquica, o link para a
próxima página está conectado ao próximo nível da hierarquia, da mesma forma como um link
para a página anterior está conectado ao nível anterior da hierarquia.
●
Deve-se restringir a apresentação web para três níveis de hierarquia, diminuindo o risco de
gerar confusão, por parte dos internautas.
●
Os internautas não podem navegar de uma página pertencente a uma categoria para outra de
categoria diferente. Por exemplo, um internauta não pode acessar uma página de animais
herbívoros quando está em uma página de carnívoros.

●
Navegação Hierárquica – Exemplo de site:
portal.mec.gov.br

●
Combinando navegações hierárquica e
linear: quando se quer deixar que os
internautas naveguem por páginas
pertencentes a outras categorias sem ter de
voltar ao índice. A combinação de navegação
linear e hierárquica permite ao internauta
navegar tanto sequencialmente quanto
hierarquicamente pela sua apresentação
web.

Técnica do Storyboarding
●
Storyboarding é a etapa em que você faz o esboço
da sua apresentação e estuda a aparência de cada
página web.
●
O storyboarding ajuda você a decidir quais tópicos
devem constar em cada página e a identificar os
links entre as páginas.

Quantidade e tamanho de
tópicos
●
No storyboarding é necessário considerar a
quantidade de tópicos e o tamanho de cada um
deles. Uma regra simples é exibir somente um tópico
por página web. Será preciso ignorar esta regra caso
se tenha um grande número de tópicos para exibir.
●
Quando há uma grande quantidade de tópicos, é
recomendável a criação de pequenos grupos
relacionados em uma única página.

Storyboarding
●
É nesta etapa que se deve determinar as diferentes
formas de navegação ou interligação das páginas.
●
Também é necessário definir os links (avançar,
voltar, subir ou descer), tanto na hierarquia quanto
para a página principal. Este é o momento para
definir outros links, para qualquer outra informação
extra que você pretenda adicionar.

Princípios de design visual

CLAREZA: refere-se a projetar páginas que são
simples e ordenadas. Para isto, é preciso
apresentar todos os elementos da página, como
textos e imagens, nos lugares certos.

Para assegurar a clareza é preciso usar uma
linguagem simples e inserir na página somente
tópicos e imagens relevantes.

Princípios de design visual

CONSISTÊNCIA é o segundo princípio do
design visual. Refere-se a estabelecer ou adotar
um estilo para apresentação web, de maneira
uniforme. Exemplo, para fazer páginas
consistentes, adicione o rodapé no mesmo local
em todas as páginas.

CONCISÃO é o terceiro princípio e se refere a
apresentar a informação necessária com o
mínimo de palavras possíveis.

Tamanho da página

Se as informações da página não couberem na tela, os
usuários podem usar a barra de rolagem para visualizar
todo o conteúdo.

Entretanto, isso faz com que a informação seja um
pouco mais difícil de ser assimilada, pois é preciso
lembrar das informações que saíram da tela.

É recomendável limitar o tamanho da página para duas
ou três telas de informação, no formato 1024 X 768
pixels. Isso assegura que o usuário não precise rolar a
tela muitas vezes.

Tamanho da página

O ideal é que todos os conteúdos relacionados estejam
em uma página, o que torna muito mais fácil a
atualização e o gerenciamento.

Se houver muita informação para exibir, o ideal é
agrupar os tópicos relacionados em uma página e
fornecer links para outras páginas.

Leitura mais agradável

Se houver muita informação para exibir, o ideal é
agrupar os tópicos relacionados em uma página e
fornecer links para outras páginas.

Pode-se tornar a página mais atraente se balancear a
quantidade de texto e imagens no lado esquerdo e
direito e nas metades de cima e de baixo da página,
tornando-as mais simétricas.

Organização de páginas web

Adicionar títulos e rótulos para descrever o conteúdo de
cada página web.

Agrupar elementos relacionados, desenhar caixas ao
redor dos elementos e usar as mesmas fontes para
títulos parecidos.

Fatores que afetam a
legibilidade da página
● Caracteres Maiúsculos: letras maiúsculas
podem ser usadas nos títulos para chamar a
atenção do usuário. Mas deve-se evitar a
utilização de letras maiúsculas nos textos, pois
reduz a legibilidade.
● Abreviações: deve-se usar abreviações de

padrão universal ou acrônimos somente quando
o espaço em branco na sua página web for
limitado. Avenida – Av.; Número – Nº; Limitada –
Ltda.; Departamento – Dep.; Página – pág

Formulários e Botões
Tipos de formulários:
● de preechimento
● de lista de opções
● Livre

Como um formulário é formado ?
●Um formulário é formado por rótulos e campos

de entrada.
●Os rótulos descrevem os dados que serão

digitados.
●Campos de entrada são as áreas nas quais o

usuário digita as informações correspondentes
a cada rótulo


O formulário onde o internauta digita os dados
manualmente é chamado de formulário de
preenchimento. Por exemplo, no formulário exibido
abaixo, o internauta precisa digitar os valores
pedidos.

Um formulário onde o internauta seleciona um valor entre
várias opções é chamado de formulário de lista de opções.

O formulário onde o internauta pode digitar livremente como
em um processador de texto é chamado de formulário livre.

Para projetar um formulário de maneira eficiente, você
precisa antecipar a necessidade do internauta.
Para isto, precisará saber a frequência e sequência das
tarefas que ele executa.

Dependendo da natureza das tarefas que ele executa, você
adicionará rótulos, tabelas e links ao seu formulário.

Adicionar uma tabela no seu formulário aumenta a
eficiência, já que pode-se receber pedidos de mais de um
item usando o mesmo formulário.

Dois elementos importantes para fazer o projeto de um
formulário são os rótulos e campos de entrada.

Além de projetar rótulos consistentes, únicos, e que possam
ser entendidos, é preciso também organizar os campos de
maneira eficaz.

Faz-se necessário alinhar os rótulos para assegurar que
todos terminem no começo das suas respectivas caixas de
entrada. E colocar o rótulo de maneira consistente, a
esquerda ou acima da caixa de entrada

Os campos relacionados devem ser agrupados usando
colunas. Por exemplo, Nome, Endereço e Telefone juntos
como se fossem um grupo lógico de informação. É preciso
arrumar os campos tanto na horizontal, da esquerda para
direita, quanto na vertical, de cima para baixo.

Um botão é um objeto que faz alguma coisa quando é
ativado. Por exemplo, quando você clica no botão, você vê
uma página que contém informações na web.

Um botão é projetado dependendo da informação que se
quer enviar ao internauta.

Pode-se exibir a ação associada com um botão mostrando
uma mensagem quando o internauta move o mouse sobre
o botão. Por exemplo, quando se move o mouse sobre o
botão Quí, aparece uma mensagem dizendo Portal de
Química.

Os botões que você adiciona precisam estar de acordo com
o design da sua página web.

Botões
Tentar projetar botões que se possa reutilizar na
apresentação web. Isso reduz a quantidade de imagens e
códigos a necessários, além de tornar sua página web
consistente.

Usar formas regulares

Pode-se adicionar sons para acompanhar o clique de um
botão.

Os botões precisam ser consistentes. Por exemplo, voltar
ao normal depois de clicado quando a ação associada ao
botão for executada.

Botões
Pode-se exibir a ação associada com um botão mostrando
uma mensagem quando o internauta move o mouse sobre
o botão. Por exemplo, quando se move o mouse sobre o
botão Quí, aparece uma mensagem dizendo Portal de
Química.

Fundamentosdowebdesign

Mais conteúdo relacionado

Mais procurados (10)

Destaque (12)

Semelhante a Fundamentosdowebdesign (20)

Mais de Jaqueline Franco (14)

Fundamentosdowebdesign